nexa-ui-kit 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.10.0",
-    "nexa-mobile": "0.10.0"
+    "nexa-framework": "0.11.1",
+    "nexa-mobile": "0.11.1"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.10.0"
+    "nexa-compiler": "0.11.1"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",

package/src/components/NAlert.nexa

@@ -22,12 +22,18 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
 
 <template>
   <div v-if="visible.value" class="n-alert" :class="`is-${variant}`">
-    <span class="n-alert-icon">{{ icon || icons[variant] || 'ℹ' }}</span>
+    <span class="n-alert-icon">
+      <template v-if="icon">{{ icon }}</template>
+      <svg v-else-if="variant === 'success'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
+      <svg v-else-if="variant === 'error'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+      <svg v-else-if="variant === 'warning'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+      <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
+    </span>
     <div class="n-alert-body">
       <span v-if="title" class="n-alert-title">{{ title }}</span>
       <span class="n-alert-text"><slot /></span>
     </div>
-    <button v-if="closable" class="n-alert-close" @click="dismiss">&times;</button>
+    <button v-if="closable" class="n-alert-close" @click="dismiss" aria-label="Close"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
   </div>
 </template>
 
@@ -51,25 +57,25 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
 
 .is-info {
   background: var(--n-color-primary-light);
-  border-color: rgba(59, 130, 246, 0.2);
+  border-color: var(--n-color-primary-border);
   color: var(--n-color-primary);
 }
 
 .is-success {
   background: var(--n-color-success-light);
-  border-color: rgba(16, 185, 129, 0.2);
+  border-color: var(--n-color-success-border);
   color: var(--n-color-success);
 }
 
 .is-warning {
   background: var(--n-color-warning-light);
-  border-color: rgba(245, 158, 11, 0.2);
+  border-color: var(--n-color-warning-border);
   color: var(--n-color-warning);
 }
 
 .is-error {
   background: var(--n-color-danger-light);
-  border-color: rgba(239, 68, 68, 0.2);
+  border-color: var(--n-color-danger-border);
   color: var(--n-color-danger);
 }
 

package/src/components/NAutocomplete.nexa

@@ -37,8 +37,8 @@ onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
     <div class="n-ac-input-wrap" :class="{ 'is-disabled': disabled }">
       <input class="n-ac-input" :id="inputId" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" role="combobox" aria-autocomplete="list" :aria-expanded="isOpen.value" :aria-controls="listboxId" :aria-activedescendant="activeId.value || undefined" @input="onInput" @focus="onFocus" @keydown="onKeydown" />
       <div class="n-ac-actions">
-        <button v-if="clearable && modelValue" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clearValue">✕</button>
-        <button v-if="dropdown" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Abrir" @click="openAll">▾</button>
+        <button v-if="clearable && modelValue" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Clear" @click="clearValue"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
+        <button v-if="dropdown" type="button" class="n-ac-action" :disabled="disabled || readonly" aria-label="Open" @click="openAll"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
       </div>
     </div>
     <Teleport to="body">
@@ -54,5 +54,5 @@ onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
 </template>
 
 <style scoped>
-.n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s cubic-bezier(0,1,0,1)}.n-ac-popup.is-top{animation:n-ac-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
+.n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s ease-out}.n-ac-popup.is-top{animation:n-ac-in-top .2s ease-out}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
 </style>

package/src/components/NBottomSheet.nexa

@@ -74,7 +74,7 @@ const overlayOpacity = computed(() => {
         class="n-bottom-sheet-container"
         :style="{
           transform: `translateY(${translateY.value})`,
-          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
+          transition: isDragging.value ? 'none' : 'transform var(--n-transition-slow)'
         }"
       >
         <div class="n-bottom-sheet-handle"></div>
@@ -121,7 +121,7 @@ const overlayOpacity = computed(() => {
   background: var(--n-color-surface);
   border-top: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-2xl) var(--n-radius-2xl) 0 0;
-  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--n-shadow-top-lg);
   padding-bottom: env(safe-area-inset-bottom, 20px);
   touch-action: none;
   display: flex;

package/src/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/src/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/src/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/src/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>

package/src/components/NDataTable.nexa

@@ -1,7 +1,7 @@
 <script setup>
 import { signal, computed, effect } from 'nexa-framework'
 import NPaginator from './NPaginator.nexa'
-const props = defineProps({ value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false } })
+const props = defineProps({ value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false }, searchPlaceholder: { type: String, default: 'Search...' }, filterPlaceholder: { type: String, default: 'Filter' }, loading: { type: Boolean, default: false } })
 const emit = defineEmits(['update:first', 'update:rows', 'update:selection', 'update:sortField', 'update:sortOrder', 'update:globalFilter', 'update:filters', 'updateFirst', 'updateRows', 'updateSelection', 'updateSortField', 'updateSortOrder', 'updateGlobalFilter', 'updateFilters', 'page', 'rowSelect', 'rowUnselect', 'sort', 'filter'])
 const internalFirst = signal(props.first || 0)
 const internalRows = signal(props.rows || 10)
