nexa-ui-kit 0.10.0 → 0.11.1

package/dist/components/NInput.js

@@ -1,7 +1,7 @@
-import { signal, computed, inject, effect, h, hText, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, computed, inject, effect, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-7dbed0f8',
+  __scopeId: 'data-v-5b5ed8a8',
   __hmrId: 'NInput_nexa',
   props: {
   modelValue: { type: [String, Number], default: '' },
@@ -106,43 +106,53 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { field, showPassword, isFocused, effectiveValue, draft, effectiveId, effectiveDescribedBy, effectiveInvalid, effectiveError, effectiveDisabled, inputType, currentLength, onInput, onFocus, onBlur, clear, togglePassword, inject, $slots, emit, modelValue, type, placeholder, label, error, id, name, autocomplete, ariaDescribedby, ariaInvalid, bindField, disabled, readonly, clearable, maxlength, prefixIcon, suffixIcon, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-input-group", "data-v-7dbed0f8": "" }, [
+    return h('div', { class: "n-input-group", "data-v-5b5ed8a8": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-input-label", "data-v-7dbed0f8": "" }, [
+        (label) ? h('label', { class: "n-input-label", "data-v-5b5ed8a8": "" }, [
         label
       ]) : null,
-        h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }], "data-v-7dbed0f8": "" }, [
+        h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }], "data-v-5b5ed8a8": "" }, [
         "\n      ",
-        (prefixIcon) ? h('span', { class: "n-input-icon is-prefix", "data-v-7dbed0f8": "" }, [
+        (prefixIcon) ? h('span', { class: "n-input-icon is-prefix", "data-v-5b5ed8a8": "" }, [
         prefixIcon
       ]) : null,
-        h('input', { class: ["n-input", { 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }], id: effectiveId.value || undefined, name: name || undefined, type: inputType.value, value: draft.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, autocomplete: autocomplete || undefined, "aria-describedby": effectiveDescribedBy.value || undefined, "aria-invalid": effectiveInvalid.value || undefined, maxlength: maxlength || undefined, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-7dbed0f8": "" }),
+        h('input', { class: ["n-input", { 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }], id: effectiveId.value || undefined, name: name || undefined, type: inputType.value, value: draft.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, autocomplete: autocomplete || undefined, "aria-describedby": effectiveDescribedBy.value || undefined, "aria-invalid": effectiveInvalid.value || undefined, maxlength: maxlength || undefined, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-5b5ed8a8": "" }),
         "\n      ",
-        h('div', { class: "n-input-focus-ring", "data-v-7dbed0f8": "" }),
+        h('div', { class: "n-input-focus-ring", "data-v-5b5ed8a8": "" }),
         "\n      ",
-        h('div', { class: "n-input-actions", "data-v-7dbed0f8": "" }, [
+        h('div', { class: "n-input-actions", "data-v-5b5ed8a8": "" }, [
         "\n        ",
-        (clearable && draft.value) ? h('button', { class: "n-input-action", onClick: clear, tabindex: "-1", type: "button", "data-v-7dbed0f8": "" }, [
-        "✕"
+        (clearable && draft.value) ? h('button', { class: "n-input-action", onClick: clear, tabindex: "-1", type: "button", "aria-label": "Clear", "data-v-5b5ed8a8": "" }, [
+        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-5b5ed8a8": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-5b5ed8a8": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-5b5ed8a8": "" })
+      ])
       ]) : null,
-        (type === 'password') ? h('button', { class: "n-input-action", onClick: togglePassword, tabindex: "-1", type: "button", "data-v-7dbed0f8": "" }, [
+        (type === 'password') ? h('button', { class: "n-input-action", onClick: togglePassword, tabindex: "-1", type: "button", "aria-label": showPassword.value ? 'Hide password' : 'Show password', "data-v-5b5ed8a8": "" }, [
         "\n          ",
-        showPassword.value ? '◉' : '◎',
+        (!showPassword.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-5b5ed8a8": "" }, [
+        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-5b5ed8a8": "" }),
+        h('circle', { cx: "12", cy: "12", r: "3", "data-v-5b5ed8a8": "" })
+      ]) : (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-5b5ed8a8": "" }, [
+        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-5b5ed8a8": "" }),
+        h('circle', { cx: "12", cy: "12", r: "3", "data-v-5b5ed8a8": "" }),
+        h('path', { d: "M23 1L1 23", "data-v-5b5ed8a8": "" })
+      ]) : null,
         "\n        "
       ]) : null,
-        (suffixIcon) ? h('span', { class: "n-input-icon is-suffix", "data-v-7dbed0f8": "" }, [
+        (suffixIcon) ? h('span', { class: "n-input-icon is-suffix", "data-v-5b5ed8a8": "" }, [
         suffixIcon
       ]) : null
       ]),
         "\n    "
       ]),
         "\n    ",
-        h('div', { class: "n-input-bottom", "data-v-7dbed0f8": "" }, [
+        h('div', { class: "n-input-bottom", "data-v-5b5ed8a8": "" }, [
         "\n      ",
-        (effectiveError.value) ? h('span', { class: "n-input-error-msg", "data-v-7dbed0f8": "" }, [
+        (effectiveError.value) ? h('span', { class: "n-input-error-msg", "data-v-5b5ed8a8": "" }, [
         effectiveError.value
       ]) : null,
-        (maxlength > 0) ? h('span', { class: "n-input-counter", "data-v-7dbed0f8": "" }, [
+        (maxlength > 0) ? h('span', { class: "n-input-counter", "data-v-5b5ed8a8": "" }, [
         currentLength.value,
         "/",
         maxlength
@@ -151,33 +161,33 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-7dbed0f8'
+_sfc_main.__scopeId = 'data-v-5b5ed8a8'
 _sfc_main.__hmrId = 'NInput_nexa'
 
 export default _sfc_main
 
-const __style = `.n-input-group[data-v-7dbed0f8]{
+const __style = `.n-input-group[data-v-5b5ed8a8]{
   display: flex;
   flex-direction: column;
   gap: var(--n-space-2);
   width: 100%;
 }
 
-.n-input-label[data-v-7dbed0f8]{
+.n-input-label[data-v-5b5ed8a8]{
   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-input-wrapper[data-v-7dbed0f8]{
+.n-input-wrapper[data-v-5b5ed8a8]{
   position: relative;
   display: flex;
   align-items: center;
   transition: all var(--n-transition-fast);
 }
 
-.n-input[data-v-7dbed0f8]{
+.n-input[data-v-5b5ed8a8]{
   position: relative;
   z-index: 1;
   width: 100%;
@@ -195,19 +205,19 @@ const __style = `.n-input-group[data-v-7dbed0f8]{
   outline: none;
 }
 
-.n-input.has-prefix[data-v-7dbed0f8]{
+.n-input.has-prefix[data-v-5b5ed8a8]{
   padding-left: 2.5rem;
 }
 
-.n-input.has-suffix[data-v-7dbed0f8]{
+.n-input.has-suffix[data-v-5b5ed8a8]{
   padding-right: 2.5rem;
 }
 
-.n-input[data-v-7dbed0f8]::placeholder{
+.n-input[data-v-5b5ed8a8]::placeholder{
   color: var(--n-color-text-muted);
 }
 
-.n-input-focus-ring[data-v-7dbed0f8]{
+.n-input-focus-ring[data-v-5b5ed8a8]{
   position: absolute;
   inset: 0;
   border-radius: var(--n-radius-md);
@@ -218,25 +228,25 @@ const __style = `.n-input-group[data-v-7dbed0f8]{
   z-index: 0;
 }
 
-.is-focused .n-input-focus-ring[data-v-7dbed0f8]{
+.is-focused .n-input-focus-ring[data-v-5b5ed8a8]{
   opacity: 0.35;
 }
 
-.is-focused .n-input[data-v-7dbed0f8]{
+.is-focused .n-input[data-v-5b5ed8a8]{
   border-color: var(--n-color-primary);
   background: var(--n-color-surface);
 }
 
-.has-error .n-input[data-v-7dbed0f8]{
+.has-error .n-input[data-v-5b5ed8a8]{
   border-color: var(--n-color-danger);
 }
 
-.has-error .n-input-focus-ring[data-v-7dbed0f8]{
+.has-error .n-input-focus-ring[data-v-5b5ed8a8]{
   background: var(--n-color-danger);
   opacity: 0.35;
 }
 
-.n-input-icon[data-v-7dbed0f8]{
+.n-input-icon[data-v-5b5ed8a8]{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -248,15 +258,15 @@ const __style = `.n-input-group[data-v-7dbed0f8]{
   line-height: 1;
 }
 
-.n-input-icon.is-prefix[data-v-7dbed0f8]{
+.n-input-icon.is-prefix[data-v-5b5ed8a8]{
   left: 0.85rem;
 }
 
-.n-input-icon.is-suffix[data-v-7dbed0f8]{
+.n-input-icon.is-suffix[data-v-5b5ed8a8]{
   right: 0.85rem;
 }
 
-.n-input-actions[data-v-7dbed0f8]{
+.n-input-actions[data-v-5b5ed8a8]{
   position: absolute;
   right: 0.5rem;
   top: 50%;
@@ -266,7 +276,7 @@ const __style = `.n-input-group[data-v-7dbed0f8]{
   gap: 0.15rem;
 }
 
-.n-input-action[data-v-7dbed0f8]{
+.n-input-action[data-v-5b5ed8a8]{
   background: transparent;
   border: none;
   color: var(--n-color-text-muted);
@@ -280,32 +290,32 @@ const __style = `.n-input-group[data-v-7dbed0f8]{
   line-height: 1;
 }
 
-.n-input-action[data-v-7dbed0f8]:hover{
+.n-input-action[data-v-5b5ed8a8]:hover{
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
 
-.n-input-bottom[data-v-7dbed0f8]{
+.n-input-bottom[data-v-5b5ed8a8]{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--n-space-1);
 }
 
-.n-input-error-msg[data-v-7dbed0f8]{
+.n-input-error-msg[data-v-5b5ed8a8]{
   font-size: var(--n-text-xs);
   color: var(--n-color-danger);
 }
 
-.n-input-counter[data-v-7dbed0f8]{
+.n-input-counter[data-v-5b5ed8a8]{
   font-size: var(--n-text-xs);
   color: var(--n-color-text-muted);
   margin-left: auto;
 }
 
-.is-disabled .n-input[data-v-7dbed0f8]{
+.is-disabled .n-input[data-v-5b5ed8a8]{
   opacity: 0.5;
   cursor: not-allowed;
   background: var(--n-color-surface-alt);
 }`
-injectStyle('data-v-7dbed0f8', __style)
+injectStyle('data-v-5b5ed8a8', __style)

package/dist/components/NInput.nexa

@@ -141,9 +141,10 @@ const togglePassword = () => {
       />
       <div class="n-input-focus-ring"></div>
       <div class="n-input-actions">
-        <button v-if="clearable && draft.value" class="n-input-action" @click="clear" tabindex="-1" type="button">✕</button>
-        <button v-if="type === 'password'" class="n-input-action" @click="togglePassword" tabindex="-1" type="button">
-          {{ showPassword.value ? '◉' : '◎' }}
+        <button v-if="clearable && draft.value" class="n-input-action" @click="clear" tabindex="-1" type="button" 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>
+        <button v-if="type === 'password'" class="n-input-action" @click="togglePassword" tabindex="-1" type="button" :aria-label="showPassword.value ? 'Hide password' : 'Show password'">
+          <svg v-if="!showPassword.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>
         <span v-if="suffixIcon" class="n-input-icon is-suffix">{{ suffixIcon }}</span>
       </div>

package/dist/components/NInputNumber.js

@@ -1,7 +1,7 @@
-import { signal, computed, inject, effect, batch, h, hText, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, computed, inject, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-39e23f1c',
+  __scopeId: 'data-v-6f989f3f',
   __hmrId: 'NInputNumber_nexa',
   props: {
   modelValue: { type: Number, default: 0 },
@@ -201,31 +201,36 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { field, effectiveValue, effectiveDisabled, text, canEdit, isFocused, nfSignal, displayText, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit, modelValue, min, max, step, bindField, disabled, readonly, label, placeholder, currency, locale, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: "n-inum", "data-v-39e23f1c": "" }, [
+    return h('div', { class: "n-inum", "data-v-6f989f3f": "" }, [
         "\r\n    ",
-        (label) ? h('label', { class: "n-inum-label", "data-v-39e23f1c": "" }, [
+        (label) ? h('label', { class: "n-inum-label", "data-v-6f989f3f": "" }, [
         label
       ]) : null,
-        h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-39e23f1c": "" }, [
+        h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-6f989f3f": "" }, [
         "\r\n      ",
-        h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-39e23f1c": "" }, [
-        "−"
+        h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-6f989f3f": "" }, [
+        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-6f989f3f": "" }, [
+        h('line', { x1: "5", y1: "12", x2: "19", y2: "12", "data-v-6f989f3f": "" })
+      ])
       ]),
         "\r\n      ",
-        h('input', { class: "n-inum-input", type: "text", value: displayText.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-39e23f1c": "" }),
+        h('input', { class: "n-inum-input", type: "text", value: displayText.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-6f989f3f": "" }),
         "\r\n      ",
-        h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-39e23f1c": "" }, [
-        "+"
+        h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-6f989f3f": "" }, [
+        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-6f989f3f": "" }, [
+        h('line', { x1: "12", y1: "5", x2: "12", y2: "19", "data-v-6f989f3f": "" }),
+        h('line', { x1: "5", y1: "12", x2: "19", y2: "12", "data-v-6f989f3f": "" })
+      ])
       ]),
         "\r\n    "
       ]),
         "\r\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-39e23f1c'
+_sfc_main.__scopeId = 'data-v-6f989f3f'
 _sfc_main.__hmrId = 'NInputNumber_nexa'
 
 export default _sfc_main
 
-const __style = `.n-inum[data-v-39e23f1c]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-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-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
-injectStyle('data-v-39e23f1c', __style)
+const __style = `.n-inum[data-v-6f989f3f]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-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-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
+injectStyle('data-v-6f989f3f', __style)

package/dist/components/NInputNumber.nexa

@@ -220,9 +220,9 @@ const onFocus = () => {
   <div class="n-inum">
     <label v-if="label" class="n-inum-label">{{ label }}</label>
     <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
-      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
+      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec"><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"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
       <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
-      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
+      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc"><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"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
     </div>
   </div>
 </template>

package/dist/components/NModal.js

@@ -1,7 +1,7 @@
-import { signal, effect, onMounted, onUnmounted, h, hText, computed, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { signal, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-51b57181',
+  __scopeId: 'data-v-46af727f',
   __hmrId: 'NModal_nexa',
   props: {
   show: { type: Boolean, default: false },
@@ -79,34 +79,40 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { isVisible, modalEl, previousFocus, bodyOverflow, setModalRef, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, closeLeft, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-51b57181": "" }, [
+    return h(_ntc_Teleport, { to: "body", "data-v-46af727f": "" }, [
         "\r\n    ",
-        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-51b57181": "" }, [
+        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-46af727f": "" }, [
         "\r\n      ",
-        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-51b57181": "" }),
+        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-46af727f": "" }),
         "\r\n      ",
-        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: setModalRef, style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-51b57181": "" }, [
+        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: setModalRef, style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-46af727f": "" }, [
         "\r\n        ",
-        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-51b57181": "" }, [
+        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-46af727f": "" }, [
         "\r\n          ",
-        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-51b57181": "" }, [
-        "×"
+        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-46af727f": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-46af727f": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-46af727f": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-46af727f": "" })
+      ])
       ]) : null,
         ctx.$slots.header ? ctx.$slots.header() : ["\r\n            ", h('h3', null, [
         title
       ]), "\r\n          "],
         "\r\n          ",
-        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-51b57181": "" }, [
-        "×"
+        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-46af727f": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-46af727f": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-46af727f": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-46af727f": "" })
+      ])
       ]) : null
       ]) : null,
-        h('div', { class: "n-modal-content", "data-v-51b57181": "" }, [
+        h('div', { class: "n-modal-content", "data-v-46af727f": "" }, [
         "\r\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\r\n        "
       ]),
         "\r\n        ",
-        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-51b57181": "" }, [
+        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-46af727f": "" }, [
         "\r\n          ",
         ctx.$slots.footer ? ctx.$slots.footer() : null,
         "\r\n        "
@@ -116,12 +122,12 @@ _sfc_main.render = function(ctx) {
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-51b57181'
+_sfc_main.__scopeId = 'data-v-46af727f'
 _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-51b57181]{
+const __style = `.n-modal-root[data-v-46af727f]{
   position: fixed;
   top: 0;
   left: 0;
@@ -133,7 +139,7 @@ const __style = `.n-modal-root[data-v-51b57181]{
   z-index: var(--n-z-modal);
 }
 
-.n-modal-overlay[data-v-51b57181]{
+.n-modal-overlay[data-v-46af727f]{
   position: absolute;
   top: 0;
   left: 0;
@@ -145,11 +151,11 @@ const __style = `.n-modal-root[data-v-51b57181]{
   transition: opacity 0.25s ease;
 }
 
-.n-modal-overlay.is-active[data-v-51b57181]{
+.n-modal-overlay.is-active[data-v-46af727f]{
   opacity: 1;
 }
 
-.n-modal-container[data-v-51b57181]{
+.n-modal-container[data-v-46af727f]{
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
@@ -158,7 +164,7 @@ const __style = `.n-modal-root[data-v-51b57181]{
   box-shadow: var(--n-shadow-xl);
   transform: scale(0.9) translateY(20px);
   opacity: 0;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-spring);
   overflow: hidden;
   outline: none;
   max-height: 85vh;
@@ -166,12 +172,12 @@ const __style = `.n-modal-root[data-v-51b57181]{
   flex-direction: column;
 }
 
-.n-modal-container.is-active[data-v-51b57181]{
+.n-modal-container.is-active[data-v-46af727f]{
   transform: scale(1) translateY(0);
   opacity: 1;
 }
 
-.n-modal-header[data-v-51b57181]{
+.n-modal-header[data-v-46af727f]{
   padding: var(--n-space-6) var(--n-space-8);
   border-bottom: 1px solid var(--n-color-border);
   display: flex;
@@ -180,14 +186,14 @@ const __style = `.n-modal-root[data-v-51b57181]{
   flex-shrink: 0;
 }
 
-.n-modal-header h3[data-v-51b57181]{
+.n-modal-header h3[data-v-46af727f]{
   margin: 0;
   font-size: var(--n-text-xl);
   font-weight: var(--n-weight-bold);
   color: var(--n-color-text);
 }
 
-.n-modal-close[data-v-51b57181]{
+.n-modal-close[data-v-46af727f]{
   background: transparent;
   border: none;
   color: var(--n-color-text-secondary);
@@ -204,12 +210,12 @@ const __style = `.n-modal-root[data-v-51b57181]{
   border-radius: var(--n-radius-sm);
 }
 
-.n-modal-close[data-v-51b57181]:hover{
+.n-modal-close[data-v-46af727f]:hover{
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
 
-.n-modal-content[data-v-51b57181]{
+.n-modal-content[data-v-46af727f]{
   padding: var(--n-space-8);
   color: var(--n-color-text-secondary);
   overflow-y: auto;
@@ -217,13 +223,13 @@ const __style = `.n-modal-root[data-v-51b57181]{
   flex: 1;
 }
 
-.n-modal-footer[data-v-51b57181]{
+.n-modal-footer[data-v-46af727f]{
   padding: var(--n-space-5) var(--n-space-8);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--n-color-glass);
   border-top: 1px solid var(--n-color-border);
   display: flex;
   justify-content: flex-end;
   gap: var(--n-space-4);
   flex-shrink: 0;
 }`
-injectStyle('data-v-51b57181', __style)
+injectStyle('data-v-46af727f', __style)

package/dist/components/NModal.nexa

@@ -100,11 +100,11 @@ onUnmounted(() => {
         @keydown="handleKeydown"
       >
         <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
-          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close"><svg viewBox="0 0 24 24" width="20" height="20" 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>
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
-          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
         </div>
         <div class="n-modal-content">
           <slot />
@@ -155,7 +155,7 @@ onUnmounted(() => {
   box-shadow: var(--n-shadow-xl);
   transform: scale(0.9) translateY(20px);
   opacity: 0;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-spring);
   overflow: hidden;
   outline: none;
   max-height: 85vh;
@@ -216,7 +216,7 @@ onUnmounted(() => {
 
 .n-modal-footer {
   padding: var(--n-space-5) var(--n-space-8);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--n-color-glass);
   border-top: 1px solid var(--n-color-border);
   display: flex;
   justify-content: flex-end;