@revikornmann/muka-ui 0.19.0 → 0.20.0

package/dist/styles/index.css

@@ -2406,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;
 }
@@ -3837,7 +3837,7 @@ body {
 }
 
 .muka-textarea__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Field container */
@@ -3950,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;
 }
 
@@ -4074,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 */
@@ -4092,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;
@@ -4124,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) */
@@ -4140,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;
@@ -4149,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;
 }
 
@@ -4271,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 {
@@ -4283,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 {
@@ -4447,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 {
@@ -4459,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 {
@@ -4654,22 +4654,100 @@ 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);
+}
+
+
+/* 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-default-inverse);
+}
+
+.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;
+  }
 }
 
 
@@ -4696,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;
@@ -4717,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 {
@@ -4758,58 +4836,49 @@ body {
 }
 
 
-/* Spinner */
-/* Spinner Component Styles */
+/* SmsOtpField */
+/* SmsOtpField Component Styles - Using Muka Design Tokens */
 
-.muka-spinner {
+/* Wrapper */
+.muka-sms-otp-field {
   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);
+  flex-direction: column;
+  gap: var(--spacing-2);
 }
 
-.muka-spinner--inverse {
-  color: var(--color-text-inverse-default);
+/* Label */
+.muka-sms-otp-field__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
 }
 
-.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--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);
 }
 
-/* ─── Sizes ───────────────────────────────────────────── */
-
-.muka-spinner--sm .muka-spinner__circle {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
+.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--md .muka-spinner__circle {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
+.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-spinner--lg .muka-spinner__circle {
-  width: 24px;
-  height: 24px;
-  border-width: 3px;
+.muka-sms-otp-field__required {
+  color: var(--color-state-error-default);
 }
 
-/* ─── Visually-hidden label ───────────────────────────── */
-
-.muka-spinner__sr-label {
+/* Hidden input for browser autofill */
+.muka-sms-otp-field__hidden-input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4819,20 +4888,143 @@ body {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
-/* ─── Reduced motion ──────────────────────────────────── */
+/* Digits container */
+.muka-sms-otp-field__digits {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
 
-@keyframes muka-spinner-rotate {
-  to {
-    transform: rotate(360deg);
-  }
+/* 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;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .muka-spinner__circle {
-    animation-duration: 2.5s;
-  }
+/* 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-default);
+  margin: 0;
 }
 
 
@@ -5032,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,
@@ -5180,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;
 }
 
@@ -5479,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;
 }
@@ -6725,16 +6917,18 @@ body {
 
 /* 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--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--past.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
   gap: var(--spacing-8);
 }
 
-/* Past steps group header + slot. The header↔content gap lives inside the
+/* 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 {
@@ -6768,8 +6962,10 @@ body {
   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 {
+/* 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);
 }
 
@@ -6873,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. */
@@ -7499,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);
 }
 
@@ -7575,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 */
 
@@ -7608,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;
 }
 
@@ -7641,69 +7867,39 @@ 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);
-  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);
-  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);
-  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;
+.muka-pagination--md .muka-pagination__ellipsis {
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
+  font-size: var(--text-label-md-regular-fontSize);
 }
 
-/* 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-pagination--lg .muka-pagination__button {
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
+  font-size: var(--text-label-lg-regular-fontSize);
 }
 
-.muka-numberinput__field .muka-input__native {
-  -moz-appearance: textfield;
-  appearance: textfield;
+.muka-pagination--lg .muka-pagination__ellipsis {
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
+  font-size: var(--text-label-lg-regular-fontSize);
 }
 
 
@@ -7876,7 +8072,7 @@ body {
 }
 
 .muka-menu__match {
-  font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--text-label-md-bold-fontWeight);
 }
 
 .muka-menu__content--scrollbar {
@@ -8596,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;
 }
 
@@ -8638,7 +8834,7 @@ li.muka-listitem {
 }
 
 .muka-label__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 
@@ -8684,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,
@@ -8890,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;
 }
 
@@ -9090,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);
 }
 
@@ -9176,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;
@@ -9215,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 {
@@ -9272,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) {
@@ -9455,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 {
@@ -9469,10 +9665,10 @@ 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 */
@@ -9576,7 +9772,7 @@ li.muka-listitem {
 }
 
 .muka-dropdown-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-dropdown-select__field {
@@ -9636,7 +9832,7 @@ li.muka-listitem {
 }
 
 .muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
-  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+  border-color: var(--color-state-error-contrast);
 }
 
 .muka-dropdown-select__field--disabled {
@@ -9751,7 +9947,7 @@ li.muka-listitem {
 
 .muka-dropdown-select__error {
   margin: 0;
-  color: var(--color-state-error-foreground);
+  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);
@@ -9987,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);
 }
 
@@ -10132,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);
 }
@@ -11159,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;
 }
 
@@ -11343,7 +11539,7 @@ li.muka-listitem {
 }
 
 .muka-combobox__field--error:not(.muka-combobox__field--disabled) {
-  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+  border-color: var(--color-state-error-contrast);
 }
 
 .muka-combobox__field--disabled {
@@ -11400,7 +11596,7 @@ li.muka-listitem {
 
 .muka-combobox__error {
   margin: 0;
-  color: var(--color-state-error-foreground);
+  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);
@@ -13284,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;
@@ -13307,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 */
@@ -13499,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 ───────────────────────────────── */
@@ -13585,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 */
@@ -13650,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 */
@@ -14761,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;
 }
@@ -14974,195 +15191,3 @@ 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;
-}
-