nexa-ui-kit 0.11.4 → 0.11.6

package/dist/components/NProgressBar.js

@@ -58,28 +58,30 @@ const __style = `.n-progress[data-v-daaa1d0]{
   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[data-v-daaa1d0]{ height: 6px; }
-.is-md .n-progress-track[data-v-daaa1d0]{ height: 10px; }
-.is-lg .n-progress-track[data-v-daaa1d0]{ height: 14px; }
+.is-sm .n-progress-track[data-v-daaa1d0]{ height: 8px; }
+.is-md .n-progress-track[data-v-daaa1d0]{ height: 12px; }
+.is-lg .n-progress-track[data-v-daaa1d0]{ height: 16px; }
 
 .n-progress-bar[data-v-daaa1d0]{
   height: 100%;
   border-radius: var(--n-radius-full);
-  transition: width var(--n-transition-slow);
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 0.35rem;
   min-width: 0;
+  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
 }
 
-.is-primary[data-v-daaa1d0]{ background: var(--n-color-primary); }
-.is-success[data-v-daaa1d0]{ background: var(--n-color-success); }
-.is-danger[data-v-daaa1d0]{ background: var(--n-color-danger); }
-.is-warning[data-v-daaa1d0]{ background: var(--n-color-warning); }
-.is-info[data-v-daaa1d0]{ background: var(--n-color-info); }
+.is-primary[data-v-daaa1d0]{ background: var(--n-color-primary); box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
+.is-success[data-v-daaa1d0]{ background: var(--n-color-success); box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
+.is-danger[data-v-daaa1d0]{ background: var(--n-color-danger); box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
+.is-warning[data-v-daaa1d0]{ background: var(--n-color-warning); box-shadow: 0 0 8px rgba(234, 179, 8, 0.3); }
+.is-info[data-v-daaa1d0]{ background: var(--n-color-info); box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
 
 .n-progress-label[data-v-daaa1d0]{
   color: white;

package/dist/components/NProgressBar.nexa

@@ -42,28 +42,30 @@ const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props
   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: 6px; }
-.is-md .n-progress-track { height: 10px; }
-.is-lg .n-progress-track { height: 14px; }
+.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);
-  transition: width var(--n-transition-slow);
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 0.35rem;
   min-width: 0;
+  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
 }
 
-.is-primary { background: var(--n-color-primary); }
-.is-success { background: var(--n-color-success); }
-.is-danger { background: var(--n-color-danger); }
-.is-warning { background: var(--n-color-warning); }
-.is-info { background: var(--n-color-info); }
+.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;

package/dist/components/NRadio.js

@@ -1,7 +1,7 @@
 import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-5c3cc2',
+  __scopeId: 'data-v-56e32a4f',
   __hmrId: 'NRadio_nexa',
   props: {
   modelValue: { type: [String, Number], default: '' },
@@ -24,25 +24,24 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   let { isChecked, select, $slots, emit, modelValue, value, label, disabled, name, Fragment: _ntc_Fragment } = ctx
-    return h('label', { class: ["n-radio", { 'is-checked': isChecked(), 'is-disabled': disabled }], "data-v-5c3cc2": "" }, [
+    return h('label', { class: ["n-radio", { 'is-checked': isChecked(), 'is-disabled': disabled }], "data-v-56e32a4f": "" }, [
         "\n    ",
-        h('div', { class: "n-radio-circle", onClick: select, "data-v-5c3cc2": "" }, [
+        h('div', { class: "n-radio-circle", onClick: select, "data-v-56e32a4f": "" }, [
         "\n      ",
-        h('div', { class: "n-radio-dot", "data-v-5c3cc2": "" }),
-        "\n    "
+        (isChecked()) ? h('div', { class: "n-radio-dot", "data-v-56e32a4f": "" }) : null
       ]),
         "\n    ",
-        (label) ? h('span', { class: "n-radio-label", "data-v-5c3cc2": "" }, [
+        (label) ? h('span', { class: "n-radio-label", "data-v-56e32a4f": "" }, [
         label
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-5c3cc2'
+_sfc_main.__scopeId = 'data-v-56e32a4f'
 _sfc_main.__hmrId = 'NRadio_nexa'
 
 export default _sfc_main
 
-const __style = `.n-radio[data-v-5c3cc2]{
+const __style = `.n-radio[data-v-56e32a4f]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-3);
@@ -50,47 +49,48 @@ const __style = `.n-radio[data-v-5c3cc2]{
   user-select: none;
 }
 
-.n-radio-circle[data-v-5c3cc2]{
-  width: 20px;
-  height: 20px;
+.n-radio-circle[data-v-56e32a4f]{
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--n-color-border);
   border-radius: var(--n-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
 
-.is-checked .n-radio-circle[data-v-5c3cc2]{
+.is-checked .n-radio-circle[data-v-56e32a4f]{
   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[data-v-5c3cc2]{
-  width: 10px;
-  height: 10px;
+.n-radio-dot[data-v-56e32a4f]{
+  width: 11px;
+  height: 11px;
   border-radius: var(--n-radius-full);
   background: var(--n-color-primary);
-  transform: scale(0);
-  transition: all var(--n-transition-spring);
+  animation: n-radio-dot-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.is-checked .n-radio-dot[data-v-5c3cc2]{
-  transform: scale(1);
+@keyframes n-radio-dot-in {
+from[data-v-56e32a4f]{ transform: scale(0); }
+to[data-v-56e32a4f]{ transform: scale(1); }
 }
 
-.n-radio-label[data-v-5c3cc2]{
+.n-radio-label[data-v-56e32a4f]{
   font-size: var(--n-text-sm);
   color: var(--n-color-text);
   font-weight: var(--n-weight-medium);
 }
 
-.is-disabled[data-v-5c3cc2]{
+.is-disabled[data-v-56e32a4f]{
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.n-radio[data-v-5c3cc2]:hover:not(.is-disabled) .n-radio-circle{
+.n-radio[data-v-56e32a4f]:hover:not(.is-disabled) .n-radio-circle{
   border-color: var(--n-color-primary);
 }`
-injectStyle('data-v-5c3cc2', __style)
+injectStyle('data-v-56e32a4f', __style)

package/dist/components/NRadio.nexa

@@ -20,7 +20,7 @@ const select = () => {
 <template>
   <label class="n-radio" :class="{ 'is-checked': isChecked(), 'is-disabled': disabled }">
     <div class="n-radio-circle" @click="select">
-      <div class="n-radio-dot"></div>
+      <div v-if="isChecked()" class="n-radio-dot"></div>
     </div>
     <span v-if="label" class="n-radio-label">{{ label }}</span>
   </label>
@@ -36,32 +36,33 @@ const select = () => {
 }
 
 .n-radio-circle {
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border: 2px solid var(--n-color-border);
   border-radius: var(--n-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--n-transition-fast);
+  transition: all 0.2s 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: 10px;
-  height: 10px;
+  width: 11px;
+  height: 11px;
   border-radius: var(--n-radius-full);
   background: var(--n-color-primary);
-  transform: scale(0);
-  transition: all var(--n-transition-spring);
+  animation: n-radio-dot-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.is-checked .n-radio-dot {
-  transform: scale(1);
+@keyframes n-radio-dot-in {
+  from { transform: scale(0); }
+  to { transform: scale(1); }
 }
 
 .n-radio-label {

package/dist/components/NSelect.js

@@ -323,7 +323,8 @@ const __style = `.n-select[data-v-2dd8d436]{
 
 .n-select-trigger[data-v-2dd8d436]:focus-visible{
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  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[data-v-2dd8d436]:hover .n-select-trigger:not(.is-disabled){
@@ -332,7 +333,7 @@ const __style = `.n-select[data-v-2dd8d436]{
 
 .n-select.is-open .n-select-trigger[data-v-2dd8d436]{
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  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[data-v-2dd8d436]{
@@ -363,7 +364,7 @@ const __style = `.n-select[data-v-2dd8d436]{
 
 .n-select-arrow[data-v-2dd8d436]{
   color: var(--n-color-text-muted);
-  transition: transform var(--n-transition-fast);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: var(--n-text-xs);
 }
 
@@ -376,27 +377,30 @@ const __style = `.n-select[data-v-2dd8d436]{
   top: calc(100% + 0.5rem);
   left: 0;
   width: 100%;
-  background: var(--n-color-surface);
+  background: color-mix(in srgb, var(--n-color-surface) 90%, transparent);
+  backdrop-filter: blur(16px) saturate(1.15);
+  -webkit-backdrop-filter: blur(16px) saturate(1.15);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-md);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0,0,0,0.08);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s ease-out;
+  animation: n-dropdown-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top center;
 }
 
 @keyframes n-dropdown-in {
-from[data-v-2dd8d436]{ opacity: 0; transform: translateY(-8px); }
-to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0); }
+from[data-v-2dd8d436]{ opacity: 0; transform: translateY(-6px) scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-dropdown.is-top[data-v-2dd8d436]{
-  animation: n-dropdown-in-top 0.2s ease-out;
+  animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes n-dropdown-in-top {
-from[data-v-2dd8d436]{ opacity: 0; transform: translateY(8px); }
-to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0); }
+from[data-v-2dd8d436]{ opacity: 0; transform: translateY(6px) scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-search[data-v-2dd8d436]{
@@ -437,15 +441,37 @@ to[data-v-2dd8d436]{ opacity: 1; transform: translateY(0); }
 
 .n-select-option[data-v-2dd8d436]{
   padding: 0.7rem 1rem;
+  padding-left: 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  transition: all var(--n-transition-fast);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  letter-spacing: 0.01em;
+  position: relative;
+}
+
+.n-select-option[data-v-2dd8d436]::before{
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%) 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[data-v-2dd8d436]:hover::before, 
+.n-select-option.is-focused[data-v-2dd8d436]::before{
+  transform: translateY(-50%) scaleY(1);
 }
 
 .n-select-option[data-v-2dd8d436]:hover, 
 .n-select-option.is-focused[data-v-2dd8d436]{
   background: var(--n-color-glass);
   color: var(--n-color-text);
+  padding-left: 1.25rem;
 }
 
 .n-select-option.is-selected[data-v-2dd8d436]{

package/dist/components/NSelect.nexa

@@ -302,7 +302,8 @@ onBeforeUnmount(() => {
 
 .n-select-trigger:focus-visible {
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  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) {
@@ -311,7 +312,7 @@ onBeforeUnmount(() => {
 
 .n-select.is-open .n-select-trigger {
   border-color: var(--n-color-primary);
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+  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 {
@@ -342,7 +343,7 @@ onBeforeUnmount(() => {
 
 .n-select-arrow {
   color: var(--n-color-text-muted);
-  transition: transform var(--n-transition-fast);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   font-size: var(--n-text-xs);
 }
 
@@ -355,27 +356,30 @@ onBeforeUnmount(() => {
   top: calc(100% + 0.5rem);
   left: 0;
   width: 100%;
-  background: var(--n-color-surface);
+  background: color-mix(in srgb, var(--n-color-surface) 90%, transparent);
+  backdrop-filter: blur(16px) saturate(1.15);
+  -webkit-backdrop-filter: blur(16px) saturate(1.15);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-md);
-  box-shadow: var(--n-shadow-lg);
+  box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0,0,0,0.08);
   z-index: var(--n-z-dropdown);
   overflow: hidden;
-  animation: n-dropdown-in 0.2s ease-out;
+  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(-8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-dropdown.is-top {
-  animation: n-dropdown-in-top 0.2s ease-out;
+  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(8px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .n-select-search {
@@ -416,15 +420,37 @@ onBeforeUnmount(() => {
 
 .n-select-option {
   padding: 0.7rem 1rem;
+  padding-left: 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  transition: all var(--n-transition-fast);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  letter-spacing: 0.01em;
+  position: relative;
+}
+
+.n-select-option::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%) 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);
 }
 
 .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 {

package/dist/components/NSwitch.js

@@ -53,12 +53,13 @@ const __style = `.n-switch[data-v-3cd56cb4]{
   background: var(--n-color-surface-hover);
   border-radius: var(--n-radius-full);
   position: relative;
-  transition: all var(--n-transition-fast);
+  transition: all var(--n-transition-normal);
   flex-shrink: 0;
 }
 
 .is-checked .n-switch-track[data-v-3cd56cb4]{
   background: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
 .n-switch-thumb[data-v-3cd56cb4]{
@@ -69,14 +70,15 @@ const __style = `.n-switch[data-v-3cd56cb4]{
   position: absolute;
   top: 3px;
   left: 3px;
-  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
-  box-shadow: var(--n-shadow-sm);
+  transition: transform var(--n-transition-normal), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-md);
   will-change: transform;
 }
 
 .is-checked .n-switch-thumb[data-v-3cd56cb4]{
   transform: translateX(20px);
   background: white;
+  box-shadow: var(--n-shadow-md);
 }
 
 .n-switch-label[data-v-3cd56cb4]{

package/dist/components/NSwitch.nexa

@@ -37,12 +37,13 @@ const toggle = () => {
   background: var(--n-color-surface-hover);
   border-radius: var(--n-radius-full);
   position: relative;
-  transition: all var(--n-transition-fast);
+  transition: all var(--n-transition-normal);
   flex-shrink: 0;
 }
 
 .is-checked .n-switch-track {
   background: var(--n-color-primary);
+  box-shadow: var(--n-shadow-glow-primary);
 }
 
 .n-switch-thumb {
@@ -53,14 +54,15 @@ const toggle = () => {
   position: absolute;
   top: 3px;
   left: 3px;
-  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
-  box-shadow: var(--n-shadow-sm);
+  transition: transform var(--n-transition-normal), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-md);
   will-change: transform;
 }
 
 .is-checked .n-switch-thumb {
   transform: translateX(20px);
   background: white;
+  box-shadow: var(--n-shadow-md);
 }
 
 .n-switch-label {

package/dist/components/NTabs.js

@@ -88,10 +88,17 @@ const __style = `.n-tabs[data-v-339e5ee5]{
   position: relative;
   user-select: none;
   white-space: nowrap;
+  border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
 }
 
-.n-tab[data-v-339e5ee5]:hover{
-  color: var(--n-color-text-secondary);
+.n-tab[data-v-339e5ee5]:hover:not(.is-active):not(.is-disabled){
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-tab[data-v-339e5ee5]:focus-visible{
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--n-color-primary);
 }
 
 .n-tab.is-active[data-v-339e5ee5]{
@@ -120,10 +127,11 @@ const __style = `.n-tabs[data-v-339e5ee5]{
 
 .n-tabs-indicator[data-v-339e5ee5]{
   position: absolute;
-  bottom: 0;
-  height: 2px;
+  bottom: -1px;
+  height: 2.5px;
   background: var(--n-color-primary);
-  transition: all var(--n-transition-normal);
-  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--n-radius-full);
+  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
 }`
 injectStyle('data-v-339e5ee5', __style)

package/dist/components/NTabs.nexa

@@ -72,10 +72,17 @@ const activeIndex = computed(() =>
   position: relative;
   user-select: none;
   white-space: nowrap;
+  border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
 }
 
-.n-tab:hover {
-  color: var(--n-color-text-secondary);
+.n-tab:hover:not(.is-active):not(.is-disabled) {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-tab:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--n-color-primary);
 }
 
 .n-tab.is-active {
@@ -104,10 +111,11 @@ const activeIndex = computed(() =>
 
 .n-tabs-indicator {
   position: absolute;
-  bottom: 0;
-  height: 2px;
+  bottom: -1px;
+  height: 2.5px;
   background: var(--n-color-primary);
-  transition: all var(--n-transition-normal);
-  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--n-radius-full);
+  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
 }
 </style>

package/dist/components/NTag.js

@@ -39,7 +39,7 @@ const __style = `.n-tag[data-v-15b3bf49]{
   display: inline-flex;
   align-items: center;
   gap: var(--n-space-1);
-  padding: 0.2rem 0.6rem;
+  padding: 0.25rem 0.7rem;
   font-size: var(--n-text-xs);
   font-weight: var(--n-weight-semibold);
   border-radius: var(--n-radius-sm);
@@ -47,14 +47,15 @@ const __style = `.n-tag[data-v-15b3bf49]{
   font-family: var(--n-font-sans);
   white-space: nowrap;
   border: 1px solid transparent;
+  letter-spacing: 0.02em;
 }
 
 .n-tag.is-rounded[data-v-15b3bf49]{
   border-radius: var(--n-radius-full);
 }
 
-.n-tag-sm[data-v-15b3bf49]{ padding: 0.1rem 0.4rem; font-size: 0.65rem; }
-.n-tag-lg[data-v-15b3bf49]{ padding: 0.35rem 0.8rem; font-size: var(--n-text-sm); }
+.n-tag-sm[data-v-15b3bf49]{ padding: 0.15rem 0.5rem; font-size: 0.65rem; }
+.n-tag-lg[data-v-15b3bf49]{ padding: 0.4rem 0.9rem; font-size: var(--n-text-sm); }
 
 .n-tag-primary[data-v-15b3bf49]{
   background: var(--n-color-primary-light);
@@ -101,11 +102,19 @@ const __style = `.n-tag[data-v-15b3bf49]{
   padding: 0;
   margin-left: var(--n-space-1);
   color: inherit;
-  opacity: 0.6;
-  transition: opacity var(--n-transition-fast);
+  opacity: 0.5;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  border-radius: var(--n-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
 }
 
 .n-tag-close[data-v-15b3bf49]:hover{
   opacity: 1;
+  background: rgba(0,0,0,0.08);
+  transform: scale(1.15);
 }`
 injectStyle('data-v-15b3bf49', __style)