nexa-ui-kit 0.11.3 → 0.11.5

package/dist/components/NAlert.js

@@ -77,11 +77,16 @@ const __style = `.n-alert[data-v-291d86b1]{
   align-items: flex-start;
   gap: var(--n-space-3);
   padding: var(--n-space-4) var(--n-space-5);
-  border-radius: var(--n-radius-md);
-  border: 1px solid transparent;
+  border-radius: var(--n-radius-lg);
+  border-style: solid;
+  border-width: 1px;
+  border-left-width: 4px;
+  border-color: transparent;
   font-size: var(--n-text-sm);
   line-height: var(--n-leading-normal);
-  animation: n-alert-in 0.25s ease-out;
+  animation: n-alert-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+  backdrop-filter: blur(12px);
 }
 
 @keyframes n-alert-in {
@@ -92,24 +97,28 @@ to[data-v-291d86b1]{ opacity: 1; transform: translateY(0); }
 .is-info[data-v-291d86b1]{
   background: var(--n-color-primary-light);
   border-color: var(--n-color-primary-border);
+  border-left-color: var(--n-color-primary);
   color: var(--n-color-primary);
 }
 
 .is-success[data-v-291d86b1]{
   background: var(--n-color-success-light);
   border-color: var(--n-color-success-border);
+  border-left-color: var(--n-color-success);
   color: var(--n-color-success);
 }
 
 .is-warning[data-v-291d86b1]{
   background: var(--n-color-warning-light);
   border-color: var(--n-color-warning-border);
+  border-left-color: var(--n-color-warning);
   color: var(--n-color-warning);
 }
 
 .is-error[data-v-291d86b1]{
   background: var(--n-color-danger-light);
   border-color: var(--n-color-danger-border);
+  border-left-color: var(--n-color-danger);
   color: var(--n-color-danger);
 }
 
@@ -117,7 +126,13 @@ to[data-v-291d86b1]{ opacity: 1; transform: translateY(0); }
   font-size: var(--n-text-base);
   font-weight: var(--n-weight-bold);
   flex-shrink: 0;
-  line-height: 1.4;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
 }
 
 .n-alert-body{
@@ -146,7 +161,7 @@ to[data-v-291d86b1]{ opacity: 1; transform: translateY(0); }
   padding: 0;
   line-height: 1;
   flex-shrink: 0;
-  transition: color var(--n-transition-fast);
+  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-alert-close[data-v-291d86b1]:hover{

package/dist/components/NAlert.nexa

@@ -43,11 +43,16 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
   align-items: flex-start;
   gap: var(--n-space-3);
   padding: var(--n-space-4) var(--n-space-5);
-  border-radius: var(--n-radius-md);
-  border: 1px solid transparent;
+  border-radius: var(--n-radius-lg);
+  border-style: solid;
+  border-width: 1px;
+  border-left-width: 4px;
+  border-color: transparent;
   font-size: var(--n-text-sm);
   line-height: var(--n-leading-normal);
-  animation: n-alert-in 0.25s ease-out;
+  animation: n-alert-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+  backdrop-filter: blur(12px);
 }
 
 @keyframes n-alert-in {
@@ -58,24 +63,28 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
 .is-info {
   background: var(--n-color-primary-light);
   border-color: var(--n-color-primary-border);
+  border-left-color: var(--n-color-primary);
   color: var(--n-color-primary);
 }
 
 .is-success {
   background: var(--n-color-success-light);
   border-color: var(--n-color-success-border);
+  border-left-color: var(--n-color-success);
   color: var(--n-color-success);
 }
 
 .is-warning {
   background: var(--n-color-warning-light);
   border-color: var(--n-color-warning-border);
+  border-left-color: var(--n-color-warning);
   color: var(--n-color-warning);
 }
 
 .is-error {
   background: var(--n-color-danger-light);
   border-color: var(--n-color-danger-border);
+  border-left-color: var(--n-color-danger);
   color: var(--n-color-danger);
 }
 
@@ -83,7 +92,13 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
   font-size: var(--n-text-base);
   font-weight: var(--n-weight-bold);
   flex-shrink: 0;
-  line-height: 1.4;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
 }
 
 .n-alert-body {
@@ -112,7 +127,7 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
   padding: 0;
   line-height: 1;
   flex-shrink: 0;
-  transition: color var(--n-transition-fast);
+  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-alert-close:hover {

package/dist/components/NAvatar.js

@@ -51,6 +51,8 @@ const __style = `.n-avatar[data-v-147134]{
   color: var(--n-color-text);
   user-select: none;
   transition: all var(--n-transition-fast);
+  border: 1px solid var(--n-color-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .is-sm[data-v-147134]{ width: 32px; height: 32px; font-size: var(--n-text-xs); }

package/dist/components/NAvatar.nexa

@@ -43,6 +43,8 @@ const initials = computed(() => {
   color: var(--n-color-text);
   user-select: none;
   transition: all var(--n-transition-fast);
+  border: 1px solid var(--n-color-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .is-sm { width: 32px; height: 32px; font-size: var(--n-text-xs); }

package/dist/components/NBadge.js

@@ -35,13 +35,14 @@ const __style = `.n-badge[data-v-ff3cf3e]{
   justify-content: center;
   padding: 0.25rem 0.6rem;
   font-size: var(--n-text-xs);
-  font-weight: var(--n-weight-bold);
-  border-radius: var(--n-radius-sm);
+  font-weight: var(--n-weight-semibold);
+  border-radius: var(--n-radius-full);
   line-height: 1;
   font-family: var(--n-font-sans);
   text-transform: uppercase;
-  letter-spacing: var(--n-tracking-wide);
+  letter-spacing: 0.03em;
   transition: all var(--n-transition-fast);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
 }
 
 .n-badge-primary[data-v-ff3cf3e]{ background: var(--n-color-primary); color: white; }
@@ -49,7 +50,7 @@ const __style = `.n-badge[data-v-ff3cf3e]{
 .n-badge-danger[data-v-ff3cf3e]{ background: var(--n-color-danger); color: white; }
 .n-badge-warning[data-v-ff3cf3e]{ background: var(--n-color-warning); color: white; }
 .n-badge-info[data-v-ff3cf3e]{ background: var(--n-color-info); color: white; }
-.n-badge-secondary[data-v-ff3cf3e]{ background: var(--n-color-surface-hover); color: var(--n-color-text-secondary); }
+.n-badge-secondary[data-v-ff3cf3e]{ background: var(--n-color-surface-hover); color: var(--n-color-text); }
 
 .n-badge-sm[data-v-ff3cf3e]{ padding: 0.15rem 0.4rem; font-size: 0.65rem; }
 .n-badge-lg[data-v-ff3cf3e]{ padding: 0.4rem 0.8rem; font-size: var(--n-text-sm); }

package/dist/components/NBadge.nexa

@@ -22,13 +22,14 @@ const props = defineProps({
   justify-content: center;
   padding: 0.25rem 0.6rem;
   font-size: var(--n-text-xs);
-  font-weight: var(--n-weight-bold);
-  border-radius: var(--n-radius-sm);
+  font-weight: var(--n-weight-semibold);
+  border-radius: var(--n-radius-full);
   line-height: 1;
   font-family: var(--n-font-sans);
   text-transform: uppercase;
-  letter-spacing: var(--n-tracking-wide);
+  letter-spacing: 0.03em;
   transition: all var(--n-transition-fast);
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
 }
 
 .n-badge-primary { background: var(--n-color-primary); color: white; }
@@ -36,7 +37,7 @@ const props = defineProps({
 .n-badge-danger { background: var(--n-color-danger); color: white; }
 .n-badge-warning { background: var(--n-color-warning); color: white; }
 .n-badge-info { background: var(--n-color-info); color: white; }
-.n-badge-secondary { background: var(--n-color-surface-hover); color: var(--n-color-text-secondary); }
+.n-badge-secondary { background: var(--n-color-surface-hover); color: var(--n-color-text); }
 
 .n-badge-sm { padding: 0.15rem 0.4rem; font-size: 0.65rem; }
 .n-badge-lg { padding: 0.4rem 0.8rem; font-size: var(--n-text-sm); }

package/dist/components/NBottomSheet.js

@@ -2,7 +2,7 @@ import { signal, computed, effect, onMounted, onUnmounted, h, hText, defineCompo
 import { useGestures } from 'nexa-mobile'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-3df910b7',
+  __scopeId: 'data-v-2489c54f',
   __hmrId: 'NBottomSheet_nexa',
   props: {
   show: { type: Boolean, default: false },
@@ -61,20 +61,20 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { yOffset, isDragging, currentSnap, gestures, sortedPoints, translateY, overlayOpacity, useGestures, $slots, emit, show, snapPoints, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-3df910b7": "" }, [
+    return h(_ntc_Teleport, { to: "body", "data-v-2489c54f": "" }, [
         "\n    ",
-        h('div', { class: ["n-bottom-sheet-root", { 'is-active': show || isDragging.value }], "data-v-3df910b7": "" }, [
+        h('div', { class: ["n-bottom-sheet-root", { 'is-active': show || isDragging.value }], "data-v-2489c54f": "" }, [
         "\n      ",
-        h('div', { class: "n-bottom-sheet-overlay", style: { opacity: overlayOpacity.value }, onClick: ($event) => { emit('close') }, "data-v-3df910b7": "" }),
+        h('div', { class: "n-bottom-sheet-overlay", style: { opacity: overlayOpacity.value }, onClick: ($event) => { emit('close') }, "data-v-2489c54f": "" }),
         "\n      ",
         h('div', { class: "n-bottom-sheet-container", id: "n-bottom-sheet-content", style: {
           transform: `translateY(${translateY.value})`,
-          transition: isDragging.value ? 'none' : 'transform var(--n-transition-slow)'
-        }, "data-v-3df910b7": "" }, [
+          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)'
+        }, "data-v-2489c54f": "" }, [
         "\n        ",
-        h('div', { class: "n-bottom-sheet-handle", "data-v-3df910b7": "" }),
+        h('div', { class: "n-bottom-sheet-handle", "data-v-2489c54f": "" }),
         "\n        ",
-        h('div', { class: "n-bottom-sheet-inner", "data-v-3df910b7": "" }, [
+        h('div', { class: "n-bottom-sheet-inner", "data-v-2489c54f": "" }, [
         "\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n        "
@@ -86,12 +86,12 @@ _sfc_main.render = function(ctx) {
         "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-3df910b7'
+_sfc_main.__scopeId = 'data-v-2489c54f'
 _sfc_main.__hmrId = 'NBottomSheet_nexa'
 
 export default _sfc_main
 
-const __style = `.n-bottom-sheet-root[data-v-3df910b7]{
+const __style = `.n-bottom-sheet-root[data-v-2489c54f]{
   position: fixed;
   top: 0;
   left: 0;
@@ -103,47 +103,49 @@ const __style = `.n-bottom-sheet-root[data-v-3df910b7]{
   align-items: flex-end;
 }
 
-.n-bottom-sheet-root.is-active[data-v-3df910b7]{
+.n-bottom-sheet-root.is-active[data-v-2489c54f]{
   pointer-events: auto;
 }
 
-.n-bottom-sheet-overlay[data-v-3df910b7]{
+.n-bottom-sheet-overlay[data-v-2489c54f]{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--n-color-overlay);
-  backdrop-filter: blur(4px);
-  transition: opacity 0.3s ease;
+  backdrop-filter: blur(8px);
+  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.n-bottom-sheet-container[data-v-3df910b7]{
+.n-bottom-sheet-container[data-v-2489c54f]{
   position: relative;
   width: 100%;
   max-height: 90vh;
   background: var(--n-color-surface);
   border-top: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-2xl) var(--n-radius-2xl) 0 0;
-  box-shadow: var(--n-shadow-top-lg);
+  box-shadow: var(--n-shadow-top-lg), 0 -8px 32px rgba(0, 0, 0, 0.08);
   padding-bottom: env(safe-area-inset-bottom, 20px);
   touch-action: none;
   display: flex;
   flex-direction: column;
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.n-bottom-sheet-handle[data-v-3df910b7]{
-  width: 40px;
-  height: 4px;
-  background: var(--n-color-surface-hover);
+.n-bottom-sheet-handle[data-v-2489c54f]{
+  width: 48px;
+  height: 5px;
+  background: var(--n-color-text-muted);
   border-radius: var(--n-radius-full);
   margin: var(--n-space-3) auto;
   flex-shrink: 0;
+  opacity: 0.3;
 }
 
-.n-bottom-sheet-inner[data-v-3df910b7]{
+.n-bottom-sheet-inner[data-v-2489c54f]{
   padding: var(--n-space-4) var(--n-space-8) var(--n-space-8);
   overflow-y: auto;
   flex: 1;
 }`
-injectStyle('data-v-3df910b7', __style)
+injectStyle('data-v-2489c54f', __style)

package/dist/components/NBottomSheet.nexa

@@ -74,7 +74,7 @@ const overlayOpacity = computed(() => {
         class="n-bottom-sheet-container"
         :style="{
           transform: `translateY(${translateY.value})`,
-          transition: isDragging.value ? 'none' : 'transform var(--n-transition-slow)'
+          transition: isDragging.value ? 'none' : 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)'
         }"
       >
         <div class="n-bottom-sheet-handle"></div>
@@ -110,8 +110,8 @@ const overlayOpacity = computed(() => {
   width: 100%;
   height: 100%;
   background: var(--n-color-overlay);
-  backdrop-filter: blur(4px);
-  transition: opacity 0.3s ease;
+  backdrop-filter: blur(8px);
+  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-bottom-sheet-container {
@@ -121,20 +121,22 @@ const overlayOpacity = computed(() => {
   background: var(--n-color-surface);
   border-top: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-2xl) var(--n-radius-2xl) 0 0;
-  box-shadow: var(--n-shadow-top-lg);
+  box-shadow: var(--n-shadow-top-lg), 0 -8px 32px rgba(0, 0, 0, 0.08);
   padding-bottom: env(safe-area-inset-bottom, 20px);
   touch-action: none;
   display: flex;
   flex-direction: column;
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .n-bottom-sheet-handle {
-  width: 40px;
-  height: 4px;
-  background: var(--n-color-surface-hover);
+  width: 48px;
+  height: 5px;
+  background: var(--n-color-text-muted);
   border-radius: var(--n-radius-full);
   margin: var(--n-space-3) auto;
   flex-shrink: 0;
+  opacity: 0.3;
 }
 
 .n-bottom-sheet-inner {

package/dist/components/NButton.js

@@ -75,9 +75,10 @@ const __style = `.n-btn[data-v-72f6f577]{
   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;
@@ -86,16 +87,18 @@ const __style = `.n-btn[data-v-72f6f577]{
   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[data-v-72f6f577]: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[data-v-72f6f577]{ 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[data-v-72f6f577]{ padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
-.n-btn-lg[data-v-72f6f577]{ padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+.n-btn-sm[data-v-72f6f577]{ 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[data-v-72f6f577]{ padding: 0.75rem 2rem; font-size: var(--n-text-base); min-height: 44px; }
+.n-btn-lg[data-v-72f6f577]{ padding: 1rem 2.75rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 52px; }
 
 /* Block */
 .is-block[data-v-72f6f577]{ width: 100%; }
@@ -103,6 +106,11 @@ const __style = `.n-btn[data-v-72f6f577]{
 /* Rounded */
 .is-rounded[data-v-72f6f577]{ border-radius: var(--n-radius-full); }
 
+/* Active/Press */
+.n-btn[data-v-72f6f577]:active:not(:disabled){
+  transform: scale(0.97);
+}
+
 /* Variant: Primary */
 .n-btn-primary[data-v-72f6f577]{
   background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
@@ -114,7 +122,7 @@ const __style = `.n-btn[data-v-72f6f577]{
   box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
 }
 .n-btn-primary[data-v-72f6f577]:active:not(:disabled){
-  transform: translateY(0) scale(0.97);
+  box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
 }
 
 /* Variant: Secondary */
@@ -126,6 +134,10 @@ const __style = `.n-btn[data-v-72f6f577]{
 .n-btn-secondary[data-v-72f6f577]:hover:not(:disabled){
   background: var(--n-color-surface-hover);
   border-color: var(--n-color-border-hover);
+  transform: translateY(-1px);
+}
+.n-btn-secondary[data-v-72f6f577]:active:not(:disabled){
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Success */
@@ -139,7 +151,7 @@ const __style = `.n-btn[data-v-72f6f577]{
   box-shadow: var(--n-shadow-glow-success);
 }
 .n-btn-success[data-v-72f6f577]: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 */
@@ -153,7 +165,7 @@ const __style = `.n-btn[data-v-72f6f577]{
   box-shadow: var(--n-shadow-glow-warning);
 }
 .n-btn-warning[data-v-72f6f577]: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 */
@@ -167,7 +179,7 @@ const __style = `.n-btn[data-v-72f6f577]{
   box-shadow: var(--n-shadow-glow-info);
 }
 .n-btn-info[data-v-72f6f577]: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 */
@@ -181,28 +193,46 @@ const __style = `.n-btn[data-v-72f6f577]{
   box-shadow: var(--n-shadow-glow-danger);
 }
 .n-btn-danger[data-v-72f6f577]: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[data-v-72f6f577]{
   background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--n-color-text-secondary);
+  border-color: transparent;
 }
 .n-btn-ghost[data-v-72f6f577]: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[data-v-72f6f577]: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[data-v-72f6f577]{
   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[data-v-72f6f577]: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[data-v-72f6f577]:active:not(:disabled){
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
 }
 
 /* Variant: Glass */
@@ -216,13 +246,26 @@ const __style = `.n-btn[data-v-72f6f577]{
   background: var(--n-color-glass-hover);
   border-color: var(--n-color-border-hover);
 }
+.n-btn-glass[data-v-72f6f577]:active:not(:disabled){
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
+}
 
 /* Disabled */
 .n-btn[data-v-72f6f577]:disabled{
-  opacity: 0.45;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important;
+  pointer-events: none;
+  opacity: 0.55;
+}
+.n-btn[data-v-72f6f577]:disabled::after{
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--n-color-surface, #fff);
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 /* Loader */