nexa-ui-kit 0.10.0 → 0.11.0

package/dist/components/NRadio.js

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

package/dist/components/NScrollView.js

@@ -1,4 +1,4 @@
-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-7469d561',

package/dist/components/NSelect.js

@@ -1,8 +1,8 @@
-import { signal, computed, onBeforeUnmount, h, hText, effect, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { signal, computed, onBeforeUnmount, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-fef169b',
+  __scopeId: 'data-v-2dd8d436',
   __hmrId: 'NSelect_nexa',
   props: {
   modelValue: { type: [String, Number], default: '' },
@@ -175,49 +175,54 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { isOpen, query, focusedIndex, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, filteredOptions, selectedOption, close, open, toggle, select, clear, handleKeydown, getFlatOptions, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, searchable, clearable, placement, appendTo, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h('div', { class: ["n-select", { 'is-open': isOpen.value, 'is-disabled': disabled }], "data-select-root": instanceId, "data-v-fef169b": "" }, [
+    return h('div', { class: ["n-select", { 'is-open': isOpen.value, 'is-disabled': disabled }], "data-select-root": instanceId, "data-v-2dd8d436": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-select-label", "data-v-fef169b": "" }, [
+        (label) ? h('label', { class: "n-select-label", "data-v-2dd8d436": "" }, [
         label
       ]) : null,
-        h('div', { class: "n-select-trigger", onClick: toggle, onKeydown: handleKeydown, tabindex: "0", role: "combobox", "aria-expanded": isOpen.value, "data-v-fef169b": "" }, [
+        h('div', { class: "n-select-trigger", onClick: toggle, onKeydown: handleKeydown, tabindex: "0", role: "combobox", "aria-expanded": isOpen.value, "data-v-2dd8d436": "" }, [
         "\n      ",
-        (selectedOption.value) ? h('span', { class: "n-select-value", "data-v-fef169b": "" }, [
+        (selectedOption.value) ? h('span', { class: "n-select-value", "data-v-2dd8d436": "" }, [
         "\n        ",
         selectedOption.value.label,
         "\n      "
-      ]) : (true) ? h('span', { class: "n-select-placeholder", "data-v-fef169b": "" }, [
+      ]) : (true) ? h('span', { class: "n-select-placeholder", "data-v-2dd8d436": "" }, [
         "\n        ",
         placeholder,
         "\n      "
       ]) : null,
         "\n      ",
-        h('div', { class: "n-select-trigger-actions", "data-v-fef169b": "" }, [
+        h('div', { class: "n-select-trigger-actions", "data-v-2dd8d436": "" }, [
         "\n        ",
-        (clearable && modelValue) ? h('button', { class: "n-select-clear", type: "button", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, tabindex: "-1", "data-v-fef169b": "" }, [
-        "✕"
+        (clearable && modelValue) ? h('button', { class: "n-select-clear", type: "button", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, tabindex: "-1", "aria-label": "Clear", "data-v-2dd8d436": "" }, [
+        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-2dd8d436": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-2dd8d436": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-2dd8d436": "" })
+      ])
       ]) : null,
-        h('span', { class: "n-select-arrow", "data-v-fef169b": "" }, [
-        "▾"
+        h('span', { class: "n-select-arrow", "data-v-2dd8d436": "" }, [
+        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-2dd8d436": "" }, [
+        h('path', { d: "M6 9l6 6 6-6", "data-v-2dd8d436": "" })
+      ])
       ]),
         "\n      "
       ]),
         "\n    "
       ]),
         "\n    ",
-        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-select-dropdown", "data-v-fef169b": "" }, [
+        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-select-dropdown", "data-v-2dd8d436": "" }, [
         "\n      ",
-        (searchable) ? h('div', { class: "n-select-search", "data-v-fef169b": "" }, [
+        (searchable) ? h('div', { class: "n-select-search", "data-v-2dd8d436": "" }, [
         "\n        ",
-        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-fef169b": "" }),
+        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-2dd8d436": "" }),
         "\n      "
       ]) : null,
-        h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
+        h('div', { class: "n-select-options", "data-v-2dd8d436": "" }, [
         "\n        ",
         (filteredOptions.value).map((item, i) =>
-        h('div', { key: i, "data-v-fef169b": "" }, [
+        h('div', { key: i, "data-v-2dd8d436": "" }, [
         "\n          ",
-        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
+        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-2dd8d436": "" }, [
         item.group
       ]) : null,
         ('items' in item ? item.items : [item]).map((opt, index) =>
@@ -225,7 +230,7 @@ _sfc_main.render = function(ctx) {
               'is-selected': opt.value === modelValue,
               'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
               'is-disabled': opt.disabled
-            }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-fef169b": "" }, [
+            }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-2dd8d436": "" }, [
         "\n            ",
         opt.label,
         "\n          "
@@ -235,27 +240,27 @@ _sfc_main.render = function(ctx) {
       ])
       ),
         "\n        ",
-        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-fef169b": "" }, [
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-2dd8d436": "" }, [
         "\n          No options available\n        "
       ]) : null
       ]),
         "\n    "
       ]) : null,
-        h(_ntc_Teleport, { to: "body", "data-v-fef169b": "" }, [
+        h(_ntc_Teleport, { to: "body", "data-v-2dd8d436": "" }, [
         "\n      ",
-        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-select-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-select-popup": instanceId, style: popupStyle.value, "data-v-fef169b": "" }, [
+        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-select-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-select-popup": instanceId, style: popupStyle.value, "data-v-2dd8d436": "" }, [
         "\n        ",
-        (searchable) ? h('div', { class: "n-select-search", "data-v-fef169b": "" }, [
+        (searchable) ? h('div', { class: "n-select-search", "data-v-2dd8d436": "" }, [
         "\n          ",
-        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-fef169b": "" }),
+        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-2dd8d436": "" }),
         "\n        "
       ]) : null,
-        h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
+        h('div', { class: "n-select-options", "data-v-2dd8d436": "" }, [
         "\n          ",
         (filteredOptions.value).map((item, i) =>
-        h('div', { key: i, "data-v-fef169b": "" }, [
+        h('div', { key: i, "data-v-2dd8d436": "" }, [
         "\n            ",
-        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
+        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-2dd8d436": "" }, [
         item.group
       ]) : null,
         ('items' in item ? item.items : [item]).map((opt, index) =>
@@ -263,7 +268,7 @@ _sfc_main.render = function(ctx) {
                 'is-selected': opt.value === modelValue,
                 'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
                 'is-disabled': opt.disabled
-              }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-fef169b": "" }, [
+              }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-2dd8d436": "" }, [
         "\n              ",
         opt.label,
         "\n            "
@@ -273,7 +278,7 @@ _sfc_main.render = function(ctx) {
       ])
       ),
         "\n          ",
-        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-fef169b": "" }, [
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-2dd8d436": "" }, [
         "\n            No options available\n          "
       ]) : null
       ]),
@@ -283,18 +288,18 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-fef169b'
+_sfc_main.__scopeId = 'data-v-2dd8d436'
 _sfc_main.__hmrId = 'NSelect_nexa'
 
 export default _sfc_main
 
-const __style = `.n-select[data-v-fef169b]{
+const __style = `.n-select[data-v-2dd8d436]{
   position: relative;
   width: 100%;
   font-family: var(--n-font-sans);
 }
 
-.n-select-label[data-v-fef169b]{
+.n-select-label[data-v-2dd8d436]{
   display: block;
   font-size: var(--n-text-sm);
   font-weight: var(--n-weight-medium);
@@ -302,7 +307,7 @@ const __style = `.n-select[data-v-fef169b]{
   margin-bottom: var(--n-space-2);
 }
 
-.n-select-trigger[data-v-fef169b]{
+.n-select-trigger[data-v-2dd8d436]{
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-md);
@@ -316,32 +321,32 @@ const __style = `.n-select[data-v-fef169b]{
   gap: var(--n-space-2);
 }
 
-.n-select-trigger[data-v-fef169b]:focus-visible{
+.n-select-trigger[data-v-2dd8d436]:focus-visible{
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light);
 }
 
-.n-select[data-v-fef169b]:hover .n-select-trigger:not(.is-disabled){
+.n-select[data-v-2dd8d436]:hover .n-select-trigger:not(.is-disabled){
   border-color: var(--n-color-border-hover);
 }
 
-.n-select.is-open .n-select-trigger[data-v-fef169b]{
+.n-select.is-open .n-select-trigger[data-v-2dd8d436]{
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light);
 }
 
-.n-select-placeholder[data-v-fef169b]{
+.n-select-placeholder[data-v-2dd8d436]{
   color: var(--n-color-text-muted);
 }
 
-.n-select-trigger-actions[data-v-fef169b]{
+.n-select-trigger-actions[data-v-2dd8d436]{
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
 
-.n-select-clear[data-v-fef169b]{
+.n-select-clear[data-v-2dd8d436]{
   background: transparent;
   border: none;
   color: var(--n-color-text-muted);
@@ -352,21 +357,21 @@ const __style = `.n-select[data-v-fef169b]{
   line-height: 1;
 }
 
-.n-select-clear[data-v-fef169b]:hover{
+.n-select-clear[data-v-2dd8d436]:hover{
   color: var(--n-color-text);
 }
 
-.n-select-arrow[data-v-fef169b]{
+.n-select-arrow[data-v-2dd8d436]{
   color: var(--n-color-text-muted);
   transition: transform var(--n-transition-fast);
   font-size: var(--n-text-xs);
 }
 
-.is-open .n-select-arrow[data-v-fef169b]{
+.is-open .n-select-arrow[data-v-2dd8d436]{
   transform: rotate(180deg);
 }
 
-.n-select-dropdown[data-v-fef169b]{
+.n-select-dropdown[data-v-2dd8d436]{
   position: absolute;
   top: calc(100% + 0.5rem);
   left: 0;
@@ -377,29 +382,29 @@ const __style = `.n-select[data-v-fef169b]{
   box-shadow: var(--n-shadow-lg);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+  animation: n-dropdown-in 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in {
-from[data-v-fef169b]{ opacity: 0; transform: translateY(-8px); }
-to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
+from[data-v-2dd8d436]{ opacity: 0; transform: translateY(-8px); }
+to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0); }
 }
 
-.n-select-dropdown.is-top[data-v-fef169b]{
-  animation: n-dropdown-in-top 0.2s cubic-bezier(0, 1, 0, 1);
+.n-select-dropdown.is-top[data-v-2dd8d436]{
+  animation: n-dropdown-in-top 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in-top {
-from[data-v-fef169b]{ opacity: 0; transform: translateY(8px); }
-to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
+from[data-v-2dd8d436]{ opacity: 0; transform: translateY(8px); }
+to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0); }
 }
 
-.n-select-search[data-v-fef169b]{
+.n-select-search[data-v-2dd8d436]{
   padding: var(--n-space-2);
   border-bottom: 1px solid var(--n-color-border);
 }
 
-.n-select-search-input[data-v-fef169b]{
+.n-select-search-input[data-v-2dd8d436]{
   width: 100%;
   background: var(--n-color-bg);
   border: 1px solid var(--n-color-border);
@@ -411,16 +416,16 @@ to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
   font-family: inherit;
 }
 
-.n-select-search-input[data-v-fef169b]:focus{
+.n-select-search-input[data-v-2dd8d436]:focus{
   border-color: var(--n-color-primary);
 }
 
-.n-select-options[data-v-fef169b]{
+.n-select-options[data-v-2dd8d436]{
   max-height: 250px;
   overflow-y: auto;
 }
 
-.n-select-group-label[data-v-fef169b]{
+.n-select-group-label[data-v-2dd8d436]{
   padding: var(--n-space-2) var(--n-space-3);
   font-size: var(--n-text-xs);
   font-weight: var(--n-weight-bold);
@@ -430,39 +435,39 @@ to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
   background: var(--n-color-bg);
 }
 
-.n-select-option[data-v-fef169b]{
+.n-select-option[data-v-2dd8d436]{
   padding: 0.7rem 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
   transition: all var(--n-transition-fast);
 }
 
-.n-select-option[data-v-fef169b]:hover, 
-.n-select-option.is-focused[data-v-fef169b]{
+.n-select-option[data-v-2dd8d436]:hover, 
+.n-select-option.is-focused[data-v-2dd8d436]{
   background: var(--n-color-glass);
   color: var(--n-color-text);
 }
 
-.n-select-option.is-selected[data-v-fef169b]{
+.n-select-option.is-selected[data-v-2dd8d436]{
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
 
-.n-select-option.is-disabled[data-v-fef169b]{
+.n-select-option.is-disabled[data-v-2dd8d436]{
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-.n-select-empty[data-v-fef169b]{
+.n-select-empty[data-v-2dd8d436]{
   padding: var(--n-space-4);
   color: var(--n-color-text-muted);
   text-align: center;
   font-size: var(--n-text-sm);
 }
 
-.is-disabled .n-select-trigger[data-v-fef169b]{
+.is-disabled .n-select-trigger[data-v-2dd8d436]{
   opacity: 0.5;
   cursor: not-allowed;
 }`
-injectStyle('data-v-fef169b', __style)
+injectStyle('data-v-2dd8d436', __style)

package/dist/components/NSelect.nexa

@@ -200,8 +200,8 @@ onBeforeUnmount(() => {
         {{ placeholder }}
       </span>
       <div class="n-select-trigger-actions">
-        <button v-if="clearable && modelValue" type="button" class="n-select-clear" @click.stop="clear" tabindex="-1">✕</button>
-        <span class="n-select-arrow">▾</span>
+        <button v-if="clearable && modelValue" type="button" class="n-select-clear" @click.stop="clear" tabindex="-1" 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-select-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-select-dropdown">
@@ -361,7 +361,7 @@ onBeforeUnmount(() => {
   box-shadow: var(--n-shadow-lg);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+  animation: n-dropdown-in 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in {
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
 }
 
 .n-select-dropdown.is-top {
-  animation: n-dropdown-in-top 0.2s cubic-bezier(0, 1, 0, 1);
+  animation: n-dropdown-in-top 0.2s ease-out;
 }
 
 @keyframes n-dropdown-in-top {

package/dist/components/NSkeleton.js

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

package/dist/components/NSwitch.js

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

package/dist/components/NTabs.js

@@ -1,4 +1,4 @@
-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-339e5ee5',

package/dist/components/NTag.js

@@ -1,7 +1,7 @@
-import { h, hText, effect, signal, computed, onMounted, onUnmounted, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-4d63a958',
+  __scopeId: 'data-v-15b3bf49',
   __hmrId: 'NTag_nexa',
   props: {
   variant: { type: String, default: 'primary' },
@@ -18,21 +18,24 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { $slots, emit, variant, size, closable, rounded, Fragment: _ntc_Fragment } = ctx
-    return h('span', { class: ['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : ''], "data-v-4d63a958": "" }, [
+    return h('span', { class: ['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : ''], "data-v-15b3bf49": "" }, [
         "\n    ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n    ",
-        (closable) ? h('button', { class: "n-tag-close", onClick: ($event) => { emit('close') }, "data-v-4d63a958": "" }, [
-        "×"
+        (closable) ? h('button', { class: "n-tag-close", onClick: ($event) => { emit('close') }, "aria-label": "Close", "data-v-15b3bf49": "" }, [
+        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-15b3bf49": "" }, [
+        h('path', { d: "M18 6L6 18", "data-v-15b3bf49": "" }),
+        h('path', { d: "M6 6l12 12", "data-v-15b3bf49": "" })
+      ])
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-4d63a958'
+_sfc_main.__scopeId = 'data-v-15b3bf49'
 _sfc_main.__hmrId = 'NTag_nexa'
 
 export default _sfc_main
 
-const __style = `.n-tag[data-v-4d63a958]{
+const __style = `.n-tag[data-v-15b3bf49]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-1);
@@ -46,50 +49,50 @@ const __style = `.n-tag[data-v-4d63a958]{
   border: 1px solid transparent;
 }
 
-.n-tag.is-rounded[data-v-4d63a958]{
+.n-tag.is-rounded[data-v-15b3bf49]{
   border-radius: var(--n-radius-full);
 }
 
-.n-tag-sm[data-v-4d63a958]{ padding: 0.1rem 0.4rem; font-size: 0.65rem; }
-.n-tag-lg[data-v-4d63a958]{ padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
+.n-tag-sm[data-v-15b3bf49]{ padding: 0.1rem 0.4rem; font-size: 0.65rem; }
+.n-tag-lg[data-v-15b3bf49]{ padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
 
-.n-tag-primary[data-v-4d63a958]{
+.n-tag-primary[data-v-15b3bf49]{
   background: var(--n-color-primary-light);
-  border-color: rgba(59, 130, 246, 0.25);
+  border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
 
-.n-tag-success[data-v-4d63a958]{
+.n-tag-success[data-v-15b3bf49]{
   background: var(--n-color-success-light);
-  border-color: rgba(16, 185, 129, 0.25);
+  border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
 
-.n-tag-danger[data-v-4d63a958]{
+.n-tag-danger[data-v-15b3bf49]{
   background: var(--n-color-danger-light);
-  border-color: rgba(239, 68, 68, 0.25);
+  border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
 
-.n-tag-warning[data-v-4d63a958]{
+.n-tag-warning[data-v-15b3bf49]{
   background: var(--n-color-warning-light);
-  border-color: rgba(245, 158, 11, 0.25);
+  border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
 
-.n-tag-info[data-v-4d63a958]{
+.n-tag-info[data-v-15b3bf49]{
   background: var(--n-color-info-light);
-  border-color: rgba(6, 182, 212, 0.25);
+  border-color: var(--n-color-info-border);
   color: var(--n-color-info);
 }
 
-.n-tag-secondary[data-v-4d63a958]{
+.n-tag-secondary[data-v-15b3bf49]{
   background: var(--n-color-surface-alt);
   border-color: var(--n-color-border);
   color: var(--n-color-text-secondary);
 }
 
-.n-tag-close[data-v-4d63a958]{
+.n-tag-close[data-v-15b3bf49]{
   background: transparent;
   border: none;
   cursor: pointer;
@@ -102,7 +105,7 @@ const __style = `.n-tag[data-v-4d63a958]{
   transition: opacity var(--n-transition-fast);
 }
 
-.n-tag-close[data-v-4d63a958]:hover{
+.n-tag-close[data-v-15b3bf49]:hover{
   opacity: 1;
 }`
-injectStyle('data-v-4d63a958', __style)
+injectStyle('data-v-15b3bf49', __style)

package/dist/components/NTag.nexa

@@ -12,7 +12,7 @@ const emit = defineEmits(['close'])
 <template>
   <span :class="['n-tag', `n-tag-${variant}`, `n-tag-${size}`, rounded ? 'is-rounded' : '']">
     <slot />
-    <button v-if="closable" class="n-tag-close" @click="emit('close')">&times;</button>
+    <button v-if="closable" class="n-tag-close" @click="emit('close')" aria-label="Close"><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>
   </span>
 </template>
 
@@ -40,31 +40,31 @@ const emit = defineEmits(['close'])
 
 .n-tag-primary {
   background: var(--n-color-primary-light);
-  border-color: rgba(59, 130, 246, 0.25);
+  border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
 
 .n-tag-success {
   background: var(--n-color-success-light);
-  border-color: rgba(16, 185, 129, 0.25);
+  border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
 
 .n-tag-danger {
   background: var(--n-color-danger-light);
-  border-color: rgba(239, 68, 68, 0.25);
+  border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
 
 .n-tag-warning {
   background: var(--n-color-warning-light);
-  border-color: rgba(245, 158, 11, 0.25);
+  border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
 
 .n-tag-info {
   background: var(--n-color-info-light);
-  border-color: rgba(6, 182, 212, 0.25);
+  border-color: var(--n-color-info-border);
   color: var(--n-color-info);
 }