@nexus-cross/design-system 1.0.6-beta.2 → 1.0.6

package/dist/styles.layered.css

@@ -93,7 +93,10 @@
   /* ── Shared: Shadow ── */
   --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
   --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
-  --shadow-comp-lg: var(--shadow-elevation-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  --shadow-comp-lg: var(
+    --shadow-elevation-lg,
+    0 10px 15px -3px rgb(0 0 0 / 0.1)
+  );
 
   /* ── Shared: Overlay ── */
   --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));
@@ -135,6 +138,14 @@
   box-shadow: var(--shadow-comp-btn);
   transition-property: color, background-color, border-color;
   transition-duration: 200ms;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
 }
 .nexus-btn:disabled,
 .nexus-btn[aria-disabled='true'] {
@@ -369,7 +380,9 @@
   font-weight: 500;
   line-height: 1;
   color: var(--color-text-primary);
-  transition: border-color 200ms, box-shadow 200ms;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
 }
 :where(.nexus-text-input) {
   width: 100%;
@@ -398,15 +411,18 @@
 
 /* ── Sizes ── */
 .nexus-text-input--xl {
-  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-text-input--lg {
-  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-text-input--md {
-  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-sm, 0.875rem);
 }
 
@@ -502,13 +518,15 @@
   text-decoration: underline;
   transition: color 150ms;
 }
-.nexus-price-input-field__balance:hover .nexus-price-input-field__balance-value {
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value {
   color: var(--color-text-primary);
 }
 .nexus-price-input-field__balance-value--exceeded {
   color: var(--color-status-danger);
 }
-.nexus-price-input-field__balance:hover .nexus-price-input-field__balance-value--exceeded {
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value--exceeded {
   color: var(--color-status-danger);
 }
 .nexus-price-input-field__description {
@@ -533,7 +551,9 @@
   font-weight: 500;
   line-height: 1;
   color: var(--color-text-primary);
-  transition: border-color 200ms, box-shadow 200ms;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
 }
 :where(.nexus-price-input) {
   width: 100%;
@@ -562,15 +582,18 @@
 
 /* ── Sizes ── */
 .nexus-price-input--xl {
-  padding: calc(var(--spacing-padding-md, 1rem) - 1px) var(--spacing-padding-md, 1rem);
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-price-input--lg {
-  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-base, 1rem);
 }
 .nexus-price-input--md {
-  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px) var(--spacing-padding-sm, 0.75rem);
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
   font-size: var(--text-text-sm, 0.875rem);
 }
 
@@ -612,52 +635,137 @@
      TextArea
      ═══════════════════════════════════════════ */
 
+/* ── Field wrapper ── */
+.nexus-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-textarea-field__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  line-height: 1;
+}
+.nexus-textarea-field__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nexus-textarea-field__description {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-textarea-field__description--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+.nexus-textarea-field__count {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.nexus-textarea-field__count--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+
+/* ── Textarea box ── */
 .nexus-textarea {
-  border-radius: var(--radius-corner-md, 0.375rem);
+  border-radius: var(--radius-corner-md, 0.5rem);
   border: 1px solid var(--color-border-default);
   background: var(--color-surface-default);
-  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
-  font-size: var(--text-text-sm, 0.875rem);
   color: var(--color-text-primary);
-  transition-property: border-color;
-  transition-duration: 200ms;
+  font-weight: 500;
+  line-height: 1.5;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
   resize: none;
+  min-height: 100px;
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
 :where(.nexus-textarea) {
   width: 100%;
 }
 .nexus-textarea::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-muted);
 }
 .nexus-textarea:focus-visible {
   outline: none;
 }
-.nexus-textarea:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+
+/* Hover */
+.nexus-textarea:hover:not(.nexus-textarea--disabled):not(:focus) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
 }
+
+/* Focus — default */
 .nexus-textarea--default:focus {
-  border-color: var(--color-text-primary);
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
 }
+
+/* Error */
 .nexus-textarea--error {
-  border-color: var(--color-status-danger);
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
 }
 .nexus-textarea--error:focus {
-  border-color: var(--color-status-danger);
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
 }
-.nexus-textarea-wrap {
-  display: flex;
-  flex-direction: column;
+
+/* Disabled */
+.nexus-textarea--disabled {
+  cursor: not-allowed;
+  background: var(
+    --color-surface-default-disabled,
+    var(--color-surface-strong)
+  );
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
 }
-.nexus-textarea-count {
-  margin-top: 0.25rem;
-  text-align: right;
-  font-size: var(--text-text-xs, 0.75rem);
-  color: var(--color-text-tertiary);
+
+/* ── Sizes ── */
+.nexus-textarea--lg {
+  font-size: var(--text-text-medium-base, 1rem);
+  letter-spacing: -0.16px;
 }
-.nexus-textarea-count__current {
-  color: var(--color-text-primary);
-  font-weight: 500;
+.nexus-textarea--md {
+  font-size: var(--text-text-medium-sm, 0.875rem);
+  letter-spacing: -0.14px;
+}
+
+/* ── Resize modes ── */
+.nexus-textarea--resize-default {
+  resize: vertical;
+}
+.nexus-textarea--resize-auto {
+  resize: none;
+  overflow: hidden;
+}
+
+/* ── Custom scrollbar ── */
+.nexus-textarea:not(.nexus-textarea--resize-auto) {
+  overflow-y: auto;
+}
+.nexus-textarea::-webkit-scrollbar {
+  width: 5px;
+}
+.nexus-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+.nexus-textarea::-webkit-scrollbar-thumb {
+  background: var(--color-icon-muted, #c6d0da);
+  border-radius: var(--radius-corner-full, 9999px);
 }
 
 /* ═══════════════════════════════════════════
@@ -666,81 +774,167 @@
 
 .nexus-number-input {
   display: flex;
-  align-items: center;
-  border-radius: var(--radius-corner-md, 0.375rem);
-  border: 1px solid var(--color-border-default);
-  background: var(--color-surface-default);
-  color: var(--color-text-primary);
-  transition: border-color 200ms, box-shadow 200ms;
+  flex-direction: column;
+  align-items: stretch;
 }
 :where(.nexus-number-input) {
   width: 100%;
 }
-.nexus-number-input:hover:not(.nexus-number-input--disabled):not(:focus-within) {
-  box-shadow: 0 0 0 0.5px var(--color-border-default);
+
+/* ── Header (label + max) ── */
+.nexus-number-input__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
 }
-.nexus-number-input--default:focus-within {
-  border-color: var(--color-accent-primary);
-  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+.nexus-number-input__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: var(--font-weight-label-semibold-md, 600);
+  line-height: 1;
+  color: var(--color-text-tertiary);
 }
-.nexus-number-input--error {
-  border-color: var(--color-status-danger);
+.nexus-number-input__max {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  cursor: pointer;
 }
-.nexus-number-input--error:focus-within {
-  border-color: var(--color-status-danger);
-  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+.nexus-number-input__max:disabled {
+  cursor: default;
 }
-.nexus-number-input--xl {
-  height: 3.5rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input__max-text {
+  color: var(--color-text-tertiary);
 }
-.nexus-number-input--lg {
-  height: 3rem;
-  font-size: var(--text-text-base, 1rem);
+.nexus-number-input__max-value {
+  color: var(--color-text-secondary);
+  text-decoration: underline;
 }
-.nexus-number-input--md {
-  height: 2.5rem;
-  font-size: var(--text-text-sm, 0.875rem);
+.nexus-number-input__max-value--exceeded {
+  color: var(--color-status-danger-intense);
 }
-.nexus-number-input--sm {
-  height: 2rem;
-  font-size: var(--text-text-xs, 0.75rem);
+
+/* ── Container (the bordered input box) ── */
+.nexus-number-input__container {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  outline: 0.5px solid transparent;
+  transition:
+    border-color var(--duration-transition-fast, 150ms),
+    outline-color var(--duration-transition-fast, 150ms);
+}
+.nexus-number-input--basic .nexus-number-input__container {
+  overflow: clip;
+}
+.nexus-number-input:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:hover {
+  border-color: var(--color-border-default-hover);
+  outline-color: var(--color-border-default-hover);
 }
-.nexus-number-input--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.nexus-number-input:not(.nexus-number-input--disabled):not(
+    .nexus-number-input--error
+  )
+  .nexus-number-input__container:focus-within {
+  border-color: var(--color-accent-primary-focus);
+  outline-color: var(--color-accent-primary-focus);
+}
+.nexus-number-input--error .nexus-number-input__container {
+  border-color: var(--color-status-danger-focus);
+  outline-color: var(--color-status-danger-focus);
+}
+.nexus-number-input--disabled .nexus-number-input__container {
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  pointer-events: none;
+}
+.nexus-number-input--disabled .nexus-number-input__label {
+  color: var(--color-text-muted);
+}
+.nexus-number-input--disabled .nexus-number-input__max {
+  cursor: default;
+}
+.nexus-number-input--disabled .nexus-number-input__max-text,
+.nexus-number-input--disabled .nexus-number-input__max-value {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+.nexus-number-input--disabled .nexus-number-input__step {
+  color: var(--color-text-muted);
+}
+.nexus-number-input--disabled .nexus-number-input__bind-btn {
+  background: var(--color-surface-strong);
+  color: var(--color-text-muted);
 }
+.nexus-number-input--disabled .nexus-number-input__description {
+  color: var(--color-text-muted);
+}
+
+/* ── Input field ── */
 .nexus-number-input__field {
-  height: 100%;
-  width: 100%;
-  min-width: 0;
   flex: 1;
+  min-width: 0;
+  border: none;
   background: transparent;
   outline: none;
+  font-size: var(--text-label-lg, 1rem);
+  font-weight: var(--font-weight-label-lg, 500);
+  line-height: 1;
+  color: var(--color-text-primary);
 }
 .nexus-number-input__field::placeholder {
-  color: var(--color-text-tertiary);
+  color: var(--color-text-muted);
 }
 .nexus-number-input__field:focus-visible {
   outline: none;
 }
-.nexus-number-input__field--xl {
-  padding-inline: var(--spacing-padding-lg, 1.25rem);
+.nexus-number-input--disabled .nexus-number-input__field {
+  color: var(--color-text-muted);
+  cursor: not-allowed;
 }
-.nexus-number-input__field--lg {
-  padding-inline: var(--spacing-padding-md, 1rem);
+
+/* ── Size: field padding (basic) ── */
+.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
-.nexus-number-input__field--md {
-  padding-inline: var(--spacing-padding-sm, 0.75rem);
+.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem);
 }
-.nexus-number-input__field--sm {
-  padding-inline: 0.625rem;
+
+/* ── Size: field padding (bind) ── */
+.nexus-number-input--bind .nexus-number-input__container {
+  padding-inline: var(--spacing-padding-xs, 0.5rem);
+}
+.nexus-number-input--bind .nexus-number-input__field {
+  text-align: center;
+}
+.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {
+  padding: var(--spacing-padding-sm, 0.75rem);
 }
+.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {
+  padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);
+}
+
+/* ── Basic variant: chevron buttons column ── */
 .nexus-number-input__buttons {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
   border-left: 1px solid var(--color-border-default);
-  height: 100%;
+  width: 24px;
   flex-shrink: 0;
 }
 .nexus-number-input__step {
@@ -748,29 +942,84 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding-inline: 0.375rem;
-  color: var(--color-text-tertiary);
-  transition-property: color, background-color;
-  transition-duration: 150ms;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: var(--color-surface-subtle);
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
 }
 .nexus-number-input__step:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-hover);
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
 }
 .nexus-number-input__step:disabled {
-  opacity: 0.4;
+  color: var(--color-text-muted);
   pointer-events: none;
 }
 .nexus-number-input__step--up {
-  border-top-right-radius: var(--radius-corner-md, 0.375rem);
   border-bottom: 1px solid var(--color-border-default);
 }
-.nexus-number-input__step--down {
-  border-bottom-right-radius: var(--radius-corner-md, 0.375rem);
+.nexus-number-input__chevron-icon {
+  width: 8px;
+  height: 5px;
 }
-.nexus-number-input__step-icon {
-  width: 0.75rem;
-  height: 0.75rem;
+.nexus-number-input__chevron-icon--down {
+  transform: scaleY(-1);
+}
+
+/* ── Bind variant: +/- buttons ── */
+.nexus-number-input__bind-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  overflow: clip;
+  transition:
+    color var(--duration-transition-fast, 150ms),
+    background-color var(--duration-transition-fast, 150ms);
+}
+.nexus-number-input__bind-btn:hover {
+  background: var(--color-surface-subtle-hover);
+  color: var(--color-icon-primary);
+}
+.nexus-number-input__bind-btn:disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+.nexus-number-input--xl .nexus-number-input__bind-btn {
+  width: 30px;
+  height: 30px;
+}
+.nexus-number-input__bind-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* ── Description ── */
+.nexus-number-input__description {
+  margin: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  color: var(--color-text-tertiary);
+  height: 18px;
+}
+.nexus-number-input__description--error {
+  color: var(--color-status-danger-intense);
 }
 
 /* ═══════════════════════════════════════════
@@ -1095,6 +1344,12 @@
   user-select: none;
   border-radius: 9999px;
   border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
 }
 .nexus-chip[aria-disabled='true'] {
   opacity: 0.5;
@@ -1155,45 +1410,308 @@
 }
 
 /* ═══════════════════════════════════════════
-     Pagination
+     Badge
      ═══════════════════════════════════════════ */
 
-.nexus-pagination {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap-xs, 0.25rem);
-}
-.nexus-pagination--sm {
-  font-size: var(--text-text-xs, 0.75rem);
-}
-.nexus-pagination--md {
-  font-size: var(--text-text-sm, 0.875rem);
+.nexus-badge-wrapper {
+  position: relative;
 }
-.nexus-page-btn {
+.nexus-badge {
+  --nexus-badge-offset-x: 0px;
+  --nexus-badge-offset-y: 0px;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-corner-md, 0.375rem);
-  font-weight: 500;
-  transition-property: color, background-color;
-  transition-duration: 150ms;
-  user-select: none;
-  border: 1px solid transparent;
-}
-.nexus-page-btn:disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-.nexus-page-btn--sm {
-  width: 1.75rem;
-  height: 1.75rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: var(--radius-corner-full, 9999px);
   font-size: var(--text-text-xs, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  line-height: 1;
+  color: var(--color-text-inverted);
+}
+.nexus-badge--positioned {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  transform: translate(
+    calc(50% + var(--nexus-badge-offset-x)),
+    calc(-50% + var(--nexus-badge-offset-y))
+  );
+}
+.nexus-badge--dot {
+  min-width: 0;
+  padding: 0;
+}
+.nexus-badge--dot.nexus-badge--sm {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.nexus-badge--dot.nexus-badge--md {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.nexus-badge--dot.nexus-badge--lg {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.nexus-badge--danger {
+  background: var(--color-status-danger);
+  color: var(--color-static-white);
+}
+.nexus-badge--primary {
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-badge--secondary {
+  background: var(--color-accent-secondary);
+  color: var(--color-accent-on-secondary);
+}
+.nexus-badge--info {
+  background: var(--color-status-info);
+  color: var(--color-static-white);
+}
+.nexus-badge--success {
+  background: var(--color-status-success);
+  color: var(--color-static-white);
+}
+.nexus-badge--warning {
+  background: var(--color-status-warning);
+  color: var(--color-static-black);
+}
+.nexus-badge--sm:not(.nexus-badge--dot) {
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+}
+.nexus-badge--lg:not(.nexus-badge--dot) {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 0.45rem;
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ═══════════════════════════════════════════
+     Progress
+     ═══════════════════════════════════════════ */
+
+.nexus-progress-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  width: 100%;
+}
+.nexus-progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-progress__label {
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+}
+.nexus-progress__value {
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.nexus-progress {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-surface-strong);
+}
+.nexus-progress--sm {
+  height: 0.25rem;
+}
+.nexus-progress--md {
+  height: 0.375rem;
+}
+.nexus-progress--lg {
+  height: 0.5rem;
+}
+.nexus-progress__bar {
+  height: 100%;
+  border-radius: inherit;
+  transition:
+    width var(--duration-transition-normal, 200ms) var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1));
+}
+.nexus-progress--primary .nexus-progress__bar {
+  background: var(--color-accent-primary);
+}
+.nexus-progress--success .nexus-progress__bar {
+  background: var(--color-status-success);
+}
+.nexus-progress--warning .nexus-progress__bar {
+  background: var(--color-status-warning);
+}
+.nexus-progress--danger .nexus-progress__bar {
+  background: var(--color-status-danger);
+}
+.nexus-progress--info .nexus-progress__bar {
+  background: var(--color-status-info);
+}
+.nexus-progress__bar--indeterminate {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 35% !important;
+  animation: nexus-progress-indeterminate 1.1s var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1))
+    infinite;
+}
+@keyframes nexus-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(calc(100% / 0.35 * 3));
+  }
+}
+
+/* ═══════════════════════════════════════════
+     Alert
+     ═══════════════════════════════════════════ */
+
+.nexus-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-md, 1rem);
+  border-radius: var(--radius-corner-md, 8px);
+  border-width: var(--border-width-stroke-thin, 1px);
+  border-style: solid;
+}
+.nexus-alert__icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  line-height: 0;
+}
+.nexus-alert__icon-svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-alert__body {
+  flex: 1;
+  min-width: 0;
+}
+.nexus-alert__title {
+  margin: 0;
+  font-weight: var(--font-weight-heading-h7, 600);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+}
+.nexus-alert__description {
+  margin-top: var(--spacing-gap-xs, 0.25rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+}
+.nexus-alert__action {
+  flex-shrink: 0;
+  align-self: center;
+}
+.nexus-alert__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  border: none;
+  border-radius: var(--radius-corner-sm, 4px);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: var(--color-icon-secondary);
+  transition: color var(--duration-transition-fast, 150ms) var(--ease-transition-fast, ease);
+}
+.nexus-alert__close:hover {
+  color: var(--color-icon-primary);
+}
+.nexus-alert__close-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-alert--info {
+  background: color-mix(in srgb, var(--color-status-info-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-info) 28%, var(--color-border-default));
+}
+.nexus-alert--info .nexus-alert__icon {
+  color: var(--color-status-info-intense);
+}
+.nexus-alert--success {
+  background: color-mix(in srgb, var(--color-status-success-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-success) 28%, var(--color-border-default));
+}
+.nexus-alert--success .nexus-alert__icon {
+  color: var(--color-status-success-intense);
+}
+.nexus-alert--warning {
+  background: color-mix(in srgb, var(--color-status-warning-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-warning) 28%, var(--color-border-default));
+}
+.nexus-alert--warning .nexus-alert__icon {
+  color: var(--color-status-warning-intense);
+}
+.nexus-alert--danger {
+  background: color-mix(in srgb, var(--color-status-danger-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-danger) 28%, var(--color-border-default));
+}
+.nexus-alert--danger .nexus-alert__icon {
+  color: var(--color-status-danger-intense);
+}
+
+/* ═══════════════════════════════════════════
+     Pagination
+     ═══════════════════════════════════════════ */
+
+.nexus-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-pagination--sm {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-pagination--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-corner-md, 0.375rem);
+  font-weight: 500;
+  transition-property: color, background-color;
+  transition-duration: 150ms;
+  user-select: none;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+}
+.nexus-page-btn:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.nexus-page-btn--sm {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-page-btn--md {
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: var(--text-text-sm, 0.875rem);
 }
-.nexus-page-btn--md {
-  width: 2.25rem;
-  height: 2.25rem;
-  font-size: var(--text-text-sm, 0.875rem);
-}
 .nexus-page-btn--active {
   background: var(--color-accent-primary);
   color: var(--color-static-white);
@@ -1241,6 +1759,12 @@
   outline: none;
   transition-property: color, background-color, border-color;
   transition-duration: 150ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
 }
 .nexus-tab-trigger--line {
   padding: 0.625rem var(--spacing-padding-md, 1rem);
@@ -1426,8 +1950,13 @@
   justify-content: space-between;
   border-radius: var(--radius-corner-sm, 0.25rem);
   border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default, transparent);
   color: var(--color-text-primary);
   font-size: var(--text-text-sm, 0.875rem);
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
   transition-property: border-color;
   transition-duration: 200ms;
 }
@@ -1513,12 +2042,24 @@
   animation: nexus-select-slide-out 100ms ease-in forwards;
 }
 @keyframes nexus-select-slide-in {
-  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
-  to   { opacity: 1; transform: translateY(0) scaleY(1); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
 }
 @keyframes nexus-select-slide-out {
-  from { opacity: 1; transform: translateY(0) scaleY(1); }
-  to   { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
 }
 .nexus-select-content--sm {
   width: 4rem;
@@ -1562,70 +2103,359 @@
 }
 
 /* ═══════════════════════════════════════════
-     Tooltip
+     DropdownMenu
      ═══════════════════════════════════════════ */
 
-.nexus-tooltip-content {
-  z-index: 50;
-  display: flex;
+.nexus-dropdown-content {
+  position: relative;
+  z-index: var(--z-index-layer-dropdown, 10);
+  min-width: 10rem;
   overflow: hidden;
-  border-radius: var(--radius-corner-md, 0.375rem);
-  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
-  font-size: var(--text-text-sm, 0.875rem);
-}
-.nexus-tooltip--light {
-  border: 1px solid var(--color-border-default);
-  background: var(--color-static-white);
-  color: var(--color-static-black);
-  box-shadow: var(--shadow-comp-md);
-}
-.nexus-tooltip--dark {
-  border: none;
-  background: var(--color-static-black);
-  color: var(--color-static-white);
-}
-.nexus-tooltip-arrow--dark {
-  fill: var(--color-static-black);
-}
-.nexus-tooltip-arrow--light {
-  fill: var(--color-static-white);
-}
-.nexus-tooltip-trigger {
-  cursor: default;
-}
-
-/* ═══════════════════════════════════════════
-     Popover
-     ═══════════════════════════════════════════ */
-
-.nexus-popover-content {
-  z-index: 50;
-  border-radius: var(--radius-corner-lg, 0.5rem);
+  border-radius: var(--radius-corner-md, 0.5rem);
   border: 1px solid var(--color-border-default);
-  padding: var(--spacing-padding-md, 1rem);
-  box-shadow: var(--shadow-comp-lg);
-  outline: none;
   background: var(--color-surface-default);
+  padding: var(--spacing-padding-xs, 0.5rem);
+  box-shadow: var(--shadow-comp-lg);
   color: var(--color-text-primary);
-  transform-origin: var(--radix-popover-content-transform-origin);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   will-change: transform, opacity;
 }
-.nexus-popover-content[data-state='open'] {
-  animation: nexus-popover-in 150ms ease-out;
-}
-.nexus-popover-content[data-state='closed'] {
-  animation: nexus-popover-out 100ms ease-in forwards;
-}
-@keyframes nexus-popover-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
+.nexus-dropdown-content[data-state='open'] {
+  animation: nexus-dropdown-in 150ms ease-out;
 }
-@keyframes nexus-popover-out {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0; transform: scale(0.95); }
+.nexus-dropdown-content[data-state='closed'] {
+  animation: nexus-dropdown-out 100ms ease-in forwards;
 }
-.nexus-popover-arrow {
-  fill: var(--color-surface-default);
+@keyframes nexus-dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nexus-dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+.nexus-dropdown-separator {
+  margin: var(--spacing-padding-xs, 0.5rem) calc(-1 * var(--spacing-padding-xs, 0.5rem));
+  height: 1px;
+  background: var(--color-border-default);
+}
+.nexus-dropdown-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  outline: none;
+  user-select: none;
+  transition: background-color 150ms ease;
+}
+.nexus-dropdown-item[data-highlighted] {
+  background: var(--color-surface-hover);
+}
+.nexus-dropdown-item[data-disabled] {
+  pointer-events: none;
+  opacity: var(--opacity-disabled-element, 0.4);
+}
+.nexus-dropdown-item--danger {
+  color: var(--color-status-danger);
+}
+.nexus-dropdown-item--danger[data-highlighted] {
+  background: var(--color-status-danger-dim);
+  color: var(--color-status-danger-intense);
+}
+.nexus-dropdown-item__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-dropdown-item--danger .nexus-dropdown-item__icon {
+  color: var(--color-status-danger);
+}
+
+/* ═══════════════════════════════════════════
+     ToggleGroup
+     ═══════════════════════════════════════════ */
+
+.nexus-toggle-group {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+  border-radius: var(--radius-corner-md, 0.5rem);
+}
+.nexus-toggle-group--default {
+  background: var(--color-surface-subtle);
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+
+/* ── Sliding indicator ── */
+.nexus-toggle-group__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-sm);
+  pointer-events: none;
+  z-index: 0;
+  will-change: transform, width;
+}
+.nexus-toggle-group__indicator--animated {
+  transition:
+    transform 200ms cubic-bezier(0, 0, 0.2, 1),
+    width 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+.nexus-toggle-group--outline {
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: 0;
+}
+.nexus-toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  border: none;
+  background: transparent;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color var(--duration-transition-normal, 200ms) var(--ease-transition-fast);
+  outline: none;
+  position: relative;
+  z-index: 1;
+}
+.nexus-toggle-group__item:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-surface-default), 0 0 0 4px var(--color-accent-primary-focus);
+}
+.nexus-toggle-group__item[data-disabled] {
+  pointer-events: none;
+  opacity: var(--opacity-disabled-element, 0.4);
+}
+.nexus-toggle-group--default .nexus-toggle-group__item[data-state='on'] {
+  color: var(--color-text-primary);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item {
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] {
+  background: var(--color-accent-primary-dim);
+  color: var(--color-accent-primary-intense);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item:not([data-state='on']):hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+.nexus-toggle-group--sm .nexus-toggle-group__item {
+  min-height: var(--size-control-sm, 2rem);
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-toggle-group--md .nexus-toggle-group__item {
+  min-height: var(--size-control-md, 2.5rem);
+  padding-inline: var(--spacing-padding-md, 1rem);
+}
+.nexus-toggle-group--lg .nexus-toggle-group__item {
+  min-height: var(--size-control-lg, 3rem);
+  padding-inline: var(--spacing-padding-lg, 1.5rem);
+}
+.nexus-toggle-group__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-toggle-group__item[data-state='on'] .nexus-toggle-group__icon {
+  color: var(--color-icon-primary);
+}
+
+/* ═══════════════════════════════════════════
+     Slider
+     ═══════════════════════════════════════════ */
+
+.nexus-slider-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-slider__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-md, 1rem);
+}
+.nexus-slider__label {
+  font-size: var(--text-label-md, 0.875rem);
+  font-weight: var(--font-weight-label-md, 500);
+  color: var(--color-text-primary);
+}
+.nexus-slider__value {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}
+.nexus-slider {
+  position: relative;
+  display: flex;
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+  align-items: center;
+}
+.nexus-slider[data-disabled] {
+  opacity: var(--opacity-disabled-element, 0.4);
+  pointer-events: none;
+}
+.nexus-slider__track {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-surface-strong);
+}
+.nexus-slider__range {
+  position: absolute;
+  height: 100%;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-accent-primary);
+}
+.nexus-slider__thumb {
+  display: block;
+  flex-shrink: 0;
+  border-radius: var(--radius-corner-full, 9999px);
+  border: 2px solid var(--color-accent-primary);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-sm);
+  outline: none;
+  transition:
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+.nexus-slider__thumb:hover {
+  box-shadow: var(--shadow-md);
+}
+.nexus-slider__thumb:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--color-surface-default),
+    0 0 0 4px var(--color-accent-primary-focus);
+}
+.nexus-slider--sm .nexus-slider__track {
+  height: 0.25rem;
+}
+.nexus-slider--sm .nexus-slider__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.nexus-slider--md .nexus-slider__track {
+  height: 0.375rem;
+}
+.nexus-slider--md .nexus-slider__thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.nexus-slider--lg .nexus-slider__track {
+  height: 0.5rem;
+}
+.nexus-slider--lg .nexus-slider__thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* ═══════════════════════════════════════════
+     Tooltip
+     ═══════════════════════════════════════════ */
+
+.nexus-tooltip-content {
+  z-index: 50;
+  display: flex;
+  overflow: hidden;
+  border-radius: var(--radius-corner-md, 0.375rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-tooltip--light {
+  border: 1px solid var(--color-border-default);
+  background: var(--color-static-white);
+  color: var(--color-static-black);
+  box-shadow: var(--shadow-comp-md);
+}
+.nexus-tooltip--dark {
+  border: none;
+  background: var(--color-static-black);
+  color: var(--color-static-white);
+}
+.nexus-tooltip-arrow--dark {
+  fill: var(--color-static-black);
+}
+.nexus-tooltip-arrow--light {
+  fill: var(--color-static-white);
+}
+.nexus-tooltip-trigger {
+  cursor: default;
+}
+
+/* ═══════════════════════════════════════════
+     Popover
+     ═══════════════════════════════════════════ */
+
+.nexus-popover-content {
+  z-index: 50;
+  border-radius: var(--radius-corner-lg, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-padding-md, 1rem);
+  box-shadow: var(--shadow-comp-lg);
+  outline: none;
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+  transform-origin: var(--radix-popover-content-transform-origin);
+  will-change: transform, opacity;
+}
+.nexus-popover-content[data-state='open'] {
+  animation: nexus-popover-in 150ms ease-out;
+}
+.nexus-popover-content[data-state='closed'] {
+  animation: nexus-popover-out 100ms ease-in forwards;
+}
+@keyframes nexus-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nexus-popover-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.nexus-popover-arrow {
+  fill: var(--color-surface-default);
 }
 
 /* ═══════════════════════════════════════════
@@ -1728,7 +2558,15 @@
   flex: 1;
   align-items: center;
   justify-content: space-between;
+  padding: 0;
   padding-block: var(--spacing-padding-md, 1rem);
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-align: left;
   transition: all 150ms;
 }
 .nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {
@@ -1833,6 +2671,10 @@
   border: 1px solid var(--color-border-default);
   box-shadow: var(--shadow-comp-sm);
   color: var(--color-text-primary);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  margin: 0;
   transition-property: background-color;
   transition-duration: 150ms;
 }
@@ -1863,6 +2705,9 @@
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 9999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
   transition-property: background-color;
   transition-duration: 150ms;
 }
@@ -1909,11 +2754,7 @@
   color: var(--color-status-positive);
 }
 .nexus-toast--error {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-danger) 30%,
-    transparent
-  );
+  border-color: color-mix(in srgb, var(--color-status-danger) 30%, transparent);
   background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);
   color: var(--color-status-danger);
 }
@@ -2210,6 +3051,9 @@
   cursor: pointer;
   align-items: center;
   justify-content: flex-end;
+  border: none;
+  background: transparent;
+  padding: 0;
 }
 .nexus-modal-close-btn--bottom-sheet {
   position: relative;
@@ -2569,4 +3413,590 @@
   }
 }
 
+/* ═══════════════════════════════════════════
+     EmptyState
+     ═══════════════════════════════════════════ */
+
+.nexus-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-lg, 1.5rem);
+  color: var(--color-text-primary);
+}
+.nexus-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--spacing-gap-xs, 0.25rem);
+  color: var(--color-icon-muted);
+}
+.nexus-empty-state__default-icon {
+  width: var(--size-icon-xl, 2rem);
+  height: var(--size-icon-xl, 2rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__default-icon {
+  width: var(--size-icon-lg, 1.5rem);
+  height: var(--size-icon-lg, 1.5rem);
+}
+.nexus-empty-state--lg .nexus-empty-state__default-icon {
+  width: var(--size-control-md, 2.5rem);
+  height: var(--size-control-md, 2.5rem);
+}
+.nexus-empty-state__title {
+  margin: 0;
+  font-size: var(--text-heading-h6, 1rem);
+  font-weight: var(--font-weight-heading-h6, 600);
+  letter-spacing: var(--letter-spacing-heading-h6, 0);
+  color: var(--color-text-primary);
+}
+.nexus-empty-state__description {
+  margin: 0;
+  max-width: 24rem;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-sm, 400);
+  letter-spacing: var(--letter-spacing-text-sm, -0.01em);
+  color: var(--color-text-secondary);
+}
+.nexus-empty-state__action {
+  margin-top: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-empty-state--sm {
+  padding: var(--spacing-padding-md, 1rem);
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__title {
+  font-size: var(--text-text-semibold-sm, 0.875rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__description {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-empty-state--lg {
+  padding: var(--spacing-padding-xl, 2rem);
+  gap: var(--spacing-gap-md, 1rem);
+}
+.nexus-empty-state--lg .nexus-empty-state__title {
+  font-size: var(--text-heading-h5, 1.125rem);
+}
+
+/* ═══════════════════════════════════════════
+     Breadcrumb
+     ═══════════════════════════════════════════ */
+
+.nexus-breadcrumb {
+  font-size: var(--text-text-sm, 0.875rem);
+  line-height: 1.25;
+}
+.nexus-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+}
+.nexus-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+}
+.nexus-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 var(--spacing-gap-xs, 0.25rem);
+  color: var(--color-icon-tertiary);
+  user-select: none;
+}
+.nexus-breadcrumb__separator-icon {
+  width: var(--size-icon-xs, 0.75rem);
+  height: var(--size-icon-xs, 0.75rem);
+}
+.nexus-breadcrumb__link {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+.nexus-breadcrumb__link:hover {
+  color: var(--color-text-primary);
+}
+.nexus-breadcrumb__link--btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+.nexus-breadcrumb__current {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+}
+.nexus-breadcrumb__ellipsis {
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ═══════════════════════════════════════════
+     Stepper
+     ═══════════════════════════════════════════ */
+
+.nexus-stepper {
+  width: 100%;
+}
+
+/* ── Horizontal ── */
+.nexus-stepper--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.nexus-stepper--horizontal .nexus-stepper__step {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.nexus-stepper--horizontal .nexus-stepper__indicator-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+}
+.nexus-stepper--horizontal .nexus-stepper__connector {
+  flex: 1;
+  height: 2px;
+  background: var(--color-border-default);
+  transition: background var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--horizontal .nexus-stepper__connector--hidden {
+  visibility: hidden;
+}
+.nexus-stepper--horizontal .nexus-stepper__connector--completed {
+  background: var(--color-accent-primary);
+}
+.nexus-stepper--horizontal .nexus-stepper__content {
+  margin-top: var(--spacing-gap-sm, 0.5rem);
+  padding: 0 var(--spacing-padding-2xs, 0.25rem);
+}
+
+/* ── Vertical ── */
+.nexus-stepper--vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.nexus-stepper--vertical .nexus-stepper__step {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-stepper--vertical .nexus-stepper__indicator-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+.nexus-stepper--vertical .nexus-stepper__connector {
+  width: 2px;
+  flex: 1;
+  min-height: var(--spacing-padding-sm, 0.75rem);
+  background: var(--color-border-default);
+  transition: background var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--vertical .nexus-stepper__connector--completed {
+  background: var(--color-accent-primary);
+}
+.nexus-stepper--vertical .nexus-stepper__content {
+  padding: var(--spacing-padding-xs, 0.5rem) 0;
+}
+
+/* ── Indicator (공통) ── */
+.nexus-stepper__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border-radius: var(--radius-corner-full, 9999px);
+  border: 2px solid var(--color-border-medium);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-secondary);
+  transition: all var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--sm .nexus-stepper__indicator {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-stepper__check {
+  width: var(--size-icon-sm, 1rem);
+  height: var(--size-icon-sm, 1rem);
+}
+.nexus-stepper--sm .nexus-stepper__check {
+  width: var(--size-icon-xs, 0.75rem);
+  height: var(--size-icon-xs, 0.75rem);
+}
+
+/* ── State colors ── */
+.nexus-stepper__step--completed .nexus-stepper__indicator {
+  border-color: var(--color-accent-primary);
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-stepper__step--active .nexus-stepper__indicator {
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+  background: var(--color-surface-default);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
+}
+.nexus-stepper__step--error .nexus-stepper__indicator {
+  border-color: var(--color-status-danger);
+  color: var(--color-status-danger);
+  background: var(--color-surface-default);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-danger) 20%, transparent);
+}
+.nexus-stepper__step--pending .nexus-stepper__indicator {
+  border-color: var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+/* ── Labels ── */
+.nexus-stepper__label {
+  display: block;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-primary);
+}
+.nexus-stepper--sm .nexus-stepper__label {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-stepper__description {
+  display: block;
+  margin-top: var(--spacing-gap-xs, 0.25rem);
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+}
+.nexus-stepper__step--pending .nexus-stepper__label {
+  color: var(--color-text-secondary);
+}
+.nexus-stepper__step--pending .nexus-stepper__description {
+  color: var(--color-text-muted);
+}
+
+/* ═══════════════════════════════════════════
+     TagInput
+     ═══════════════════════════════════════════ */
+
+.nexus-tag-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-tag-input__label {
+  font-size: var(--text-label-md, 0.875rem);
+  font-weight: var(--font-weight-label-md, 500);
+  color: var(--color-text-primary);
+}
+.nexus-tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  background: var(--color-surface-default);
+  cursor: text;
+  transition: border-color 150ms ease;
+}
+.nexus-tag-input:focus-within {
+  border-color: var(--color-border-default-focus, var(--color-accent-primary));
+}
+.nexus-tag-input--disabled {
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.nexus-tag-input--sm {
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: 0.125rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-tag-input--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-tag-input--lg {
+  padding: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-tag-input__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font-size: inherit;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.nexus-tag-input__tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  color: var(--color-icon-tertiary);
+  transition: color 150ms;
+}
+.nexus-tag-input__tag-close:hover {
+  color: var(--color-icon-primary);
+}
+.nexus-tag-input__tag-close-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.nexus-tag-input__input {
+  flex: 1;
+  min-width: 4rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: var(--color-text-primary);
+  padding: 0.125rem 0;
+}
+.nexus-tag-input__input::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-tag-input__description {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+}
+
+/* ═══════════════════════════════════════════
+     NxImage
+     ═══════════════════════════════════════════ */
+
+.nexus-image {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  background: var(--color-surface-subtle);
+}
+.nexus-image__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 4rem;
+  color: var(--color-icon-muted);
+}
+.nexus-image__fallback-icon {
+  width: var(--size-icon-xl, 2rem);
+  height: var(--size-icon-xl, 2rem);
+}
+.nexus-image__skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--color-surface-subtle) 25%, var(--color-surface-default) 50%, var(--color-surface-subtle) 75%);
+  background-size: 200% 100%;
+  animation: nexus-shimmer 1.5s infinite;
+}
+.nexus-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+.nexus-image__img--loaded {
+  opacity: 1;
+}
+.nexus-image__img--cover {
+  object-fit: cover;
+}
+.nexus-image__img--contain {
+  object-fit: contain;
+}
+.nexus-image__img--fill {
+  object-fit: fill;
+}
+.nexus-image__img--none {
+  object-fit: none;
+}
+
+@keyframes nexus-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* ═══════════════════════════════════════════
+     DatePicker / Calendar
+     ═══════════════════════════════════════════ */
+
+.nexus-datepicker {
+  position: relative;
+  display: inline-block;
+}
+.nexus-datepicker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  background: var(--color-surface-default);
+  font: inherit;
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: border-color 150ms;
+  min-width: 10rem;
+}
+.nexus-datepicker__trigger:hover {
+  border-color: var(--color-border-default-hover);
+}
+.nexus-datepicker__trigger:disabled {
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+}
+.nexus-datepicker__trigger--placeholder span {
+  color: var(--color-text-muted);
+}
+.nexus-datepicker__icon {
+  width: var(--size-icon-sm, 1rem);
+  height: var(--size-icon-sm, 1rem);
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-datepicker__popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--z-index-layer-popover, 30);
+  background: var(--color-surface-default);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-lg, 0.75rem);
+  box-shadow: var(--shadow-lg, 0 2px 8px -1px rgb(0 0 0 / 0.12));
+  padding: var(--spacing-padding-sm, 0.75rem);
+  animation: nexus-fade-in 150ms ease;
+}
+
+.nexus-calendar {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-calendar__months {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-calendar__caption {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-padding-2xs, 0.25rem) 0;
+  font-weight: var(--font-weight-text-semibold-sm, 600);
+  color: var(--color-text-primary);
+}
+.nexus-calendar__nav {
+  display: flex;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-calendar__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  transition: background 150ms;
+}
+.nexus-calendar__nav-btn:hover {
+  background: var(--color-surface-default-hover);
+}
+.nexus-calendar__grid {
+  width: 100%;
+  border-collapse: collapse;
+}
+.nexus-calendar__head-row {
+  display: flex;
+}
+.nexus-calendar__head-cell {
+  width: var(--size-control-sm, 2rem);
+  text-align: center;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: var(--font-weight-text-medium-xs, 500);
+  color: var(--color-text-tertiary);
+  padding: var(--spacing-padding-2xs, 0.25rem) 0;
+}
+.nexus-calendar__row {
+  display: flex;
+}
+.nexus-calendar__cell {
+  text-align: center;
+}
+.nexus-calendar__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  transition: background 150ms, color 150ms;
+}
+.nexus-calendar__day:hover {
+  background: var(--color-surface-default-hover);
+}
+.nexus-calendar__day--selected {
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-calendar__day--selected:hover {
+  background: var(--color-accent-primary-hover);
+}
+.nexus-calendar__day--today {
+  font-weight: var(--font-weight-text-semibold-sm, 600);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-accent-primary);
+}
+.nexus-calendar__day--outside {
+  color: var(--color-text-muted);
+  opacity: 0.5;
+}
+.nexus-calendar__day--disabled {
+  color: var(--color-text-muted);
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@keyframes nexus-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 }