@nexus-cross/design-system 1.0.13 → 1.1.0

package/dist/styles.css

@@ -148,9 +148,12 @@
 }
 .nexus-btn:disabled,
 .nexus-btn[aria-disabled='true'] {
-  pointer-events: none;
+  cursor: not-allowed;
   opacity: var(--opacity-comp-btn-disabled);
 }
+.nexus-btn[aria-disabled='true'] {
+  pointer-events: none;
+}
 .nexus-btn:focus-visible {
   outline: 2px solid
     color-mix(in srgb, var(--color-comp-btn-focus-ring) 50%, transparent);
@@ -855,6 +858,9 @@
   border-color: var(--color-status-danger-focus);
   outline-color: var(--color-status-danger-focus);
 }
+.nexus-number-input--disabled {
+  cursor: not-allowed;
+}
 .nexus-number-input--disabled .nexus-number-input__container {
   background: var(--color-surface-strong);
   border-color: var(--color-border-medium);
@@ -957,7 +963,7 @@
 }
 .nexus-number-input__step:disabled {
   color: var(--color-text-muted);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-number-input__step--up {
   border-bottom: 1px solid var(--color-border-default);
@@ -996,7 +1002,7 @@
 }
 .nexus-number-input__bind-btn:disabled {
   color: var(--color-text-muted);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-number-input--xl .nexus-number-input__bind-btn {
   width: 30px;
@@ -1275,6 +1281,15 @@
 .nexus-radio-item--md {
   font-size: var(--text-text-sm, 0.875rem);
 }
+/* When description is present: align radio with the first line of label */
+.nexus-radio-item--with-description {
+  align-items: flex-start;
+  gap: var(--spacing-gap-xs, 0.375rem);
+}
+.nexus-radio-item--with-description .nexus-radio__circle {
+  /* Vertically center the circle to the label's first-line cap height */
+  margin-top: 0.125rem;
+}
 .nexus-radio-item--pointer {
   cursor: pointer;
 }
@@ -1312,6 +1327,25 @@
   border-color: var(--color-border-default);
   background: var(--color-surface-default);
 }
+/* ── Ring variant: thick border replaces inner dot ── */
+.nexus-radio__circle--ring {
+  background: transparent;
+  transition-property: border-color, border-width;
+  transition-duration: 150ms;
+}
+.nexus-radio__circle--ring.nexus-radio__circle--unchecked {
+  border-width: 1px;
+  border-color: var(--color-border-default);
+}
+.nexus-radio__circle--ring.nexus-radio__circle--checked {
+  border-color: var(--color-accent-primary);
+}
+.nexus-radio__circle--ring.nexus-radio__circle--sm.nexus-radio__circle--checked {
+  border-width: 4px;
+}
+.nexus-radio__circle--ring.nexus-radio__circle--md.nexus-radio__circle--checked {
+  border-width: 5px;
+}
 .nexus-radio__dot {
   border-radius: 9999px;
   background: currentColor;
@@ -1326,6 +1360,20 @@
 }
 .nexus-radio__label {
   color: var(--color-text-primary);
+  line-height: 1;
+}
+.nexus-radio__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  min-width: 0;
+}
+.nexus-radio__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.01em;
 }
 
 /* ═══════════════════════════════════════════
@@ -1352,7 +1400,7 @@
 }
 .nexus-chip[aria-disabled='true'] {
   opacity: 0.5;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-chip--default {
   border-color: var(--color-border-default);
@@ -1732,7 +1780,7 @@
 }
 .nexus-page-btn:disabled {
   opacity: 0.4;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-page-btn--sm {
   width: 1.75rem;
@@ -1832,7 +1880,7 @@
 }
 .nexus-tab-trigger--disabled {
   opacity: 0.4;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 /* ═══════════════════════════════════════════
@@ -1922,6 +1970,84 @@
   color: var(--color-text-tertiary);
 }
 
+/* ═══════════════════════════════════════════
+     DataGrid
+     ═══════════════════════════════════════════ */
+
+.nexus-data-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--nexus-dg-cols, 1), minmax(0, 1fr));
+  gap: var(--nexus-dg-gap, 0);
+}
+/* Loading / empty 상태일 때는 단일 자식이 그리드 전체 너비를 점유하도록 강제 */
+.nexus-data-grid[data-state='loading'] > *,
+.nexus-data-grid[data-state='empty'] > * {
+  grid-column: 1 / -1;
+  justify-self: stretch;
+}
+.nexus-data-grid > .nexus-datalist-center,
+.nexus-data-grid > .nexus-datalist-empty {
+  grid-column: 1 / -1;
+}
+@media (min-width: 640px) {
+  .nexus-data-grid {
+    grid-template-columns: repeat(
+      var(--nexus-dg-cols-sm, var(--nexus-dg-cols, 1)),
+      minmax(0, 1fr)
+    );
+  }
+}
+@media (min-width: 768px) {
+  .nexus-data-grid {
+    grid-template-columns: repeat(
+      var(--nexus-dg-cols-md, var(--nexus-dg-cols-sm, var(--nexus-dg-cols, 1))),
+      minmax(0, 1fr)
+    );
+  }
+}
+@media (min-width: 1024px) {
+  .nexus-data-grid {
+    grid-template-columns: repeat(
+      var(
+        --nexus-dg-cols-lg,
+        var(--nexus-dg-cols-md, var(--nexus-dg-cols-sm, var(--nexus-dg-cols, 1)))
+      ),
+      minmax(0, 1fr)
+    );
+  }
+}
+@media (min-width: 1280px) {
+  .nexus-data-grid {
+    grid-template-columns: repeat(
+      var(
+        --nexus-dg-cols-xl,
+        var(
+          --nexus-dg-cols-lg,
+          var(--nexus-dg-cols-md, var(--nexus-dg-cols-sm, var(--nexus-dg-cols, 1)))
+        )
+      ),
+      minmax(0, 1fr)
+    );
+  }
+}
+@media (min-width: 1536px) {
+  .nexus-data-grid {
+    grid-template-columns: repeat(
+      var(
+        --nexus-dg-cols-2xl,
+        var(
+          --nexus-dg-cols-xl,
+          var(
+            --nexus-dg-cols-lg,
+            var(--nexus-dg-cols-md, var(--nexus-dg-cols-sm, var(--nexus-dg-cols, 1)))
+          )
+        )
+      ),
+      minmax(0, 1fr)
+    );
+  }
+}
+
 /* ═══════════════════════════════════════════
      InfiniteScroll
      ═══════════════════════════════════════════ */
