@revikornmann/muka-ui 0.19.0 → 0.20.0

package/dist/styles/wireframe-dark.css

@@ -2373,7 +2373,7 @@ body {
 .muka-waveform {
   display: flex;
   align-items: center;
-  gap: var(--spacing-05, 2px);
+  gap: var(--size-3xs);
   width: 100%;
   min-width: 0;
 }
@@ -3804,7 +3804,7 @@ body {
 }
 
 .muka-textarea__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Field container */
@@ -3917,7 +3917,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;
 }
 
@@ -4041,7 +4041,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 */
@@ -4059,7 +4059,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;
@@ -4091,12 +4091,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) */
@@ -4107,7 +4107,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;
@@ -4116,7 +4116,7 @@ body {
 }
 
 .muka-tabs__trigger--disabled {
-  color: var(--color-text-disabled-foreground, #a0a0a0);
+  color: var(--tabs-trigger-color-disabled-foreground);
   cursor: not-allowed;
 }
 
@@ -4238,7 +4238,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 {
@@ -4250,11 +4250,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 {
@@ -4414,7 +4414,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 {
@@ -4426,11 +4426,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 {
@@ -4621,22 +4621,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;
+  }
 }
 
 
@@ -4663,10 +4741,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;
@@ -4684,10 +4762,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 {
@@ -4725,58 +4803,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;
@@ -4786,20 +4855,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;
 }
 
 
@@ -4999,7 +5191,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,
@@ -5147,7 +5339,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;
 }
 
@@ -5446,10 +5638,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;
 }
@@ -6692,16 +6884,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 {
@@ -6735,8 +6929,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);
 }
 
@@ -6840,7 +7036,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. */
@@ -7466,10 +7662,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);
 }
 
@@ -7542,6 +7738,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 */
 
@@ -7575,9 +7801,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;
 }
 
@@ -7608,69 +7834,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);
 }
 
 
@@ -7843,7 +8039,7 @@ body {
 }
 
 .muka-menu__match {
-  font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--text-label-md-bold-fontWeight);
 }
 
 .muka-menu__content--scrollbar {
@@ -8563,7 +8759,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;
 }
 
@@ -8605,7 +8801,7 @@ li.muka-listitem {
 }
 
 .muka-label__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 
@@ -8651,7 +8847,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,
@@ -8857,7 +9053,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;
 }
 
@@ -9057,10 +9253,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);
 }
 
@@ -9143,10 +9339,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;
@@ -9182,11 +9378,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 {
@@ -9239,7 +9435,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) {
@@ -9422,10 +9618,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 {
@@ -9436,10 +9632,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 */
@@ -9543,7 +9739,7 @@ li.muka-listitem {
 }
 
 .muka-dropdown-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-dropdown-select__field {
@@ -9603,7 +9799,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 {
@@ -9718,7 +9914,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);
@@ -9954,7 +10150,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);
 }
 
@@ -10099,7 +10295,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);
 }
@@ -11126,10 +11322,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;
 }
 
@@ -11310,7 +11506,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 {
@@ -11367,7 +11563,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);
@@ -13251,19 +13447,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;
@@ -13274,10 +13487,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 */
@@ -13466,7 +13686,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 ───────────────────────────────── */
@@ -13552,7 +13771,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 */
@@ -13617,7 +13835,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 */
@@ -14728,10 +14945,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;
 }
@@ -14941,195 +15158,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;
-}
-