nexa-ui-kit 0.10.0 → 0.11.0

package/dist/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/dist/components/NDatepicker.js

@@ -1,9 +1,9 @@
-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 NInput from './NInput.js'
 import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-69fa2c78',
+  __scopeId: 'data-v-7501a13d',
   __hmrId: 'NDatepicker_nexa',
   props: {
   modelValue: { type: String, default: '' },
@@ -174,44 +174,53 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { isOpen, viewDate, instanceId, popupStyle, resolvedPlacement, stopTracking, today, year, month, daysInMonth, firstDayOfWeek, calendarDays, formatDate, parseDate, minDate, maxDate, isDisabled, closePopup, syncViewDateFromModel, selectDate, prevMonth, nextMonth, monthNames, dayNames, isSelected, isToday, closeHandler, rootEl, openPopup, onBeforeUnmount, NInput: _ntc_NInput, trackFloatingOverlay, $slots, emit, modelValue, placeholder, disabled, min, max, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h('div', { class: "n-datepicker", "data-datepicker-root": instanceId, "data-v-69fa2c78": "" }, [
+    return h('div', { class: "n-datepicker", "data-datepicker-root": instanceId, "data-v-7501a13d": "" }, [
         "\n    ",
-        h('div', { class: "n-datepicker-input", onClick: openPopup, "data-v-69fa2c78": "" }, [
+        h('div', { class: "n-datepicker-input", onClick: openPopup, "data-v-7501a13d": "" }, [
         "\n      ",
-        h(_ntc_NInput, { modelValue: modelValue, placeholder: placeholder, disabled: disabled, readonly: true, "data-v-69fa2c78": "" }),
+        h(_ntc_NInput, { modelValue: modelValue, placeholder: placeholder, disabled: disabled, readonly: true, "data-v-7501a13d": "" }),
         "\n      ",
-        h('span', { class: "n-datepicker-icon", "data-v-69fa2c78": "" }, [
-        "📅"
+        h('span', { class: "n-datepicker-icon", "data-v-7501a13d": "" }, [
+        h('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", "data-v-7501a13d": "" }, [
+        h('rect', { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", "data-v-7501a13d": "" }),
+        h('line', { x1: "16", y1: "2", x2: "16", y2: "6", "data-v-7501a13d": "" }),
+        h('line', { x1: "8", y1: "2", x2: "8", y2: "6", "data-v-7501a13d": "" }),
+        h('line', { x1: "3", y1: "10", x2: "21", y2: "10", "data-v-7501a13d": "" })
+      ])
       ]),
         "\n    "
       ]),
         "\n\n    ",
-        h(_ntc_Teleport, { to: "body", "data-v-69fa2c78": "" }, [
+        h(_ntc_Teleport, { to: "body", "data-v-7501a13d": "" }, [
         "\n      ",
-        (isOpen.value) ? h('div', { class: ["n-datepicker-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-datepicker-popup": instanceId, style: popupStyle.value, "data-v-69fa2c78": "" }, [
+        (isOpen.value) ? h('div', { class: ["n-datepicker-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-datepicker-popup": instanceId, style: popupStyle.value, "data-v-7501a13d": "" }, [
         "\n        ",
-        h('div', { class: "n-datepicker-header", "data-v-69fa2c78": "" }, [
+        h('div', { class: "n-datepicker-header", "data-v-7501a13d": "" }, [
         "\n          ",
-        h('button', { class: "n-datepicker-nav", type: "button", onClick: prevMonth, "data-v-69fa2c78": "" }, [
-        "‹"
+        h('button', { class: "n-datepicker-nav", type: "button", onClick: prevMonth, "aria-label": "Previous month", "data-v-7501a13d": "" }, [
+        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-7501a13d": "" }, [
+        h('path', { d: "M15 18l-6-6 6-6", "data-v-7501a13d": "" })
+      ])
       ]),
         "\n          ",
-        h('span', { class: "n-datepicker-title", "data-v-69fa2c78": "" }, [
+        h('span', { class: "n-datepicker-title", "data-v-7501a13d": "" }, [
         monthNames[month.value],
         " ",
         year.value
       ]),
         "\n          ",
-        h('button', { class: "n-datepicker-nav", type: "button", onClick: nextMonth, "data-v-69fa2c78": "" }, [
-        "›"
+        h('button', { class: "n-datepicker-nav", type: "button", onClick: nextMonth, "aria-label": "Next month", "data-v-7501a13d": "" }, [
+        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-7501a13d": "" }, [
+        h('path', { d: "M9 18l6-6-6-6", "data-v-7501a13d": "" })
+      ])
       ]),
         "\n        "
       ]),
         "\n\n        ",
-        h('div', { class: "n-datepicker-grid", "data-v-69fa2c78": "" }, [
+        h('div', { class: "n-datepicker-grid", "data-v-7501a13d": "" }, [
         "\n          ",
         (dayNames).map((d, index) =>
-        h('div', { class: "n-datepicker-day-header", key: d, "data-v-69fa2c78": "" }, [
+        h('div', { class: "n-datepicker-day-header", key: d, "data-v-7501a13d": "" }, [
         d
       ])
       ),
@@ -223,7 +232,7 @@ _sfc_main.render = function(ctx) {
               'is-disabled': day !== null && isDisabled(day),
               'is-selected': day !== null && isSelected(day),
               'is-today': day !== null && isToday(day)
-            }, key: i, onClick: ($event) => { selectDate(day) }, "data-v-69fa2c78": "" }, [
+            }, key: i, onClick: ($event) => { selectDate(day) }, "data-v-7501a13d": "" }, [
         day ?? ''
       ])
       ),
@@ -235,27 +244,27 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-69fa2c78'
+_sfc_main.__scopeId = 'data-v-7501a13d'
 _sfc_main.__hmrId = 'NDatepicker_nexa'
 
 export default _sfc_main
 
-const __style = `.n-datepicker[data-v-69fa2c78]{
+const __style = `.n-datepicker[data-v-7501a13d]{
   position: relative;
   display: inline-block;
   font-family: var(--n-font-sans);
 }
 
-.n-datepicker-input[data-v-69fa2c78]{
+.n-datepicker-input[data-v-7501a13d]{
   position: relative;
   cursor: pointer;
 }
 
-.n-datepicker-input .n-input[data-v-69fa2c78]{
+.n-datepicker-input .n-input[data-v-7501a13d]{
   cursor: pointer;
 }
 
-.n-datepicker-icon[data-v-69fa2c78]{
+.n-datepicker-icon[data-v-7501a13d]{
   position: absolute;
   right: 0.75rem;
   top: 50%;
@@ -264,7 +273,7 @@ const __style = `.n-datepicker[data-v-69fa2c78]{
   pointer-events: none;
 }
 
-.n-datepicker-dropdown[data-v-69fa2c78]{
+.n-datepicker-dropdown[data-v-7501a13d]{
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
@@ -279,33 +288,33 @@ const __style = `.n-datepicker[data-v-69fa2c78]{
 }
 
 @keyframes fade-in {
-from[data-v-69fa2c78]{ opacity: 0; transform: translateY(-4px); }
-to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
+from[data-v-7501a13d]{ opacity: 0; transform: translateY(-4px); }
+to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
 }
 
-.n-datepicker-dropdown.is-top[data-v-69fa2c78]{
+.n-datepicker-dropdown.is-top[data-v-7501a13d]{
   animation: fade-in-top 0.15s ease;
 }
 
 @keyframes fade-in-top {
-from[data-v-69fa2c78]{ opacity: 0; transform: translateY(4px); }
-to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
+from[data-v-7501a13d]{ opacity: 0; transform: translateY(4px); }
+to[data-v-7501a13d]{ opacity: 1; transform: translateY(0); }
 }
 
-.n-datepicker-header[data-v-69fa2c78]{
+.n-datepicker-header[data-v-7501a13d]{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
 
-.n-datepicker-title[data-v-69fa2c78]{
+.n-datepicker-title[data-v-7501a13d]{
   font-weight: var(--n-weight-semibold);
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
 }
 
-.n-datepicker-nav[data-v-69fa2c78]{
+.n-datepicker-nav[data-v-7501a13d]{
   background: none;
   border: 1px solid var(--n-color-border);
   color: var(--n-color-text-secondary);
@@ -320,18 +329,18 @@ to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
   transition: all var(--n-transition-fast);
 }
 
-.n-datepicker-nav[data-v-69fa2c78]:hover{
+.n-datepicker-nav[data-v-7501a13d]:hover{
   background: var(--n-color-surface-hover);
   color: var(--n-color-text);
 }
 
-.n-datepicker-grid[data-v-69fa2c78]{
+.n-datepicker-grid[data-v-7501a13d]{
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
 
-.n-datepicker-day-header[data-v-69fa2c78]{
+.n-datepicker-day-header[data-v-7501a13d]{
   text-align: center;
   font-size: var(--n-text-xs);
   color: var(--n-color-text-muted);
@@ -339,7 +348,7 @@ to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
   padding: 0.35rem 0;
 }
 
-.n-datepicker-day[data-v-69fa2c78]{
+.n-datepicker-day[data-v-7501a13d]{
   text-align: center;
   padding: 0.4rem 0;
   font-size: var(--n-text-sm);
@@ -349,31 +358,31 @@ to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
   transition: all var(--n-transition-fast);
 }
 
-.n-datepicker-day[data-v-69fa2c78]:hover:not(.is-empty){
+.n-datepicker-day[data-v-7501a13d]:hover:not(.is-empty){
   background: var(--n-color-primary-light);
 }
 
-.n-datepicker-day.is-empty[data-v-69fa2c78]{
+.n-datepicker-day.is-empty[data-v-7501a13d]{
   cursor: default;
 }
 
-.n-datepicker-day.is-disabled[data-v-69fa2c78]{
+.n-datepicker-day.is-disabled[data-v-7501a13d]{
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-.n-datepicker-day.is-disabled[data-v-69fa2c78]:hover{
+.n-datepicker-day.is-disabled[data-v-7501a13d]:hover{
   background: transparent;
 }
 
-.n-datepicker-day.is-today[data-v-69fa2c78]{
+.n-datepicker-day.is-today[data-v-7501a13d]{
   font-weight: var(--n-weight-bold);
   color: var(--n-color-primary);
 }
 
-.n-datepicker-day.is-selected[data-v-69fa2c78]{
+.n-datepicker-day.is-selected[data-v-7501a13d]{
   background: var(--n-color-primary);
   color: white;
   font-weight: var(--n-weight-semibold);
 }`
-injectStyle('data-v-69fa2c78', __style)
+injectStyle('data-v-7501a13d', __style)

package/dist/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/dist/components/NForm.js

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

package/dist/components/NFormField.js

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