nexa-ui-kit 0.11.4 → 0.11.6

package/dist/components/NDataTable.nexa

@@ -176,7 +176,7 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
           <tr class="n-dt-head-row">
             <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>
+                <svg v-if="allVisibleSelected.value" 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">
@@ -201,7 +201,7 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
           <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">
               <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>
+                <svg v-if="isRowSelected(row, i + internalFirst.value)" 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 }">
@@ -212,7 +212,9 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
         </tbody>
       </table>
     </div>
-    <NPaginator v-if="paginator" :first="internalFirst.value" :rows="internalRows.value" :totalRecords="totalRecords.value" :rowsPerPageOptions="rowsPerPageOptions" @page="onPage" />
+    <div v-if="paginator" class="n-dt-paginator-wrap">
+      <NPaginator :first="internalFirst.value" :rows="internalRows.value" :totalRecords="totalRecords.value" :rowsPerPageOptions="rowsPerPageOptions" @page="onPage" />
+    </div>
   </div>
 </template>
 
@@ -270,6 +272,7 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
 .n-dt-wrapper {
   width: 100%;
   overflow: auto;
+  border-radius: inherit;
 }
 
 .n-dt-table {
@@ -279,7 +282,7 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
 }
 
 .n-dt-thead {
-  background: var(--n-color-surface);
+  background: linear-gradient(180deg, var(--n-color-surface-alt, var(--n-color-surface)) 0%, var(--n-color-surface) 100%);
 }
 
 .n-dt-th {
@@ -335,6 +338,9 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-size: 0.6875rem;
 }
 
 .n-dt-sort {
@@ -408,11 +414,11 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
 }
 
 .n-dt-tbody .n-dt-row {
-  transition: background 0.15s ease;
+  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-dt-tbody .n-dt-row.is-hover:hover {
-  background: var(--n-color-glass);
+  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
 }
 
 .n-dt-tbody .n-dt-row.is-selected {
@@ -420,13 +426,21 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   outline: none;
 }
 
+.n-dt-tbody .n-dt-row.is-selected td:first-child {
+  box-shadow: inset 3px 0 0 0 var(--n-color-primary);
+}
+
 .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);
+  background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
+}
+
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-hover:hover {
+  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
 }
 
 .n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-selected {
@@ -459,14 +473,14 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   width: 20px;
   height: 20px;
   border: 2px solid var(--n-color-border);
-  border-radius: var(--n-radius-sm);
+  border-radius: 5px;
   background: transparent;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: all 0.15s ease;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   color: transparent;
 }
 
@@ -480,14 +494,14 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   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 {
+  animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.n-dt-selectbox.is-checked svg {
-  opacity: 1;
+@keyframes n-dt-check-pop {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.15); }
+  100% { transform: scale(1); }
 }
 
 .n-dt-empty-row .n-dt-empty {
@@ -508,4 +522,14 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
   padding: 0.85rem 1rem;
   font-size: var(--n-text-base);
 }
+
+.n-dt-paginator-wrap {
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface-alt, var(--n-color-surface));
+}
+
+.n-dt-paginator-wrap :deep(.n-paginator) {
+  border-top: none;
+  background: transparent;
+}
 </style>

package/dist/components/NInput.js

