nexa-ui-kit 0.9.0 → 0.11.0

package/dist/components/NButton.js

@@ -1,7 +1,7 @@
 import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-76573beb',
+  __scopeId: 'data-v-72f6f577',
   __hmrId: 'NButton_nexa',
   props: {
   variant: { type: String, default: 'primary' },
@@ -45,29 +45,29 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { ripple, handleClick, btnClass, $slots, emit, variant, size, type, disabled, loading, block, rounded, loadingText, Fragment: _ntc_Fragment } = ctx
-    return h('button', { class: btnClass.value, type: type, disabled: disabled || loading, onClick: handleClick, "data-v-76573beb": "" }, [
+    return h('button', { class: btnClass.value, type: type, disabled: disabled || loading, "aria-busy": loading ? 'true' : undefined, onClick: handleClick, "data-v-72f6f577": "" }, [
         "\r\n    ",
-        (loading) ? h('span', { class: "n-btn-loader", "data-v-76573beb": "" }) : null,
-        (loading && loadingText) ? h('span', { class: "n-btn-loading-text", "data-v-76573beb": "" }, [
+        (loading) ? h('span', { class: "n-btn-loader", "data-v-72f6f577": "" }) : null,
+        (loading && loadingText) ? h('span', { class: "n-btn-loading-text", "data-v-72f6f577": "" }, [
         loadingText
       ]) : null,
-        (!loading || (loading && !loadingText)) ? h('span', { class: "n-btn-content", "data-v-76573beb": "" }, [
+        (!loading || (loading && !loadingText)) ? h('span', { class: "n-btn-content", "data-v-72f6f577": "" }, [
         "\r\n      ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\r\n    "
       ]) : null,
         (ripple.value).map((r, index) =>
-        h('span', { class: "n-btn-ripple", key: r.id, style: { left: r.x + 'px', top: r.y + 'px' }, "data-v-76573beb": "" })
+        h('span', { class: "n-btn-ripple", key: r.id, style: { left: r.x + 'px', top: r.y + 'px' }, "data-v-72f6f577": "" })
       ),
         "\r\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-76573beb'
+_sfc_main.__scopeId = 'data-v-72f6f577'
 _sfc_main.__hmrId = 'NButton_nexa'
 
 export default _sfc_main
 
-const __style = `.n-btn[data-v-76573beb]{
+const __style = `.n-btn[data-v-72f6f577]{
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -88,137 +88,137 @@ const __style = `.n-btn[data-v-76573beb]{
   min-width: fit-content;
 }
 
-.n-btn[data-v-76573beb]:focus-visible{
+.n-btn[data-v-72f6f577]:focus-visible{
   box-shadow: 0 0 0 3px var(--n-color-primary-light);
 }
 
 /* Sizes */
-.n-btn-sm[data-v-76573beb]{ padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
-.n-btn-md[data-v-76573beb]{ padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
-.n-btn-lg[data-v-76573beb]{ padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+.n-btn-sm[data-v-72f6f577]{ padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
+.n-btn-md[data-v-72f6f577]{ padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
+.n-btn-lg[data-v-72f6f577]{ padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
 
 /* Block */
-.is-block[data-v-76573beb]{ width: 100%; }
+.is-block[data-v-72f6f577]{ width: 100%; }
 
 /* Rounded */
-.is-rounded[data-v-76573beb]{ border-radius: var(--n-radius-full); }
+.is-rounded[data-v-72f6f577]{ border-radius: var(--n-radius-full); }
 
 /* Variant: Primary */
-.n-btn-primary[data-v-76573beb]{
+.n-btn-primary[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
   color: white;
   box-shadow: var(--n-shadow-glow-primary);
 }
-.n-btn-primary[data-v-76573beb]:hover:not(:disabled){
+.n-btn-primary[data-v-72f6f577]:hover:not(:disabled){
   transform: translateY(-2px);
   box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
 }
-.n-btn-primary[data-v-76573beb]:active:not(:disabled){
+.n-btn-primary[data-v-72f6f577]:active:not(:disabled){
   transform: translateY(0) scale(0.97);
 }
 
 /* Variant: Secondary */
-.n-btn-secondary[data-v-76573beb]{
+.n-btn-secondary[data-v-72f6f577]{
   background: var(--n-color-surface-alt);
   color: var(--n-color-text);
   border-color: var(--n-color-border);
 }
-.n-btn-secondary[data-v-76573beb]:hover:not(:disabled){
+.n-btn-secondary[data-v-72f6f577]:hover:not(:disabled){
   background: var(--n-color-surface-hover);
   border-color: var(--n-color-border-hover);
 }
 
 /* Variant: Success */
-.n-btn-success[data-v-76573beb]{
+.n-btn-success[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
+  box-shadow: var(--n-shadow-glow-success);
 }
-.n-btn-success[data-v-76573beb]:hover:not(:disabled){
+.n-btn-success[data-v-72f6f577]:hover:not(:disabled){
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
+  box-shadow: var(--n-shadow-glow-success);
 }
-.n-btn-success[data-v-76573beb]:active:not(:disabled){
+.n-btn-success[data-v-72f6f577]:active:not(:disabled){
   transform: translateY(0) scale(0.97);
 }
 
 /* Variant: Warning */
-.n-btn-warning[data-v-76573beb]{
+.n-btn-warning[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
+  box-shadow: var(--n-shadow-glow-warning);
 }
-.n-btn-warning[data-v-76573beb]:hover:not(:disabled){
+.n-btn-warning[data-v-72f6f577]:hover:not(:disabled){
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
+  box-shadow: var(--n-shadow-glow-warning);
 }
-.n-btn-warning[data-v-76573beb]:active:not(:disabled){
+.n-btn-warning[data-v-72f6f577]:active:not(:disabled){
   transform: translateY(0) scale(0.97);
 }
 
 /* Variant: Info */
-.n-btn-info[data-v-76573beb]{
+.n-btn-info[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
+  box-shadow: var(--n-shadow-glow-info);
 }
-.n-btn-info[data-v-76573beb]:hover:not(:disabled){
+.n-btn-info[data-v-72f6f577]:hover:not(:disabled){
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
+  box-shadow: var(--n-shadow-glow-info);
 }
-.n-btn-info[data-v-76573beb]:active:not(:disabled){
+.n-btn-info[data-v-72f6f577]:active:not(:disabled){
   transform: translateY(0) scale(0.97);
 }
 
 /* Variant: Danger */
-.n-btn-danger[data-v-76573beb]{
+.n-btn-danger[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.3);
+  box-shadow: var(--n-shadow-glow-danger);
 }
-.n-btn-danger[data-v-76573beb]:hover:not(:disabled){
+.n-btn-danger[data-v-72f6f577]:hover:not(:disabled){
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
+  box-shadow: var(--n-shadow-glow-danger);
 }
-.n-btn-danger[data-v-76573beb]:active:not(:disabled){
+.n-btn-danger[data-v-72f6f577]:active:not(:disabled){
   transform: translateY(0) scale(0.97);
 }
 
 /* Variant: Ghost */
-.n-btn-ghost[data-v-76573beb]{
+.n-btn-ghost[data-v-72f6f577]{
   background: transparent;
   color: var(--n-color-text-secondary);
 }
-.n-btn-ghost[data-v-76573beb]:hover:not(:disabled){
+.n-btn-ghost[data-v-72f6f577]:hover:not(:disabled){
   background: var(--n-color-glass);
   color: var(--n-color-text);
 }
 
 /* Variant: Outline */
-.n-btn-outline[data-v-76573beb]{
+.n-btn-outline[data-v-72f6f577]{
   background: transparent;
   color: var(--n-color-primary);
   border-color: var(--n-color-primary);
 }
-.n-btn-outline[data-v-76573beb]:hover:not(:disabled){
+.n-btn-outline[data-v-72f6f577]:hover:not(:disabled){
   background: var(--n-color-primary-light);
   border-color: var(--n-color-primary-hover);
 }
 
 /* Variant: Glass */
-.n-btn-glass[data-v-76573beb]{
+.n-btn-glass[data-v-72f6f577]{
   background: var(--n-color-glass);
   backdrop-filter: blur(10px);
   border-color: var(--n-color-glass-border);
   color: var(--n-color-text);
 }
-.n-btn-glass[data-v-76573beb]:hover:not(:disabled){
+.n-btn-glass[data-v-72f6f577]:hover:not(:disabled){
   background: var(--n-color-glass-hover);
   border-color: var(--n-color-border-hover);
 }
 
 /* Disabled */
-.n-btn[data-v-76573beb]:disabled{
+.n-btn[data-v-72f6f577]:disabled{
   opacity: 0.45;
   cursor: not-allowed;
   transform: none !important;
@@ -226,7 +226,7 @@ const __style = `.n-btn[data-v-76573beb]{
 }
 
 /* Loader */
-.n-btn-loader[data-v-76573beb]{
+.n-btn-loader[data-v-72f6f577]{
   width: 1rem;
   height: 1rem;
   border: 2px solid currentColor;
@@ -236,38 +236,38 @@ const __style = `.n-btn[data-v-76573beb]{
   flex-shrink: 0;
 }
 
-.n-btn-lg .n-btn-loader[data-v-76573beb]{
+.n-btn-lg .n-btn-loader[data-v-72f6f577]{
   width: 1.25rem;
   height: 1.25rem;
   border-width: 2.5px;
 }
 
-.n-btn-sm .n-btn-loader[data-v-76573beb]{
+.n-btn-sm .n-btn-loader[data-v-72f6f577]{
   width: 0.85rem;
   height: 0.85rem;
 }
 
-.n-btn-loading-text[data-v-76573beb]{
+.n-btn-loading-text[data-v-72f6f577]{
   opacity: 0.8;
   font-weight: var(--n-weight-normal);
 }
 
-.n-btn-content[data-v-76573beb]{
+.n-btn-content[data-v-72f6f577]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-2);
 }
 
 @keyframes n-spin {
-from[data-v-76573beb]{ transform: rotate(0deg); }
-to[data-v-76573beb]{ transform: rotate(360deg); }
+from[data-v-72f6f577]{ transform: rotate(0deg); }
+to[data-v-72f6f577]{ transform: rotate(360deg); }
 }
 
 /* Ripple */
-.n-btn-ripple[data-v-76573beb]{
+.n-btn-ripple[data-v-72f6f577]{
   position: absolute;
   border-radius: var(--n-radius-full);
-  background: rgba(255, 255, 255, 0.35);
+  background: var(--n-color-glass);
   width: 20px;
   height: 20px;
   margin-left: -10px;
@@ -277,7 +277,7 @@ to[data-v-76573beb]{ transform: rotate(360deg); }
 }
 
 @keyframes n-ripple {
-from[data-v-76573beb]{ transform: scale(0); opacity: 1; }
-to[data-v-76573beb]{ transform: scale(8); opacity: 0; }
+from[data-v-72f6f577]{ transform: scale(0); opacity: 1; }
+to[data-v-72f6f577]{ transform: scale(8); opacity: 0; }
 }`
-injectStyle('data-v-76573beb', __style)
+injectStyle('data-v-72f6f577', __style)

package/dist/components/NButton.nexa

@@ -46,6 +46,7 @@ const btnClass = computed(() => {
     :class="btnClass.value"
     :type="type"
     :disabled="disabled || loading"
+    :aria-busy="loading ? 'true' : undefined"
     @click="handleClick"
   >
     <span v-if="loading" class="n-btn-loader"></span>
@@ -123,11 +124,11 @@ const btnClass = computed(() => {
 .n-btn-success {
   background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
+  box-shadow: var(--n-shadow-glow-success);
 }
 .n-btn-success:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
+  box-shadow: var(--n-shadow-glow-success);
 }
 .n-btn-success:active:not(:disabled) {
   transform: translateY(0) scale(0.97);
@@ -137,11 +138,11 @@ const btnClass = computed(() => {
 .n-btn-warning {
   background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
+  box-shadow: var(--n-shadow-glow-warning);
 }
 .n-btn-warning:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
+  box-shadow: var(--n-shadow-glow-warning);
 }
 .n-btn-warning:active:not(:disabled) {
   transform: translateY(0) scale(0.97);
@@ -151,11 +152,11 @@ const btnClass = computed(() => {
 .n-btn-info {
   background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
+  box-shadow: var(--n-shadow-glow-info);
 }
 .n-btn-info:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
+  box-shadow: var(--n-shadow-glow-info);
 }
 .n-btn-info:active:not(:disabled) {
   transform: translateY(0) scale(0.97);
@@ -165,11 +166,11 @@ const btnClass = computed(() => {
 .n-btn-danger {
   background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
   color: white;
-  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.3);
+  box-shadow: var(--n-shadow-glow-danger);
 }
 .n-btn-danger:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
+  box-shadow: var(--n-shadow-glow-danger);
 }
 .n-btn-danger:active:not(:disabled) {
   transform: translateY(0) scale(0.97);
@@ -258,7 +259,7 @@ const btnClass = computed(() => {
 .n-btn-ripple {
   position: absolute;
   border-radius: var(--n-radius-full);
-  background: rgba(255, 255, 255, 0.35);
+  background: var(--n-color-glass);
   width: 20px;
   height: 20px;
   margin-left: -10px;

package/dist/components/NCard.js

@@ -123,7 +123,7 @@ const __style = `.n-card[data-v-28bb4c76]{
 
 .n-card-footer[data-v-28bb4c76]{
   padding: var(--n-space-4) var(--n-space-6);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--n-color-glass);
   border-top: 1px solid var(--n-color-border);
   margin-top: auto;
 }`

package/dist/components/NCard.nexa

@@ -102,7 +102,7 @@ const props = defineProps({
 
 .n-card-footer {
   padding: var(--n-space-4) var(--n-space-6);
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--n-color-glass);
   border-top: 1px solid var(--n-color-border);
   margin-top: auto;
 }

package/dist/components/NCheckbox.js

@@ -1,7 +1,7 @@
 import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-761e94fe',
+  __scopeId: 'data-v-1e350f9a',
   __hmrId: 'NCheckbox_nexa',
   props: {
   modelValue: { type: Boolean, default: false },
@@ -22,29 +22,33 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { toggle, $slots, emit, modelValue, label, disabled, indeterminate, Fragment: _ntc_Fragment } = ctx
-    return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-761e94fe": "" }, [
+    return h('label', { class: ["n-checkbox", { 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }], "data-v-1e350f9a": "" }, [
         "\n    ",
-        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-761e94fe": "" }, [
+        h('div', { class: "n-checkbox-box", onClick: toggle, "data-v-1e350f9a": "" }, [
         "\n      ",
-        h('span', { class: "n-checkbox-icon", "data-v-761e94fe": "" }, [
+        h('span', { class: "n-checkbox-icon", "data-v-1e350f9a": "" }, [
         "\n        ",
-        indeterminate ? '–' : '✓',
+        (indeterminate) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", focusable: "false", "aria-hidden": "true", "data-v-1e350f9a": "" }, [
+        h('line', { x1: "4", y1: "12", x2: "20", y2: "12", "data-v-1e350f9a": "" })
+      ]) : (true) ? h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-1e350f9a": "" }, [
+        h('path', { d: "M20 6L9 17l-5-5", "data-v-1e350f9a": "" })
+      ]) : null,
         "\n      "
       ]),
         "\n    "
       ]),
         "\n    ",
-        (label) ? h('span', { class: "n-checkbox-label", "data-v-761e94fe": "" }, [
+        (label) ? h('span', { class: "n-checkbox-label", "data-v-1e350f9a": "" }, [
         label
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-761e94fe'
+_sfc_main.__scopeId = 'data-v-1e350f9a'
 _sfc_main.__hmrId = 'NCheckbox_nexa'
 
 export default _sfc_main
 
-const __style = `.n-checkbox[data-v-761e94fe]{
+const __style = `.n-checkbox[data-v-1e350f9a]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-3);
@@ -52,7 +56,7 @@ const __style = `.n-checkbox[data-v-761e94fe]{
   user-select: none;
 }
 
-.n-checkbox-box[data-v-761e94fe]{
+.n-checkbox-box[data-v-1e350f9a]{
   width: 20px;
   height: 20px;
   border: 2px solid var(--n-color-border);
@@ -65,17 +69,17 @@ const __style = `.n-checkbox[data-v-761e94fe]{
   background: transparent;
 }
 
-.is-checked .n-checkbox-box[data-v-761e94fe]{
+.is-checked .n-checkbox-box[data-v-1e350f9a]{
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
 }
 
-.is-indeterminate .n-checkbox-box[data-v-761e94fe]{
+.is-indeterminate .n-checkbox-box[data-v-1e350f9a]{
   background: var(--n-color-primary);
   border-color: var(--n-color-primary);
 }
 
-.n-checkbox-icon[data-v-761e94fe]{
+.n-checkbox-icon[data-v-1e350f9a]{
   color: white;
   font-size: 12px;
   font-weight: var(--n-weight-bold);
@@ -85,24 +89,24 @@ const __style = `.n-checkbox[data-v-761e94fe]{
   transition: all var(--n-transition-fast);
 }
 
-.is-checked .n-checkbox-icon[data-v-761e94fe], 
-.is-indeterminate .n-checkbox-icon[data-v-761e94fe]{
+.is-checked .n-checkbox-icon[data-v-1e350f9a], 
+.is-indeterminate .n-checkbox-icon[data-v-1e350f9a]{
   opacity: 1;
   transform: scale(1);
 }
 
-.n-checkbox-label[data-v-761e94fe]{
+.n-checkbox-label[data-v-1e350f9a]{
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
 
-.is-disabled[data-v-761e94fe]{
+.is-disabled[data-v-1e350f9a]{
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.n-checkbox[data-v-761e94fe]:hover:not(.is-disabled) .n-checkbox-box{
+.n-checkbox[data-v-1e350f9a]:hover:not(.is-disabled) .n-checkbox-box{
   border-color: var(--n-color-primary);
 }`
-injectStyle('data-v-761e94fe', __style)
+injectStyle('data-v-1e350f9a', __style)

package/dist/components/NCheckbox.nexa

@@ -18,7 +18,8 @@ const toggle = () => {
   <label class="n-checkbox" :class="{ 'is-checked': modelValue && !indeterminate, 'is-indeterminate': indeterminate, 'is-disabled': disabled }">
     <div class="n-checkbox-box" @click="toggle">
       <span class="n-checkbox-icon">
-        {{ indeterminate ? '–' : '✓' }}
+        <svg v-if="indeterminate" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" focusable="false" aria-hidden="true"><line x1="4" y1="12" x2="20" y2="12"/></svg>
+        <svg v-else viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
       </span>
     </div>
     <span v-if="label" class="n-checkbox-label">{{ label }}</span>

package/dist/components/NChips.js

@@ -1,7 +1,7 @@
 import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-606f06fb',
+  __scopeId: 'data-v-205b217',
   __hmrId: 'NChips_nexa',
   props: {
   modelValue: { type: Array, default: () => [] },
@@ -46,27 +46,30 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { resolvedModel, normalize, chips, removeAt, $slots, emit, modelValue, removable, disabled, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: ["n-chips", { 'is-disabled': disabled }], "data-v-606f06fb": "" }, [
+    return h('div', { class: ["n-chips", { 'is-disabled': disabled }], "data-v-205b217": "" }, [
         "\n    ",
         (chips.value).map((chip, i) =>
-        h('div', { class: "n-chip", key: String(chip.value) + ':' + i, "data-v-606f06fb": "" }, [
+        h('div', { class: "n-chip", key: String(chip.value) + ':' + i, "data-v-205b217": "" }, [
         "\n      ",
-        h('span', { class: "n-chip-label", "data-v-606f06fb": "" }, [
+        h('span', { class: "n-chip-label", "data-v-205b217": "" }, [
         chip.label
       ]),
         "\n      ",
-        (removable) ? h('button', { class: "n-chip-remove", type: "button", disabled: disabled, "aria-label": "Remove", onClick: ($event) => { removeAt(i) }, "data-v-606f06fb": "" }, [
-        "✕"
+        (removable) ? h('button', { class: "n-chip-remove", type: "button", disabled: disabled, "aria-label": "Remove", onClick: ($event) => { removeAt(i) }, "data-v-205b217": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-205b217": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-205b217": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-205b217": "" })
+      ])
       ]) : null
       ])
       ),
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-606f06fb'
+_sfc_main.__scopeId = 'data-v-205b217'
 _sfc_main.__hmrId = 'NChips_nexa'
 
 export default _sfc_main
 
-const __style = `.n-chips[data-v-606f06fb]{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center}.n-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.5rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-xs);line-height:1}.n-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;border-radius:var(--n-radius-sm);line-height:1;display:flex;align-items:center}.n-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6}`
-injectStyle('data-v-606f06fb', __style)
+const __style = `.n-chips[data-v-205b217]{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center}.n-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.5rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-xs);line-height:1}.n-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;border-radius:var(--n-radius-sm);line-height:1;display:flex;align-items:center}.n-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6}`
+injectStyle('data-v-205b217', __style)

package/dist/components/NChips.nexa

@@ -47,7 +47,7 @@ const removeAt = (index) => {
   <div class="n-chips" :class="{ 'is-disabled': disabled }">
     <div v-for="(chip, i) in chips.value" :key="String(chip.value) + ':' + i" class="n-chip">
       <span class="n-chip-label">{{ chip.label }}</span>
-      <button v-if="removable" type="button" class="n-chip-remove" :disabled="disabled" aria-label="Remove" @click="removeAt(i)">✕</button>
+      <button v-if="removable" type="button" class="n-chip-remove" :disabled="disabled" aria-label="Remove" @click="removeAt(i)"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
     </div>
   </div>
 </template>