@revikornmann/muka-ui 0.18.0 → 0.20.0

package/dist/styles/index.css

@@ -1922,12 +1922,12 @@ body {
   --dialog-drag-handle-radius: 999rem;
   --dialog-padding-x: 1rem;
   --menu-content-color-background: #fdfcfd;
-  --menu-content-color-border: #f2eff3;
+  --menu-content-color-border: #d0cdd7;
   --menu-content-border-radius: 0.75rem;
   --menu-content-border-width: 0.0625rem;
   --menu-content-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 8px 16px 0 rgba(0, 0, 0, 0.090);
   --menu-content-padding: 0.25rem;
-  --menu-content-min-width: 12rem;
+  --menu-content-min-width: 280px;
   --menu-content-max-height: 20rem;
   --menu-content-scroll-height: 20.625rem;
   --menu-item-color-default-background: transparent;
@@ -1950,7 +1950,8 @@ body {
   --menu-item-color-destructive-hover-icon: #cd2b31;
   --menu-item-border-radius: 0.1875rem;
   --menu-item-padding-x: 0.75rem;
-  --menu-item-padding-y: 0.5rem;
+  --menu-item-padding-right: 2.25rem;
+  --menu-item-padding-y: 0.75rem;
   --menu-item-gap: 0.5rem;
   --menu-item-height: 2.5rem;
   --menu-separator-color: #f2eff3;
@@ -2405,7 +2406,7 @@ body {
 .muka-waveform {
   display: flex;
   align-items: center;
-  gap: var(--spacing-05, 2px);
+  gap: var(--size-3xs);
   width: 100%;
   min-width: 0;
 }
@@ -2561,6 +2562,98 @@ body {
 }
 
 
+/* Typography */
+.muka-typography-catalog {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  max-width: 52rem;
+  color: var(--color-text-default-default);
+}
+
+.muka-typography-catalog__intro {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.muka-typography-catalog__heading {
+  margin: 0;
+  font-family: var(--text-heading-md-fontFamily);
+  font-weight: var(--text-heading-md-fontWeight);
+  font-size: var(--text-heading-md-fontSize);
+  line-height: var(--text-heading-md-lineHeight);
+}
+
+.muka-typography-catalog__lede {
+  margin: 0;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-catalog__lede code {
+  font-family: var(--alias-font-mono-family, ui-monospace, monospace);
+  font-size: 0.875em;
+}
+
+.muka-typography-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.muka-typography-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.muka-typography-section__title {
+  margin: 0;
+  font-family: var(--text-heading-sm-fontFamily);
+  font-weight: var(--text-heading-sm-fontWeight);
+  font-size: var(--text-heading-sm-fontSize);
+  line-height: var(--text-heading-sm-lineHeight);
+}
+
+.muka-typography-section__description {
+  margin: 0;
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-section__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.muka-typography-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.muka-typography-specimen__token {
+  font-family: var(--alias-font-mono-family, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-typography-specimen__sample {
+  margin: 0;
+}
+
+
 /* TypingIndicator */
 /* TypingIndicator Component Styles */
 
@@ -3744,7 +3837,7 @@ body {
 }
 
 .muka-textarea__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Field container */
@@ -3857,7 +3950,7 @@ body {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 
@@ -3981,7 +4074,7 @@ body {
   align-items: center;
   position: relative;
   z-index: 2;
-  border-bottom: 1px solid var(--color-border-default, #e0e0e0);
+  border-bottom: 1px solid var(--tabs-trigger-color-default-border);
 }
 
 /* Tab Trigger — clean underline style */
@@ -3999,7 +4092,7 @@ body {
   white-space: nowrap;
   position: relative;
   z-index: 2;
-  color: var(--color-text-subtle-default, #838383);
+  color: var(--tabs-trigger-color-default-foreground);
 
   /* Default MD size values */
   height: 48px;
@@ -4031,12 +4124,12 @@ body {
 
 /* Hover state */
 .muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
-  color: var(--color-text-neutral-default, #202020);
+  color: var(--tabs-trigger-color-hover-foreground);
 }
 
 /* Current tab */
 .muka-tabs__trigger--current {
-  color: var(--color-text-action-default, #202020);
+  color: var(--tabs-trigger-color-current-foreground);
 }
 
 /* Active bottom border (underline) */
@@ -4047,7 +4140,7 @@ body {
   left: 0;
   right: 0;
   height: 3px;
-  background-color: var(--color-text-action-default, #202020);
+  background-color: var(--tabs-trigger-color-current-foreground);
   border-bottom-left-radius: 1px;
   border-bottom-right-radius: 1px;
   border-top-left-radius: 3px;
@@ -4056,7 +4149,7 @@ body {
 }
 
 .muka-tabs__trigger--disabled {
-  color: var(--color-text-disabled-foreground, #a0a0a0);
+  color: var(--tabs-trigger-color-disabled-foreground);
   cursor: not-allowed;
 }
 
@@ -4178,7 +4271,7 @@ body {
    ======================================== */
 
 .muka-table__body .muka-table__row {
-  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+  border-bottom: var(--border-width-regular) solid var(--color-border-muted);
 }
 
 .muka-table__body .muka-table__row:last-child {
@@ -4190,11 +4283,11 @@ body {
 }
 
 .muka-table__body .muka-table__row--selected {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__body .muka-table__row--selected:hover {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__row--clickable {
@@ -4354,7 +4447,7 @@ body {
    ======================================== */
 
 .muka-table__body .muka-table__row {
-  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+  border-bottom: var(--border-width-regular) solid var(--color-border-muted);
 }
 
 .muka-table__body .muka-table__row:last-child {
@@ -4366,11 +4459,11 @@ body {
 }
 
 .muka-table__body .muka-table__row--selected {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__body .muka-table__row--selected:hover {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__row--clickable {
@@ -4561,22 +4654,22 @@ body {
 
 .muka-swipe-actions__button--primary {
   background-color: var(--color-action-default);
-  color: var(--color-text-inverse-default, #fff);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default, var(--color-action-default));
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-success-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default, var(--color-action-default));
+  background-color: var(--color-state-warning-default);
   color: var(--color-text-default-default);
 }
 
 .muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default, #c0392b);
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-error-default);
+  color: var(--color-text-default-inverse);
 }
 
 
@@ -4596,7 +4689,7 @@ body {
 }
 
 .muka-spinner--inverse {
-  color: var(--color-text-inverse-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-spinner__circle {
@@ -4681,10 +4774,10 @@ body {
   flex: 0 0 auto;
   margin: 0;
   color: var(--color-text-subtle-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4702,10 +4795,10 @@ body {
 }
 
 .muka-spec-row__value-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
 }
 
 .muka-spec-row__hint {
@@ -4781,7 +4874,7 @@ body {
 }
 
 .muka-sms-otp-field__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Hidden input for browser autofill */
@@ -4930,7 +5023,7 @@ body {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 
@@ -5131,7 +5224,7 @@ body {
 }
 
 .muka-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-select__label--sm + .muka-select__field--disabled,
@@ -5279,7 +5372,7 @@ body {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 
@@ -5578,10 +5671,10 @@ body {
   outline: none;
   padding: 0;
   color: var(--color-text-default-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   appearance: none;
   -webkit-appearance: none;
 }
@@ -5741,25 +5834,26 @@ body {
 
 .muka-scrollbar__thumb {
   position: absolute;
-  left: 50%;
+  left: 0;
   top: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  margin-left: -7px;
+  width: 100%;
+  /* Figma: scrollbar thumb fill = surface/level3 */
+  background-color: var(--color-surface-level3);
   cursor: grab;
   touch-action: none;
 }
 
 .muka-scrollbar--horizontal .muka-scrollbar__thumb {
   left: 0;
-  top: 50%;
+  top: 0;
   width: auto;
-  height: 14px;
+  height: 100%;
   margin-left: 0;
-  margin-top: -7px;
+  margin-top: 0;
 }
 
 .muka-scrollbar__thumb:active {
@@ -6396,19 +6490,22 @@ body {
 /* ─── Root ──────────────────────────────────────────────── */
 .muka-progress-tracker {
   width: 100%;
+}
+
+.muka-progress-tracker--horizontal {
   padding-bottom: var(--spacing-7);
 }
 
 /* ─── Track (layered container) ─────────────────────────── */
-.muka-progress-tracker__track {
+.muka-progress-tracker--horizontal .muka-progress-tracker__track {
   position: relative;
   /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
   padding-top: 14px;
   padding-bottom: 14px;
 }
 
-/* ─── Steps layer (on top) ──────────────────────────────── */
-.muka-progress-tracker__steps {
+/* ─── Steps layer (on top) — horizontal ─────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__steps {
   position: absolute;
   inset: 0;
   display: flex;
@@ -6417,13 +6514,16 @@ body {
   z-index: 2;
 }
 
-/* ─── Individual step ───────────────────────────────────── */
-.muka-progress-tracker__step {
+/* ─── Individual step — horizontal ──────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__step {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 7px;
   position: relative;
+  /* Labels are absolutely positioned so the step stays 32px and
+     circle centers line up with the connector padding. */
+  width: 32px;
+  flex: 0 0 32px;
 }
 
 /* ─── Step indicator (circle) ───────────────────────────── */
@@ -6436,20 +6536,24 @@ body {
   justify-content: center;
   flex-shrink: 0;
   position: relative;
+  z-index: 1;
 }
 
 /* Past: dark accent contrast circle with white checkmark */
 .muka-progress-tracker__indicator--past {
   background-color: var(--alias-color-accent-contrast);
   color: var(--color-text-default-inverse);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past {
   cursor: pointer;
 }
 
-.muka-progress-tracker__indicator--past:hover {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:hover {
   background-color: var(--alias-color-accent-pressed);
 }
 
-.muka-progress-tracker__indicator--past:focus-visible {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
@@ -6476,6 +6580,18 @@ body {
   user-select: none;
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
 /* ─── Checkmark icon ────────────────────────────────────── */
 .muka-progress-tracker__check-icon {
   width: 20px;
@@ -6488,8 +6604,12 @@ body {
   color: var(--color-text-default-inverse);
 }
 
-/* ─── Step label ────────────────────────────────────────── */
-.muka-progress-tracker__label {
+/* ─── Step label — horizontal ───────────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label {
+  position: absolute;
+  top: 39px;
+  left: 50%;
+  transform: translateX(-50%);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
@@ -6502,14 +6622,14 @@ body {
   text-overflow: ellipsis;
 }
 
-/* Current step label is bold */
-.muka-progress-tracker__label--current {
+/* Current step label is bold (horizontal only) */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label--current {
   font-family: var(--text-label-sm-bold-fontFamily);
   font-weight: var(--text-label-sm-bold-fontWeight);
 }
 
-/* ─── Connectors layer (behind indicators) ──────────────── */
-.muka-progress-tracker__connectors {
+/* ─── Connectors layer (behind indicators) — horizontal ─── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connectors {
   display: flex;
   align-items: center;
   /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -6519,20 +6639,31 @@ body {
   z-index: 1;
 }
 
-/* ─── Individual connector line ─────────────────────────── */
-.muka-progress-tracker__connector {
+/* Rounder, bar, rounder in a row. Chromium treats a negative gap as invalid,
+   so the overlap is margins: the bar runs 2px under each circle. */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   flex: 1 0 0;
   height: 4px;
   min-width: 1px;
+  position: relative;
+  overflow: visible;
+  background: none;
 }
 
-/* Past: solid dark line */
-.muka-progress-tracker__connector--past {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector-line {
+  flex: 1 1 auto;
+  height: 4px;
+  min-width: 1px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--past .muka-progress-tracker__connector-line {
   background-color: var(--alias-color-accent-contrast);
 }
 
-/* Current: gradient from past (dark) toward current step */
-.muka-progress-tracker__connector--current {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-contrast) 0%,
@@ -6540,8 +6671,7 @@ body {
   );
 }
 
-/* Current-right: gradient fading from current step into upcoming */
-.muka-progress-tracker__connector--current-right {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current-right .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-default) 0%,
@@ -6550,134 +6680,353 @@ body {
   );
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--upcoming .muka-progress-tracker__connector-line {
+  background-color: var(--color-surface-sunken);
+}
+
+/* Past: solid dark line (vertical; horizontal uses the inner line) */
+.muka-progress-tracker__connector--past {
+  background-color: var(--alias-color-accent-contrast);
+}
+
 /* Upcoming: solid gray line */
 .muka-progress-tracker__connector--upcoming {
   background-color: var(--color-surface-sunken);
 }
 
+/* ═══════════════════════════════════════════════════════════
+   Vertical orientation
+   ═══════════════════════════════════════════════════════════ */
 
-/* ProgressAccordeon */
-/* ProgressAccordeon Component Styles — Using Muka Design Tokens */
-
-/* ─── Root ──────────────────────────────────────────────── */
-.muka-progress-accordeon {
-  container-type: inline-size;
+.muka-progress-tracker--vertical .muka-progress-tracker__track {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  gap: var(--spacing-6);
   width: 100%;
-  /* Top padding provides the vertical rhythm between stacked steps */
-  padding-top: var(--spacing-8);
 }
 
-/* Per-state gap: content-bearing steps are tighter, header-only steps looser */
-.muka-progress-accordeon--current,
-.muka-progress-accordeon--past.muka-progress-accordeon--expanded {
-  gap: var(--spacing-6);
+.muka-progress-tracker--vertical .muka-progress-tracker__step {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding-right: var(--spacing-1);
+  position: relative;
+  width: 100%;
+  min-height: 32px;
 }
 
-.muka-progress-accordeon--upcoming,
-.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
-  gap: var(--spacing-8);
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive {
+  cursor: pointer;
 }
 
-/* Past steps group header + slot. The header↔content gap lives inside the
-   collapsing slot (as padding-top) so it collapses with the content, so the
-   body gap itself is 0. */
-.muka-progress-accordeon__body {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 4px;
+  border-radius: 20px;
 }
 
-/* ─── Header ─────────────────────────────────────────────── */
-.muka-progress-accordeon__header {
+/* Indicator column: circle only; connector is absolutely positioned on the step */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-3);
-  width: 100%;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  width: 32px;
+  z-index: 1;
 }
 
-.muka-progress-accordeon__header-row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-3);
-  width: 100%;
-  min-height: 40px;
+/* Vertical connector: from mid-indicator through gap to next mid-indicator */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  position: absolute;
+  left: 14px; /* (32px indicator - 4px line) / 2 */
+  top: 16px;
+  /* Through track gap (spacing-6) into the next indicator's top half */
+  bottom: calc(-1 * var(--spacing-6) - 16px);
+  width: 4px;
+  z-index: 0;
+  overflow: visible;
 }
 
-.muka-progress-accordeon__heading-group {
-  display: flex;
-  flex: 1 0 0;
-  min-width: 0;
-  align-items: flex-start;
-  gap: var(--spacing-4);
+/* Divider rounders: circle bleeds into the connector (Figma Divider Rounder) */
+.muka-progress-tracker__rounder {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  overflow: visible;
 }
 
-/* Past steps carry 40px controls; nudge the heading to vertically centre it */
-.muka-progress-accordeon--past .muka-progress-accordeon__heading-group {
-  padding-top: var(--spacing-1);
+.muka-progress-tracker__rounder--past {
+  color: var(--alias-color-accent-contrast);
 }
 
-.muka-progress-accordeon__controls {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--spacing-3);
+.muka-progress-tracker__rounder--current {
+  color: var(--alias-color-accent-default);
 }
 
-/* ─── Step indicator (circle) ───────────────────────────── */
-.muka-progress-accordeon__indicator {
-  width: 32px;
-  height: 32px;
+.muka-progress-tracker__rounder--upcoming {
+  color: var(--color-surface-sunken);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder {
+  position: relative;
+  z-index: 1;
   flex-shrink: 0;
-  border-radius: var(--border-radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  transform: none;
 }
 
-/* Past: dark accent-contrast circle with inverse checkmark */
-.muka-progress-accordeon__indicator--past {
-  background-color: var(--alias-color-accent-contrast);
-  color: var(--color-text-default-inverse);
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--start {
+  margin-left: 14px;
+  /* Rounder overhangs the circle by 3px; -5px tucks the bar 2px under the circle. */
+  margin-right: -5px;
 }
 
-/* Current: accent circle with inverse bold number */
-.muka-progress-accordeon__indicator--current {
-  background-color: var(--alias-color-accent-default);
-  color: var(--color-text-default-inverse);
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--end {
+  margin-left: -5px;
+  margin-right: 14px;
 }
 
-/* Upcoming: sunken/muted circle with default-color number */
-.muka-progress-accordeon__indicator--upcoming {
-  background-color: var(--color-surface-sunken);
-  color: var(--color-text-default-default);
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--start {
+  left: 50%;
+  top: 14px;
+  transform: translateX(-50%);
 }
 
-.muka-progress-accordeon__check-icon {
-  width: 20px;
-  height: 20px;
-  color: var(--color-text-default-inverse);
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--end {
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
 }
 
-.muka-progress-accordeon__number {
-  font-family: var(--text-label-md-bold-fontFamily);
-  font-weight: var(--text-label-md-bold-fontWeight);
-  font-size: var(--text-label-md-bold-fontSize);
-  line-height: var(--text-label-md-bold-lineHeight);
-  text-align: center;
-  user-select: none;
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-contrast) 0%,
+    var(--alias-color-accent-default) 100%
+  );
 }
 
-/* Upcoming number is semibold (not bold) per Figma */
-.muka-progress-accordeon__indicator--upcoming .muka-progress-accordeon__number {
-  font-family: var(--text-label-md-semibold-fontFamily);
-  font-weight: var(--text-label-md-semibold-fontWeight);
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current-right {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-default) 0%,
+    var(--alias-color-accent-default) 15%,
+    var(--color-surface-sunken) 50%
+  );
 }
 
-/* ─── Heading (responsive: heading/md on wide, heading/sm on narrow) ─────── */
+/* Vertical label: body/base/regular, wraps, not bold for current */
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+  text-align: left;
+  flex: 1 0 0;
+  min-width: 0;
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  word-break: break-word;
+}
+
+/* Current label stays regular weight in vertical layout */
+.muka-progress-tracker--vertical .muka-progress-tracker__label--current {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+}
+
+/* Ensure step content paints above hover/selected backgrounds */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col,
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Hover halo (vertical interactive only) ────────────── */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  content: '';
+  position: absolute;
+  background-color: var(--color-surface-level1);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Hover: 40px circle behind indicator only */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before {
+  left: -4px;
+  top: -4px;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+/* Selected / :active: pill behind full step row — wins over hover */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  width: auto;
+  height: auto;
+  border-radius: 20px;
+}
+
+/* Selected steps without interactive class still show the pill */
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']:not(.muka-progress-tracker__step--interactive)::before {
+  content: '';
+  position: absolute;
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  background-color: var(--color-surface-level1);
+  border-radius: 20px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Connector stays behind indicators (indicator-col is z-index 1) */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  z-index: 0;
+}
+
+
+/* ProgressAccordeon */
+/* ProgressAccordeon Component Styles — Using Muka Design Tokens */
+
+/* ─── Root ──────────────────────────────────────────────── */
+.muka-progress-accordeon {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  /* Top padding provides the vertical rhythm between stacked steps */
+  padding-top: var(--spacing-8);
+}
+
+/* Per-state gap: content-bearing steps are tighter, header-only steps looser */
+.muka-progress-accordeon--current,
+.muka-progress-accordeon--past.muka-progress-accordeon--expanded,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
+  gap: var(--spacing-6);
+}
+
+.muka-progress-accordeon--upcoming,
+.muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
+  gap: var(--spacing-8);
+}
+
+/* Collapsible steps group header + slot. The header↔content gap lives inside the
+   collapsing slot (as padding-top) so it collapses with the content, so the
+   body gap itself is 0. */
+.muka-progress-accordeon__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+}
+
+/* ─── Header ─────────────────────────────────────────────── */
+.muka-progress-accordeon__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+.muka-progress-accordeon__header-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-height: 40px;
+}
+
+.muka-progress-accordeon__heading-group {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+/* Steps with header controls (edit / chevron) are 40px tall; nudge the heading
+   so a single line centres against the indicator + controls row. */
+.muka-progress-accordeon:has(.muka-progress-accordeon__controls)
+  .muka-progress-accordeon__heading-group {
+  padding-top: var(--spacing-1);
+}
+
+.muka-progress-accordeon__controls {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+/* ─── Step indicator (circle) ───────────────────────────── */
+.muka-progress-accordeon__indicator {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Past: dark accent-contrast circle with inverse checkmark */
+.muka-progress-accordeon__indicator--past {
+  background-color: var(--alias-color-accent-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Current: accent circle with inverse bold number */
+.muka-progress-accordeon__indicator--current {
+  background-color: var(--alias-color-accent-default);
+  color: var(--color-text-default-inverse);
+}
+
+/* Upcoming: sunken/muted circle with default-color number */
+.muka-progress-accordeon__indicator--upcoming {
+  background-color: var(--color-surface-sunken);
+  color: var(--color-text-default-default);
+}
+
+.muka-progress-accordeon__check-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-default-inverse);
+}
+
+.muka-progress-accordeon__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  text-align: center;
+  user-select: none;
+}
+
+/* Upcoming number is semibold (not bold) per Figma */
+.muka-progress-accordeon__indicator--upcoming .muka-progress-accordeon__number {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+}
+
+/* ─── Heading (responsive: heading/md on wide, heading/sm on narrow) ─────── */
 .muka-progress-accordeon__heading {
   flex: 1 0 0;
   min-width: 0;
@@ -6720,7 +7069,7 @@ body {
   width: 100%;
 }
 
-/* ─── Collapse/expand animation (past steps) ─────────────────
+/* ─── Collapse/expand animation (past & upcoming steps) ──────
    The grid-template-rows 1fr → 0fr technique animates the content to/from its
    intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
    --motion-duration-view resolves to 0ms, so the toggle stays instant. */
@@ -7346,10 +7695,10 @@ body {
 }
 
 .muka-photo-uploader__dropzone-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-size: var(--text-body-md-regular-fontSize);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
   color: var(--color-text-subtle-default);
 }
 
@@ -7422,6 +7771,36 @@ body {
 }
 
 
+/* NumberInput */
+/* NumberInput — reuses Input field styles (../Input/Input.css). */
+/* Only the prefix/suffix affixes are NumberInput-specific. */
+
+.muka-numberinput__addon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Hide the native number spinners — affixes/step API replace them. */
+.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
+.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.muka-numberinput__field .muka-input__native {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+
 /* Pagination */
 /* Pagination Component Styles */
 
@@ -7455,9 +7834,9 @@ body {
 
 /* Active page */
 .muka-pagination__button--active {
-  background-color: var(--button-color-primary-default-background);
-  color: var(--button-color-primary-default-foreground);
-  border-color: var(--button-color-primary-default-background);
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  border-color: var(--button-color-primary-background-default);
   font-weight: 600;
 }
 
@@ -7488,72 +7867,42 @@ body {
 
 /* Size variants */
 .muka-pagination--sm .muka-pagination__button {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--sm .muka-pagination__ellipsis {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__button {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__ellipsis {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__button {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__ellipsis {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }
 
 
-/* NumberInput */
-/* NumberInput — reuses Input field styles (../Input/Input.css). */
-/* Only the prefix/suffix affixes are NumberInput-specific. */
-
-.muka-numberinput__addon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  color: var(--color-text-subtle-default);
-  font-family: var(--text-input-md-fontFamily);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-  user-select: none;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-/* Hide the native number spinners — affixes/step API replace them. */
-.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
-.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.muka-numberinput__field .muka-input__native {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-
 /* NavigationTransition */
 /* NavigationTransition Component Styles */
 
@@ -7635,32 +7984,62 @@ body {
 .muka-menu__search {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
   flex-shrink: 0;
-  height: var(--size-3xl, 48px);
-  padding: 0 var(--spacing-4);
+  /* Figma dropdown filter header: 48px, 8px inset, 32px icon slots. */
+  height: var(--input-field-height-lg, 3rem);
+  padding: 0 var(--spacing-2);
   border-bottom: var(--border-width-regular) solid var(--color-border-default);
 }
 
-.muka-menu__search-icon {
+.muka-menu__search--sm {
+  height: calc(var(--size-xl, 1.5rem) + var(--spacing-2) * 2);
+}
+
+.muka-menu__search-icon,
+.muka-menu__search-clear {
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
   color: var(--color-text-subtle-default);
 }
 
+.muka-menu__search-icon .muka-icon,
+.muka-menu__search-clear .muka-icon,
+.muka-menu__search-clear:hover,
+.muka-menu__search-clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search--sm .muka-menu__search-icon,
+.muka-menu__search--sm .muka-menu__search-clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
 .muka-menu__search-input {
   flex: 1 1 auto;
   min-width: 0;
   border: none;
   outline: none;
   background: transparent;
-  font-family: var(--text-label-md-regular-font-family);
-  font-size: var(--text-label-md-regular-font-size);
-  font-weight: var(--text-label-md-regular-font-weight);
-  line-height: var(--text-label-md-regular-line-height);
+  padding: 0 var(--spacing-1);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
   color: var(--color-text-default-default);
 }
 
+.muka-menu__search--sm .muka-menu__search-input {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  font-weight: var(--text-input-sm-fontWeight);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
 .muka-menu__search-input::placeholder {
   color: var(--color-text-subtle-default);
 }
@@ -7671,24 +8050,29 @@ body {
   appearance: none;
 }
 
-.muka-menu__search-clear {
+.muka-menu__empty {
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  min-height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
+  pointer-events: none;
+  user-select: none;
+}
+
+.muka-menu__search-clear {
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--color-text-subtle-default);
   cursor: pointer;
 }
 
-.muka-menu__search-clear:hover {
-  color: var(--color-text-default-default);
-}
-
 .muka-menu__match {
-  font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--text-label-md-bold-fontWeight);
 }
 
 .muka-menu__content--scrollbar {
@@ -7723,22 +8107,26 @@ body {
 /* ─── Menu Item ──────────────────────────────────────────────────────────── */
 
 .muka-menu__item {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--menu-item-gap);
   min-height: var(--menu-item-height);
-  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  /* Right gutter always reserved for floating trailers (enter / check). */
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-right) var(--menu-item-padding-y)
+    var(--menu-item-padding-x);
   border-radius: var(--menu-item-border-radius);
   cursor: pointer;
   user-select: none;
   outline: none;
-  font-family: var(--text-label-md-regular-font-family);
-  font-size: var(--text-label-md-regular-font-size);
-  font-weight: var(--text-label-md-regular-font-weight);
-  line-height: var(--text-label-md-regular-line-height);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
   color: var(--menu-item-color-default-foreground);
   background-color: var(--menu-item-color-default-background);
   transition: background-color 100ms ease, color 100ms ease;
+  white-space: nowrap;
 }
 
 .muka-menu__item:hover,
@@ -7804,25 +8192,55 @@ body {
 }
 
 .muka-menu__item-label {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
+  white-space: nowrap;
+}
+
+/* Shortcut trailers replace icons and sit with an 8px right inset. */
+.muka-menu__item--has-shortcut {
+  padding-right: var(--spacing-2);
 }
 
 .muka-menu__item-shortcut {
   flex-shrink: 0;
   margin-left: auto;
   padding-left: var(--menu-item-gap);
-  font-size: var(--text-label-sm-regular-font-size);
-  color: var(--menu-shortcut-color);
-  opacity: 0.7;
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-muted-default);
+  white-space: nowrap;
+}
+
+.muka-menu__item-hint {
+  /* Figma: trailer sits with 8px margin top / right / bottom; 24px glyph centered inside. */
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  color: var(--color-text-muted-default);
+  pointer-events: none;
+}
+
+.muka-menu__item--hint-enter[data-highlighted] .muka-menu__item-hint {
+  display: flex;
 }
 
 .muka-menu__item-chevron {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  margin-left: auto;
+  width: var(--icon-size-default, 1.5rem);
   color: var(--menu-shortcut-color);
 }
 
@@ -7843,9 +8261,10 @@ body {
   padding-left: var(--menu-item-padding-x);
 }
 
+.muka-menu__item--checkbox-trailing,
 .muka-menu__item--radio-check {
-  position: relative;
-  padding-right: calc(var(--menu-item-padding-x) + var(--menu-checkbox-indicator-size) + var(--menu-item-gap));
+  /* Same reserved right gutter as default items — trailing indicator floats. */
+  padding-right: var(--menu-item-padding-right);
 }
 
 .muka-menu__item--radio-check[data-state='checked'] {
@@ -7853,11 +8272,27 @@ body {
 }
 
 .muka-menu__item-indicator--trailing {
+  /* Match enter-hint trailer: 8px inset, 24px box (override leading indicator size). */
   position: absolute;
-  right: var(--menu-item-padding-x);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--menu-checkbox-indicator-color);
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  height: auto;
+  max-height: none;
+  transform: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__item-indicator--trailing > [data-state] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 
 .muka-menu__radio-dot {
@@ -7883,10 +8318,10 @@ body {
 
 .muka-menu__group-label {
   padding: var(--menu-group-label-padding-y) var(--menu-group-label-padding-x);
-  font-family: var(--text-label-sm-semibold-font-family);
-  font-size: var(--text-label-sm-semibold-font-size);
-  font-weight: var(--text-label-sm-semibold-font-weight);
-  line-height: var(--text-label-sm-semibold-line-height);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  line-height: var(--text-label-sm-semibold-lineHeight);
   color: var(--menu-group-label-color);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -8357,7 +8792,7 @@ li.muka-listitem {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 
@@ -8399,7 +8834,7 @@ li.muka-listitem {
 }
 
 .muka-label__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 
@@ -8445,7 +8880,7 @@ li.muka-listitem {
 }
 
 .muka-input__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-input__label--sm + .muka-input__field--disabled,
@@ -8569,27 +9004,58 @@ li.muka-listitem {
   color: var(--input-field-color-disabled-foreground);
 }
 
-/* Icons */
+/* Icons — Figma inputfield content: sm 16px, md 20px, lg 24px. */
 .muka-input__icon {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   color: var(--color-text-subtle-default);
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 
 .muka-input__field--sm .muka-input__icon {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
 }
 
 .muka-input__field--lg .muka-input__icon {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+}
+
+.muka-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-input__field--sm .muka-input__clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
 }
 
-.muka-input__field--disabled .muka-input__icon {
+/* Icon sets its own color; pin the glyph to text subtle, including hover. */
+.muka-input__icon .muka-icon,
+.muka-input__clear .muka-icon,
+.muka-input__clear:hover,
+.muka-input__clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-input__field--disabled .muka-input__icon,
+.muka-input__field--disabled .muka-input__icon .muka-icon,
+.muka-input__field--disabled .muka-input__clear,
+.muka-input__field--disabled .muka-input__clear .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }
 
@@ -8598,6 +9064,12 @@ li.muka-listitem {
   height: 100%;
 }
 
+.muka-input__native::-webkit-search-cancel-button,
+.muka-input__native::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 /* Helper text */
 .muka-input__helper {
   font-family: var(--text-label-sm-regular-fontFamily);
@@ -8614,7 +9086,7 @@ li.muka-listitem {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 
@@ -8814,10 +9286,10 @@ li.muka-listitem {
 
 /* Text */
 .muka-fileupload__text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-size: var(--text-body-md-regular-fontSize);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
   color: var(--color-text-default-default);
 }
 
@@ -8900,10 +9372,10 @@ li.muka-listitem {
 }
 
 .muka-fileupload-item__name {
-  font-family: var(--text-body-sm-medium-fontFamily);
-  font-size: var(--text-body-sm-medium-fontSize);
-  font-weight: var(--text-body-sm-medium-fontWeight);
-  line-height: var(--text-body-sm-medium-lineHeight);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
   color: var(--fileupload-item-color-default-foreground);
   white-space: nowrap;
   overflow: hidden;
@@ -8939,11 +9411,11 @@ li.muka-listitem {
 }
 
 .muka-fileupload-item__status-icon--success {
-  color: var(--color-state-success-foreground);
+  color: var(--fileupload-item-color-success-foreground);
 }
 
 .muka-fileupload-item__status-icon--error {
-  color: var(--color-state-error-foreground);
+  color: var(--fileupload-item-color-error-foreground);
 }
 
 .muka-fileupload-item__remove {
@@ -8996,7 +9468,7 @@ li.muka-listitem {
 
 .muka-fab--primary {
   background-color: var(--color-action-default);
-  color: var(--color-text-inverse-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-fab--primary:hover:not(:disabled) {
@@ -9179,10 +9651,10 @@ li.muka-listitem {
 .muka-emptystate__title {
   color: var(--emptystate-title-color);
   margin: 0;
-  font-family: var(--text-heading-h4-fontFamily);
-  font-weight: var(--text-heading-h4-fontWeight);
-  font-size: var(--text-heading-h4-fontSize);
-  line-height: var(--text-heading-h4-lineHeight);
+  font-family: var(--text-heading-sm-fontFamily);
+  font-weight: var(--text-heading-sm-fontWeight);
+  font-size: var(--text-heading-sm-fontSize);
+  line-height: var(--text-heading-sm-lineHeight);
 }
 
 .muka-emptystate--sm .muka-emptystate__title {
@@ -9193,69 +9665,297 @@ li.muka-listitem {
 }
 
 .muka-emptystate--lg .muka-emptystate__title {
-  font-family: var(--text-heading-h3-fontFamily);
-  font-weight: var(--text-heading-h3-fontWeight);
-  font-size: var(--text-heading-h3-fontSize);
-  line-height: var(--text-heading-h3-lineHeight);
+  font-family: var(--text-heading-md-fontFamily);
+  font-weight: var(--text-heading-md-fontWeight);
+  font-size: var(--text-heading-md-fontSize);
+  line-height: var(--text-heading-md-lineHeight);
+}
+
+/* Description */
+.muka-emptystate__description {
+  color: var(--emptystate-description-color);
+  margin: 0;
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+.muka-emptystate--md .muka-emptystate__description {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-emptystate--lg .muka-emptystate__description {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+/* Actions */
+.muka-emptystate__actions {
+  display: flex;
+  gap: var(--emptystate-actions-gap);
+  margin-top: var(--emptystate-actions-marginTop);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.muka-emptystate--left .muka-emptystate__actions {
+  justify-content: flex-start;
+}
+
+
+/* EmojiPicker */
+/* EmojiPicker Component Styles */
+
+.muka-emoji-picker {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: var(--spacing-1);
+  padding: var(--spacing-2);
+  max-height: 12rem;
+  overflow-y: auto;
+  background: var(--color-surface-level2);
+  border: var(--border-width-regular, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--menu-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+}
+
+.muka-emoji-picker__glyph {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+
+/* DropdownSelect */
+/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+
+.muka-dropdown-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
+
+.muka-dropdown-select--full-width {
+  width: 100%;
+}
+
+.muka-dropdown-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-dropdown-select__required {
+  color: var(--color-state-error-default);
+}
+
+.muka-dropdown-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-dropdown-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+.muka-dropdown-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
+}
+
+.muka-dropdown-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-dropdown-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
+}
+
+.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
+}
+
+.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
+  border-color: var(--color-state-error-contrast);
+}
+
+.muka-dropdown-select__field--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-dropdown-select__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  /* Let empty-field / value clicks reach the full-field MenuTrigger underneath. */
+  pointer-events: none;
+}
+
+.muka-dropdown-select__placeholder {
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
+  padding-inline: var(--spacing-1);
+}
+
+.muka-dropdown-select__value {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
+  padding-inline: var(--spacing-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-dropdown-select__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: flex-start;
+  min-width: 0;
+  /* Chip remove controls must remain clickable above the field hit target. */
+  pointer-events: auto;
+}
+
+.muka-dropdown-select__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
+}
+
+.muka-dropdown-select__menu-button {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0;
+  padding-right: var(--spacing-2);
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
 }
 
-/* Description */
-.muka-emptystate__description {
-  color: var(--emptystate-description-color);
-  margin: 0;
-  font-family: var(--text-body-sm-regular-fontFamily);
-  font-weight: var(--text-body-sm-regular-fontWeight);
-  font-size: var(--text-body-sm-regular-fontSize);
-  line-height: var(--text-body-sm-regular-lineHeight);
+.muka-dropdown-select__field--multiline .muka-dropdown-select__menu-button {
+  align-items: flex-start;
+  padding-top: calc(var(--spacing-2) + 8px);
 }
 
-.muka-emptystate--md .muka-emptystate__description {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
+.muka-dropdown-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
 }
 
-.muka-emptystate--lg .muka-emptystate__description {
-  font-family: var(--text-body-lg-regular-fontFamily);
-  font-weight: var(--text-body-lg-regular-fontWeight);
-  font-size: var(--text-body-lg-regular-fontSize);
-  line-height: var(--text-body-lg-regular-lineHeight);
+.muka-dropdown-select__chevron .muka-icon,
+.muka-dropdown-select__menu-button:hover .muka-dropdown-select__chevron,
+.muka-dropdown-select__menu-button:hover .muka-icon {
+  color: var(--color-text-subtle-default);
 }
 
-/* Actions */
-.muka-emptystate__actions {
-  display: flex;
-  gap: var(--emptystate-actions-gap);
-  margin-top: var(--emptystate-actions-marginTop);
-  flex-wrap: wrap;
-  justify-content: center;
+.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
 }
 
-.muka-emptystate--left .muka-emptystate__actions {
-  justify-content: flex-start;
+.muka-dropdown-select__menu-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-action-default));
+  outline-offset: 2px;
 }
 
+.muka-dropdown-select__helper {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
 
-/* EmojiPicker */
-/* EmojiPicker Component Styles */
-
-.muka-emoji-picker {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: var(--spacing-1);
-  padding: var(--spacing-2);
-  max-height: 12rem;
-  overflow-y: auto;
-  background: var(--color-surface-level2);
-  border: var(--border-width-regular, 1px) solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--menu-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+.muka-dropdown-select__error {
+  margin: 0;
+  color: var(--color-state-error-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
 }
 
-.muka-emoji-picker__glyph {
-  font-size: 1.25rem;
-  line-height: 1;
+.muka-dropdown-select__menu {
+  /* Uses Menu min-width (280px); grows with long labels; left-aligned to the field. */
 }
 
 
@@ -9483,7 +10183,7 @@ li.muka-listitem {
   line-height: var(--text-label-sm-lineHeight);
   border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-md);
-  background-color: var(--color-surface-default);
+  background-color: var(--color-surface-level0);
   color: var(--color-text-default-default);
 }
 
@@ -9628,7 +10328,7 @@ li.muka-listitem {
 
 .muka-documentviewer__thumbnail-label {
   font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-xs-fontSize);
+  font-size: var(--text-label-xs-regular-fontSize);
   color: var(--color-text-default-default);
   font-weight: var(--alias-font-brand-weight-medium);
 }
@@ -10655,10 +11355,10 @@ li.muka-listitem {
 }
 
 .muka-context-select__label {
-  font-family: var(--text-label-sm-regular-font-family);
-  font-size: var(--text-label-sm-regular-font-size);
-  font-weight: var(--text-label-sm-regular-font-weight);
-  line-height: var(--text-label-sm-regular-line-height);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
   white-space: nowrap;
 }
 
@@ -10753,191 +11453,175 @@ li.muka-listitem {
 
 
 /* Combobox */
-/* Combobox Component Styles */
+/* Combobox — Figma Input Combobox (free-input chips + suggestion Menu) */
 
-/* ─── Trigger group (positioning context for the trailing controls) ── */
+.muka-combobox {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
 
-/*
- * The clear control is a sibling of the trigger, not a child (a <button> may
- * not contain interactive content), so it is overlaid on the trigger's trailing
- * padding. The trigger reserves that space with padding-right below.
- */
-.muka-combobox__trigger-group {
-  position: relative;
-  display: block;
+.muka-combobox--full-width {
   width: 100%;
 }
 
-/* ─── Trigger (looks like an Input field, behaves like a button) ── */
+.muka-combobox__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-combobox__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
 
-.muka-combobox {
-  display: inline-flex;
+.muka-combobox__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-combobox__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-combobox__field {
+  display: flex;
   align-items: center;
-  gap: var(--spacing-2);
   width: 100%;
-  padding: 0 var(--muka-combobox-trailing-space) 0 var(--input-field-padding-x);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
   background-color: var(--input-field-color-default-background);
   border: var(--border-width-regular) solid var(--input-field-color-default-border);
-  color: var(--color-text-default-default);
-  text-align: left;
-  cursor: pointer;
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
-  -webkit-tap-highlight-color: transparent;
-  transition: border-color 0.12s ease;
-
-  /* Room for the chevron overlaid on the trailing edge. */
-  --muka-combobox-trailing-space: calc(
-    var(--input-field-padding-x) + var(--icon-size-sm) + var(--spacing-2)
-  );
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  cursor: text;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
 }
 
-/* …and for the clear button next to it, when one is rendered. */
-.muka-combobox--clearable {
-  --muka-combobox-trailing-space: calc(
-    var(--input-field-padding-x) + var(--icon-size-sm) + var(--spacing-2) +
-      var(--icon-size-xs) + var(--spacing-1) * 2 + var(--spacing-2)
-  );
+.muka-combobox__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
 }
 
-.muka-combobox--sm {
+.muka-combobox__field--sm {
   min-height: var(--input-field-height-sm);
   border-radius: var(--input-field-radius-sm);
 }
 
-.muka-combobox--md {
+.muka-combobox__field--md {
   min-height: var(--input-field-height-default);
   border-radius: var(--input-field-radius-md);
 }
 
-.muka-combobox--lg {
+.muka-combobox__field--lg {
   min-height: var(--input-field-height-lg);
   border-radius: var(--input-field-radius-lg);
 }
 
-.muka-combobox:hover:not(:disabled) {
-  border-color: var(--input-field-color-hover-border, var(--input-field-color-default-border));
+.muka-combobox__field--focused:not(.muka-combobox__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
 }
 
-.muka-combobox:focus-visible {
-  outline: none;
-  border-color: var(--input-field-color-focus-border, var(--color-action-default));
+.muka-combobox__field--error:not(.muka-combobox__field--disabled) {
+  border-color: var(--color-state-error-contrast);
 }
 
-.muka-combobox--disabled,
-.muka-combobox:disabled {
+.muka-combobox__field--disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.muka-combobox--placeholder .muka-combobox__label {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-combobox__leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-text-subtle-default);
-}
-
-.muka-combobox__label {
-  flex: 1 1 auto;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.muka-combobox__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
 }
 
-/* ─── Trailing controls (clear + chevron) ─────────────── */
-
-.muka-combobox__actions {
-  position: absolute;
-  top: 0;
-  right: var(--input-field-padding-x);
-  height: 100%;
+.muka-combobox__chips {
   display: flex;
-  align-items: center;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
   gap: var(--spacing-2);
-  /*
-   * The strip sits on top of the trigger, so it must not swallow taps meant to
-   * open the picker. Only the clear button takes pointer events back.
-   */
-  pointer-events: none;
-}
-
-.muka-combobox__clear,
-.muka-combobox__chevron {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-text-subtle-default);
+  min-width: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
 }
 
-.muka-combobox__clear {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: var(--spacing-1);
+.muka-combobox__input {
+  flex: 1 1 5rem;
+  min-width: 5rem;
+  min-height: 2rem;
+  margin: 0;
+  padding: 0 var(--spacing-1);
   border: none;
-  background: none;
-  border-radius: var(--radius-sm);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.muka-combobox__clear:hover {
-  color: var(--color-text-default-default);
-  background-color: var(--color-surface-level1);
-}
-
-.muka-combobox__clear:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-  color: var(--color-text-default-default);
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  caret-color: var(--input-field-color-default-foreground);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
 }
 
-.muka-combobox--disabled ~ .muka-combobox__actions,
-.muka-combobox:disabled ~ .muka-combobox__actions {
-  opacity: 0.5;
+.muka-combobox__input::placeholder {
+  color: var(--color-text-subtle-default);
 }
 
-/* ─── Picker sheet body ───────────────────────────────── */
-
-.muka-combobox__picker {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  padding: 0 var(--spacing-4) var(--spacing-4);
-  min-height: 0;
-  max-height: 80vh;
+.muka-combobox__helper {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
 }
 
-.muka-combobox__title {
+.muka-combobox__error {
   margin: 0;
-  padding: var(--spacing-2) 0;
-  color: var(--color-text-default-default);
-  font-family: var(--text-heading-sm-fontFamily);
-  font-weight: var(--text-heading-sm-fontWeight);
-  font-size: var(--text-heading-sm-fontSize);
-  line-height: var(--text-heading-sm-lineHeight);
+  color: var(--color-state-error-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
 }
 
-.muka-combobox__search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding-bottom: var(--spacing-2);
-  background-color: var(--color-surface-level3);
+.muka-combobox__menu-anchor {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0;
 }
 
-.muka-combobox__list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
+.muka-combobox__menu {
+  /* Prefer Menu token min-width (280px); may exceed the field when left-aligned. */
+  min-width: var(--menu-content-min-width);
+  width: max-content;
+  max-width: min(100vw - 2rem, 24rem);
 }
 
 
@@ -12796,19 +13480,36 @@ button.muka-chat-photo-grid__tile:focus-visible {
   gap: var(--spacing-1);
 }
 
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) {
+  padding-left: var(--spacing-1);
+}
+
 .muka-breadcrumb__icon {
   display: inline-flex;
   align-items: center;
   color: var(--color-text-subtle-default);
 }
 
+.muka-breadcrumb__icon .muka-icon {
+  color: inherit;
+}
+
+.muka-breadcrumb__item:has(.muka-breadcrumb__current) .muka-breadcrumb__icon {
+  color: var(--color-text-default-default);
+}
+
+.muka-breadcrumb__item:has(.muka-breadcrumb__link:hover) .muka-breadcrumb__icon {
+  color: var(--color-text-action-default);
+}
+
 /* Link styles */
 .muka-breadcrumb__link {
   color: var(--color-text-subtle-default);
   text-decoration: none;
   border: none;
   background: none;
-  padding: 0;
+  padding-inline: var(--spacing-2);
+  padding-block: 0;
   cursor: pointer;
   font: inherit;
   transition: color 0.15s ease;
@@ -12819,10 +13520,17 @@ button.muka-chat-photo-grid__tile:focus-visible {
   text-decoration: underline;
 }
 
-/* Current page (last item) */
+/* Tighter gap after leading icon */
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__link,
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__current {
+  padding-left: var(--spacing-1);
+}
+
+/* Current page (last item, no context switcher) */
 .muka-breadcrumb__current {
   color: var(--color-text-default-default);
   font-weight: 600;
+  padding-inline: var(--spacing-2);
 }
 
 /* Separator */
@@ -13011,7 +13719,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  letter-spacing: var(--text-label-sm-regular-letterSpacing);
 }
 
 /* ─── Floating modifier ───────────────────────────────── */
@@ -13097,7 +13804,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
     font-weight: var(--text-label-md-regular-fontWeight);
     font-size: var(--text-label-md-regular-fontSize);
     line-height: var(--text-label-md-regular-lineHeight);
-    letter-spacing: var(--text-label-md-regular-letterSpacing);
   }
 
   /* When floating and sidebar, remove the floating card styles */
@@ -13162,7 +13868,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
     font-weight: var(--text-label-md-regular-fontWeight);
     font-size: var(--text-label-md-regular-fontSize);
     line-height: var(--text-label-md-regular-lineHeight);
-    letter-spacing: var(--text-label-md-regular-letterSpacing);
   }
 
   /* When floating and topnav, remove the floating card styles */
@@ -14273,10 +14978,10 @@ button.muka-chat-photo-grid__tile:focus-visible {
   cursor: pointer;
   text-align: left;
   color: var(--color-text-default-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   -webkit-tap-highlight-color: transparent;
   transition: background-color 0.12s ease;
 }