nexa-ui-kit 0.11.6 → 0.11.9

package/src/components/NModal.nexa

@@ -117,123 +117,6 @@ onUnmounted(() => {
   </Teleport>
 </template>
 
-<style scoped>
-.n-modal-root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--n-z-modal);
-}
-
-.n-modal-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--n-color-overlay);
-  backdrop-filter: blur(8px);
-  opacity: 0;
-  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.n-modal-overlay.is-active {
-  opacity: 1;
-}
-
-.n-modal-container {
-  position: relative;
-  width: 90%;
-  background: var(--n-color-surface);
-  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), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
-  transform: scale(0.9) translateY(20px);
-  opacity: 0;
-  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;
-  display: flex;
-  flex-direction: column;
-}
-
-.n-modal-container.is-active {
-  transform: scale(1) translateY(0);
-  opacity: 1;
-}
-
-.n-modal-header {
-  padding: var(--n-space-6) var(--n-space-8);
-  border-bottom: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.n-modal-header h3 {
-  margin: 0;
-  font-size: var(--n-text-xl);
-  font-weight: var(--n-weight-bold);
-  color: var(--n-color-text);
-}
-
-.n-modal-close {
-  background: transparent;
-  border: none;
-  color: var(--n-color-text-secondary);
-  font-size: 1.75rem;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  padding: 0;
-  line-height: 1;
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--n-radius-lg);
-  flex-shrink: 0;
-}
-
-.n-modal-close:hover {
-  color: var(--n-color-text);
-  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 {
-  padding: var(--n-space-8);
-  color: var(--n-color-text-secondary);
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
-}
-
-.n-modal-footer {
-  padding: var(--n-space-5) var(--n-space-8);
-  background: var(--n-color-glass);
-  border-top: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--n-space-4);
-  flex-shrink: 0;
-}
+<style scoped>
+.n-modal-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--n-z-modal);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--n-color-overlay);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  position: relative;
  width: 90%;
  background: var(--n-color-surface);
  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), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  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;
  display: flex;
  flex-direction: column;
  transform: scale(1) translateY(0);
  opacity: 1;
  padding: var(--n-space-6) var(--n-space-8);
  border-bottom: 1px solid var(--n-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  font-size: var(--n-text-xl);
  font-weight: var(--n-weight-bold);
  color: var(--n-color-text);
  background: transparent;
  border: none;
  color: var(--n-color-text-secondary);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color var(--n-transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--n-radius-lg);
  flex-shrink: 0;
  color: var(--n-color-text);
  background: var(--n-color-glass-hover);
  transform: scale(0.95);
  outline: 2px solid var(--n-color-primary);
  outline-offset: 2px;
  padding: var(--n-space-8);
  color: var(--n-color-text-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: var(--n-space-5) var(--n-space-8);
  background: var(--n-color-glass);
  border-top: 1px solid var(--n-color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--n-space-4);
  flex-shrink: 0;
 </style>

package/src/components/NMultiSelect.nexa

@@ -73,5 +73,6 @@ 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),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}
+.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; scale(.98)}to{opacity:1; 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; scale(.98)}to{opacity:1; 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%;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/src/components/NPaginator.nexa

@@ -83,18 +83,15 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   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);
@@ -102,31 +99,26 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   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);
+  transition: color var(--n-transition-fast) 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;
@@ -138,7 +130,6 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   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);
@@ -150,10 +141,10 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   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>

package/src/components/NPassword.nexa

