From eb3a8ef624852b67b2da82e686a6c3e730ef8b3f Mon Sep 17 00:00:00 2001
From: Marcos Hollanda <24984-mabho@users.noreply.drupalcode.org>
Date: Sat, 29 Jun 2024 04:58:40 +0000
Subject: [PATCH] Issue #3455698 by mabho: Add Cache debug information when
 available in the source code

---
 README.md                                     |   63 +-
 css/dist/vd.css                               | 1690 +++++++++--------
 css/dist/vd.css.map                           |    2 +-
 css/source/base/_variables.scss               |    4 +
 css/source/vd.scss                            |   44 +-
 fonts/visual-debugger-icons/demo.html         |   16 +-
 .../fonts/visual-debugger-icons.svg           |    1 +
 .../fonts/visual-debugger-icons.ttf           |  Bin 3780 -> 3832 bytes
 .../fonts/visual-debugger-icons.woff          |  Bin 3856 -> 3908 bytes
 fonts/visual-debugger-icons/selection.json    |    2 +-
 fonts/visual-debugger-icons/style.css         |    9 +-
 fonts/visual-debugger-icons/style.scss        |   11 +-
 fonts/visual-debugger-icons/variables.scss    |    1 +
 js/dist/controllerElement.min.js              |    2 +-
 js/dist/themeElement.min.js                   |    2 +-
 js/dist/utilities.min.js                      |    2 +-
 js/dist/vd.min.js                             |    2 +-
 js/source/controllerElement.js                |  387 ++--
 js/source/themeElement.js                     |  263 ++-
 js/source/utilities.js                        |   48 +
 js/source/vd.js                               |  140 +-
 21 files changed, 1576 insertions(+), 1113 deletions(-)

diff --git a/README.md b/README.md
index 89e7945..1fe33fe 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 0b29d10..d83c162 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 8511937..8002936 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 a5a1658..05cea55 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 6cff3fb..4d4e449 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 c5b62ca..386ad10 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 2f293e9..cfd200d 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
GIT binary patch
delta 423
zcmX>i`$M*#fsuiMft#U$ftkU;KUm+0Ux+=Mfq`KU0|P@sa&BV5OP&?R3=E7i3=9k<
z>50V!3=9kc3=E7D7#J8h(sL@)8hhVYGcYjDU|`^~$Vg30(YSrtfq{Yh0s{ksSw==`
zB1Z^I5(5Jd2Ll6xN=9x;g|P|)0|Nt(4g&*&O-_EYW1^s!@B#(~o(u*C28G<jiUI~%
zhQ|yHJRKl@USe*lybISi1_quL3=B+q1^LA#49p+{_-=sY8JL;hO*~NT9KpcAAjBZR
zz|6qJz{sHRlJzCW%X2R;z6$>T_y2#8at4K$3{bHkuo&b2$KovFOk%cT)}p%^m>C!+
zZ{!o++{tLduFlB7@c#hQD&_+WtPBjCOzP(9jH?(K{xjGdIl{F1KZL=+z_57_$15f|
zpR)=#7M92J+k9o<W&zvuXsW_*5CcR{KEiFz$UpfHx5Z=w9w`ClRV+Fz=U9HQ%78<i
se{&R%Afvc3Ll{FULlHwULncE$Lmq<ygCT<+gYo2py!M+9@-j0509cxDxBvhE

delta 357
zcmew%dqlRLfsuiMft#U$ftkU;KUm+0Ux+=Efq`KU0|P@sa&BV5mAuRA7#J937#J9G
z(i4jd7#J7?7#J8k7#J8h(sL@)p1t1f#K6Effq{WbAR{#~MPuShWd;WB1q=)fW*Hf&
zi5wv;i3|+fHy9WgR5Ef)D)dztKo<UCU|_Jw$xn7n6nw$Y!N9;{!oa{Fmz!8oz#zl$
zn1O*Ogn@xUAulmERo;>7GXn!p2?GO@UO|3w2?I080KO$4c?M?YHxmz3+XjGLB><LU
zWKej?`tsb%i?4$J|NZ|Tq?keBB?DL_2rR<*|FJlWn2nf~=q?6k2FA?|jIQjP-*UWU
zl4D?K+bP5!&u{aUftv-a^HG6OFo*%7Cx78KXXKl#!(%ZygGWq&MS^7)%M(@(1_p2#
c@@?+p5oBaEn7n{jl+j?aC!hW1ue{8R0Jxu8(EtDd

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
GIT binary patch
delta 463
zcmbOrcSKIC+~3WOfsuiMfq~zJfg42g{a|36{DDtwqK<HVc5-fF0RsbL1_J{_2?)RB
zSz(->SPT-o!@$760mTC8IhAP)42(}07`QAzxUu(rbw+Ap3IhX=3<Cp$83=3KzU+{Z
zk($WBz!Sp2z@P%c93d=88M!4D3=BLK3=9l5AZ)C{z>t%loXEi7$Fqfjfk6R;1-*n9
z<R(@WFfj030rA0Dmf>+;Vs0t}1J4%*1|~famUrR$R*+v@!oa`}vH+}?fti7UftmT;
zWFE$9`v?XG1|bFk24)5(21W*jm#i;2UY>h-@m28uzyJS({Li59k^w3f1Quib|5%(w
zoJq`9%vyB!<O7VNn=dn(v8yvOF#JEjw2Juv11kdqCzHClI^!xvhW`vUM~*P9{tsa=
zFfeT9;C#g-=W|x!#=`P=ew(ih+$>;Q9!*vF4Pt=k$pSp)jQo>5cq}H@@JI<TuVT?*
zImhyYRR$b0{F|5Y2r`NrGlVguG88csGh{O4GvqNSFc>oEF&Ixy<g?$*%g4+J06Rc&
AfB*mh

delta 417
zcmX>iH$hIU+~3WOfsuiMfq`Fufg42g9bsUcY{)M>QB$lwGdVZ0fPsNAgMon|2ZXQW
zU0#=-SPT-o!oa}50mTC8IhAP)42*Xe7`OyL_}S~-P8q3*DGUtUZx|RD%s^OU;!5R=
zjMPL11|Ag#1_m(Z2w_Rg$StX0VBqm!U|_HSVSN<_hMfH5L<R;wo(2X6200KGe8JC=
zn^;l6z`(PBfq_8*jAa-e=OyN*GBEHQU|?X<17UebuFnPe#U%_3d>_DSKx&y87#NtD
z-%RFVthNncU|<kn5MTg_F)}E;WPN$=<;7RQ|Ns8~5Ar>O!b=9QNDx?r@&99S7BL$!
zE74sH%nXd1&oH{OZ?@!o$t1_X(6&>EKc3&_D+4zRSm&bxqhJsNL{E0$F=ynPT)|^8
zc?*x20E-06E|w>(px^?9HQ(l2Jc5kk1`J^gsSHI7#SEDY`3!js3Jit}dJG1W9r^4x
JJMu9z0syXaUbz4O

diff --git a/fonts/visual-debugger-icons/selection.json b/fonts/visual-debugger-icons/selection.json
index 7df6be9..14c1f42 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 955934b..60b8947 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 a659752..5141bde 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 60f2f33..8a383c7 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 ecfbbbf..6d0aad0 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 239de38..4ba70b8 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 69b44d5..632d082 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 9508b94..a6812de 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 7608a50..a25ba0e 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 145338b..6ea0be1 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 d468b40..4c91cc6 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 154caad..380a25c 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;
           }
 
-- 
GitLab