nexa-ui-kit 0.9.0 → 0.11.0

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>

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

package/src/components/NMultiSelect.nexa

@@ -65,10 +65,10 @@ onBeforeUnmount(() => close())
     <div class="n-ms-trigger" role="combobox" tabindex="0" :aria-expanded="isOpen.value" @click="toggleOpen" @keydown="onKeydown">
       <div v-if="selectedLabels.value.length > 0" class="n-ms-chips"><div v-for="c in selectedLabels.value.slice(0, maxChips)" :key="String(c.value)" class="n-ms-chip"><span class="n-ms-chip-label">{{ c.label }}</span><button type="button" class="n-ms-chip-remove" aria-label="Remove" tabindex="-1" :disabled="effectiveDisabled.value" @click="removeChip(c.value, $event)">✕</button></div><span v-if="selectedLabels.value.length > maxChips" class="n-ms-more">+{{ selectedLabels.value.length - maxChips }}</span></div>
       <span v-else class="n-ms-placeholder">{{ placeholder }}</span>
-      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear">✕</button><span class="n-ms-arrow">▾</span></div>
+      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear" aria-label="Clear"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button><span class="n-ms-arrow"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></span></div>
     </div>
-    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
-    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
+    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check"><svg v-if="selectedSet.value.has(opt.value)" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg></span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
   </div>
 </template>
 

package/src/components/NPaginator.nexa

@@ -58,11 +58,11 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
       <span class="n-paginator-report">{{ start.value }}-{{ end.value }} of {{ totalRecords }}</span>
     </div>
     <div class="n-paginator-center">
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage">«</button>
-      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev">‹</button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage" aria-label="First page"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev" aria-label="Previous page"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg></button>
       <span class="n-pg-page">{{ page.value + 1 }} / {{ pageCount.value }}</span>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next">›</button>
-      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage">»</button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next" aria-label="Next page"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg></button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage" aria-label="Last page"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg></button>
     </div>
     <div class="n-paginator-right">
       <select class="n-pg-select" :value="rows" @change="changeRows">