@revikornmann/muka-ui 0.18.0 → 0.19.0

package/dist/styles/muka-light.css

@@ -1921,12 +1921,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;
@@ -1949,7 +1949,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;
@@ -2560,6 +2561,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 */
 
@@ -4579,84 +4672,6 @@ body {
 }
 
 
-/* Spinner */
-/* Spinner Component Styles */
-
-.muka-spinner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-default-default);
-  line-height: 0;
-}
-
-.muka-spinner--subtle {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-spinner--inverse {
-  color: var(--color-text-inverse-default);
-}
-
-.muka-spinner__circle {
-  display: inline-block;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: currentColor;
-  border-right-color: transparent;
-  animation: muka-spinner-rotate 0.7s linear infinite;
-  box-sizing: border-box;
-}
-
-/* ─── Sizes ───────────────────────────────────────────── */
-
-.muka-spinner--sm .muka-spinner__circle {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
-}
-
-.muka-spinner--md .muka-spinner__circle {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
-}
-
-.muka-spinner--lg .muka-spinner__circle {
-  width: 24px;
-  height: 24px;
-  border-width: 3px;
-}
-
-/* ─── Visually-hidden label ───────────────────────────── */
-
-.muka-spinner__sr-label {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ─── Reduced motion ──────────────────────────────────── */
-
-@keyframes muka-spinner-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .muka-spinner__circle {
-    animation-duration: 2.5s;
-  }
-}
-
-
 /* SpecList */
 /* SpecList Component Styles */
 
@@ -4742,49 +4757,58 @@ body {
 }
 
 
-/* SmsOtpField */
-/* SmsOtpField Component Styles - Using Muka Design Tokens */
+/* Spinner */
+/* Spinner Component Styles */
 
-/* Wrapper */
-.muka-sms-otp-field {
+.muka-spinner {
   display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-default-default);
+  line-height: 0;
 }
 
-/* Label */
-.muka-sms-otp-field__label {
-  color: var(--color-text-default-default);
-  cursor: pointer;
+.muka-spinner--subtle {
+  color: var(--color-text-subtle-default);
 }
 
-.muka-sms-otp-field__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-spinner--inverse {
+  color: var(--color-text-inverse-default);
 }
 
-.muka-sms-otp-field__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-spinner__circle {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+  animation: muka-spinner-rotate 0.7s linear infinite;
+  box-sizing: border-box;
 }
 
-.muka-sms-otp-field__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);
+/* ─── Sizes ───────────────────────────────────────────── */
+
+.muka-spinner--sm .muka-spinner__circle {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
 }
 
-.muka-sms-otp-field__required {
-  color: var(--color-state-error-foreground);
+.muka-spinner--md .muka-spinner__circle {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
 }
 
-/* Hidden input for browser autofill */
-.muka-sms-otp-field__hidden-input {
+.muka-spinner--lg .muka-spinner__circle {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+/* ─── Visually-hidden label ───────────────────────────── */
+
+.muka-spinner__sr-label {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4794,143 +4818,20 @@ body {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-  opacity: 0;
-  pointer-events: none;
 }
 
-/* Digits container */
-.muka-sms-otp-field__digits {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
+/* ─── Reduced motion ──────────────────────────────────── */
 
-/* Separator */
-.muka-sms-otp-field__separator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-subtle-default);
-  font-size: 1.25rem;
-  padding: 0 var(--spacing-1);
-  user-select: none;
+@keyframes muka-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-/* Individual digit box */
-.muka-sms-otp-field__digit {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background-color: var(--input-field-color-default-background);
-  border: var(--border-width-regular) solid var(--input-field-color-default-border);
-  color: var(--input-field-color-default-foreground);
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  box-sizing: border-box;
-  caret-color: var(--input-field-color-focus-border);
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-/* Remove spinner buttons */
-.muka-sms-otp-field__digit::-webkit-inner-spin-button,
-.muka-sms-otp-field__digit::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Size variants */
-.muka-sms-otp-field__digit--sm {
-  width: 36px;
-  height: var(--input-field-height-sm);
-  border-radius: var(--input-field-radius-sm);
-  font-family: var(--text-input-sm-fontFamily);
-  font-weight: var(--text-input-sm-fontWeight);
-  font-size: var(--text-input-sm-fontSize);
-  line-height: var(--text-input-sm-lineHeight);
-}
-
-.muka-sms-otp-field__digit--md {
-  width: 44px;
-  height: var(--input-field-height-default);
-  border-radius: var(--input-field-radius-md);
-  font-family: var(--text-input-md-fontFamily);
-  font-weight: var(--text-input-md-fontWeight);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-}
-
-.muka-sms-otp-field__digit--lg {
-  width: 52px;
-  height: var(--input-field-height-lg);
-  border-radius: var(--input-field-radius-lg);
-  font-family: var(--text-input-lg-fontFamily);
-  font-weight: var(--text-input-lg-fontWeight);
-  font-size: var(--text-input-lg-fontSize);
-  line-height: var(--text-input-lg-lineHeight);
-}
-
-/* Inset shadow (matches Input component) */
-.muka-sms-otp-field__digit::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;
-}
-
-/* Focus state */
-.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-focus-border);
-  background-color: var(--input-field-color-focus-background);
-  outline: none;
-}
-
-/* Also handle native :focus for keyboard navigation */
-.muka-sms-otp-field__digit:focus {
-  outline: none;
-}
-
-/* Error state */
-.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-error-border);
-  background-color: var(--input-field-color-error-background);
-}
-
-/* Disabled state */
-.muka-sms-otp-field__digit--disabled {
-  background-color: var(--input-field-color-disabled-background);
-  border-color: var(--input-field-color-disabled-border);
-  color: var(--input-field-color-disabled-foreground);
-  cursor: not-allowed;
-}
-
-/* Filled state — slightly bolder text */
-.muka-sms-otp-field__digit--filled {
-  color: var(--input-field-color-default-foreground);
-}
-
-/* Helper text */
-.muka-sms-otp-field__helper {
-  font-family: var(--text-label-sm-regular-fontFamily);
-  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-text-subtle-default);
-  margin: 0;
-}
-
-/* Error message */
-.muka-sms-otp-field__error {
-  font-family: var(--text-label-sm-regular-fontFamily);
-  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);
-  margin: 0;
+@media (prefers-reduced-motion: reduce) {
+  .muka-spinner__circle {
+    animation-duration: 2.5s;
+  }
 }
 
 