@@ -163,29 +163,47 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
 </script>
 
 <template>
-  <div class="n-dt" :class="[`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']">
-    <div class="n-dt-toolbar"><div class="n-dt-global"><input class="n-dt-global-input" :value="effectiveFilters.value.__global || ''" placeholder="Search..." @input="setGlobal" /></div></div>
+    <div class="n-dt" :class="[`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']" :aria-busy="loading ? 'true' : undefined">
+    <div class="n-dt-toolbar">
+      <div class="n-dt-global">
+        <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"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input class="n-dt-global-input" :value="effectiveFilters.value.__global || ''" :placeholder="searchPlaceholder" @input="setGlobal" />
+      </div>
+    </div>
     <div class="n-dt-wrapper">
       <table class="n-dt-table" :class="{ 'is-striped': stripedRows, 'is-hover': hoverRows }">
         <thead class="n-dt-thead">
           <tr class="n-dt-head-row">
-            <th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th>
+            <th v-if="selectionMode" class="n-dt-th is-selection">
+              <button v-if="selectionMode === 'multiple'" type="button" class="n-dt-selectbox" :class="{ 'is-checked': allVisibleSelected.value }" @click.stop="toggleAllVisible" :aria-label="allVisibleSelected.value ? 'Deselect all' : 'Select all'">
+                <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"><path d="M20 6L9 17l-5-5"/></svg>
+              </button>
+            </th>
             <th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick">
               <div class="n-dt-th-content">
                 <span class="n-dt-th-text">{{ $slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col) }}</span>
                 <span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }">
-                  <span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span>
-                  <span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span>
+                  <svg class="n-dt-sort-arrow n-dt-sort-arrow-up" :class="{ 'is-on': internalSortField.value === col.field && internalSortOrder.value === 1 }" 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="M12 19V5M5 12l7-7 7 7"/></svg>
+                  <svg class="n-dt-sort-arrow n-dt-sort-arrow-down" :class="{ 'is-on': internalSortField.value === col.field && internalSortOrder.value === -1 }" 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="M12 5v14M19 12l-7 7-7-7"/></svg>
                 </span>
               </div>
               <span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span>
             </th>
           </tr>
-          <tr v-if="filterDisplay === 'row'" class="n-dt-filter-row"><th v-if="selectionMode" class="n-dt-th is-selection"></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }"><input v-if="col.filterable" class="n-dt-filter" :data-field="col.field" :value="(effectiveFilters.value[col.field]?.value) || ''" placeholder="Filter" @input="onColumnFilterInput" /></th></tr>
+          <tr v-if="filterDisplay === 'row'" class="n-dt-filter-row">
+            <th v-if="selectionMode" class="n-dt-th is-selection"></th>
+            <th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">
+              <input v-if="col.filterable" class="n-dt-filter" :data-field="col.field" :value="(effectiveFilters.value[col.field]?.value) || ''" :placeholder="filterPlaceholder" @input="onColumnFilterInput" />
+            </th>
+          </tr>
         </thead>
         <tbody class="n-dt-tbody">
           <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)">
-            <td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td>
+            <td v-if="selectionMode" class="n-dt-td is-selection">
+              <button v-if="selectionMode === 'multiple'" type="button" class="n-dt-selectbox" :class="{ 'is-checked': isRowSelected(row, i + internalFirst.value) }" @click.stop="toggleRowSelection(row, i + internalFirst.value)" :aria-label="isRowSelected(row, i + internalFirst.value) ? 'Deselect row' : 'Select row'">
+                <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"><path d="M20 6L9 17l-5-5"/></svg>
+              </button>
+            </td>
             <td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">
               {{ $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value) }}
             </td>
@@ -199,5 +217,295 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
 </template>
 
 <style scoped>