@@ -175,9 +175,10 @@ const __style = `.n-input-group[data-v-5b5ed8a8]{
 
 .n-input-label[data-v-5b5ed8a8]{
   font-size: var(--n-text-sm);
-  font-weight: var(--n-weight-semibold);
+  font-weight: var(--n-weight-medium);
   color: var(--n-color-text-secondary);
   margin-left: var(--n-space-1);
+  letter-spacing: 0.01em;
 }
 
 .n-input-wrapper[data-v-5b5ed8a8]{
@@ -195,14 +196,17 @@ const __style = `.n-input-group[data-v-5b5ed8a8]{
   background: var(--n-color-bg);
   border: 1px solid var(--n-color-border);
   color: var(--n-color-text);
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 1.125rem;
   border-radius: var(--n-radius-md);
   font-family: inherit;
   font-size: var(--n-text-base);
   line-height: 1.2;
   box-sizing: border-box;
-  transition: all var(--n-transition-normal);
+  transition: all var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
   outline: none;
+  caret-color: var(--n-color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .n-input.has-prefix[data-v-5b5ed8a8]{
@@ -224,17 +228,21 @@ const __style = `.n-input-group[data-v-5b5ed8a8]{
   background: linear-gradient(135deg, var(--n-color-primary), var(--n-color-info));
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--n-transition-normal);
+  transition: opacity var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 0;
 }
 
 .is-focused .n-input-focus-ring[data-v-5b5ed8a8]{
-  opacity: 0.35;
+  opacity: 0.15;
 }
 
 .is-focused .n-input[data-v-5b5ed8a8]{
   border-color: var(--n-color-primary);
   background: var(--n-color-surface);
+  box-shadow:
+    0 0 0 3px var(--n-color-primary-light),
+    0 0 0 1px var(--n-color-primary),
+    inset 0 1px 3px rgba(0,0,0,0.04);
 }
 
 .has-error .n-input[data-v-5b5ed8a8]{
@@ -313,8 +321,21 @@ const __style = `.n-input-group[data-v-5b5ed8a8]{
   margin-left: auto;
 }
 
+.is-disabled[data-v-5b5ed8a8]{
+  position: relative;
+}
+
+.is-disabled[data-v-5b5ed8a8]::after{
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--n-color-glass);
+  border-radius: var(--n-radius-md);
+  pointer-events: none;
+  z-index: 2;
+}
+
 .is-disabled .n-input[data-v-5b5ed8a8]{
-  opacity: 0.5;
   cursor: not-allowed;
   background: var(--n-color-surface-alt);
 }`

package/dist/components/NInput.nexa

@@ -166,9 +166,10 @@ const togglePassword = () => {
 
 .n-input-label {
   font-size: var(--n-text-sm);
-  font-weight: var(--n-weight-semibold);
+  font-weight: var(--n-weight-medium);
   color: var(--n-color-text-secondary);
   margin-left: var(--n-space-1);
+  letter-spacing: 0.01em;
 }
 
 .n-input-wrapper {
@@ -186,14 +187,17 @@ const togglePassword = () => {
   background: var(--n-color-bg);
   border: 1px solid var(--n-color-border);
   color: var(--n-color-text);
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 1.125rem;
   border-radius: var(--n-radius-md);
   font-family: inherit;
   font-size: var(--n-text-base);
   line-height: 1.2;
   box-sizing: border-box;
-  transition: all var(--n-transition-normal);
+  transition: all var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
   outline: none;
+  caret-color: var(--n-color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .n-input.has-prefix {
@@ -215,17 +219,21 @@ const togglePassword = () => {
   background: linear-gradient(135deg, var(--n-color-primary), var(--n-color-info));
   opacity: 0;
   pointer-events: none;
-  transition: opacity var(--n-transition-normal);
+  transition: opacity var(--n-transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 0;
 }
 
 .is-focused .n-input-focus-ring {
-  opacity: 0.35;
+  opacity: 0.15;
 }
 
 .is-focused .n-input {
   border-color: var(--n-color-primary);
   background: var(--n-color-surface);
+  box-shadow:
+    0 0 0 3px var(--n-color-primary-light),
+    0 0 0 1px var(--n-color-primary),
+    inset 0 1px 3px rgba(0,0,0,0.04);
 }
 
 .has-error .n-input {
@@ -304,8 +312,21 @@ const togglePassword = () => {
   margin-left: auto;
 }
 
+.is-disabled {
+  position: relative;
+}
+
+.is-disabled::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--n-color-glass);
+  border-radius: var(--n-radius-md);
+  pointer-events: none;
+  z-index: 2;
+}
+
 .is-disabled .n-input {
-  opacity: 0.5;
   cursor: not-allowed;
   background: var(--n-color-surface-alt);
 }

package/dist/components/NModal.js

@@ -148,7 +148,7 @@ const __style = `.n-modal-root[data-v-46af727f]{
   background: var(--n-color-overlay);
   backdrop-filter: blur(8px);
   opacity: 0;
-  transition: opacity 0.25s ease;
+  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-modal-overlay.is-active[data-v-46af727f]{
@@ -159,12 +159,14 @@ const __style = `.n-modal-root[data-v-46af727f]{
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
-  border: 1px solid var(--n-color-border);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--n-color-glass-border);
   border-radius: var(--n-radius-2xl);
-  box-shadow: var(--n-shadow-xl);
+  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
   transform: scale(0.9) translateY(20px);
   opacity: 0;
-  transition: all var(--n-transition-spring);
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   overflow: hidden;
   outline: none;
   max-height: 85vh;
@@ -199,20 +201,31 @@ const __style = `.n-modal-root[data-v-46af727f]{
   color: var(--n-color-text-secondary);
   font-size: 1.75rem;
   cursor: pointer;
-  transition: color var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   padding: 0;
   line-height: 1;
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--n-radius-sm);
+  border-radius: var(--n-radius-lg);
+  flex-shrink: 0;
 }
 
 .n-modal-close[data-v-46af727f]:hover{
   color: var(--n-color-text);
-  background: var(--n-color-glass);
+  background: var(--n-color-glass-hover);
+  transform: scale(1.1);
+}
+
+.n-modal-close[data-v-46af727f]:active{
+  transform: scale(0.95);
+}
+
+.n-modal-close[data-v-46af727f]:focus-visible{
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
 }
 
 .n-modal-content[data-v-46af727f]{

package/dist/components/NModal.nexa

@@ -139,7 +139,7 @@ onUnmounted(() => {
   background: var(--n-color-overlay);
   backdrop-filter: blur(8px);
   opacity: 0;
-  transition: opacity 0.25s ease;
+  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-modal-overlay.is-active {
@@ -150,12 +150,14 @@ onUnmounted(() => {
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
-  border: 1px solid var(--n-color-border);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--n-color-glass-border);
   border-radius: var(--n-radius-2xl);
-  box-shadow: var(--n-shadow-xl);
+  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
   transform: scale(0.9) translateY(20px);
   opacity: 0;
-  transition: all var(--n-transition-spring);
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   overflow: hidden;
   outline: none;
   max-height: 85vh;
@@ -190,20 +192,31 @@ onUnmounted(() => {
   color: var(--n-color-text-secondary);
   font-size: 1.75rem;
   cursor: pointer;
-  transition: color var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   padding: 0;
   line-height: 1;
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--n-radius-sm);
+  border-radius: var(--n-radius-lg);
+  flex-shrink: 0;
 }
 
 .n-modal-close:hover {
   color: var(--n-color-text);
-  background: var(--n-color-glass);
+  background: var(--n-color-glass-hover);
+  transform: scale(1.1);
+}
+
+.n-modal-close:active {
+  transform: scale(0.95);
+}
+
+.n-modal-close:focus-visible {
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
 }
 
 .n-modal-content {

package/dist/components/NMultiSelect.js

@@ -161,5 +161,5 @@ _sfc_main.__hmrId = 'NMultiSelect_nexa'
 
 export default _sfc_main
 
-const __style = `.n-ms[data-v-261608b5]{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}`
+const __style = `.n-ms[data-v-261608b5]{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light),0 0 16px rgba(99,102,241,.25)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.5rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem;transition:all .2s cubic-bezier(0.16,1,0.3,1)}.n-ms-chip:hover{background:var(--n-color-surface-hover)}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-glass);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg),0 8px 32px rgba(0,0,0,.08);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0.16,1,0.3,1);backdrop-filter:blur(16px)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0.16,1,0.3,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all .15s cubic-bezier(0.16,1,0.3,1);text-align:left;position:relative}.n-ms-option::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:0 3px 3px 0;background:var(--n-color-primary);transition:height .2s cubic-bezier(0.16,1,0.3,1)}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option:hover::before,.n-ms-option.is-focused::before{height:60%}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}`
 injectStyle('data-v-261608b5', __style)

package/dist/components/NMultiSelect.nexa

@@ -73,5 +73,5 @@ onBeforeUnmount(() => close())
 </template>
 
 <style scoped>
-.n-ms{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}
+.n-ms{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--n-transition-fast);color:var(--n-color-text);gap:var(--n-space-2);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light),0 0 16px rgba(99,102,241,.25)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.15rem;font-size:var(--n-text-xs);border-radius:var(--n-radius-sm);line-height:1}.n-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.25rem 0.5rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem;transition:all .2s cubic-bezier(0.16,1,0.3,1)}.n-ms-chip:hover{background:var(--n-color-surface-hover)}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;width:100%;background:var(--n-color-glass);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg),0 8px 32px rgba(0,0,0,.08);z-index:var(--n-z-dropdown);overflow:hidden;animation:n-ms-in .2s cubic-bezier(0.16,1,0.3,1);backdrop-filter:blur(16px)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0.16,1,0.3,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:var(--n-space-2) var(--n-space-3);color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;font-family:inherit}.n-ms-search-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all .15s cubic-bezier(0.16,1,0.3,1);text-align:left;position:relative}.n-ms-option::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;border-radius:0 3px 3px 0;background:var(--n-color-primary);transition:height .2s cubic-bezier(0.16,1,0.3,1)}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option:hover::before,.n-ms-option.is-focused::before{height:60%}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}
 </style>

package/dist/components/NPaginator.js

@@ -121,5 +121,87 @@ _sfc_main.__hmrId = 'NPaginator_nexa'
 
 export default _sfc_main
 
-const __style = `.n-paginator[data-v-2f8f305d]{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}`
+const __style = `.n-paginator[data-v-2f8f305d]{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--n-space-3);
+  padding: var(--n-space-3) var(--n-space-4);
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
+  font-family: var(--n-font-sans);
+}
+
+.n-paginator-report[data-v-2f8f305d]{
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-xs);
+}
+
+.n-paginator-center[data-v-2f8f305d]{
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-2);
+}
+
+.n-pg-btn[data-v-2f8f305d]{
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.n-pg-btn[data-v-2f8f305d]:hover:not(:disabled){
+  background: var(--n-color-glass);
+  transform: scale(1.05);
+}
+
+.n-pg-btn[data-v-2f8f305d]:active:not(:disabled){
+  transform: scale(0.97);
+}
+
+.n-pg-btn[data-v-2f8f305d]:focus-visible{
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}
+
+.n-pg-btn[data-v-2f8f305d]:disabled{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-pg-page[data-v-2f8f305d]{
+  min-width: 2.5rem;
+  text-align: center;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  padding: 0.25rem 0.5rem;
+  background: var(--n-color-primary);
+  color: white;
+  border-radius: var(--n-radius-md);
+  line-height: 1.4;
+}
+
+.n-pg-select[data-v-2f8f305d]{
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  font-size: var(--n-text-xs);
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.n-pg-select[data-v-2f8f305d]:focus-visible{
+  border-color: var(--n-color-primary);
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}`
 injectStyle('data-v-2f8f305d', __style)

package/dist/components/NPaginator.nexa

@@ -73,5 +73,87 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
 </template>
 
 <style scoped>
-.n-paginator{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}
+.n-paginator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--n-space-3);
+  padding: var(--n-space-3) var(--n-space-4);
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
+  font-family: var(--n-font-sans);
+}
+
+.n-paginator-report {
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-xs);
+}
+
+.n-paginator-center {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-2);
+}
+
+.n-pg-btn {
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.n-pg-btn:hover:not(:disabled) {
+  background: var(--n-color-glass);
+  transform: scale(1.05);
+}
+
+.n-pg-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.n-pg-btn:focus-visible {
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}
+
+.n-pg-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-pg-page {
+  min-width: 2.5rem;
+  text-align: center;
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  padding: 0.25rem 0.5rem;
+  background: var(--n-color-primary);
+  color: white;
+  border-radius: var(--n-radius-md);
+  line-height: 1.4;
+}
+
+.n-pg-select {
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-md);
+  padding: 0.3rem 0.55rem;
+  font-size: var(--n-text-xs);
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.n-pg-select:focus-visible {
+  border-color: var(--n-color-primary);
+  outline: 2px solid var(--n-color-primary);
+  outline-offset: 2px;
+}
 </style>