diff --git a/README.md b/README.md
index 89e7945fb041b24fdc6f5e86cc4437756a17eb0f..1fe33fe744716512ddfeb592a6d5e42ecea1fd15 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,8 @@ To enable Visual Debugger:
 2. Enable the module.
 3. Make sure Twig debug mode is activated in Drupal (`admin/config/development/settings`); the module won't be able to do its job if debug comments aren't rendered in the source code. 
 3. Go to the admin interface (`admin/config/development/visual-debugger`). Make sure **Use Visual Debugger on frontend theme** is activated for frontend theme debugging. Alternatively, users might also debug the backend by activating **Use Visual Debugger on admin theme**.
-4. Nothing else :-)
+4. [Refer to the Cache debugging section](#cache-debugging) for instructions on how to activate cache debugging on Visual Debugger. 
+5. Nothing else :-)
 
 ### Theme debugging.
 
@@ -36,7 +37,25 @@ For convenience, users might want to deactivate the Visual Debugger, and the deb
 
 Users may also resize the fly-out window to make it wider or narrower by click-dragging the rounded handle at the edge of the fly-out window.
 
-User preferences for fly-out window width and Visual Debugger activation are stored in the browser and recovered every time a new page is loaded. 
+User preferences for fly-out window width and Visual Debugger activation are stored in the browser and recovered every time a new page is loaded.
+
+### Cache debugging
+
+Additionally, users are also able to see cache debug information which is printed to the source code _when render caching is activated_. [Refer to this page in Drupal.org for instructions on how to activate render cache debugging](https://www.drupal.org/docs/develop/development-tools/disabling-and-debugging-caching#s-enable-render-cache-debugging).
+
+When the script identifies cache information is being pumped to the source code, it will activate some additional debug blocks for each of the selected elements on the page:
+- Cach Hit
+- Cache Tags
+- Cache Contexts
+- Cache Keys
+- Cache Max-Age
+- Pre-Bubbling Cache Tags
+- Pre-Bubbling Cache Contexts
+- Pre-Bubbling Cache Keys
+- Pre-Bubbling Cache Max-Age
+- Rendering Time
+
+Elements that do carry cache data will display the corresponding cache information when selected; elements without any associated cache information will display the label "Not available" under each corresponding block.
 
 ### Limmitations.
 
@@ -47,22 +66,14 @@ Visual Debugger was originally developed with desktop screen sizes in mind. It h
 ### Development roadmap.
 
 This is the roadmap for module improvements:
-- Apply extended cache information, when available, on elements carrying that type of information on the source code. This cache data can potentially be pulled to the frontend (still subject to an in-depth analysis for its feasibility):
-  - Cache hit
-  - Cache tags
-  - Cache contexts
-  - Cache keys
-  - Pre-bubbling cache contexts
-  - Pre-bubbling cache keys
-- Create tabbed navigation to split the display of additional information, and help controller share a lot more valuable information to the user.
-  - ~~Create new tab `Selected` to display information on the item that is currently selected by the user.~~
-  - ~~Create new tab `List`. List all the page elements in the order they show up on the page. Selected item can be triggered from the items on this tab.~~
-  - Create new tab `Aggretate`. Displays an aggregated/consolidated list of page elements by object type. The established color codes should be present here as a visual cue. Display the number of times each object type is present on the page.
+- Display wrong theme suggestions: when theme suggestions not properly formatted are aggregated via custom module or theme, the debug parser delivers that information on the source code, so users know a wrong theme suggestion has been provided. This information should also be delivered for selected elements.
+- Use the existing tabbed navigation to display more valuable information to the user:
+  - Create new tab `Aggretate` or `Filter`. Displays an aggregated/consolidated list of page elements by object type. The established color codes should be present here as a visual cue. Display the number of times each object type is present on the page.
     - Beside each object type tag, display a checkbox delivering users the ability to activate/deactivate all the components of a given type at once.
-  - Create a new tab `Configuration`. This tab can be represented by a coil icon only. 
-- Add the ability to deactivate/disable individual layers so that users can more easily achieve layers underneath other layers.
-  - ~~On `List`, add the ability to activate/deactivate layers individually.~~
-  - On `Aggregate`, add the ability to activate/deactivate groups of layers by object type.
+    - Grant users the ability to filter elements carrying cache debug information.
+    - Grant users the ability to filter elements carrying wrong theme suggestions.
+  - Create a new tab `Configuration`. This tab can be represented by a coil icon only.
+- Analyze and fix a problem with an horizontal scrollbar sometimes being displayed on the page because layers within the wrapper element `.visual-debugger visual-debugger--base` maye occupy a space which is wider than the available screen width.
 
 ### Development roadmap - Complete tasks.
 
@@ -73,4 +84,20 @@ These are the complete tasks in the development roadmap.
 - Add the ability to deactivate/disable the `Selected element` from within the controller block.
 - ~~Extend the custom object type colors to the overlay layers, instead of the vanilla, default yellow.~~
 - ~~Change the hover behavior to be more subtle: make the custom object type color less transparent, but avoid excess (current approach seems to be exaggerated).~~
-- ~~Apply a special style to the selected (default) element. Currently, it lacks a custom style. Selected elements should be highlighted all the time. The ideal solution could be one that makes its custom background (object type related) even less transparent.~~
\ No newline at end of file
+- ~~Create tabbed navigation to split the display of additional information, and help controller share a lot more valuable information to the user.~~
+  - ~~Create new tab `Selected` to display information on the item that is currently selected by the user.~~
+  - ~~Create new tab `List`. List all the page elements in the order they show up on the page. Selected item can be triggered from the items on this tab.~~
+- ~~Apply a special style to the selected (default) element. Currently, it lacks a custom style. Selected elements should be highlighted all the time. The ideal solution could be one that makes its custom background (object type related) even less transparent.~~
+- ~~Add the ability to deactivate/disable individual layers so that users can more easily achieve layers underneath other layers.~~
+  - ~~On `List`, add the ability to activate/deactivate layers individually.~~
+- ~~Apply extended cache information, when available, on elements carrying that type of information on the source code. This cache data can potentially be pulled to the frontend (still subject to an in-depth analysis for its feasibility):~~
+  - ~~Cach Hit~~
+  - ~~Cache Tags~~
+  - ~~Cache Contexts~~
+  - ~~Cache Keys~~
+  - ~~Cache Max-Age~~
+  - ~~Pre-Bubbling Cache Tags~~
+  - ~~Pre-Bubbling Cache Contexts~~
+  - ~~Pre-Bubbling Cache Keys~~
+  - ~~Pre-Bubbling Cache Max-Age~~
+  - ~~Rendering Time~~
diff --git a/css/dist/vd.css b/css/dist/vd.css
index 0b29d10cc0c15e0b48de522c6e370ed06f93a469..d83c162f60b99489dacaa8fa1a45e5c4c25115ef 100644
--- a/css/dist/vd.css
+++ b/css/dist/vd.css
@@ -1,842 +1,854 @@
 /**
   * Global.
   */
-  .visual-debugger {
-    --vd-z-index--base: 10000;
-    --vd-transition-speed: .25s;
-    --vd-font-family--monospace: "Courier New", monospace;
-    --vd-color--gray-10: #f2f2f2;
-    --vd-color--gray-10--rgb: 242, 242, 242;
-    --vd-color--gray-20: #e6e6e6;
-    --vd-color--gray-20--rgb: 230, 230, 230;
-    --vd-color--gray-30: #ccc;
-    --vd-color--gray-30--rgb: 204, 204, 204;
-    --vd-color--gray-40: #b3b3b3;
-    --vd-color--gray-40--rgb: 179, 179, 179;
-    --vd-color--gray-50: #999999;
-    --vd-color--gray-50--rgb: 153, 153, 153;
-    --vd-color--gray-60: #808080;
-    --vd-color--gray-60--rgb: 128, 128, 128;
-    --vd-color--gray-70: #666;
-    --vd-color--gray-70--rgb: 102, 102, 102;
-    --vd-color--gray-80: #4d4d4d;
-    --vd-color--gray-80--rgb: 77, 77, 77;
-    --vd-color--gray-90: #333;
-    --vd-color--gray-90--rgb: 51, 51, 51;
-    --vd-color--gray-100: #1a1a1a;
-    --vd-color--gray-100--rgb: 26, 26, 26;
-    --vd-color--light-blue: #99ccff;
-    --vd-color--light-green: #99ffcc;
-    --vd-color--light-red: #ff9999;
-    --vd-color--light-cyan: #99ffff;
-    --vd-color--light-magenta: #ff99ff;
-    --vd-color--light-yellow: #ffff99;
-    --vd-color--light-gray: #e6e6e6;
-    --vd-color--light-teal: #99ffff;
-    --vd-color--light-purple: #cc99ff;
-    --vd-color--light-olive: #ccff99;
-    --vd-color--white: #fff;
-    --vd-color--white--rgb: 255, 255, 255;
-    --vd-color--dark-blue: #000033;
-    --vd-color--dark-blue--rgb: 0, 0, 51;
-    --vd-color--dark-green: #003300;
-    --vd-color--dark-green--rgb: 0, 51, 0;
-    --vd-color--dark-red: #330000;
-    --vd-color--dark-red--rgb: 51, 0, 0;
-    --vd-color--dark-cyan: #003333;
-    --vd-color--dark-cyan--rgb: 0, 51, 51;
-    --vd-color--dark-magenta: #330033;
-    --vd-color--dark-magenta--rgb: 51, 0, 51;
-    --vd-color--dark-yellow: #333300;
-    --vd-color--dark-yellow--rgb: 51, 51, 0;
-    --vd-color--dark-gray: #333333;
-    --vd-color--dark-gray--rgb: 51, 51, 51;
-    --vd-color--mid-blue: #000066;
-    --vd-color--mid-blue--rgb: 0, 0, 102;
-    --vd-color--mid-green: #006600;
-    --vd-color--mid-green--rgb: 0, 102, 0;
-    --vd-color--mid-red: #660000;
-    --vd-color--mid-red--rgb: 102, 0, 0;
-    --vd-color--mid-cyan: #006666;
-    --vd-color--mid-cyan--rgb: 0, 102, 102;
-    --vd-color--mid-magenta: #660066;
-    --vd-color--mid-magenta--rgb: 102, 0, 102;
-    --vd-color--mid-yellow: #666600;
-    --vd-color--mid-yellow--rgb: 102, 102, 0;
-    --vd-color--mid-gray: #666666;
-    --vd-color--mid-gray--rgb: 102, 102, 102;
-    --vd-color--dark-teal: #006666;
-    --vd-color--dark-teal--rgb: 0, 102, 102;
-    --vd-color--dark-purple: #660066;
-    --vd-color--dark-purple--rgb: 102, 0, 102;
-    --vd-color--dark-olive: #666600;
-    --vd-color--dark-olive--rgb: 102, 102, 0;
-    --vd-color--dark-brown: #663300;
-    --vd-color--dark-brown--rgb: 102, 51, 0;
-    --vd-color--mid-teal: #009999;
-    --vd-color--mid-teal--rgb: 0, 153, 153;
-    --vd-color--mid-purple: #990099;
-    --vd-color--mid-purple--rgb: 153, 0, 153;
-    --vd-color--mid-olive: #999900;
-    --vd-color--mid-olive--rgb: 153, 153, 0;
-    --vd-color--mid-brown: #996600;
-    --vd-color--mid-brown--rgb: 153, 102, 0;
-    --vd-color--dark-navy: #000099;
-    --vd-color--dark-navy--rgb: 0, 0, 153;
-    --vd-color--dark-maroon: #990000;
-    --vd-color--dark-maroon--rgb: 153, 0, 0;
-    --vd-color--dark-forest: #009900;
-    --vd-color--dark-forest--rgb: 0, 153, 0;
-    --vd-color--mid-navy: #0000CC;
-    --vd-color--mid-navy--rgb: 0, 0, 204;
-    --vd-color--mid-maroon: #CC0000;
-    --vd-color--mid-maroon--rgb: 204, 0, 0;
-    --vd-color--mid-forest: #00CC00;
-    --vd-color--mid-forest--rgb: 0, 204, 0;
-    --vd-color--dark-charcoal: #333333;
-    --vd-color--dark-charcoal--rgb: 51, 51, 51;
-    --vd-color--mid-charcoal: #666666;
-    --vd-color--mid-charcoal--rgb: 102, 102, 102;
-    --vd-color--gray: gray;
-    --vd-color--gray--rgb: 128, 128, 128;
-    --vd-tag--color: var(--vd-color--white);
-    --vd-tag--display: inline-block;
-    --vd-tag--line-height: 1.125;
-    --vd-tag--padding: calc(var(--vd-controller--gutter) * .2) calc(var(--vd-controller--gutter) * .4);
-    --vd-tag--empty--background-color: var(--vd-color--gray-20);
-    --vd-tag--empty--color: var(--vd-color--gray-70);
-    --vd-tag--empty--font-style: italic;
-    --vd-color--object-type: var(--vd-color--gray--rgb);
-    --vd-color--object-type--page: var(--vd-color--gray--rgb);
-    --vd-color--object-type--region: var(--vd-color--mid-teal--rgb);
-    --vd-color--object-type--block: var(--vd-color--mid-olive--rgb);
-    --vd-color--object-type--field: var(--vd-color--dark-forest--rgb);
-    --vd-color--object-type--menu: var(--vd-color--mid-brown--rgb);
-    --vd-color--object-type--container: var(--vd-color--dark-blue--rgb);
-    --vd-color--object-type--feed_icon: var(--vd-color--dark-teal--rgb);
-    --vd-color--object-type--form: var(--vd-color--dark-olive--rgb);
-    --vd-color--object-type--form_element: var(--vd-color--dark-forest--rgb);
-    --vd-color--object-type--form_element_label: var(--vd-color--dark-brown--rgb);
-    --vd-color--object-type--image: var(--vd-color--dark-gray--rgb);
-    --vd-color--object-type--image_formatter: var(--vd-color--dark-teal--rgb);
-    --vd-color--object-type--input: var(--vd-color--dark-olive--rgb);
-    --vd-color--object-type--menu: var(--vd-color--dark-brown--rgb);
-    --vd-color--object-type--node: var(--vd-color--dark-purple--rgb);
-    --vd-color--object-type--off_canvas_page_wrapper: var(--vd-color--mid-forest--rgb);
-    --vd-color--object-type--page_title: var(--vd-color--dark-maroon--rgb);
-    --vd-color--object-type--toolbar: var(--vd-color--dark-blue--rgb);
-    --vd-color--object-type--username: var(--vd-color--dark-teal--rgb);
-    --vd-color--object-type--views_view: var(--vd-color--dark-olive--rgb);
-    --vd-color--object-type--views_view_unformatted: var(--vd-color--dark-forest--rgb);
-    --vd-color--shadow--rgb: 128, 128, 128;
-    --vd-click-drag-button--background-color: var(--vd-color--gray-30);
-    --vd-click-drag-button--background-color--on-activated: var(--vd-color--gray-10);
-    --vd-click-drag-button--background-color--on-activated--active: var(--vd-color--gray-30);
-    --vd-click-drag-button--border: solid 1px var(--vd-color--mid-teal);
-    --vd-click-drag-button--border-radius: 3.125rem;
-    --vd-click-drag-button--cursor: not-allowed;
-    --vd-click-drag-button--cursor--on-activated: grab;
-    --vd-click-drag-button--cursor--on-activated--active: grabbing;
-    --vd-click-drag-button--opacity: 0.5;
-    --vd-click-drag-button--opacity--on-activated: 1;
-    --vd-click-drag-button--size: 3rem;
-    --vd-click-drag-button--top: 50%;
-    --vd-click-drag-button--transform: translateY(-50%);
-    --vd-click-drag-button--transform--on-activated--hover: translateY(-50%) scale(1.15);
-    --vd-click-drag-button--transform-origin: center center;
-    --vd-click-drag-button--z-index: 10;
-    --vd-object-type--transparency: .05;
-    --vd-object-type--transparency--hover: .35;
-    --vd-object-type--transparency--selected: .65;
-    --vd-checkbox-toggle-wrapper--align-items: center;
-    --vd-checkbox-toggle-wrapper--cursor: pointer;
-    --vd-checkbox-toggle-wrapper--flex-direction: row;
-    --vd-checkbox-toggle-wrapper--column-gap: calc(var(--vd-controller--gutter) * .5);
-    --vd-checkbox-toggle-wrapper--overflow-x: hidden;
-    --vd-checkbox-toggle--flex: 0 0 var(--vd-checkbox-toggle--width);
-    --vd-checkbox-toggle--height: var(--vd-checkbox-toggle--width);
-    --vd-checkbox-toggle--opacity: 0;
-    --vd-checkbox-toggle--position: absolute;
-    --vd-checkbox-toggle--width: 1.25rem;
-    --vd-shadow--transparency: .2;
-    --vd-shadow--blur: 15px;
-    --vd-shadow--full: 0 0 var(--vd-shadow--blur) 0 rgba(var(--vd-color--shadow--rgb), var(--vd-shadow--transparency)), 0 0 var(--vd-shadow--blur) 0 rgba(var(--vd-color--shadow--rgb), var(--vd-shadow--transparency));
-    --vd-icon--font-size: 1.15rem;
-    --vd-icon--font-size--mid-large: 1.5rem;
-    --vd-icon--font-size--large: 1.75rem;
-    --vd-icon--color--selected-true: var(--vd-color--mid-green);
-    --vd-icon--color--selected-false: var(--vd-color--mid-maroon);
-    --vd-base--left: 0;
-    --vd-base--position: absolute;
-    --vd-base--top: 0;
-    --vd-base--z-index: 10000;
-    --vd-base--display--on-deactivated: none;
-    --vd-base--pointer-events--on-deactivated: none;
-    --vd-instance--background-blend-mode: difference;
-    --vd-instance--position: absolute;
-    --vd-instance--border: solid 1px var(--vd-color--gray-40);
-    --vd-controller--gutter: 32px;
-    --vd-controller--background-color: var(--vd-color--white);
-    --vd-controller--border-radius: 0;
-    --vd-controller--bottom: 0;
-    --vd-controller--box-shadow: var(--vd-shadow--full);
-    --vd-controller--font-size: .875rem;
-    --vd-controller--flex-direction: column;
-    --vd-controller--font-size--title: 1.25rem;
-    --vd-controller--h3--border-bottom: solid 0.125rem var(--vd-color--gray-30);
-    --vd-controller--h3--font-size: 1.25rem;
-    --vd-controller--max-width: 50%;
-    --vd-controller--min-width: 9.375rem;
-    --vd-controller--padding: 0;
-    --vd-controller--position: fixed;
-    --vd-controller--right: calc(var(--vd-controller--max-width) * -1);
-    --vd-controller--top: 0;
-    --vd-controller--transform--on-deactivated: translateX(-0.625rem);
-    --vd-controller--z-index: calc(var(--vd-z-index--base) + 1000);
-    --vd-tabbed-navigation--background-color: transparent;
-    --vd-tabbed-navigation--border-bottom: solid 0.125rem var(--vd-color--gray-30);
-    --vd-tabbed-navigation--margin-bottom: calc(var(--vd-tabbed-navigation--separator--height) * -1);
-    --vd-tabbed-navigation--padding: 0;
-    --vd-tabbed-navigation--z-index: 5;
-    --vd-tabbed-navigation--tabs--background-color: var(--vd-color--white);
-    --vd-tabbed-navigation--tabs--padding: var(--vd-controller--gutter) var(--vd-controller--gutter) 0 var(--vd-controller--gutter);
-    --vd-tabbed-navigation--separator--background: linear-gradient(to bottom, var(--vd-color--gray-20) 0%, rgba(var(--vd-color--gray-20--rgb), 0) 100%);
-    --vd-tabbed-navigation--separator--height: 2.1875rem;
-    --vd-tabbed-navigation--tab--align-items: center;
-    --vd-tabbed-navigation--tab--background-color: var(--vd-color--gray-40);
-    --vd-tabbed-navigation--tab--border--reference: solid 1px var(--vd-color--gray-60);
-    --vd-tabbed-navigation--tab--border-bottom: 0;
-    --vd-tabbed-navigation--tab--border-left: var(--vd-tabbed-navigation--tab--border--reference);
-    --vd-tabbed-navigation--tab--border-right: var(--vd-tabbed-navigation--tab--border--reference);
-    --vd-tabbed-navigation--tab--border-top: var(--vd-tabbed-navigation--tab--border--reference);
-    --vd-tabbed-navigation--tab--border-radius: 0.5rem 0.5rem 0 0;
-    --vd-tabbed-navigation--tab--color: var(--vd-color--gray-70);
-    --vd-tabbed-navigation--tab--column-gap: calc(var(--vd-controller--gutter) * .3);
-    --vd-tabbed-navigation--tab--cursor: pointer;
-    --vd-tabbed-navigation--tab--font-size: 1rem;
-    --vd-tabbed-navigation--tab--font-weight: normal;
-    --vd-tabbed-navigation--tab--margin-right: -0.125rem;
-    --vd-tabbed-navigation--tab--padding: calc(var(--vd-controller--gutter) * .4) calc(var(--vd-controller--gutter) * .6);
-    --vd-tabbed-navigation--tab--background-color--hover: var(--vd-color--gray-30);
-    --vd-tabbed-navigation--tab--transform--hover: scale(1.1);
-    --vd-tabbed-navigation--tab--background-color--active: var(--vd-color--gray-20);
-    --vd-tabbed-navigation--tab--font-weight--active: bold;
-    --vd-tabbed-navigation--tab--transform--active: translateY(0.125rem);
-    --vd-tabbed-navigation--tab--transform--not-active: translateY(0.3125rem);
-    --vd-tabbed-navigation--tab--z-index--active: 5;
-    --vd-tabbed-navigation--tab--selected--size: 0.625rem;
-    --vd-tabbed-navigation--tab--selected--background-color: var(--vd-color--white);
-    --vd-tabbed-navigation--tab--selected--border-radius: 3.125rem;
-    --vd-nav-target--border-top: var(--vd-tabbed-navigation--tab--border--reference);
-    --vd-nav-target--z-index: 0;
-    --vd-active-element--margin: 0;
-    --vd-active-element--padding: var(--vd-controller--gutter);
-    --vd-active-element--info--column-gap: calc(var(--vd-controller--gutter) * .5);
-    --vd-active-element--info--flex-direction: row;
-    --vd-selected-element--background-color: var(--vd-color--gray-10);
-    --vd-selected-element--padding: var(--vd-controller--gutter);
-    --vd-selected-element--info--column-gap: calc(var(--vd-controller--gutter) * .5);
-    --vd-selected-element--info--flex-direction: row;
-    --vd-list-element--background-color: var(--vd-color--gray-10);
-    --vd-list-element--padding: var(--vd-controller--gutter);
-    --vd-list-element--content--flex-direction: column;
-    --vd-list-element--content--gap: calc(var(--vd-controller--gutter) * .125);
-    --vd-list-element--list-item--gap: calc(var(--vd-controller--gutter) * .25);
-    --vd-list-element--list-item--flex-direction: row;
-    --vd-list-element--list-item--activation--disabled--text-decoration: line-through;
-    --vd-list-element--list-item--activation--disabled--opacity: .3;
-    --vd-list-element--list-item--activation--padding: 0.125rem 0.5rem;
-    --vd-list-element--list-item--visibility--flex: 0 0 1.75rem;
-    --vd-list-element--list-item--visibility--margin-left: auto;
-    --vd-content-copy-data--align-items: center;
-    --vd-content-copy-data--column-gap: calc(var(--vd-controller--gutter) * .25);
-    --vd-content-copy-data--flex-direction: row;
-    --vd-content-copy-data--margin: calc(var(--vd-controller--gutter) * .25) 0;
-    --vd-content-copy-data--button--background-color: transparent;
-    --vd-content-copy-data--button--border: 0;
-    --vd-content-copy-data--button--transform--hover: scale(1.2);
-    --vd-controller--input--background-color: var(--vd-color--gray-10);
-    --vd-controller--input--background-color--hover: var(--vd-color--gray-30);
-    --vd-controller--input--border: solid 0.125rem var(--vd-color--gray-40);
-    --vd-controller--input--border--focus: solid 0.125rem var(--vd---vd-color--mid-teal);
-    --vd-controller--input--border-radius: 0.3125rem;
-    --vd-controller--input--font-family: var(--vd-font-family--monospace);
-    --vd-controller--input--margin: 0;
-    --vd-controller--input--overflow: hidden;
-    --vd-controller--input--padding: calc(var(--vd-controller--gutter) * .125) calc(var(--vd-controller--gutter) * .5);
-    --vd-h--margin-bottom: calc(var(--vd-controller--gutter) * .5);
-    --vd-h--margin-top: 0;
-    --vd-controller--activation-form--background-color: var(--vd-color--gray-10);
-    --vd-controller--activation-form--border-radius: 0.5rem;
-    --vd-controller--activation-form--margin-left: 0;
-    --vd-controller--activation-form--margin-top: 0;
-    --vd-controller--activation-form--padding: calc(var(--vd-controller--gutter) * .5);
-    --vd-controller--activation-form--background-color--on-deactivated: var(--vd-color--white);
-    --vd-controller--activation-form--transform--on-deactivated: translateX(-55px);
-    --vd-controller--activation-form-wrapper--align-items: center;
-    --vd-controller--activation-form-wrapper--column-gap: var(--vd-controller--gutter);
-    --vd-controller--activation-form-wrapper--flex-direction: row;
-    --vd-controller--activation-form-wrapper--justify-content: flex-start;
-    --vd-controller--activation-form-wrapper--flex-direction: row;
-    --vd-controller--content-auto-scroll--background-color: transparent;
-    --vd-controller--content-auto-scroll--margin: 0;
-    --vd-controller--content-auto-scroll--overflow-y: auto;
-    --vd-controller--content-auto-scroll--padding: 0;
-  }
-  
-  .visual-debugger .tag {
-    background-color: rgb(var(--vd-color--object-type));
-    color: var(--vd-tag--color);
-    display: var(--vd-tag--display);
-    line-height: var(--vd-tag--line-height);
-    padding: var(--vd-tag--padding);
-  }
-  .visual-debugger .tag--object-type--block {
-    --vd-color--object-type: var(--vd-color--object-type--block);
-  }
-  .visual-debugger .tag--object-type--container {
-    --vd-color--object-type: var(--vd-color--object-type--container);
-  }
-  .visual-debugger .tag--object-type--feed_icon {
-    --vd-color--object-type: var(--vd-color--object-type--feed_icon);
-  }
-  .visual-debugger .tag--object-type--field {
-    --vd-color--object-type: var(--vd-color--object-type--field);
-  }
-  .visual-debugger .tag--object-type--form {
-    --vd-color--object-type: var(--vd-color--object-type--form);
-  }
-  .visual-debugger .tag--object-type--form_element {
-    --vd-color--object-type: var(--vd-color--object-type--form_element);
-  }
-  .visual-debugger .tag--object-type--form_element_label {
-    --vd-color--object-type: var(--vd-color--object-type--form_element_label);
-  }
-  .visual-debugger .tag--object-type--image {
-    --vd-color--object-type: var(--vd-color--object-type--image);
-  }
-  .visual-debugger .tag--object-type--image_formatter {
-    --vd-color--object-type: var(--vd-color--object-type--image_formatter);
-  }
-  .visual-debugger .tag--object-type--input {
-    --vd-color--object-type: var(--vd-color--object-type--input);
-  }
-  .visual-debugger .tag--object-type--menu {
-    --vd-color--object-type: var(--vd-color--object-type--menu);
-  }
-  .visual-debugger .tag--object-type--node {
-    --vd-color--object-type: var(--vd-color--object-type--node);
-  }
-  .visual-debugger .tag--object-type--off_canvas_page_wrapper {
-    --vd-color--object-type: var(--vd-color--object-type--off_canvas_page_wrapper);
-  }
-  .visual-debugger .tag--object-type--page {
-    --vd-color--object-type: var(--vd-color--object-type--page);
-  }
-  .visual-debugger .tag--object-type--page_title {
-    --vd-color--object-type: var(--vd-color--object-type--page_title);
-  }
-  .visual-debugger .tag--object-type--region {
-    --vd-color--object-type: var(--vd-color--object-type--region);
-  }
-  .visual-debugger .tag--object-type--toolbar {
-    --vd-color--object-type: var(--vd-color--object-type--toolbar);
-  }
-  .visual-debugger .tag--object-type--username {
-    --vd-color--object-type: var(--vd-color--object-type--username);
-  }
-  .visual-debugger .tag--object-type--views_view {
-    --vd-color--object-type: var(--vd-color--object-type--views_view);
-  }
-  .visual-debugger .tag--object-type--views_view_unformatted {
-    --vd-color--object-type: var(--vd-color--object-type--views_view_unformatted);
-  }
-  .visual-debugger .tag--empty {
-    background-color: var(--vd-tag--empty--background-color);
-    color: var(--vd-tag--empty--color);
-    font-style: var(--vd-tag--empty--font-style);
-  }
-  .visual-debugger .object-type {
-    background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency));
-  }
-  .visual-debugger .object-type--hover, .visual-debugger .object-type:hover {
-    background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
-  }
-  .visual-debugger .object-type.instance-element--checked {
-    background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--selected));
-  }
-  .visual-debugger .object-type--block {
-    --vd-color--object-type: var(--vd-color--object-type--block);
-  }
-  .visual-debugger .object-type--container {
-    --vd-color--object-type: var(--vd-color--object-type--container);
-  }
-  .visual-debugger .object-type--feed_icon {
-    --vd-color--object-type: var(--vd-color--object-type--feed_icon);
-  }
-  .visual-debugger .object-type--field {
-    --vd-color--object-type: var(--vd-color--object-type--field);
-  }
-  .visual-debugger .object-type--form {
-    --vd-color--object-type: var(--vd-color--object-type--form);
-  }
-  .visual-debugger .object-type--form_element {
-    --vd-color--object-type: var(--vd-color--object-type--form_element);
-  }
-  .visual-debugger .object-type--form_element_label {
-    --vd-color--object-type: var(--vd-color--object-type--form_element_label);
-  }
-  .visual-debugger .object-type--image {
-    --vd-color--object-type: var(--vd-color--object-type--image);
-  }
-  .visual-debugger .object-type--image_formatter {
-    --vd-color--object-type: var(--vd-color--object-type--image_formatter);
-  }
-  .visual-debugger .object-type--input {
-    --vd-color--object-type: var(--vd-color--object-type--input);
-  }
-  .visual-debugger .object-type--menu {
-    --vd-color--object-type: var(--vd-color--object-type--menu);
-  }
-  .visual-debugger .object-type--node {
-    --vd-color--object-type: var(--vd-color--object-type--node);
-  }
-  .visual-debugger .object-type--off_canvas_page_wrapper {
-    --vd-color--object-type: var(--vd-color--object-type--off_canvas_page_wrapper);
-  }
-  .visual-debugger .object-type--page {
-    --vd-color--object-type: var(--vd-color--object-type--page);
-  }
-  .visual-debugger .object-type--page_title {
-    --vd-color--object-type: var(--vd-color--object-type--page_title);
-  }
-  .visual-debugger .object-type--region {
-    --vd-color--object-type: var(--vd-color--object-type--region);
-  }
-  .visual-debugger .object-type--toolbar {
-    --vd-color--object-type: var(--vd-color--object-type--toolbar);
-  }
-  .visual-debugger .object-type--username {
-    --vd-color--object-type: var(--vd-color--object-type--username);
-  }
-  .visual-debugger .object-type--views_view {
-    --vd-color--object-type: var(--vd-color--object-type--views_view);
-  }
-  .visual-debugger .object-type--views_view_unformatted {
-    --vd-color--object-type: var(--vd-color--object-type--views_view_unformatted);
-  }
-  
-  .visual-debugger [class^=icon-], .visual-debugger [class*=" icon-"] {
-    font-size: var(--vd-icon--font-size);
-  }
-  .visual-debugger .icon-selected-true,
-  .visual-debugger .icon-selected-false,
-  .visual-debugger .icon-slide-resize,
-  .visual-debugger .icon-eye,
-  .visual-debugger .icon-eye-blocked {
-    font-size: var(--vd-icon--font-size--large);
-  }
-  .visual-debugger .icon-selected-true {
-    color: var(--vd-icon--color--selected-true);
-  }
-  .visual-debugger .icon-selected-false {
-    color: var(--vd-icon--color--selected-false);
-  }
-  .visual-debugger .icon-toggle-on,
-  .visual-debugger .icon-toggle-off {
-    background-color: var(--vd-color--white);
-    border-radius: 50px;
-    font-size: var(--vd-icon--font-size--mid-large);
-    line-height: 0.7;
-  }
-  .visual-debugger .icon-checkbox-checked,
-  .visual-debugger .icon-checkbox-unchecked {
-    background-color: var(--vd-color--white);
-    border-radius: 0.1875rem;
-    font-size: var(--vd-icon--font-size--mid-large);
-    line-height: 0.7;
-  }
-  
-  .visual-debugger .checkbox-toggle-wrapper {
-    align-items: var(--vd-checkbox-toggle-wrapper--align-items);
-    column-gap: var(--vd-checkbox-toggle-wrapper--column-gap);
-    cursor: var(--vd-checkbox-toggle-wrapper--cursor);
-    display: flex;
-    flex-direction: var(--vd-checkbox-toggle-wrapper--flex-direction);
-    flex-grow: 1;
-    overflow-x: var(--vd-checkbox-toggle-wrapper--overflow-x);
-    position: relative;
-  }
-  .visual-debugger .checkbox-toggle {
-    cursor: pointer;
-    flex: var(--vd-checkbox-toggle--flex);
-    height: var(--vd-checkbox-toggle--height);
-    opacity: var(--vd-checkbox-toggle--opacity);
-    position: var(--vd-checkbox-toggle--position);
-    width: var(--vd-checkbox-toggle--width);
-  }
-  .visual-debugger .checkbox-toggle + .item-activated,
-  .visual-debugger .checkbox-toggle ~ .item-deactivated {
-    display: none;
-    pointer-events: none;
-  }
-  .visual-debugger .checkbox-toggle:checked + .item-activated, .visual-debugger .checkbox-toggle:not(:checked) ~ .item-deactivated {
-    display: inline-block;
-  }
-  .visual-debugger .checkbox-toggle:not(:checked) + .item-activated, .visual-debugger .checkbox-toggle:checked + .item-deactivated {
-    display: none;
-  }
-  
-  @font-face {
-    font-family: "visual-debugger-icons";
-    src: url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf?6bmvws") format("truetype"), url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff?6bmvws") format("woff"), url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg?6bmvws#visual-debugger-icons") format("svg");
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
-  }
-  [class^=icon-], [class*=" icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: "visual-debugger-icons" !important;
-    speak: never;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .icon-toggle-on:before {
-    content: "\e903";
-  }
-  
-  .icon-toggle-off:before {
-    content: "\e905";
-  }
-  
-  .icon-slide-resize:before {
-    content: "\e904";
-  }
-  
-  .icon-selected-false:before {
-    content: "\e901";
-  }
-  
-  .icon-selected-true:before {
-    content: "\e902";
-  }
-  
-  .icon-copy:before {
-    content: "\e900";
-  }
-  
-  .icon-eye:before {
-    content: "\e9ce";
-  }
-  
-  .icon-eye-blocked:before {
-    content: "\e9d1";
-  }
-  
-  .icon-checkbox-checked:before {
-    content: "\ea52";
-  }
-  
-  .icon-checkbox-unchecked:before {
-    content: "\ea53";
-  }
-  
-  .visual-debugger .instance-element--checked input[type=checkbox], .visual-debugger .instance-element--hover .span-toggle, .visual-debugger .instance-element:hover .span-toggle {
-    opacity: 1;
-  }
-  
-  .visual-debugger--controller .selected-element__suggestions-wrapper, .visual-debugger--controller .selected-element__info-wrapper {
-    margin-bottom: calc(var(--vd-controller--gutter) * 0.75);
-  }
-  
-  .visual-debugger--controller {
-    background-color: var(--vd-controller--background-color);
-    border-radius: var(--vd-controller--border-radius);
-    bottom: var(--vd-controller--bottom);
-    box-shadow: var(--vd-controller--box-shadow);
-    display: flex;
-    flex-direction: var(--vd-controller--flex-direction);
-    font-size: var(--vd-controller--font-size);
-    max-width: var(--vd-controller--max-width);
-    min-width: var(--vd-controller--min-width);
-    padding: var(--vd-controller--padding);
-    position: var(--vd-controller--position);
-    right: var(--vd-controller--right);
-    top: var(--vd-controller--top);
-    transition: right var(--vd-transition-speed), transform var(--vd-transition-speed);
-    z-index: var(--vd-controller--z-index);
-    border-top: var(--vd-nav-target--border-top);
-  }
-  .visual-debugger--controller h1, .visual-debugger--controller h2, .visual-debugger--controller h3, .visual-debugger--controller h4 {
-    margin-bottom: var(--vd-h--margin-bottom);
-    margin-top: var(--vd-h--margin-top);
-  }
-  .visual-debugger--controller h3 {
-    font-size: var(--vd-controller--font-size--title);
-  }
-  .visual-debugger--controller label {
-    cursor: pointer;
-  }
-  .visual-debugger--controller input {
-    background-color: var(--vd-controller--input--background-color);
-    border: var(--vd-controller--input--border);
-    border-radius: var(--vd-controller--input--border-radius);
-    flex: 1;
-    font-family: var(--vd-controller--input--font-family);
-    margin: var(--vd-controller--input--margin);
-    overflow: var(--vd-controller--input--overflow);
-    padding: var(--vd-controller--input--padding);
-    transition: background-color var(--vd-transition-speed);
-  }
-  .visual-debugger--controller input:hover {
-    background-color: var(--vd-controller--input--background-color--hover);
-    box-shadow: var(--vd-shadow--full);
-  }
-  .visual-debugger--controller input:focus {
-    border: var(--vd-controller--input--border--focus);
-  }
-  body.visual-debugger--deactivated .visual-debugger--controller:hover {
-    transform: var(--vd-controller--transform--on-deactivated);
-  }
-  .visual-debugger--controller .activation-form {
-    background-color: var(--vd-controller--activation-form--background-color);
-    border-radius: var(--vd-controller--activation-form--border-radius);
-    margin-left: var(--vd-controller--activation-form--margin-left);
-    margin-top: var(--vd-controller--activation-form--margin-top);
-    padding: var(--vd-controller--activation-form--padding);
-    transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
-  }
-  body.visual-debugger--deactivated .visual-debugger--controller .activation-form {
-    background-color: var(--vd-controller--activation-form--background-color--on-deactivated);
-    transform: var(--vd-controller--activation-form--transform--on-deactivated);
-  }
-  .visual-debugger--controller .activation-form-wrapper {
-    align-items: var(--vd-controller--activation-form-wrapper--align-items);
-    column-gap: var(--vd-controller--activation-form-wrapper--column-gap);
-    display: flex;
-    flex-direction: var(--vd-controller--activation-form-wrapper--flex-direction);
-    justify-content: var(--vd-controller--activation-form-wrapper--justify-content);
-  }
-  .visual-debugger--controller .content-auto-scroll {
-    background-color: var(--vd-controller--content-auto-scroll--background-color);
-    margin: var(--vd-controller--content-auto-scroll--margin);
-    overflow-y: var(--vd-controller--content-auto-scroll--overflow-y);
-    padding: var(--vd-controller--content-auto-scroll--padding);
-  }
-  .visual-debugger--controller .tabbed-navigation {
-    --vd-color--object-type: var(--vd-color--white--rgb);
-    background-color: var(--vd-tabbed-navigation--background-color);
-    padding: var(--vd-tabbed-navigation--padding);
-    margin-bottom: var(--vd-tabbed-navigation--margin-bottom);
-    position: sticky;
-    top: 0;
-    z-index: var(--vd-tabbed-navigation--z-index);
-  }
-  .visual-debugger--controller .tabbed-navigation__tabs {
-    background-color: var(--vd-tabbed-navigation--tabs--background-color);
-    padding: var(--vd-tabbed-navigation--tabs--padding);
-    display: flex;
-    flex-direction: row;
-  }
-  .visual-debugger--controller .tabbed-navigation__tab {
-    align-items: var(--vd-tabbed-navigation--tab--align-items);
-    background-color: var(--vd-tabbed-navigation--tab--background-color);
-    border-bottom: var(--vd-tabbed-navigation--tab--border-bottom);
-    border-left: var(--vd-tabbed-navigation--tab--border-left);
-    border-top: var(--vd-tabbed-navigation--tab--border-top);
-    border-right: var(--vd-tabbed-navigation--tab--border-right);
-    border-radius: var(--vd-tabbed-navigation--tab--border-radius);
-    color: var(--vd-tabbed-navigation--tab--color);
-    column-gap: var(--vd-tabbed-navigation--tab--column-gap);
-    cursor: var(--vd-tabbed-navigation--tab--cursor);
-    display: flex;
-    font-size: var(--vd-tabbed-navigation--tab--font-size);
-    font-weight: var(--vd-tabbed-navigation--tab--font-weight);
-    margin-right: var(--vd-tabbed-navigation--tab--margin-right);
-    padding: var(--vd-tabbed-navigation--tab--padding);
-    position: relative;
-    transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
-  }
-  .visual-debugger--controller .tabbed-navigation__tab:hover {
-    background-color: var(--vd-tabbed-navigation--tab--background-color--hover);
-  }
-  .visual-debugger--controller .tabbed-navigation__tab.active {
-    background-color: var(--vd-tabbed-navigation--tab--background-color--active);
-    color: var(--vd-tabbed-navigation--tab--color--active);
-    font-weight: var(--vd-tabbed-navigation--tab--font-weight--active);
-    position: relative;
-    transform: var(--vd-tabbed-navigation--tab--transform--active);
-    z-index: var(--vd-tabbed-navigation--tab--z-index--active);
-  }
-  .visual-debugger--controller .tabbed-navigation__tab:not(.active) {
-    transform: var(--vd-tabbed-navigation--tab--transform--not-active);
-  }
-  .visual-debugger--controller .tabbed-navigation__tab--selected::before {
-    background-color: rgba(var(--vd-color--object-type), 1);
-    border-radius: var(--vd-tabbed-navigation--tab--selected--border-radius);
-    content: "";
-    width: var(--vd-tabbed-navigation--tab--selected--size);
-    height: var(--vd-tabbed-navigation--tab--selected--size);
-  }
-  .visual-debugger--controller .tabbed-navigation__separator {
-    background: var(--vd-tabbed-navigation--separator--background);
-    border-top: solid 1px #b3b3b3;
-    height: var(--vd-tabbed-navigation--separator--height);
-    position: relative;
-    z-index: 3;
-  }
-  .visual-debugger--controller .nav-target {
-    display: none;
-    position: relative;
-    z-index: var(--vd-nav-target--z-index);
-  }
-  .visual-debugger--controller .nav-target.active {
-    display: block;
-  }
-  .visual-debugger--controller .active-element {
-    margin: var(--vd-active-element--margin);
-    padding: var(--vd-active-element--padding);
-  }
-  .visual-debugger--controller .active-element__info {
-    column-gap: var(--vd-active-element--info--column-gap);
-    display: flex;
-    flex-direction: var(--vd-active-element--info--flex-direction);
-  }
-  .visual-debugger--controller .selected-element {
-    background-color: var(--vd-selected-element--background-color);
-    padding: var(--vd-selected-element--padding);
-  }
-  .visual-debugger--controller .selected-element__info {
-    column-gap: var(--vd-selected-element--info--column-gap);
-    display: flex;
-    flex-direction: var(--vd-selected-element--info--flex-direction);
-  }
-  .visual-debugger--controller .selected-element__template-file-path .label {
-    background-color: var(--vd-color--light-gray);
-    padding: 0 calc(var(--vd-controller--gutter) * 0.25);
-    white-space: nowrap;
-  }
-  .visual-debugger--controller .list {
-    background-color: var(--vd-list-element--background-color);
-    padding: var(--vd-list-element--padding);
-  }
-  .visual-debugger--controller .list__content {
-    display: flex;
-    flex-direction: var(--vd-list-element--content--flex-direction);
-    gap: var(--vd-list-element--content--gap);
-  }
-  .visual-debugger--controller .list-item {
-    display: flex;
-    gap: var(--vd-list-element--list-item--gap);
-    flex-direction: var(--vd-list-element--list-item--flex-direction);
-    align-items: center;
-    justify-content: flex-start;
-  }
-  .visual-debugger--controller .list-item__activation[data-vd-visible=false] {
-    text-decoration: var(--vd-list-element--list-item--activation--disabled--text-decoration);
-    opacity: var(--vd-list-element--list-item--activation--disabled--opacity);
-  }
-  .visual-debugger--controller .list-item__activation label {
-    flex-grow: 1;
-    padding: var(--vd-list-element--list-item--activation--padding);
-    position: relative;
-    transition: background-color var(--vd-transition-speed);
-  }
-  .visual-debugger--controller .list-item__activation[data-vd-list-item-activated=true] label {
-    background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
-  }
-  .visual-debugger--controller .list-item__activation--hover label, .visual-debugger--controller .list-item__activation:hover label {
-    background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
-  }
-  .visual-debugger--controller .list-item__visibility {
-    margin-left: var(--vd-list-element--list-item--visibility--margin-left);
-    flex: 0 0 28px;
-  }
-  .visual-debugger--base {
-    left: var(--vd-base--left);
-    position: var(--vd-base--position);
-    top: var(--vd-base--top);
-    z-index: var(--vd-base--z-index);
-  }
-  body.visual-debugger--deactivated .visual-debugger--base {
-    display: var(--vd-base--display--on-deactivated);
-    pointer-events: var(--vd-base--pointer-events--on-deactivated);
-  }
-  .visual-debugger .instance-element {
-    background-blend-mode: var(--vd-instance--background-blend-mode);
-    border: var(--vd-instance--border);
-    position: var(--vd-instance--position);
-    transition: background-color var(--vd-transition-speed), margin var(--vd-transition-speed), opacity var(--vd-transition-speed), width var(--vd-transition-speed), height var(--vd-transition-speed), top var(--vd-transition-speed), left var(--vd-transition-speed);
-  }
-  .visual-debugger .instance-element input.checkbox-toggle {
-    pointer-events: none;
-    opacity: 0;
-  }
-  .visual-debugger .instance-element--hover, .visual-debugger .instance-element:hover {
-    box-shadow: var(--vd-shadow--full);
-  }
-  .visual-debugger .instance-element[data-vd-visible=false] {
-    opacity: 0;
-    pointer-events: none;
-  }
-  .visual-debugger .instance-element .span-toggle {
-    margin: calc(var(--vd-controller--gutter) * 0.25) calc(var(--vd-controller--gutter) * 0.125);
-    transition: opacity var(--vd-transition-speed);
-  }
-  .visual-debugger .instance-element--unchecked .span-toggle {
-    opacity: 0;
-  }
-  .visual-debugger .click-drag-button {
-    background-color: var(--vd-click-drag-button--background-color);
-    border: var(--vd-click-drag-button--border);
-    border-radius: var(--vd-click-drag-button--border-radius);
-    cursor: var(--vd-click-drag-button--cursor);
-    height: var(--vd-click-drag-button--size);
-    left: calc(var(--vd-click-drag-button--size) * -0.5);
-    opacity: var(--vd-click-drag-button--opacity);
-    position: absolute;
-    top: var(--vd-click-drag-button--top);
-    transform-origin: var(--vd-click-drag-button--transform-origin);
-    transform: var(--vd-click-drag-button--transform);
-    transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
-    width: var(--vd-click-drag-button--size);
-    z-index: var(--vd-click-drag-button--z-index);
-  }
-  body.visual-debugger--activated .visual-debugger .click-drag-button {
-    background-color: var(--vd-click-drag-button--background-color--on-activated);
-    cursor: var(--vd-click-drag-button--cursor--on-activated);
-    opacity: var(--vd-click-drag-button--opacity--on-activated);
-  }
-  body.visual-debugger--activated .visual-debugger .click-drag-button:hover {
-    transform: var(--vd-click-drag-button--transform--on-activated--hover);
-  }
-  body.visual-debugger--activated .visual-debugger .click-drag-button:active {
-    background-color: var(--vd-click-drag-button--background-color--on-activated--active);
-    cursor: var(--vd-click-drag-button--cursor--on-activated--active);
-  }
-  .visual-debugger .content-copy-data {
-    align-items: var(--vd-content-copy-data--align-items);
-    column-gap: var(--vd-content-copy-data--column-gap);
-    display: flex;
-    flex-direction: var(--vd-content-copy-data--flex-direction);
-    margin: var(--vd-content-copy-data--margin);
-  }
-  .visual-debugger .content-copy-data button {
-    background-color: var(--vd-content-copy-data--button--background-color);
-    border: var(--vd-content-copy-data--button--border);
-    cursor: pointer;
-    transition: transform var(--vd-transition-speed);
-  }
-  .visual-debugger .content-copy-data button:hover {
-    transform: var(--vd-content-copy-data--button--transform--hover);
-  }
-  
-  /*# sourceMappingURL=vd.css.map */
-  
\ No newline at end of file
+.visual-debugger {
+  --vd-z-index--base: 10000;
+  --vd-transition-speed: .25s;
+  --vd-font-family--monospace: "Courier New", monospace;
+  --vd-color--gray-10: #f2f2f2;
+  --vd-color--gray-10--rgb: 242, 242, 242;
+  --vd-color--gray-20: #e6e6e6;
+  --vd-color--gray-20--rgb: 230, 230, 230;
+  --vd-color--gray-30: #ccc;
+  --vd-color--gray-30--rgb: 204, 204, 204;
+  --vd-color--gray-40: #b3b3b3;
+  --vd-color--gray-40--rgb: 179, 179, 179;
+  --vd-color--gray-50: #999999;
+  --vd-color--gray-50--rgb: 153, 153, 153;
+  --vd-color--gray-60: #808080;
+  --vd-color--gray-60--rgb: 128, 128, 128;
+  --vd-color--gray-70: #666;
+  --vd-color--gray-70--rgb: 102, 102, 102;
+  --vd-color--gray-80: #4d4d4d;
+  --vd-color--gray-80--rgb: 77, 77, 77;
+  --vd-color--gray-90: #333;
+  --vd-color--gray-90--rgb: 51, 51, 51;
+  --vd-color--gray-100: #1a1a1a;
+  --vd-color--gray-100--rgb: 26, 26, 26;
+  --vd-color--light-blue: #99ccff;
+  --vd-color--light-green: #99ffcc;
+  --vd-color--light-red: #ff9999;
+  --vd-color--light-cyan: #99ffff;
+  --vd-color--light-magenta: #ff99ff;
+  --vd-color--light-yellow: #ffff99;
+  --vd-color--light-gray: #e6e6e6;
+  --vd-color--light-teal: #99ffff;
+  --vd-color--light-purple: #cc99ff;
+  --vd-color--light-olive: #ccff99;
+  --vd-color--white: #fff;
+  --vd-color--white--rgb: 255, 255, 255;
+  --vd-color--dark-blue: #000033;
+  --vd-color--dark-blue--rgb: 0, 0, 51;
+  --vd-color--dark-green: #003300;
+  --vd-color--dark-green--rgb: 0, 51, 0;
+  --vd-color--dark-red: #330000;
+  --vd-color--dark-red--rgb: 51, 0, 0;
+  --vd-color--dark-cyan: #003333;
+  --vd-color--dark-cyan--rgb: 0, 51, 51;
+  --vd-color--dark-magenta: #330033;
+  --vd-color--dark-magenta--rgb: 51, 0, 51;
+  --vd-color--dark-yellow: #333300;
+  --vd-color--dark-yellow--rgb: 51, 51, 0;
+  --vd-color--dark-gray: #333333;
+  --vd-color--dark-gray--rgb: 51, 51, 51;
+  --vd-color--mid-blue: #000066;
+  --vd-color--mid-blue--rgb: 0, 0, 102;
+  --vd-color--mid-green: #006600;
+  --vd-color--mid-green--rgb: 0, 102, 0;
+  --vd-color--mid-red: #660000;
+  --vd-color--mid-red--rgb: 102, 0, 0;
+  --vd-color--mid-cyan: #006666;
+  --vd-color--mid-cyan--rgb: 0, 102, 102;
+  --vd-color--mid-magenta: #660066;
+  --vd-color--mid-magenta--rgb: 102, 0, 102;
+  --vd-color--mid-yellow: #666600;
+  --vd-color--mid-yellow--rgb: 102, 102, 0;
+  --vd-color--mid-gray: #666666;
+  --vd-color--mid-gray--rgb: 102, 102, 102;
+  --vd-color--dark-teal: #006666;
+  --vd-color--dark-teal--rgb: 0, 102, 102;
+  --vd-color--dark-purple: #660066;
+  --vd-color--dark-purple--rgb: 102, 0, 102;
+  --vd-color--dark-olive: #666600;
+  --vd-color--dark-olive--rgb: 102, 102, 0;
+  --vd-color--dark-brown: #663300;
+  --vd-color--dark-brown--rgb: 102, 51, 0;
+  --vd-color--mid-teal: #009999;
+  --vd-color--mid-teal--rgb: 0, 153, 153;
+  --vd-color--mid-purple: #990099;
+  --vd-color--mid-purple--rgb: 153, 0, 153;
+  --vd-color--mid-olive: #999900;
+  --vd-color--mid-olive--rgb: 153, 153, 0;
+  --vd-color--mid-brown: #996600;
+  --vd-color--mid-brown--rgb: 153, 102, 0;
+  --vd-color--dark-navy: #000099;
+  --vd-color--dark-navy--rgb: 0, 0, 153;
+  --vd-color--dark-maroon: #990000;
+  --vd-color--dark-maroon--rgb: 153, 0, 0;
+  --vd-color--dark-forest: #009900;
+  --vd-color--dark-forest--rgb: 0, 153, 0;
+  --vd-color--mid-navy: #0000CC;
+  --vd-color--mid-navy--rgb: 0, 0, 204;
+  --vd-color--mid-maroon: #CC0000;
+  --vd-color--mid-maroon--rgb: 204, 0, 0;
+  --vd-color--mid-forest: #00CC00;
+  --vd-color--mid-forest--rgb: 0, 204, 0;
+  --vd-color--dark-charcoal: #333333;
+  --vd-color--dark-charcoal--rgb: 51, 51, 51;
+  --vd-color--mid-charcoal: #666666;
+  --vd-color--mid-charcoal--rgb: 102, 102, 102;
+  --vd-color--gray: gray;
+  --vd-color--gray--rgb: 128, 128, 128;
+  --vd-tag--color: var(--vd-color--white);
+  --vd-tag--display: inline-block;
+  --vd-tag--line-height: 1.125;
+  --vd-tag--padding: calc(var(--vd-controller--gutter) * .2) calc(var(--vd-controller--gutter) * .4);
+  --vd-tag--empty--background-color: var(--vd-color--gray-20);
+  --vd-tag--empty--color: var(--vd-color--gray-70);
+  --vd-tag--empty--font-style: italic;
+  --vd-color--object-type: var(--vd-color--gray--rgb);
+  --vd-color--object-type--page: var(--vd-color--gray--rgb);
+  --vd-color--object-type--region: var(--vd-color--mid-teal--rgb);
+  --vd-color--object-type--block: var(--vd-color--mid-olive--rgb);
+  --vd-color--object-type--field: var(--vd-color--dark-forest--rgb);
+  --vd-color--object-type--menu: var(--vd-color--mid-brown--rgb);
+  --vd-color--object-type--container: var(--vd-color--dark-blue--rgb);
+  --vd-color--object-type--feed_icon: var(--vd-color--dark-teal--rgb);
+  --vd-color--object-type--form: var(--vd-color--dark-olive--rgb);
+  --vd-color--object-type--form_element: var(--vd-color--dark-forest--rgb);
+  --vd-color--object-type--form_element_label: var(--vd-color--dark-brown--rgb);
+  --vd-color--object-type--image: var(--vd-color--dark-gray--rgb);
+  --vd-color--object-type--image_formatter: var(--vd-color--dark-teal--rgb);
+  --vd-color--object-type--input: var(--vd-color--dark-olive--rgb);
+  --vd-color--object-type--menu: var(--vd-color--dark-brown--rgb);
+  --vd-color--object-type--node: var(--vd-color--dark-purple--rgb);
+  --vd-color--object-type--off_canvas_page_wrapper: var(--vd-color--mid-forest--rgb);
+  --vd-color--object-type--page_title: var(--vd-color--dark-maroon--rgb);
+  --vd-color--object-type--toolbar: var(--vd-color--dark-blue--rgb);
+  --vd-color--object-type--username: var(--vd-color--dark-teal--rgb);
+  --vd-color--object-type--views_view: var(--vd-color--dark-olive--rgb);
+  --vd-color--object-type--views_view_unformatted: var(--vd-color--dark-forest--rgb);
+  --vd-color--shadow--rgb: 128, 128, 128;
+  --vd-click-drag-button--background-color: var(--vd-color--gray-30);
+  --vd-click-drag-button--background-color--on-activated: var(--vd-color--gray-10);
+  --vd-click-drag-button--background-color--on-activated--active: var(--vd-color--gray-30);
+  --vd-click-drag-button--border: solid 1px var(--vd-color--mid-teal);
+  --vd-click-drag-button--border-radius: 3.125rem;
+  --vd-click-drag-button--cursor: not-allowed;
+  --vd-click-drag-button--cursor--on-activated: grab;
+  --vd-click-drag-button--cursor--on-activated--active: grabbing;
+  --vd-click-drag-button--opacity: 0.5;
+  --vd-click-drag-button--opacity--on-activated: 1;
+  --vd-click-drag-button--size: 3rem;
+  --vd-click-drag-button--top: 50%;
+  --vd-click-drag-button--transform: translateY(-50%);
+  --vd-click-drag-button--transform--on-activated--hover: translateY(-50%) scale(1.15);
+  --vd-click-drag-button--transform-origin: center center;
+  --vd-click-drag-button--z-index: 10;
+  --vd-object-type--transparency: .05;
+  --vd-object-type--transparency--hover: .35;
+  --vd-object-type--transparency--selected: .65;
+  --vd-checkbox-toggle-wrapper--align-items: center;
+  --vd-checkbox-toggle-wrapper--cursor: pointer;
+  --vd-checkbox-toggle-wrapper--flex-direction: row;
+  --vd-checkbox-toggle-wrapper--column-gap: calc(var(--vd-controller--gutter) * .5);
+  --vd-checkbox-toggle-wrapper--overflow-x: hidden;
+  --vd-checkbox-toggle--flex: 0 0 var(--vd-checkbox-toggle--width);
+  --vd-checkbox-toggle--height: var(--vd-checkbox-toggle--width);
+  --vd-checkbox-toggle--opacity: 0;
+  --vd-checkbox-toggle--position: absolute;
+  --vd-checkbox-toggle--width: 1.25rem;
+  --vd-shadow--transparency: .2;
+  --vd-shadow--blur: 15px;
+  --vd-shadow--full: 0 0 var(--vd-shadow--blur) 0 rgba(var(--vd-color--shadow--rgb), var(--vd-shadow--transparency)), 0 0 var(--vd-shadow--blur) 0 rgba(var(--vd-color--shadow--rgb), var(--vd-shadow--transparency));
+  --vd-icon--font-size: 1.15rem;
+  --vd-icon--font-size--mid-large: 1.5rem;
+  --vd-icon--font-size--large: 1.75rem;
+  --vd-icon--color--selected-true: var(--vd-color--mid-green);
+  --vd-icon--color--selected-false: var(--vd-color--mid-maroon);
+  --vd-base--left: 0;
+  --vd-base--position: absolute;
+  --vd-base--top: 0;
+  --vd-base--z-index: 10000;
+  --vd-base--display--on-deactivated: none;
+  --vd-base--pointer-events--on-deactivated: none;
+  --vd-instance--background-blend-mode: difference;
+  --vd-instance--position: absolute;
+  --vd-instance--border: solid 1px var(--vd-color--gray-40);
+  --vd-controller--gutter: 32px;
+  --vd-controller--background-color: var(--vd-color--white);
+  --vd-controller--border-radius: 0;
+  --vd-controller--bottom: 0;
+  --vd-controller--box-shadow: var(--vd-shadow--full);
+  --vd-controller--font-size: .875rem;
+  --vd-controller--flex-direction: column;
+  --vd-controller--font-size--title: 1.25rem;
+  --vd-controller--h3--border-bottom: solid 0.125rem var(--vd-color--gray-30);
+  --vd-controller--h3--font-size: 1.25rem;
+  --vd-controller--max-width: 50%;
+  --vd-controller--min-width: 9.375rem;
+  --vd-controller--padding: 0;
+  --vd-controller--position: fixed;
+  --vd-controller--right: calc(var(--vd-controller--max-width) * -1);
+  --vd-controller--top: 0;
+  --vd-controller--transform--on-deactivated: translateX(-0.625rem);
+  --vd-controller--z-index: calc(var(--vd-z-index--base) + 1000);
+  --vd-tabbed-navigation--background-color: transparent;
+  --vd-tabbed-navigation--border-bottom: solid 0.125rem var(--vd-color--gray-30);
+  --vd-tabbed-navigation--margin-bottom: calc(var(--vd-tabbed-navigation--separator--height) * -1);
+  --vd-tabbed-navigation--padding: 0;
+  --vd-tabbed-navigation--z-index: 5;
+  --vd-tabbed-navigation--tabs--background-color: var(--vd-color--white);
+  --vd-tabbed-navigation--tabs--padding: var(--vd-controller--gutter) var(--vd-controller--gutter) 0 var(--vd-controller--gutter);
+  --vd-tabbed-navigation--separator--background: linear-gradient(to bottom, var(--vd-color--gray-20) 0%, rgba(var(--vd-color--gray-20--rgb), 0) 100%);
+  --vd-tabbed-navigation--separator--height: 2.1875rem;
+  --vd-tabbed-navigation--tab--align-items: center;
+  --vd-tabbed-navigation--tab--background-color: var(--vd-color--gray-40);
+  --vd-tabbed-navigation--tab--border--reference: solid 1px var(--vd-color--gray-60);
+  --vd-tabbed-navigation--tab--border-bottom: 0;
+  --vd-tabbed-navigation--tab--border-left: var(--vd-tabbed-navigation--tab--border--reference);
+  --vd-tabbed-navigation--tab--border-right: var(--vd-tabbed-navigation--tab--border--reference);
+  --vd-tabbed-navigation--tab--border-top: var(--vd-tabbed-navigation--tab--border--reference);
+  --vd-tabbed-navigation--tab--border-radius: 0.5rem 0.5rem 0 0;
+  --vd-tabbed-navigation--tab--color: var(--vd-color--gray-70);
+  --vd-tabbed-navigation--tab--column-gap: calc(var(--vd-controller--gutter) * .3);
+  --vd-tabbed-navigation--tab--cursor: pointer;
+  --vd-tabbed-navigation--tab--font-size: 1rem;
+  --vd-tabbed-navigation--tab--font-weight: normal;
+  --vd-tabbed-navigation--tab--margin-right: -0.125rem;
+  --vd-tabbed-navigation--tab--padding: calc(var(--vd-controller--gutter) * .4) calc(var(--vd-controller--gutter) * .6);
+  --vd-tabbed-navigation--tab--background-color--hover: var(--vd-color--gray-30);
+  --vd-tabbed-navigation--tab--transform--hover: scale(1.1);
+  --vd-tabbed-navigation--tab--background-color--active: var(--vd-color--gray-20);
+  --vd-tabbed-navigation--tab--font-weight--active: bold;
+  --vd-tabbed-navigation--tab--transform--active: translateY(0.125rem);
+  --vd-tabbed-navigation--tab--transform--not-active: translateY(0.3125rem);
+  --vd-tabbed-navigation--tab--z-index--active: 5;
+  --vd-tabbed-navigation--tab--selected--size: 0.625rem;
+  --vd-tabbed-navigation--tab--selected--background-color: var(--vd-color--white);
+  --vd-tabbed-navigation--tab--selected--border-radius: 3.125rem;
+  --vd-nav-target--border-top: var(--vd-tabbed-navigation--tab--border--reference);
+  --vd-nav-target--z-index: 0;
+  --vd-active-element--margin: 0;
+  --vd-active-element--padding: var(--vd-controller--gutter);
+  --vd-active-element--info--column-gap: calc(var(--vd-controller--gutter) * .5);
+  --vd-active-element--info--flex-direction: row;
+  --vd-selected-element--background-color: var(--vd-color--gray-10);
+  --vd-selected-element--padding: var(--vd-controller--gutter);
+  --vd-selected-element--info--column-gap: calc(var(--vd-controller--gutter) * .5);
+  --vd-selected-element--info--flex-direction: row;
+  --vd-selected-element--content--flex-direction: column;
+  --vd-selected-element--content--gap: calc(var(--vd-controller--gutter) * 1);
+  --vd-list-element--background-color: var(--vd-color--gray-10);
+  --vd-list-element--padding: var(--vd-controller--gutter);
+  --vd-list-element--content--flex-direction: column;
+  --vd-list-element--content--gap: calc(var(--vd-controller--gutter) * .125);
+  --vd-list-element--list-item--gap: calc(var(--vd-controller--gutter) * .25);
+  --vd-list-element--list-item--flex-direction: row;
+  --vd-list-element--list-item--activation--disabled--text-decoration: line-through;
+  --vd-list-element--list-item--activation--disabled--opacity: .3;
+  --vd-list-element--list-item--activation--padding: 0.125rem 0.5rem;
+  --vd-list-element--list-item--visibility--flex: 0 0 1.75rem;
+  --vd-list-element--list-item--visibility--margin-left: auto;
+  --vd-content-copy-data--align-items: center;
+  --vd-content-copy-data--column-gap: calc(var(--vd-controller--gutter) * .25);
+  --vd-content-copy-data--flex-direction: row;
+  --vd-content-copy-data--margin: calc(var(--vd-controller--gutter) * .25) 0;
+  --vd-content-copy-data--button--background-color: transparent;
+  --vd-content-copy-data--button--border: 0;
+  --vd-content-copy-data--button--transform--hover: scale(1.2);
+  --vd-controller--input--background-color: var(--vd-color--gray-10);
+  --vd-controller--input--background-color--hover: var(--vd-color--gray-30);
+  --vd-controller--input--border: solid 0.125rem var(--vd-color--gray-40);
+  --vd-controller--input--border--focus: solid 0.125rem var(--vd---vd-color--mid-teal);
+  --vd-controller--input--border-radius: 0.3125rem;
+  --vd-controller--input--font-family: var(--vd-font-family--monospace);
+  --vd-controller--input--margin: 0;
+  --vd-controller--input--overflow: hidden;
+  --vd-controller--input--padding: calc(var(--vd-controller--gutter) * .125) calc(var(--vd-controller--gutter) * .5);
+  --vd-h--margin-bottom: calc(var(--vd-controller--gutter) * .5);
+  --vd-h--margin-top: 0;
+  --vd-controller--activation-form--background-color: var(--vd-color--gray-10);
+  --vd-controller--activation-form--border-radius: 0.5rem;
+  --vd-controller--activation-form--margin-left: 0;
+  --vd-controller--activation-form--margin-top: 0;
+  --vd-controller--activation-form--padding: calc(var(--vd-controller--gutter) * .5);
+  --vd-controller--activation-form--background-color--on-deactivated: var(--vd-color--white);
+  --vd-controller--activation-form--transform--on-deactivated: translateX(-55px);
+  --vd-controller--activation-form-wrapper--align-items: center;
+  --vd-controller--activation-form-wrapper--column-gap: var(--vd-controller--gutter);
+  --vd-controller--activation-form-wrapper--flex-direction: row;
+  --vd-controller--activation-form-wrapper--justify-content: flex-start;
+  --vd-controller--activation-form-wrapper--flex-direction: row;
+  --vd-controller--content-auto-scroll--background-color: transparent;
+  --vd-controller--content-auto-scroll--flex-direction: column;
+  --vd-controller--content-auto-scroll--height: 100%;
+  --vd-controller--content-auto-scroll--margin: 0;
+  --vd-controller--content-auto-scroll--overflow-y: auto;
+  --vd-controller--content-auto-scroll--padding: 0;
+}
+
+.visual-debugger .tag {
+  background-color: rgb(var(--vd-color--object-type));
+  color: var(--vd-tag--color);
+  display: var(--vd-tag--display);
+  line-height: var(--vd-tag--line-height);
+  padding: var(--vd-tag--padding);
+}
+.visual-debugger .tag--object-type--block {
+  --vd-color--object-type: var(--vd-color--object-type--block);
+}
+.visual-debugger .tag--object-type--container {
+  --vd-color--object-type: var(--vd-color--object-type--container);
+}
+.visual-debugger .tag--object-type--feed_icon {
+  --vd-color--object-type: var(--vd-color--object-type--feed_icon);
+}
+.visual-debugger .tag--object-type--field {
+  --vd-color--object-type: var(--vd-color--object-type--field);
+}
+.visual-debugger .tag--object-type--form {
+  --vd-color--object-type: var(--vd-color--object-type--form);
+}
+.visual-debugger .tag--object-type--form_element {
+  --vd-color--object-type: var(--vd-color--object-type--form_element);
+}
+.visual-debugger .tag--object-type--form_element_label {
+  --vd-color--object-type: var(--vd-color--object-type--form_element_label);
+}
+.visual-debugger .tag--object-type--image {
+  --vd-color--object-type: var(--vd-color--object-type--image);
+}
+.visual-debugger .tag--object-type--image_formatter {
+  --vd-color--object-type: var(--vd-color--object-type--image_formatter);
+}
+.visual-debugger .tag--object-type--input {
+  --vd-color--object-type: var(--vd-color--object-type--input);
+}
+.visual-debugger .tag--object-type--menu {
+  --vd-color--object-type: var(--vd-color--object-type--menu);
+}
+.visual-debugger .tag--object-type--node {
+  --vd-color--object-type: var(--vd-color--object-type--node);
+}
+.visual-debugger .tag--object-type--off_canvas_page_wrapper {
+  --vd-color--object-type: var(--vd-color--object-type--off_canvas_page_wrapper);
+}
+.visual-debugger .tag--object-type--page {
+  --vd-color--object-type: var(--vd-color--object-type--page);
+}
+.visual-debugger .tag--object-type--page_title {
+  --vd-color--object-type: var(--vd-color--object-type--page_title);
+}
+.visual-debugger .tag--object-type--region {
+  --vd-color--object-type: var(--vd-color--object-type--region);
+}
+.visual-debugger .tag--object-type--toolbar {
+  --vd-color--object-type: var(--vd-color--object-type--toolbar);
+}
+.visual-debugger .tag--object-type--username {
+  --vd-color--object-type: var(--vd-color--object-type--username);
+}
+.visual-debugger .tag--object-type--views_view {
+  --vd-color--object-type: var(--vd-color--object-type--views_view);
+}
+.visual-debugger .tag--object-type--views_view_unformatted {
+  --vd-color--object-type: var(--vd-color--object-type--views_view_unformatted);
+}
+.visual-debugger .tag--empty {
+  background-color: var(--vd-tag--empty--background-color);
+  color: var(--vd-tag--empty--color);
+  font-style: var(--vd-tag--empty--font-style);
+}
+.visual-debugger .object-type {
+  background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency));
+}
+.visual-debugger .object-type--hover, .visual-debugger .object-type:hover {
+  background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
+}
+.visual-debugger .object-type.instance-element--checked {
+  background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--selected));
+}
+.visual-debugger .object-type--block {
+  --vd-color--object-type: var(--vd-color--object-type--block);
+}
+.visual-debugger .object-type--container {
+  --vd-color--object-type: var(--vd-color--object-type--container);
+}
+.visual-debugger .object-type--feed_icon {
+  --vd-color--object-type: var(--vd-color--object-type--feed_icon);
+}
+.visual-debugger .object-type--field {
+  --vd-color--object-type: var(--vd-color--object-type--field);
+}
+.visual-debugger .object-type--form {
+  --vd-color--object-type: var(--vd-color--object-type--form);
+}
+.visual-debugger .object-type--form_element {
+  --vd-color--object-type: var(--vd-color--object-type--form_element);
+}
+.visual-debugger .object-type--form_element_label {
+  --vd-color--object-type: var(--vd-color--object-type--form_element_label);
+}
+.visual-debugger .object-type--image {
+  --vd-color--object-type: var(--vd-color--object-type--image);
+}
+.visual-debugger .object-type--image_formatter {
+  --vd-color--object-type: var(--vd-color--object-type--image_formatter);
+}
+.visual-debugger .object-type--input {
+  --vd-color--object-type: var(--vd-color--object-type--input);
+}
+.visual-debugger .object-type--menu {
+  --vd-color--object-type: var(--vd-color--object-type--menu);
+}
+.visual-debugger .object-type--node {
+  --vd-color--object-type: var(--vd-color--object-type--node);
+}
+.visual-debugger .object-type--off_canvas_page_wrapper {
+  --vd-color--object-type: var(--vd-color--object-type--off_canvas_page_wrapper);
+}
+.visual-debugger .object-type--page {
+  --vd-color--object-type: var(--vd-color--object-type--page);
+}
+.visual-debugger .object-type--page_title {
+  --vd-color--object-type: var(--vd-color--object-type--page_title);
+}
+.visual-debugger .object-type--region {
+  --vd-color--object-type: var(--vd-color--object-type--region);
+}
+.visual-debugger .object-type--toolbar {
+  --vd-color--object-type: var(--vd-color--object-type--toolbar);
+}
+.visual-debugger .object-type--username {
+  --vd-color--object-type: var(--vd-color--object-type--username);
+}
+.visual-debugger .object-type--views_view {
+  --vd-color--object-type: var(--vd-color--object-type--views_view);
+}
+.visual-debugger .object-type--views_view_unformatted {
+  --vd-color--object-type: var(--vd-color--object-type--views_view_unformatted);
+}
+
+.visual-debugger [class^=icon-], .visual-debugger [class*=" icon-"] {
+  font-size: var(--vd-icon--font-size);
+}
+.visual-debugger .icon-selected-true,
+.visual-debugger .icon-selected-false,
+.visual-debugger .icon-slide-resize,
+.visual-debugger .icon-eye,
+.visual-debugger .icon-eye-blocked {
+  font-size: var(--vd-icon--font-size--large);
+}
+.visual-debugger .icon-selected-true {
+  color: var(--vd-icon--color--selected-true);
+}
+.visual-debugger .icon-selected-false {
+  color: var(--vd-icon--color--selected-false);
+}
+.visual-debugger .icon-toggle-on,
+.visual-debugger .icon-toggle-off {
+  background-color: var(--vd-color--white);
+  border-radius: 50px;
+  font-size: var(--vd-icon--font-size--mid-large);
+  line-height: 0.7;
+}
+.visual-debugger .icon-checkbox-checked,
+.visual-debugger .icon-checkbox-unchecked {
+  background-color: var(--vd-color--white);
+  border-radius: 0.1875rem;
+  font-size: var(--vd-icon--font-size--mid-large);
+  line-height: 0.7;
+}
+
+.visual-debugger .checkbox-toggle-wrapper {
+  align-items: var(--vd-checkbox-toggle-wrapper--align-items);
+  column-gap: var(--vd-checkbox-toggle-wrapper--column-gap);
+  cursor: var(--vd-checkbox-toggle-wrapper--cursor);
+  display: flex;
+  flex-direction: var(--vd-checkbox-toggle-wrapper--flex-direction);
+  flex-grow: 1;
+  overflow-x: var(--vd-checkbox-toggle-wrapper--overflow-x);
+  position: relative;
+}
+.visual-debugger .checkbox-toggle {
+  cursor: pointer;
+  flex: var(--vd-checkbox-toggle--flex);
+  height: var(--vd-checkbox-toggle--height);
+  opacity: var(--vd-checkbox-toggle--opacity);
+  position: var(--vd-checkbox-toggle--position);
+  width: var(--vd-checkbox-toggle--width);
+}
+.visual-debugger .checkbox-toggle + .item-activated,
+.visual-debugger .checkbox-toggle ~ .item-deactivated {
+  display: none;
+  pointer-events: none;
+}
+.visual-debugger .checkbox-toggle:checked + .item-activated, .visual-debugger .checkbox-toggle:not(:checked) ~ .item-deactivated {
+  display: inline-block;
+}
+.visual-debugger .checkbox-toggle:not(:checked) + .item-activated, .visual-debugger .checkbox-toggle:checked + .item-deactivated {
+  display: none;
+}
+
+@font-face {
+  font-family: "visual-debugger-icons";
+  src: url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf?7n1ci9") format("truetype"), url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff?7n1ci9") format("woff"), url("../../fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg?7n1ci9#visual-debugger-icons") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+[class^=icon-], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "visual-debugger-icons" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-toggle-on:before {
+  content: "\e903";
+}
+
+.icon-toggle-off:before {
+  content: "\e905";
+}
+
+.icon-slide-resize:before {
+  content: "\e904";
+}
+
+.icon-selected-false:before {
+  content: "\e901";
+}
+
+.icon-selected-true:before {
+  content: "\e902";
+}
+
+.icon-navigate-next:before {
+  content: "\e908";
+}
+
+.icon-copy:before {
+  content: "\e900";
+}
+
+.icon-eye:before {
+  content: "\e9ce";
+}
+
+.icon-eye-blocked:before {
+  content: "\e9d1";
+}
+
+.icon-checkbox-checked:before {
+  content: "\ea52";
+}
+
+.icon-checkbox-unchecked:before {
+  content: "\ea53";
+}
+
+.visual-debugger .instance-element--checked input[type=checkbox], .visual-debugger .instance-element--hover .span-toggle, .visual-debugger .instance-element:hover .span-toggle {
+  opacity: 1;
+}
+
+.visual-debugger--controller {
+  background-color: var(--vd-controller--background-color);
+  border-radius: var(--vd-controller--border-radius);
+  bottom: var(--vd-controller--bottom);
+  box-shadow: var(--vd-controller--box-shadow);
+  display: flex;
+  flex-direction: var(--vd-controller--flex-direction);
+  font-size: var(--vd-controller--font-size);
+  max-width: var(--vd-controller--max-width);
+  min-width: var(--vd-controller--min-width);
+  padding: var(--vd-controller--padding);
+  position: var(--vd-controller--position);
+  right: var(--vd-controller--right);
+  top: var(--vd-controller--top);
+  transition: right var(--vd-transition-speed), transform var(--vd-transition-speed);
+  z-index: var(--vd-controller--z-index);
+  border-top: var(--vd-nav-target--border-top);
+}
+.visual-debugger--controller h1, .visual-debugger--controller h2, .visual-debugger--controller h3, .visual-debugger--controller h4 {
+  margin-bottom: var(--vd-h--margin-bottom);
+  margin-top: var(--vd-h--margin-top);
+}
+.visual-debugger--controller h3 {
+  font-size: var(--vd-controller--font-size--title);
+}
+.visual-debugger--controller label {
+  cursor: pointer;
+}
+.visual-debugger--controller input {
+  background-color: var(--vd-controller--input--background-color);
+  border: var(--vd-controller--input--border);
+  border-radius: var(--vd-controller--input--border-radius);
+  flex: 1;
+  font-family: var(--vd-controller--input--font-family);
+  margin: var(--vd-controller--input--margin);
+  overflow: var(--vd-controller--input--overflow);
+  padding: var(--vd-controller--input--padding);
+  transition: background-color var(--vd-transition-speed);
+}
+.visual-debugger--controller input:hover {
+  background-color: var(--vd-controller--input--background-color--hover);
+  box-shadow: var(--vd-shadow--full);
+}
+.visual-debugger--controller input:focus {
+  border: var(--vd-controller--input--border--focus);
+}
+body.visual-debugger--deactivated .visual-debugger--controller:hover {
+  transform: var(--vd-controller--transform--on-deactivated);
+}
+.visual-debugger--controller .activation-form {
+  background-color: var(--vd-controller--activation-form--background-color);
+  border-radius: var(--vd-controller--activation-form--border-radius);
+  margin-left: var(--vd-controller--activation-form--margin-left);
+  margin-top: var(--vd-controller--activation-form--margin-top);
+  padding: var(--vd-controller--activation-form--padding);
+  transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
+}
+body.visual-debugger--deactivated .visual-debugger--controller .activation-form {
+  background-color: var(--vd-controller--activation-form--background-color--on-deactivated);
+  transform: var(--vd-controller--activation-form--transform--on-deactivated);
+}
+.visual-debugger--controller .activation-form-wrapper {
+  align-items: var(--vd-controller--activation-form-wrapper--align-items);
+  column-gap: var(--vd-controller--activation-form-wrapper--column-gap);
+  display: flex;
+  flex-direction: var(--vd-controller--activation-form-wrapper--flex-direction);
+  justify-content: var(--vd-controller--activation-form-wrapper--justify-content);
+}
+.visual-debugger--controller .content-auto-scroll {
+  background-color: var(--vd-controller--content-auto-scroll--background-color);
+  display: flex;
+  flex-direction: var(--vd-controller--content-auto-scroll--flex-direction);
+  height: var(--vd-controller--content-auto-scroll--height);
+  margin: var(--vd-controller--content-auto-scroll--margin);
+  overflow-y: var(--vd-controller--content-auto-scroll--overflow-y);
+  padding: var(--vd-controller--content-auto-scroll--padding);
+}
+.visual-debugger--controller .tabbed-navigation {
+  --vd-color--object-type: var(--vd-color--white--rgb);
+  background-color: var(--vd-tabbed-navigation--background-color);
+  padding: var(--vd-tabbed-navigation--padding);
+  margin-bottom: var(--vd-tabbed-navigation--margin-bottom);
+  position: sticky;
+  top: 0;
+  z-index: var(--vd-tabbed-navigation--z-index);
+}
+.visual-debugger--controller .tabbed-navigation__tabs {
+  background-color: var(--vd-tabbed-navigation--tabs--background-color);
+  padding: var(--vd-tabbed-navigation--tabs--padding);
+  display: flex;
+  flex-direction: row;
+}
+.visual-debugger--controller .tabbed-navigation__tab {
+  align-items: var(--vd-tabbed-navigation--tab--align-items);
+  background-color: var(--vd-tabbed-navigation--tab--background-color);
+  border-bottom: var(--vd-tabbed-navigation--tab--border-bottom);
+  border-left: var(--vd-tabbed-navigation--tab--border-left);
+  border-top: var(--vd-tabbed-navigation--tab--border-top);
+  border-right: var(--vd-tabbed-navigation--tab--border-right);
+  border-radius: var(--vd-tabbed-navigation--tab--border-radius);
+  color: var(--vd-tabbed-navigation--tab--color);
+  column-gap: var(--vd-tabbed-navigation--tab--column-gap);
+  cursor: var(--vd-tabbed-navigation--tab--cursor);
+  display: flex;
+  font-size: var(--vd-tabbed-navigation--tab--font-size);
+  font-weight: var(--vd-tabbed-navigation--tab--font-weight);
+  margin-right: var(--vd-tabbed-navigation--tab--margin-right);
+  padding: var(--vd-tabbed-navigation--tab--padding);
+  position: relative;
+  transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
+}
+.visual-debugger--controller .tabbed-navigation__tab:hover {
+  background-color: var(--vd-tabbed-navigation--tab--background-color--hover);
+}
+.visual-debugger--controller .tabbed-navigation__tab.active {
+  background-color: var(--vd-tabbed-navigation--tab--background-color--active);
+  color: var(--vd-tabbed-navigation--tab--color--active);
+  font-weight: var(--vd-tabbed-navigation--tab--font-weight--active);
+  position: relative;
+  transform: var(--vd-tabbed-navigation--tab--transform--active);
+  z-index: var(--vd-tabbed-navigation--tab--z-index--active);
+}
+.visual-debugger--controller .tabbed-navigation__tab:not(.active) {
+  transform: var(--vd-tabbed-navigation--tab--transform--not-active);
+}
+.visual-debugger--controller .tabbed-navigation__tab--selected::before {
+  background-color: rgba(var(--vd-color--object-type), 1);
+  border-radius: var(--vd-tabbed-navigation--tab--selected--border-radius);
+  content: "";
+  width: var(--vd-tabbed-navigation--tab--selected--size);
+  height: var(--vd-tabbed-navigation--tab--selected--size);
+}
+.visual-debugger--controller .tabbed-navigation__separator {
+  background: var(--vd-tabbed-navigation--separator--background);
+  border-top: solid 1px #b3b3b3;
+  height: var(--vd-tabbed-navigation--separator--height);
+  position: relative;
+  z-index: 3;
+}
+.visual-debugger--controller .nav-target {
+  display: none;
+  flex: 1;
+  position: relative;
+  z-index: var(--vd-nav-target--z-index);
+}
+.visual-debugger--controller .nav-target.active {
+  display: block;
+}
+.visual-debugger--controller .active-element {
+  margin: var(--vd-active-element--margin);
+  padding: var(--vd-active-element--padding);
+}
+.visual-debugger--controller .active-element__info {
+  column-gap: var(--vd-active-element--info--column-gap);
+  display: flex;
+  flex-direction: var(--vd-active-element--info--flex-direction);
+}
+.visual-debugger--controller .selected-element {
+  background-color: var(--vd-selected-element--background-color);
+  padding: var(--vd-selected-element--padding);
+}
+.visual-debugger--controller .selected-element__content {
+  display: flex;
+  flex-direction: var(--vd-selected-element--content--flex-direction);
+  gap: var(--vd-selected-element--content--gap);
+}
+.visual-debugger--controller .selected-element .content-item__info {
+  column-gap: var(--vd-selected-element--info--column-gap);
+  display: flex;
+  flex-direction: var(--vd-selected-element--info--flex-direction);
+}
+.visual-debugger--controller .list {
+  background-color: var(--vd-list-element--background-color);
+  padding: var(--vd-list-element--padding);
+}
+.visual-debugger--controller .list__content {
+  display: flex;
+  flex-direction: var(--vd-list-element--content--flex-direction);
+  gap: var(--vd-list-element--content--gap);
+}
+.visual-debugger--controller .list-item {
+  display: flex;
+  gap: var(--vd-list-element--list-item--gap);
+  flex-direction: var(--vd-list-element--list-item--flex-direction);
+  align-items: center;
+  justify-content: flex-start;
+}
+.visual-debugger--controller .list-item__activation[data-vd-visible=false] {
+  text-decoration: var(--vd-list-element--list-item--activation--disabled--text-decoration);
+  opacity: var(--vd-list-element--list-item--activation--disabled--opacity);
+}
+.visual-debugger--controller .list-item__activation label {
+  flex-grow: 1;
+  padding: var(--vd-list-element--list-item--activation--padding);
+  position: relative;
+  transition: background-color var(--vd-transition-speed);
+}
+.visual-debugger--controller .list-item__activation[data-vd-list-item-activated=true] label {
+  background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
+}
+.visual-debugger--controller .list-item__activation--hover label, .visual-debugger--controller .list-item__activation:hover label {
+  background-color: rgba(var(--vd-color--object-type), var(--vd-object-type--transparency--hover));
+}
+.visual-debugger--controller .list-item__visibility {
+  margin-left: var(--vd-list-element--list-item--visibility--margin-left);
+  flex: 0 0 28px;
+}
+.visual-debugger--base {
+  left: var(--vd-base--left);
+  position: var(--vd-base--position);
+  top: var(--vd-base--top);
+  z-index: var(--vd-base--z-index);
+}
+body.visual-debugger--deactivated .visual-debugger--base {
+  display: var(--vd-base--display--on-deactivated);
+  pointer-events: var(--vd-base--pointer-events--on-deactivated);
+}
+.visual-debugger .instance-element {
+  background-blend-mode: var(--vd-instance--background-blend-mode);
+  border: var(--vd-instance--border);
+  position: var(--vd-instance--position);
+  transition: background-color var(--vd-transition-speed), margin var(--vd-transition-speed), opacity var(--vd-transition-speed), width var(--vd-transition-speed), height var(--vd-transition-speed), top var(--vd-transition-speed), left var(--vd-transition-speed);
+}
+.visual-debugger .instance-element input.checkbox-toggle {
+  pointer-events: none;
+  opacity: 0;
+}
+.visual-debugger .instance-element--hover, .visual-debugger .instance-element:hover {
+  box-shadow: var(--vd-shadow--full);
+}
+.visual-debugger .instance-element[data-vd-visible=false] {
+  opacity: 0;
+  pointer-events: none;
+}
+.visual-debugger .instance-element .span-toggle {
+  margin: calc(var(--vd-controller--gutter) * 0.25) calc(var(--vd-controller--gutter) * 0.125);
+  transition: opacity var(--vd-transition-speed);
+}
+.visual-debugger .instance-element--unchecked .span-toggle {
+  opacity: 0;
+}
+.visual-debugger .click-drag-button {
+  background-color: var(--vd-click-drag-button--background-color);
+  border: var(--vd-click-drag-button--border);
+  border-radius: var(--vd-click-drag-button--border-radius);
+  cursor: var(--vd-click-drag-button--cursor);
+  height: var(--vd-click-drag-button--size);
+  left: calc(var(--vd-click-drag-button--size) * -0.5);
+  opacity: var(--vd-click-drag-button--opacity);
+  position: absolute;
+  top: var(--vd-click-drag-button--top);
+  transform-origin: var(--vd-click-drag-button--transform-origin);
+  transform: var(--vd-click-drag-button--transform);
+  transition: background-color var(--vd-transition-speed), transform var(--vd-transition-speed);
+  width: var(--vd-click-drag-button--size);
+  z-index: var(--vd-click-drag-button--z-index);
+}
+body.visual-debugger--activated .visual-debugger .click-drag-button {
+  background-color: var(--vd-click-drag-button--background-color--on-activated);
+  cursor: var(--vd-click-drag-button--cursor--on-activated);
+  opacity: var(--vd-click-drag-button--opacity--on-activated);
+}
+body.visual-debugger--activated .visual-debugger .click-drag-button:hover {
+  transform: var(--vd-click-drag-button--transform--on-activated--hover);
+}
+body.visual-debugger--activated .visual-debugger .click-drag-button:active {
+  background-color: var(--vd-click-drag-button--background-color--on-activated--active);
+  cursor: var(--vd-click-drag-button--cursor--on-activated--active);
+}
+.visual-debugger .content-copy-data {
+  align-items: var(--vd-content-copy-data--align-items);
+  column-gap: var(--vd-content-copy-data--column-gap);
+  display: flex;
+  flex-direction: var(--vd-content-copy-data--flex-direction);
+  margin: var(--vd-content-copy-data--margin);
+}
+.visual-debugger .content-copy-data__label {
+  background-color: var(--vd-color--light-gray);
+  padding: 0 calc(var(--vd-controller--gutter) * 0.25);
+  white-space: nowrap;
+}
+.visual-debugger .content-copy-data button {
+  background-color: var(--vd-content-copy-data--button--background-color);
+  border: var(--vd-content-copy-data--button--border);
+  cursor: pointer;
+  transition: transform var(--vd-transition-speed);
+}
+.visual-debugger .content-copy-data button:hover {
+  transform: var(--vd-content-copy-data--button--transform--hover);
+}
+
+/*# sourceMappingURL=vd.css.map */
diff --git a/css/dist/vd.css.map b/css/dist/vd.css.map
index 85119377f836521ff7e90e5a6fa95d3ac6965aae..8002936570c1ed1a2c80901a4d4e056f7e44430e 100644
--- a/css/dist/vd.css.map
+++ b/css/dist/vd.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../source/base/_variables.scss","../source/base/_types.scss","../source/base/_icons.scss","../source/base/_form.scss","../../fonts/visual-debugger-icons/style.scss","../../fonts/visual-debugger-icons/variables.scss","../source/vd.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAsEA;EAEE;EACA;EAGA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;;ACrZA;EACE;EACA;EACA;EACA;EACA;;AAKI;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMN;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EAEE;;AAGF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;ACrCN;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;;ACnCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EAEE;;AAGF;EAEE;;;ACjCN;EACE;EACA,KACE;EAGF;EACA;EACA;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAIA;EACE,SC3Ba;;;AD+Bf;EACE,SC/Bc;;;ADmChB;EACE,SCnCgB;;;ADuClB;EACE,SCvCkB;;;AD2CpB;EACE,SC3CiB;;;AD+CnB;EACE,SC/CQ;;;ADmDV;EACE,SCnDO;;;ADuDT;EACE,SCvDe;;;AD2DjB;EACE,SC3DoB;;;AD+DtB;EACE,SC/DsB;;;ACL1B;EACE;;;AAGF;EACE;;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EAwJA;;AAtJA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAKN;EAEE;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;EACA;EACA;;AAKJ;EACE;EACA;;AAGA;EACE;EACA;EACA;;AAgBA;EACE;EACA;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAMF;EACE;;AAKN;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA,YACE;;AAQF;EACE;EACA;;AAGF;EAEE;;AAOF;EACE;EACA;;AAGF;EACE;EACA;;AAUA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE","file":"vd.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../source/base/_variables.scss","../source/base/_types.scss","../source/base/_icons.scss","../source/base/_form.scss","../../fonts/visual-debugger-icons/style.scss","../../fonts/visual-debugger-icons/variables.scss","../source/vd.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAsEE;EAEE;EACA;EAGA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;ACzZF;EACE;EACA;EACA;EACA;EACA;;AAKI;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAMN;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EAEE;;AAGF;EACE;;AAIA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;ACrCN;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;EACE;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;;ACnCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EAEE;;AAGF;EAEE;;;ACjCN;EACE;EACA,KACE;EAGF;EACA;EACA;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAIA;EACE,SC3Ba;;;AD+Bf;EACE,SC/Bc;;;ADmChB;EACE,SCnCgB;;;ADuClB;EACE,SCvCkB;;;AD2CpB;EACE,SC3CiB;;;AD+CnB;EACE,SC/CiB;;;ADmDnB;EACE,SCnDQ;;;ADuDV;EACE,SCvDO;;;AD2DT;EACE,SC3De;;;AD+DjB;EACE,SC/DoB;;;ADmEtB;EACE,SCnEsB;;;ACN1B;EACE;;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EA2JA;;AAzJA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAMF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,YACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAKN;EAEE;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;EACA;EACA;;AAKJ;EACE;EACA;;AAGA;EACE;EACA;EACA;;AAMA;EACE;EACA;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIA;EACE;;AAMF;EACE;;AAKN;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EACA;EACA;EACA,YACE;;AAQF;EACE;EACA;;AAGF;EAEE;;AAOF;EACE;EACA;;AAGF;EACE;EACA;;AAUA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE","file":"vd.css"}
\ No newline at end of file
diff --git a/css/source/base/_variables.scss b/css/source/base/_variables.scss
index a5a1658429473aac553ace2c8a1ad8d3e10ee5ca..05cea559354e57046e7803ad46499e56ebc53040 100644
--- a/css/source/base/_variables.scss
+++ b/css/source/base/_variables.scss
@@ -346,6 +346,8 @@
     --#{$prefix}selected-element--padding: var(--#{$prefix}controller--gutter);
     --#{$prefix}selected-element--info--column-gap: calc(var(--#{$prefix}controller--gutter) * .5);
     --#{$prefix}selected-element--info--flex-direction: row;