-.n-dt{border:1px solid var(--n-color-border);border-radius:var(--n-radius-lg);background:var(--n-color-surface);overflow:hidden;font-family:var(--n-font-sans)}.n-dt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--n-space-3) var(--n-space-4);border-bottom:1px solid var(--n-color-border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))}.n-dt-global{display:flex;align-items:center;gap:var(--n-space-2)}.n-dt-global-input{width:280px;max-width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.55rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;box-sizing:border-box}.n-dt-global-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-dt-wrapper{width:100%;overflow:auto}.n-dt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.n-dt-thead{background:var(--n-color-surface)}.n-dt-th,.n-dt-td{padding:0.75rem 0.9rem;border-bottom:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-sm);vertical-align:middle}.n-dt-th{position:relative;overflow:hidden;background:rgba(0,0,0,.10);color:var(--n-color-text-secondary);font-weight:var(--n-weight-semibold);user-select:none}.n-dt-th.is-sortable{cursor:pointer}.n-dt-th-content{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.n-dt-sort{display:inline-flex;align-items:center;gap:0.25rem;color:var(--n-color-text-muted)}.n-dt-sort.is-active{color:var(--n-color-primary)}.n-dt-resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize}.n-dt-filter-row .n-dt-th{background:rgba(0,0,0,.06)}.n-dt-filter{width:100%;max-width:100%;display:block;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:0.35rem 0.5rem;color:var(--n-color-text);font-size:var(--n-text-xs);outline:none;box-sizing:border-box}.n-dt-filter:focus{border-color:var(--n-color-primary)}.n-dt-td{background:transparent;color:var(--n-color-text)}.n-dt-row.is-selected .n-dt-td{background:rgba(59,130,246,.12)}.n-dt-table.is-striped .n-dt-row:nth-child(even) .n-dt-td{background:rgba(0,0,0,.06)}.n-dt-table.is-hover .n-dt-row:hover .n-dt-td{background:rgba(255,255,255,.06)}.n-dt-empty{text-align:center;color:var(--n-color-text-muted);padding:1.25rem}.is-left{text-align:left}.is-right{text-align:right}.is-center{text-align:center}.is-selection{width:44px;min-width:44px;max-width:44px;text-align:center}.n-dt-selectbox{width:16px;height:16px;accent-color:var(--n-color-primary)}.n-dt-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1px solid var(--n-color-border);color:var(--n-color-primary)}.is-grid .n-dt-td,.is-grid .n-dt-th{border-right:1px solid var(--n-color-border)}.is-grid .n-dt-td:last-child,.is-grid .n-dt-th:last-child{border-right:none}.n-dt-sm .n-dt-th,.n-dt-sm .n-dt-td{padding:0.55rem 0.7rem}.n-dt-lg .n-dt-th,.n-dt-lg .n-dt-td{padding:0.9rem 1rem}
-</style>
+.n-dt {
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-lg);
+  background: var(--n-color-surface);
+  overflow: hidden;
+  font-family: var(--n-font-sans);
+}
+
+.n-dt.is-grid {
+  border-color: var(--n-color-border);
+}
+
+.n-dt.is-grid .n-dt-th,
+.n-dt.is-grid .n-dt-td {
+  border: 1px solid var(--n-color-border);
+}
+
+.n-dt-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-dt-global {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--n-color-text-muted);
+}
+
+.n-dt-global-input {
+  width: 260px;
+  max-width: 100%;
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  padding: 0.45rem 0.75rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+
+.n-dt-global-input:focus {
+  border-color: var(--n-color-primary);
+}
+
+.n-dt-wrapper {
+  width: 100%;
+  overflow: auto;
+}
+
+.n-dt-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.n-dt-thead {
+  background: var(--n-color-surface);
+}
+
+.n-dt-th {
+  position: relative;
+  padding: 0.65rem 0.85rem;
+  border-bottom: 2px solid var(--n-color-border);
+  color: var(--n-color-text-secondary);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-semibold);
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  background: var(--n-color-surface);
+  transition: background 0.15s ease;
+}
+
+.n-dt-th.is-sortable {
+  cursor: pointer;
+}
+
+.n-dt-th.is-sortable:hover {
+  background: var(--n-color-glass);
+}
+
+.n-dt-th.is-right {
+  text-align: right;
+}
+
+.n-dt-th.is-center {
+  text-align: center;
+}
+
+.n-dt-th.is-selection {
+  width: 3rem;
+  text-align: center;
+}
+
+.n-dt-th-content {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.n-dt-th.is-right .n-dt-th-content {
+  justify-content: flex-end;
+}
+
+.n-dt-th.is-center .n-dt-th-content {
+  justify-content: center;
+}
+
+.n-dt-th-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.n-dt-sort {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  line-height: 1;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.n-dt-sort-arrow {
+  display: block;
+  color: var(--n-color-border);
+  transition: color 0.15s ease;
+  margin: -3px 0;
+}
+
+.n-dt-sort-arrow-up.is-on {
+  color: var(--n-color-primary);
+}
+
+.n-dt-sort-arrow-down.is-on {
+  color: var(--n-color-primary);
+}
+
+.n-dt-th.is-sortable:hover .n-dt-sort-arrow {
+  color: var(--n-color-text-muted);
+}
+
+.n-dt-resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+.n-dt-resizer:hover {
+  background: var(--n-color-primary);
+  opacity: 0.4;
+}
+
+.n-dt-filter-row .n-dt-th {
+  border-bottom: 1px solid var(--n-color-border);
+  padding: 0.5rem 0.6rem;
+  background: var(--n-color-surface);
+}
+
+.n-dt-filter {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  padding: 0.3rem 0.45rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-xs);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+
+.n-dt-filter:focus {
+  border-color: var(--n-color-primary);
+}
+
+.n-dt-tbody .n-dt-row {
+  transition: background 0.15s ease;
+}
+
+.n-dt-tbody .n-dt-row.is-hover:hover {
+  background: var(--n-color-glass);
+}
+
+.n-dt-tbody .n-dt-row.is-selected {
+  background: var(--n-color-primary-light);
+  outline: none;
+}
+
+.n-dt-tbody .n-dt-row.is-hover.is-selected:hover {
+  background: var(--n-color-primary-light);
+  filter: brightness(0.96);
+}
+
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even) {
+  background: var(--n-color-glass);
+}
+
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-selected {
+  background: var(--n-color-primary-light);
+}
+
+.n-dt-td {
+  padding: 0.6rem 0.85rem;
+  border-bottom: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  vertical-align: middle;
+  text-align: left;
+}
+
+.n-dt-td.is-right {
+  text-align: right;
+}
+
+.n-dt-td.is-center {
+  text-align: center;
+}
+
+.n-dt-td.is-selection {
+  width: 3rem;
+  text-align: center;
+}
+
+.n-dt-selectbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all 0.15s ease;
+  color: transparent;
+}
+
+.n-dt-selectbox.is-checked {
+  background: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+  color: white;
+}
+
+.n-dt-selectbox:hover:not(.is-checked) {
+  border-color: var(--n-color-primary);
+}
+
+.n-dt-selectbox svg {
+  display: block;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.n-dt-selectbox.is-checked svg {
+  opacity: 1;
+}
+
+.n-dt-empty-row .n-dt-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+}
+
+.n-dt-sm .n-dt-th,
+.n-dt-sm .n-dt-td {
+  padding: 0.4rem 0.6rem;
+  font-size: var(--n-text-xs);
+}
+
+.n-dt-lg .n-dt-th,
+.n-dt-lg .n-dt-td {
+  padding: 0.85rem 1rem;
+  font-size: var(--n-text-base);
+}
+</style>

package/src/components/NDatepicker.nexa

@@ -196,15 +196,15 @@ onBeforeUnmount(() => {
         :disabled="disabled"
         readonly
       />
-      <span class="n-datepicker-icon">📅</span>
+      <span class="n-datepicker-icon"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></span>
     </div>
 
     <Teleport to="body">
       <div v-if="isOpen.value" class="n-datepicker-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-datepicker-popup="instanceId" :style="popupStyle.value">
         <div class="n-datepicker-header">
-          <button type="button" class="n-datepicker-nav" @click="prevMonth">‹</button>
+          <button type="button" class="n-datepicker-nav" @click="prevMonth" aria-label="Previous month"><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="M15 18l-6-6 6-6"/></svg></button>
           <span class="n-datepicker-title">{{ monthNames[month.value] }} {{ year.value }}</span>
-          <button type="button" class="n-datepicker-nav" @click="nextMonth">›</button>
+          <button type="button" class="n-datepicker-nav" @click="nextMonth" aria-label="Next month"><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="M9 18l6-6-6-6"/></svg></button>
         </div>
 
         <div class="n-datepicker-grid">

package/src/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>