@@ -5740,25 +5641,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 {
@@ -6395,19 +6297,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;
@@ -6416,13 +6321,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) ───────────────────────────── */
@@ -6435,20 +6343,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;
 }
@@ -6475,6 +6387,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;
@@ -6487,8 +6411,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);
@@ -6501,14 +6429,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 */
@@ -6518,20 +6446,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;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector-line {
+  flex: 1 1 auto;
+  height: 4px;
+  min-width: 1px;
 }
 
-/* Past: solid dark line */
-.muka-progress-tracker__connector--past {
+.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%,
@@ -6539,8 +6478,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%,
@@ -6549,128 +6487,343 @@ 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-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%
+  );
+}
+
+/* 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 {
+  gap: var(--spacing-6);
+}
+
+.muka-progress-accordeon--upcoming,
+.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
+  gap: var(--spacing-8);
+}
+
+/* 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%;
+}
+
+/* ─── 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);
+}
+
+/* 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-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);
@@ -7634,32 +7787,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);
 }
@@ -7670,22 +7853,27 @@ 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);
 }
@@ -7722,22 +7910,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,
@@ -7803,25 +7995,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);
 }
 
@@ -7842,9 +8064,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'] {
@@ -7852,11 +8075,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 {
@@ -7882,10 +8121,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;
@@ -8568,27 +8807,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__field--disabled .muka-input__icon {
+.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);
+}
+
+/* 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);
 }
 
@@ -8597,6 +8867,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);
@@ -9147,114 +9423,342 @@ li.muka-listitem {
   height: var(--emptystate-icon-size-md);
 }
 
-.muka-emptystate--lg .muka-emptystate__visual {
-  width: var(--emptystate-icon-size-lg);
-  height: var(--emptystate-icon-size-lg);
+.muka-emptystate--lg .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-lg);
+  height: var(--emptystate-icon-size-lg);
+}
+
+.muka-emptystate__visual svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-emptystate__visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Content */
+.muka-emptystate__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-emptystate--left .muka-emptystate__content {
+  align-items: flex-start;
+}
+
+/* Title */
+.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);
+}
+
+.muka-emptystate--sm .muka-emptystate__title {
+  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-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);
+}
+
+/* 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-foreground);
+}
+
+.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-emptystate__visual svg {
-  width: 100%;
-  height: 100%;
+.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
+  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
 }
 
-.muka-emptystate__visual img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.muka-dropdown-select__field--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/* Content */
-.muka-emptystate__content {
+.muka-dropdown-select__content {
+  position: relative;
+  z-index: 1;
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
+  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-emptystate--left .muka-emptystate__content {
-  align-items: flex-start;
+.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);
 }
 
-/* Title */
-.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);
+.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-emptystate--sm .muka-emptystate__title {
-  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__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-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);
+.muka-dropdown-select__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
 }
 
