nexa-ui-kit 0.11.4 → 0.11.6

package/src/components/NPaginator.nexa

@@ -73,5 +73,87 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
 </template>
 
 <style scoped>
-.n-paginator{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}
+.n-paginator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--n-space-3);
+  padding: var(--n-space-3) var(--n-space-4);
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
+  font-family: var(--n-font-sans);
+}
+
+.n-paginator-report {
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-xs);
+}
+
+.n-paginator-center {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-2);
+}
+
+.n-pg-btn {
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.n-pg-btn:hover:not(:disabled) {
+  background: var(--n-color-glass);
+  transform: scale(1.05);
+}
+
+.n-pg-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.n-pg-btn:focus-visible {
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}
+
+.n-pg-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-pg-page {
+  min-width: 2.5rem;
+  text-align: center;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  padding: 0.25rem 0.5rem;
+  background: var(--n-color-primary);
+  color: white;
+  border-radius: var(--n-radius-md);
+  line-height: 1.4;
+}
+
+.n-pg-select {
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  font-size: var(--n-text-xs);
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.n-pg-select:focus-visible {
+  border-color: var(--n-color-primary);
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}
 </style>

package/src/components/NProgressBar.nexa

@@ -42,28 +42,30 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   background: var(--n-color-surface-alt);
   border-radius: var(--n-radius-full);
   overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
-.is-sm .n-progress-track { height: 6px; }
-.is-md .n-progress-track { height: 10px; }
-.is-lg .n-progress-track { height: 14px; }
+.is-sm .n-progress-track { height: 8px; }
+.is-md .n-progress-track { height: 12px; }
+.is-lg .n-progress-track { height: 16px; }
 
 .n-progress-bar {
   height: 100%;
   border-radius: var(--n-radius-full);
-  transition: width var(--n-transition-slow);
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 0.35rem;
   min-width: 0;
+  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
 }
 
-.is-primary { background: var(--n-color-primary); }
-.is-success { background: var(--n-color-success); }
-.is-danger { background: var(--n-color-danger); }
-.is-warning { background: var(--n-color-warning); }
-.is-info { background: var(--n-color-info); }
+.is-primary { background: var(--n-color-primary); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
+.is-success { background: var(--n-color-success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
+.is-danger { background: var(--n-color-danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
+.is-warning { background: var(--n-color-warning); box-shadow: 0 0 8px rgba(234, 179, 8, 0.3); }
+.is-info { background: var(--n-color-info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
 
 .n-progress-label {
   color: white;

package/src/components/NRadio.nexa

@@ -20,7 +20,7 @@ const select = () => {
 <template>
   <label class="n-radio" :class="{ 'is-checked': isChecked(), 'is-disabled': disabled }">
     <div class="n-radio-circle" @click="select">
-      <div class="n-radio-dot"></div>
+      <div v-if="isChecked()" class="n-radio-dot"></div>
     </div>
     <span v-if="label" class="n-radio-label">{{ label }}</span>
   </label>
@@ -36,32 +36,33 @@ const select = () => {
 }
 
 .n-radio-circle {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--n-color-border);
   border-radius: var(--n-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
 
 .is-checked .n-radio-circle {
   border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 12px rgba(99, 102, 241, 0.25);
 }
 
 .n-radio-dot {
-  width: 10px;
-  height: 10px;
+  width: 11px;
+  height: 11px;
   border-radius: var(--n-radius-full);
   background: var(--n-color-primary);
-  transform: scale(0);
-  transition: all var(--n-transition-spring);
+  animation: n-radio-dot-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.is-checked .n-radio-dot {
-  transform: scale(1);
+@keyframes n-radio-dot-in {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
 }
 
 .n-radio-label {

package/src/components/NSelect.nexa

@@ -302,7 +302,8 @@ onBeforeUnmount(() => {
 
 .n-select-trigger:focus-visible {
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
+  outline: none;
 }
 
 .n-select:hover .n-select-trigger:not(.is-disabled) {
@@ -311,7 +312,7 @@ onBeforeUnmount(() => {
 
 .n-select.is-open .n-select-trigger {
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
 }
 
 .n-select-placeholder {
@@ -342,7 +343,7 @@ onBeforeUnmount(() => {
 
 .n-select-arrow {
   color: var(--n-color-text-muted);
-  transition: transform var(--n-transition-fast);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: var(--n-text-xs);
 }
 
@@ -355,27 +356,30 @@ onBeforeUnmount(() => {
   top: calc(100% + 0.5rem);
   left: 0;
   width: 100%;
-  background: var(--n-color-surface);
+  background: color-mix(in srgb, var(--n-color-surface) 90%, transparent);
+  backdrop-filter: blur(16px) saturate(1.15);
+  -webkit-backdrop-filter: blur(16px) saturate(1.15);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-md);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0,0,0,0.08);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s ease-out;
+  animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top center;
 }
 
 @keyframes n-dropdown-in {
-  from { opacity: 0; transform: translateY(-8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-dropdown.is-top {
-  animation: n-dropdown-in-top 0.2s ease-out;
+  animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes n-dropdown-in-top {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-search {
@@ -416,15 +420,37 @@ onBeforeUnmount(() => {
 
 .n-select-option {
   padding: 0.7rem 1rem;
+  padding-left: 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  transition: all var(--n-transition-fast);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  letter-spacing: 0.01em;
+  position: relative;
+}
+
+.n-select-option::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%) scaleY(0);
+  width: 3px;
+  height: 50%;
+  background: var(--n-color-primary);
+  border-radius: 0 3px 3px 0;
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.n-select-option:hover::before,
+.n-select-option.is-focused::before {
+  transform: translateY(-50%) scaleY(1);
 }
 
 .n-select-option:hover,
 .n-select-option.is-focused {
   background: var(--n-color-glass);
   color: var(--n-color-text);
+  padding-left: 1.25rem;
 }
 
 .n-select-option.is-selected {

package/src/components/NSwitch.nexa

@@ -37,12 +37,13 @@ const toggle = () => {
   background: var(--n-color-surface-hover);
   border-radius: var(--n-radius-full);
   position: relative;
-  transition: all var(--n-transition-fast);
+  transition: all var(--n-transition-normal);
   flex-shrink: 0;
 }
 
 .is-checked .n-switch-track {
   background: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
 .n-switch-thumb {
@@ -53,14 +54,15 @@ const toggle = () => {
   position: absolute;
   top: 3px;
   left: 3px;
-  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
-  box-shadow: var(--n-shadow-sm);
+  transition: transform var(--n-transition-normal), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-md);
   will-change: transform;
 }
 
 .is-checked .n-switch-thumb {
   transform: translateX(20px);
   background: white;
+  box-shadow: var(--n-shadow-md);
 }
 
 .n-switch-label {

package/src/components/NTabs.nexa

@@ -72,10 +72,17 @@ const activeIndex = computed(() =>
   position: relative;
   user-select: none;
   white-space: nowrap;
+  border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
 }
 
-.n-tab:hover {
-  color: var(--n-color-text-secondary);
+.n-tab:hover:not(.is-active):not(.is-disabled) {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-tab:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--n-color-primary);
 }
 
 .n-tab.is-active {
@@ -104,10 +111,11 @@ const activeIndex = computed(() =>
 
 .n-tabs-indicator {
   position: absolute;
-  bottom: 0;
-  height: 2px;
+  bottom: -1px;
+  height: 2.5px;
   background: var(--n-color-primary);
-  transition: all var(--n-transition-normal);
-  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--n-radius-full);
+  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
 }
 </style>

package/src/components/NTag.nexa

@@ -21,7 +21,7 @@ const emit = defineEmits(['close'])
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-1);
-  padding: 0.2rem 0.6rem;
+  padding: 0.25rem 0.7rem;
   font-size: var(--n-text-xs);
   font-weight: var(--n-weight-semibold);
   border-radius: var(--n-radius-sm);
@@ -29,14 +29,15 @@ const emit = defineEmits(['close'])
   font-family: var(--n-font-sans);
   white-space: nowrap;
   border: 1px solid transparent;
+  letter-spacing: 0.02em;
 }
 
 .n-tag.is-rounded {
   border-radius: var(--n-radius-full);
 }
 
-.n-tag-sm { padding: 0.1rem 0.4rem; font-size: 0.65rem; }
-.n-tag-lg { padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
+.n-tag-sm { padding: 0.15rem 0.5rem; font-size: 0.65rem; }
+.n-tag-lg { padding: 0.4rem 0.9rem; font-size: var(--n-text-sm); }
 
 .n-tag-primary {
   background: var(--n-color-primary-light);
@@ -83,11 +84,19 @@ const emit = defineEmits(['close'])
   padding: 0;
   margin-left: var(--n-space-1);
   color: inherit;
-  opacity: 0.6;
-  transition: opacity var(--n-transition-fast);
+  opacity: 0.5;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--n-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
 }
 
 .n-tag-close:hover {
   opacity: 1;
+  background: rgba(0,0,0,0.08);
+  transform: scale(1.15);
 }
 </style>

package/src/components/NToastContainer.nexa

@@ -84,16 +84,23 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   pointer-events: auto;
   min-width: 300px;
   max-width: 420px;
-  background: var(--n-color-surface);
+  background: var(--n-color-glass);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-md);
   overflow: hidden;
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
   cursor: pointer;
-  animation: n-toast-in var(--n-transition-spring);
-  transition: all var(--n-transition-fast);
+  animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  backdrop-filter: blur(16px);
+  border-left: 3px solid var(--n-color-border);
 }
 
+.is-success { border-left-color: var(--n-color-success); }
+.is-error { border-left-color: var(--n-color-danger); }
+.is-info { border-left-color: var(--n-color-primary); }
+.is-warning { border-left-color: var(--n-color-warning); }
+
 .n-toast:hover {
   transform: scale(1.02);
   background: var(--n-color-surface-alt);

package/src/components/NTooltip.nexa

@@ -95,18 +95,19 @@ const hide = () => {
 }
 
 .n-tooltip {
-  background: var(--n-color-bg);
+  background: var(--n-color-glass);
   color: var(--n-color-text);
   padding: var(--n-space-2) var(--n-space-3);
   border-radius: var(--n-radius-sm);
   font-size: var(--n-text-xs);
-  font-weight: var(--n-weight-medium);
+  font-weight: var(--n-weight-semibold);
   white-space: nowrap;
   z-index: var(--n-z-tooltip);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-lg), 0 4px 16px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--n-color-border);
   pointer-events: none;
-  animation: n-tooltip-in 0.2s ease-out;
+  animation: n-tooltip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  backdrop-filter: blur(12px);
 }
 
 @keyframes n-tooltip-in {

package/src/components/NTreeMenu.nexa

@@ -48,13 +48,13 @@ const toggle = (id, e) => {
 </script>
 
 <template>
-  <div class="n-tree-menu">
+  <div class="n-tree-menu" role="tree">
     <div v-for="item in flatTree.value" :key="item.id"
       class="n-tree-item"
       :class="{ 'is-selected': isSelected(item.id) }"
       :style="{ '--n-tree-depth': String(item._depth) }"
     >
-      <div class="n-tree-row" @click="selectItem(item)">
+      <div class="n-tree-row" tabindex="0" role="treeitem" :aria-selected="isSelected(item.id)" @click="selectItem(item)">
         <button v-if="hasChildren(item)"
           class="n-tree-toggle"
           :class="{ 'is-expanded': isExpanded(item.id) }"
@@ -78,6 +78,11 @@ const toggle = (id, e) => {
 .n-tree-item {
   --n-tree-depth: 0;
   position: relative;
+  margin-bottom: 1px;
+}
+
+.n-tree-item:last-child {
+  margin-bottom: 0;
 }
 
 /* Líneas conectoras verticales */
@@ -89,18 +94,18 @@ const toggle = (id, e) => {
   bottom: 0;
   width: 1px;
   background: var(--n-color-border);
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 .n-tree-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.55rem 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);
+  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   color: var(--n-color-text);
   position: relative;
 }
@@ -114,11 +119,15 @@ const toggle = (id, e) => {
   width: 0.75rem;
   height: 1px;
   background: var(--n-color-border);
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
 .n-tree-row:hover {
-  background: var(--n-color-surface-hover);
+  background: linear-gradient(135deg, var(--n-color-surface-hover), color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
+}
+
+.n-tree-row:active {
+  background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);
 }
 
 .n-tree-item.is-selected > .n-tree-row {
@@ -127,26 +136,54 @@ const toggle = (id, e) => {
   font-weight: var(--n-weight-semibold);
 }
 
+.n-tree-item.is-selected > .n-tree-row::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--n-color-primary);
+  border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
+}
+
 .n-tree-toggle {
   background: var(--n-color-glass);
   border: 1px solid var(--n-color-border);
-  border-radius: var(--n-radius-sm);
+  border-radius: var(--n-radius-md);
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: all var(--n-transition-fast);
+  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
 
 .n-tree-toggle:hover {
-  background: var(--n-color-primary-light);
+  background: color-mix(in srgb, var(--n-color-primary-light) 80%, var(--n-color-primary) 10%);
   border-color: var(--n-color-primary);
   color: var(--n-color-primary);
+  transform: scale(1.05);
+}
+
+.n-tree-toggle:active {
+  transform: scale(0.95);
+}
+
+.n-tree-toggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--n-color-background), 0 0 0 4px var(--n-color-primary);
+  z-index: 1;
+}
+
+.n-tree-row:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--n-color-primary);
+  border-radius: var(--n-radius-md);
 }
 
 .n-tree-toggle-icon {
@@ -173,5 +210,11 @@ const toggle = (id, e) => {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: var(--n-weight-medium);
+  letter-spacing: 0.01em;
+}
+
+.n-tree-item.is-selected .n-tree-label {
+  font-weight: var(--n-weight-bold);
+  letter-spacing: 0;
 }
 </style>