@@ -176,4 +176,5 @@ const toggle = (e) => {
 .n-password-req-icon { width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
 .n-password-wrapper.is-disabled { opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
 .n-password-wrapper.is-disabled .n-password-input { cursor: not-allowed; }
+
 </style>

package/src/components/NProgressBar.nexa

@@ -36,19 +36,15 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   gap: var(--n-space-3);
   width: 100%;
 }
-
 .n-progress-track {
   flex: 1;
   background: var(--n-color-surface-alt);
   border-radius: var(--n-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
-
 .is-sm .n-progress-track { height: 8px; }
 .is-md .n-progress-track { height: 12px; }
 .is-lg .n-progress-track { height: 16px; }
-
 .n-progress-bar {
   height: 100%;
   border-radius: var(--n-radius-full);
@@ -60,13 +56,11 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   min-width: 0;
   box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
 }
-
 .is-primary { background: var(--n-color-primary); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
 .is-success { background: var(--n-color-success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
 .is-danger { background: var(--n-color-danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
 .is-warning { background: var(--n-color-warning); box-shadow: 0 0 8px rgba(234, 179, 8, 0.3); }
 .is-info { background: var(--n-color-info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
-
 .n-progress-label {
   color: white;
   font-size: 0.65rem;
@@ -74,11 +68,9 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   white-space: nowrap;
   line-height: 1;
 }
-
 .is-lg .n-progress-label {
   font-size: var(--n-text-xs);
 }
-
 .n-progress-label-outside {
   font-size: var(--n-text-xs);
   font-weight: var(--n-weight-semibold);
@@ -87,7 +79,6 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   min-width: 3rem;
   text-align: right;
 }
-
 .is-striped .n-progress-bar {
   background-image: linear-gradient(
     45deg,
@@ -101,13 +92,12 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   );
   background-size: 1rem 1rem;
 }
-
 .is-animated .n-progress-bar {
   animation: n-progress-stripe 1s linear infinite;
 }
-
 @keyframes n-progress-stripe {
   from { background-position: 1rem 0; }
   to { background-position: 0 0; }
 }
+
 </style>

package/src/components/NRadio.nexa

@@ -34,7 +34,6 @@ const select = () => {
   cursor: pointer;
   user-select: none;
 }
-
 .n-radio-circle {
   width: 22px;
   height: 22px;
@@ -43,15 +42,13 @@ const select = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
-
 .is-checked .n-radio-circle {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 12px rgba(99, 102, 241, 0.25);
 }
-
 .n-radio-dot {
   width: 11px;
   height: 11px;
@@ -59,24 +56,21 @@ const select = () => {
   background: var(--n-color-primary);
   animation: n-radio-dot-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 @keyframes n-radio-dot-in {
   from { transform: scale(0); }
   to { transform: scale(1); }
 }
-
 .n-radio-label {
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
-
 .is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
 .n-radio:hover:not(.is-disabled) .n-radio-circle {
   border-color: var(--n-color-primary);
 }
+
 </style>

package/src/components/NScrollView.nexa

@@ -99,13 +99,11 @@ const onScroll = (e) => {
   overscroll-behavior: contain;
   position: relative;
 }
-
 .n-scroll-view--horizontal {
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
 }
-
 .n-scroll-view-ptr {
   display: flex;
   align-items: center;
@@ -113,11 +111,9 @@ const onScroll = (e) => {
   overflow: hidden;
   transition: height 0.1s;
 }
-
 .n-scroll-view-ptr.is-refreshing {
   height: 52px !important;
 }
-
 .n-scroll-view-spinner {
   font-size: 24px;
   color: var(--n-color-primary, #6366f1);
@@ -125,12 +121,11 @@ const onScroll = (e) => {
   line-height: 1;
   transform-origin: center;
 }
-
 .n-scroll-view-ptr.is-refreshing .n-scroll-view-spinner {
   animation: n-spin 0.8s linear infinite;
 }
-
 @keyframes n-spin {
   to { transform: rotate(360deg) scale(1); }
 }
+
 </style>

package/src/components/NSelect.nexa

@@ -277,7 +277,6 @@ onBeforeUnmount(() => {
   width: 100%;
   font-family: var(--n-font-sans);
 }
-
 .n-select-label {
   display: block;
   font-size: var(--n-text-sm);
@@ -285,7 +284,6 @@ onBeforeUnmount(() => {
   color: var(--n-color-text-secondary);
   margin-bottom: var(--n-space-2);
 }
-
 .n-select-trigger {
   background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
@@ -299,33 +297,27 @@ onBeforeUnmount(() => {
   color: var(--n-color-text);
   gap: var(--n-space-2);
 }
-
 .n-select-trigger:focus-visible {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
   outline: none;
 }
-
 .n-select:hover .n-select-trigger:not(.is-disabled) {
   border-color: var(--n-color-border-hover);
 }
-
 .n-select.is-open .n-select-trigger {
   border-color: var(--n-color-primary);
   box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 20px rgba(var(--n-color-primary-rgb, 99, 102, 241), 0.12);
 }
-
 .n-select-placeholder {
   color: var(--n-color-text-muted);
 }
-
 .n-select-trigger-actions {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
-
 .n-select-clear {
   background: transparent;
   border: none;
@@ -336,21 +328,17 @@ onBeforeUnmount(() => {
   border-radius: var(--n-radius-sm);
   line-height: 1;
 }
-
 .n-select-clear:hover {
   color: var(--n-color-text);
 }
-
 .n-select-arrow {
   color: var(--n-color-text-muted);
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: var(--n-text-xs);
 }
-
 .is-open .n-select-arrow {
   transform: rotate(180deg);
 }
-
 .n-select-dropdown {
   position: absolute;
   top: calc(100% + 0.5rem);
@@ -367,26 +355,21 @@ onBeforeUnmount(() => {
   animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
 }
-
 @keyframes n-dropdown-in {
-  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
 }
-
 .n-select-dropdown.is-top {
   animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 @keyframes n-dropdown-in-top {
-  from { opacity: 0; transform: translateY(6px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
 }
-
 .n-select-search {
   padding: var(--n-space-2);
   border-bottom: 1px solid var(--n-color-border);
 }
-
 .n-select-search-input {
   width: 100%;
   background: var(--n-color-bg);
@@ -398,16 +381,13 @@ onBeforeUnmount(() => {
   outline: none;
   font-family: inherit;
 }
-
 .n-select-search-input:focus {
   border-color: var(--n-color-primary);
 }
-
 .n-select-options {
   max-height: 250px;
   overflow-y: auto;
 }
-
 .n-select-group-label {
   padding: var(--n-space-2) var(--n-space-3);
   font-size: var(--n-text-xs);
@@ -417,62 +397,55 @@ onBeforeUnmount(() => {
   letter-spacing: var(--n-tracking-wide);
   background: var(--n-color-bg);
 }
-
 .n-select-option {
   padding: 0.7rem 1rem;
   padding-left: 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
   letter-spacing: 0.01em;
   position: relative;
 }
-
 .n-select-option::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
-  transform: translateY(-50%) scaleY(0);
+   scaleY(0);
   width: 3px;
   height: 50%;
   background: var(--n-color-primary);
   border-radius: 0 3px 3px 0;
   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
-
 .n-select-option:hover::before,
 .n-select-option.is-focused::before {
-  transform: translateY(-50%) scaleY(1);
+   scaleY(1);
 }
-
 .n-select-option:hover,
 .n-select-option.is-focused {
   background: var(--n-color-glass);
   color: var(--n-color-text);
   padding-left: 1.25rem;
 }
-
 .n-select-option.is-selected {
   background: var(--n-color-primary-light);
   color: var(--n-color-primary);
   font-weight: var(--n-weight-semibold);
 }
-
 .n-select-option.is-disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
-
 .n-select-empty {
   padding: var(--n-space-4);
   color: var(--n-color-text-muted);
   text-align: center;
   font-size: var(--n-text-sm);
 }
-
 .is-disabled .n-select-trigger {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 </style>

package/src/components/NSkeleton.nexa

@@ -31,46 +31,41 @@ const lineArray = Array.from({ length: props.lines || 3 }, (_, i) => i + 1)
   flex-direction: column;
   gap: var(--n-space-2);
 }
-
 .n-skeleton-line {
   height: 14px;
   border-radius: var(--n-radius-sm);
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-circle .n-skeleton-circle {
   width: 60px;
   height: 60px;
   border-radius: var(--n-radius-full);
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-card .n-skeleton-card {
   border-radius: var(--n-radius-lg);
   overflow: hidden;
   border: 1px solid var(--n-color-border);
 }
-
 .is-card .n-skeleton-card-image {
   height: 140px;
-  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-color: var(--n-color-surface); 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
   background-size: 200% 100%;
   animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
 }
-
 .is-card .n-skeleton-card-body {
   padding: var(--n-space-5);
   display: flex;
   flex-direction: column;
   gap: var(--n-space-3);
 }
-
 @keyframes n-skeleton-shimmer {
   from { background-position: 200% 0; }
   to { background-position: -200% 0; }
 }
+
 </style>