Fixing more tree stuff.

Author: Templarian

src/pg/tree/tree.css

@@ -5,7 +5,7 @@
 [part="items"] {
   display: flex;
   flex-direction: column;
-  background: var(--pg-tree-background, #2C2C2C);
+  background: var(--pg-tree-background, transparent);
   padding: 0.25rem;
   gap: 0.25rem;
 }

src/pg/treeItem/treeItem.css

@@ -6,43 +6,66 @@
   display: none !important;
 }
 
-[part="button"] {
+[part=iconButton] {
   display: flex;
   background: transparent;
   border: 0;
-  color: #FFF;
+  color: var(--pg-tree-item-color, #453C4F);
   padding: 0;
-  --pg-icon-color: #FFF;
+  --pg-icon-color: var(--pg-tree-item-color, #453C4F);
+  align-items: center;
+  font-family: var(--pg-font-family);
+  font-size: var(--pg-tree-item-font-size, 1rem);
+}
+[part=labelButton] {
+  display: flex;
+  background: transparent;
+  border: 0;
+  color: var(--pg-tree-item-color, #453C4F);
+  padding: 0;
+  --pg-icon-color: var(--pg-tree-item-color, #453C4F);
   flex: 1;
-  align-items: center
+  align-items: center;
+  font-family: var(--pg-font-family);
+  font-size: var(--pg-tree-item-font-size, 1rem);
 }
 
-[part="input"] {
+[part=input] {
   flex: 1;
   outline: 0;
-  padding: 0.125rem 0.25rem;
-  border: 0;
+  padding: 0.25em 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--pg-tree-item-border-color, #453C4F);
 }
 
-[part="item"] {
+[part=item] {
   display: flex;
   background: var(--pg-tree-item-background, transparent);
   border-radius: 0.25rem;
+  padding: 0.25rem;
+  gap: 0.5rem;
 }
 
-[part="item"]:hover {
-  background: var(--pg-tree-item-background-hover, #383838);
+[part=item]:hover {
+  background: var(--pg-tree-item-background-hover, #453C4F);
+}
+[part=item]:hover [part=labelButton] {
+  --pg-icon-color: var(--pg-tree-item-color-hover, #FFF);
+}
+[part=item]:hover [part=label] {
+  color: var(--pg-tree-item-color-hover, #FFFFFF);
 }
 
-[part="item"].selected {
-  background: var(--pg-tree-item-background-selected, #4B5876)
+[part=item].selected {
+  background: var(--pg-tree-item-background-selected, #453C4F);
 }
 
-[part="actions"] {
+[part=actions] {
   display: flex;
 }
 
-[part="items"] {
+[part=items] {
   display: flex;
   flex-direction: column;
   padding-left: 1rem;

src/pg/treeItem/treeItem.html

@@ -1,7 +1,9 @@
 <div part="item">
-  <input part="input" type="input" class="hide" />
-  <button part="button">
+  <button part="iconButton">
     <pg-icon part="icon"></pg-icon>
+  </button>
+  <input part="input" type="input" class="hide" />
+  <button part="labelButton">
     <div part="label"></div>
   </button>
   <div part="actions"></div>

src/pg/treeItem/treeItem.ts

@@ -23,16 +23,17 @@ export default class PgTreeItem extends HTMLElement {
 
   @Part() $item: HTMLDivElement;
   @Part() $input: HTMLInputElement;
-  @Part() $button: HTMLButtonElement;
+  @Part() $iconButton: HTMLButtonElement;
   @Part() $icon: PgIcon;
   @Part() $label: HTMLDivElement;
+  @Part() $labelButton: HTMLButtonElement;
   @Part() $actions: HTMLDivElement;
   @Part() $items: HTMLDivElement;
 
   connectedCallback() {
     this.$item.addEventListener('action', this.#handleAction.bind(this));
-    this.$button.addEventListener('dblclick', this.#handleDoubleClick.bind(this));
-    this.$button.addEventListener('click', this.#handleClick.bind(this));
+    this.$labelButton.addEventListener('dblclick', this.#handleDoubleClick.bind(this));
+    this.$labelButton.addEventListener('click', this.#handleClick.bind(this));
     this.$item.addEventListener('contextmenu', this.#handleContextMenu.bind(this));
     this.$input.addEventListener('blur', this.#handleBlur.bind(this));
     this.$input.addEventListener('keydown', this.#handleKeyDown.bind(this));
@@ -114,7 +115,7 @@ export default class PgTreeItem extends HTMLElement {
   }
 
   #handleDoubleClick(e) {
-    this.$button.classList.add('hide');
+    this.$labelButton.classList.add('hide');
     this.$actions.classList.add('hide');
     this.$input.classList.remove('hide');
     this.$input.value = this.label;
@@ -123,10 +124,10 @@ export default class PgTreeItem extends HTMLElement {
   }
 
   #handleBlur() {
-    this.$button.classList.remove('hide');
+    this.$labelButton.classList.remove('hide');
     this.$actions.classList.remove('hide');
     this.$input.classList.add('hide');
-    this.$button.focus();
+    this.$labelButton.focus();
     this.dispatchEvent(new CustomEvent('rename', {
       bubbles: true,
       composed: true,
@@ -143,11 +144,11 @@ export default class PgTreeItem extends HTMLElement {
         this.#handleBlur();
         break;
       case 'Escape':
-        this.$button.classList.remove('hide');
+        this.$labelButton.classList.remove('hide');
         this.$actions.classList.remove('hide');
         this.$input.classList.add('hide');
         this.$input.value = this.label;
-        this.$button.focus();
+        this.$labelButton.focus();
         break;
       case 'ArrowUp':
         this.dispatchEvent(new CustomEvent('up', {