diff --git a/package.json b/package.json
index d67db817..eef5d4ab 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,6 @@
     "chai": "4.3.4",
     "http-server": "13.0.1",
     "npm-run-all": "4.1.5",
-    "sass": "1.38.1",
-    "sass-loader": "12.1.0",
     "vue-jest": "^5.0.0-alpha.10",
     "webpack": "5.51.1"
   },
diff --git a/src/components/TreeGrid.vue b/src/components/TreeGrid.vue
index caf812c3..8dae3bdc 100644
--- a/src/components/TreeGrid.vue
+++ b/src/components/TreeGrid.vue
@@ -112,15 +112,12 @@
   };
 </script>
 
-<style lang="scss">
+<style>
 
-  // Embedded SCSS is the 'grtg-default-skin' skin
-  .grtg-wrapper.grtg-default-skin {
-
-    > .grtg {
-      margin: 0;
-      padding: 0;
-    }
+  /* Embedded CSS is the 'grtg-default-skin' skin */
+  .grtg-wrapper.grtg-default-skin > .grtg {
+    margin: 0;
+    padding: 0;
   }
 
 </style>
\ No newline at end of file
diff --git a/src/components/TreeGridNode.vue b/src/components/TreeGridNode.vue
index a766a8e4..4e28afbb 100644
--- a/src/components/TreeGridNode.vue
+++ b/src/components/TreeGridNode.vue
@@ -266,60 +266,47 @@
   };
 </script>
 
-<style lang="scss">
-
-  $baseHeight: 1.2rem;
-  $itemSpacing: 1.2rem;
-
-  // Everything's in a .grtg-wrapper (embedded SCSS is the 'grtg-default-skin' skin)
+<style>
+  /* Everything's in a .grtg-wrapper (embedded SCSS is the 'grtg-default-skin' skin) */
   .grtg-wrapper.grtg-default-skin {
+    --baseHeight: 1.2rem;
+    --itemSpacing: 1.2rem;
+  }
 
-    // Spacing
-    .grtgn-self-expander,
-    .grtgn-self-checkbox,
-    .grtgn-self-radio,
-    .grtgn-self-spacer,
-    .grtgn-self-action {
-      display: inline-block;
-      min-width: 1rem;
-    }
-
-    // The expander button and indicator content
-    .grtgn-self-expander {
-      padding: 0;
-      background: none;
-      border: none;
-      height: $baseHeight;
-
-      i.grtgn-self-expanded-indicator {
-        font-style: normal;
-
-        &::before {
-          content: '+';
-        }
-      }
-
-      &.grtgn-self-expanded {
+  /* Spacing */
+  .grtg-wrapper.grtg-default-skin .grtgn-self-expander,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-checkbox,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-radio,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-spacer,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-action {
+    display: inline-block;
+    min-width: 1rem;
+  }
 
-        i.grtgn-self-expanded-indicator {
+  /* The expander button and indicator content */
+  .grtg-wrapper.grtg-default-skin .grtgn-self-expander {
+    padding: 0;
+    background: none;
+    border: none;
+    height: var(--baseHeight);
+  }
 
-          &::before {
-            content: '-';
-          }
-        }
-      }
-    }
+  .grtg-wrapper.grtg-default-skin .grtgn-self-expander i.grtgn-self-expanded-indicator::before {
+    content: '+';
+  }
 
-    .grtgn-self-checkbox,
-    .grtgn-self-radio {
-      margin: 0 0 0 (-$itemSpacing);
-    }
+  .grtg-wrapper.grtg-default-skin .grtgn-self-expander.grtgn-self-expanded i.grtgn-self-expanded-indicator::before {
+    content: '-';
+  }
 
-    .grtgn-self-text,
-    .grtgn-self-label,
-    .grtgn-self-omit-input {
-      margin-left: $itemSpacing;
-    }
+  .grtg-wrapper.grtg-default-skin .grtgn-self-checkbox,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-radio {
+    margin: 0 0 0 calc(-1 * var(--itemSpacing));
+  }
 
+  .grtg-wrapper.grtg-default-skin .grtgn-self-text,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-label,
+  .grtg-wrapper.grtg-default-skin .grtgn-self-omit-input {
+    margin-left: var(--itemSpacing);
   }
 </style>
\ No newline at end of file
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index d6f82086..18c3dc5e 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -123,16 +123,13 @@
   };
 </script>
 
-<style lang="scss">
+<style>
 
