feat: add CSS utility for stretching label slot in wa-tree component

Author: erdalkaraca

packages/core/src/externals/wa-tree-shadow-parts.ts

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+
+/**
+ * Stretch the Web Awesome label slot across the rest of the tree row.
+ *
+ * By default the slot is only as wide as its content, so clicks (and the context menu’s
+ * synthetic click) in the empty area beside a short name often miss the slotted nodes.
+ * `wa-tree` only updates selection when mousedown and click targets line up, so those
+ * misses leave the wrong row selected. `flex: 1` makes the label column fill the row
+ * so hits stay on the item’s content.
+ *
+ * Applied via `LyraWidget.finalizeStyles`: document-level CSS cannot target `::part()`
+ * on `wa-tree-item` that lives only inside nested Lit shadow roots.
+ */
+export const waTreeLabelSlotStretch = css`
+    wa-tree-item::part(label) {
+        flex: 1;
+        min-width: 0;
+    }
+`;

packages/core/src/parts/part.ts

@@ -282,7 +282,7 @@ export abstract class LyraPart extends LyraContainer {
         }
     `;
 
-    protected static finalizeStyles(styles?: CSSResultGroup) {
+    static finalizeStyles(styles?: CSSResultGroup) {
         const own = super.finalizeStyles(styles);
         return [LyraPart.baseStyles, ...own];
     }

packages/core/src/widgets/widget.ts

@@ -1,4 +1,5 @@
-import {LitElement, PropertyValues} from "lit";
+import {LitElement, PropertyValues, type CSSResultGroup} from "lit";
+import {waTreeLabelSlotStretch} from "../externals/wa-tree-shadow-parts";
 import {subscribe as event_subscribe, unsubscribe as event_unsubscribe, type SubscriptionToken} from "../core/events";
 import {toastError, toastInfo} from "../core/toast";
 import {commandRegistry, ExecuteParams} from "../core/commandregistry";
@@ -14,6 +15,10 @@ Object.defineProperty(LitElement.prototype, "model", {
 const LyraWidgetBase = SignalWatcher(LitElement) as unknown as typeof LitElement;
 
 export abstract class LyraWidget extends LyraWidgetBase {
+    static finalizeStyles(styles?: CSSResultGroup) {
+        return [waTreeLabelSlotStretch, ...super.finalizeStyles(styles)];
+    }
+
     private signalCleanups = new Set<() => void>();
     private eventSubscriptions = new Set<SubscriptionToken>();