@nexus-cross/design-system 1.0.3 → 1.0.4

package/dist/styles.css

@@ -1281,6 +1281,264 @@
   height: 0.75rem;
 }
 
+/* ═══════════════════════════════════════════
+     Badge
+     ═══════════════════════════════════════════ */
+
+.nexus-badge-wrapper {
+  position: relative;
+}
+.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;
+  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
      ═══════════════════════════════════════════ */
@@ -1717,110 +1975,387 @@
 }
 
 /* ═══════════════════════════════════════════
-     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-dropdown-content[data-state='open'] {
+  animation: nexus-dropdown-in 150ms ease-out;
 }
-.nexus-popover-content[data-state='closed'] {
-  animation: nexus-popover-out 100ms ease-in forwards;
+.nexus-dropdown-content[data-state='closed'] {
+  animation: nexus-dropdown-out 100ms ease-in forwards;
 }
-@keyframes nexus-popover-in {
+@keyframes nexus-dropdown-in {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.96);
   }
   to {
     opacity: 1;
     transform: scale(1);
   }
 }
-@keyframes nexus-popover-out {
+@keyframes nexus-dropdown-out {
   from {
     opacity: 1;
     transform: scale(1);
   }
   to {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.96);
   }
 }
-.nexus-popover-arrow {
-  fill: var(--color-surface-default);
+.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);
 }
 
 /* ═══════════════════════════════════════════
-     Drawer
+     ToggleGroup
      ═══════════════════════════════════════════ */
 
-.nexus-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: var(--color-comp-overlay);
-}
-.nexus-drawer-overlay--blur-sm {
-  backdrop-filter: blur(4px);
+.nexus-toggle-group {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+  border-radius: var(--radius-corner-md, 0.5rem);
 }
-.nexus-drawer-overlay--blur-md {
-  backdrop-filter: blur(12px);
+.nexus-toggle-group--default {
+  background: var(--color-surface-subtle);
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: var(--spacing-gap-xs, 0.25rem);
 }
-.nexus-drawer-content {
-  position: fixed;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
+
+/* ── 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-drawer-content--bottom {
-  inset-inline: 0;
-  bottom: 0;
+.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);
+}
+
+/* ═══════════════════════════════════════════
+     Drawer
+     ═══════════════════════════════════════════ */
+
+.nexus-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--color-comp-overlay);
+}
+.nexus-drawer-overlay--blur-sm {
+  backdrop-filter: blur(4px);
+}
+.nexus-drawer-overlay--blur-md {
+  backdrop-filter: blur(12px);
+}
+.nexus-drawer-content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface-default);
+}
+.nexus-drawer-content--bottom {
+  inset-inline: 0;
+  bottom: 0;
   margin-top: 6rem;
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
@@ -2749,3 +3284,589 @@
     opacity: 1;
   }
 }
+
+/* ═══════════════════════════════════════════
+     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); }
+}