nexa-ui-kit 0.10.0 → 0.11.1

package/src/components/NInputNumber.nexa

@@ -220,9 +220,9 @@ const onFocus = () => {
   <div class="n-inum">
     <label v-if="label" class="n-inum-label">{{ label }}</label>
     <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
-      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
+      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
       <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
-      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
+      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
     </div>
   </div>
 </template>

package/src/components/NModal.nexa

@@ -100,11 +100,11 @@ onUnmounted(() => {
         @keydown="handleKeydown"
       >
         <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
-          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close"><svg viewBox="0 0 24 24" width="20" height="20" 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>
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
-          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close"><svg viewBox="0 0 24 24" width="20" height="20" 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 class="n-modal-content">
           <slot />
@@ -155,7 +155,7 @@ onUnmounted(() => {
   box-shadow: var(--n-shadow-xl);
   transform: scale(0.9) translateY(20px);
   opacity: 0;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-spring);
   overflow: hidden;
   outline: none;
   max-height: 85vh;
@@ -216,7 +216,7 @@ onUnmounted(() => {
 
 .n-modal-footer {
   padding: var(--n-space-5) var(--n-space-8);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--n-color-glass);
   border-top: 1px solid var(--n-color-border);
   display: flex;
   justify-content: flex-end;

package/src/components/NMultiSelect.nexa

@@ -65,10 +65,10 @@ onBeforeUnmount(() => close())
     <div class="n-ms-trigger" role="combobox" tabindex="0" :aria-expanded="isOpen.value" @click="toggleOpen" @keydown="onKeydown">
       <div v-if="selectedLabels.value.length > 0" class="n-ms-chips"><div v-for="c in selectedLabels.value.slice(0, maxChips)" :key="String(c.value)" class="n-ms-chip"><span class="n-ms-chip-label">{{ c.label }}</span><button type="button" class="n-ms-chip-remove" aria-label="Remove" tabindex="-1" :disabled="effectiveDisabled.value" @click="removeChip(c.value, $event)">✕</button></div><span v-if="selectedLabels.value.length > maxChips" class="n-ms-more">+{{ selectedLabels.value.length - maxChips }}</span></div>
       <span v-else class="n-ms-placeholder">{{ placeholder }}</span>
-      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear">✕</button><span class="n-ms-arrow">▾</span></div>
+      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear" aria-label="Clear"><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><span class="n-ms-arrow"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></span></div>
     </div>
-    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
-    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" 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="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
+    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" 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="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
   </div>
 </template>
 

package/src/components/NPaginator.nexa

@@ -58,11 +58,11 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
       <span class="n-paginator-report">{{ start.value }}-{{ end.value }} of {{ totalRecords }}</span>
     </div>
     <div class="n-paginator-center">
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage">«</button>
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev">‹</button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage" aria-label="First page"><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="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev" aria-label="Previous page"><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="M15 18l-6-6 6-6"/></svg></button>
       <span class="n-pg-page">{{ page.value + 1 }} / {{ pageCount.value }}</span>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next">›</button>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage">»</button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next" aria-label="Next page"><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="M9 18l6-6-6-6"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage" aria-label="Last page"><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="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg></button>
     </div>
     <div class="n-paginator-right">
       <select class="n-pg-select" :value="rows" @change="changeRows">

package/src/components/NPassword.nexa

@@ -123,9 +123,10 @@ const toggle = (e) => {
         @input="onInput"
       />
       <div class="n-password-actions">
-        <button v-if="clearable && modelValue" type="button" class="n-password-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clear">✕</button>
+        <button v-if="clearable && modelValue" type="button" class="n-password-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clear"><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>
         <button v-if="toggleMask" type="button" class="n-password-action" :aria-pressed="(!masked.value).toString()" :disabled="disabled" :aria-label="masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña'" @click="toggle">
-          {{ masked.value ? '👁' : '🙈' }}
+          <svg v-if="masked.value" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+          <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/><path d="M23 1L1 23"/></svg>
         </button>
       </div>
     </div>
@@ -143,7 +144,7 @@ const toggle = (e) => {
 
     <ul v-if="showRequirements && validate && modelValue" class="n-password-req" :id="inputId.value + '-requirements'">
       <li v-for="r in requirements.value" :key="r.key" class="n-password-req-item" :class="{ 'is-ok': r.ok }">
-        <span class="n-password-req-icon">{{ r.ok ? '✓' : '•' }}</span>
+        <span class="n-password-req-icon"><svg v-if="r.ok" viewBox="0 0 24 24" width="12" height="12" 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 viewBox="0 0 24 24" width="12" height="12" fill="currentColor" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="4"/></svg></span>
         <span>{{ r.label }}</span>
       </li>
     </ul>
@@ -156,7 +157,7 @@ const toggle = (e) => {
 .n-password-wrapper { position:relative; display:flex; align-items:center; background: var(--n-color-bg); border: 1px solid var(--n-color-border); border-radius: var(--n-radius-md); transition: all var(--n-transition-normal); }
 .n-password-wrapper:focus-within { border-color: var(--n-color-primary); box-shadow: 0 0 0 3px var(--n-color-primary-light); background: var(--n-color-surface); }
 .n-password-wrapper.has-error { border-color: var(--n-color-danger); }
-.n-password-wrapper.has-error:focus-within { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
+.n-password-wrapper.has-error:focus-within { box-shadow: 0 0 0 3px var(--n-color-danger-light); }
 .n-password-input { width:100%; background:transparent; border:none; outline:none; color: var(--n-color-text); padding: 0.75rem 2.75rem 0.75rem 1rem; font-size: var(--n-text-base); font-family: inherit; }
 .n-password-input::placeholder { color: var(--n-color-text-muted); }
 .n-password-actions { position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }

package/src/components/NProgressBar.nexa

@@ -51,7 +51,7 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
 .n-progress-bar {
   height: 100%;
   border-radius: var(--n-radius-full);
-  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width var(--n-transition-slow);
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -89,11 +89,11 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
 .is-striped .n-progress-bar {
   background-image: linear-gradient(
     45deg,
-    rgba(255, 255, 255, 0.12) 25%,
+    var(--n-color-stripe) 25%,
     transparent 25%,
     transparent 50%,
-    rgba(255, 255, 255, 0.12) 50%,
-    rgba(255, 255, 255, 0.12) 75%,
+    var(--n-color-stripe) 50%,
+    var(--n-color-stripe) 75%,
     transparent 75%,
     transparent
   );

package/src/components/NSelect.nexa

@@ -200,8 +200,8 @@ onBeforeUnmount(() => {
         {{ placeholder }}
       </span>
       <div class="n-select-trigger-actions">
-        <button v-if="clearable && modelValue" type="button" class="n-select-clear" @click.stop="clear" tabindex="-1">✕</button>
-        <span class="n-select-arrow">▾</span>
+        <button v-if="clearable && modelValue" type="button" class="n-select-clear" @click.stop="clear" tabindex="-1" aria-label="Clear"><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>
+        <span class="n-select-arrow"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></span>
       </div>
     </div>
     <div v-if="isOpen.value && appendTo !== 'body'" class="n-select-dropdown">
@@ -361,7 +361,7 @@ onBeforeUnmount(() => {
   box-shadow: var(--n-shadow-lg);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+  animation: n-dropdown-in 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in {
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
 }
 
 .n-select-dropdown.is-top {
-  animation: n-dropdown-in-top 0.2s cubic-bezier(0, 1, 0, 1);
+  animation: n-dropdown-in-top 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in-top {

package/src/components/NTag.nexa

@@ -12,7 +12,7 @@ const emit = defineEmits(['close'])
 <template>
   <span :class="['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : '']">
     <slot />
-    <button v-if="closable" class="n-tag-close" @click="emit('close')">&times;</button>
+    <button v-if="closable" class="n-tag-close" @click="emit('close')" aria-label="Close"><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="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
   </span>
 </template>
 
@@ -40,31 +40,31 @@ const emit = defineEmits(['close'])
 
 .n-tag-primary {
   background: var(--n-color-primary-light);
-  border-color: rgba(59, 130, 246, 0.25);
+  border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
 
 .n-tag-success {
   background: var(--n-color-success-light);
-  border-color: rgba(16, 185, 129, 0.25);
+  border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
 
 .n-tag-danger {
   background: var(--n-color-danger-light);
-  border-color: rgba(239, 68, 68, 0.25);
+  border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
 
 .n-tag-warning {
   background: var(--n-color-warning-light);
-  border-color: rgba(245, 158, 11, 0.25);
+  border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
 
 .n-tag-info {
   background: var(--n-color-info-light);
-  border-color: rgba(6, 182, 212, 0.25);
+  border-color: var(--n-color-info-border);
   color: var(--n-color-info);
 }
 

package/src/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/src/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/src/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);