-  // Embedded SCSS is the 'grtv-default-skin' skin
-  .grtv-wrapper.grtv-default-skin {
-
-    > .grtv {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
+  /* Embedded SCSS is the 'grtv-default-skin' skin */
+  .grtv-wrapper.grtv-default-skin > .grtv {
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
 </style>
\ No newline at end of file
diff --git a/src/components/TreeViewNode.vue b/src/components/TreeViewNode.vue
index 08decf0f..7c4cdc3c 100644
--- a/src/components/TreeViewNode.vue
+++ b/src/components/TreeViewNode.vue
@@ -426,149 +426,143 @@
 
 </script>
 
-<style lang="scss">
-  $baseHeight: 1.2rem;
-  $itemSpacing: 1.2rem;
+<style>
 
-  // Everything's in a .grtv-wrapper (embedded SCSS is the 'grtv-default-skin' skin)
+  /* Everything's in a .grtv-wrapper (embedded SCSS is the 'grtv-default-skin' skin) */
   .grtv-wrapper.grtv-default-skin {
+    --baseHeight: 1.2rem;
+    --itemSpacing: 1.2rem;
+  }
 
-    // The node, including its content and children list
-    .grtvn {
-      padding-left: 0;
+  /* The node, including its content and children list */
+  .grtv-wrapper.grtv-default-skin .grtvn {
+    padding-left: 0;
+  }
 
-      &:first-child {
-        margin-top: 0;
-      }
+  .grtv-wrapper.grtv-default-skin .grtvn:first-child {
+    margin-top: 0;
+  }
 
-      // ARIA styles
-      &[role="treeitem"]:focus {
-        outline: 0;
+  /* ARIA styles */
+  .grtv-wrapper.grtv-default-skin .grtvn[role="treeitem"]:focus {
+    outline: 0;
+  }
 
-        >.grtvn-self {
-          outline: black dotted 1px;
-        }
-      }
-    }
+  .grtv-wrapper.grtv-default-skin .grtvn[role="treeitem"]:focus >.grtvn-self {
+    outline: black dotted 1px;
+  }
 
-    // The node's content, excluding the list of child nodes
-    .grtvn-self {
-      display: flex;
-      align-items: flex-start;
-      line-height: $baseHeight;
-    }
+  /* The node's content, excluding the list of child nodes */
+  .grtv-wrapper.grtv-default-skin .grtvn-self {
+    display: flex;
+    align-items: flex-start;
+    line-height: var(--baseHeight);
+  }
 
-    // Drag and Drop styles
-    .grtvn-dragging .grtvn-self {
-      opacity: 0.5;
-    }
+  /* Drag and Drop styles */
+  .grtv-wrapper.grtv-default-skin .grtvn-dragging .grtvn-self {
+    opacity: 0.5;
+  }
 
-    .grtvn-self-drop-target {
-      flex-wrap: wrap;
+  .grtv-wrapper.grtv-default-skin .grtvn-self-drop-target {
+    flex-wrap: wrap;
+  }
 
-      &.grtvn-self-child-drop-target {
-        opacity: .5;
-      }
+  .grtv-wrapper.grtv-default-skin .grtvn-self-drop-target.grtvn-self-child-drop-target {
+    opacity: .5;
+  }
 
-      .grtvn-self-sibling-drop-target {
-        width: 100%;
-        height: 7px;
-        background-color: #dddddd;
+  .grtv-wrapper.grtv-default-skin .grtvn-self-drop-target .grtvn-self-sibling-drop-target {
+    width: 100%;
+    height: 7px;
+    background-color: #dddddd;
+  }
 
-        &.grtvn-self-sibling-drop-target-hover {
-          background-color: #bbbbbb;
-        }
-      }
-    }
+  .grtv-wrapper.grtv-default-skin .grtvn-self-drop-target .grtvn-self-sibling-drop-target.grtvn-self-sibling-drop-target-hover {
+    background-color: #bbbbbb;
+  }
 
-    // The expander button and indicator content
-    .grtvn-self-expander {
-      padding: 0;
-      background: none;
-      border: none;
-      height: $baseHeight;
+  /* The expander button and indicator content */
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander {
+    padding: 0;
+    background: none;
+    border: none;
+    height: var(--baseHeight);
+  }
 
-      i.grtvn-self-expanded-indicator {
-        font-style: normal;
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander i.grtvn-self-expanded-indicator {
+    font-style: normal;
+  }
 
-        &::before {
-          content: '+';
-        }
-      }
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander i.grtvn-self-expanded-indicator::before {
+    content: '+';
+  }
 
-      &.grtvn-self-expanded {
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander.grtvn-self-expanded i.grtvn-self-expanded-indicator::before {
+    content: '-';
+  }
 
-        i.grtvn-self-expanded-indicator {
+  /* The styling for when the node is selected */
+  .grtv-wrapper.grtv-default-skin .grtvn-self-selected {
+    background-color: #f0f0f8;
+  }
 
-          &::before {
-            content: '-';
-          }
-        }
-      }
-    }
-
-    // The styling for when the node is selected
-    .grtvn-self-selected {
-      background-color: #f0f0f8;
-    }
-
-    // Spacing
-    .grtvn-self-expander,
-    .grtvn-self-checkbox,
-    .grtvn-self-radio,
-    .grtvn-self-spacer,
-    .grtvn-self-action {
-      min-width: 1rem;
-    }
-
-    .grtvn-self-expander,
-    .grtvn-self-spacer {
-      margin: 0;
-    }
-
-    .grtvn-self-checkbox,
-    .grtvn-self-radio {
-      margin: 0 0 0 (-$itemSpacing);
-    }
-
-    .grtvn-self-text,
-    .grtvn-self-label {
-      margin-left: $itemSpacing;
-    }
-
-    // Action buttons section
-    .grtvn-self-action {
-      padding: 0;
-      background: none;
-      border: none;
-      height: $baseHeight;
-    }
-
-    // Action buttons (add, delete, etc)
-    i.grtvn-self-add-child-icon {
-      font-style: normal;
-
-      &::before {
-        content: '+';
-      }
-    }
+  /* Spacing */
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-checkbox,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-radio,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-spacer,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-action {
+    min-width: 1rem;
+  }
 
-    i.grtvn-self-delete-icon {
-      font-style: normal;
+  .grtv-wrapper.grtv-default-skin .grtvn-self-expander,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-spacer {
+    margin: 0;
+  }
 
-      &::before {
-        content: 'x';
-      }
-    }
+  .grtv-wrapper.grtv-default-skin .grtvn-self-checkbox,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-radio {
+    margin: 0 0 0 calc(-1 * var(--itemSpacing));
+  }
+
+  .grtv-wrapper.grtv-default-skin .grtvn-self-text,
+  .grtv-wrapper.grtv-default-skin .grtvn-self-label {
+    margin-left: var(--itemSpacing);
+  }
 
-    .grtvn-children-wrapper {
-      margin: 0 0 0 (1rem + $itemSpacing);
-    }
+  /* Action buttons section */
+  .grtv-wrapper.grtv-default-skin .grtvn-self-action {
+    padding: 0;
+    background: none;
+    border: none;
+    height: var(--baseHeight);
+  }
+
+  /* Action buttons (add, delete, etc) */
+  .grtv-wrapper.grtv-default-skin i.grtvn-self-add-child-icon {
+    font-style: normal;
+  }
+
+  .grtv-wrapper.grtv-default-skin i.grtvn-self-add-child-icon::before {
+    content: '+';
+  }
+
+  .grtv-wrapper.grtv-default-skin i.grtvn-self-delete-icon {
+    font-style: normal;
+  }
+
+  .grtv-wrapper.grtv-default-skin i.grtvn-self-delete-icon::before {
+    content: 'x';
+  }
+
+  .grtv-wrapper.grtv-default-skin .grtvn-children-wrapper {
+    margin: 0 0 0 calc(1rem + var(--itemSpacing));
+  }
 
-    // The node's child list
-    .grtvn-children {
-      padding: 0;
-      list-style: none;
-    }
+  /* The node's child list */
+  .grtv-wrapper.grtv-default-skin .grtvn-children {
+    padding: 0;
+    list-style: none;
   }
 </style>
diff --git a/tests/local/slots.js b/tests/local/slots.js
index 428d8085..a70a1a3e 100644
--- a/tests/local/slots.js
+++ b/tests/local/slots.js
@@ -19,14 +19,16 @@ export default [
   {
     id: 'node2',
     label: 'Radiobutton Node',
-    input: {
-      type: 'radio',
-      name: 'radiobutton1'
-    },
-    state: {
+    treeNodeSpec: {
       input: {
-        value: false,
-        disabled: false
+        type: 'radio',
+        name: 'radiobutton1'
+      },
+      state: {
+        input: {
+          value: false,
+          disabled: false
+        }
       }
     }
   },
diff --git a/yarn.lock b/yarn.lock
index cae851b3..a3659b6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2471,12 +2471,12 @@ browser-process-hrtime@^1.0.0:
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
 browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.19.1:
-  version "4.19.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.3.tgz#29b7caad327ecf2859485f696f9604214bedd383"
-  integrity sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.0.tgz#35951e3541078c125d36df76056e94738a52ebe9"
+  integrity sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==
   dependencies:
-    caniuse-lite "^1.0.30001312"
-    electron-to-chromium "^1.4.71"
+    caniuse-lite "^1.0.30001313"
+    electron-to-chromium "^1.4.76"
     escalade "^3.1.1"
     node-releases "^2.0.2"
     picocolors "^1.0.0"
@@ -2557,7 +2557,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001312:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
   version "1.0.30001313"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz#a380b079db91621e1b7120895874e2fd62ed2e2f"
   integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
@@ -3367,7 +3367,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.4.71:
+electron-to-chromium@^1.4.76:
   version "1.4.76"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.76.tgz#a0494baedaf51094b1c172999919becd9975a934"
   integrity sha512-3Vftv7cenJtQb+k00McEBZ2vVmZ/x+HEF7pcZONZIkOsESqAqVuACmBxMv0JhzX7u0YltU0vSqRqgBSTAhFUjA==
@@ -6146,9 +6146,9 @@ postcss@^7.0.36:
     source-map "^0.6.1"
 
 postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.7:
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8"
-  integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
+  integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
   dependencies:
     nanoid "^3.3.1"
     picocolors "^1.0.0"