nexa-ui-kit 0.9.0 → 0.11.0

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>

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);