@@ -2137,7 +2263,7 @@
   background: var(--color-surface-hover);
 }
 .nexus-select-item[data-disabled] {
-  pointer-events: none;
+  cursor: not-allowed;
   opacity: 0.5;
 }
 
@@ -2210,7 +2336,7 @@
   background: var(--color-surface-hover);
 }
 .nexus-dropdown-item[data-disabled] {
-  pointer-events: none;
+  cursor: not-allowed;
   opacity: var(--opacity-disabled-element, 0.4);
 }
 .nexus-dropdown-item--danger {
@@ -2276,6 +2402,50 @@
   padding: var(--spacing-padding-2xs, 0.25rem);
   gap: 0;
 }
+
+/* ── Outline variant: independent bordered buttons ── */
+.nexus-toggle-group--outline {
+  display: inline-flex;
+  background: transparent;
+  padding: 0;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  border-radius: 0;
+}
+.nexus-toggle-group--outline .nexus-toggle-group__indicator {
+  display: none;
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item {
+  border: 0.5px solid var(--color-border-medium);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  transition:
+    border-color var(--duration-transition-normal, 200ms)
+      var(--ease-transition-fast),
+    color var(--duration-transition-normal, 200ms) var(--ease-transition-fast);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item:hover:not([data-state='on']):not([data-disabled]) {
+  border-color: var(--color-border-default-hover);
+  color: var(--color-text-secondary);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] {
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] .nexus-toggle-group__icon {
+  color: var(--color-icon-primary);
+}
+
+/* ── Full width: stretch group + equal-width items ── */
+.nexus-toggle-group--full-width {
+  display: flex;
+  width: 100%;
+}
+.nexus-toggle-group--full-width .nexus-toggle-group__item {
+  flex: 1 1 0;
+  min-width: 0;
+}
 .nexus-toggle-group__item {
   display: inline-flex;
   align-items: center;
@@ -2300,7 +2470,7 @@
     0 0 0 4px var(--color-accent-primary-focus);
 }
 .nexus-toggle-group__item[data-disabled] {
-  pointer-events: none;
+  cursor: not-allowed;
   opacity: var(--opacity-disabled-element, 0.4);
 }
 .nexus-toggle-group--default .nexus-toggle-group__item[data-state='on'] {
@@ -2378,7 +2548,7 @@
 }
 .nexus-slider[data-disabled] {
   opacity: var(--opacity-disabled-element, 0.4);
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-slider__track {
   position: relative;
@@ -2739,7 +2909,7 @@
 }
 .nexus-carousel-btn:disabled {
   opacity: 0.4;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .nexus-carousel-btn--prev {
   left: 0.5rem;
@@ -2914,12 +3084,14 @@
   display: flex;
   cursor: default;
 }
-.nexus-table-skeleton-td {
+:where(.nexus-table-skeleton-td) {
+  display: flex;
+  align-items: center;
   height: 100%;
   width: 100%;
   padding-block: var(--spacing-padding-md, 1rem);
 }
-.nexus-table-skeleton-bar {
+:where(.nexus-table-skeleton-bar) {
   height: 1rem;
   width: 100%;
 }
@@ -3624,17 +3796,14 @@
 }
 .nexus-stepper--horizontal .nexus-stepper__connector {
   flex: 1;
-  height: 2px;
-  background: var(--color-border-default);
-  transition: background var(--duration-transition-normal, 200ms)
+  height: 0;
+  border-top: 1px dashed var(--color-border-default);
+  transition: border-color 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);
@@ -3659,16 +3828,13 @@
   flex-shrink: 0;
 }
 .nexus-stepper--vertical .nexus-stepper__connector {
-  width: 2px;
+  width: 0;
   flex: 1;
   min-height: var(--spacing-padding-sm, 0.75rem);
-  background: var(--color-border-default);
-  transition: background var(--duration-transition-normal, 200ms)
+  border-left: 1px dashed var(--color-border-default);
+  transition: border-color 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;
 }
@@ -3679,25 +3845,27 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: var(--size-control-sm, 2rem);
-  height: var(--size-control-sm, 2rem);
+  width: 30px;
+  height: 30px;
   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);
+  border: 1px solid var(--color-border-medium);
+  background: transparent;
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: var(--font-weight-label-semibold-md, 600);
+  color: var(--color-text-tertiary);
+  transition:
+    border-color var(--duration-transition-normal, 200ms) var(--ease-transition-normal),
+    background-color var(--duration-transition-normal, 200ms) var(--ease-transition-normal),
+    color var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
 }
 .nexus-stepper--sm .nexus-stepper__indicator {
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.5rem;
+  height: 1.5rem;
   font-size: var(--text-text-xs, 0.75rem);
 }
 .nexus-stepper__check {
-  width: var(--size-icon-sm, 1rem);
-  height: var(--size-icon-sm, 1rem);
+  width: 13px;
+  height: 13px;
 }
 .nexus-stepper--sm .nexus-stepper__check {
   width: var(--size-icon-xs, 0.75rem);
@@ -3707,33 +3875,31 @@
 /* ── 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);
+  background: transparent;
+  color: var(--color-accent-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);
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
 }
 .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);
+  background: transparent;
 }
 .nexus-stepper__step--pending .nexus-stepper__indicator {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-medium);
   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);
+  font-size: var(--text-text-medium-xs, 0.75rem);
+  font-weight: var(--font-weight-text-medium-xs, 500);
+  line-height: 1.5;
+  letter-spacing: var(--letter-spacing-text-medium-xs, -0.01em);
   color: var(--color-text-primary);
 }
 .nexus-stepper--sm .nexus-stepper__label {
@@ -3745,13 +3911,64 @@
   font-size: var(--text-text-xs, 0.75rem);
   color: var(--color-text-secondary);
 }
-.nexus-stepper__step--pending .nexus-stepper__label {
+.nexus-stepper__step--completed .nexus-stepper__label {
   color: var(--color-text-secondary);
 }
+.nexus-stepper__step--completed .nexus-stepper__description {
+  color: var(--color-text-muted);
+}
+.nexus-stepper__step--pending .nexus-stepper__label {
+  color: var(--color-text-tertiary);
+}
 .nexus-stepper__step--pending .nexus-stepper__description {
   color: var(--color-text-muted);
 }
 
+/* ── Animations ── */
+
+@keyframes nexus-stepper-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(9, 180, 152, 0.25); }
+  50% { box-shadow: 0 0 0 3px rgba(9, 180, 152, 0.25); }
+}
+@keyframes nexus-stepper-pop {
+  0% { transform: scale(0.7); opacity: 0.5; }
+  60% { transform: scale(1.15); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes nexus-stepper-check-in {
+  0% { opacity: 0; transform: scale(0) rotate(-45deg); }
+  60% { opacity: 1; transform: scale(1.2) rotate(0deg); }
+  100% { opacity: 1; transform: scale(1) rotate(0deg); }
+}
+@keyframes nexus-stepper-label-slide {
+  0% { opacity: 0; transform: translateY(4px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.nexus-stepper__step--active .nexus-stepper__indicator {
+  animation: nexus-stepper-pulse 2s ease-in-out infinite;
+}
+
+.nexus-stepper__step--animating.nexus-stepper__step--active .nexus-stepper__indicator {
+  animation:
+    nexus-stepper-pop 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
+    nexus-stepper-pulse 2s ease-in-out 500ms infinite;
+}
+.nexus-stepper__step--animating.nexus-stepper__step--active .nexus-stepper__label {
+  animation: nexus-stepper-label-slide 350ms ease-out both;
+}
+.nexus-stepper__step--animating.nexus-stepper__step--active .nexus-stepper__description {
+  animation: nexus-stepper-label-slide 350ms ease-out 50ms both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nexus-stepper__step--active .nexus-stepper__indicator,
+  .nexus-stepper__step--animating .nexus-stepper__indicator,
+  .nexus-stepper__step--animating .nexus-stepper__label,
+  .nexus-stepper__step--animating .nexus-stepper__description,
+  .nexus-stepper__check { animation: none !important; }
+}
+
 /* ═══════════════════════════════════════════
      TagInput
      ═══════════════════════════════════════════ */
@@ -4413,3 +4630,289 @@
   color: var(--color-text-tertiary);
   margin: 0;
 }
+
+/* ═══════════════════════════════════════════
+     Combobox (Searchable Select)
+═══════════════════════════════════════════ */
+.nexus-combobox {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-primary);
+  cursor: text;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+}
+
+/* Left content area: chips + input wrap together, suffix stays vertically centered */
+.nexus-combobox__content {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  min-width: 0;
+}
+
+/* Right suffix area: clear / loading / chevron — always vertically centered */
+.nexus-combobox__suffix {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  align-self: center;
+}
+:where(.nexus-combobox) {
+  width: 100%;
+}
+.nexus-combobox:hover:not(.nexus-combobox--disabled):not(:focus-within) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+.nexus-combobox--default:focus-within,
+.nexus-combobox--default.nexus-combobox--open {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+.nexus-combobox--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-combobox--error:focus-within,
+.nexus-combobox--error.nexus-combobox--open {
+  border-color: var(--color-status-danger);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+}
+.nexus-combobox--disabled {
+  cursor: not-allowed;
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
+}
+.nexus-combobox--disabled .nexus-combobox__input {
+  cursor: not-allowed;
+}
+
+/* ── Sizes (mirror TextInput tokens) ── */
+.nexus-combobox--xl {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-combobox--lg {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-combobox--md {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ── Inner input ── */
+.nexus-combobox__input {
+  flex: 1 1 auto;
+  min-width: 4rem;
+  background: transparent;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.nexus-combobox__input:focus,
+.nexus-combobox__input:focus-visible {
+  outline: none;
+  box-shadow: none;
+  border: 0;
+}
+.nexus-combobox__input::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-combobox__input:disabled {
+  color: var(--color-text-muted);
+}
+
+/* ── Suffix icons (clear / loading / chevron) ── */
+.nexus-combobox__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-combobox__icon--loading {
+  color: var(--color-accent-primary);
+}
+.nexus-combobox__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 999px;
+  border: 0;
+  background: transparent;
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  padding: 0;
+}
+.nexus-combobox__clear:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-icon-primary);
+}
+.nexus-combobox__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+  transition: transform 150ms ease;
+}
+.nexus-combobox__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ── Multi-select chips inside input ── */
+.nexus-combobox__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem 0.125rem 0.5rem;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 500;
+  line-height: 1.25;
+  max-width: 100%;
+}
+.nexus-combobox__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nexus-combobox__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  border: 0;
+  background: transparent;
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+.nexus-combobox__chip-remove:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-icon-primary);
+}
+
+/* ── Field wrapper (label/description) ── */
+.nexus-combobox-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-combobox-field__label {
+  font-size: var(--text-label-semibold-md);
+  font-weight: var(--font-weight-label-semibold-md, 600);
+  line-height: 1;
+  color: var(--color-text-tertiary);
+}
+.nexus-combobox-field__description {
+  font-size: var(--text-text-xs);
+  font-weight: var(--font-weight-text-xs, 400);
+  line-height: 1.5;
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+.nexus-combobox-field__description--error {
+  color: var(--color-status-danger);
+}
+
+/* ── Popover / Listbox ── */
+.nexus-combobox-popover {
+  z-index: 50;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
+  overflow: hidden;
+}
+.nexus-combobox-listbox {
+  max-height: 18rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+.nexus-combobox-popover__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  color: var(--color-text-muted);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ── Option ── */
+.nexus-combobox-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font-size: var(--text-text-sm, 0.875rem);
+  line-height: 1.25;
+  user-select: none;
+}
+.nexus-combobox-option--active {
+  background: var(--color-surface-hover);
+}
+.nexus-combobox-option--selected {
+  color: var(--color-accent-primary);
+  font-weight: 600;
+}
+.nexus-combobox-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.nexus-combobox-option__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.nexus-combobox-option__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nexus-combobox-option__description {
+  margin-top: 0.125rem;
+  color: var(--color-text-muted);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nexus-combobox-option__check {
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
+}