nexa-ui-kit 0.10.0 → 0.11.1

package/dist/components/NMultiSelect.js

@@ -1,8 +1,8 @@
-import { signal, computed, inject, onBeforeUnmount, effect, batch, h, hText, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { signal, computed, inject, onBeforeUnmount, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-12b3b8c4',
+  __scopeId: 'data-v-261608b5',
   __hmrId: 'NMultiSelect_nexa',
   props: { modelValue: { type: Array, default: () => [] }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, bindField: { type: Boolean, default: false }, searchable: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, placement: { type: String, default: 'auto' }, appendTo: { type: String, default: 'self' }, maxChips: { type: Number, default: 3 } },
   emits: ['update:modelValue', 'clear'],
@@ -65,80 +65,89 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { field, instanceId, isOpen, query, queryDraft, focusedIndex, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, normalizeOption, normalizedOptions, effectiveModelValue, effectiveDisabled, selectedSet, filteredOptions, selectedLabels, close, open, toggleOpen, setModel, toggleValue, clear, removeChip, onKeydown, onSearchInput, inject, onBeforeUnmount, batch, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, bindField, searchable, clearable, placement, appendTo, maxChips, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h('div', { class: ["n-ms", { 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }], "data-ms-root": instanceId, "data-v-12b3b8c4": "" }, [
+    return h('div', { class: ["n-ms", { 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }], "data-ms-root": instanceId, "data-v-261608b5": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-ms-label", "data-v-12b3b8c4": "" }, [
+        (label) ? h('label', { class: "n-ms-label", "data-v-261608b5": "" }, [
         label
       ]) : null,
-        h('div', { class: "n-ms-trigger", role: "combobox", tabindex: "0", "aria-expanded": isOpen.value, onClick: toggleOpen, onKeydown: onKeydown, "data-v-12b3b8c4": "" }, [
+        h('div', { class: "n-ms-trigger", role: "combobox", tabindex: "0", "aria-expanded": isOpen.value, onClick: toggleOpen, onKeydown: onKeydown, "data-v-261608b5": "" }, [
         "\n      ",
-        (selectedLabels.value.length > 0) ? h('div', { class: "n-ms-chips", "data-v-12b3b8c4": "" }, [
+        (selectedLabels.value.length > 0) ? h('div', { class: "n-ms-chips", "data-v-261608b5": "" }, [
         (selectedLabels.value.slice(0, maxChips)).map((c, index) =>
-        h('div', { class: "n-ms-chip", key: String(c.value), "data-v-12b3b8c4": "" }, [
-        h('span', { class: "n-ms-chip-label", "data-v-12b3b8c4": "" }, [
+        h('div', { class: "n-ms-chip", key: String(c.value), "data-v-261608b5": "" }, [
+        h('span', { class: "n-ms-chip-label", "data-v-261608b5": "" }, [
         c.label
       ]),
-        h('button', { class: "n-ms-chip-remove", type: "button", "aria-label": "Remove", tabindex: "-1", disabled: effectiveDisabled.value, onClick: ($event) => { removeChip(c.value, $event) }, "data-v-12b3b8c4": "" }, [
+        h('button', { class: "n-ms-chip-remove", type: "button", "aria-label": "Remove", tabindex: "-1", disabled: effectiveDisabled.value, onClick: ($event) => { removeChip(c.value, $event) }, "data-v-261608b5": "" }, [
         "✕"
       ])
       ])
       ),
-        (selectedLabels.value.length > maxChips) ? h('span', { class: "n-ms-more", "data-v-12b3b8c4": "" }, [
+        (selectedLabels.value.length > maxChips) ? h('span', { class: "n-ms-more", "data-v-261608b5": "" }, [
         "+",
         selectedLabels.value.length - maxChips
       ]) : null
-      ]) : (true) ? h('span', { class: "n-ms-placeholder", "data-v-12b3b8c4": "" }, [
+      ]) : (true) ? h('span', { class: "n-ms-placeholder", "data-v-261608b5": "" }, [
         placeholder
       ]) : null,
         "\n      ",
-        h('div', { class: "n-ms-actions", "data-v-12b3b8c4": "" }, [
-        (clearable && selectedLabels.value.length > 0) ? h('button', { class: "n-ms-clear", type: "button", tabindex: "-1", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, "data-v-12b3b8c4": "" }, [
-        "✕"
+        h('div', { class: "n-ms-actions", "data-v-261608b5": "" }, [
+        (clearable && selectedLabels.value.length > 0) ? h('button', { class: "n-ms-clear", type: "button", tabindex: "-1", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, "aria-label": "Clear", "data-v-261608b5": "" }, [
+        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-261608b5": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-261608b5": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-261608b5": "" })
+      ])
       ]) : null,
-        h('span', { class: "n-ms-arrow", "data-v-12b3b8c4": "" }, [
-        "▾"
+        h('span', { class: "n-ms-arrow", "data-v-261608b5": "" }, [
+        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-261608b5": "" }, [
+        h('path', { d: "M6 9l6 6 6-6", "data-v-261608b5": "" })
+      ])
       ])
       ]),
         "\n    "
       ]),
         "\n    ",
-        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-ms-dropdown", "data-v-12b3b8c4": "" }, [
-        (searchable) ? h('div', { class: "n-ms-search", "data-v-12b3b8c4": "" }, [
-        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
+        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-ms-dropdown", "data-v-261608b5": "" }, [
+        (searchable) ? h('div', { class: "n-ms-search", "data-v-261608b5": "" }, [
+        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-261608b5": "" })
       ]) : null,
-        h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
+        h('div', { class: "n-ms-options", "data-v-261608b5": "" }, [
         (filteredOptions.value).map((opt, i) =>
-        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
-        h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
-        selectedSet.value.has(opt.value) ? '✓' : ''
+        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-261608b5": "" }, [
+        h('span', { class: "n-ms-check", "data-v-261608b5": "" }, [
+        (selectedSet.value.has(opt.value)) ? 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-261608b5": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-261608b5": "" })
+      ]) : null
       ]),
-        h('span', { class: "n-ms-option-label", "data-v-12b3b8c4": "" }, [
+        h('span', { class: "n-ms-option-label", "data-v-261608b5": "" }, [
         opt.label
       ])
       ])
       ),
-        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-12b3b8c4": "" }, [
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-261608b5": "" }, [
         "No options"
       ]) : null
       ])
       ]) : null,
-        h(_ntc_Teleport, { to: "body", "data-v-12b3b8c4": "" }, [
-        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-ms-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-ms-popup": instanceId, style: popupStyle.value, "data-v-12b3b8c4": "" }, [
-        (searchable) ? h('div', { class: "n-ms-search", "data-v-12b3b8c4": "" }, [
-        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
+        h(_ntc_Teleport, { to: "body", "data-v-261608b5": "" }, [
+        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-ms-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-ms-popup": instanceId, style: popupStyle.value, "data-v-261608b5": "" }, [
+        (searchable) ? h('div', { class: "n-ms-search", "data-v-261608b5": "" }, [
+        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-261608b5": "" })
       ]) : null,
-        h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
+        h('div', { class: "n-ms-options", "data-v-261608b5": "" }, [
         (filteredOptions.value).map((opt, i) =>
-        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
-        h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
-        selectedSet.value.has(opt.value) ? '✓' : ''
+        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-261608b5": "" }, [
+        h('span', { class: "n-ms-check", "data-v-261608b5": "" }, [
+        (selectedSet.value.has(opt.value)) ? 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-261608b5": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-261608b5": "" })
+      ]) : null
       ]),
-        h('span', { class: "n-ms-option-label", "data-v-12b3b8c4": "" }, [
+        h('span', { class: "n-ms-option-label", "data-v-261608b5": "" }, [
         opt.label
       ])
       ])
       ),
-        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-12b3b8c4": "" }, [
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-261608b5": "" }, [
         "No options"
       ]) : null
       ])
@@ -147,10 +156,10 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-12b3b8c4'
+_sfc_main.__scopeId = 'data-v-261608b5'
 _sfc_main.__hmrId = 'NMultiSelect_nexa'
 
 export default _sfc_main
 
-const __style = `.n-ms[data-v-12b3b8c4]{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}`
-injectStyle('data-v-12b3b8c4', __style)
+const __style = `.n-ms[data-v-261608b5]{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}`
+injectStyle('data-v-261608b5', __style)

package/dist/components/NMultiSelect.nexa

@@ -65,10 +65,10 @@ onBeforeUnmount(() => close())
     <div class="n-ms-trigger" role="combobox" tabindex="0" :aria-expanded="isOpen.value" @click="toggleOpen" @keydown="onKeydown">
       <div v-if="selectedLabels.value.length > 0" class="n-ms-chips"><div v-for="c in selectedLabels.value.slice(0, maxChips)" :key="String(c.value)" class="n-ms-chip"><span class="n-ms-chip-label">{{ c.label }}</span><button type="button" class="n-ms-chip-remove" aria-label="Remove" tabindex="-1" :disabled="effectiveDisabled.value" @click="removeChip(c.value, $event)">✕</button></div><span v-if="selectedLabels.value.length > maxChips" class="n-ms-more">+{{ selectedLabels.value.length - maxChips }}</span></div>
       <span v-else class="n-ms-placeholder">{{ placeholder }}</span>
-      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear">✕</button><span class="n-ms-arrow">▾</span></div>
+      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear" 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-ms-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-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
-    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" 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="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
+    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" 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="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
   </div>
 </template>
 

package/dist/components/NPaginator.js

@@ -1,7 +1,7 @@
-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-372b30ac',
+  __scopeId: 'data-v-2f8f305d',
   __hmrId: 'NPaginator_nexa',
   props: {
   first: { type: Number, default: 0 },
@@ -52,11 +52,11 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { safeFirst, safeRows, page, pageCount, canPrev, canNext, goToPage, prev, next, firstPage, lastPage, changeRows, start, end, $slots, emit, first, rows, totalRecords, rowsPerPageOptions, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-paginator", "data-v-372b30ac": "" }, [
+    return h('div', { class: "n-paginator", "data-v-2f8f305d": "" }, [
         "\n    ",
-        h('div', { class: "n-paginator-left", "data-v-372b30ac": "" }, [
+        h('div', { class: "n-paginator-left", "data-v-2f8f305d": "" }, [
         "\n      ",
-        h('span', { class: "n-paginator-report", "data-v-372b30ac": "" }, [
+        h('span', { class: "n-paginator-report", "data-v-2f8f305d": "" }, [
         start.value,
         "-",
         end.value,
@@ -66,38 +66,46 @@ _sfc_main.render = function(ctx) {
         "\n    "
       ]),
         "\n    ",
-        h('div', { class: "n-paginator-center", "data-v-372b30ac": "" }, [
+        h('div', { class: "n-paginator-center", "data-v-2f8f305d": "" }, [
         "\n      ",
-        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: firstPage, "data-v-372b30ac": "" }, [
-        "«"
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: firstPage, "aria-label": "First page", "data-v-2f8f305d": "" }, [
+        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-2f8f305d": "" }, [
+        h('path', { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5", "data-v-2f8f305d": "" })
+      ])
       ]),
         "\n      ",
-        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: prev, "data-v-372b30ac": "" }, [
-        "‹"
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: prev, "aria-label": "Previous page", "data-v-2f8f305d": "" }, [
+        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-2f8f305d": "" }, [
+        h('path', { d: "M15 18l-6-6 6-6", "data-v-2f8f305d": "" })
+      ])
       ]),
         "\n      ",
-        h('span', { class: "n-pg-page", "data-v-372b30ac": "" }, [
+        h('span', { class: "n-pg-page", "data-v-2f8f305d": "" }, [
         page.value + 1,
         " / ",
         pageCount.value
       ]),
         "\n      ",
-        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: next, "data-v-372b30ac": "" }, [
-        "›"
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: next, "aria-label": "Next page", "data-v-2f8f305d": "" }, [
+        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-2f8f305d": "" }, [
+        h('path', { d: "M9 18l6-6-6-6", "data-v-2f8f305d": "" })
+      ])
       ]),
         "\n      ",
-        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: lastPage, "data-v-372b30ac": "" }, [
-        "»"
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: lastPage, "aria-label": "Last page", "data-v-2f8f305d": "" }, [
+        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-2f8f305d": "" }, [
+        h('path', { d: "M13 17l5-5-5-5M6 17l5-5-5-5", "data-v-2f8f305d": "" })
+      ])
       ]),
         "\n    "
       ]),
         "\n    ",
-        h('div', { class: "n-paginator-right", "data-v-372b30ac": "" }, [
+        h('div', { class: "n-paginator-right", "data-v-2f8f305d": "" }, [
         "\n      ",
-        h('select', { class: "n-pg-select", value: rows, onChange: changeRows, "data-v-372b30ac": "" }, [
+        h('select', { class: "n-pg-select", value: rows, onChange: changeRows, "data-v-2f8f305d": "" }, [
         "\n        ",
         (rowsPerPageOptions).map((n, index) =>
-        h('option', { key: n, value: n, "data-v-372b30ac": "" }, [
+        h('option', { key: n, value: n, "data-v-2f8f305d": "" }, [
         n
       ])
       ),
@@ -108,10 +116,10 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-372b30ac'
+_sfc_main.__scopeId = 'data-v-2f8f305d'
 _sfc_main.__hmrId = 'NPaginator_nexa'
 
 export default _sfc_main
 
-const __style = `.n-paginator[data-v-372b30ac]{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}`
-injectStyle('data-v-372b30ac', __style)
+const __style = `.n-paginator[data-v-2f8f305d]{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}`
+injectStyle('data-v-2f8f305d', __style)

package/dist/components/NPaginator.nexa

@@ -58,11 +58,11 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
       <span class="n-paginator-report">{{ start.value }}-{{ end.value }} of {{ totalRecords }}</span>
     </div>
     <div class="n-paginator-center">
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage">«</button>
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev">‹</button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage" aria-label="First page"><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="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev" aria-label="Previous page"><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="M15 18l-6-6 6-6"/></svg></button>
       <span class="n-pg-page">{{ page.value + 1 }} / {{ pageCount.value }}</span>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next">›</button>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage">»</button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next" aria-label="Next page"><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="M9 18l6-6-6-6"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage" aria-label="Last page"><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="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg></button>
     </div>
     <div class="n-paginator-right">
       <select class="n-pg-select" :value="rows" @change="changeRows">

package/dist/components/NPassword.js

@@ -1,7 +1,7 @@
-import { signal, computed, h, hText, effect, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-7b897096',
+  __scopeId: 'data-v-2460271c',
   __hmrId: 'NPassword_nexa',
   props: {
   modelValue: { type: String, default: '' },
@@ -99,59 +99,73 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { instanceId, inputId, masked, type, hasValue, requirements, strength, internalError, errorMessage, ariaInvalid, describedBy, onInput, clear, toggle, $slots, emit, modelValue, placeholder, label, error, disabled, readonly, name, autocomplete, id, clearable, toggleMask, showStrength, validate, showRequirements, minLength, requireLower, requireUpper, requireNumber, requireSpecial, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-password", "data-v-7b897096": "" }, [
+    return h('div', { class: "n-password", "data-v-2460271c": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-password-label", for: inputId.value, "data-v-7b897096": "" }, [
+        (label) ? h('label', { class: "n-password-label", for: inputId.value, "data-v-2460271c": "" }, [
         label
       ]) : null,
-        h('div', { class: ["n-password-wrapper", { 'has-error': !!errorMessage.value, 'is-disabled': disabled }], "data-v-7b897096": "" }, [
+        h('div', { class: ["n-password-wrapper", { 'has-error': !!errorMessage.value, 'is-disabled': disabled }], "data-v-2460271c": "" }, [
         "\n      ",
-        h('input', { class: "n-password-input", id: inputId.value, name: name || undefined, type: type.value, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, autocomplete: autocomplete, "aria-invalid": ariaInvalid.value, "aria-describedby": describedBy.value, onInput: onInput, "data-v-7b897096": "" }),
+        h('input', { class: "n-password-input", id: inputId.value, name: name || undefined, type: type.value, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, autocomplete: autocomplete, "aria-invalid": ariaInvalid.value, "aria-describedby": describedBy.value, onInput: onInput, "data-v-2460271c": "" }),
         "\n      ",
-        h('div', { class: "n-password-actions", "data-v-7b897096": "" }, [
+        h('div', { class: "n-password-actions", "data-v-2460271c": "" }, [
         "\n        ",
-        (clearable && modelValue) ? h('button', { class: "n-password-action", type: "button", disabled: disabled || readonly, "aria-label": "Limpiar", onClick: clear, "data-v-7b897096": "" }, [
-        "✕"
+        (clearable && modelValue) ? h('button', { class: "n-password-action", type: "button", disabled: disabled || readonly, "aria-label": "Limpiar", onClick: clear, "data-v-2460271c": "" }, [
+        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-2460271c": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-2460271c": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-2460271c": "" })
+      ])
       ]) : null,
-        (toggleMask) ? h('button', { class: "n-password-action", type: "button", "aria-pressed": (!masked.value).toString(), disabled: disabled, "aria-label": masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña', onClick: toggle, "data-v-7b897096": "" }, [
+        (toggleMask) ? h('button', { class: "n-password-action", type: "button", "aria-pressed": (!masked.value).toString(), disabled: disabled, "aria-label": masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña', onClick: toggle, "data-v-2460271c": "" }, [
         "\n          ",
-        masked.value ? '👁' : '🙈',
+        (masked.value) ? 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-2460271c": "" }, [
+        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-2460271c": "" }),
+        h('circle', { cx: "12", cy: "12", r: "3", "data-v-2460271c": "" })
+      ]) : (true) ? 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-2460271c": "" }, [
+        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-2460271c": "" }),
+        h('circle', { cx: "12", cy: "12", r: "3", "data-v-2460271c": "" }),
+        h('path', { d: "M23 1L1 23", "data-v-2460271c": "" })
+      ]) : null,
         "\n        "
       ]) : null
       ]),
         "\n    "
       ]),
         "\n\n    ",
-        (errorMessage.value) ? h('div', { class: "n-password-error", id: inputId.value + '-error', role: "alert", "data-v-7b897096": "" }, [
+        (errorMessage.value) ? h('div', { class: "n-password-error", id: inputId.value + '-error', role: "alert", "data-v-2460271c": "" }, [
         "\n      ",
         errorMessage.value,
         "\n    "
       ]) : null,
-        (showStrength && modelValue) ? h('div', { class: "n-password-strength", id: inputId.value + '-strength', "data-v-7b897096": "" }, [
+        (showStrength && modelValue) ? h('div', { class: "n-password-strength", id: inputId.value + '-strength', "data-v-2460271c": "" }, [
         "\n      ",
-        h('div', { class: "n-password-meter", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": strength.value.score, "aria-label": 'Fuerza de contraseña: ' + strength.value.label, "data-v-7b897096": "" }, [
+        h('div', { class: "n-password-meter", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": strength.value.score, "aria-label": 'Fuerza de contraseña: ' + strength.value.label, "data-v-2460271c": "" }, [
         "\n        ",
         ([1, 2, 3, 4]).map((n, index) =>
-        h('span', { class: ["n-password-meter-seg", { 'is-on': n <= strength.value.score }], key: n, "data-v-7b897096": "" })
+        h('span', { class: ["n-password-meter-seg", { 'is-on': n <= strength.value.score }], key: n, "data-v-2460271c": "" })
       ),
         "\n      "
       ]),
         "\n      ",
-        h('span', { class: "n-password-strength-label", "data-v-7b897096": "" }, [
+        h('span', { class: "n-password-strength-label", "data-v-2460271c": "" }, [
         strength.value.label
       ]),
         "\n    "
       ]) : null,
-        (showRequirements && validate && modelValue) ? h('ul', { class: "n-password-req", id: inputId.value + '-requirements', "data-v-7b897096": "" }, [
+        (showRequirements && validate && modelValue) ? h('ul', { class: "n-password-req", id: inputId.value + '-requirements', "data-v-2460271c": "" }, [
         "\n      ",
         (requirements.value).map((r, index) =>
-        h('li', { class: ["n-password-req-item", { 'is-ok': r.ok }], key: r.key, "data-v-7b897096": "" }, [
+        h('li', { class: ["n-password-req-item", { 'is-ok': r.ok }], key: r.key, "data-v-2460271c": "" }, [
         "\n        ",
-        h('span', { class: "n-password-req-icon", "data-v-7b897096": "" }, [
-        r.ok ? '✓' : '•'
+        h('span', { class: "n-password-req-icon", "data-v-2460271c": "" }, [
+        (r.ok) ? h('svg', { 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", "data-v-2460271c": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-2460271c": "" })
+      ]) : (true) ? h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "currentColor", focusable: "false", "aria-hidden": "true", "data-v-2460271c": "" }, [
+        h('circle', { cx: "12", cy: "12", r: "4", "data-v-2460271c": "" })
+      ]) : null
       ]),
         "\n        ",
-        h('span', { "data-v-7b897096": "" }, [
+        h('span', { "data-v-2460271c": "" }, [
         r.label
       ]),
         "\n      "
@@ -161,33 +175,33 @@ _sfc_main.render = function(ctx) {
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-7b897096'
+_sfc_main.__scopeId = 'data-v-2460271c'
 _sfc_main.__hmrId = 'NPassword_nexa'
 
 export default _sfc_main
 
-const __style = `.n-password[data-v-7b897096]{ display:flex; flex-direction:column; gap: var(--n-space-2); width:100%; font-family: var(--n-font-sans); }
-.n-password-label[data-v-7b897096]{ font-size: var(--n-text-sm); font-weight: var(--n-weight-semibold); color: var(--n-color-text-secondary); margin-left: var(--n-space-1); }
-.n-password-wrapper[data-v-7b897096]{ 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[data-v-7b897096]: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[data-v-7b897096]{ border-color: var(--n-color-danger); }
-.n-password-wrapper.has-error[data-v-7b897096]:focus-within{ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
-.n-password-input[data-v-7b897096]{ 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[data-v-7b897096]::placeholder{ color: var(--n-color-text-muted); }
-.n-password-actions[data-v-7b897096]{ position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }
-.n-password-action[data-v-7b897096]{ 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-password-action[data-v-7b897096]:hover:not(:disabled){ color: var(--n-color-text); background: var(--n-color-glass); }
-.n-password-action[data-v-7b897096]:disabled{ opacity: 0.5; cursor: not-allowed; }
-.n-password-error[data-v-7b897096]{ font-size: var(--n-text-xs); color: var(--n-color-danger); padding: 0 var(--n-space-1); }
-.n-password-strength[data-v-7b897096]{ display:flex; align-items:center; gap: var(--n-space-2); padding: 0 var(--n-space-1); }
-.n-password-meter[data-v-7b897096]{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
-.n-password-meter-seg[data-v-7b897096]{ height: 6px; border-radius: var(--n-radius-full); background: var(--n-color-border); transition: background var(--n-transition-fast); }
-.n-password-meter-seg.is-on[data-v-7b897096]{ background: var(--n-color-primary); }
-.n-password-strength-label[data-v-7b897096]{ font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
-.n-password-req[data-v-7b897096]{ list-style:none; padding: 0 var(--n-space-1); margin: 0; display:flex; flex-direction:column; gap: 0.25rem; }
-.n-password-req-item[data-v-7b897096]{ display:flex; gap: var(--n-space-2); align-items:flex-start; font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
-.n-password-req-item.is-ok[data-v-7b897096]{ color: var(--n-color-success); }
-.n-password-req-icon[data-v-7b897096]{ width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
-.n-password-wrapper.is-disabled[data-v-7b897096]{ opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
-.n-password-wrapper.is-disabled .n-password-input[data-v-7b897096]{ cursor: not-allowed; }`
-injectStyle('data-v-7b897096', __style)
+const __style = `.n-password[data-v-2460271c]{ display:flex; flex-direction:column; gap: var(--n-space-2); width:100%; font-family: var(--n-font-sans); }
+.n-password-label[data-v-2460271c]{ font-size: var(--n-text-sm); font-weight: var(--n-weight-semibold); color: var(--n-color-text-secondary); margin-left: var(--n-space-1); }
+.n-password-wrapper[data-v-2460271c]{ 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[data-v-2460271c]: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[data-v-2460271c]{ border-color: var(--n-color-danger); }
+.n-password-wrapper.has-error[data-v-2460271c]:focus-within{ box-shadow: 0 0 0 3px var(--n-color-danger-light); }
+.n-password-input[data-v-2460271c]{ 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[data-v-2460271c]::placeholder{ color: var(--n-color-text-muted); }
+.n-password-actions[data-v-2460271c]{ position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }
+.n-password-action[data-v-2460271c]{ 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-password-action[data-v-2460271c]:hover:not(:disabled){ color: var(--n-color-text); background: var(--n-color-glass); }
+.n-password-action[data-v-2460271c]:disabled{ opacity: 0.5; cursor: not-allowed; }
+.n-password-error[data-v-2460271c]{ font-size: var(--n-text-xs); color: var(--n-color-danger); padding: 0 var(--n-space-1); }
+.n-password-strength[data-v-2460271c]{ display:flex; align-items:center; gap: var(--n-space-2); padding: 0 var(--n-space-1); }
+.n-password-meter[data-v-2460271c]{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
+.n-password-meter-seg[data-v-2460271c]{ height: 6px; border-radius: var(--n-radius-full); background: var(--n-color-border); transition: background var(--n-transition-fast); }
+.n-password-meter-seg.is-on[data-v-2460271c]{ background: var(--n-color-primary); }
+.n-password-strength-label[data-v-2460271c]{ font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req[data-v-2460271c]{ list-style:none; padding: 0 var(--n-space-1); margin: 0; display:flex; flex-direction:column; gap: 0.25rem; }
+.n-password-req-item[data-v-2460271c]{ display:flex; gap: var(--n-space-2); align-items:flex-start; font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req-item.is-ok[data-v-2460271c]{ color: var(--n-color-success); }
+.n-password-req-icon[data-v-2460271c]{ width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
+.n-password-wrapper.is-disabled[data-v-2460271c]{ opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
+.n-password-wrapper.is-disabled .n-password-input[data-v-2460271c]{ cursor: not-allowed; }`
+injectStyle('data-v-2460271c', __style)

package/dist/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/dist/components/NProgressBar.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-daaa1d0',
@@ -67,7 +67,7 @@ const __style = `.n-progress[data-v-daaa1d0]{
 .n-progress-bar[data-v-daaa1d0]{
   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;
@@ -105,11 +105,11 @@ const __style = `.n-progress[data-v-daaa1d0]{
 .is-striped .n-progress-bar[data-v-daaa1d0]{
   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/dist/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
   );