+    --#{$prefix}selected-element--content--flex-direction: column;
+    --#{$prefix}selected-element--content--gap: calc(var(--#{$prefix}controller--gutter) * 1);
   
     // List Element.
     --#{$prefix}list-element--background-color: var(--#{$prefix}color--gray-10);
@@ -402,6 +404,8 @@
   
     // Content Auto-scroll.
     --#{$prefix}controller--content-auto-scroll--background-color: transparent;
+    --#{$prefix}controller--content-auto-scroll--flex-direction: column;
+    --#{$prefix}controller--content-auto-scroll--height: 100%;
     --#{$prefix}controller--content-auto-scroll--margin: 0;
     --#{$prefix}controller--content-auto-scroll--overflow-y: auto;
     --#{$prefix}controller--content-auto-scroll--padding: 0;
diff --git a/css/source/vd.scss b/css/source/vd.scss
index 6cff3fb3f45808d107b583f5bf55ecfc633bdccd..4d4e449e9f9c76be6bbd3fd211dd3a0f97766327 100644
--- a/css/source/vd.scss
+++ b/css/source/vd.scss
@@ -9,10 +9,6 @@
   opacity: 1;
 }
 
-%selected-item-wrapper {
-  margin-bottom: calc(var(--#{$prefix}controller--gutter) * .75);
-}
-
 .visual-debugger {
 
   // Controller.
@@ -103,6 +99,9 @@
 
     .content-auto-scroll {
       background-color: var(--#{$prefix}controller--content-auto-scroll--background-color);
+      display: flex;
+      flex-direction: var(--#{$prefix}controller--content-auto-scroll--flex-direction);
+      height: var(--#{$prefix}controller--content-auto-scroll--height);
       margin: var(--#{$prefix}controller--content-auto-scroll--margin);
       overflow-y: var(--#{$prefix}controller--content-auto-scroll--overflow-y);
       padding: var(--#{$prefix}controller--content-auto-scroll--padding);
@@ -188,6 +187,7 @@
     border-top: var(--#{$prefix}nav-target--border-top);
     .nav-target {
       display: none;
+      flex: 1;
       position: relative;
       z-index: var(--#{$prefix}nav-target--z-index);
 
@@ -214,30 +214,20 @@
       background-color: var(--#{$prefix}selected-element--background-color);
       padding: var(--#{$prefix}selected-element--padding);
 
-      // Info.
-      &__info {
-        column-gap: var(--#{$prefix}selected-element--info--column-gap);
+      // Content
+      &__content {
         display: flex;
-        flex-direction: var(--#{$prefix}selected-element--info--flex-direction);
-
-        &-wrapper {
-          @extend %selected-item-wrapper;
-        }
+        flex-direction: var(--#{$prefix}selected-element--content--flex-direction);
+        gap: var(--#{$prefix}selected-element--content--gap);
       }
 
-      // Suggestions.
-      &__suggestions {
-        &-wrapper {
-          @extend %selected-item-wrapper;
-        }
-      }
+      .content-item {
 
-      // Tempalte File Path.
-      &__template-file-path {
-        .label {
-          background-color: var(--#{$prefix}color--light-gray);
-          padding: 0 calc(var(--#{$prefix}controller--gutter) * .25);
-          white-space: nowrap;
+        // Info.
+        &__info {
+          column-gap: var(--#{$prefix}selected-element--info--column-gap);
+          display: flex;
+          flex-direction: var(--#{$prefix}selected-element--info--flex-direction);
         }
       }
     }
@@ -401,6 +391,12 @@
     flex-direction: var(--#{$prefix}content-copy-data--flex-direction);
     margin: var(--#{$prefix}content-copy-data--margin);
 
+    &__label {
+      background-color: var(--#{$prefix}color--light-gray);
+      padding: 0 calc(var(--#{$prefix}controller--gutter) * .25);
+      white-space: nowrap;
+    }
+
     button {
       background-color: var(--#{$prefix}content-copy-data--button--background-color);
       border: var(--#{$prefix}content-copy-data--button--border);
diff --git a/fonts/visual-debugger-icons/demo.html b/fonts/visual-debugger-icons/demo.html
index c5b62caec0200fb0feac5537f9e13f9282ade24b..386ad10151e1f0a491373af9c05948d7d02b0faf 100644
--- a/fonts/visual-debugger-icons/demo.html
+++ b/fonts/visual-debugger-icons/demo.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> visual-debugger-icons <small class="fgc1">(Glyphs:&nbsp;10)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> visual-debugger-icons <small class="fgc1">(Glyphs:&nbsp;11)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
@@ -89,6 +89,20 @@
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-navigate-next"></span>
+                <span class="mls"> icon-navigate-next</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e908" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe908;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs3">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-copy"></span>
diff --git a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg
index 2f293e9cda8e22b1ea20dda7957fb104f652437a..cfd200d2f3b8ba3bcd5fba5ebfbf616af800c1bc 100644
--- a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg
+++ b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.svg
@@ -13,6 +13,7 @@
 <glyph unicode="&#xe903;" glyph-name="toggle-on" horiz-adv-x="1170" d="M0 438.857c0 201.714 164 365.714 365.714 365.714h438.857c201.714 0 365.714-164 365.714-365.714s-164-365.714-365.714-365.714h-438.857c-201.714 0-365.714 164-365.714 365.714zM804.571 146.286c161.143 0 292.571 131.429 292.571 292.571s-131.429 292.571-292.571 292.571-292.571-131.429-292.571-292.571 131.429-292.571 292.571-292.571z" />
 <glyph unicode="&#xe904;" glyph-name="slide-resize" d="M736.672 479.776v108.672l-155.104-154.944 154.336-155.616 0.736 107.296h222.88v94.624h-222.848zM448 32h96v800h-96v-800zM257.28 479.776h-224.832v-94.624h224.832l-1.248-107.296 154.368 155.616-153.12 154.976v-108.672z" />
 <glyph unicode="&#xe905;" glyph-name="toggle-off" horiz-adv-x="1170" d="M658.286 438.857c0 161.143-131.429 292.571-292.571 292.571s-292.571-131.429-292.571-292.571 131.429-292.571 292.571-292.571 292.571 131.429 292.571 292.571zM1097.143 438.857c0 161.143-131.429 292.571-292.571 292.571h-220.571c89.143-66.857 147.429-173.143 147.429-292.571s-58.286-225.714-147.429-292.571h220.571c161.143 0 292.571 131.429 292.571 292.571zM1170.286 438.857c0-201.714-164-365.714-365.714-365.714h-438.857c-201.714 0-365.714 164-365.714 365.714s164 365.714 365.714 365.714h438.857c201.714 0 365.714-164 365.714-365.714z" />
+<glyph unicode="&#xe908;" glyph-name="navigate-next" d="M426 682.667l256-256-256-256-60 60 196 196-196 196z" />
 <glyph unicode="&#xe9ce;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 <glyph unicode="&#xea52;" glyph-name="checkbox-checked" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM448 165.49l-237.254 237.256 90.51 90.508 146.744-146.744 306.746 306.746 90.508-90.51-397.254-397.256z" />
diff --git a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf
index 27edb4b62996a5cb352dc894c1a18e3e3587a5fa..5c707c6629271a23ce83a81bce117f1b3711efaf 100644
Binary files a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf and b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.ttf differ
diff --git a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff
index be4863798fe592b85bcb48696bbffe95bcc6e0fd..bdd82a0c158086eb3ffbaafeb333b1bc50e76820 100644
Binary files a/fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff and b/fonts/visual-debugger-icons/fonts/visual-debugger-icons.woff differ
diff --git a/fonts/visual-debugger-icons/selection.json b/fonts/visual-debugger-icons/selection.json
index 7df6be9bf2b2646bfb83b4fad1e5208edbad528a..14c1f42fdc7cad7ecce9c7b559d83b9b4fffc925 100644
--- a/fonts/visual-debugger-icons/selection.json
+++ b/fonts/visual-debugger-icons/selection.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M0 512c0-201.714 164-365.714 365.714-365.714h438.857c201.714 0 365.714 164 365.714 365.714s-164 365.714-365.714 365.714h-438.857c-201.714 0-365.714-164-365.714-365.714zM804.571 804.571c161.143 0 292.571-131.429 292.571-292.571s-131.429-292.571-292.571-292.571-292.571 131.429-292.571 292.571 131.429 292.571 292.571 292.571z"],"attrs":[{}],"width":1170,"isMulticolor":false,"isMulticolor2":false,"tags":["toggle-on"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":28,"code":59651,"name":"toggle-on"},"setIdx":0,"setId":7,"iconIdx":0},{"icon":{"paths":["M658.286 512c0-161.143-131.429-292.571-292.571-292.571s-292.571 131.429-292.571 292.571 131.429 292.571 292.571 292.571 292.571-131.429 292.571-292.571zM1097.143 512c0-161.143-131.429-292.571-292.571-292.571h-220.571c89.143 66.857 147.429 173.143 147.429 292.571s-58.286 225.714-147.429 292.571h220.571c161.143 0 292.571-131.429 292.571-292.571zM1170.286 512c0 201.714-164 365.714-365.714 365.714h-438.857c-201.714 0-365.714-164-365.714-365.714s164-365.714 365.714-365.714h438.857c201.714 0 365.714 164 365.714 365.714z"],"attrs":[{}],"width":1170,"isMulticolor":false,"isMulticolor2":false,"tags":["toggle-off"],"grid":14},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":28,"code":59653,"name":"toggle-off"},"setIdx":0,"setId":7,"iconIdx":1},{"icon":{"paths":["M736.672 480.224v-108.672l-155.104 154.944 154.336 155.616 0.736-107.296h222.88v-94.624h-222.848zM448 928h96v-800h-96v800zM257.28 480.224h-224.832v94.624h224.832l-1.248 107.296 154.368-155.616-153.12-154.976v108.672z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["narrow","resize"],"grid":32},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":32,"code":59652,"name":"slide-resize"},"setIdx":1,"setId":6,"iconIdx":0},{"icon":{"paths":["M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM656 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM663.552 631.136l-32.448 32.448c-5.952 5.984-15.616 5.984-21.6 0l-91.84-91.84-91.84 91.84c-5.984 5.984-15.616 5.984-21.6 0l-32.416-32.448c-5.984-5.984-5.984-15.616 0-21.6l91.872-91.84-91.872-91.84c-5.984-5.952-5.984-15.616 0-21.6l32.416-32.416c5.984-5.984 15.616-5.984 21.6 0l91.84 91.84 91.84-91.84c5.984-5.984 15.648-5.984 21.6 0l32.448 32.416c5.952 5.984 5.952 15.648 0 21.6l-91.872 91.84 91.872 91.84c5.952 5.952 5.952 15.616 0 21.6zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["error","cancel","close","partially checked"],"grid":32},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":32,"code":59649,"name":"selected-false"},"setIdx":1,"setId":6,"iconIdx":1},{"icon":{"paths":["M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM469.312 673.696c-5.888 5.92-15.456 5.92-21.376 0l-32.064-32.064c-0.064-0.096-0.032-0.224-0.096-0.288l-102.016-102.784c-5.92-5.888-5.92-15.456 0-21.376l32.064-32.096c5.92-5.92 15.488-5.92 21.408 0l91.52 92.192 192.448-192.416c5.888-5.92 15.456-5.92 21.376 0l32.064 32.096c5.952 5.92 5.952 15.488 0 21.408l-235.328 235.328zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16zM560 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["checked","checkmark","tick","checkbox"],"grid":32},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":32,"code":59650,"name":"selected-true"},"setIdx":1,"setId":6,"iconIdx":2},{"icon":{"paths":["M810 896v-598h-468v598h468zM810 214q34 0 60 25t26 59v598q0 34-26 60t-60 26h-468q-34 0-60-26t-26-60v-598q0-34 26-59t60-25h468zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["content_copy"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"name":"copy","prevSize":24,"code":59648},"setIdx":2,"setId":5,"iconIdx":0},{"icon":{"paths":["M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"],"tags":["eye","views","vision","visit"],"defaultCode":59854,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"eye, views","name":"eye","order":16,"id":207,"prevSize":32,"code":59854},"setIdx":3,"setId":1,"iconIdx":206},{"icon":{"paths":["M945.942 14.058c-18.746-18.744-49.136-18.744-67.882 0l-202.164 202.164c-51.938-15.754-106.948-24.222-163.896-24.222-223.318 0-416.882 130.042-512 320 41.122 82.124 100.648 153.040 173.022 207.096l-158.962 158.962c-18.746 18.746-18.746 49.136 0 67.882 9.372 9.374 21.656 14.060 33.94 14.060s24.568-4.686 33.942-14.058l864-864c18.744-18.746 18.744-49.138 0-67.884zM416 320c42.24 0 78.082 27.294 90.92 65.196l-121.724 121.724c-37.902-12.838-65.196-48.68-65.196-90.92 0-53.020 42.98-96 96-96zM110.116 512c38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.862-7.3-9.962 27.328-15.412 56.822-15.412 87.596 0 54.89 17.286 105.738 46.7 147.418l-60.924 60.924c-52.446-36.842-97.202-83.882-131.66-138.342z","M768 442c0-27.166-4.256-53.334-12.102-77.898l-321.808 321.808c24.568 7.842 50.742 12.090 77.91 12.090 141.382 0 256-114.618 256-256z","M830.026 289.974l-69.362 69.362c1.264 0.786 2.53 1.568 3.786 2.368 60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-38.664 0-76.902-4.76-113.962-14.040l-76.894 76.894c59.718 21.462 123.95 33.146 190.856 33.146 223.31 0 416.876-130.042 512-320-45.022-89.916-112.118-166.396-193.974-222.026z"],"tags":["eye-blocked","views","vision","visit","banned","blocked","forbidden","private"],"defaultCode":59857,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"eye-blocked, views4","name":"eye-blocked","order":17,"id":210,"prevSize":32,"code":59857},"setIdx":3,"setId":1,"iconIdx":209},{"icon":{"paths":["M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM448 794.51l-237.254-237.256 90.51-90.508 146.744 146.744 306.746-306.746 90.508 90.51-397.254 397.256z"],"tags":["checkbox-checked","checkbox","tick","checked","selected"],"defaultCode":59986,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"checkbox-checked, checkbox","name":"checkbox-checked","order":20,"id":339,"prevSize":32,"code":59986},"setIdx":3,"setId":1,"iconIdx":338},{"icon":{"paths":["M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM896 896h-768v-768h768v768z"],"tags":["checkbox-unchecked","checkbox","unchecked","square"],"defaultCode":59987,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"checkbox-unchecked, checkbox2","name":"checkbox-unchecked","order":21,"id":340,"prevSize":32,"code":59987},"setIdx":3,"setId":1,"iconIdx":339}],"height":1024,"metadata":{"name":"visual-debugger-icons"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"visual-debugger-icons","majorVersion":1,"minorVersion":0,"description":"These are the icons being used in the custom Drupal module Visual Debugger."},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"cssVars":true,"cssVarsFormat":"scss","showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M0 512c0-201.714 164-365.714 365.714-365.714h438.857c201.714 0 365.714 164 365.714 365.714s-164 365.714-365.714 365.714h-438.857c-201.714 0-365.714-164-365.714-365.714zM804.571 804.571c161.143 0 292.571-131.429 292.571-292.571s-131.429-292.571-292.571-292.571-292.571 131.429-292.571 292.571 131.429 292.571 292.571 292.571z"],"attrs":[{}],"width":1170,"isMulticolor":false,"isMulticolor2":false,"tags":["toggle-on"],"grid":14},"attrs":[{}],"properties":{"order":1,"id":3,"prevSize":28,"code":59651,"name":"toggle-on"},"setIdx":1,"setId":7,"iconIdx":1},{"icon":{"paths":["M658.286 512c0-161.143-131.429-292.571-292.571-292.571s-292.571 131.429-292.571 292.571 131.429 292.571 292.571 292.571 292.571-131.429 292.571-292.571zM1097.143 512c0-161.143-131.429-292.571-292.571-292.571h-220.571c89.143 66.857 147.429 173.143 147.429 292.571s-58.286 225.714-147.429 292.571h220.571c161.143 0 292.571-131.429 292.571-292.571zM1170.286 512c0 201.714-164 365.714-365.714 365.714h-438.857c-201.714 0-365.714-164-365.714-365.714s164-365.714 365.714-365.714h438.857c201.714 0 365.714 164 365.714 365.714z"],"attrs":[{}],"width":1170,"isMulticolor":false,"isMulticolor2":false,"tags":["toggle-off"],"grid":14},"attrs":[{}],"properties":{"order":2,"id":2,"prevSize":28,"code":59653,"name":"toggle-off"},"setIdx":1,"setId":7,"iconIdx":2},{"icon":{"paths":["M736.672 480.224v-108.672l-155.104 154.944 154.336 155.616 0.736-107.296h222.88v-94.624h-222.848zM448 928h96v-800h-96v800zM257.28 480.224h-224.832v94.624h224.832l-1.248 107.296 154.368-155.616-153.12-154.976v108.672z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["narrow","resize"],"grid":32},"attrs":[{}],"properties":{"order":1,"id":2,"prevSize":32,"code":59652,"name":"slide-resize"},"setIdx":2,"setId":6,"iconIdx":0},{"icon":{"paths":["M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM656 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM663.552 631.136l-32.448 32.448c-5.952 5.984-15.616 5.984-21.6 0l-91.84-91.84-91.84 91.84c-5.984 5.984-15.616 5.984-21.6 0l-32.416-32.448c-5.984-5.984-5.984-15.616 0-21.6l91.872-91.84-91.872-91.84c-5.984-5.952-5.984-15.616 0-21.6l32.416-32.416c5.984-5.984 15.616-5.984 21.6 0l91.84 91.84 91.84-91.84c5.984-5.984 15.648-5.984 21.6 0l32.448 32.416c5.952 5.984 5.952 15.648 0 21.6l-91.872 91.84 91.872 91.84c5.952 5.952 5.952 15.616 0 21.6zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["error","cancel","close","partially checked"],"grid":32},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":32,"code":59649,"name":"selected-false"},"setIdx":2,"setId":6,"iconIdx":1},{"icon":{"paths":["M848 864h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h80v-80c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 672c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 480c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16 8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM848 288c-8.832 0-16-7.168-16-16v-80h-80c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16v96c0 8.832-7.2 16-16 16zM469.312 673.696c-5.888 5.92-15.456 5.92-21.376 0l-32.064-32.064c-0.064-0.096-0.032-0.224-0.096-0.288l-102.016-102.784c-5.92-5.888-5.92-15.456 0-21.376l32.064-32.096c5.92-5.92 15.488-5.92 21.408 0l91.52 92.192 192.448-192.416c5.888-5.92 15.456-5.92 21.376 0l32.064 32.096c5.952 5.92 5.952 15.488 0 21.408l-235.328 235.328zM656 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM464 192h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16h96c8.8 0 16 7.168 16 16s-7.2 16-16 16zM272 864h-96c-8.832 0-16-7.168-16-16v-96c0-8.832 7.168-16 16-16s16 7.168 16 16v80h80c8.832 0 16 7.168 16 16s-7.168 16-16 16zM272 192h-80v80c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16h96c8.832 0 16 7.168 16 16s-7.168 16-16 16zM176 352c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM176 544c8.832 0 16 7.168 16 16v96c0 8.832-7.168 16-16 16s-16-7.168-16-16v-96c0-8.832 7.168-16 16-16zM368 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16zM560 832h96c8.8 0 16 7.168 16 16s-7.2 16-16 16h-96c-8.832 0-16-7.168-16-16s7.168-16 16-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["checked","checkmark","tick","checkbox"],"grid":32},"attrs":[{}],"properties":{"order":2,"id":0,"prevSize":32,"code":59650,"name":"selected-true"},"setIdx":2,"setId":6,"iconIdx":2},{"icon":{"paths":["M426 256l256 256-256 256-60-60 196-196-196-196z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["navigate_next","chevron_right"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":1,"prevSize":24,"code":59656,"name":"navigate-next"},"setIdx":3,"setId":5,"iconIdx":0},{"icon":{"paths":["M810 896v-598h-468v598h468zM810 214q34 0 60 25t26 59v598q0 34-26 60t-60 26h-468q-34 0-60-26t-26-60v-598q0-34 26-59t60-25h468zM682 42v86h-512v598h-84v-598q0-34 25-60t59-26h512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["content_copy"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"name":"copy","prevSize":24,"code":59648},"setIdx":3,"setId":5,"iconIdx":1},{"icon":{"paths":["M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"],"tags":["eye","views","vision","visit"],"defaultCode":59854,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"eye, views","name":"eye","order":16,"id":207,"prevSize":32,"code":59854},"setIdx":4,"setId":1,"iconIdx":206},{"icon":{"paths":["M945.942 14.058c-18.746-18.744-49.136-18.744-67.882 0l-202.164 202.164c-51.938-15.754-106.948-24.222-163.896-24.222-223.318 0-416.882 130.042-512 320 41.122 82.124 100.648 153.040 173.022 207.096l-158.962 158.962c-18.746 18.746-18.746 49.136 0 67.882 9.372 9.374 21.656 14.060 33.94 14.060s24.568-4.686 33.942-14.058l864-864c18.744-18.746 18.744-49.138 0-67.884zM416 320c42.24 0 78.082 27.294 90.92 65.196l-121.724 121.724c-37.902-12.838-65.196-48.68-65.196-90.92 0-53.020 42.98-96 96-96zM110.116 512c38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.862-7.3-9.962 27.328-15.412 56.822-15.412 87.596 0 54.89 17.286 105.738 46.7 147.418l-60.924 60.924c-52.446-36.842-97.202-83.882-131.66-138.342z","M768 442c0-27.166-4.256-53.334-12.102-77.898l-321.808 321.808c24.568 7.842 50.742 12.090 77.91 12.090 141.382 0 256-114.618 256-256z","M830.026 289.974l-69.362 69.362c1.264 0.786 2.53 1.568 3.786 2.368 60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-38.664 0-76.902-4.76-113.962-14.040l-76.894 76.894c59.718 21.462 123.95 33.146 190.856 33.146 223.31 0 416.876-130.042 512-320-45.022-89.916-112.118-166.396-193.974-222.026z"],"tags":["eye-blocked","views","vision","visit","banned","blocked","forbidden","private"],"defaultCode":59857,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"eye-blocked, views4","name":"eye-blocked","order":17,"id":210,"prevSize":32,"code":59857},"setIdx":4,"setId":1,"iconIdx":209},{"icon":{"paths":["M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM448 794.51l-237.254-237.256 90.51-90.508 146.744 146.744 306.746-306.746 90.508 90.51-397.254 397.256z"],"tags":["checkbox-checked","checkbox","tick","checked","selected"],"defaultCode":59986,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"checkbox-checked, checkbox","name":"checkbox-checked","order":20,"id":339,"prevSize":32,"code":59986},"setIdx":4,"setId":1,"iconIdx":338},{"icon":{"paths":["M896 0h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v-768c0-70.4-57.6-128-128-128zM896 896h-768v-768h768v768z"],"tags":["checkbox-unchecked","checkbox","unchecked","square"],"defaultCode":59987,"grid":16,"attrs":[]},"attrs":[],"properties":{"ligatures":"checkbox-unchecked, checkbox2","name":"checkbox-unchecked","order":21,"id":340,"prevSize":32,"code":59987},"setIdx":4,"setId":1,"iconIdx":339}],"height":1024,"metadata":{"name":"visual-debugger-icons"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"visual-debugger-icons","majorVersion":1,"minorVersion":3,"description":"These are the icons being used in the custom Drupal module Visual Debugger."},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"cssVars":true,"cssVarsFormat":"scss","showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
diff --git a/fonts/visual-debugger-icons/style.css b/fonts/visual-debugger-icons/style.css
index 955934b24fd755965bd775f5d3a22bfe56c3798e..60b894710af34689d1655b9855e6366674eece7f 100644
--- a/fonts/visual-debugger-icons/style.css
+++ b/fonts/visual-debugger-icons/style.css
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'visual-debugger-icons';
   src:
-    url('fonts/visual-debugger-icons.ttf?6bmvws') format('truetype'),
-    url('fonts/visual-debugger-icons.woff?6bmvws') format('woff'),
-    url('fonts/visual-debugger-icons.svg?6bmvws#visual-debugger-icons') format('svg');
+    url('fonts/visual-debugger-icons.ttf?7n1ci9') format('truetype'),
+    url('fonts/visual-debugger-icons.woff?7n1ci9') format('woff'),
+    url('fonts/visual-debugger-icons.svg?7n1ci9#visual-debugger-icons') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -39,6 +39,9 @@
 .icon-selected-true:before {
   content: "\e902";
 }
+.icon-navigate-next:before {
+  content: "\e908";
+}
 .icon-copy:before {
   content: "\e900";
 }
diff --git a/fonts/visual-debugger-icons/style.scss b/fonts/visual-debugger-icons/style.scss
index a65975292f7f67c6e35e5631295a9c62de13487a..5141bde474adc8657ae254bc47d6fc6d3d6ee94c 100644
--- a/fonts/visual-debugger-icons/style.scss
+++ b/fonts/visual-debugger-icons/style.scss
@@ -3,9 +3,9 @@
 @font-face {
   font-family: '#{$icomoon-font-family}';
   src:
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?6bmvws') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6bmvws') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?6bmvws##{$icomoon-font-family}') format('svg');
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?7n1ci9') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?7n1ci9') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?7n1ci9##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -51,6 +51,11 @@
     content: $icon-selected-true; 
   }
 }
+.icon-navigate-next {
+  &:before {
+    content: $icon-navigate-next; 
+  }
+}
 .icon-copy {
   &:before {
     content: $icon-copy; 
diff --git a/fonts/visual-debugger-icons/variables.scss b/fonts/visual-debugger-icons/variables.scss
index 60f2f33b8f95068cffe0fed08fc23cc6bec10a25..8a383c78a936991b6afa46150a6d4ce78a145e2b 100644
--- a/fonts/visual-debugger-icons/variables.scss
+++ b/fonts/visual-debugger-icons/variables.scss
@@ -6,6 +6,7 @@ $icon-toggle-off: unquote('"\\e905"');
 $icon-slide-resize: unquote('"\\e904"');
 $icon-selected-false: unquote('"\\e901"');
 $icon-selected-true: unquote('"\\e902"');
+$icon-navigate-next: unquote('"\\e908"');
 $icon-copy: unquote('"\\e900"');
 $icon-eye: unquote('"\\e9ce"');
 $icon-eye-blocked: unquote('"\\e9d1"');
diff --git a/js/dist/controllerElement.min.js b/js/dist/controllerElement.min.js
index ecfbbbfe19e6f367f949576e8786f462bfd4f484..6d0aad00eec2dbdbcf6ff8f05d7f51e2cae68173 100644
--- a/js/dist/controllerElement.min.js
+++ b/js/dist/controllerElement.min.js
@@ -1 +1 @@
-Drupal.controllerElement={body:document.body,utilities:Drupal.vdUtilities,activated:!1,activeThemeElement:null,defaultThemeElement:null,controllerLayer:null,baseLayer:null,tabs:null,themeDebugNodes:null,constants:{initialControllerWidth:"400px",controllerDeactivatedGap:10,controllerDeactivatedInputMargin:"200px"},ids:{idControllerElement:"visual-debugger--controller-layer",idControllerElementSelected:"visual-debugger--controller-layer--selected",idControllerButtonSelected:"visual-debugger--controller-layer--button--selected",idControllerElementInfo:"visual-debugger--controller-layer--info",idControllerElementSuggestions:"visual-debugger--controller-layer--suggestions",idControllerElementList:"visual-debugger--controller-layer--list",idControllerButtonList:"visual-debugger--controller-layer--button--list",idControllerElementTemplateFilePath:"visual-debugger--controller-layer--template-file-path",idControllerActiveElementInfo:"visual-debugger--controller--active-element--info",idControllerActivationCheckbox:"debuggerActivationCheckbox"},classNames:{classNameVisualDebugger:"visual-debugger",classNameBaseLayer:"visual-debugger--controller",classNameBaseLayerActivated:"visual-debugger--activated",classNameBaseLayerDeactivated:"visual-debugger--deactivated",classNameForm:"activation-form",classNameFormWrapper:"activation-form-wrapper",classNameContent:"content-auto-scroll",classNameElementInfoTextContent:"tag",classNameElementInfoEmpty:"tag--empty",classNameElementInfoObjectType:"tag--object-type",classNameElementInfoPropertyHook:"tag--prop-hook",classNameActiveElementLayer:"active-element",classNameActiveElementInfo:"active-element__info",classNameTabsNavigation:"tabbed-navigation",classNameTabsNavigationTabs:"tabbed-navigation__tabs",classNameTabsNavigationTab:"tabbed-navigation__tab",classNameTabsNavigationTabSelected:"tabbed-navigation__tab--selected",classNameTabsNavigationSeparator:"tabbed-navigation__separator",classNameSelectedElement:"selected-element",classNameSelectedElementContent:"selected-element__content",classNameSelectedElementInfoWrapper:"selected-element__info-wrapper",classNameSelectedElementInfo:"selected-element__info",classNameSelectedElementSuggestionsWrapper:"selected-element__suggestions-wrapper",classNameSelectedElementSuggestions:"selected-element__suggestions",classNameSelectedElementSuggestionsSuggestion:"suggestion",classNameSelectedElementTemplateFilePathWrapper:"selected-element__template-file-path-wrapper",classNameSelectedElementTemplateFilePath:"selected-element__template-file-path",classNameSelectedElementTemplateFilePathLabel:"label",classNameListElement:"list",classNameListElementContent:"list__content",classNameListElementItem:"list-item",classNameListElementItemActivation:"list-item__activation",classNameListElementItemActivationHover:"list-item__activation--hover",classNameListElementItemVisibility:"list-item__visibility",classNameAggregateElement:"aggregate",classNameTarget:"nav-target",classNameContentCopyData:"content-copy-data",classNameContentCopyDataLabel:"content-copy-data__label",classNameIconSelectedTrue:"icon-selected-true",classNameIconSelectedFalse:"icon-selected-false",classNameIconEye:"icon-eye",classNameIconControllerActivated:"icon-controller-activated",classNameIconControllerDeactivated:"icon-controller-deactivated",classNameIconEyeBlocked:"icon-eye-blocked",classNameIconCopyToClipboard:"icon-copy",classNameIconSlideResize:"icon-slide-resize",classNameClickDragButton:"click-drag-button",classNameCheckboxToggle:"checkbox-toggle",classNameActivated:"item-activated",classNameDeactivated:"item-deactivated",classNameObjectTypeTyped:e=>`object-type--${e}`},layerAttributes:{controllerActivatedAttributeName:"data-vd-controller-activated"},strings:{stringCopyToClipboard:Drupal.t("Copy to clipboard"),stringDeactivateDebugger:Drupal.t("Deactivate debugger"),stringSelectedElement:Drupal.t("Selected Element"),stringTabLabelSelected:Drupal.t("Selected"),stringTabLabelList:Drupal.t("List"),stringTabLabelAggregate:Drupal.t("Aggregate"),stringBasicInfo:Drupal.t("Object Type"),stringThemeSuggestions:Drupal.t("Theme Suggestions"),stringClickDragButton:Drupal.t("Click and drag to resize"),stringTemplateFilePath:Drupal.t("Template File Path"),stringFolderPath:Drupal.t("Folder path"),stringFilePath:Drupal.t("File path"),stringActiveElement:Drupal.t("Active Element"),stringNoActiveElement:Drupal.t("No active element."),stringNoSelectedElement:Drupal.t("No selected element.")},system:{localStorageDebuggerActivatedKey:"debuggerActivated",localStorageControllerWidthKey:"controllerWidth"},getControllerLayer(){return this.controllerLayer},setControllerLayer(e){this.controllerLayer=e},observeInstanceLayerChanges(){const{themeDebugNodes:e}=this,{layerTargetIdAttributeName:t,instanceLayerActivatedAttributeName:a}=this.utilities.layerAttributes,s={attributes:!0,attributeFilter:[a]},l=new MutationObserver((function(e){e.forEach((e=>{if(!("true"===e.target.getAttribute(a)))return;e.target.getAttribute(t)}))}));e.forEach((e=>{const t=e.instanceLayer;l.observe(t,s)}))},init(e,t){this.baseLayer=e,this.themeDebugNodes=t;const{body:a}=document;new MutationObserver((e=>{if(null==this.getControllerLayer())return;const t=e[0].target.style.paddingTop||0;this.controllerLayer.style.top=t})).observe(a,{attributes:!0,attributeFilter:["style"]})},toggleDebuggerActivated(e=!0){const{classNameBaseLayerActivated:t,classNameBaseLayerDeactivated:a}=this.classNames,{controllerActivatedAttributeName:s}=this.layerAttributes;this.body.classList.toggle(t,e),this.body.classList.toggle(a,!e),localStorage.setItem(this.system.localStorageDebuggerActivatedKey,e),null!==this.controllerLayer&&(this.controllerLayer.setAttribute(s,e),this.checkControllerActivation())},generateContentCopyData(e,t,a){const{body:s}=this,l=this,{stringCopyToClipboard:n}=this.strings,{classNameContentCopyData:i,classNameIconCopyToClipboard:c}=this.classNames,r=document.createElement("div"),o=document.createElement("div"),d=document.createElement("input"),m=document.createElement("button");return r.classList.add(i),o.classList.add(t),o.textContent=e,d.value=a,d.readOnly=!0,m.classList.add(c),m.setAttribute("aria-label",n),m.addEventListener("click",(function(){l.clipboardCopy(d)})),r.append(o,d,m),r},clipboardCopy(e){const t=e.textContent;navigator.clipboard?navigator.clipboard.writeText(t):(e.select(),document.execCommand("copy"),e.focus())},generateControllerLayer(){const{classNameVisualDebugger:e,classNameBaseLayer:t,classNameForm:a,classNameFormWrapper:s,classNameCheckboxToggle:l,classNameActivated:n,classNameIconEye:i,classNameIconControllerActivated:c,classNameDeactivated:r,classNameIconEyeBlocked:o,classNameIconControllerDeactivated:d,classNameContent:m}=this.classNames,{idControllerActivationCheckbox:g}=this.ids,{controllerActivatedAttributeName:u}=this.layerAttributes,{stringDeactivateDebugger:h}=this.strings,p=this,b=document.createElement("div");b.classList.add(e,t);const v=document.createElement("div");v.classList.add(m);const E=document.createElement("input");E.type="checkbox",E.id=g,E.classList.add(l);const y="true"===(localStorage.getItem(p.system.localStorageDebuggerActivatedKey)||"true");E.checked=y,b.setAttribute(u,y),p.toggleDebuggerActivated(y),E.addEventListener("change",(function(){p.toggleDebuggerActivated(this.checked)}));const N=document.createElement("span");N.classList.add(i,n,c);const L=document.createElement("span");L.classList.add(o,r,d);const C=document.createElement("label");C.setAttribute("for",E.id),C.textContent=h;const T=document.createElement("div");T.classList.add(s),T.append(E,N,L,C);const S=document.createElement("form");S.classList.add(a),S.appendChild(T);const A=this.generateActiveElementLayer(),f=this.generateTabbedNavigation(),I=this.generateSelectedElementLayer(),D=this.generateListElementLayer();return v.append(A,f,I,D),b.append(S,v),this.setControllerLayer(b),b},calculateInitialControllerWidth(){const{initialControllerWidth:e}=this.constants,{localStorageControllerWidthKey:t}=this.system,{controllerLayer:a}=this,s=localStorage.getItem(t)||e;let l=s;const n=window.innerWidth,i=window.getComputedStyle(a).getPropertyValue("max-width");if(i){let e=parseFloat(i);const t=parseFloat(s);l=i.endsWith("%")?Math.min(e/100*n,t):Math.min(n,e,t)}a.style.width=`${l}px`},generateActiveElementLayer(){const{classNameActiveElementLayer:e,classNameActiveElementInfo:t}=this.classNames,{idControllerActiveElementInfo:a}=this.ids,{stringActiveElement:s}=this.strings,l=document.createElement("div");l.classList.add(e);const n=document.createElement("h3");n.textContent=s;const i=document.createElement("div");return i.setAttribute("id",a),i.classList.add(t),l.append(n,i),l},switchToTab(e){const t=document.querySelector(`[data-target-tab='${e}']`),a=this.getControllerLayer().querySelector(`#${e}`);if(null===t||null===a)return;t.classList.add("active"),a.classList.add("active");const s=e=>{this.utilities.getSiblings(e).forEach((e=>{e.classList.remove("active")}))};s(t),s(a)},generateTabbedNavigation(){const{classNameTabsNavigation:e,classNameTabsNavigationTabs:t,classNameTabsNavigationTab:a,classNameTabsNavigationTabSelected:s,classNameTabsNavigationSeparator:l}=this.classNames,{stringTabLabelSelected:n,stringTabLabelList:i}=this.strings,{idControllerElementSelected:c,idControllerButtonSelected:r,idControllerElementList:o,idControllerButtonList:d}=this.ids,m=[{id:r,label:n,targetId:c,extraClasses:[s]},{id:d,label:i,targetId:o}],g=document.createElement("div");g.classList.add(e);const u=document.createElement("div");u.classList.add(t);const h=document.createElement("div");return h.classList.add(l),m.forEach((e=>{const t=document.createElement("button"),s=[a,...e.extraClasses||[]];t.setAttribute("data-target-tab",e.targetId),t.setAttribute("id",e.id),t.setAttribute("aria-label",e.label),t.classList.add(...s),t.textContent=e.label,t.addEventListener("click",(()=>{this.switchToTab(e.targetId)})),u.appendChild(t)})),this.tabs=m,g.append(u,h),g},generateSelectedElementLayer(){const{classNameSelectedElement:e,classNameSelectedElementContent:t,classNameSelectedElementInfoWrapper:a,classNameSelectedElementInfo:s,classNameSelectedElementSuggestionsWrapper:l,classNameSelectedElementSuggestions:n,classNameSelectedElementTemplateFilePathWrapper:i,classNameSelectedElementTemplateFilePath:c,classNameTarget:r}=this.classNames,{idControllerElementSelected:o,idControllerElementInfo:d,idControllerElementSuggestions:m}=this.ids,{stringSelectedElement:g,stringBasicInfo:u,stringThemeSuggestions:h,stringTemplateFilePath:p}=this.strings,b=document.createElement("div"),v=document.createElement("div"),E=document.createElement("h3");b.classList.add(e,r),b.setAttribute("id",o),E.textContent=g,v.classList.add(t);const y=document.createElement("div"),N=document.createElement("div"),L=document.createElement("h4");y.classList.add(a),N.setAttribute("id",d),N.classList.add(s),L.textContent=u,y.append(L,N);const C=document.createElement("div"),T=document.createElement("div"),S=document.createElement("h4");C.classList.add(l),T.setAttribute("id",m),T.classList.add(n),S.textContent=h,C.append(S,T);const A=document.createElement("div"),f=document.createElement("div"),I=document.createElement("h4");return A.classList.add(i),f.classList.add(c),f.setAttribute("id",this.ids.idControllerElementTemplateFilePath),I.textContent=p,A.append(I,f),v.append(y,C,A),b.append(E,v),b},generateListElementLayer(){const{classNameListElement:e,classNameListElementContent:t,classNameTarget:a,classNameListElementItem:s,classNameListElementItemActivation:l,classNameListElementItemVisibility:n,classNameIconEye:i,classNameIconEyeBlocked:c}=this.classNames,{classNameCheckboxToggleWrapper:r,classNameInputWrapperDisabled:o}=this.utilities.classNames,{idControllerElementList:d}=this.ids,{stringTabLabelList:m}=this.strings,{layerTargetIdAttributeName:g,listItemActivatedAttributeName:u,layerAttributeIsVisible:h}=this.utilities.layerAttributes,p=this.themeDebugNodes,b=document.createElement("div");b.classList.add(e,a),b.setAttribute("id",d);const v=document.createElement("h3");v.textContent=m;const E=document.createElement("div");return E.classList.add(t),b.append(v,E),p.forEach((e=>{const t=document.createElement("div");t.classList.add(s);const a=this.utilities.generateOnOffSwitch(e.instanceActiveElement.propertyHook,!1,[{eventListener:"click",eventCallback:()=>{"true"===e.listItemLayer.getAttribute(h)&&e.instanceLayer.click()}},{eventListener:"change",eventCallback:e=>{e.target.parentNode.setAttribute(u,e.target.checked)}},{eventListener:"mouseenter",eventCallback:()=>{e.triggerMouseEnter()}},{eventListener:"mouseleave",eventCallback:()=>{e.triggerMouseLeave()}}],{[g]:e.instanceLayer.getAttribute(g),[u]:!1,[h]:!0},[l,this.classNames.classNameObjectTypeTyped(e.instanceActiveElement.objectType)]),d=this.utilities.generateOnOffSwitch("",!0,[{eventListener:"click",eventCallback:e=>{e.target.classList.contains(r)&&e.target.querySelector("input").click()}},{eventListener:"change",eventCallback:t=>{e.listItemLayer.classList.toggle(o),e.listItemLayer.setAttribute(h,t.target.checked);e.listItemLayer.querySelector("input");t.target.checked?e.showInstanceLayer():e.hideInstanceLayer()}}],{[h]:!0},[n],i,c);e.listItemLayer=a,t.append(a,d),E.appendChild(t)})),b},checkControllerActivation(){const{controllerDeactivatedGap:e}=this.constants;if(this.getControllerActivationStatus())return void(this.controllerLayer.style.right="0px");const t=-1*(parseInt(this.controllerLayer.style.width)-e);this.controllerLayer.style.right=`${t}px`},executePostActivation(){this.generateSliderButton(),this.calculateInitialControllerWidth(),this.checkControllerActivation(),this.updateActiveElement(),this.updateSelectedElement("selected"),this.setSelectedElementSuggestions(),this.setSelectedElementTemplateFilePath(),this.switchToTab(this.ids.idControllerElementSelected)},generateSliderButton(){const e=this,{classNameClickDragButton:t,classNameIconSlideResize:a}=this.classNames,{stringClickDragButton:s}=this.strings,{localStorageControllerWidthKey:l}=this.system,n=this.getControllerLayer();n.getBoundingClientRect();let i=!1;const c=document.createElement("button");c.classList.add(t),c.classList.add(a),c.setAttribute("aria-label",s),c.addEventListener("mousedown",(function(t){i=!!e.getControllerActivationStatus()})),document.addEventListener("mousemove",(function(t){i&&e.resizeControllerLayer(t.clientX)})),document.addEventListener("mouseup",(function(e){i=!1,localStorage.setItem(l,n.style.width)})),n.appendChild(c)},resizeControllerLayer(e=0){const{controllerLayer:t}=this,a=t.getBoundingClientRect();requestAnimationFrame((()=>{const s=a.width+a.left-e;t.style.width=`${s}px`}))},getControllerActivationStatus(){const{controllerActivatedAttributeName:e}=this.layerAttributes;return"true"===this.getControllerLayer().getAttribute(e)},setActivated(){this.activated=!0},getActiveElementInfoLayer(){return this.getControllerLayer().querySelector(`#${this.ids.idControllerActiveElementInfo}`)},getSelectedElementInfoLayer(){return this.getControllerLayer().querySelector(`#${this.ids.idControllerElementInfo}`)},getSelectedElementSuggestionsLayer(){return this.getControllerLayer().querySelector(`#${this.ids.idControllerElementSuggestions}`)},getSelectedElementTemplateFilePathLayer(){return this.getControllerLayer().querySelector(`#${this.ids.idControllerElementTemplateFilePath}`)},getSelectedThemeElement(){return this.activeThemeElement||this.defaultThemeElement||null},setElementInfo(e,t,a="active"){t.innerHTML="";const{classNameElementInfoTextContent:s,classNameElementInfoObjectType:l,classNameElementInfoPropertyHook:n}=this.classNames;if(null===e){const e=this.generateEmptyTag(a);return void t.append(e)}let i="";if(e.hasOwnProperty("objectType")&&null!==e.objectType){const a=document.createElement("div");a.classList.add(s,l,`${l}--${e.objectType}`),i=e.objectType,a.textContent=i,t.append(a)}if(e.hasOwnProperty("propertyHook")&&null!==e.propertyHook&&i!==e.propertyHook){const a=document.createElement("div");a.classList.add(s,n),a.textContent=e.propertyHook,t.append(a)}},setSelectedElementSuggestions(){const e=this.defaultThemeElement,t=this.getSelectedElementSuggestionsLayer(),{classNameIconSelectedTrue:a,classNameIconSelectedFalse:s}=this.classNames;if(t.innerHTML="",null!==e){if(e&&e.hasOwnProperty("suggestions")&&null!==e.suggestions){e.suggestions.forEach((e=>{const l=this.generateContentCopyData(null,e.activated?a:s,e.suggestion);t.appendChild(l)}))}}else{const e=this.generateEmptyTag("selected");t.append(e)}},setSelectedElementTemplateFilePath(){const e=this.defaultThemeElement,t=this.getSelectedElementTemplateFilePathLayer(),{classNameSelectedElementTemplateFilePath:a,classNameSelectedElementTemplateFilePathLabel:s}=this.classNames,{stringFilePath:l}=this.strings;if(t.innerHTML="",null!==e){if(e&&e.hasOwnProperty("filePath")&&null!==e.filePath){const n=e.filePath,i=this.generateContentCopyData(l,s,n,a);t.appendChild(i)}}else{const e=this.generateEmptyTag("selected");t.append(e)}},generateEmptyTag(e){const{classNameElementInfoTextContent:t,classNameElementInfoEmpty:a}=this.classNames,{stringNoActiveElement:s,stringNoSelectedElement:l}=this.strings,n=document.createElement("div");return n.classList.add(t,a),n.textContent="active"==e?s:l,n},handleSelectedListItemChange(e,t=!0){const{classNameCheckboxToggle:a}=this.classNames,s=this.themeDebugNodes.find((t=>t.instanceActiveElement===e)).listItemLayer.querySelector(`.${a}`);s.click(),t&&s.scrollIntoView({behavior:"smooth",block:"center"})},setTabCue(){const{idControllerButtonSelected:e}=this.ids,t=document.getElementById(e),a=this.defaultThemeElement,s=this.classNames.classNameObjectTypeTyped("");if(Array.from(t.classList).forEach((e=>{e.startsWith(s)&&t.classList.remove(e)})),null===a)return;const l=a.objectType,n=this.classNames.classNameObjectTypeTyped(l);t.classList.add(n)},setHoverElement(e,t=!0){const{classNameListElementItemActivationHover:a}=this.classNames,s=this.themeDebugNodes.find((t=>t.instanceActiveElement===e));t?s.listItemLayer.classList.add(a):s.listItemLayer.classList.remove(a)},updateActiveElement(){const e=this.getActiveElementInfoLayer();this.setElementInfo(this.activeThemeElement,e)},setActiveThemeElement(e){this.activeThemeElement=e,this.updateActiveElement(),this.setHoverElement(e)},resetActiveThemeElement(e){this.activeThemeElement=null,this.updateActiveElement(),this.setHoverElement(e,!1)},updateSelectedElement(){const e=this.getSelectedElementInfoLayer();this.setElementInfo(this.defaultThemeElement,e,"selected"),this.setSelectedElementSuggestions(),this.setSelectedElementTemplateFilePath(),this.setTabCue()},setDefaultThemeElement(e){this.defaultThemeElement=e,this.updateSelectedElement(),this.handleSelectedListItemChange(e)},resetDefaultThemeElement(e){this.defaultThemeElement=null,this.updateSelectedElement(),this.handleSelectedListItemChange(e,!1)}};
\ No newline at end of file
+Drupal.controllerElement={body:document.body,utilities:Drupal.vdUtilities,activated:!1,activeThemeElement:null,defaultThemeElement:null,controllerLayer:null,baseLayer:null,tabs:null,themeDebugNodes:null,themeDebugNodesWithCache:null,constants:{initialControllerWidth:"400px",controllerDeactivatedGap:10,controllerDeactivatedInputMargin:"200px"},ids:{idControllerElement:"visual-debugger--controller-layer",idControllerElementSelected:"visual-debugger--controller-layer--selected",idControllerButtonSelected:"visual-debugger--controller-layer--button--selected",idControllerElementInfo:"visual-debugger--controller-layer--info",idControllerElementList:"visual-debugger--controller-layer--list",idControllerButtonList:"visual-debugger--controller-layer--button--list",idControllerActiveElementInfo:"visual-debugger--controller--active-element--info",idControllerActivationCheckbox:"debuggerActivationCheckbox"},classNames:{classNameVisualDebugger:"visual-debugger",classNameBaseLayer:"visual-debugger--controller",classNameBaseLayerActivated:"visual-debugger--activated",classNameBaseLayerDeactivated:"visual-debugger--deactivated",classNameForm:"activation-form",classNameFormWrapper:"activation-form-wrapper",classNameContent:"content-auto-scroll",classNameElementInfoTextContent:"tag",classNameElementInfoEmpty:"tag--empty",classNameElementInfoObjectType:"tag--object-type",classNameElementInfoPropertyHook:"tag--prop-hook",classNameActiveElementLayer:"active-element",classNameActiveElementInfo:"active-element__info",classNameTabsNavigation:"tabbed-navigation",classNameTabsNavigationTabs:"tabbed-navigation__tabs",classNameTabsNavigationTab:"tabbed-navigation__tab",classNameTabsNavigationTabSelected:"tabbed-navigation__tab--selected",classNameTabsNavigationSeparator:"tabbed-navigation__separator",classNameSelectedElement:"selected-element",classNameSelectedElementContent:"selected-element__content",classNameSelectedElementContentItem:"content-item",classNameSelectedElementContentItemCache:"content-item--cache",classNameListElement:"list",classNameListElementContent:"list__content",classNameListElementItem:"list-item",classNameListElementItemActivation:"list-item__activation",classNameListElementItemActivationHover:"list-item__activation--hover",classNameListElementItemVisibility:"list-item__visibility",classNameAggregateElement:"aggregate",classNameTarget:"nav-target",classNameContentCopyData:"content-copy-data",classNameContentCopyDataLabel:"content-copy-data__label",classNameIconSelectedTrue:"icon-selected-true",classNameIconSelectedFalse:"icon-selected-false",classNameIconEye:"icon-eye",classNameIconControllerActivated:"icon-controller-activated",classNameIconControllerDeactivated:"icon-controller-deactivated",classNameIconEyeBlocked:"icon-eye-blocked",classNameIconCopyToClipboard:"icon-copy",classNameIconSlideResize:"icon-slide-resize",classNameIconNavigateNext:"icon-navigate-next",classNameClickDragButton:"click-drag-button",classNameCheckboxToggle:"checkbox-toggle",classNameActivated:"item-activated",classNameDeactivated:"item-deactivated",classNameObjectTypeTyped:e=>`object-type--${e}`},layerAttributes:{controllerActivatedAttributeName:"data-vd-controller-activated"},strings:{stringCopyToClipboard:Drupal.t("Copy to clipboard"),stringDeactivateDebugger:Drupal.t("Deactivate debugger"),stringSelectedElement:Drupal.t("Selected Element"),stringTabLabelSelected:Drupal.t("Selected"),stringTabLabelList:Drupal.t("List"),stringTabLabelAggregate:Drupal.t("Aggregate"),stringBasicInfo:Drupal.t("Object Type"),stringThemeSuggestions:Drupal.t("Theme Suggestions"),stringClickDragButton:Drupal.t("Click and drag to resize"),stringTemplateFilePath:Drupal.t("Template File Path"),stringFolderPath:Drupal.t("Folder path"),stringFilePath:Drupal.t("File path"),stringActiveElement:Drupal.t("Active Element"),stringNoActiveElement:Drupal.t("No active element."),stringNoSelectedElement:Drupal.t("No selected element."),stringNotAvailable:Drupal.t("Not available.")},system:{localStorageDebuggerActivatedKey:"debuggerActivated",localStorageControllerWidthKey:"controllerWidth"},getControllerLayer(){return this.controllerLayer},setControllerLayer(e){this.controllerLayer=e},observeInstanceLayerChanges(){const{themeDebugNodes:e}=this,{layerTargetIdAttributeName:t,instanceLayerActivatedAttributeName:a}=this.utilities.layerAttributes,s={attributes:!0,attributeFilter:[a]},l=new MutationObserver((function(e){e.forEach((e=>{if(!("true"===e.target.getAttribute(a)))return;e.target.getAttribute(t)}))}));e.forEach((e=>{const t=e.instanceLayer;l.observe(t,s)}))},init(e,t){this.baseLayer=e,this.themeDebugNodes=t;const{body:a}=document;new MutationObserver((e=>{if(null==this.getControllerLayer())return;const t=e[0].target.style.paddingTop||0;this.controllerLayer.style.top=t})).observe(a,{attributes:!0,attributeFilter:["style"]})},toggleDebuggerActivated(e=!0){const{classNameBaseLayerActivated:t,classNameBaseLayerDeactivated:a}=this.classNames,{controllerActivatedAttributeName:s}=this.layerAttributes;this.body.classList.toggle(t,e),this.body.classList.toggle(a,!e),localStorage.setItem(this.system.localStorageDebuggerActivatedKey,e),null!==this.controllerLayer&&(this.controllerLayer.setAttribute(s,e),this.checkControllerActivation())},generateContentCopyData(e,t,a){const{body:s}=this,l=this,{stringCopyToClipboard:n}=this.strings,{classNameContentCopyData:i,classNameIconCopyToClipboard:c}=this.classNames,o=document.createElement("div"),r=document.createElement("div"),d=document.createElement("input"),m=document.createElement("button");return o.classList.add(i),r.classList.add(t),r.textContent=e,d.value=a,d.readOnly=!0,m.classList.add(c),m.setAttribute("aria-label",n),m.addEventListener("click",(function(){l.clipboardCopy(d)})),o.append(r,d,m),o},clipboardCopy(e){const t=e.textContent;navigator.clipboard?navigator.clipboard.writeText(t):(e.select(),document.execCommand("copy"),e.focus())},generateControllerLayer(){const{classNameVisualDebugger:e,classNameBaseLayer:t,classNameForm:a,classNameFormWrapper:s,classNameCheckboxToggle:l,classNameActivated:n,classNameIconEye:i,classNameIconControllerActivated:c,classNameDeactivated:o,classNameIconEyeBlocked:r,classNameIconControllerDeactivated:d,classNameContent:m}=this.classNames,{idControllerActivationCheckbox:u}=this.ids,{controllerActivatedAttributeName:g}=this.layerAttributes,{stringDeactivateDebugger:h}=this.strings,p=this,b=document.createElement("div");b.classList.add(e,t);const v=document.createElement("div");v.classList.add(m);const y=document.createElement("input");y.type="checkbox",y.id=u,y.classList.add(l);const E="true"===(localStorage.getItem(p.system.localStorageDebuggerActivatedKey)||"true");y.checked=E,b.setAttribute(g,E),p.toggleDebuggerActivated(E),y.addEventListener("change",(function(){p.toggleDebuggerActivated(this.checked)}));const N=document.createElement("span");N.classList.add(i,n,c);const C=document.createElement("span");C.classList.add(r,o,d);const L=document.createElement("label");L.setAttribute("for",y.id),L.textContent=h;const A=document.createElement("div");A.classList.add(s),A.append(y,N,C,L);const T=document.createElement("form");T.classList.add(a),T.appendChild(A);const I=this.generateActiveElementLayer(),f=this.generateTabbedNavigation(),S=this.generateSelectedElement(),D=this.generateListElementLayer();return v.append(I,f,S,D),b.append(T,v),this.setControllerLayer(b),b},calculateInitialControllerWidth(){const{initialControllerWidth:e}=this.constants,{localStorageControllerWidthKey:t}=this.system,{controllerLayer:a}=this,s=localStorage.getItem(t)||e;let l=s;const n=window.innerWidth,i=window.getComputedStyle(a).getPropertyValue("max-width");if(i){let e=parseFloat(i);const t=parseFloat(s);l=i.endsWith("%")?Math.min(e/100*n,t):Math.min(n,e,t)}a.style.width=`${l}px`},generateActiveElementLayer(){const{classNameActiveElementLayer:e,classNameActiveElementInfo:t}=this.classNames,{idControllerActiveElementInfo:a}=this.ids,{stringActiveElement:s}=this.strings,l=document.createElement("div");l.classList.add(e);const n=document.createElement("h3");n.textContent=s;const i=document.createElement("div");return i.setAttribute("id",a),i.classList.add(t),l.append(n,i),l},switchToTab(e){const t=document.querySelector(`[data-target-tab='${e}']`),a=this.getControllerLayer().querySelector(`#${e}`);if(null===t||null===a)return;t.classList.add("active"),a.classList.add("active");const s=e=>{this.utilities.getSiblings(e).forEach((e=>{e.classList.remove("active")}))};s(t),s(a)},generateTabbedNavigation(){const{classNameTabsNavigation:e,classNameTabsNavigationTabs:t,classNameTabsNavigationTab:a,classNameTabsNavigationTabSelected:s,classNameTabsNavigationSeparator:l}=this.classNames,{stringTabLabelSelected:n,stringTabLabelList:i}=this.strings,{idControllerElementSelected:c,idControllerButtonSelected:o,idControllerElementList:r,idControllerButtonList:d}=this.ids,m=[{id:o,label:n,targetId:c,extraClasses:[s]},{id:d,label:i,targetId:r}],u=document.createElement("div");u.classList.add(e);const g=document.createElement("div");g.classList.add(t);const h=document.createElement("div");return h.classList.add(l),m.forEach((e=>{const t=document.createElement("button"),s=[a,...e.extraClasses||[]];t.setAttribute("data-target-tab",e.targetId),t.setAttribute("id",e.id),t.setAttribute("aria-label",e.label),t.classList.add(...s),t.textContent=e.label,t.addEventListener("click",(()=>{this.switchToTab(e.targetId)})),g.appendChild(t)})),this.tabs=m,u.append(g,h),u},generateSelectedElement(){const{idControllerElementSelected:e}=this.ids,{classNameSelectedElement:t,classNameSelectedElementContent:a,classNameSelectedElementContentItem:s,classNameSelectedElementContentItemCache:l,classNameTarget:n}=this.classNames,i=Drupal.vdUtilities.getNodesWithCache(this.themeDebugNodes);this.themeDebugNodesWithCache=i;const c=document.createElement("div");c.setAttribute("id",e),c.classList.add(t,n);let o=Drupal.themeElement.getDisplayElements();i.length||(o=o.filter((e=>"cache"!==e.type)));const r=document.createElement("div");return r.classList.add(a),o.forEach((e=>{const t=document.createElement("div"),a=document.createElement("h4"),n=document.createElement("div");t.classList.add(s,...e.wrapperClasses||[]),"cache"===e.type&&t.classList.add(l),a.textContent=e.label,e.id&&n.setAttribute("id",e.id),n.classList.add(...e.valueClasses||[]),t.append(a,n),r.appendChild(t)})),c.appendChild(r),c},generateListElementLayer(){const{classNameListElement:e,classNameListElementContent:t,classNameTarget:a,classNameListElementItem:s,classNameListElementItemActivation:l,classNameListElementItemVisibility:n,classNameIconEye:i,classNameIconEyeBlocked:c}=this.classNames,{classNameCheckboxToggleWrapper:o,classNameInputWrapperDisabled:r}=this.utilities.classNames,{idControllerElementList:d}=this.ids,{stringTabLabelList:m}=this.strings,{layerTargetIdAttributeName:u,listItemActivatedAttributeName:g,layerAttributeIsVisible:h}=this.utilities.layerAttributes,p=this.themeDebugNodes,b=document.createElement("div");b.classList.add(e,a),b.setAttribute("id",d);const v=document.createElement("h3");v.textContent=m;const y=document.createElement("div");return y.classList.add(t),b.append(v,y),p.forEach((e=>{const t=document.createElement("div");t.classList.add(s);const a=this.utilities.generateOnOffSwitch(e.instanceActiveElement.propertyHook,!1,[{eventListener:"click",eventCallback:()=>{"true"===e.listItemLayer.getAttribute(h)&&e.instanceLayer.click()}},{eventListener:"change",eventCallback:e=>{e.target.parentNode.setAttribute(g,e.target.checked)}},{eventListener:"mouseenter",eventCallback:()=>{e.triggerMouseEnter()}},{eventListener:"mouseleave",eventCallback:()=>{e.triggerMouseLeave()}}],{[u]:e.instanceLayer.getAttribute(u),[g]:!1,[h]:!0},[l,this.classNames.classNameObjectTypeTyped(e.instanceActiveElement.objectType)]),d=this.utilities.generateOnOffSwitch("",!0,[{eventListener:"click",eventCallback:e=>{e.target.classList.contains(o)&&e.target.querySelector("input").click()}},{eventListener:"change",eventCallback:t=>{e.listItemLayer.classList.toggle(r),e.listItemLayer.setAttribute(h,t.target.checked);e.listItemLayer.querySelector("input");t.target.checked?e.showInstanceLayer():e.hideInstanceLayer()}}],{[h]:!0},[n],i,c);e.listItemLayer=a,t.append(a,d),y.appendChild(t)})),b},checkControllerActivation(){const{controllerDeactivatedGap:e}=this.constants;if(this.getControllerActivationStatus())return void(this.controllerLayer.style.right="0px");const t=-1*(parseInt(this.controllerLayer.style.width)-e);this.controllerLayer.style.right=`${t}px`},executePostActivation(){this.generateSliderButton(),this.calculateInitialControllerWidth(),this.checkControllerActivation(),this.updateActiveElement(),this.updateSelectedElement("selected"),this.setSelectedElementValues(),this.switchToTab(this.ids.idControllerElementSelected)},generateSliderButton(){const e=this,{classNameClickDragButton:t,classNameIconSlideResize:a}=this.classNames,{stringClickDragButton:s}=this.strings,{localStorageControllerWidthKey:l}=this.system,n=this.getControllerLayer();n.getBoundingClientRect();let i=!1;const c=document.createElement("button");c.classList.add(t),c.classList.add(a),c.setAttribute("aria-label",s),c.addEventListener("mousedown",(function(t){i=!!e.getControllerActivationStatus()})),document.addEventListener("mousemove",(function(t){i&&e.resizeControllerLayer(t.clientX)})),document.addEventListener("mouseup",(function(e){i=!1,localStorage.setItem(l,n.style.width)})),n.appendChild(c)},resizeControllerLayer(e=0){const{controllerLayer:t}=this,a=t.getBoundingClientRect();requestAnimationFrame((()=>{const s=a.width+a.left-e;t.style.width=`${s}px`}))},getControllerActivationStatus(){const{controllerActivatedAttributeName:e}=this.layerAttributes;return"true"===this.getControllerLayer().getAttribute(e)},setActivated(){this.activated=!0},getActiveElementInfoLayer(){return this.getControllerLayer().querySelector(`#${this.ids.idControllerActiveElementInfo}`)},getSelectedThemeElement(){return this.activeThemeElement||this.defaultThemeElement||null},setElementInfo(e,t,a="active"){t.innerHTML="";const{classNameElementInfoTextContent:s,classNameElementInfoObjectType:l,classNameElementInfoPropertyHook:n}=this.classNames;if(null===e){const e=this.generateEmptyTag(a);return void t.append(e)}let i="";if(e.hasOwnProperty("objectType")&&null!==e.objectType){const a=document.createElement("div");a.classList.add(s,l,`${l}--${e.objectType}`),i=e.objectType,a.textContent=i,t.append(a)}if(e.hasOwnProperty("propertyHook")&&null!==e.propertyHook&&i!==e.propertyHook){const a=document.createElement("div");a.classList.add(s,n),a.textContent=e.propertyHook,t.append(a)}},setSelectedElementValues(){const{classNameContentCopyDataLabel:e}=this.classNames,{stringNoSelectedElement:t,stringNotAvailable:a}=this.strings,s=Drupal.themeElement.getDisplayElements(),l=this.defaultThemeElement;s.forEach((s=>{const n=document.getElementById(s.id);if(null!==n)if(n.innerHTML="",null!==l)if(l.hasOwnProperty(s.key)&&l[s.key]){if("info"===s.displayType)this.setElementInfo(this.defaultThemeElement,n,t);else if("singleInfo"===s.displayType)n.appendChild(this.generateSingleInfoOutput(l[s.key]));else if("singleCopy"===s.displayType){const t=this.generateContentCopyData(s.inlineLabel,e,l[s.key]);n.appendChild(t)}else if("multipleCopy"===s.displayType){const{classNameIconNavigateNext:e}=this.classNames;l[s.key].forEach((t=>{const a=this.generateContentCopyData(null,e,t);n.appendChild(a)}))}else if("multipleCopyWithChecked"===s.displayType){const{classNameIconSelectedTrue:e,classNameIconSelectedFalse:t}=this.classNames;l.suggestions.forEach((a=>{const s=this.generateContentCopyData(null,a.activated?e:t,a.suggestion);n.appendChild(s)}))}}else{const e=this.generateEmptyTag(a);n.appendChild(e)}else{const e=this.generateEmptyTag(t);n.appendChild(e)}}))},generateSingleInfoOutput:e=>document.createTextNode(e),generateSingleCopyOutput(e,t){const{classNameContentCopyData:a,classNameContentCopyDataLabel:s}=this.classNames,l=document.createElement("div");l.classList.add(a);const n=this.generateContentCopyData(e,s,t);return l.appendChild(n),l},generateEmptyTag(e){const{classNameElementInfoTextContent:t,classNameElementInfoEmpty:a}=this.classNames,{stringNoActiveElement:s,stringNoSelectedElement:l}=this.strings,n=document.createElement("div");return n.classList.add(t,a),n.textContent=e,n},handleSelectedListItemChange(e,t=!0){const{classNameCheckboxToggle:a}=this.classNames,s=this.themeDebugNodes.find((t=>t.instanceActiveElement===e)).listItemLayer.querySelector(`.${a}`);s.click(),t&&s.scrollIntoView({behavior:"smooth",block:"center"})},setTabCue(){const{idControllerButtonSelected:e}=this.ids,t=document.getElementById(e),a=this.defaultThemeElement,s=this.classNames.classNameObjectTypeTyped("");if(Array.from(t.classList).forEach((e=>{e.startsWith(s)&&t.classList.remove(e)})),null===a)return;const l=a.objectType,n=this.classNames.classNameObjectTypeTyped(l);t.classList.add(n)},setHoverElement(e,t=!0){const{classNameListElementItemActivationHover:a}=this.classNames,s=this.themeDebugNodes.find((t=>t.instanceActiveElement===e));t?s.listItemLayer.classList.add(a):s.listItemLayer.classList.remove(a)},updateActiveElement(){const{stringNoActiveElement:e}=this.strings,t=this.getActiveElementInfoLayer();this.setElementInfo(this.activeThemeElement,t,e)},setActiveThemeElement(e){this.activeThemeElement=e,this.updateActiveElement(),this.setHoverElement(e)},resetActiveThemeElement(e){this.activeThemeElement=null,this.updateActiveElement(),this.setHoverElement(e,!1)},updateSelectedElement(){const{stringNoSelectedElement:e}=this.strings;this.setSelectedElementValues(),this.setTabCue()},setDefaultThemeElement(e){this.defaultThemeElement=e,this.updateSelectedElement(),this.handleSelectedListItemChange(e)},resetDefaultThemeElement(e){this.defaultThemeElement=null,this.updateSelectedElement(),this.handleSelectedListItemChange(e,!1)}};
\ No newline at end of file
diff --git a/js/dist/themeElement.min.js b/js/dist/themeElement.min.js
index 239de388451303566a6206f28bdd31d254f9b484..4ba70b88a73da411fc15f261abc258cbbf39dd4a 100644
--- a/js/dist/themeElement.min.js
+++ b/js/dist/themeElement.min.js
@@ -1 +1 @@
-Drupal.themeElement={activated:!1,propertyHook:null,objectType:null,suggestions:null,filePath:null,dataNode:null,initialState:null,init:function(){this.initialState={activated:this.activated,propertyHook:this.propertyHook,objectType:this.objectType,suggestions:this.suggestions,filePath:this.filePath,dataNode:this.dataNode}},setActivated(){this.activated=!0},getPropertyHook(){return this.propertyHook},setPropertyHook(t){this.propertyHook=t},getObjectType(){return this.objectType},setObjectType(t){this.objectType=t.split("__")[0]},setFilePath(t){this.filePath=t},setSuggestions(t){this.suggestions=t},setDataNode(t){this.dataNode=t},reset:function(){Object.assign(this,this.initialState)}};
\ No newline at end of file
+Drupal.themeElement={activated:!1,propertyHook:null,objectType:null,suggestions:null,filePath:null,dataNode:null,cacheHit:!1,cacheTags:null,cacheContexts:null,cacheKeys:null,cacheMaxAge:0,preBubblingCacheTags:null,preBubblingCacheContexts:null,preBubblingCacheKeys:null,preBubblingCacheMaxAge:0,renderingTime:0,initialState:null,init:function(){this.initialState={activated:this.activated,propertyHook:this.propertyHook,objectType:this.objectType,suggestions:this.suggestions,filePath:this.filePath,dataNode:this.dataNode,cacheHit:this.cacheHit,cacheTags:this.cacheTags,cacheContexts:this.cacheContexts,cacheKeys:this.cacheKeys,cacheMaxAge:this.cacheMaxAge,preBubblingCacheTags:this.preBubblingCacheTags,preBubblingCacheContexts:this.preBubblingCacheContexts,preBubblingCacheKeys:this.preBubblingCacheKeys,preBubblingCacheMaxAge:this.preBubblingCacheMaxAge,renderingTime:this.renderingTime}},setActivated(){this.activated=!0},setPropertyHook(e){this.propertyHook=e},setCacheHit(e){this.cacheHit=e},setCacheTags(e){this.cacheTags=this.parseListRegexpOutput(e)},setCacheContexts(e){this.cacheContexts=this.parseListRegexpOutput(e)},setCacheKeys(e){this.cacheKeys=this.parseListRegexpOutput(e)},setCacheMaxAge(e){this.cacheMaxAge=parseInt(e)},setPreBubblingCacheTags(e){this.preBubblingCacheTags=this.parseListRegexpOutput(e)},setPreBubblingCacheContexts(e){this.preBubblingCacheContexts=this.parseListRegexpOutput(e)},setPreBubblingCacheKeys(e){this.preBubblingCacheKeys=this.parseListRegexpOutput(e)},setPreBubblingCacheMaxAge(e){this.preBubblingCacheMaxAge=parseInt(e)},setRenderingTime(e){this.renderingTime=parseFloat(e)},setObjectType(e){this.objectType=e.split("__")[0]},setFilePath(e){this.filePath=e},setSuggestions(e){this.suggestions=this.pasreListOnOffRegexpOutput(e)},setDataNode(e){this.dataNode=e},getPropertyHook(){return this.propertyHook},getObjectType(){return this.objectType},getDisplayElements(){const{idControllerSelectedElementInfo:e,idControllerSelectedElementSuggestionsValue:t,idControllerSelectedElementFilePathValue:l,idControllerSelectedElementCacheHit:a,idControllerSelectedElementCacheMaxAge:s,idControllerSelectedElementCacheTags:i,idControllerSelectedElementCacheContexts:n,idControllerSelectedElementCacheKeys:c,idControllerSelectedElementPreBubblingCacheTags:h,idControllerSelectedElementPreBubblingCacheContexts:p,idControllerSelectedElementPreBubblingCacheKeys:r,idControllerSelectedElementPreBubblingCacheMaxAge:g,idControllerSelectedElementRenderingTime:o}=Drupal.vdUtilities.ids,{classNameSelectedElementInfoWrapper:u,classNameSelectedElementInfo:y,classNameSelectedElementSuggestionsWrapper:C,classNameSelectedElementSuggestions:b,classNameSelectedElementTemplateFilePathWrapper:d,classNameSelectedElementTemplateFilePath:m,classNameSelectedElementTemplateFilePathLabel:T}=Drupal.vdUtilities.classNames,{stringThemeElementInfo:x,stringThemeElementThemeSuggestions:E,stringThemeElementFilePath:B,stringThemeElementFilePathInlineLabel:S,stringThemeElementCacheHit:P,stringThemeElementCacheMaxAge:k,stringThemeElementCacheTags:f,stringThemeElementCacheContexts:A,stringThemeElementCacheKeys:H,stringThemeElementPreBubblingCacheTags:K,stringThemeElementPreBubblingCacheContexts:M,stringThemeElementPreBubblingCacheKeys:O,stringThemeElementPreBubblingCacheMaxAge:N,stringThemeElementRenderingTime:v}=Drupal.vdUtilities.strings;return[{key:"propertyHook",label:x,id:e,type:"template",displayType:"info",wrapperClasses:[u],valueClasses:[y]},{key:"suggestions",label:E,id:t,type:"template",displayType:"multipleCopyWithChecked",wrapperClasses:[C],valueClasses:[b]},{key:"filePath",label:B,inlineLabel:S,id:l,type:"template",displayType:"singleCopy",wrapperClasses:[d],valueClasses:[m]},{key:"cacheHit",label:P,id:a,type:"cache",displayType:"singleInfo"},{key:"cacheTags",label:f,id:i,type:"cache",displayType:"multipleCopy"},{key:"cacheContexts",label:A,id:n,type:"cache",displayType:"multipleCopy"},{key:"cacheKeys",label:H,id:c,type:"cache",displayType:"multipleCopy"},{key:"cacheMaxAge",label:k,id:s,type:"cache",displayType:"singleInfo"},{key:"preBubblingCacheTags",label:K,id:h,type:"cache",displayType:"multipleCopy"},{key:"preBubblingCacheContexts",label:M,id:p,type:"cache",displayType:"multipleCopy"},{key:"preBubblingCacheKeys",label:O,id:r,type:"cache",displayType:"multipleCopy"},{key:"preBubblingCacheMaxAge",label:N,id:g,type:"cache",displayType:"singleInfo"},{key:"renderingTime",label:v,id:o,type:"cache",displayType:"singleInfo"}]},parseListRegexpOutput:e=>e.split("\n").map((e=>e.trim().replace(/^\*\s/,""))).filter((e=>e.length>0)),pasreListOnOffRegexpOutput:e=>e.trim().split(/\n\s*/).map((e=>{const t=e.split(" ");return{suggestion:t[1],activated:"x"===t[0]}})),reset:function(){Object.assign(this,this.initialState)}};
\ No newline at end of file
diff --git a/js/dist/utilities.min.js b/js/dist/utilities.min.js
index 69b44d59f380d317341a06d481b9d208a3400c61..632d0824ee42c6224b717e9d8a127d75f7293083 100644
--- a/js/dist/utilities.min.js
+++ b/js/dist/utilities.min.js
@@ -1 +1 @@
-Drupal.vdUtilities={classNames:{classNameIconCheckboxChecked:"icon-checkbox-checked",classNameIconCheckboxUnchecked:"icon-checkbox-unchecked",classNameCheckboxToggleWrapper:"checkbox-toggle-wrapper",classNameCheckboxToggle:"checkbox-toggle",classNameInputActivated:"item-activated",classNameInputDeactivated:"item-deactivated",classNameInputWrapperActivated:"wrapper-activated",classNameInputWrapperDeactivated:"wrapper-deactivated",classNameInputWrapperDisabled:"disabled"},layerAttributes:{layerTargetIdAttributeName:"data-vd-target-id",listItemActivatedAttributeName:"data-vd-list-item-activated",instanceLayerActivatedAttributeName:"data-vd-instance-layer-activated",layerAttributeIsVisible:"data-vd-visible"},getSiblings(e){const t=e.parentNode;return Array.from(t.children).filter((t=>t!==e))},generateUniqueIdentifier:()=>`element-${Math.random().toString(36).substring(7)}`,generateOnOffSwitch(e,t=!0,a=null,s=[],c=[],n=this.classNames.classNameIconCheckboxChecked,i=this.classNames.classNameIconCheckboxUnchecked){const{classNameCheckboxToggleWrapper:r,classNameCheckboxToggle:l,classNameInputActivated:d,classNameInputDeactivated:o,classNameInputWrapperActivated:p,classNameInputWrapperDeactivated:m}=this.classNames,h=this.generateUniqueIdentifier(),u=document.createElement("div");for(let e in s)u.setAttribute(e,s[e]);u.classList.add(...c,r,m);const v=document.createElement("input");v.type="checkbox",v.id=h,v.style.pointerEvents="none",v.classList.add(l),v.checked=t,null!==a&&a.forEach((e=>{u.addEventListener(e.eventListener,e.eventCallback)})),v.addEventListener("change",(()=>{u.classList.toggle(p),u.classList.toggle(m)}));const b=(e,t)=>{const a=document.createElement("span");return a.style.pointerEvents="none",a.classList.add(e,t),a},g=b(n,d),N=b(i,o);if(u.append(v,g,N),e.length>0){const t=document.createElement("label");t.setAttribute("for",h),t.style.pointerEvents="none",t.textContent=e,u.appendChild(t)}return u},getCheckedNodes(e){const{classNameInputWrapperActivated:t}=this.classNames;return e.filter((e=>e.classList.contains(t)))}};
\ No newline at end of file
+Drupal.vdUtilities={ids:{idControllerSelectedElementInfo:"visual-debugger--controller--info",idControllerSelectedElementSuggestionsValue:"visual-debugger--controller--suggestions",idControllerSelectedElementFilePathValue:"visual-debugger--controller--file-path",idControllerSelectedElementCacheHit:"visual-debugger--controller--cache-hit",idControllerSelectedElementCacheMaxAge:"visual-debugger--controller--cache-max-age",idControllerSelectedElementCacheTags:"visual-debugger--controller--cache-tags",idControllerSelectedElementCacheContexts:"visual-debugger--controller--cache-contexts",idControllerSelectedElementCacheKeys:"visual-debugger--controller--cache-keys",idControllerSelectedElementPreBubblingCacheTags:"visual-debugger--controller--pre-bubbling-cache-tags",idControllerSelectedElementPreBubblingCacheContexts:"visual-debugger--controller--pre-bubbling-cache-contexts",idControllerSelectedElementPreBubblingCacheKeys:"visual-debugger--controller--pre-bubbling-cache-keys",idControllerSelectedElementPreBubblingCacheMaxAge:"visual-debugger--controller--pre-bubbling-cache-max-age",idControllerSelectedElementRenderingTime:"visual-debugger--controller--rendering-time"},classNames:{classNameIconCheckboxChecked:"icon-checkbox-checked",classNameIconCheckboxUnchecked:"icon-checkbox-unchecked",classNameCheckboxToggleWrapper:"checkbox-toggle-wrapper",classNameCheckboxToggle:"checkbox-toggle",classNameInputActivated:"item-activated",classNameInputDeactivated:"item-deactivated",classNameInputWrapperActivated:"wrapper-activated",classNameInputWrapperDeactivated:"wrapper-deactivated",classNameInputWrapperDisabled:"disabled",classNameSelectedElementInfoWrapper:"content-item__info-wrapper",classNameSelectedElementInfo:"content-item__info",classNameSelectedElementSuggestionsWrapper:"content-item__suggestions-wrapper",classNameSelectedElementSuggestions:"content-item__suggestions",classNameSelectedElementTemplateFilePathWrapper:"content-item__template-file-path-wrapper",classNameSelectedElementTemplateFilePath:"content-item__template-file-path",classNameSelectedElementTemplateFilePathLabel:"label"},layerAttributes:{layerTargetIdAttributeName:"data-vd-target-id",listItemActivatedAttributeName:"data-vd-list-item-activated",instanceLayerActivatedAttributeName:"data-vd-instance-layer-activated",layerAttributeIsVisible:"data-vd-visible"},strings:{stringThemeElementInfo:Drupal.t("Object Type"),stringThemeElementThemeSuggestions:Drupal.t("Theme Suggestions"),stringThemeElementFilePath:Drupal.t("Template File Path"),stringThemeElementFilePathInlineLabel:Drupal.t("File Path"),stringThemeElementCacheHit:Drupal.t("Cache Hit"),stringThemeElementCacheMaxAge:Drupal.t("Cache Max-Age"),stringThemeElementCacheTags:Drupal.t("Cache Tags"),stringThemeElementCacheContexts:Drupal.t("Cache Contexts"),stringThemeElementCacheKeys:Drupal.t("Cache Keys"),stringThemeElementPreBubblingCacheTags:Drupal.t("Pre-Bubbling Cache Tags"),stringThemeElementPreBubblingCacheContexts:Drupal.t("Pre-Bubbling Cache Contexts"),stringThemeElementPreBubblingCacheKeys:Drupal.t("Pre-Bubbling Cache Keys"),stringThemeElementPreBubblingCacheMaxAge:Drupal.t("Pre-Bubbling Cache Max-Age"),stringThemeElementRenderingTime:Drupal.t("Rendering Time")},getSiblings(e){const t=e.parentNode;return Array.from(t.children).filter((t=>t!==e))},generateUniqueIdentifier:()=>`element-${Math.random().toString(36).substring(7)}`,generateOnOffSwitch(e,t=!0,a=null,l=[],n=[],c=this.classNames.classNameIconCheckboxChecked,r=this.classNames.classNameIconCheckboxUnchecked){const{classNameCheckboxToggleWrapper:s,classNameCheckboxToggle:i,classNameInputActivated:o,classNameInputDeactivated:g,classNameInputWrapperActivated:d,classNameInputWrapperDeactivated:m}=this.classNames,h=this.generateUniqueIdentifier(),u=document.createElement("div");for(let e in l)u.setAttribute(e,l[e]);u.classList.add(...n,s,m);const p=document.createElement("input");p.type="checkbox",p.id=h,p.style.pointerEvents="none",p.classList.add(i),p.checked=t,null!==a&&a.forEach((e=>{u.addEventListener(e.eventListener,e.eventCallback)})),p.addEventListener("change",(()=>{u.classList.toggle(d),u.classList.toggle(m)}));const b=(e,t)=>{const a=document.createElement("span");return a.style.pointerEvents="none",a.classList.add(e,t),a},C=b(c,o),v=b(r,g);if(u.append(p,C,v),e.length>0){const t=document.createElement("label");t.setAttribute("for",h),t.style.pointerEvents="none",t.textContent=e,u.appendChild(t)}return u},getCheckedNodes(e){const{classNameInputWrapperActivated:t}=this.classNames;return e.filter((e=>e.classList.contains(t)))},getNodesWithCache:e=>e.filter((e=>e.instanceActiveElement.cacheHit))};
\ No newline at end of file
diff --git a/js/dist/vd.min.js b/js/dist/vd.min.js
index 9508b941bf875cf36bf7611956af3e7718424cd8..a6812de722693ad4619b6fc49cf14a9799d77918 100644
--- a/js/dist/vd.min.js
+++ b/js/dist/vd.min.js
@@ -1 +1 @@
-!function(e){e.behaviors.visualDebugger={body:document.body,utilities:e.vdUtilities,constants:{baseZIndex:0},classNames:{classNameVisualDebugger:"visual-debugger",classNameInitialized:"visual-debugger--initialized",classNameBaseLayer:"visual-debugger--base",classNameInstanceLayer:"instance-element",classNameInstanceLayerUnchecked:"instance-element--unchecked",classNameInstanceLayerChecked:"instance-element--checked",classNameInstanceLayerHover:"instance-element--hover",classNameObjectType:"object-type",classNameObjectTypeHover:"object-type--hover",classNameIconActivated:"icon-checkbox-checked",classNameIconDectivated:"icon-checkbox-unchecked",classNameCheckboxToggle:"checkbox-toggle",classNameSpanToggle:"span-toggle",classNameActivated:"item-activated",classNameDeactivated:"item-deactivated",classNameObjectTypeTyped:e=>`object-type--${e}`},layerAttributes:{layerIdAttributeName:"data-vd-id"},themeDebugNodes:null,triggerResizeObserver(e){const{body:t}=this,{layerIdAttributeName:s}=this.layerAttributes,{layerTargetIdAttributeName:a}=this.utilities.layerAttributes,n=new ResizeObserver((e=>{e.forEach((e=>{const n=e.target,i=n.getAttribute(s),c=t.querySelector(`[${a}="${i}"]`);this.setInstanceLayerSizeAndPosition(c,n)}))}));e.forEach((e=>{const{instanceRefElement:t}=e;n.observe(t)}))},triggerMutationObserver:function(e){new MutationObserver((()=>{e.forEach((e=>{this.setInstanceLayerSizeAndPosition(e.instanceLayer,e.instanceRefElement)}))})).observe(this.body,{attributes:!0,attributeFilter:["style"]})},regExs:{regexGetTemplateDebug:()=>new RegExp("THEME DEBUG"),regexGetTemplateHook:()=>new RegExp("THEME HOOK: '([^']*)'"),regexGetTemplateSuggestions:()=>new RegExp("FILE NAME SUGGESTIONS:s*\ns*([^']*)s*\n*s*"),regexGetTemplateFilePath:()=>new RegExp("BEGIN OUTPUT from '([^']*)'"),regexGetTemplateEndOutput:()=>new RegExp("END OUTPUT from '([^']*)'")},controllerElement:null,getUniquePropertyHooks:e=>e.map((e=>e.instanceActiveElement.propertyHook)).filter(((e,t,s)=>s.indexOf(e)===t)).sort(),getCalculatedDomDepth(e){let t=0;for(;e.parentNode;)t++,e=e.parentNode;return t},generateBaseLayer(){const e=document.createElement("div"),{classNameVisualDebugger:t,classNameBaseLayer:s}=this.classNames;return e.classList.add(t),e.classList.add(s),e},getCheckedNodes(){return this.themeDebugNodes.filter((e=>e.instanceLayer.classList.contains(this.classNames.classNameInstanceLayerChecked)))},generateInstanceLayer(e,t,s){const a=document.createElement("div"),n=this.controllerElement,{classNameInstanceLayer:i,classNameInstanceLayerChecked:c,classNameInstanceLayerUnchecked:r,classNameObjectType:l,classNameObjectTypeTyped:o,classNameIconActivated:d,classNameIconDectivated:u,classNameCheckboxToggle:m,classNameSpanToggle:h,classNameActivated:g,classNameDeactivated:y}=this.classNames,{layerTargetIdAttributeName:b,instanceLayerActivatedAttributeName:p,layerAttributeIsVisible:N}=this.utilities.layerAttributes;a.classList.add(i,l,o(e.getObjectType()),r),a.setAttribute(b,s),a.setAttribute(N,!0),a.setAttribute(p,!1),a.style.zIndex=this.getCalculatedDomDepth(t),this.setInstanceLayerSizeAndPosition(a,t);const E=e,v=document.createElement("input");v.setAttribute("type","checkbox"),v.classList.add(m);const L=document.createElement("span");L.classList.add(h,g,d);const A=document.createElement("span");return A.classList.add(h,y,u),a.append(v,L,A),a.addEventListener("mouseenter",(()=>{v.focus({preventScroll:!0}),n.setActiveThemeElement(E)})),a.addEventListener("mouseleave",(()=>{v.blur(),n.resetActiveThemeElement(E)})),a.addEventListener("click",(()=>{this.getCheckedNodes().forEach((e=>{e.instanceLayer!==a&&e.instanceLayer.click()})),v.click()})),v.addEventListener("change",(()=>{a.setAttribute(p,v.checked),a.classList.toggle(c),a.classList.toggle(r),!0===v.checked?(v.focus(),n.setDefaultThemeElement(e)):(v.blur(),n.resetDefaultThemeElement(e))})),a},setInstanceLayerSizeAndPosition(e,t){const s=t.getBoundingClientRect(),a=Math.round(s.top+window.scrollY),n=Math.round(s.left+window.scrollX);let{width:i,height:c}=s;c=Math.floor(c),i=Math.floor(i),e.style.width=`${i}px`,e.style.height=`${c}px`,e.style.top=`${a}px`,e.style.left=`${n}px`},setthemeDebugNode(e,t,s){const{layerAttributeIsVisible:a,instanceLayerActivatedAttributeName:n}=this.utilities.layerAttributes,{classNameInstanceLayerHover:i,classNameObjectTypeHover:c}=this.classNames;return{instanceActiveElement:e,instanceLayer:t,instanceRefElement:s,showInstanceLayer(){this.instanceLayer.setAttribute(a,!0)},hideInstanceLayer(){this.instanceLayer.setAttribute(a,!1),"true"===this.instanceLayer.getAttribute(n)&&this.instanceLayer.click()},triggerMouseEnter(){this.instanceLayer.dispatchEvent(new MouseEvent("mouseenter")),this.instanceLayer.classList.add(i,c)},triggerMouseLeave(){this.instanceLayer.dispatchEvent(new MouseEvent("mouseleave")),this.instanceLayer.classList.remove(i,c)}}},attach:function(e,t){const{body:s}=this,{classNameInitialized:a}=this.classNames;s.classList.contains(a)||(s.classList.add(a),this.main(e,t,s))},main:function(t,s,a){const{regexGetTemplateDebug:n,regexGetTemplateHook:i,regexGetTemplateSuggestions:c,regexGetTemplateFilePath:r}=this.regExs,{layerIdAttributeName:l}=this.layerAttributes,o=e.controllerElement;this.controllerElement=o;const d=this.generateBaseLayer();a.appendChild(d);let u=[],m=e.themeElement;m.init();document.querySelectorAll("*").forEach((e=>{const t=e.childNodes;Array.from(t).forEach((e=>{if(e.nodeType!==Node.COMMENT_NODE)return;if(n().test(e.textContent))return void m.setActivated();if(null===m)return;const t=e.textContent.match(i());if(t)return m.setPropertyHook(t[1]),void m.setObjectType(t[1]);const s=e.textContent.match(c());if(s){const e=s[1].trim().split(/\n\s*/).map((e=>{const t=e.split(" ");return{suggestion:t[1],activated:"x"===t[0]}}));return void m.setSuggestions(e)}const a=e.textContent.match(r());if(a){m.setFilePath(a[1]);const t=e.nextElementSibling;if(t&&t.nodeType===Node.ELEMENT_NODE&&null===m.dataNode){m.setDataNode(t);const e=Object.assign({},m),s=this.utilities.generateUniqueIdentifier(),a=this.generateInstanceLayer(e,t,s);t.setAttribute(l,s),d.appendChild(a),u.push(this.setthemeDebugNode(e,a,t))}m.reset()}}))})),this.themeDebugNodes=u,this.triggerMutationObserver(u),this.triggerResizeObserver(u),o.init(d,u),a.appendChild(o.generateControllerLayer()),o.executePostActivation()},detach:function(e,t,s){}}}(Drupal);
\ No newline at end of file
+!function(e){e.behaviors.visualDebugger={body:document.body,utilities:e.vdUtilities,constants:{baseZIndex:0},classNames:{classNameVisualDebugger:"visual-debugger",classNameInitialized:"visual-debugger--initialized",classNameBaseLayer:"visual-debugger--base",classNameInstanceLayer:"instance-element",classNameInstanceLayerUnchecked:"instance-element--unchecked",classNameInstanceLayerChecked:"instance-element--checked",classNameInstanceLayerHover:"instance-element--hover",classNameObjectType:"object-type",classNameObjectTypeHover:"object-type--hover",classNameIconActivated:"icon-checkbox-checked",classNameIconDectivated:"icon-checkbox-unchecked",classNameCheckboxToggle:"checkbox-toggle",classNameSpanToggle:"span-toggle",classNameActivated:"item-activated",classNameDeactivated:"item-deactivated",classNameObjectTypeTyped:e=>`object-type--${e}`},layerAttributes:{layerIdAttributeName:"data-vd-id"},themeDebugNodes:null,triggerResizeObserver(e){const{body:t}=this,{layerIdAttributeName:s}=this.layerAttributes,{layerTargetIdAttributeName:a}=this.utilities.layerAttributes,n=new ResizeObserver((e=>{e.forEach((e=>{const n=e.target,i=n.getAttribute(s),c=t.querySelector(`[${a}="${i}"]`);this.setInstanceLayerSizeAndPosition(c,n)}))}));e.forEach((e=>{const{instanceRefElement:t}=e;n.observe(t)}))},triggerMutationObserver:function(e){new MutationObserver((()=>{e.forEach((e=>{this.setInstanceLayerSizeAndPosition(e.instanceLayer,e.instanceRefElement)}))})).observe(this.body,{attributes:!0,attributeFilter:["style"]})},regExs:{regexGetTemplateDebug:()=>new RegExp("^(THEME DEBUG|START RENDERED)$"),regexGetTemplateHook:()=>new RegExp("THEME HOOK: '([^']*)'"),regexGetTemplateSuggestions:()=>new RegExp("FILE NAME SUGGESTIONS:s*\ns*([^']*)s*\n*s*"),regexGetTemplateFilePath:()=>new RegExp("BEGIN OUTPUT from '([^']*)'"),regexGetTemplateEndOutput:()=>new RegExp("END OUTPUT from '([^']*)'"),regexGetCacheHit:()=>new RegExp("CACHE-HIT: (Yes|No)"),regexGetCacheTags:()=>new RegExp("^\\s?CACHE TAGS:s*\ns*([^']*)s*\n*s*"),regexGetCacheContexts:()=>new RegExp("^\\s?CACHE CONTEXTS:s*\ns*([^']*)s*\n*s*"),regexGetCacheKeys:()=>new RegExp("^\\s?CACHE KEYS:s*\ns*([^']*)s*\n*s*"),regexGetCacheMaxAge:()=>new RegExp("^\\s?CACHE MAX-AGE: (-?[0-9]*)"),regexGetPreBubblingCacheTags:()=>new RegExp("PRE-BUBBLING CACHE TAGS:s*\ns*([^']*)s*\n*s*"),regexGetPreBubblingCacheContexts:()=>new RegExp("PRE-BUBBLING CACHE CONTEXTS:s*\ns*([^']*)s*\n*s*"),regexGetPreBubblingCacheKeys:()=>new RegExp("PRE-BUBBLING CACHE KEYS:s*\ns*([^']*)s*\n*s*"),regexGetPreBubblingCacheMaxAge:()=>new RegExp("PRE-BUBBLING CACHE MAX-AGE: (-?[0-9]*)"),regexGetRenderingTime:()=>new RegExp("RENDERING TIME: (-?[0-9]*.?[0-9]*)")},controllerElement:null,getUniquePropertyHooks:e=>e.map((e=>e.instanceActiveElement.propertyHook)).filter(((e,t,s)=>s.indexOf(e)===t)).sort(),getCalculatedDomDepth(e){let t=0;for(;e.parentNode;)t++,e=e.parentNode;return t},generateBaseLayer(){const e=document.createElement("div"),{classNameVisualDebugger:t,classNameBaseLayer:s}=this.classNames;return e.classList.add(t),e.classList.add(s),e},getCheckedNodes(){return this.themeDebugNodes.filter((e=>e.instanceLayer.classList.contains(this.classNames.classNameInstanceLayerChecked)))},generateInstanceLayer(e,t,s){const a=document.createElement("div"),n=this.controllerElement,{classNameInstanceLayer:i,classNameInstanceLayerChecked:c,classNameInstanceLayerUnchecked:r,classNameObjectType:o,classNameObjectTypeTyped:l,classNameIconActivated:g,classNameIconDectivated:d,classNameCheckboxToggle:h,classNameSpanToggle:u,classNameActivated:m,classNameDeactivated:b}=this.classNames,{layerTargetIdAttributeName:E,instanceLayerActivatedAttributeName:y,layerAttributeIsVisible:x}=this.utilities.layerAttributes;a.classList.add(i,o,l(e.getObjectType()),r),a.setAttribute(E,s),a.setAttribute(x,!0),a.setAttribute(y,!1),a.style.zIndex=this.getCalculatedDomDepth(t),this.setInstanceLayerSizeAndPosition(a,t);const C=e,N=document.createElement("input");N.setAttribute("type","checkbox"),N.classList.add(h);const p=document.createElement("span");p.classList.add(u,m,g);const v=document.createElement("span");return v.classList.add(u,b,d),a.append(N,p,v),a.addEventListener("mouseenter",(()=>{N.focus({preventScroll:!0}),n.setActiveThemeElement(C)})),a.addEventListener("mouseleave",(()=>{N.blur(),n.resetActiveThemeElement(C)})),a.addEventListener("click",(()=>{this.getCheckedNodes().forEach((e=>{e.instanceLayer!==a&&e.instanceLayer.click()})),N.click()})),N.addEventListener("change",(()=>{a.setAttribute(y,N.checked),a.classList.toggle(c),a.classList.toggle(r),!0===N.checked?(N.focus(),n.setDefaultThemeElement(e)):(N.blur(),n.resetDefaultThemeElement(e))})),a},setInstanceLayerSizeAndPosition(e,t){const s=t.getBoundingClientRect(),a=Math.round(s.top+window.scrollY),n=Math.round(s.left+window.scrollX);let{width:i,height:c}=s;c=Math.round(c),i=Math.round(i),e.style.width=`${Math.round(i)}px`,e.style.height=`${Math.round(c)}px`,e.style.top=`${a}px`,e.style.left=`${n}px`},setthemeDebugNode(e,t,s){const{layerAttributeIsVisible:a,instanceLayerActivatedAttributeName:n}=this.utilities.layerAttributes,{classNameInstanceLayerHover:i,classNameObjectTypeHover:c}=this.classNames;return{instanceActiveElement:e,instanceLayer:t,instanceRefElement:s,showInstanceLayer(){this.instanceLayer.setAttribute(a,!0)},hideInstanceLayer(){this.instanceLayer.setAttribute(a,!1),"true"===this.instanceLayer.getAttribute(n)&&this.instanceLayer.click()},triggerMouseEnter(){this.instanceLayer.dispatchEvent(new MouseEvent("mouseenter")),this.instanceLayer.classList.add(i,c)},triggerMouseLeave(){this.instanceLayer.dispatchEvent(new MouseEvent("mouseleave")),this.instanceLayer.classList.remove(i,c)}}},attach:function(e,t){const{body:s}=this,{classNameInitialized:a}=this.classNames;s.classList.contains(a)||(s.classList.add(a),this.main(e,t,s))},main:function(t,s,a){const{regexGetTemplateDebug:n,regexGetTemplateHook:i,regexGetTemplateSuggestions:c,regexGetTemplateFilePath:r,regexGetCacheHit:o,regexGetCacheMaxAge:l,regexGetPreBubblingCacheTags:g,regexGetPreBubblingCacheContexts:d,regexGetPreBubblingCacheKeys:h,regexGetPreBubblingCacheMaxAge:u,regexGetRenderingTime:m,regexGetCacheTags:b,regexGetCacheContexts:E,regexGetCacheKeys:y}=this.regExs,{layerIdAttributeName:x}=this.layerAttributes,C=e.controllerElement;this.controllerElement=C;const N=this.generateBaseLayer();a.appendChild(N);let p=[],v=e.themeElement;v.init();document.querySelectorAll("*").forEach((e=>{const t=e.childNodes;Array.from(t).forEach((e=>{if(e.nodeType!==Node.COMMENT_NODE)return;if(n().test(e.textContent))return void v.setActivated();const t=e.textContent.match(o());if(t)return void v.setCacheHit(t[1]);const s=e.textContent.match(l());if(s)return void v.setCacheMaxAge(s[1]);const a=e.textContent.match(b());if(a)return void v.setCacheTags(a[1]);const C=e.textContent.match(E());if(C)return void v.setCacheContexts(C[1]);const A=e.textContent.match(y());if(A)return void v.setCacheKeys(A[1]);const L=e.textContent.match(g());if(L)return void v.setPreBubblingCacheTags(L[1]);const T=e.textContent.match(d());if(T)return void v.setPreBubblingCacheContexts(T[1]);const f=e.textContent.match(h());if(f)return void v.setPreBubblingCacheKeys(f[1]);const I=e.textContent.match(u());if(I)return void v.setPreBubblingCacheMaxAge(I[1]);const G=e.textContent.match(m());if(G)return void v.setRenderingTime(G[1]);const R=e.textContent.match(i());if(R)return v.setPropertyHook(R[1]),void v.setObjectType(R[1]);const B=e.textContent.match(c());if(B)return void v.setSuggestions(B[1]);const D=e.textContent.match(r());if(D){v.setFilePath(D[1]);const t=e.nextElementSibling;if(t&&t.nodeType===Node.ELEMENT_NODE&&null===v.dataNode){v.setDataNode(t);const e=Object.assign({},v),s=this.utilities.generateUniqueIdentifier(),a=this.generateInstanceLayer(e,t,s);t.setAttribute(x,s),N.appendChild(a),p.push(this.setthemeDebugNode(e,a,t))}v.reset()}}))})),this.themeDebugNodes=p,this.triggerMutationObserver(p),this.triggerResizeObserver(p),C.init(N,p),a.appendChild(C.generateControllerLayer()),C.executePostActivation()},detach:function(e,t,s){}}}(Drupal);
\ No newline at end of file
diff --git a/js/source/controllerElement.js b/js/source/controllerElement.js
index 7608a50ea213c9ef90550f6d025eab52a7129a12..a25ba0e453ca0b6d098d06e87ff2312b6f0a9ba3 100644
--- a/js/source/controllerElement.js
+++ b/js/source/controllerElement.js
@@ -25,6 +25,10 @@ Drupal.controllerElement = {
   // 2. instanceRefElement: The original referenced layer.
   themeDebugNodes: null,
 
+  // This is a subset of 'themeDebugNodes' including only the nodes carrying
+  // cache data.
+  themeDebugNodesWithCache: null,
+
   constants: {
     initialControllerWidth: '400px',
     controllerDeactivatedGap: 10,
@@ -37,10 +41,8 @@ Drupal.controllerElement = {
     idControllerElementSelected: 'visual-debugger--controller-layer--selected',
     idControllerButtonSelected: 'visual-debugger--controller-layer--button--selected',
     idControllerElementInfo: 'visual-debugger--controller-layer--info',
-    idControllerElementSuggestions: 'visual-debugger--controller-layer--suggestions',
     idControllerElementList: 'visual-debugger--controller-layer--list',
     idControllerButtonList: 'visual-debugger--controller-layer--button--list',
-    idControllerElementTemplateFilePath: 'visual-debugger--controller-layer--template-file-path',
     idControllerActiveElementInfo: 'visual-debugger--controller--active-element--info',
     idControllerActivationCheckbox: 'debuggerActivationCheckbox',
   },
@@ -67,14 +69,8 @@ Drupal.controllerElement = {
     classNameTabsNavigationSeparator: 'tabbed-navigation__separator',
     classNameSelectedElement: 'selected-element',
     classNameSelectedElementContent: 'selected-element__content',
-    classNameSelectedElementInfoWrapper: 'selected-element__info-wrapper',
-    classNameSelectedElementInfo: 'selected-element__info',
-    classNameSelectedElementSuggestionsWrapper: 'selected-element__suggestions-wrapper',
-    classNameSelectedElementSuggestions: 'selected-element__suggestions',
-    classNameSelectedElementSuggestionsSuggestion: 'suggestion',
-    classNameSelectedElementTemplateFilePathWrapper: 'selected-element__template-file-path-wrapper',
-    classNameSelectedElementTemplateFilePath: 'selected-element__template-file-path',
-    classNameSelectedElementTemplateFilePathLabel: 'label',
+    classNameSelectedElementContentItem: 'content-item',
+    classNameSelectedElementContentItemCache: 'content-item--cache',
     classNameListElement: 'list',
     classNameListElementContent: 'list__content',
     classNameListElementItem: 'list-item',
@@ -93,6 +89,7 @@ Drupal.controllerElement = {
     classNameIconEyeBlocked: 'icon-eye-blocked',
     classNameIconCopyToClipboard: 'icon-copy',
     classNameIconSlideResize: 'icon-slide-resize',
+    classNameIconNavigateNext: 'icon-navigate-next',
     classNameClickDragButton: 'click-drag-button',
     classNameCheckboxToggle: 'checkbox-toggle',
     classNameActivated: 'item-activated',
@@ -120,8 +117,9 @@ Drupal.controllerElement = {
     stringFolderPath: Drupal.t('Folder path'),
     stringFilePath: Drupal.t('File path'),
     stringActiveElement: Drupal.t('Active Element'),
-    stringNoActiveElement : Drupal.t('No active element.'),
-    stringNoSelectedElement : Drupal.t('No selected element.'),
+    stringNoActiveElement: Drupal.t('No active element.'),
+    stringNoSelectedElement: Drupal.t('No selected element.'),
+    stringNotAvailable: Drupal.t('Not available.'),
   },
 
   system: {
@@ -423,7 +421,7 @@ Drupal.controllerElement = {
     const tabbedNavigation = this.generateTabbedNavigation();
 
     // Selected element layer.
-    const selectedElementLayer = this.generateSelectedElementLayer();
+    const selectedElementLayer = this.generateSelectedElement();
 
     // List element layer.
     const listElementLayer = this.generateListElementLayer();
@@ -650,94 +648,69 @@ Drupal.controllerElement = {
    * @returns {object}
    *   The selected element layer.
    */
-  generateSelectedElementLayer() {
+  generateSelectedElement() {
+    const { idControllerElementSelected } = this.ids;
+
     const {
       classNameSelectedElement,
       classNameSelectedElementContent,
-      classNameSelectedElementInfoWrapper,
-      classNameSelectedElementInfo,
-      classNameSelectedElementSuggestionsWrapper,
-      classNameSelectedElementSuggestions,
-      classNameSelectedElementTemplateFilePathWrapper,
-      classNameSelectedElementTemplateFilePath,
-      classNameTarget,
+      classNameSelectedElementContentItem,
+      classNameSelectedElementContentItemCache,
+      classNameTarget
     } = this.classNames;
-    const {
-      idControllerElementSelected,
-      idControllerElementInfo,
-      idControllerElementSuggestions,
-    } = this.ids;
-    const {
-      stringSelectedElement,
-      stringBasicInfo,
-      stringThemeSuggestions,
-      stringTemplateFilePath,
-    } = this.strings;
 
+    // Filter out the nodes with cache.
+    const nodesWithCache = Drupal.vdUtilities.getNodesWithCache(this.themeDebugNodes);
+    this.themeDebugNodesWithCache = nodesWithCache;
+
+    
+    // Sets a base layer.
     const selectedElementLayer = document.createElement('div');
-    const selectedElementLayerContent = document.createElement('div');
-    const selectedElementLayerTitle = document.createElement('h3');
+    selectedElementLayer.setAttribute('id', idControllerElementSelected);
     selectedElementLayer.classList.add(
       classNameSelectedElement,
       classNameTarget
     );
-    selectedElementLayer.setAttribute('id', idControllerElementSelected);
-    selectedElementLayerTitle.textContent = stringSelectedElement;
+
+    // Get the display elements being iterated.
+    // Disable all cache-related elements if no cache is available.
+    let displayElements = Drupal.themeElement.getDisplayElements();
+    if (!nodesWithCache.length) {
+      displayElements = displayElements.filter(
+        (element) => element.type !== 'cache'
+      )
+    }
+
+    const selectedElementLayerContent = document.createElement('div');
     selectedElementLayerContent.classList.add(classNameSelectedElementContent);
 
-    // Selected element basic info.
-    const selectedElementBasicInfoWrapper = document.createElement('div');
-    const selectedElementBasicInfo = document.createElement('div');
-    const selectedElementBasicInfoTitle = document.createElement('h4');
-    selectedElementBasicInfoWrapper.classList.add(classNameSelectedElementInfoWrapper);
-    selectedElementBasicInfo.setAttribute('id', idControllerElementInfo);
-    selectedElementBasicInfo.classList.add(classNameSelectedElementInfo);
-    selectedElementBasicInfoTitle.textContent = stringBasicInfo;
-    selectedElementBasicInfoWrapper.append(
-      selectedElementBasicInfoTitle,
-      selectedElementBasicInfo
-    );
+    // Iterates over all elements.
+    displayElements.forEach((element) => {
+      const elementWrapper = document.createElement('div');
+      const elementTitle = document.createElement('h4');
+      const elementValue = document.createElement('div');
+      elementWrapper.classList.add(
+        classNameSelectedElementContentItem, 
+        ...element.wrapperClasses || []
+      );
 
-    // Theme suggestions layer.
-    const selectedElementSuggestionsWrapper = document.createElement('div');
-    const selectedElementSuggestionsLayer = document.createElement('div');
-    const selectedElementSuggestionsLayerTitle = document.createElement('h4');
-    selectedElementSuggestionsWrapper.classList.add(classNameSelectedElementSuggestionsWrapper);
-    selectedElementSuggestionsLayer.setAttribute('id', idControllerElementSuggestions);
-    selectedElementSuggestionsLayer.classList.add(classNameSelectedElementSuggestions);
-    selectedElementSuggestionsLayerTitle.textContent = stringThemeSuggestions;
-    selectedElementSuggestionsWrapper.append(
-      selectedElementSuggestionsLayerTitle,
-      selectedElementSuggestionsLayer
-    );
+      if (element.type === 'cache') {
+        elementWrapper.classList.add(classNameSelectedElementContentItemCache);
+      }
 
-    // Theme file path.
-    const selectedElementTemplateFilePathWrapper = document.createElement('div');
-    const selectedElementTemplateFilePath = document.createElement('div');
-    const selectedElementTemplateFilePathTitle = document.createElement('h4');
-    selectedElementTemplateFilePathWrapper.classList.add(classNameSelectedElementTemplateFilePathWrapper);
-    selectedElementTemplateFilePath.classList.add(classNameSelectedElementTemplateFilePath);
-    selectedElementTemplateFilePath.setAttribute('id', this.ids.idControllerElementTemplateFilePath);
-    selectedElementTemplateFilePathTitle.textContent = stringTemplateFilePath;
-    selectedElementTemplateFilePathWrapper.append(
-      selectedElementTemplateFilePathTitle,
-      selectedElementTemplateFilePath,
-    );
+      elementTitle.textContent = element.label;
 
-    // Append relevant information to the content layer.
-    selectedElementLayerContent.append(
-      selectedElementBasicInfoWrapper,
-      selectedElementSuggestionsWrapper,
-      selectedElementTemplateFilePathWrapper
-    );
+      if (element.id) elementValue.setAttribute('id', element.id);
+      elementValue.classList.add(...element.valueClasses || []);
 
-    // Append everything to the selected element layer.
-    selectedElementLayer.append(
-      selectedElementLayerTitle,
-      selectedElementLayerContent,
-    );
+      elementWrapper.append(
+        elementTitle,
+        elementValue,
+      );
+      selectedElementLayerContent.appendChild(elementWrapper);
+    });
 
-    // Return
+    selectedElementLayer.appendChild(selectedElementLayerContent);
     return selectedElementLayer;
   },
 
@@ -929,8 +902,7 @@ Drupal.controllerElement = {
     this.checkControllerActivation();
     this.updateActiveElement();
     this.updateSelectedElement('selected');
-    this.setSelectedElementSuggestions();
-    this.setSelectedElementTemplateFilePath();
+    this.setSelectedElementValues();
     this.switchToTab(this.ids.idControllerElementSelected);
   },
 
@@ -1027,42 +999,6 @@ Drupal.controllerElement = {
     );
   },
 
-  /**
-   * Retrieves the node where the basic information is displayed.
-   * 
-   * @returns {object}
-   *   The node where the basic information is displayed.
-   */
-  getSelectedElementInfoLayer() {
-    return this.getControllerLayer().querySelector(
-      `#${this.ids.idControllerElementInfo}`
-    );
-  },
-
-  /**
-   * Retrieves the node where the suggestions are displayed.
-   * 
-   * @returns {object}
-   *   The node where the suggestions are displayed.
-   */
-  getSelectedElementSuggestionsLayer() {
-    return this.getControllerLayer().querySelector(
-      `#${this.ids.idControllerElementSuggestions}`
-    );
-  },
-
-  /**
-   * Retrieves the node where the file path layer is displayed.
-   * 
-   * @returns {object}
-   *   The node where the file path layer is displayed.
-   */
-  getSelectedElementTemplateFilePathLayer() {
-    return this.getControllerLayer().querySelector(
-      `#${this.ids.idControllerElementTemplateFilePath}`
-    );
-  },
-
   /**
    * Establishes the element that is currently selected.
    * Active is priority; default comes right after; null if none.
@@ -1136,94 +1072,153 @@ Drupal.controllerElement = {
   },
 
   /**
-   * Set the suggestions of the selected element.
+   * Updates the selected layer values.
    */
-  setSelectedElementSuggestions() {
-    const selectedThemeElement = this.defaultThemeElement;
-    const selectedElementSuggestionsLayer = this.getSelectedElementSuggestionsLayer();
+  setSelectedElementValues() {
+    const { classNameContentCopyDataLabel } = this.classNames;
     const {
-      classNameIconSelectedTrue,
-      classNameIconSelectedFalse
-    } = this.classNames;
+      stringNoSelectedElement,
+      stringNotAvailable
+    } = this.strings;
+    const displayElements = Drupal.themeElement.getDisplayElements();
+    const selectedThemeElement = this.defaultThemeElement;
 
-    // Clear legacy information showing in the suggestions layer.
-    selectedElementSuggestionsLayer.innerHTML = '';
+    // Iterate over all the display elements.
+    displayElements.forEach((element) => {
 
-    // Return early if the theme element is not available.
-    if (selectedThemeElement === null) {
-      const emptyTag = this.generateEmptyTag('selected');
-      selectedElementSuggestionsLayer.append(emptyTag);
-      return;
-    }
+      const elementValue = document.getElementById(element.id);
 
-    // If suggestions are available, display them.
-    if (
-        selectedThemeElement &&
-        selectedThemeElement.hasOwnProperty('suggestions') &&
-        selectedThemeElement.suggestions !== null
-    ) {
-      const clipboardContent = selectedThemeElement.suggestions;
-      clipboardContent.forEach((item) => {
-        const themeSuggestion = this.generateContentCopyData(
-          null,
-          item.activated
-            ? classNameIconSelectedTrue
-            : classNameIconSelectedFalse,
-          item.suggestion,
+      // Halt early if the element is not available.
+      if (elementValue === null) return;
+
+      // Remove default content.
+      elementValue.innerHTML = '';
+
+      // Print an empty tag (no selected element) if no element is selected.
+      if (selectedThemeElement === null) {
+        const emptyTag = this.generateEmptyTag(stringNoSelectedElement);
+        elementValue.appendChild(emptyTag);
+        return;
+      }
+
+      // Print an empty tag (not available) if a value isn't available.
+      if (
+        !selectedThemeElement.hasOwnProperty(element.key)
+        ||
+        !selectedThemeElement[element.key]
+      ) {
+        const emptyTag = this.generateEmptyTag(stringNotAvailable);
+        elementValue.appendChild(emptyTag);
+        return;
+      }
+
+      // Info carries a special component with basic information on the element.
+      if (element.displayType === 'info') {
+        this.setElementInfo(
+          this.defaultThemeElement,
+          elementValue,
+          stringNoSelectedElement
         );
-        selectedElementSuggestionsLayer.appendChild(themeSuggestion);
-      });
-    }
+      }
+
+      // Single info is the simplest structure being delivered.
+      else if (element.displayType === 'singleInfo') {
+        elementValue.appendChild(
+          this.generateSingleInfoOutput(
+            selectedThemeElement[element.key]
+          )
+        );
+      }
+
+      // Carries an input field with content that can be copied.
+      else if (element.displayType === 'singleCopy') {
+        const singleCopyOutput = this.generateContentCopyData(
+          element.inlineLabel,
+          classNameContentCopyDataLabel,
+          selectedThemeElement[element.key],
+        );
+        elementValue.appendChild(singleCopyOutput);
+      }
+
+      // Carries multiple input fields with content that can be copied.
+      else if (element.displayType === 'multipleCopy') {
+        const {
+          classNameIconNavigateNext,
+        } = this.classNames;
+
+        selectedThemeElement[element.key].forEach((item) => {
+          const listItem = this.generateContentCopyData(
+            null,
+            classNameIconNavigateNext,
+            item,
+          );
+          elementValue.appendChild(listItem);
+        });
+      }
+
+      // Carries multiple input fields with content that can be copied.
+      else if (element.displayType === 'multipleCopyWithChecked') {
+        const {
+          classNameIconSelectedTrue,
+          classNameIconSelectedFalse
+        } = this.classNames;
+
+        const templateSuggestions = selectedThemeElement.suggestions;
+        templateSuggestions.forEach((item) => {
+          const themeSuggestion = this.generateContentCopyData(
+            null,
+            item.activated
+              ? classNameIconSelectedTrue
+              : classNameIconSelectedFalse,
+            item.suggestion,
+          );
+          elementValue.appendChild(themeSuggestion);
+        });
+      }
+    });
   },
 
   /**
-   * Set the file path of the selected element.
+   * Generates a simple textual output
+   * @param {string}
+   *   The content being delivered for rendering.
+   * @returns {object}
+   *   The element to be appended.
    */
-  setSelectedElementTemplateFilePath() {
-    const selectedThemeElement = this.defaultThemeElement;
-    const selectedElementTemplateFilePathWrapper = this.getSelectedElementTemplateFilePathLayer();
+  generateSingleInfoOutput: (value) => document.createTextNode(value),
+
+  /**
+   * Generates a single input field delivering content that can be copied to the clipboard.
+   * @param {*} value 
+   */
+  generateSingleCopyOutput(label, value) {
     const {
-      classNameSelectedElementTemplateFilePath,
-      classNameSelectedElementTemplateFilePathLabel
+      classNameContentCopyData,
+      classNameContentCopyDataLabel,
     } = this.classNames;
-    const { stringFilePath } = this.strings;
 
-    // Clear legacy information showing in the suggestions layer.
-    selectedElementTemplateFilePathWrapper.innerHTML = '';
+    const outputElement = document.createElement('div');
+    outputElement.classList.add(classNameContentCopyData);
 
-    // Return early if the theme element is not available.
-    if (selectedThemeElement === null) {
-      const emptyTag = this.generateEmptyTag('selected');
-      selectedElementTemplateFilePathWrapper.append(emptyTag);
-      return;
-    }
+    const singleCopyOutput = this.generateContentCopyData(
+      label,
+      classNameContentCopyDataLabel,
+      value,
+    );
 
-    // If suggestions are available, display them.
-    if (
-        selectedThemeElement &&
-        selectedThemeElement.hasOwnProperty('filePath') &&
-        selectedThemeElement.filePath !== null
-    ) {
-      const filePath = selectedThemeElement.filePath;
-      const filePathWrapper = this.generateContentCopyData(
-        stringFilePath,
-        classNameSelectedElementTemplateFilePathLabel,
-        filePath,
-        classNameSelectedElementTemplateFilePath
-      );
-      selectedElementTemplateFilePathWrapper.appendChild(filePathWrapper);
-    }
+    outputElement.appendChild(singleCopyOutput);
+    return outputElement;
   },
 
   /**
    * An empty tag ready to be appended.
    * 
-   * @param {string} infoType
-   *   The type of information to be displayed.
+   * @param {string} message
+   *   The empty message being rendered.
    * @returns {object}
    *   The empty tag ready to be appended.
    */
-  generateEmptyTag(infoType) {
+  generateEmptyTag(message) {
     const {
       classNameElementInfoTextContent,
       classNameElementInfoEmpty,
@@ -1241,10 +1236,7 @@ Drupal.controllerElement = {
       classNameElementInfoEmpty
     );
 
-    noInfoWrapper.textContent = (infoType == 'active')
-    ?
-      stringNoActiveElement
-      : stringNoSelectedElement;
+    noInfoWrapper.textContent = message;
 
     return noInfoWrapper;
   },
@@ -1332,8 +1324,9 @@ Drupal.controllerElement = {
    * Update the selected element information.
    */
   updateActiveElement() {
+    const { stringNoActiveElement } = this.strings;
     const elementInfoLayer = this.getActiveElementInfoLayer();
-    this.setElementInfo(this.activeThemeElement, elementInfoLayer);
+    this.setElementInfo(this.activeThemeElement, elementInfoLayer, stringNoActiveElement);
   },
 
   /**
@@ -1364,14 +1357,8 @@ Drupal.controllerElement = {
    * Update the selected element information.
    */
   updateSelectedElement() {
-    const elementInfoLayer = this.getSelectedElementInfoLayer();
-    this.setElementInfo(
-      this.defaultThemeElement,
-      elementInfoLayer,
-      'selected'
-    );
-    this.setSelectedElementSuggestions();
-    this.setSelectedElementTemplateFilePath();
+    const { stringNoSelectedElement } = this.strings;
+    this.setSelectedElementValues();
     this.setTabCue();
   },
 
diff --git a/js/source/themeElement.js b/js/source/themeElement.js
index 145338b4f84d1a5375d6866c97345463d6425256..6ea0be115448e64c81bb8e3ff6eacbc4746d892a 100644
--- a/js/source/themeElement.js
+++ b/js/source/themeElement.js
@@ -10,6 +10,16 @@ Drupal.themeElement = {
   suggestions: null,
   filePath: null,
   dataNode: null,
+  cacheHit: false,
+  cacheTags: null,
+  cacheContexts: null,
+  cacheKeys: null,
+  cacheMaxAge: 0,
+  preBubblingCacheTags: null,
+  preBubblingCacheContexts: null,
+  preBubblingCacheKeys: null,
+  preBubblingCacheMaxAge: 0,
+  renderingTime: 0,
 
   // Store the initial state.
   initialState: null,
@@ -24,6 +34,16 @@ Drupal.themeElement = {
       suggestions: this.suggestions,
       filePath: this.filePath,
       dataNode: this.dataNode,
+      cacheHit: this.cacheHit,
+      cacheTags: this.cacheTags,
+      cacheContexts: this.cacheContexts,
+      cacheKeys: this.cacheKeys,
+      cacheMaxAge: this.cacheMaxAge,
+      preBubblingCacheTags: this.preBubblingCacheTags,
+      preBubblingCacheContexts: this.preBubblingCacheContexts,
+      preBubblingCacheKeys: this.preBubblingCacheKeys,
+      preBubblingCacheMaxAge: this.preBubblingCacheMaxAge,
+      renderingTime: this.renderingTime,
     };
   },
 
@@ -32,16 +52,48 @@ Drupal.themeElement = {
     this.activated = true;
   },
 
-  getPropertyHook() {
-    return this.propertyHook;
-  },
-
   setPropertyHook(input) {
     this.propertyHook = input;
   },
 
-  getObjectType() {
-    return this.objectType;
+  setCacheHit(input) {
+    this.cacheHit = input;
+  },
+
+  setCacheTags(input) {
+    this.cacheTags = this.parseListRegexpOutput(input);
+  },
+
+  setCacheContexts(input) {
+    this.cacheContexts = this.parseListRegexpOutput(input);
+  },
+
+  setCacheKeys(input) {
+    this.cacheKeys = this.parseListRegexpOutput(input);
+  },
+
+  setCacheMaxAge(input) {
+    this.cacheMaxAge = parseInt(input);
+  },
+
+  setPreBubblingCacheTags(input) {
+    this.preBubblingCacheTags = this.parseListRegexpOutput(input);
+  },
+
+  setPreBubblingCacheContexts(input) {
+    this.preBubblingCacheContexts = this.parseListRegexpOutput(input);
+  },
+
+  setPreBubblingCacheKeys(input) {
+    this.preBubblingCacheKeys = this.parseListRegexpOutput(input);
+  },
+
+  setPreBubblingCacheMaxAge(input) {
+    this.preBubblingCacheMaxAge = parseInt(input);
+  },
+
+  setRenderingTime(input) {
+    this.renderingTime = parseFloat(input);
   },
 
   setObjectType(input) {
@@ -53,13 +105,210 @@ Drupal.themeElement = {
   },
 
   setSuggestions(input) {
-    this.suggestions = input;
+    this.suggestions = this.pasreListOnOffRegexpOutput(input);
   },
 
   setDataNode(input) {
     this.dataNode = input;
   },
 
+  // Getter methods
+  getPropertyHook() {
+    return this.propertyHook;
+  },
+
+  getObjectType() {
+    return this.objectType;
+  },
+
+  getDisplayElements() {
+    const {
+      idControllerSelectedElementInfo,
+      idControllerSelectedElementSuggestionsValue,
+      idControllerSelectedElementFilePathValue,
+      idControllerSelectedElementCacheHit,
+      idControllerSelectedElementCacheMaxAge,
+      idControllerSelectedElementCacheTags,
+      idControllerSelectedElementCacheContexts,
+      idControllerSelectedElementCacheKeys,
+      idControllerSelectedElementPreBubblingCacheTags,
+      idControllerSelectedElementPreBubblingCacheContexts,
+      idControllerSelectedElementPreBubblingCacheKeys,
+      idControllerSelectedElementPreBubblingCacheMaxAge,
+      idControllerSelectedElementRenderingTime,
+    } = Drupal.vdUtilities.ids;
+
+    const {
+      classNameSelectedElementInfoWrapper,
+      classNameSelectedElementInfo,
+      classNameSelectedElementSuggestionsWrapper,
+      classNameSelectedElementSuggestions,
+      classNameSelectedElementTemplateFilePathWrapper,
+      classNameSelectedElementTemplateFilePath,
+      classNameSelectedElementTemplateFilePathLabel,
+    } = Drupal.vdUtilities.classNames;
+
+    const {
+      stringThemeElementInfo,
+      stringThemeElementThemeSuggestions,
+      stringThemeElementFilePath,
+      stringThemeElementFilePathInlineLabel,
+      stringThemeElementCacheHit,
+      stringThemeElementCacheMaxAge,
+      stringThemeElementCacheTags,
+      stringThemeElementCacheContexts,
+      stringThemeElementCacheKeys,
+      stringThemeElementPreBubblingCacheTags,
+      stringThemeElementPreBubblingCacheContexts,
+      stringThemeElementPreBubblingCacheKeys,
+      stringThemeElementPreBubblingCacheMaxAge,
+      stringThemeElementRenderingTime,
+    } = Drupal.vdUtilities.strings;
+
+    return [
+      {
+        key: 'propertyHook',
+        label: stringThemeElementInfo,
+        id: idControllerSelectedElementInfo,
+        type: 'template',
+        displayType: 'info',
+        wrapperClasses: [
+          classNameSelectedElementInfoWrapper
+        ],
+        valueClasses: [
+          classNameSelectedElementInfo
+        ]
+      },
+      {
+        key: 'suggestions',
+        label: stringThemeElementThemeSuggestions,
+        id: idControllerSelectedElementSuggestionsValue,
+        type: 'template',
+        displayType: 'multipleCopyWithChecked',
+        wrapperClasses: [
+          classNameSelectedElementSuggestionsWrapper
+        ],
+        valueClasses: [
+          classNameSelectedElementSuggestions
+        ]
+      },
+      {
+        key: 'filePath',
+        label: stringThemeElementFilePath,
+        inlineLabel: stringThemeElementFilePathInlineLabel,
+        id: idControllerSelectedElementFilePathValue,
+        type: 'template',
+        displayType: 'singleCopy',
+        wrapperClasses: [
+          classNameSelectedElementTemplateFilePathWrapper
+        ],
+        valueClasses: [
+          classNameSelectedElementTemplateFilePath,
+        ],
+      },
+      {
+        key: 'cacheHit',
+        label: stringThemeElementCacheHit,
+        id: idControllerSelectedElementCacheHit,
+        type: 'cache',
+        displayType: 'singleInfo',
+      },
+      {
+        key: 'cacheTags',
+        label: stringThemeElementCacheTags,
+        id: idControllerSelectedElementCacheTags,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'cacheContexts',
+        label: stringThemeElementCacheContexts,
+        id: idControllerSelectedElementCacheContexts,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'cacheKeys',
+        label: stringThemeElementCacheKeys,
+        id: idControllerSelectedElementCacheKeys,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'cacheMaxAge',
+        label: stringThemeElementCacheMaxAge,
+        id: idControllerSelectedElementCacheMaxAge,
+        type: 'cache',
+        displayType: 'singleInfo',
+      },
+      {
+        key: 'preBubblingCacheTags',
+        label: stringThemeElementPreBubblingCacheTags,
+        id: idControllerSelectedElementPreBubblingCacheTags,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'preBubblingCacheContexts',
+        label: stringThemeElementPreBubblingCacheContexts,
+        id: idControllerSelectedElementPreBubblingCacheContexts,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'preBubblingCacheKeys',
+        label: stringThemeElementPreBubblingCacheKeys,
+        id: idControllerSelectedElementPreBubblingCacheKeys,
+        type: 'cache',
+        displayType: 'multipleCopy',
+      },
+      {
+        key: 'preBubblingCacheMaxAge',
+        label: stringThemeElementPreBubblingCacheMaxAge,
+        id: idControllerSelectedElementPreBubblingCacheMaxAge,
+        type: 'cache',
+        displayType: 'singleInfo',
+      },
+      {
+        key: 'renderingTime',
+        label: stringThemeElementRenderingTime,
+        id: idControllerSelectedElementRenderingTime,
+        type: 'cache',
+        displayType: 'singleInfo',
+      },
+    ];
+  },
+
+  /**
+   * Parses a string with a list of items.
+   * @param {string} regexpOutput
+   *   The outut of the regexp extraction.
+   * @returns {array}
+   *   The array that contains a list of extracted strings.
+   */
+  parseListRegexpOutput(regexpOutput) {
+    return regexpOutput
+      .split('\n')
+      .map((line) => {
+        return line.trim().replace(/^\*\s/, '');
+      })
+      .filter((line) => {
+        return line.length > 0;
+      });
+  },
+
+  pasreListOnOffRegexpOutput(regexpOutput) {
+    return regexpOutput.trim()
+    .split(/\n\s*/)
+    .map((themeSuggestion) => {
+      const splitThemeSuggestion = themeSuggestion.split(' ');
+      return {
+        suggestion: splitThemeSuggestion[1],
+        activated: (splitThemeSuggestion[0] === 'x'),
+      };
+    });
+  },
+
   // Reset object to its initial state.
   reset: function() {
     Object.assign(this, this.initialState);
diff --git a/js/source/utilities.js b/js/source/utilities.js
index d468b40d054d752057dddc99476e9ecfdc5c310d..4c91cc6a48246c932ce61ecd36ae1d8df32c5cf1 100644
--- a/js/source/utilities.js
+++ b/js/source/utilities.js
@@ -3,6 +3,24 @@
  */
 Drupal.vdUtilities = {
 
+  // Element IDs.
+  ids: {
+    idControllerSelectedElementInfo: 'visual-debugger--controller--info',
+    idControllerSelectedElementSuggestionsValue: 'visual-debugger--controller--suggestions',
+    idControllerSelectedElementFilePathValue: 'visual-debugger--controller--file-path',
+    idControllerSelectedElementCacheHit: 'visual-debugger--controller--cache-hit',
+    idControllerSelectedElementCacheMaxAge: 'visual-debugger--controller--cache-max-age',
+    idControllerSelectedElementCacheTags: 'visual-debugger--controller--cache-tags',
+    idControllerSelectedElementCacheContexts: 'visual-debugger--controller--cache-contexts',
+    idControllerSelectedElementCacheKeys: 'visual-debugger--controller--cache-keys',
+    idControllerSelectedElementPreBubblingCacheTags: 'visual-debugger--controller--pre-bubbling-cache-tags',
+    idControllerSelectedElementPreBubblingCacheContexts: 'visual-debugger--controller--pre-bubbling-cache-contexts',
+    idControllerSelectedElementPreBubblingCacheKeys: 'visual-debugger--controller--pre-bubbling-cache-keys',
+    idControllerSelectedElementPreBubblingCacheMaxAge: 'visual-debugger--controller--pre-bubbling-cache-max-age',
+    idControllerSelectedElementRenderingTime: 'visual-debugger--controller--rendering-time',
+  },
+
+  // Class names.
   classNames: {
     classNameIconCheckboxChecked: 'icon-checkbox-checked',
     classNameIconCheckboxUnchecked: 'icon-checkbox-unchecked',
@@ -13,6 +31,13 @@ Drupal.vdUtilities = {
     classNameInputWrapperActivated: 'wrapper-activated',
     classNameInputWrapperDeactivated: 'wrapper-deactivated',
     classNameInputWrapperDisabled: 'disabled',
+    classNameSelectedElementInfoWrapper: 'content-item__info-wrapper',
+    classNameSelectedElementInfo: 'content-item__info',
+    classNameSelectedElementSuggestionsWrapper: 'content-item__suggestions-wrapper',
+    classNameSelectedElementSuggestions: 'content-item__suggestions',
+    classNameSelectedElementTemplateFilePathWrapper: 'content-item__template-file-path-wrapper',
+    classNameSelectedElementTemplateFilePath: 'content-item__template-file-path',
+    classNameSelectedElementTemplateFilePathLabel: 'label',
   },
 
   // layerAttributes.
@@ -23,6 +48,24 @@ Drupal.vdUtilities = {
     layerAttributeIsVisible: 'data-vd-visible',
   },
 
+  // Strings.
+  strings: {
+    stringThemeElementInfo: Drupal.t('Object Type'),
+    stringThemeElementThemeSuggestions: Drupal.t('Theme Suggestions'),
+    stringThemeElementFilePath: Drupal.t('Template File Path'),
+    stringThemeElementFilePathInlineLabel: Drupal.t('File Path'),
+    stringThemeElementCacheHit: Drupal.t('Cache Hit'),
+    stringThemeElementCacheMaxAge: Drupal.t('Cache Max-Age'),
+    stringThemeElementCacheTags: Drupal.t('Cache Tags'),
+    stringThemeElementCacheContexts: Drupal.t('Cache Contexts'),
+    stringThemeElementCacheKeys: Drupal.t('Cache Keys'),
+    stringThemeElementPreBubblingCacheTags: Drupal.t('Pre-Bubbling Cache Tags'),
+    stringThemeElementPreBubblingCacheContexts: Drupal.t('Pre-Bubbling Cache Contexts'),
+    stringThemeElementPreBubblingCacheKeys: Drupal.t('Pre-Bubbling Cache Keys'),
+    stringThemeElementPreBubblingCacheMaxAge: Drupal.t('Pre-Bubbling Cache Max-Age'),
+    stringThemeElementRenderingTime: Drupal.t('Rendering Time'),
+  },
+
   /**
    * Gets all siblings of a given element.
    * @param {object} element 
@@ -156,4 +199,9 @@ Drupal.vdUtilities = {
       return node.classList.contains(classNameInputWrapperActivated);
     });
   },
+
+
+  getNodesWithCache(nodes) {
+    return nodes.filter(node => node.instanceActiveElement.cacheHit);
+  }
 }
\ No newline at end of file
diff --git a/js/source/vd.js b/js/source/vd.js
index 154caadb0efd2df6a207affac8f36679b2e0289c..380a25c9fb962b297f3010cf5e1d738f226c4a2a 100644
--- a/js/source/vd.js
+++ b/js/source/vd.js
@@ -93,7 +93,7 @@
     regExs: {
 
       // Validate theme DEBUG.
-      regexGetTemplateDebug: () => new RegExp("THEME DEBUG"),
+      regexGetTemplateDebug: () => new RegExp("^(THEME DEBUG|START RENDERED)$"),
 
       // Validate template hook.
       regexGetTemplateHook: () => new RegExp("THEME HOOK: '([^']*)'"),
@@ -108,6 +108,48 @@
 
       // Validate complete theme analysis.
       regexGetTemplateEndOutput: () => new RegExp("END OUTPUT from '([^']*)'"),
+
+      // Cache-hit.
+      regexGetCacheHit: () => new RegExp("CACHE-HIT: (Yes|No)"),
+
+      // List cache tags.
+      regexGetCacheTags: () => new RegExp(
+        "^\\s?CACHE TAGS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // List cache contexts.
+      regexGetCacheContexts: () => new RegExp(
+        "^\\s?CACHE CONTEXTS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // List cache keys.
+      regexGetCacheKeys: () => new RegExp(
+        "^\\s?CACHE KEYS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // Cache max-age
+      regexGetCacheMaxAge: () => new RegExp("^\\s?CACHE MAX-AGE: (-?[0-9]*)"),
+
+      // List pre-bubbling cache tags.
+      regexGetPreBubblingCacheTags: () => new RegExp(
+        "PRE-BUBBLING CACHE TAGS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // List pre-bubbling cache contexts.
+      regexGetPreBubblingCacheContexts: () => new RegExp(
+        "PRE-BUBBLING CACHE CONTEXTS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // List pre-bubbling cache keys.
+      regexGetPreBubblingCacheKeys: () => new RegExp(
+        "PRE-BUBBLING CACHE KEYS:\s*\n\s*([^']*)\s*\n*\s*"
+      ),
+
+      // Pre-bubbling cache max-age.
+      regexGetPreBubblingCacheMaxAge: () => new RegExp("PRE-BUBBLING CACHE MAX-AGE: (-?[0-9]*)"),
+
+      // Rendering time.
+      regexGetRenderingTime: () => new RegExp("RENDERING TIME: (-?[0-9]*\.?[0-9]*)"),
     },
 
     // Strores the controller layer.
@@ -427,6 +469,16 @@
         regexGetTemplateHook,
         regexGetTemplateSuggestions,
         regexGetTemplateFilePath,
+        regexGetCacheHit,
+        regexGetCacheMaxAge,
+        regexGetPreBubblingCacheTags,
+        regexGetPreBubblingCacheContexts,
+        regexGetPreBubblingCacheKeys,
+        regexGetPreBubblingCacheMaxAge,
+        regexGetRenderingTime,
+        regexGetCacheTags,
+        regexGetCacheContexts,
+        regexGetCacheKeys,
       } = this.regExs;
 
       const { layerIdAttributeName } = this.layerAttributes;
@@ -457,14 +509,85 @@
           // Analyze comment nodes only.
           if (child.nodeType !== Node.COMMENT_NODE) return;
 
+          // If there is no active template, return.
+          // if (activeElement === null) return;
+
+
           // A THEME instance is found and initiated.
           if (regexGetTemplateDebug().test(child.textContent)) {
             activeElement.setActivated();
             return;
           }
 
-          // If there is no active template, return.
-          if (activeElement === null) return;
+          // Test for a cache hit.
+          const cacheHit = child.textContent.match(regexGetCacheHit());
+          if (cacheHit) {
+            activeElement.setCacheHit(cacheHit[1]);
+            return;
+          }
+
+          // Test for cache max-age.
+          const cacheMaxAge = child.textContent.match(regexGetCacheMaxAge());
+          if (cacheMaxAge) {
+            activeElement.setCacheMaxAge(cacheMaxAge[1]);
+            return;
+          }
+
+          // Test for cache tags.
+          const cacheTags = child.textContent.match(regexGetCacheTags());
+          if (cacheTags) {
+            activeElement.setCacheTags(cacheTags[1]);
+            return;
+          }
+
+          // Test for cache contexts.
+          const cacheContexts = child.textContent.match(regexGetCacheContexts());
+          if (cacheContexts) {
+            activeElement.setCacheContexts(cacheContexts[1]);
+            return;
+          }
+
+          // Test for cache contexts.
+          const cacheKeys = child.textContent.match(regexGetCacheKeys());
+          if (cacheKeys) {
+            activeElement.setCacheKeys(cacheKeys[1]);
+            return;
+          }
+
+          // Test for pre-bubbing cache tags.
+          const preBubblingCacheTags = child.textContent.match(regexGetPreBubblingCacheTags());
+          if (preBubblingCacheTags) {
+            activeElement.setPreBubblingCacheTags(preBubblingCacheTags[1]);
+            return;
+          }
+
+          // Test for pre-bubbing cache contexts.
+          const preBubblingCacheContexts = child.textContent.match(regexGetPreBubblingCacheContexts());
+          if (preBubblingCacheContexts) {
+            activeElement.setPreBubblingCacheContexts(preBubblingCacheContexts[1]);
+            return;
+          }
+
+          // Test for pre-bubbing cache keys.
+          const preBubblingCacheKeys = child.textContent.match(regexGetPreBubblingCacheKeys());
+          if (preBubblingCacheKeys) {
+            activeElement.setPreBubblingCacheKeys(preBubblingCacheKeys[1]);
+            return;
+          }
+
+          // Test for pre-bubbing cache max-age.
+          const cachePreBubblingMaxAge = child.textContent.match(regexGetPreBubblingCacheMaxAge());
+          if (cachePreBubblingMaxAge) {
+            activeElement.setPreBubblingCacheMaxAge(cachePreBubblingMaxAge[1]);
+            return;
+          }
+
+          // Test for pre-bubbing cache max-age.
+          const renderingTime = child.textContent.match(regexGetRenderingTime());
+          if (renderingTime) {
+            activeElement.setRenderingTime(renderingTime[1]);
+            return;
+          }
 
           // Gets the template hook.
           const templateHookMatch = child.textContent.match(regexGetTemplateHook());
@@ -478,16 +601,9 @@
           const templateSuggestions = child.textContent.match(
             regexGetTemplateSuggestions()
           );
+
           if (templateSuggestions) {
-            const splitSuggestions = templateSuggestions[1].trim().split(/\n\s*/);
-            const splitSuggestionsProcessed = splitSuggestions.map((themeSuggestion) => {
-              const splitThemeSuggestion = themeSuggestion.split(' ');
-              return {
-                suggestion: splitThemeSuggestion[1],
-                activated: (splitThemeSuggestion[0] === 'x'),
-              }
-            });
-            activeElement.setSuggestions(splitSuggestionsProcessed);
+            activeElement.setSuggestions(templateSuggestions[1]);
             return;
           }