nexa-ui-kit 0.11.8 → 0.11.10

package/dist/components/NModal.js

@@ -127,5 +127,5 @@ _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-46af727f]{
  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;
+const __style = `.n-modal-root[data-v-46af727f]{
  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;
 injectStyle('data-v-46af727f', __style)

package/dist/components/NModal.nexa

@@ -118,5 +118,5 @@ onUnmounted(() => {
 </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);
  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;
+.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/dist/components/NPaginator.js

@@ -147,7 +147,7 @@ const __style = `.n-paginator[data-v-2f8f305d]{
   border-radius: var(--n-radius-md);
   padding: 0.3rem 0.55rem;
   cursor: pointer;
-  transition: color var(--n-transition-fast); 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;

package/dist/components/NPaginator.nexa

@@ -99,7 +99,7 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   border-radius: var(--n-radius-md);
   padding: 0.3rem 0.55rem;
   cursor: pointer;
-  transition: color var(--n-transition-fast); 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;

package/dist/components/NRadio.js

@@ -56,7 +56,7 @@ const __style = `.n-radio[data-v-56e32a4f]{
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color var(--n-transition-fast); 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[data-v-56e32a4f]{

package/dist/components/NRadio.nexa

@@ -42,7 +42,7 @@ const select = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color var(--n-transition-fast); 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 {

package/dist/components/NSelect.js

@@ -377,33 +377,35 @@ const __style = `.n-select[data-v-2dd8d436]{
   transform-origin: top center;
 }
 @keyframes n-dropdown-in {
-from[data-v-2dd8d436]{ opacity: 0;  scale(0.98); }
-to[data-v-2dd8d436]{ opacity: 1;  scale(1); }
+from[data-v-2dd8d436]{ opacity: 0; transform: scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1; transform: scale(1); }
 }
 .n-select-dropdown.is-top[data-v-2dd8d436]{
   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;  scale(0.98); }
-to[data-v-2dd8d436]{ opacity: 1;  scale(1); }
+from[data-v-2dd8d436]{ opacity: 0; transform: scale(0.98); }
+to[data-v-2dd8d436]{ opacity: 1; transform: scale(1); }
 }
 .n-select-search[data-v-2dd8d436]{
-  padding: var(--n-space-2);
+  padding: 0.5rem;
   border-bottom: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
 }
 .n-select-search-input[data-v-2dd8d436]{
   width: 100%;
-  background: var(--n-color-bg);
+  background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-sm);
-  padding: var(--n-space-2) var(--n-space-3);
+  padding: 0.4rem 0.6rem;
   color: var(--n-color-text);
   font-size: var(--n-text-sm);
   outline: none;
-  font-family: inherit;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
 .n-select-search-input[data-v-2dd8d436]:focus{
   border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 1px var(--n-color-primary);
 }
 .n-select-options[data-v-2dd8d436]{
   max-height: 250px;
@@ -419,35 +421,17 @@ to[data-v-2dd8d436]{ opacity: 1;  scale(1); }
   background: var(--n-color-bg);
 }
 .n-select-option[data-v-2dd8d436]{
-  padding: 0.7rem 1rem;
-  padding-left: 1rem;
+  padding: 0.6rem 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  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[data-v-2dd8d436]::before{
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 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{
-   scaleY(1);
+  transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
+  border-radius: var(--n-radius-sm);
+  margin: 0.15rem 0.35rem;
 }
 .n-select-option[data-v-2dd8d436]:hover, 
 .n-select-option.is-focused[data-v-2dd8d436]{
-  background: var(--n-color-glass);
+  background: var(--n-color-surface-hover);
   color: var(--n-color-text);
-  padding-left: 1.25rem;
 }
 .n-select-option.is-selected[data-v-2dd8d436]{
   background: var(--n-color-primary-light);

package/dist/components/NSelect.nexa

@@ -356,33 +356,35 @@ onBeforeUnmount(() => {
   transform-origin: top center;
 }
 @keyframes n-dropdown-in {
-  from { opacity: 0;  scale(0.98); }
-  to { opacity: 1;  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;  scale(0.98); }
-  to { opacity: 1;  scale(1); }
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
 }
 .n-select-search {
-  padding: var(--n-space-2);
+  padding: 0.5rem;
   border-bottom: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
 }
 .n-select-search-input {
   width: 100%;
-  background: var(--n-color-bg);
+  background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-sm);
-  padding: var(--n-space-2) var(--n-space-3);
+  padding: 0.4rem 0.6rem;
   color: var(--n-color-text);
   font-size: var(--n-text-sm);
   outline: none;
-  font-family: inherit;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
 .n-select-search-input:focus {
   border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 1px var(--n-color-primary);
 }
 .n-select-options {
   max-height: 250px;
@@ -398,35 +400,17 @@ onBeforeUnmount(() => {
   background: var(--n-color-bg);
 }
 .n-select-option {
-  padding: 0.7rem 1rem;
-  padding-left: 1rem;
+  padding: 0.6rem 1rem;
   color: var(--n-color-text-secondary);
   cursor: pointer;
-  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%;
-   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 {
-   scaleY(1);
+  transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
+  border-radius: var(--n-radius-sm);
+  margin: 0.15rem 0.35rem;
 }
 .n-select-option:hover,
 .n-select-option.is-focused {
-  background: var(--n-color-glass);
+  background: var(--n-color-surface-hover);
   color: var(--n-color-text);
-  padding-left: 1.25rem;
 }
 .n-select-option.is-selected {
   background: var(--n-color-primary-light);

package/dist/components/NTag.js

@@ -94,7 +94,7 @@ const __style = `.n-tag[data-v-15b3bf49]{
   margin-left: var(--n-space-1);
   color: inherit;
   opacity: 0.5;
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   border-radius: var(--n-radius-sm);
   display: flex;
   align-items: center;

package/dist/components/NTag.nexa

@@ -76,7 +76,7 @@ const emit = defineEmits(['close'])
   margin-left: var(--n-space-1);
   color: inherit;
   opacity: 0.5;
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   border-radius: var(--n-radius-sm);
   display: flex;
   align-items: center;

package/dist/components/NToastContainer.js

@@ -119,7 +119,7 @@ const __style = `.n-toast-container[data-v-4587cf3e]{
   box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
   cursor: pointer;
   animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   backdrop-filter: blur(16px);
   border-left: 3px solid var(--n-color-border);
 }

package/dist/components/NToastContainer.nexa

@@ -85,7 +85,7 @@ const positionClass = `is-${props.position.replace('-', '-')}`
   box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
   cursor: pointer;
   animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   backdrop-filter: blur(16px);
   border-left: 3px solid var(--n-color-border);
 }

package/dist/components/NTreeMenu.js

@@ -128,7 +128,7 @@ const __style = `.n-tree-menu[data-v-278e8175]{
   opacity: 0.35;
 }
 .n-tree-row[data-v-278e8175]:hover{
-  background-color: var(--n-color-surface);, color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
+  background-color: var(--n-color-surface-hover);
 }
 .n-tree-row[data-v-278e8175]:active{
   background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);

package/dist/components/NTreeMenu.nexa

@@ -117,7 +117,7 @@ const toggle = (id, e) => {
   opacity: 0.35;
 }
 .n-tree-row:hover {
-  background-color: var(--n-color-surface);, color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
+  background-color: var(--n-color-surface-hover);
 }
 .n-tree-row:active {
   background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.11.8",
-    "nexa-mobile": "0.11.8"
+    "nexa-framework": "^0.11.10",
+    "nexa-mobile": "^0.11.10"
   },
   "devDependencies": {
-    "cpx": "^1.5.0",
-    "nexa-compiler": "0.11.8"
+    "nexa-compiler": "^0.11.10",
+    "cpx": "^1.5.0"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",

package/src/components/NButton.nexa

@@ -187,6 +187,23 @@ const handleClick = (e) => {
 }
 .n-btn-info:focus-visible { box-shadow: var(--n-ring-info); }
 
+/* Ghost */
+.n-btn-ghost {
+  background-color: transparent;
+  color: var(--n-color-text);
+  border-color: transparent;
+}
+.n-btn-ghost:hover:not(:disabled) {
+  background-color: var(--n-color-surface-hover);
+  color: var(--n-color-text);
+}
+.n-btn-ghost:active:not(:disabled), .is-pressed.n-btn-ghost {
+  background-color: var(--n-color-border);
+}
+.n-btn-ghost:focus-visible {
+  box-shadow: var(--n-ring-surface);
+}
+
 /* Outlined variants */
 .is-outlined {
   background-color: transparent !important;

package/src/components/NCheckbox.nexa

@@ -48,7 +48,7 @@ const handleToggle = () => {
   user-select: none;
   padding: 0.5rem 0.75rem;
   border-radius: var(--n-radius-md);
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
 }
 .n-checkbox:hover:not(.is-disabled) {
   background: rgba(99, 102, 241, 0.08);