nexa-ui-kit 0.10.0 → 0.11.1

package/dist/components/NToastContainer.js

@@ -1,8 +1,8 @@
 import { useToast } from '../services/ToastService.js'
-import { h, hText, effect, signal, computed, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-8ac4158',
+  __scopeId: 'data-v-4587cf3e',
   __hmrId: 'NToastContainer_nexa',
   props: {
   position: { type: String, default: 'top-right' }
@@ -17,32 +17,48 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { toasts, remove, positionClass, useToast, $slots, position, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-8ac4158": "" }, [
+    return h(_ntc_Teleport, { to: "body", "data-v-4587cf3e": "" }, [
         "\n    ",
-        h('div', { class: ["n-toast-container", positionClass], "data-v-8ac4158": "" }, [
+        h('div', { class: ["n-toast-container", positionClass], "data-v-4587cf3e": "" }, [
         "\n      ",
         (toasts.value).map((toast, index) =>
-        h('div', { class: ["n-toast", `is-${toast.type}`], key: toast.id, onClick: ($event) => { remove(toast.id) }, "data-v-8ac4158": "" }, [
+        h('div', { class: ["n-toast", `is-${toast.type}`], key: toast.id, onClick: ($event) => { remove(toast.id) }, "data-v-4587cf3e": "" }, [
         "\n        ",
-        h('div', { class: "n-toast-body", "data-v-8ac4158": "" }, [
+        h('div', { class: "n-toast-body", "data-v-4587cf3e": "" }, [
         "\n          ",
-        h('span', { class: "n-toast-icon", "data-v-8ac4158": "" }, [
+        h('span', { class: "n-toast-icon", "data-v-4587cf3e": "" }, [
         "\n            ",
-        toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚡' : 'ℹ',
+        (toast.type === 'success') ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4587cf3e": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-4587cf3e": "" })
+      ]) : (toast.type === 'error') ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4587cf3e": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-4587cf3e": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-4587cf3e": "" })
+      ]) : (toast.type === 'warning') ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4587cf3e": "" }, [
+        h('path', { d: "M12 9v4", "data-v-4587cf3e": "" }),
+        h('path', { d: "M12 17h.01", "data-v-4587cf3e": "" }),
+        h('path', { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", "data-v-4587cf3e": "" })
+      ]) : (true) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4587cf3e": "" }, [
+        h('circle', { cx: "12", cy: "12", r: "10", "data-v-4587cf3e": "" }),
+        h('line', { x1: "12", y1: "16", x2: "12", y2: "12", "data-v-4587cf3e": "" }),
+        h('line', { x1: "12", y1: "8", x2: "12.01", y2: "8", "data-v-4587cf3e": "" })
+      ]) : null,
         "\n          "
       ]),
         "\n          ",
-        h('span', { class: "n-toast-message", "data-v-8ac4158": "" }, [
+        h('span', { class: "n-toast-message", "data-v-4587cf3e": "" }, [
         toast.message
       ]),
         "\n          ",
-        h('button', { class: "n-toast-dismiss", onClick: ($event) => { $event.stopPropagation(); (($event) => { remove(toast.id) })($event) }, "aria-label": "Dismiss", "data-v-8ac4158": "" }, [
-        "×"
+        h('button', { class: "n-toast-dismiss", onClick: ($event) => { $event.stopPropagation(); (($event) => { remove(toast.id) })($event) }, "aria-label": "Dismiss", "data-v-4587cf3e": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-4587cf3e": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-4587cf3e": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-4587cf3e": "" })
+      ])
       ]),
         "\n        "
       ]),
         "\n        ",
-        (toast.duration > 0) ? h('div', { class: "n-toast-progress", style: { animationDuration: toast.duration + 'ms' }, "data-v-8ac4158": "" }) : null
+        (toast.duration > 0) ? h('div', { class: "n-toast-progress", style: { animationDuration: toast.duration + 'ms' }, "data-v-4587cf3e": "" }) : null
       ])
       ),
         "\n    "
@@ -50,12 +66,12 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-8ac4158'
+_sfc_main.__scopeId = 'data-v-4587cf3e'
 _sfc_main.__hmrId = 'NToastContainer_nexa'
 
 export default _sfc_main
 
-const __style = `.n-toast-container[data-v-8ac4158]{
+const __style = `.n-toast-container[data-v-4587cf3e]{
   position: fixed;
   z-index: var(--n-z-toast);
   display: flex;
@@ -65,40 +81,40 @@ const __style = `.n-toast-container[data-v-8ac4158]{
   padding: var(--n-space-4);
 }
 
-.is-top-right[data-v-8ac4158]{
+.is-top-right[data-v-4587cf3e]{
   top: 0;
   right: 0;
   align-items: flex-end;
 }
 
-.is-top-left[data-v-8ac4158]{
+.is-top-left[data-v-4587cf3e]{
   top: 0;
   left: 0;
   align-items: flex-start;
 }
 
-.is-bottom-right[data-v-8ac4158]{
+.is-bottom-right[data-v-4587cf3e]{
   bottom: 0;
   right: 0;
   align-items: flex-end;
   flex-direction: column-reverse;
 }
 
-.is-bottom-left[data-v-8ac4158]{
+.is-bottom-left[data-v-4587cf3e]{
   bottom: 0;
   left: 0;
   align-items: flex-start;
   flex-direction: column-reverse;
 }
 
-.is-top-center[data-v-8ac4158]{
+.is-top-center[data-v-4587cf3e]{
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 
-.n-toast[data-v-8ac4158]{
+.n-toast[data-v-4587cf3e]{
   pointer-events: auto;
   min-width: 300px;
   max-width: 420px;
@@ -108,52 +124,52 @@ const __style = `.n-toast-container[data-v-8ac4158]{
   overflow: hidden;
   box-shadow: var(--n-shadow-lg);
   cursor: pointer;
-  animation: n-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: n-toast-in var(--n-transition-spring);
   transition: all var(--n-transition-fast);
 }
 
-.n-toast[data-v-8ac4158]:hover{
+.n-toast[data-v-4587cf3e]:hover{
   transform: scale(1.02);
   background: var(--n-color-surface-alt);
 }
 
 @keyframes n-toast-in {
-from[data-v-8ac4158]{
+from[data-v-4587cf3e]{
     opacity: 0;
     transform: translateX(30px) scale(0.95);
   }
-to[data-v-8ac4158]{
+to[data-v-4587cf3e]{
     opacity: 1;
     transform: translateX(0) scale(1);
   }
 }
 
-.is-top-left .n-toast[data-v-8ac4158]{
+.is-top-left .n-toast[data-v-4587cf3e]{
   animation-name: n-toast-in-left;
 }
 
 @keyframes n-toast-in-left {
-from[data-v-8ac4158]{
+from[data-v-4587cf3e]{
     opacity: 0;
     transform: translateX(-30px) scale(0.95);
   }
-to[data-v-8ac4158]{
+to[data-v-4587cf3e]{
     opacity: 1;
     transform: translateX(0) scale(1);
   }
 }
 
-.is-bottom-right .n-toast[data-v-8ac4158], 
-.is-bottom-left .n-toast[data-v-8ac4158]{
+.is-bottom-right .n-toast[data-v-4587cf3e], 
+.is-bottom-left .n-toast[data-v-4587cf3e]{
   animation-name: n-toast-in-up;
 }
 
 @keyframes n-toast-in-up {
-from[data-v-8ac4158]{
+from[data-v-4587cf3e]{
     opacity: 0;
     transform: translateY(20px) scale(0.95);
   }
-to[data-v-8ac4158]{
+to[data-v-4587cf3e]{
     opacity: 1;
     transform: translateY(0) scale(1);
   }
@@ -166,7 +182,7 @@ to[data-v-8ac4158]{
   padding: var(--n-space-4) var(--n-space-5);
 }
 
-.n-toast-icon[data-v-8ac4158]{
+.n-toast-icon[data-v-4587cf3e]{
   width: 28px;
   height: 28px;
   border-radius: var(--n-radius-full);
@@ -178,12 +194,12 @@ to[data-v-8ac4158]{
   flex-shrink: 0;
 }
 
-.is-success .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-success); color: white; }
-.is-error .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-danger); color: white; }
-.is-info .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-primary); color: white; }
-.is-warning .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-warning); color: white; }
+.is-success .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-success); color: white; }
+.is-error .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-danger); color: white; }
+.is-info .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-primary); color: white; }
+.is-warning .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-warning); color: white; }
 
-.n-toast-message[data-v-8ac4158]{
+.n-toast-message[data-v-4587cf3e]{
   color: var(--n-color-text);
   font-size: var(--n-text-sm);
   font-weight: var(--n-weight-medium);
@@ -191,7 +207,7 @@ to[data-v-8ac4158]{
   line-height: var(--n-leading-normal);
 }
 
-.n-toast-dismiss[data-v-8ac4158]{
+.n-toast-dismiss[data-v-4587cf3e]{
   background: transparent;
   border: none;
   color: var(--n-color-text-muted);
@@ -204,22 +220,22 @@ to[data-v-8ac4158]{
   flex-shrink: 0;
 }
 
-.n-toast[data-v-8ac4158]:hover .n-toast-dismiss{
+.n-toast[data-v-4587cf3e]:hover .n-toast-dismiss{
   opacity: 1;
 }
 
-.n-toast-dismiss[data-v-8ac4158]:hover{
+.n-toast-dismiss[data-v-4587cf3e]:hover{
   color: var(--n-color-text);
 }
 
-.n-toast-progress[data-v-8ac4158]{
+.n-toast-progress[data-v-4587cf3e]{
   height: 3px;
   background: var(--n-color-border);
   position: relative;
   overflow: hidden;
 }
 
-.n-toast-progress[data-v-8ac4158]::after{
+.n-toast-progress[data-v-4587cf3e]::after{
   content: '';
   position: absolute;
   top: 0;
@@ -230,13 +246,13 @@ to[data-v-8ac4158]{
   animation: n-toast-shrink linear forwards;
 }
 
-.is-success .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-success); }
-.is-error .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-danger); }
-.is-info .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-primary); }
-.is-warning .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-warning); }
+.is-success .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-success); }
+.is-error .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-danger); }
+.is-info .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-primary); }
+.is-warning .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-warning); }
 
 @keyframes n-toast-shrink {
-from[data-v-8ac4158]{ transform: scaleX(1); }
-to[data-v-8ac4158]{ transform: scaleX(0); }
+from[data-v-4587cf3e]{ transform: scaleX(1); }
+to[data-v-4587cf3e]{ transform: scaleX(0); }
 }`
-injectStyle('data-v-8ac4158', __style)
+injectStyle('data-v-4587cf3e', __style)

package/dist/components/NToastContainer.nexa

@@ -22,10 +22,13 @@ const positionClass = `is-${props.position.replace('-', '-')}`
       >
         <div class="n-toast-body">
           <span class="n-toast-icon">
-            {{ toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚡' : 'ℹ' }}
+            <svg v-if="toast.type === 'success'" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
+            <svg v-else-if="toast.type === 'error'" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
+            <svg v-else-if="toast.type === 'warning'" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+            <svg v-else viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
           </span>
           <span class="n-toast-message">{{ toast.message }}</span>
-          <button class="n-toast-dismiss" @click.stop="remove(toast.id)" aria-label="Dismiss">&times;</button>
+          <button class="n-toast-dismiss" @click.stop="remove(toast.id)" aria-label="Dismiss"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
         </div>
         <div v-if="toast.duration > 0" class="n-toast-progress" :style="{ animationDuration: toast.duration + 'ms' }"></div>
       </div>
@@ -87,7 +90,7 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   overflow: hidden;
   box-shadow: var(--n-shadow-lg);
   cursor: pointer;
-  animation: n-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: n-toast-in var(--n-transition-spring);
   transition: all var(--n-transition-fast);
 }
 

package/dist/components/NTooltip.js

@@ -1,4 +1,4 @@
-import { signal, h, hText, effect, computed, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { signal, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
 
 const _sfc_main = defineComponent({

package/dist/components/NTreeMenu.js

@@ -1,7 +1,7 @@
-import { signal, computed, h, hText, effect, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-44b3942a',
+  __scopeId: 'data-v-1dc3f956',
   __hmrId: 'NTreeMenu_nexa',
   props: {
   items: { type: Array, default: () => [] },
@@ -48,21 +48,23 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit, items, selectable, selected, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-tree-menu", "data-v-44b3942a": "" }, [
+    return h('div', { class: "n-tree-menu", "data-v-1dc3f956": "" }, [
         "\n    ",
         (flatTree.value).map((item, index) =>
-        h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-44b3942a": "" }, [
+        h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-1dc3f956": "" }, [
         "\n      ",
-        h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-44b3942a": "" }, [
+        h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-1dc3f956": "" }, [
         "\n        ",
-        (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-44b3942a": "" }, [
-        "▶"
-      ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-44b3942a": "" }) : null,
+        (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-1dc3f956": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-1dc3f956": "" }, [
+        h('path', { d: "M9 18l6-6-6-6", "data-v-1dc3f956": "" })
+      ])
+      ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-1dc3f956": "" }) : null,
         "\n        ",
-        (item.icon) ? h('span', { class: "n-tree-icon", "data-v-44b3942a": "" }, [
+        (item.icon) ? h('span', { class: "n-tree-icon", "data-v-1dc3f956": "" }, [
         item.icon
       ]) : null,
-        h('span', { class: "n-tree-label", "data-v-44b3942a": "" }, [
+        h('span', { class: "n-tree-label", "data-v-1dc3f956": "" }, [
         item.label
       ]),
         "\n      "
@@ -73,79 +75,116 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-44b3942a'
+_sfc_main.__scopeId = 'data-v-1dc3f956'
 _sfc_main.__hmrId = 'NTreeMenu_nexa'
 
 export default _sfc_main
 
-const __style = `.n-tree-menu[data-v-44b3942a]{
+const __style = `.n-tree-menu[data-v-1dc3f956]{
   font-family: var(--n-font-sans);
   font-size: var(--n-text-sm);
   user-select: none;
 }
 
-.n-tree-item[data-v-44b3942a]{
+.n-tree-item[data-v-1dc3f956]{
   --n-tree-depth: 0;
+  position: relative;
+}
+
+/* Líneas conectoras verticales */
+.n-tree-item[data-v-1dc3f956]:not([style*="--n-tree-depth: 0"])::before{
+  content: '';
+  position: absolute;
+  left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--n-color-border);
+  opacity: 0.5;
 }
 
-.n-tree-row[data-v-44b3942a]{
+.n-tree-row[data-v-1dc3f956]{
   display: flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.5rem;
-  padding-left: calc(0.5rem + var(--n-tree-depth, 0) * 1.25rem);
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  padding-left: calc(0.75rem + var(--n-tree-depth, 0) * 1.25rem);
   border-radius: var(--n-radius-sm);
   cursor: pointer;
   transition: all var(--n-transition-fast);
   color: var(--n-color-text);
+  position: relative;
+}
+
+/* Línea conectora horizontal */
+.n-tree-item[data-v-1dc3f956]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
+  content: '';
+  position: absolute;
+  left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
+  top: 50%;
+  width: 0.75rem;
+  height: 1px;
+  background: var(--n-color-border);
+  opacity: 0.5;
 }
 
-.n-tree-row[data-v-44b3942a]:hover{
+.n-tree-row[data-v-1dc3f956]:hover{
   background: var(--n-color-surface-hover);
 }
 
-.n-tree-item.is-selected > .n-tree-row[data-v-44b3942a]{
+.n-tree-item.is-selected > .n-tree-row[data-v-1dc3f956]{
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
 
-.n-tree-toggle[data-v-44b3942a]{
-  background: none;
-  border: none;
-  color: var(--n-color-text-muted);
+.n-tree-toggle[data-v-1dc3f956]{
+  background: var(--n-color-glass);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  color: var(--n-color-text-secondary);
   cursor: pointer;
-  font-size: 0.6rem;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: transform var(--n-transition-fast);
+  transition: all var(--n-transition-fast);
   flex-shrink: 0;
 }
 
-.n-tree-toggle.is-expanded[data-v-44b3942a]{
+.n-tree-toggle[data-v-1dc3f956]:hover{
+  background: var(--n-color-primary-light);
+  border-color: var(--n-color-primary);
+  color: var(--n-color-primary);
+}
+
+.n-tree-toggle svg[data-v-1dc3f956]{
+  transition: transform var(--n-transition-fast);
+}
+
+.n-tree-toggle.is-expanded svg[data-v-1dc3f956]{
   transform: rotate(90deg);
 }
 
-.n-tree-toggle-placeholder[data-v-44b3942a]{
-  width: 16px;
-  height: 16px;
+.n-tree-toggle-placeholder[data-v-1dc3f956]{
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
 }
 
-.n-tree-icon[data-v-44b3942a]{
-  font-size: 1rem;
+.n-tree-icon[data-v-1dc3f956]{
+  font-size: 1.1rem;
   flex-shrink: 0;
 }
 
-.n-tree-label[data-v-44b3942a]{
+.n-tree-label[data-v-1dc3f956]{
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: var(--n-weight-medium);
 }`
-injectStyle('data-v-44b3942a', __style)
+injectStyle('data-v-1dc3f956', __style)

package/dist/components/NTreeMenu.nexa

@@ -59,7 +59,7 @@ const toggle = (id, e) => {
           class="n-tree-toggle"
           :class="{ 'is-expanded': isExpanded(item.id) }"
           @click="toggle(item.id, $event)"
-        >▶</button>
+        ><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg></button>
         <span v-else class="n-tree-toggle-placeholder"></span>
         <span v-if="item.icon" class="n-tree-icon">{{ item.icon }}</span>
         <span class="n-tree-label">{{ item.label }}</span>
@@ -77,18 +77,44 @@ const toggle = (id, e) => {
 
 .n-tree-item {
   --n-tree-depth: 0;
+  position: relative;
+}
+
+/* Líneas conectoras verticales */
+.n-tree-item:not([style*="--n-tree-depth: 0"])::before {
+  content: '';
+  position: absolute;
+  left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--n-color-border);
+  opacity: 0.5;
 }
 
 .n-tree-row {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.5rem;
-  padding-left: calc(0.5rem + var(--n-tree-depth, 0) * 1.25rem);
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  padding-left: calc(0.75rem + var(--n-tree-depth, 0) * 1.25rem);
   border-radius: var(--n-radius-sm);
   cursor: pointer;
   transition: all var(--n-transition-fast);
   color: var(--n-color-text);
+  position: relative;
+}
+
+/* Línea conectora horizontal */
+.n-tree-item:not([style*="--n-tree-depth: 0"]) .n-tree-row::before {
+  content: '';
+  position: absolute;
+  left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
+  top: 50%;
+  width: 0.75rem;
+  height: 1px;
+  background: var(--n-color-border);
+  opacity: 0.5;
 }
 
 .n-tree-row:hover {
@@ -102,33 +128,43 @@ const toggle = (id, e) => {
 }
 
 .n-tree-toggle {
-  background: none;
-  border: none;
-  color: var(--n-color-text-muted);
+  background: var(--n-color-glass);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  color: var(--n-color-text-secondary);
   cursor: pointer;
-  font-size: 0.6rem;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: transform var(--n-transition-fast);
+  transition: all var(--n-transition-fast);
   flex-shrink: 0;
 }
 
-.n-tree-toggle.is-expanded {
+.n-tree-toggle:hover {
+  background: var(--n-color-primary-light);
+  border-color: var(--n-color-primary);
+  color: var(--n-color-primary);
+}
+
+.n-tree-toggle svg {
+  transition: transform var(--n-transition-fast);
+}
+
+.n-tree-toggle.is-expanded svg {
   transform: rotate(90deg);
 }
 
 .n-tree-toggle-placeholder {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   flex-shrink: 0;
 }
 
 .n-tree-icon {
-  font-size: 1rem;
+  font-size: 1.1rem;
   flex-shrink: 0;
 }
 
@@ -138,5 +174,6 @@ const toggle = (id, e) => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: var(--n-weight-medium);
 }
 </style>

package/dist/styles/tokens.css

@@ -44,6 +44,15 @@
   --n-color-glass-border: rgba(255, 255, 255, 0.08);
   --n-color-glass-hover: rgba(255, 255, 255, 0.08);
 
+  --n-color-primary-border: rgba(59, 130, 246, 0.2);
+  --n-color-success-border: rgba(16, 185, 129, 0.2);
+  --n-color-warning-border: rgba(245, 158, 11, 0.2);
+  --n-color-danger-border: rgba(239, 68, 68, 0.2);
+  --n-color-info-border: rgba(6, 182, 212, 0.2);
+
+  --n-color-stripe: rgba(255, 255, 255, 0.12);
+  --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.3);
+
   /* ─── Typography ─── */
   --n-font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   --n-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
@@ -158,6 +167,15 @@
   --n-color-glass-border: rgba(0, 0, 0, 0.06);
   --n-color-glass-hover: rgba(255, 255, 255, 0.8);
 
+  --n-color-primary-border: rgba(37, 99, 235, 0.2);
+  --n-color-success-border: rgba(5, 150, 105, 0.2);
+  --n-color-warning-border: rgba(217, 119, 6, 0.2);
+  --n-color-danger-border: rgba(220, 38, 38, 0.2);
+  --n-color-info-border: rgba(8, 145, 178, 0.2);
+
+  --n-color-stripe: rgba(0, 0, 0, 0.08);
+  --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
+
   --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
   --n-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08);