nexa-ui-kit 0.11.4 → 0.11.6

package/src/components/NButton.nexa

@@ -67,9 +67,10 @@ const btnClass = computed(() => {
   gap: var(--n-space-2);
   font-family: var(--n-font-sans);
   font-weight: var(--n-weight-semibold);
+  letter-spacing: 0.01em;
   border-radius: var(--n-radius-md);
   cursor: pointer;
-  transition: all var(--n-transition-normal);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   border: 1px solid transparent;
   outline: none;
   white-space: nowrap;
@@ -78,16 +79,18 @@ const btnClass = computed(() => {
   text-decoration: none;
   line-height: var(--n-leading-normal, 1.5);
   min-width: fit-content;
+  will-change: transform;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .n-btn:focus-visible {
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 0 1px var(--n-color-primary);
 }
 
 /* Sizes */
-.n-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
-.n-btn-md { padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
-.n-btn-lg { padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+.n-btn-sm { padding: 0.5rem 1.5rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 36px; }
+.n-btn-md { padding: 0.75rem 2rem; font-size: var(--n-text-base); min-height: 44px; }
+.n-btn-lg { padding: 1rem 2.75rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 52px; }
 
 /* Block */
 .is-block { width: 100%; }
@@ -95,18 +98,25 @@ const btnClass = computed(() => {
 /* Rounded */
 .is-rounded { border-radius: var(--n-radius-full); }
 
+/* Active/Press */
+.n-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 /* Variant: Primary */
 .n-btn-primary {
-  background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
+  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
   color: white;
-  box-shadow: var(--n-shadow-glow-primary);
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
 }
 .n-btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
 }
 .n-btn-primary:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  transform: translateY(-1px) scale(0.98);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4), inset 0 2px 4px rgba(0,0,0,0.15);
 }
 
 /* Variant: Secondary */
@@ -118,6 +128,10 @@ const btnClass = computed(() => {
 .n-btn-secondary:hover:not(:disabled) {
   background: var(--n-color-surface-hover);
   border-color: var(--n-color-border-hover);
+  transform: translateY(-1px);
+}
+.n-btn-secondary:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Success */
@@ -131,7 +145,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-success);
 }
 .n-btn-success:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-success), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Warning */
@@ -145,7 +159,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-warning);
 }
 .n-btn-warning:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-warning), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Info */
@@ -159,7 +173,7 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-info);
 }
 .n-btn-info:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-info), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Danger */
@@ -173,28 +187,46 @@ const btnClass = computed(() => {
   box-shadow: var(--n-shadow-glow-danger);
 }
 .n-btn-danger:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-danger), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Ghost */
 .n-btn-ghost {
   background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--n-color-text-secondary);
+  border-color: transparent;
 }
 .n-btn-ghost:hover:not(:disabled) {
   background: var(--n-color-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--n-color-text);
+  border-color: var(--n-color-glass-border);
+}
+.n-btn-ghost:active:not(:disabled) {
+  background: var(--n-color-glass-hover);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
 }
 
 /* Variant: Outline */
 .n-btn-outline {
   background: transparent;
   color: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+  border: 1.5px solid transparent;
+  background-image: linear-gradient(transparent, transparent), linear-gradient(135deg, var(--n-color-primary), var(--n-color-primary-hover));
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
 }
 .n-btn-outline:hover:not(:disabled) {
-  background: var(--n-color-primary-light);
-  border-color: var(--n-color-primary-hover);
+  background-image: linear-gradient(var(--n-color-primary-light), var(--n-color-primary-light)), linear-gradient(135deg, var(--n-color-primary-hover), var(--n-color-primary));
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  color: var(--n-color-primary-hover);
+}
+.n-btn-outline:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Glass */
@@ -208,13 +240,26 @@ const btnClass = computed(() => {
   background: var(--n-color-glass-hover);
   border-color: var(--n-color-border-hover);
 }
+.n-btn-glass:active:not(:disabled) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
+}
 
 /* Disabled */
 .n-btn:disabled {
-  opacity: 0.45;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important;
+  pointer-events: none;
+  opacity: 0.55;
+}
+.n-btn:disabled::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--n-color-surface, #fff);
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 /* Loader */

package/src/components/NCard.nexa

@@ -32,16 +32,17 @@ const props = defineProps({
 .n-card {
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
-  border-radius: var(--n-radius-xl);
+  border-radius: var(--n-radius-lg);
   overflow: hidden;
-  transition: all var(--n-transition-normal);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   flex-direction: column;
+  will-change: transform, box-shadow;
 }
 
 .is-elevated {
   background: var(--n-color-surface-elevated);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-md);
 }
 
 .is-outlined {
@@ -57,9 +58,9 @@ const props = defineProps({
 }
 
 .n-card.is-hoverable:hover {
-  transform: translateY(-4px);
+  transform: translateY(-2px);
   border-color: var(--n-color-border-hover);
-  box-shadow: var(--n-shadow-xl);
+  box-shadow: var(--n-shadow-lg);
 }
 
 .n-card-image {

package/src/components/NCheckbox.nexa

@@ -17,10 +17,12 @@ const toggle = () => {
 <template>
   <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">
-        <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 v-if="modelValue && !indeterminate" class="n-checkbox-check">
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5L20 7"/></svg>
+      </div>
+      <div v-if="indeterminate" class="n-checkbox-check">
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" focusable="false"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </div>
     </div>
     <span v-if="label" class="n-checkbox-label">{{ label }}</span>
   </label>
@@ -30,62 +32,73 @@ const toggle = () => {
 .n-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: var(--n-space-3);
+  gap: 0.75rem;
   cursor: pointer;
   user-select: none;
+  padding: 0.375rem 0.5rem;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+.n-checkbox:hover:not(.is-disabled) {
+  background: rgba(99, 102, 241, 0.08);
 }
 
 .n-checkbox-box {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--n-color-border);
-  border-radius: var(--n-radius-sm);
+  border-radius: 6px;
+  border: 2px solid #475569;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background: #0f172a;
   flex-shrink: 0;
-  background: transparent;
-}
-
-.is-checked .n-checkbox-box {
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
 }
 
+.is-checked .n-checkbox-box,
 .is-indeterminate .n-checkbox-box {
-  background: var(--n-color-primary);
-  border-color: var(--n-color-primary);
+  background: #6366f1;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.4);
 }
 
-.n-checkbox-icon {
-  color: white;
-  font-size: 12px;
-  font-weight: var(--n-weight-bold);
-  line-height: 1;
-  opacity: 0;
-  transform: scale(0);
-  transition: all var(--n-transition-fast);
+.n-checkbox-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: n-check 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.is-checked .n-checkbox-icon,
-.is-indeterminate .n-checkbox-icon {
-  opacity: 1;
-  transform: scale(1);
+@keyframes n-check {
+  0% { transform: scale(0); opacity: 0; }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .n-checkbox-label {
-  font-size: var(--n-text-sm);
-  color: var(--n-color-text);
-  font-weight: var(--n-weight-medium);
+  font-size: 0.875rem;
+  color: #e2e8f0;
+  font-weight: 500;
+  line-height: 1.5;
 }
 
 .is-disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
+.is-disabled .n-checkbox-box {
+  background: #1e293b;
+  border-color: #334155;
+}
+
 .n-checkbox:hover:not(.is-disabled) .n-checkbox-box {
-  border-color: var(--n-color-primary);
+  border-color: #6366f1;
+}
+
+.is-checked .n-checkbox-box:active {
+  transform: scale(0.9);
 }
 </style>

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