nexa-ui-kit 0.9.0 → 0.11.0

package/dist/components/NToastContainer.js

@@ -2,7 +2,7 @@ import { useToast } from '../services/ToastService.js'
 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/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-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,22 +75,22 @@ _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;
 }
 
-.n-tree-row[data-v-44b3942a]{
+.n-tree-row[data-v-1dc3f956]{
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -100,17 +102,17 @@ const __style = `.n-tree-menu[data-v-44b3942a]{
   color: var(--n-color-text);
 }
 
-.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]{
+.n-tree-toggle[data-v-1dc3f956]{
   background: none;
   border: none;
   color: var(--n-color-text-muted);
@@ -126,26 +128,26 @@ const __style = `.n-tree-menu[data-v-44b3942a]{
   flex-shrink: 0;
 }
 
-.n-tree-toggle.is-expanded[data-v-44b3942a]{
+.n-tree-toggle.is-expanded[data-v-1dc3f956]{
   transform: rotate(90deg);
 }
 
-.n-tree-toggle-placeholder[data-v-44b3942a]{
+.n-tree-toggle-placeholder[data-v-1dc3f956]{
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
 
-.n-tree-icon[data-v-44b3942a]{
+.n-tree-icon[data-v-1dc3f956]{
   font-size: 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;
 }`
-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>

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.9.0",
-    "nexa-mobile": "0.9.0"
+    "nexa-framework": "0.11.0",
+    "nexa-mobile": "0.11.0"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.9.0"
+    "nexa-compiler": "0.11.0"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",

package/src/components/NAlert.nexa

@@ -22,12 +22,18 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
 
 <template>
   <div v-if="visible.value" class="n-alert" :class="`is-${variant}`">
-    <span class="n-alert-icon">{{ icon || icons[variant] || 'ℹ' }}</span>
+    <span class="n-alert-icon">
+      <template v-if="icon">{{ icon }}</template>
+      <svg v-else-if="variant === 'success'" viewBox="0 0 24 24" width="16" height="16" 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>
+      <svg v-else-if="variant === 'error'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+      <svg v-else-if="variant === 'warning'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><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"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+      <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" 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>
     <div class="n-alert-body">
       <span v-if="title" class="n-alert-title">{{ title }}</span>
       <span class="n-alert-text"><slot /></span>
     </div>
-    <button v-if="closable" class="n-alert-close" @click="dismiss">&times;</button>
+    <button v-if="closable" class="n-alert-close" @click="dismiss" aria-label="Close"><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="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
   </div>
 </template>
 
@@ -51,25 +57,25 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
 
 .is-info {
   background: var(--n-color-primary-light);
-  border-color: rgba(59, 130, 246, 0.2);
+  border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
 
 .is-success {
   background: var(--n-color-success-light);
-  border-color: rgba(16, 185, 129, 0.2);
+  border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
 
 .is-warning {
   background: var(--n-color-warning-light);
-  border-color: rgba(245, 158, 11, 0.2);
+  border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
 
 .is-error {
   background: var(--n-color-danger-light);
-  border-color: rgba(239, 68, 68, 0.2);
+  border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
 

package/src/components/NAutocomplete.nexa

@@ -37,8 +37,8 @@ onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
     <div class="n-ac-input-wrap" :class="{ 'is-disabled': disabled }">
       <input class="n-ac-input" :id="inputId" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" role="combobox" aria-autocomplete="list" :aria-expanded="isOpen.value" :aria-controls="listboxId" :aria-activedescendant="activeId.value || undefined" @input="onInput" @focus="onFocus" @keydown="onKeydown" />
       <div class="n-ac-actions">
-        <button v-if="clearable && modelValue" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clearValue">✕</button>
-        <button v-if="dropdown" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Abrir" @click="openAll">▾</button>
+        <button v-if="clearable && modelValue" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Clear" @click="clearValue"><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="dropdown" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Open" @click="openAll"><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="M6 9l6 6 6-6"/></svg></button>
       </div>
     </div>
     <Teleport to="body">
@@ -54,5 +54,5 @@ onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
 </template>
 
 <style scoped>
-.n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s cubic-bezier(0,1,0,1)}.n-ac-popup.is-top{animation:n-ac-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
+.n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s ease-out}.n-ac-popup.is-top{animation:n-ac-in-top .2s ease-out}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
 </style>

package/src/components/NBottomSheet.nexa

@@ -74,7 +74,7 @@ const overlayOpacity = computed(() => {
         class="n-bottom-sheet-container"
         :style="{
           transform: `translateY(${translateY.value})`,
-          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
+          transition: isDragging.value ? 'none' : 'transform var(--n-transition-slow)'
         }"
       >
         <div class="n-bottom-sheet-handle"></div>
@@ -121,7 +121,7 @@ const overlayOpacity = computed(() => {
   background: var(--n-color-surface);
   border-top: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-2xl) var(--n-radius-2xl) 0 0;
-  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--n-shadow-top-lg);
   padding-bottom: env(safe-area-inset-bottom, 20px);
   touch-action: none;
   display: flex;