-/* 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__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;
 }
 
-.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__field--multiline .muka-dropdown-select__menu-button {
+  align-items: flex-start;
+  padding-top: calc(var(--spacing-2) + 8px);
 }
 
-.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 {
+  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);
 }
 
-/* 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__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);
 }
 
-.muka-emptystate--left .muka-emptystate__actions {
-  justify-content: flex-start;
+.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
 }
 
+.muka-dropdown-select__menu-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-action-default));
+  outline-offset: 2px;
+}
 
-/* EmojiPicker */
-/* EmojiPicker Component Styles */
+.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);
+}
 
-.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-foreground);
+  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. */
 }
 
 
@@ -10752,191 +11256,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 {
-  display: inline-flex;
+.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__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-border, var(--color-state-error-foreground));
 }
 
-.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);
-}
-
-.muka-combobox__clear {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: 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);
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
 }
 
-.muka-combobox__clear:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-  color: var(--color-text-default-default);
+.muka-combobox__input {
+  flex: 1 1 5rem;
+  min-width: 5rem;
+  min-height: 2rem;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: none;
+  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-foreground);
+  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);
 }
 
 
@@ -14485,3 +14973,195 @@ button.muka-chat-photo-grid__tile:focus-visible {
   border-bottom: none;
 }
 
+
+/* SmsOtpField */
+/* SmsOtpField Component Styles - Using Muka Design Tokens */
+
+/* Wrapper */
+.muka-sms-otp-field {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-sms-otp-field__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-sms-otp-field__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-sms-otp-field__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-sms-otp-field__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-sms-otp-field__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Hidden input for browser autofill */
+.muka-sms-otp-field__hidden-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Digits container */
+.muka-sms-otp-field__digits {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Separator */
+.muka-sms-otp-field__separator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  font-size: 1.25rem;
+  padding: 0 var(--spacing-1);
+  user-select: none;
+}
+
+/* Individual digit box */
+.muka-sms-otp-field__digit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  color: var(--input-field-color-default-foreground);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
+  caret-color: var(--input-field-color-focus-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove spinner buttons */
+.muka-sms-otp-field__digit::-webkit-inner-spin-button,
+.muka-sms-otp-field__digit::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Size variants */
+.muka-sms-otp-field__digit--sm {
+  width: 36px;
+  height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-sms-otp-field__digit--md {
+  width: 44px;
+  height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-sms-otp-field__digit--lg {
+  width: 52px;
+  height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+/* Inset shadow (matches Input component) */
+.muka-sms-otp-field__digit::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;
+}
+
+/* Focus state */
+.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  outline: none;
+}
+
+/* Also handle native :focus for keyboard navigation */
+.muka-sms-otp-field__digit:focus {
+  outline: none;
+}
+
+/* Error state */
+.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+/* Disabled state */
+.muka-sms-otp-field__digit--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Filled state — slightly bolder text */
+.muka-sms-otp-field__digit--filled {
+  color: var(--input-field-color-default-foreground);
+}
+
+/* Helper text */
+.muka-sms-otp-field__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  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-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-sms-otp-field__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  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);
+  margin: 0;
+}
+