nexa-ui-kit 0.11.3 → 0.11.5

package/dist/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/dist/components/NToastContainer.js

@@ -118,16 +118,23 @@ const __style = `.n-toast-container[data-v-4587cf3e]{
   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[data-v-4587cf3e]{ border-left-color: var(--n-color-success); }
+.is-error[data-v-4587cf3e]{ border-left-color: var(--n-color-danger); }
+.is-info[data-v-4587cf3e]{ border-left-color: var(--n-color-primary); }
+.is-warning[data-v-4587cf3e]{ border-left-color: var(--n-color-warning); }
+
 .n-toast[data-v-4587cf3e]:hover{
   transform: scale(1.02);
   background: var(--n-color-surface-alt);

package/dist/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/dist/components/NTooltip.js

@@ -92,18 +92,19 @@ const __style = `.n-tooltip-wrapper[data-v-522b965d]{
 }
 
 .n-tooltip[data-v-522b965d]{
-  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/dist/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/dist/components/NTreeMenu.js

@@ -1,7 +1,7 @@
 import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-30df3c1d',
+  __scopeId: 'data-v-278e8175',
   __hmrId: 'NTreeMenu_nexa',
   props: {
   items: { type: Array, default: () => [] },
@@ -48,23 +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-30df3c1d": "" }, [
+    return h('div', { class: "n-tree-menu", role: "tree", "data-v-278e8175": "" }, [
         "\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-30df3c1d": "" }, [
+        h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-278e8175": "" }, [
         "\n      ",
-        h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-30df3c1d": "" }, [
+        h('div', { class: "n-tree-row", tabindex: "0", role: "treeitem", "aria-selected": isSelected(item.id), onClick: ($event) => { selectItem(item) }, "data-v-278e8175": "" }, [
         "\n        ",
-        (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-30df3c1d": "" }, [
-        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-30df3c1d": "" }, [
-        h('path', { d: "M12 5v14M5 12h14", "data-v-30df3c1d": "" })
+        (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-278e8175": "" }, [
+        h('span', { class: "n-tree-toggle-icon", "data-v-278e8175": "" }, [
+        isExpanded(item.id) ? '−' : '+'
       ])
-      ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-30df3c1d": "" }) : null,
+      ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-278e8175": "" }) : null,
         "\n        ",
-        (item.icon) ? h('span', { class: "n-tree-icon", "data-v-30df3c1d": "" }, [
+        (item.icon) ? h('span', { class: "n-tree-icon", "data-v-278e8175": "" }, [
         item.icon
       ]) : null,
-        h('span', { class: "n-tree-label", "data-v-30df3c1d": "" }, [
+        h('span', { class: "n-tree-label", "data-v-278e8175": "" }, [
         item.label
       ]),
         "\n      "
@@ -75,24 +75,29 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-30df3c1d'
+_sfc_main.__scopeId = 'data-v-278e8175'
 _sfc_main.__hmrId = 'NTreeMenu_nexa'
 
 export default _sfc_main
 
-const __style = `.n-tree-menu[data-v-30df3c1d]{
+const __style = `.n-tree-menu[data-v-278e8175]{
   font-family: var(--n-font-sans);
   font-size: var(--n-text-sm);
   user-select: none;
 }
 
-.n-tree-item[data-v-30df3c1d]{
+.n-tree-item[data-v-278e8175]{
   --n-tree-depth: 0;
   position: relative;
+  margin-bottom: 1px;
+}
+
+.n-tree-item[data-v-278e8175]:last-child{
+  margin-bottom: 0;
 }
 
 /* Líneas conectoras verticales */
-.n-tree-item[data-v-30df3c1d]:not([style*="--n-tree-depth: 0"])::before{
+.n-tree-item[data-v-278e8175]:not([style*="--n-tree-depth: 0"])::before{
   content: '';
   position: absolute;
   left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
@@ -100,24 +105,24 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
   bottom: 0;
   width: 1px;
   background: var(--n-color-border);
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
-.n-tree-row[data-v-30df3c1d]{
+.n-tree-row[data-v-278e8175]{
   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;
 }
 
 /* Línea conectora horizontal */
-.n-tree-item[data-v-30df3c1d]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
+.n-tree-item[data-v-278e8175]: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);
@@ -125,66 +130,102 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
   width: 0.75rem;
   height: 1px;
   background: var(--n-color-border);
-  opacity: 0.5;
+  opacity: 0.35;
 }
 
-.n-tree-row[data-v-30df3c1d]:hover{
-  background: var(--n-color-surface-hover);
+.n-tree-row[data-v-278e8175]: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-item.is-selected > .n-tree-row[data-v-30df3c1d]{
+.n-tree-row[data-v-278e8175]: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[data-v-278e8175]{
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
 
-.n-tree-toggle[data-v-30df3c1d]{
+.n-tree-item.is-selected > .n-tree-row[data-v-278e8175]::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[data-v-278e8175]{
   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[data-v-30df3c1d]:hover{
-  background: var(--n-color-primary-light);
+.n-tree-toggle[data-v-278e8175]:hover{
+  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[data-v-278e8175]:active{
+  transform: scale(0.95);
+}
+
+.n-tree-toggle[data-v-278e8175]: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-toggle svg[data-v-30df3c1d]{
-  transition: transform var(--n-transition-fast);
+.n-tree-row[data-v-278e8175]:focus-visible{
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--n-color-primary);
+  border-radius: var(--n-radius-md);
 }
 
-.n-tree-toggle.is-expanded svg[data-v-30df3c1d]{
-  transform: rotate(45deg);
+.n-tree-toggle-icon[data-v-278e8175]{
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: 700;
 }
 
-.n-tree-toggle-placeholder[data-v-30df3c1d]{
+.n-tree-toggle-placeholder[data-v-278e8175]{
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
 
-.n-tree-icon[data-v-30df3c1d]{
+.n-tree-icon[data-v-278e8175]{
   font-size: 1.1rem;
   flex-shrink: 0;
 }
 
-.n-tree-label[data-v-30df3c1d]{
+.n-tree-label[data-v-278e8175]{
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: var(--n-weight-medium);
+  letter-spacing: 0.01em;
+}
+
+.n-tree-item.is-selected .n-tree-label[data-v-278e8175]{
+  font-weight: var(--n-weight-bold);
+  letter-spacing: 0;
 }`
-injectStyle('data-v-30df3c1d', __style)
+injectStyle('data-v-278e8175', __style)

package/dist/components/NTreeMenu.nexa

@@ -48,18 +48,18 @@ 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) }"
           @click="toggle(item.id, $event)"
-        ><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"><path d="M12 5v14M5 12h14"/></svg></button>
+        ><span class="n-tree-toggle-icon">{{ isExpanded(item.id) ? '−' : '+' }}</span></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>
@@ -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,34 +136,60 @@ 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-toggle svg {
-  transition: transform var(--n-transition-fast);
+.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.is-expanded svg {
-  transform: rotate(45deg);
+.n-tree-toggle-icon {
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: 700;
 }
 
 .n-tree-toggle-placeholder {
@@ -175,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>