nexa-ui-kit 0.10.0 → 0.11.0

package/dist/components/NAlert.js

@@ -1,7 +1,7 @@
-import { signal, h, hText, effect, computed, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-22a3a541',
+  __scopeId: 'data-v-291d86b1',
   __hmrId: 'NAlert_nexa',
   props: {
   variant: { type: String, default: 'info' },
@@ -24,34 +24,55 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { visible, dismiss, icons, $slots, emit, variant, title, closable, icon, Fragment: _ntc_Fragment } = ctx
-    return (visible.value) ? h('div', { class: ["n-alert", `is-${variant}`], "data-v-22a3a541": "" }, [
+    return (visible.value) ? h('div', { class: ["n-alert", `is-${variant}`], "data-v-291d86b1": "" }, [
         "\n    ",
-        h('span', { class: "n-alert-icon", "data-v-22a3a541": "" }, [
-        icon || icons[variant] || 'ℹ'
+        h('span', { class: "n-alert-icon", "data-v-291d86b1": "" }, [
+        "\n      ",
+        (icon) ? h('template', { "data-v-291d86b1": "" }, [
+        icon
+      ]) : (variant === 'success') ? h('svg', { 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", "data-v-291d86b1": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-291d86b1": "" })
+      ]) : (variant === 'error') ? h('svg', { 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", "data-v-291d86b1": "" }, [
+        h('circle', { cx: "12", cy: "12", r: "10", "data-v-291d86b1": "" }),
+        h('line', { x1: "15", y1: "9", x2: "9", y2: "15", "data-v-291d86b1": "" }),
+        h('line', { x1: "9", y1: "9", x2: "15", y2: "15", "data-v-291d86b1": "" })
+      ]) : (variant === 'warning') ? h('svg', { 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", "data-v-291d86b1": "" }, [
+        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-291d86b1": "" }),
+        h('line', { x1: "12", y1: "9", x2: "12", y2: "13", "data-v-291d86b1": "" }),
+        h('line', { x1: "12", y1: "17", x2: "12.01", y2: "17", "data-v-291d86b1": "" })
+      ]) : (true) ? h('svg', { 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", "data-v-291d86b1": "" }, [
+        h('circle', { cx: "12", cy: "12", r: "10", "data-v-291d86b1": "" }),
+        h('line', { x1: "12", y1: "16", x2: "12", y2: "12", "data-v-291d86b1": "" }),
+        h('line', { x1: "12", y1: "8", x2: "12.01", y2: "8", "data-v-291d86b1": "" })
+      ]) : null,
+        "\n    "
       ]),
         "\n    ",
-        h('div', { class: "n-alert-body", "data-v-22a3a541": "" }, [
+        h('div', { class: "n-alert-body", "data-v-291d86b1": "" }, [
         "\n      ",
-        (title) ? h('span', { class: "n-alert-title", "data-v-22a3a541": "" }, [
+        (title) ? h('span', { class: "n-alert-title", "data-v-291d86b1": "" }, [
         title
       ]) : null,
-        h('span', { class: "n-alert-text", "data-v-22a3a541": "" }, [
+        h('span', { class: "n-alert-text", "data-v-291d86b1": "" }, [
         ctx.$slots.default ? ctx.$slots.default() : null
       ]),
         "\n    "
       ]),
         "\n    ",
-        (closable) ? h('button', { class: "n-alert-close", onClick: dismiss, "data-v-22a3a541": "" }, [
-        "×"
+        (closable) ? h('button', { class: "n-alert-close", onClick: dismiss, "aria-label": "Close", "data-v-291d86b1": "" }, [
+        h('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", "data-v-291d86b1": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-291d86b1": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-291d86b1": "" })
+      ])
       ]) : null
       ]) : null
 }
-_sfc_main.__scopeId = 'data-v-22a3a541'
+_sfc_main.__scopeId = 'data-v-291d86b1'
 _sfc_main.__hmrId = 'NAlert_nexa'
 
 export default _sfc_main
 
-const __style = `.n-alert[data-v-22a3a541]{
+const __style = `.n-alert[data-v-291d86b1]{
   display: flex;
   align-items: flex-start;
   gap: var(--n-space-3);
@@ -64,35 +85,35 @@ const __style = `.n-alert[data-v-22a3a541]{
 }
 
 @keyframes n-alert-in {
-from[data-v-22a3a541]{ opacity: 0; transform: translateY(-8px); }
-to[data-v-22a3a541]{ opacity: 1; transform: translateY(0); }
+from[data-v-291d86b1]{ opacity: 0; transform: translateY(-8px); }
+to[data-v-291d86b1]{ opacity: 1; transform: translateY(0); }
 }
 
-.is-info[data-v-22a3a541]{
+.is-info[data-v-291d86b1]{
   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[data-v-22a3a541]{
+.is-success[data-v-291d86b1]{
   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[data-v-22a3a541]{
+.is-warning[data-v-291d86b1]{
   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[data-v-22a3a541]{
+.is-error[data-v-291d86b1]{
   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);
 }
 
-.n-alert-icon[data-v-22a3a541]{
+.n-alert-icon[data-v-291d86b1]{
   font-size: var(--n-text-base);
   font-weight: var(--n-weight-bold);
   flex-shrink: 0;
@@ -107,16 +128,16 @@ to[data-v-22a3a541]{ opacity: 1; transform: translateY(0); }
   color: var(--n-color-text);
 }
 
-.n-alert-title[data-v-22a3a541]{
+.n-alert-title[data-v-291d86b1]{
   font-weight: var(--n-weight-semibold);
   font-size: var(--n-text-sm);
 }
 
-.n-alert-text[data-v-22a3a541]{
+.n-alert-text[data-v-291d86b1]{
   color: var(--n-color-text-secondary);
 }
 
-.n-alert-close[data-v-22a3a541]{
+.n-alert-close[data-v-291d86b1]{
   background: transparent;
   border: none;
   color: var(--n-color-text-muted);
@@ -128,7 +149,7 @@ to[data-v-22a3a541]{ opacity: 1; transform: translateY(0); }
   transition: color var(--n-transition-fast);
 }
 
-.n-alert-close[data-v-22a3a541]:hover{
+.n-alert-close[data-v-291d86b1]:hover{
   color: var(--n-color-text);
 }`
-injectStyle('data-v-22a3a541', __style)
+injectStyle('data-v-291d86b1', __style)

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

@@ -1,8 +1,8 @@
-import { signal, computed, effect, onBeforeUnmount, h, hText, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { signal, computed, effect, onBeforeUnmount, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-741257a1',
+  __scopeId: 'data-v-24d51847',
   __hmrId: 'NAutocomplete_nexa',
   props: { modelValue: { type: String, default: '' }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: '' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, minLength: { type: Number, default: 1 }, delay: { type: Number, default: 200 }, loading: { type: Boolean, default: false }, dropdown: { type: Boolean, default: false }, emptyMessage: { type: String, default: 'No results' }, placement: { type: String, default: 'auto' } },
   emits: ['update:modelValue', 'select', 'complete', 'clear'],
@@ -40,42 +40,47 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { instanceId, listboxId, inputId, isOpen, query, focusedIndex, rootEl, popupStyle, resolvedPlacement, stopTracking, completeTimer, normalizeOption, normalizedOptions, filteredOptions, activeId, close, open, requestComplete, onInput, onFocus, onKeydown, selectOption, clearValue, openAll, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, readonly, clearable, minLength, delay, loading, dropdown, emptyMessage, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h('div', { class: "n-ac", "data-autocomplete-root": instanceId, "data-v-741257a1": "" }, [
+    return h('div', { class: "n-ac", "data-autocomplete-root": instanceId, "data-v-24d51847": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-ac-label", for: inputId, "data-v-741257a1": "" }, [
+        (label) ? h('label', { class: "n-ac-label", for: inputId, "data-v-24d51847": "" }, [
         label
       ]) : null,
-        h('div', { class: ["n-ac-input-wrap", { 'is-disabled': disabled }], "data-v-741257a1": "" }, [
+        h('div', { class: ["n-ac-input-wrap", { 'is-disabled': disabled }], "data-v-24d51847": "" }, [
         "\n      ",
-        h('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, onInput: onInput, onFocus: onFocus, onKeydown: onKeydown, "data-v-741257a1": "" }),
+        h('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, onInput: onInput, onFocus: onFocus, onKeydown: onKeydown, "data-v-24d51847": "" }),
         "\n      ",
-        h('div', { class: "n-ac-actions", "data-v-741257a1": "" }, [
+        h('div', { class: "n-ac-actions", "data-v-24d51847": "" }, [
         "\n        ",
-        (clearable && modelValue) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Limpiar", onClick: clearValue, "data-v-741257a1": "" }, [
-        "✕"
+        (clearable && modelValue) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Clear", onClick: clearValue, "data-v-24d51847": "" }, [
+        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-24d51847": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-24d51847": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-24d51847": "" })
+      ])
       ]) : null,
-        (dropdown) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Abrir", onClick: openAll, "data-v-741257a1": "" }, [
-        "▾"
+        (dropdown) ? h('button', { class: "n-ac-action", type: "button", disabled: disabled || readonly, "aria-label": "Open", onClick: openAll, "data-v-24d51847": "" }, [
+        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-24d51847": "" }, [
+        h('path', { d: "M6 9l6 6 6-6", "data-v-24d51847": "" })
+      ])
       ]) : null
       ]),
         "\n    "
       ]),
         "\n    ",
-        h(_ntc_Teleport, { to: "body", "data-v-741257a1": "" }, [
+        h(_ntc_Teleport, { to: "body", "data-v-24d51847": "" }, [
         "\n      ",
-        (isOpen.value) ? h('div', { class: ["n-ac-popup", { 'is-top': resolvedPlacement.value === 'top' }], "data-autocomplete-popup": instanceId, style: popupStyle.value, "data-v-741257a1": "" }, [
+        (isOpen.value) ? h('div', { class: ["n-ac-popup", { 'is-top': resolvedPlacement.value === 'top' }], "data-autocomplete-popup": instanceId, style: popupStyle.value, "data-v-24d51847": "" }, [
         "\n        ",
-        (loading) ? h('div', { class: "n-ac-loading", "data-v-741257a1": "" }, [
+        (loading) ? h('div', { class: "n-ac-loading", "data-v-24d51847": "" }, [
         "Loading..."
-      ]) : (true) ? h('div', { class: "n-ac-list", role: "listbox", id: listboxId, "data-v-741257a1": "" }, [
+      ]) : (true) ? h('div', { class: "n-ac-list", role: "listbox", id: listboxId, "data-v-24d51847": "" }, [
         "\n          ",
         (filteredOptions.value).map((opt, i) =>
-        h('button', { class: ["n-ac-option", { 'is-focused': i === focusedIndex.value }], key: opt.value, type: "button", role: "option", id: instanceId + '-opt-' + i, "aria-selected": (i === focusedIndex.value).toString(), onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { selectOption(opt) }, "data-v-741257a1": "" }, [
+        h('button', { class: ["n-ac-option", { 'is-focused': i === focusedIndex.value }], key: opt.value, type: "button", role: "option", id: instanceId + '-opt-' + i, "aria-selected": (i === focusedIndex.value).toString(), onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { selectOption(opt) }, "data-v-24d51847": "" }, [
         opt.label
       ])
       ),
         "\n          ",
-        (filteredOptions.value.length === 0) ? h('div', { class: "n-ac-empty", "data-v-741257a1": "" }, [
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ac-empty", "data-v-24d51847": "" }, [
         emptyMessage
       ]) : null
       ]) : null,
@@ -85,10 +90,10 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-741257a1'
+_sfc_main.__scopeId = 'data-v-24d51847'
 _sfc_main.__hmrId = 'NAutocomplete_nexa'
 
 export default _sfc_main
 
-const __style = `.n-ac[data-v-741257a1]{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)}`
-injectStyle('data-v-741257a1', __style)
+const __style = `.n-ac[data-v-24d51847]{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)}`
+injectStyle('data-v-24d51847', __style)

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

@@ -1,4 +1,4 @@
-import { computed, h, hText, effect, signal, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
   __scopeId: 'data-v-147134',

package/dist/components/NBadge.js

@@ -1,4 +1,4 @@
-import { h, hText, effect, signal, computed, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
   __scopeId: 'data-v-ff3cf3e',

package/dist/components/NBottomSheet.js

@@ -2,7 +2,7 @@ import { signal, computed, effect, onMounted, onUnmounted, h, hText, defineCompo
 import { useGestures } from 'nexa-mobile'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-55f61938',
+  __scopeId: 'data-v-3df910b7',
   __hmrId: 'NBottomSheet_nexa',
   props: {
   show: { type: Boolean, default: false },
@@ -61,20 +61,20 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { yOffset, isDragging, currentSnap, gestures, sortedPoints, translateY, overlayOpacity, useGestures, $slots, emit, show, snapPoints, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-55f61938": "" }, [
+    return h(_ntc_Teleport, { to: "body", "data-v-3df910b7": "" }, [
         "\n    ",
-        h('div', { class: ["n-bottom-sheet-root", { 'is-active': show || isDragging.value }], "data-v-55f61938": "" }, [
+        h('div', { class: ["n-bottom-sheet-root", { 'is-active': show || isDragging.value }], "data-v-3df910b7": "" }, [
         "\n      ",
-        h('div', { class: "n-bottom-sheet-overlay", style: { opacity: overlayOpacity.value }, onClick: ($event) => { emit('close') }, "data-v-55f61938": "" }),
+        h('div', { class: "n-bottom-sheet-overlay", style: { opacity: overlayOpacity.value }, onClick: ($event) => { emit('close') }, "data-v-3df910b7": "" }),
         "\n      ",
         h('div', { class: "n-bottom-sheet-container", id: "n-bottom-sheet-content", style: {
           transform: `translateY(${translateY.value})`,
-          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
-        }, "data-v-55f61938": "" }, [
+          transition: isDragging.value ? 'none' : 'transform var(--n-transition-slow)'
+        }, "data-v-3df910b7": "" }, [
         "\n        ",
-        h('div', { class: "n-bottom-sheet-handle", "data-v-55f61938": "" }),
+        h('div', { class: "n-bottom-sheet-handle", "data-v-3df910b7": "" }),
         "\n        ",
-        h('div', { class: "n-bottom-sheet-inner", "data-v-55f61938": "" }, [
+        h('div', { class: "n-bottom-sheet-inner", "data-v-3df910b7": "" }, [
         "\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n        "
@@ -86,12 +86,12 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-55f61938'
+_sfc_main.__scopeId = 'data-v-3df910b7'
 _sfc_main.__hmrId = 'NBottomSheet_nexa'
 
 export default _sfc_main
 
-const __style = `.n-bottom-sheet-root[data-v-55f61938]{
+const __style = `.n-bottom-sheet-root[data-v-3df910b7]{
   position: fixed;
   top: 0;
   left: 0;
@@ -103,11 +103,11 @@ const __style = `.n-bottom-sheet-root[data-v-55f61938]{
   align-items: flex-end;
 }
 
-.n-bottom-sheet-root.is-active[data-v-55f61938]{
+.n-bottom-sheet-root.is-active[data-v-3df910b7]{
   pointer-events: auto;
 }
 
-.n-bottom-sheet-overlay[data-v-55f61938]{
+.n-bottom-sheet-overlay[data-v-3df910b7]{
   position: absolute;
   top: 0;
   left: 0;
@@ -118,21 +118,21 @@ const __style = `.n-bottom-sheet-root[data-v-55f61938]{
   transition: opacity 0.3s ease;
 }
 
-.n-bottom-sheet-container[data-v-55f61938]{
+.n-bottom-sheet-container[data-v-3df910b7]{
   position: relative;
   width: 100%;
   max-height: 90vh;
   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;
   flex-direction: column;
 }
 
-.n-bottom-sheet-handle[data-v-55f61938]{
+.n-bottom-sheet-handle[data-v-3df910b7]{
   width: 40px;
   height: 4px;
   background: var(--n-color-surface-hover);
@@ -141,9 +141,9 @@ const __style = `.n-bottom-sheet-root[data-v-55f61938]{
   flex-shrink: 0;
 }
 
-.n-bottom-sheet-inner[data-v-55f61938]{
+.n-bottom-sheet-inner[data-v-3df910b7]{
   padding: var(--n-space-4) var(--n-space-8) var(--n-space-8);
   overflow-y: auto;
   flex: 1;
 }`
-injectStyle('data-v-55f61938', __style)
+injectStyle('data-v-3df910b7', __style)

package/dist/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;