@revikornmann/muka-ui 0.27.3 → 0.28.1

package/dist/styles/index.css

@@ -153,6 +153,8 @@ body {
   padding: 0;
   /* Page background uses Muka surface token so it matches theme (e.g. dark for muka-dark, wireframe-dark) */
   background-color: var(--color-surface-level3);
+  /* Default text color so bare text (h1–h6, p, span outside components) follows the theme instead of browser black */
+  color: var(--color-text-default-default);
 }
 
 
@@ -3712,6 +3714,17 @@ body {
   height: 120px;
 }
 
+/* Fluid: fill the parent's width; the shape sets the height via aspect-ratio. */
+.muka-thumbnail--fluid {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.muka-thumbnail--fluid.muka-thumbnail--4-3 {
+  aspect-ratio: 4 / 3;
+}
+
 .muka-thumbnail--ellipse .muka-thumbnail__frame {
   border-radius: var(--border-radius-full);
 }
@@ -6157,195 +6170,267 @@ body {
 }
 
 
-/* Radio */
-/* Radio Component Styles - Using Muka Design Tokens */
-
-/* Wrapper - clickable label container */
-.muka-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  cursor: pointer;
-  user-select: none;
-}
-
-.muka-radio--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+/* RangeSlider */
+/* RangeSlider Component Styles - Using Muka Design Tokens */
 
-/* Control container */
-.muka-radio__control {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.muka-range-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
 }
 
-/* Hidden native input */
-.muka-radio__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+/* ========================================
+   HEADER: label group (label + info + optional) and value readout
+   ======================================== */
 
-/* Visual indicator (circle) */
-.muka-radio__indicator {
+.muka-range-slider__header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: var(--radio-size-default);
-  height: var(--radio-size-default);
-  border-radius: var(--border-radius-full);
-  background-color: var(--radio-color-default-background);
-  border: var(--border-width-regular) solid var(--radio-color-default-border);
-  transition: all 0.15s ease;
-  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.15);
-}
-
-/* Size variants */
-.muka-radio--sm .muka-radio__indicator {
-  width: var(--radio-size-sm);
-  height: var(--radio-size-sm);
-}
-
-.muka-radio--lg .muka-radio__indicator {
-  width: var(--radio-size-lg);
-  height: var(--radio-size-lg);
-}
-
-/* Inner dot (shown when checked) */
-.muka-radio__dot {
-  width: var(--radio-dot-size-default);
-  height: var(--radio-dot-size-default);
-  border-radius: var(--border-radius-full);
-  background-color: var(--radio-color-default-dot);
-  transform: scale(0);
-  transition: transform 0.15s ease;
-}
-
-.muka-radio--sm .muka-radio__dot {
-  width: var(--radio-dot-size-sm);
-  height: var(--radio-dot-size-sm);
-}
-
-.muka-radio--lg .muka-radio__dot {
-  width: var(--radio-dot-size-lg);
-  height: var(--radio-dot-size-lg);
-}
-
-/* Hover state - removed per design */
-
-/* Focus state */
-.muka-radio__input:focus-visible + .muka-radio__indicator {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-/* Checked state */
-.muka-radio__input:checked + .muka-radio__indicator {
-  background-color: var(--radio-color-checked-background);
-  border-width: var(--border-width-bold);
-  border-color: var(--radio-color-checked-border);
-  box-shadow: none;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-height: 24px;
 }
 
-.muka-radio__input:checked + .muka-radio__indicator .muka-radio__dot {
-  background-color: var(--radio-color-checked-dot);
-  transform: scale(1);
+.muka-range-slider__label-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
 }
 
-/* Disabled state */
-.muka-radio--disabled .muka-radio__indicator {
-  background-color: var(--radio-color-disabled-background);
-  border-color: var(--radio-color-disabled-border);
-  box-shadow: none;
+.muka-range-slider__label {
+  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);
+  color: var(--color-text-default-default);
 }
 
-.muka-radio__input:disabled:checked + .muka-radio__indicator .muka-radio__dot {
-  background-color: var(--radio-color-disabled-dot);
+.muka-range-slider__info {
+  color: var(--color-text-subtle-default);
 }
 
-/* Label text */
-.muka-radio__label {
-  font-family: var(--text-label-lg-regular-fontFamily);
-  font-weight: var(--text-label-lg-regular-fontWeight);
-  font-size: var(--text-label-lg-regular-fontSize);
-  line-height: var(--text-label-lg-regular-lineHeight);
-  color: var(--color-text-default-default);
+.muka-range-slider__optional {
+  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);
 }
 
-.muka-radio--sm .muka-radio__label {
+.muka-range-slider__value {
   font-family: var(--text-label-md-regular-fontFamily);
   font-weight: var(--text-label-md-regular-fontWeight);
   font-size: var(--text-label-md-regular-fontSize);
   line-height: var(--text-label-md-regular-lineHeight);
+  color: var(--color-text-default-default);
+  font-variant-numeric: tabular-nums;
 }
 
-.muka-radio--lg .muka-radio__label {
-  font-family: var(--text-label-xl-regular-fontFamily);
-  font-weight: var(--text-label-xl-regular-fontWeight);
-  font-size: var(--text-label-xl-regular-fontSize);
-  line-height: var(--text-label-xl-regular-lineHeight);
-}
-
-.muka-radio--disabled .muka-radio__label {
+.muka-range-slider__helper {
+  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);
 }
 
+/* ========================================
+   TRACK + THUMB
+   Native range input, restyled. A thick sunken track holds an accent fill up to
+   the current value, with a circular grip handle. The filled portion is driven
+   by the inline --muka-range-fill custom property (set from the component value).
+   ======================================== */
 
-/* RadioTile */
-/* RadioTile Component Styles - Using Muka Design Tokens */
+/* Size variants: track height, thumb diameter and grip geometry */
+.muka-range-slider--sm {
+  --muka-range-track-h: 12px;
+  --muka-range-thumb: 24px;
+  --muka-range-grip-h: 9px;
+}
+.muka-range-slider--md {
+  --muka-range-track-h: 16px;
+  --muka-range-thumb: 32px;
+  --muka-range-grip-h: 12px;
+}
+.muka-range-slider--lg {
+  --muka-range-track-h: 20px;
+  --muka-range-thumb: 40px;
+  --muka-range-grip-h: 15px;
+}
 
-/* Base tile styles - horizontal */
-.muka-radio-tile {
+.muka-range-slider__bar {
+  /* Reserve the full thumb height so the handle never clips the layout. */
   display: flex;
   align-items: center;
-  gap: var(--spacing-4);
-  padding: var(--spacing-4);
-  border: var(--border-width-regular) solid var(--input-field-color-default-border);
-  border-radius: var(--input-field-radius-lg);
-  background-color: var(--color-surface-level3);
-  cursor: pointer;
-  transition: border-color 0.15s ease, border-width 0.15s ease;
-  overflow: hidden;
-  box-sizing: border-box;
+  height: var(--muka-range-thumb);
 }
 
-.muka-radio-tile--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+.muka-range-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--muka-range-thumb);
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
 
-/* Selected state */
-.muka-radio-tile[data-checked] {
-  border-width: var(--border-width-bold);
-  border-color: var(--color-action-default);
+  /* Grip handle fill + two vertical grip bars, all theme-aware. */
+  --muka-range-grip-color: var(--color-text-subtle-default);
+  --muka-range-grip-w: 2px;
+  --muka-range-grip-gap: 3px;
+
+  /* The track fill: action colour up to the value, sunken surface beyond it. */
+  --muka-range-track-fill: linear-gradient(
+    to right,
+    var(--color-action-default) 0,
+    var(--color-action-default) var(--muka-range-fill, 0%),
+    var(--color-surface-sunken) var(--muka-range-fill, 0%),
+    var(--color-surface-sunken) 100%
+  );
 }
 
-/* Vertical layout */
-.muka-radio-tile--vertical {
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-2);
-  position: relative;
-  width: 160px;
+.muka-range-slider__input:focus {
+  outline: none;
 }
 
-/* Radio container */
-.muka-radio-tile__radio {
-  flex-shrink: 0;
+/* WebKit / Blink track */
+.muka-range-slider__input::-webkit-slider-runnable-track {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background-image: var(--muka-range-track-fill);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-sunken);
 }
 
-/* Corner-positioned radio for vertical */
-.muka-radio-tile__radio--corner {
+/* Firefox track + progress */
+.muka-range-slider__input::-moz-range-track {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-sunken);
+}
+.muka-range-slider__input::-moz-range-progress {
+  height: var(--muka-range-track-h);
+  border-radius: var(--border-radius-full);
+  background: var(--color-action-default);
+}
+
+/* WebKit / Blink thumb (vertically centred over the track) */
+.muka-range-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--muka-range-thumb);
+  height: var(--muka-range-thumb);
+  margin-top: calc((var(--muka-range-track-h) - var(--muka-range-thumb)) / 2);
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-level2);
+  background-color: var(--color-surface-level1);
+  background-image:
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
+  background-repeat: no-repeat;
+  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
+  background-position:
+    calc(50% - var(--muka-range-grip-gap)) center,
+    calc(50% + var(--muka-range-grip-gap)) center;
+  transition: box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+/* Firefox thumb */
+.muka-range-slider__input::-moz-range-thumb {
+  width: var(--muka-range-thumb);
+  height: var(--muka-range-thumb);
+  border-radius: var(--border-radius-full);
+  border: 1px solid var(--color-border-contrast);
+  box-shadow: var(--shadow-level2);
+  background-color: var(--color-surface-level1);
+  background-image:
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
+    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
+  background-repeat: no-repeat;
+  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
+  background-position:
+    calc(50% - var(--muka-range-grip-gap)) center,
+    calc(50% + var(--muka-range-grip-gap)) center;
+  transition: box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+/* Hover */
+.muka-range-slider__input:hover::-webkit-slider-thumb {
+  background-color: var(--color-surface-level1);
+  box-shadow: var(--shadow-level3);
+}
+.muka-range-slider__input:hover::-moz-range-thumb {
+  background-color: var(--color-surface-level1);
+  box-shadow: var(--shadow-level3);
+}
+
+/* Focus ring */
+.muka-range-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
+}
+.muka-range-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
+}
+
+/* Disabled */
+.muka-range-slider--disabled {
+  opacity: 0.5;
+}
+.muka-range-slider--disabled .muka-range-slider__input {
+  cursor: not-allowed;
+}
+
+
+/* RadioTile */
+/* RadioTile Component Styles - Using Muka Design Tokens */
+
+/* Base tile styles - horizontal */
+.muka-radio-tile {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  background-color: var(--color-surface-level3);
+  cursor: pointer;
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.muka-radio-tile--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Selected state */
+.muka-radio-tile[data-checked] {
+  border-width: var(--border-width-bold);
+  border-color: var(--color-action-default);
+}
+
+/* Vertical layout */
+.muka-radio-tile--vertical {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  width: 160px;
+}
+
+/* Radio container */
+.muka-radio-tile__radio {
+  flex-shrink: 0;
+}
+
+/* Corner-positioned radio for vertical */
+.muka-radio-tile__radio--corner {
   position: absolute;
   top: var(--spacing-4);
   left: var(--spacing-4);
@@ -6444,81 +6529,225 @@ body {
 }
 
 
-/* PullToRefresh */
-/* PullToRefresh Component Styles */
+/* Radio */
+/* Radio Component Styles - Using Muka Design Tokens */
 
-.muka-pull-to-refresh {
+/* Wrapper - clickable label container */
+.muka-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Control container */
+.muka-radio__control {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.muka-pull-to-refresh__indicator {
+/* Hidden native input */
+.muka-radio__input {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: var(--spacing-2);
-  color: var(--color-text-subtle-default);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
-  pointer-events: none;
-  z-index: 1;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.muka-pull-to-refresh__chevron {
-  display: inline-flex;
+/* Visual indicator (circle) */
+.muka-radio__indicator {
+  display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.16s ease;
+  width: var(--radio-size-default);
+  height: var(--radio-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-background);
+  border: var(--border-width-regular) solid var(--radio-color-default-border);
+  transition: all 0.15s ease;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.15);
 }
 
-.muka-pull-to-refresh__scroller {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  overflow-x: clip;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: contain;
-  touch-action: pan-y;
-  will-change: transform;
+/* Size variants */
+.muka-radio--sm .muka-radio__indicator {
+  width: var(--radio-size-sm);
+  height: var(--radio-size-sm);
 }
 
+.muka-radio--lg .muka-radio__indicator {
+  width: var(--radio-size-lg);
+  height: var(--radio-size-lg);
+}
 
-/* ProgressTracker */
-/* ProgressTracker Component Styles — Using Muka Design Tokens */
+/* Inner dot (shown when checked) */
+.muka-radio__dot {
+  width: var(--radio-dot-size-default);
+  height: var(--radio-dot-size-default);
+  border-radius: var(--border-radius-full);
+  background-color: var(--radio-color-default-dot);
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
 
-/* ─── Root ──────────────────────────────────────────────── */
-.muka-progress-tracker {
-  width: 100%;
+.muka-radio--sm .muka-radio__dot {
+  width: var(--radio-dot-size-sm);
+  height: var(--radio-dot-size-sm);
 }
 
-.muka-progress-tracker--horizontal {
-  padding-bottom: var(--spacing-7);
+.muka-radio--lg .muka-radio__dot {
+  width: var(--radio-dot-size-lg);
+  height: var(--radio-dot-size-lg);
 }
 
-/* ─── Track (layered container) ─────────────────────────── */
-.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;
+/* Hover state - removed per design */
+
+/* Focus state */
+.muka-radio__input:focus-visible + .muka-radio__indicator {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
 }
 
-/* ─── Steps layer (on top) — horizontal ─────────────────── */
-.muka-progress-tracker--horizontal .muka-progress-tracker__steps {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  z-index: 2;
+/* Checked state */
+.muka-radio__input:checked + .muka-radio__indicator {
+  background-color: var(--radio-color-checked-background);
+  border-width: var(--border-width-bold);
+  border-color: var(--radio-color-checked-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-checked-dot);
+  transform: scale(1);
+}
+
+/* Disabled state */
+.muka-radio--disabled .muka-radio__indicator {
+  background-color: var(--radio-color-disabled-background);
+  border-color: var(--radio-color-disabled-border);
+  box-shadow: none;
+}
+
+.muka-radio__input:disabled:checked + .muka-radio__indicator .muka-radio__dot {
+  background-color: var(--radio-color-disabled-dot);
+}
+
+/* Label text */
+.muka-radio__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-radio--sm .muka-radio__label {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+.muka-radio--lg .muka-radio__label {
+  font-family: var(--text-label-xl-regular-fontFamily);
+  font-weight: var(--text-label-xl-regular-fontWeight);
+  font-size: var(--text-label-xl-regular-fontSize);
+  line-height: var(--text-label-xl-regular-lineHeight);
+}
+
+.muka-radio--disabled .muka-radio__label {
+  color: var(--color-text-subtle-default);
+}
+
+
+/* PullToRefresh */
+/* PullToRefresh Component Styles */
+
+.muka-pull-to-refresh {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.muka-pull-to-refresh__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.muka-pull-to-refresh__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+}
+
+.muka-pull-to-refresh__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: clip;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  will-change: transform;
+}
+
+
+/* ProgressTracker */
+/* ProgressTracker Component Styles — Using Muka Design Tokens */
+
+/* ─── Root ──────────────────────────────────────────────── */
+.muka-progress-tracker {
+  width: 100%;
+}
+
+.muka-progress-tracker--horizontal {
+  padding-bottom: var(--spacing-7);
+}
+
+/* ─── Track (layered container) ─────────────────────────── */
+.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) — horizontal ─────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__steps {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  z-index: 2;
 }
 
 /* ─── Individual step — horizontal ──────────────────────── */
@@ -7152,315 +7381,99 @@ body {
 }
 
 
-/* RangeSlider */
-/* RangeSlider Component Styles - Using Muka Design Tokens */
-
-.muka-range-slider {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  width: 100%;
-}
+/* Progress */
+/* Progress Component Styles - Using Muka Design Tokens */
 
 /* ========================================
-   HEADER: label group (label + info + optional) and value readout
+   BAR VARIANT
    ======================================== */
 
-.muka-range-slider__header {
+.muka-progress--bar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-2);
-  min-height: 24px;
+  width: 100%;
 }
 
-.muka-range-slider__label-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
+.muka-progress--bar .muka-progress__track {
+  flex: 1;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--border-radius-full);
+  overflow: hidden;
 }
 
-.muka-range-slider__label {
-  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);
-  color: var(--color-text-default-default);
+.muka-progress--bar.muka-progress--sm .muka-progress__track {
+  height: var(--progress-size-bar-height-sm);
 }
 
-.muka-range-slider__info {
-  color: var(--color-text-subtle-default);
+.muka-progress--bar.muka-progress--md .muka-progress__track {
+  height: var(--progress-size-bar-height-md);
 }
 
-.muka-range-slider__optional {
-  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);
+.muka-progress--bar.muka-progress--lg .muka-progress__track {
+  height: var(--progress-size-bar-height-lg);
 }
 
-.muka-range-slider__value {
-  font-family: var(--text-label-md-regular-fontFamily);
-  font-weight: var(--text-label-md-regular-fontWeight);
-  font-size: var(--text-label-md-regular-fontSize);
-  line-height: var(--text-label-md-regular-lineHeight);
+.muka-progress--bar .muka-progress__fill {
+  height: 100%;
+  background-color: var(--color-action-default);
+  border-radius: var(--border-radius-full);
+  transition: width 0.3s ease;
+}
+
+.muka-progress--bar .muka-progress__label {
+  flex-shrink: 0;
+  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);
   color: var(--color-text-default-default);
-  font-variant-numeric: tabular-nums;
+  min-width: 3ch;
+  text-align: right;
 }
 
-.muka-range-slider__helper {
-  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);
+/* Indeterminate animation for bar */
+.muka-progress--bar.muka-progress--indeterminate .muka-progress__fill {
+  width: 40%;
+  animation: muka-progress-bar-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes muka-progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
 }
 
 /* ========================================
-   TRACK + THUMB
-   Native range input, restyled. A thick sunken track holds an accent fill up to
-   the current value, with a circular grip handle. The filled portion is driven
-   by the inline --muka-range-fill custom property (set from the component value).
+   CIRCLE VARIANT
    ======================================== */
 
-/* Size variants: track height, thumb diameter and grip geometry */
-.muka-range-slider--sm {
-  --muka-range-track-h: 12px;
-  --muka-range-thumb: 24px;
-  --muka-range-grip-h: 9px;
+.muka-progress--circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-.muka-range-slider--md {
-  --muka-range-track-h: 16px;
-  --muka-range-thumb: 32px;
-  --muka-range-grip-h: 12px;
+
+.muka-progress--circle.muka-progress--sm {
+  width: var(--progress-size-circle-diameter-sm);
+  height: var(--progress-size-circle-diameter-sm);
 }
-.muka-range-slider--lg {
-  --muka-range-track-h: 20px;
-  --muka-range-thumb: 40px;
-  --muka-range-grip-h: 15px;
+
+.muka-progress--circle.muka-progress--md {
+  width: var(--progress-size-circle-diameter-md);
+  height: var(--progress-size-circle-diameter-md);
 }
 
-.muka-range-slider__bar {
-  /* Reserve the full thumb height so the handle never clips the layout. */
-  display: flex;
-  align-items: center;
-  height: var(--muka-range-thumb);
+.muka-progress--circle.muka-progress--lg {
+  width: var(--progress-size-circle-diameter-lg);
+  height: var(--progress-size-circle-diameter-lg);
 }
 
-.muka-range-slider__input {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: var(--muka-range-thumb);
-  margin: 0;
-  background: transparent;
-  cursor: pointer;
-
-  /* Grip handle fill + two vertical grip bars, all theme-aware. */
-  --muka-range-grip-color: var(--color-text-subtle-default);
-  --muka-range-grip-w: 2px;
-  --muka-range-grip-gap: 3px;
-
-  /* The track fill: action colour up to the value, sunken surface beyond it. */
-  --muka-range-track-fill: linear-gradient(
-    to right,
-    var(--color-action-default) 0,
-    var(--color-action-default) var(--muka-range-fill, 0%),
-    var(--color-surface-sunken) var(--muka-range-fill, 0%),
-    var(--color-surface-sunken) 100%
-  );
-}
-
-.muka-range-slider__input:focus {
-  outline: none;
-}
-
-/* WebKit / Blink track */
-.muka-range-slider__input::-webkit-slider-runnable-track {
-  height: var(--muka-range-track-h);
-  border-radius: var(--border-radius-full);
-  background-image: var(--muka-range-track-fill);
-  border: 1px solid var(--color-border-contrast);
-  box-shadow: var(--shadow-sunken);
-}
-
-/* Firefox track + progress */
-.muka-range-slider__input::-moz-range-track {
-  height: var(--muka-range-track-h);
-  border-radius: var(--border-radius-full);
-  background: var(--color-surface-sunken);
-  border: 1px solid var(--color-border-contrast);
-  box-shadow: var(--shadow-sunken);
-}
-.muka-range-slider__input::-moz-range-progress {
-  height: var(--muka-range-track-h);
-  border-radius: var(--border-radius-full);
-  background: var(--color-action-default);
-}
-
-/* WebKit / Blink thumb (vertically centred over the track) */
-.muka-range-slider__input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: var(--muka-range-thumb);
-  height: var(--muka-range-thumb);
-  margin-top: calc((var(--muka-range-track-h) - var(--muka-range-thumb)) / 2);
-  border-radius: var(--border-radius-full);
-  border: 1px solid var(--color-border-contrast);
-  box-shadow: var(--shadow-level2);
-  background-color: var(--color-surface-level1);
-  background-image:
-    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
-    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
-  background-repeat: no-repeat;
-  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
-  background-position:
-    calc(50% - var(--muka-range-grip-gap)) center,
-    calc(50% + var(--muka-range-grip-gap)) center;
-  transition: box-shadow 0.15s ease, background-color 0.15s ease;
-}
-
-/* Firefox thumb */
-.muka-range-slider__input::-moz-range-thumb {
-  width: var(--muka-range-thumb);
-  height: var(--muka-range-thumb);
-  border-radius: var(--border-radius-full);
-  border: 1px solid var(--color-border-contrast);
-  box-shadow: var(--shadow-level2);
-  background-color: var(--color-surface-level1);
-  background-image:
-    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color)),
-    linear-gradient(var(--muka-range-grip-color), var(--muka-range-grip-color));
-  background-repeat: no-repeat;
-  background-size: var(--muka-range-grip-w) var(--muka-range-grip-h), var(--muka-range-grip-w) var(--muka-range-grip-h);
-  background-position:
-    calc(50% - var(--muka-range-grip-gap)) center,
-    calc(50% + var(--muka-range-grip-gap)) center;
-  transition: box-shadow 0.15s ease, background-color 0.15s ease;
-}
-
-/* Hover */
-.muka-range-slider__input:hover::-webkit-slider-thumb {
-  background-color: var(--color-surface-level1);
-  box-shadow: var(--shadow-level3);
-}
-.muka-range-slider__input:hover::-moz-range-thumb {
-  background-color: var(--color-surface-level1);
-  box-shadow: var(--shadow-level3);
-}
-
-/* Focus ring */
-.muka-range-slider__input:focus-visible::-webkit-slider-thumb {
-  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
-}
-.muka-range-slider__input:focus-visible::-moz-range-thumb {
-  box-shadow: var(--shadow-level2), 0 0 0 3px var(--color-border-focus);
-}
-
-/* Disabled */
-.muka-range-slider--disabled {
-  opacity: 0.5;
-}
-.muka-range-slider--disabled .muka-range-slider__input {
-  cursor: not-allowed;
-}
-
-
-/* Progress */
-/* Progress Component Styles - Using Muka Design Tokens */
-
-/* ========================================
-   BAR VARIANT
-   ======================================== */
-
-.muka-progress--bar {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  width: 100%;
-}
-
-.muka-progress--bar .muka-progress__track {
-  flex: 1;
-  background-color: var(--color-surface-level1);
-  border-radius: var(--border-radius-full);
-  overflow: hidden;
-}
-
-.muka-progress--bar.muka-progress--sm .muka-progress__track {
-  height: var(--progress-size-bar-height-sm);
-}
-
-.muka-progress--bar.muka-progress--md .muka-progress__track {
-  height: var(--progress-size-bar-height-md);
-}
-
-.muka-progress--bar.muka-progress--lg .muka-progress__track {
-  height: var(--progress-size-bar-height-lg);
-}
-
-.muka-progress--bar .muka-progress__fill {
-  height: 100%;
-  background-color: var(--color-action-default);
-  border-radius: var(--border-radius-full);
-  transition: width 0.3s ease;
-}
-
-.muka-progress--bar .muka-progress__label {
-  flex-shrink: 0;
-  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);
-  color: var(--color-text-default-default);
-  min-width: 3ch;
-  text-align: right;
-}
-
-/* Indeterminate animation for bar */
-.muka-progress--bar.muka-progress--indeterminate .muka-progress__fill {
-  width: 40%;
-  animation: muka-progress-bar-indeterminate 1.5s ease-in-out infinite;
-}
-
-@keyframes muka-progress-bar-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(250%);
-  }
-}
-
-/* ========================================
-   CIRCLE VARIANT
-   ======================================== */
-
-.muka-progress--circle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.muka-progress--circle.muka-progress--sm {
-  width: var(--progress-size-circle-diameter-sm);
-  height: var(--progress-size-circle-diameter-sm);
-}
-
-.muka-progress--circle.muka-progress--md {
-  width: var(--progress-size-circle-diameter-md);
-  height: var(--progress-size-circle-diameter-md);
-}
-
-.muka-progress--circle.muka-progress--lg {
-  width: var(--progress-size-circle-diameter-lg);
-  height: var(--progress-size-circle-diameter-lg);
-}
-
-.muka-progress__circle {
+.muka-progress__circle {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
@@ -7611,141 +7624,44 @@ body {
 }
 
 
-/* PriceTag */
-/* PriceTag Component Styles - Using Muka Design Tokens */
+/* Popover */
+/* Popover Component Styles */
 
-.muka-price-tag {
-  display: flex;
-  flex-shrink: 0;
+.muka-popover__content {
+  background-color: var(--color-surface-level3);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-level3);
+  max-width: 20rem;
+  z-index: 50;
+  animation: muka-popover-fade-in 150ms ease;
 }
 
-/* Medium: stacked layout (price on top, unit below) */
-.muka-price-tag--md {
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
+@keyframes muka-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
-/* Small: inline layout */
-.muka-price-tag--sm {
-  flex-direction: row;
-  align-items: center;
-  gap: 3px;
+/* Arrow */
+.muka-popover__arrow {
+  fill: var(--color-surface-level3);
 }
 
-/* Amount row: currency + numbers */
-.muka-price-tag__amount {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-1);
-}
 
-.muka-price-tag--sm .muka-price-tag__amount {
+/* PieChart */
+/* PieChart Component Styles - Using Muka Design Tokens */
+
+.muka-piechart {
+  display: inline-flex;
   align-items: center;
-}
-
-/* Numbers group: whole + decimal + cents */
-.muka-price-tag__numbers {
-  display: flex;
-  align-items: baseline;
-}
-
-/* ─── Medium size typography ──────────────────────────── */
-
-.muka-price-tag--md .muka-price-tag__currency {
-  font-family: var(--text-subheading-md-fontFamily);
-  font-weight: var(--text-subheading-md-fontWeight);
-  font-size: var(--text-subheading-md-fontSize);
-  line-height: var(--text-label-2xl-bold-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-.muka-price-tag--md .muka-price-tag__whole {
-  font-family: var(--text-label-2xl-bold-fontFamily);
-  font-weight: var(--text-label-2xl-bold-fontWeight);
-  font-size: var(--text-label-2xl-bold-fontSize);
-  line-height: var(--text-label-2xl-bold-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-.muka-price-tag--md .muka-price-tag__decimal,
-.muka-price-tag--md .muka-price-tag__cents {
-  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);
-  color: var(--color-text-default-default);
-}
-
-/* ─── Small size typography ───────────────────────────── */
-
-.muka-price-tag--sm .muka-price-tag__currency {
-  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-label-md-bold-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-.muka-price-tag--sm .muka-price-tag__whole,
-.muka-price-tag--sm .muka-price-tag__decimal,
-.muka-price-tag--sm .muka-price-tag__cents {
-  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);
-  color: var(--color-text-default-default);
-}
-
-/* ─── Unit label (same for both sizes) ────────────────── */
-
-.muka-price-tag__unit {
-  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);
-}
-
-
-/* Popover */
-/* Popover Component Styles */
-
-.muka-popover__content {
-  background-color: var(--color-surface-level3);
-  border: var(--border-width-regular) solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-4);
-  box-shadow: var(--shadow-level3);
-  max-width: 20rem;
-  z-index: 50;
-  animation: muka-popover-fade-in 150ms ease;
-}
-
-@keyframes muka-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Arrow */
-.muka-popover__arrow {
-  fill: var(--color-surface-level3);
-}
-
-
-/* PieChart */
-/* PieChart Component Styles - Using Muka Design Tokens */
-
-.muka-piechart {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
+  gap: var(--spacing-4);
 }
 
 /* Legend layout */
@@ -7964,6 +7880,133 @@ body {
 }
 
 
+/* PriceTag */
+/* PriceTag Component Styles - Using Muka Design Tokens */
+
+.muka-price-tag {
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* Medium: stacked layout (price on top, unit below) */
+.muka-price-tag--md {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+/* Small: inline layout */
+.muka-price-tag--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Amount row: currency + numbers */
+.muka-price-tag__amount {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+
+.muka-price-tag--sm .muka-price-tag__amount {
+  align-items: center;
+}
+
+/* Numbers group: whole + decimal + cents */
+.muka-price-tag__numbers {
+  display: flex;
+  align-items: baseline;
+}
+
+/* ─── Medium size typography ──────────────────────────── */
+
+.muka-price-tag--md .muka-price-tag__currency {
+  font-family: var(--text-subheading-md-fontFamily);
+  font-weight: var(--text-subheading-md-fontWeight);
+  font-size: var(--text-subheading-md-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--md .muka-price-tag__whole {
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-price-tag--md .muka-price-tag__decimal,
+.muka-price-tag--md .muka-price-tag__cents {
+  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);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Small size typography ───────────────────────────── */
+
+.muka-price-tag--sm .muka-price-tag__currency {
+  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-label-md-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--sm .muka-price-tag__whole,
+.muka-price-tag--sm .muka-price-tag__decimal,
+.muka-price-tag--sm .muka-price-tag__cents {
+  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);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Unit label (same for both sizes) ────────────────── */
+
+.muka-price-tag__unit {
+  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);
+}
+
+
+/* PhotoDraftStrip */
+/* PhotoDraftStrip Component Styles */
+
+.muka-photo-draft-strip {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  padding: var(--spacing-2) 0;
+}
+
+.muka-photo-draft-strip__track {
+  display: flex;
+  gap: var(--spacing-2);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.muka-photo-draft-strip__track::-webkit-scrollbar {
+  display: none;
+}
+
+.muka-photo-draft-strip__item {
+  flex: 0 0 auto;
+}
+
+
 /* Pagination */
 /* Pagination Component Styles */
 
@@ -8066,51 +8109,21 @@ body {
 }
 
 
-/* PhotoDraftStrip */
-/* PhotoDraftStrip Component Styles */
+/* NumberInput */
+/* NumberInput — reuses Input field styles (../Input/Input.css). */
+/* Only the prefix/suffix affixes are NumberInput-specific. */
 
-.muka-photo-draft-strip {
-  display: flex;
+.muka-numberinput__addon {
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-3);
-  width: 100%;
-  padding: var(--spacing-2) 0;
-}
-
-.muka-photo-draft-strip__track {
-  display: flex;
-  gap: var(--spacing-2);
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-}
-
-.muka-photo-draft-strip__track::-webkit-scrollbar {
-  display: none;
-}
-
-.muka-photo-draft-strip__item {
-  flex: 0 0 auto;
-}
-
-
-/* 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;
+  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. */
@@ -8126,34 +8139,6 @@ body {
 }
 
 
-/* NavigationTransition */
-/* NavigationTransition Component Styles */
-
-/* ─── Wrapper ────────────────────────────────────────── */
-
-.muka-nav-transition {
-  position: relative;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Disable interaction during animation */
-.muka-nav-transition--active {
-  pointer-events: none;
-}
-
-/* ─── View slots ─────────────────────────────────────── */
-
-.muka-nav-transition--active .muka-nav-transition__view {
-  position: absolute;
-  inset: 0;
-}
-
-/* Z-index layering */
-.muka-nav-transition__view--bottom { z-index: 1; }
-.muka-nav-transition__view--top { z-index: 2; }
-
-
 /* Menu */
 /* Menu Component Styles */
 
@@ -8633,6 +8618,220 @@ body {
 }
 
 
+/* MediaViewer */
+/* MediaViewer Component Styles - Using Muka Design Tokens */
+
+/* ─── Native dialog: full viewport ────────────────────── */
+.muka-media-viewer {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  color: var(--color-text-default-default);
+  background-color: var(--color-black-alpha-12);
+  animation: muka-media-viewer-in var(--motion-duration-component) var(--motion-easing-enter);
+}
+
+.muka-media-viewer:not([open]) {
+  display: none;
+}
+
+.muka-media-viewer::backdrop {
+  background-color: var(--color-black-alpha-12);
+}
+
+@keyframes muka-media-viewer-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ─── Chrome: TopBar and footer sit on a surface ──────── */
+.muka-media-viewer__topbar {
+  flex-shrink: 0;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-media-viewer__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Stage: the dark area the images slide across ────── */
+.muka-media-viewer__stage {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  /* Gestures are handled in JS: no browser panning or pinch on the stage. */
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.muka-media-viewer__slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4);
+  transition: transform var(--motion-duration-component) var(--motion-easing-default);
+  will-change: transform;
+}
+
+/* While a finger drags, the image follows it without easing. */
+.muka-media-viewer--dragging .muka-media-viewer__slide {
+  transition: none;
+}
+
+.muka-media-viewer__image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  /* The image takes touches, so a long press opens the OS menu (save, share,
+     copy). The swipe still works: pointer events bubble to the stage, and a
+     long press doesn't move far enough to start a drag. */
+  -webkit-touch-callout: default;
+}
+
+/* ─── Previous / next: devices that can hover ─────────── */
+.muka-media-viewer__nav {
+  position: absolute;
+  top: 50%;
+  display: none;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-media-viewer__nav--previous {
+  left: var(--spacing-4);
+}
+
+.muka-media-viewer__nav--next {
+  right: var(--spacing-4);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .muka-media-viewer__nav {
+    display: block;
+  }
+
+  .muka-media-viewer__stage:hover .muka-media-viewer__nav,
+  .muka-media-viewer__nav:focus-within {
+    opacity: 1;
+  }
+}
+
+/* ─── Footer: caption, meta and actions ───────────────── */
+.muka-media-viewer__footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
+  background-color: var(--color-surface-level3);
+}
+
+.muka-media-viewer__details {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.muka-media-viewer__caption {
+  min-width: 0;
+  color: var(--color-text-subtle-default);
+  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);
+  overflow-wrap: anywhere;
+}
+
+.muka-media-viewer__meta {
+  flex-shrink: 0;
+}
+
+.muka-media-viewer__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+/* Mobile: actions stack full width, like Dialog footers. */
+@media (max-width: 1023px) {
+  .muka-media-viewer__actions {
+    flex-direction: column;
+  }
+
+  .muka-media-viewer__actions > * {
+    width: 100%;
+  }
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-media-viewer,
+  .muka-media-viewer__slide,
+  .muka-media-viewer__nav {
+    animation: none;
+    transition: none;
+  }
+}
+
+
+/* NavigationTransition */
+/* NavigationTransition Component Styles */
+
+/* ─── Wrapper ────────────────────────────────────────── */
+
+.muka-nav-transition {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Disable interaction during animation */
+.muka-nav-transition--active {
+  pointer-events: none;
+}
+
+/* ─── View slots ─────────────────────────────────────── */
+
+.muka-nav-transition--active .muka-nav-transition__view {
+  position: absolute;
+  inset: 0;
+}
+
+/* Z-index layering */
+.muka-nav-transition__view--bottom { z-index: 1; }
+.muka-nav-transition__view--top { z-index: 2; }
+
+
 /* ListItem */
 /* ListItem Component Styles - Using Muka Design Tokens */
 
@@ -8827,207 +9026,14 @@ li.muka-listitem {
 }
 
 
-/* LicensePlateInput */
-/* LicensePlateInput — Dutch RDW-style plate input
- *
- * Plate body colors are regulatory (EU/NL) and intentionally fixed:
- *   - Plate yellow:        #F0CE3D
- *   - EU strip blue:       #003399
- *   - EU stars yellow:     #FFCC00
- *   - Plate text:          #1A1A1A
- *
- * All surrounding UI (label, helper, focus ring, error border) uses Muka tokens.
- */
-
-.muka-license-plate-input {
-  --plate-yellow: #f0ce3d;
-  --plate-blue: #003399;
-  --plate-text: #1a1a1a;
-  --plate-stars: #ffcc00;
+/* Label */
+/* Label Component Styles - Using Muka Design Tokens */
 
+.muka-label {
   display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-/* Plate body */
-.muka-license-plate-input__plate {
-  display: inline-flex;
-  align-items: stretch;
-  background-color: var(--plate-yellow);
-  border-radius: var(--input-field-radius-md);
-  cursor: text;
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-  /* Subtle outline to lift the plate from light backgrounds */
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-  /* Reserve space for the focus / error solid ring without shifting layout */
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-  transition: outline-color 0.15s ease, opacity 0.15s ease;
-}
-
-/* Size variants — plate aspect echoes the real RDW plate (~5:1) */
-.muka-license-plate-input__plate--sm {
-  height: 44px;
-  min-width: 220px;
-  border-radius: var(--input-field-radius-sm);
-}
-
-.muka-license-plate-input__plate--md {
-  height: 60px;
-  min-width: 300px;
-  border-radius: var(--input-field-radius-md);
-}
-
-.muka-license-plate-input__plate--lg {
-  height: 80px;
-  min-width: 400px;
-  border-radius: var(--input-field-radius-lg);
-}
-
-/* Focus — solid outline ring */
-.muka-license-plate-input__plate--focused:not(.muka-license-plate-input__plate--disabled) {
-  outline-color: var(--input-field-color-focus-border);
-}
-
-/* Error — solid outline ring in error color */
-.muka-license-plate-input__plate--error:not(.muka-license-plate-input__plate--disabled) {
-  outline-color: var(--input-field-color-error-border);
-}
-
-/* Disabled */
-.muka-license-plate-input__plate--disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-/* EU strip */
-.muka-license-plate-input__eu-strip {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--plate-blue);
-  color: #ffffff;
-  flex-shrink: 0;
-  padding: 0 0.4em;
-  gap: 0.15em;
-  /* Strip width scales with plate height for a consistent ratio */
-  width: 14%;
-  min-width: 36px;
-}
-
-.muka-license-plate-input__eu-stars {
-  width: 60%;
-  max-width: 28px;
-  aspect-ratio: 1 / 1;
-  display: block;
-}
-
-.muka-license-plate-input__plate--sm .muka-license-plate-input__eu-stars {
-  max-width: 20px;
-}
-
-.muka-license-plate-input__plate--lg .muka-license-plate-input__eu-stars {
-  max-width: 36px;
-}
-
-.muka-license-plate-input__country-code {
-  font-family:
-    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  color: #ffffff;
-}
-
-.muka-license-plate-input__plate--sm .muka-license-plate-input__country-code {
-  font-size: 10px;
-}
-
-.muka-license-plate-input__plate--md .muka-license-plate-input__country-code {
-  font-size: 13px;
-}
-
-.muka-license-plate-input__plate--lg .muka-license-plate-input__country-code {
-  font-size: 16px;
-}
-
-/* Native input */
-.muka-license-plate-input__native {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--plate-text);
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  /* Plate font — bold condensed sans is closest to the FE-Schrift look without
-     shipping a custom font. JetBrains Mono is the system mono brand font. */
-  font-family:
-    'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 800;
-  padding: 0 0.5em;
-  width: 100%;
-  caret-color: var(--plate-text);
-}
-
-.muka-license-plate-input__plate--sm .muka-license-plate-input__native {
-  font-size: 22px;
-}
-
-.muka-license-plate-input__plate--md .muka-license-plate-input__native {
-  font-size: 30px;
-}
-
-.muka-license-plate-input__plate--lg .muka-license-plate-input__native {
-  font-size: 42px;
-}
-
-.muka-license-plate-input__native::placeholder {
-  color: var(--plate-text);
-  opacity: 0.55;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-}
-
-.muka-license-plate-input__plate--disabled .muka-license-plate-input__native {
-  cursor: not-allowed;
-}
-
-/* Helper text */
-.muka-license-plate-input__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-license-plate-input__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;
-}
-
-
-/* Label */
-/* Label Component Styles - Using Muka Design Tokens */
-
-.muka-label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-default-default);
-  cursor: pointer;
+  align-items: center;
+  color: var(--color-text-default-default);
+  cursor: pointer;
 }
 
 .muka-label--sm {
@@ -9239,55 +9245,248 @@ li.muka-listitem {
 }
 
 
-/* Input */
-/* Input Component Styles - Using Muka Design Tokens */
+/* LicensePlateInput */
+/* LicensePlateInput — Dutch RDW-style plate input
+ *
+ * Plate body colors are regulatory (EU/NL) and intentionally fixed:
+ *   - Plate yellow:        #F0CE3D
+ *   - EU strip blue:       #003399
+ *   - EU stars yellow:     #FFCC00
+ *   - Plate text:          #1A1A1A
+ *
+ * All surrounding UI (label, helper, focus ring, error border) uses Muka tokens.
+ */
+
+.muka-license-plate-input {
+  --plate-yellow: #f0ce3d;
+  --plate-blue: #003399;
+  --plate-text: #1a1a1a;
+  --plate-stars: #ffcc00;
 
-/* Wrapper — label, field, helper spacing per Figma */
-.muka-input {
   display: inline-flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
 
-.muka-input--full-width {
-  width: 100%;
+/* Plate body */
+.muka-license-plate-input__plate {
+  display: inline-flex;
+  align-items: stretch;
+  background-color: var(--plate-yellow);
+  border-radius: var(--input-field-radius-md);
+  cursor: text;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Subtle outline to lift the plate from light backgrounds */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  /* Reserve space for the focus / error solid ring without shifting layout */
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  transition: outline-color 0.15s ease, opacity 0.15s ease;
 }
 
-/* Label */
-.muka-input__label {
-  color: var(--color-text-default-default);
-  cursor: pointer;
+/* Size variants — plate aspect echoes the real RDW plate (~5:1) */
+.muka-license-plate-input__plate--sm {
+  height: 44px;
+  min-width: 220px;
+  border-radius: var(--input-field-radius-sm);
 }
 
-.muka-input__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-license-plate-input__plate--md {
+  height: 60px;
+  min-width: 300px;
+  border-radius: var(--input-field-radius-md);
 }
 
-.muka-input__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-license-plate-input__plate--lg {
+  height: 80px;
+  min-width: 400px;
+  border-radius: var(--input-field-radius-lg);
 }
 
-.muka-input__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);
+/* Focus — solid outline ring */
+.muka-license-plate-input__plate--focused:not(.muka-license-plate-input__plate--disabled) {
+  outline-color: var(--input-field-color-focus-border);
 }
 
-.muka-input__required {
-  color: var(--color-state-error-default);
+/* Error — solid outline ring in error color */
+.muka-license-plate-input__plate--error:not(.muka-license-plate-input__plate--disabled) {
+  outline-color: var(--input-field-color-error-border);
 }
 
-.muka-input__label--sm + .muka-input__field--disabled,
-.muka-input__label--md + .muka-input__field--disabled,
-.muka-input__label--lg + .muka-input__field--disabled {
-  cursor: not-allowed;
+/* Disabled */
+.muka-license-plate-input__plate--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* EU strip */
+.muka-license-plate-input__eu-strip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--plate-blue);
+  color: #ffffff;
+  flex-shrink: 0;
+  padding: 0 0.4em;
+  gap: 0.15em;
+  /* Strip width scales with plate height for a consistent ratio */
+  width: 14%;
+  min-width: 36px;
+}
+
+.muka-license-plate-input__eu-stars {
+  width: 60%;
+  max-width: 28px;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__eu-stars {
+  max-width: 20px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__eu-stars {
+  max-width: 36px;
+}
+
+.muka-license-plate-input__country-code {
+  font-family:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  color: #ffffff;
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__country-code {
+  font-size: 10px;
+}
+
+.muka-license-plate-input__plate--md .muka-license-plate-input__country-code {
+  font-size: 13px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__country-code {
+  font-size: 16px;
+}
+
+/* Native input */
+.muka-license-plate-input__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--plate-text);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  /* Plate font — bold condensed sans is closest to the FE-Schrift look without
+     shipping a custom font. JetBrains Mono is the system mono brand font. */
+  font-family:
+    'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 800;
+  padding: 0 0.5em;
+  width: 100%;
+  caret-color: var(--plate-text);
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__native {
+  font-size: 22px;
+}
+
+.muka-license-plate-input__plate--md .muka-license-plate-input__native {
+  font-size: 30px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__native {
+  font-size: 42px;
+}
+
+.muka-license-plate-input__native::placeholder {
+  color: var(--plate-text);
+  opacity: 0.55;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.muka-license-plate-input__plate--disabled .muka-license-plate-input__native {
+  cursor: not-allowed;
+}
+
+/* Helper text */
+.muka-license-plate-input__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-license-plate-input__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;
+}
+
+
+/* Input */
+/* Input Component Styles - Using Muka Design Tokens */
+
+/* Wrapper — label, field, helper spacing per Figma */
+.muka-input {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-input--full-width {
+  width: 100%;
+}
+
+/* Label */
+.muka-input__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-input__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-input__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-input__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-input__required {
+  color: var(--color-state-error-default);
+}
+
+.muka-input__label--sm + .muka-input__field--disabled,
+.muka-input__label--md + .muka-input__field--disabled,
+.muka-input__label--lg + .muka-input__field--disabled {
+  cursor: not-allowed;
 }
 
 /* Field container — default/hover: 1px border. Radius per Figma (812-10825): input field tokens. */
@@ -9434,6 +9633,9 @@ li.muka-listitem {
   flex-shrink: 0;
   width: var(--size-2xl, 2rem);
   height: var(--size-2xl, 2rem);
+  /* Bleed into the field's vertical padding: keeps the full hit area without
+     making a password or clearable field taller than a plain one. */
+  margin-block: calc(var(--input-field-padding-y) * -1);
   padding: 0;
   border: none;
   background: transparent;
@@ -9441,6 +9643,24 @@ li.muka-listitem {
   cursor: pointer;
 }
 
+/* The outermost button bleeds into the right padding by the same amount, so
+   its glyph sits as close to the edge as it does to the top and bottom. */
+.muka-input__clear:last-child,
+.muka-input__reveal:last-child {
+  margin-inline-end: calc(var(--input-field-padding-y) * -1);
+}
+
+/* md: match the right gap to the gap above and below the vertically centred
+   button exactly, i.e. (field height − borders − button) / 2. Holds in the
+   focus/error state too, where border and padding trade 1px. */
+.muka-input__field--md .muka-input__clear:last-child,
+.muka-input__field--md .muka-input__reveal:last-child {
+  margin-inline-end: calc(
+    (var(--input-field-height-default) - 2 * var(--border-width-regular) - var(--size-2xl, 2rem)) / 2
+      - var(--input-field-padding-x)
+  );
+}
+
 .muka-input__field--sm .muka-input__clear,
 .muka-input__field--sm .muka-input__reveal {
   width: var(--size-xl, 1.5rem);
@@ -9499,60 +9719,6 @@ li.muka-listitem {
 }
 
 
-/* Icon */
-/* Icon Component Styles - Using Muka Design Tokens */
-
-.muka-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-icon-default-default, currentColor);
-}
-
-/* Icons inside buttons should inherit from button's foreground color */
-.muka-button .muka-icon {
-  color: inherit;
-}
-
-.muka-icon--subtle {
-  color: var(--color-icon-subtle-default);
-}
-
-.muka-icon--muted {
-  color: var(--color-icon-muted-default);
-}
-
-.muka-icon--inverse {
-  color: var(--color-icon-default-inverse);
-}
-
-.muka-icon--xs {
-  width: var(--icon-size-xs);
-  height: var(--icon-size-xs);
-}
-
-.muka-icon--sm {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-}
-
-.muka-icon--md {
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
-}
-
-.muka-icon--lg {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
-}
-
-.muka-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-
 /* Form */
 .muka-form {
   display: flex;
@@ -9835,146 +10001,59 @@ li.muka-listitem {
 }
 
 
-/* FAB */
-/* FAB (Floating Action Button) Component Styles */
-
-.muka-fab {
-  position: fixed;
-  z-index: 40;
+/* Icon */
+/* Icon Component Styles - Using Muka Design Tokens */
 
+.muka-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-2);
+  flex-shrink: 0;
+  color: var(--color-icon-default-default, currentColor);
+}
 
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  box-shadow: var(--shadow-level4);
+/* Icons inside buttons should inherit from button's foreground color */
+.muka-button .muka-icon {
+  color: inherit;
+}
 
-  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
-  -webkit-tap-highlight-color: transparent;
+.muka-icon--subtle {
+  color: var(--color-icon-subtle-default);
 }
 
-.muka-fab:active {
-  transform: scale(0.96);
-  box-shadow: var(--shadow-level3);
-}
-
-.muka-fab:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: 2px;
-}
-
-.muka-fab:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-/* ─── Variants ────────────────────────────────────────── */
-
-.muka-fab--primary {
-  background-color: var(--color-action-default);
-  color: var(--color-text-default-inverse);
-}
-
-.muka-fab--primary:hover:not(:disabled) {
-  background-color: var(--color-action-hover);
-}
-
-.muka-fab--secondary {
-  background-color: var(--color-surface-level3);
-  color: var(--color-text-default-default);
-}
-
-.muka-fab--secondary:hover:not(:disabled) {
-  background-color: var(--color-surface-level2);
+.muka-icon--muted {
+  color: var(--color-icon-muted-default);
 }
 
-/* ─── Sizes (circular by default) ─────────────────────── */
-
-.muka-fab--md {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
+.muka-icon--inverse {
+  color: var(--color-icon-default-inverse);
 }
 
-.muka-fab--lg {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
+.muka-icon--xs {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
 }
 
-/* ─── Extended (pill shape with label) ────────────────── */
-
-.muka-fab--extended {
-  width: auto;
-  height: auto;
-  padding: var(--spacing-3) var(--spacing-4);
-  border-radius: var(--radius-full);
+.muka-icon--sm {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 
-.muka-fab--extended.muka-fab--lg {
-  padding: var(--spacing-4) var(--spacing-5);
+.muka-icon--md {
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
 }
 
-.muka-fab__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
+.muka-icon--lg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
 }
 
-.muka-fab__icon svg {
+.muka-icon svg {
   width: 100%;
   height: 100%;
 }
 
-.muka-fab__label {
-  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);
-}
-
-/* ─── Positioning ─────────────────────────────────────── */
-
-.muka-fab--bottom-right {
-  right: var(--spacing-4);
-  bottom: var(--spacing-4);
-}
-
-.muka-fab--bottom-left {
-  left: var(--spacing-4);
-  bottom: var(--spacing-4);
-}
-
-.muka-fab--bottom-center {
-  left: 50%;
-  bottom: var(--spacing-4);
-  transform: translateX(-50%);
-}
-
-.muka-fab--bottom-center:active {
-  transform: translateX(-50%) scale(0.96);
-}
-
-/* Add the iOS home-indicator inset to the bottom offset. */
-.muka-fab:not(.muka-fab--no-safe-area) {
-  bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
-}
-
-/* Lateral safe-area for landscape iPhone with notch. */
-.muka-fab--bottom-right:not(.muka-fab--no-safe-area) {
-  right: max(var(--spacing-4), env(safe-area-inset-right));
-}
-
-.muka-fab--bottom-left:not(.muka-fab--no-safe-area) {
-  left: max(var(--spacing-4), env(safe-area-inset-left));
-}
-
 
 /* EmptyState */
 /* EmptyState Component Styles - Using Muka Design Tokens */
@@ -10117,125 +10196,266 @@ li.muka-listitem {
 }
 
 
-/* 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;
-}
-
+/* FAB */
+/* FAB (Floating Action Button) Component Styles */
 
-/* DropdownSelect */
-/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+.muka-fab {
+  position: fixed;
+  z-index: 40;
 
-.muka-dropdown-select {
   display: inline-flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   gap: var(--spacing-2);
-  min-width: 200px;
-}
 
-.muka-dropdown-select--full-width {
-  width: 100%;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  box-shadow: var(--shadow-level4);
+
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.muka-dropdown-select__label {
-  color: var(--color-text-default-default);
-  cursor: pointer;
+.muka-fab:active {
+  transform: scale(0.96);
+  box-shadow: var(--shadow-level3);
 }
 
-.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-fab:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
 }
 
-.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-fab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
 }
 
-.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);
+/* ─── Variants ────────────────────────────────────────── */
+
+.muka-fab--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-default-inverse);
 }
 
-.muka-dropdown-select__required {
-  color: var(--color-state-error-default);
+.muka-fab--primary:hover:not(:disabled) {
+  background-color: var(--color-action-hover);
 }
 
-.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;
+.muka-fab--secondary {
+  background-color: var(--color-surface-level3);
   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-fab--secondary:hover:not(:disabled) {
+  background-color: var(--color-surface-level2);
 }
 
-.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));
-}
+/* ─── Sizes (circular by default) ─────────────────────── */
 
-.muka-dropdown-select__field--md {
-  min-height: var(--input-field-height-default);
-  border-radius: var(--input-field-radius-md);
+.muka-fab--md {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
 }
 
-.muka-dropdown-select__field--lg {
-  min-height: var(--input-field-height-lg);
-  border-radius: var(--input-field-radius-lg);
+.muka-fab--lg {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
 }
 
-.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);
-}
+/* ─── Extended (pill shape with label) ────────────────── */
 
-.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+.muka-fab--extended {
+  width: auto;
+  height: auto;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-full);
+}
+
+.muka-fab--extended.muka-fab--lg {
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.muka-fab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.muka-fab__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-fab__label {
+  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);
+}
+
+/* ─── Positioning ─────────────────────────────────────── */
+
+.muka-fab--bottom-right {
+  right: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-left {
+  left: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-center {
+  left: 50%;
+  bottom: var(--spacing-4);
+  transform: translateX(-50%);
+}
+
+.muka-fab--bottom-center:active {
+  transform: translateX(-50%) scale(0.96);
+}
+
+/* Add the iOS home-indicator inset to the bottom offset. */
+.muka-fab:not(.muka-fab--no-safe-area) {
+  bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
+}
+
+/* Lateral safe-area for landscape iPhone with notch. */
+.muka-fab--bottom-right:not(.muka-fab--no-safe-area) {
+  right: max(var(--spacing-4), env(safe-area-inset-right));
+}
+
+.muka-fab--bottom-left:not(.muka-fab--no-safe-area) {
+  left: max(var(--spacing-4), env(safe-area-inset-left));
+}
+
+
+/* EmojiPicker */
+/* EmojiPicker Component Styles */
+
+.muka-emoji-picker {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: var(--spacing-1);
+  padding: var(--spacing-2);
+  max-height: 12rem;
+  overflow-y: auto;
+  background: var(--color-surface-level2);
+  border: var(--border-width-regular, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--menu-content-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+}
+
+.muka-emoji-picker__glyph {
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+
+/* DropdownSelect */
+/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+
+.muka-dropdown-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
+
+.muka-dropdown-select--full-width {
+  width: 100%;
+}
+
+.muka-dropdown-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-dropdown-select__required {
+  color: var(--color-state-error-default);
+}
+
+.muka-dropdown-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-dropdown-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+.muka-dropdown-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
+}
+
+.muka-dropdown-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-dropdown-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
+}
+
+.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
   padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
 }
 
@@ -10523,314 +10743,35 @@ li.muka-listitem {
 }
 
 
-/* DocumentViewer */
-/* DocumentViewer Component Styles - Using Muka Design Tokens */
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
 
-.muka-documentviewer {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--documentviewer-container-background);
-  border-radius: var(--documentviewer-container-borderRadius);
-  overflow: hidden;
-  position: relative;
+.muka-divider {
+  flex-shrink: 0;
 }
 
-.muka-documentviewer--fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 9999;
-  border-radius: 0;
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
 }
 
-/* Toolbar */
-.muka-documentviewer__toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--documentviewer-toolbar-height);
-  padding: var(--documentviewer-toolbar-padding-y) var(--documentviewer-toolbar-padding-x);
-  background-color: var(--documentviewer-toolbar-background);
-  border-bottom: 1px solid var(--documentviewer-toolbar-border);
-  gap: var(--documentviewer-toolbar-gap);
-  flex-shrink: 0;
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
 }
 
-.muka-documentviewer__toolbar-section {
-  display: flex;
-  align-items: center;
-  gap: var(--documentviewer-toolbar-gap);
+.muka-divider--default {
+  background-color: var(--separator-color-default);
 }
 
-.muka-documentviewer__toolbar-section--center {
-  flex: 1;
-  justify-content: center;
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
 }
 
-.muka-documentviewer__toolbar-section--end {
-  justify-content: flex-end;
-}
 
-/* Page navigation */
-.muka-documentviewer__page-input {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-.muka-documentviewer__page-number {
-  width: 3rem;
-  padding: var(--spacing-1) var(--spacing-2);
-  text-align: center;
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-sm-fontSize);
-  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-level0);
-  color: var(--color-text-default-default);
-}
-
-.muka-documentviewer__page-number:focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 0;
-  border-color: var(--color-border-focus);
-}
-
-.muka-documentviewer__page-total {
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-sm-fontSize);
-  color: var(--color-text-subtle-default);
-}
-
-/* Zoom controls */
-.muka-documentviewer__zoom-display {
-  min-width: var(--documentviewer-zoom-button-width);
-  padding: var(--spacing-1) var(--spacing-2);
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-sm-fontSize);
-  font-weight: var(--alias-font-brand-weight-semibold);
-  color: var(--color-text-default-default);
-  background: transparent;
-  border: none;
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.muka-documentviewer__zoom-display:hover {
-  background-color: var(--color-surface-level2);
-}
-
-.muka-documentviewer__zoom-display:focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 0;
-}
-
-/* Content area */
-.muka-documentviewer__content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-.muka-documentviewer__main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-}
-
-/* Canvas */
-.muka-documentviewer__canvas {
-  flex: 1;
-  background-color: var(--documentviewer-canvas-background);
-  padding: var(--documentviewer-canvas-padding);
-  overflow: auto;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.muka-documentviewer__page {
-  background-color: var(--documentviewer-page-background);
-  box-shadow: var(--documentviewer-page-shadow);
-  border-radius: var(--documentviewer-page-borderRadius);
-  overflow: hidden;
-}
-
-.muka-documentviewer__page canvas {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.muka-documentviewer__page-number {
-  text-align: center;
-  padding: var(--spacing-2);
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-sm-fontSize);
-  color: var(--color-text-subtle-default);
-}
-
-/* Thumbnails */
-.muka-documentviewer__thumbnails {
-  width: var(--documentviewer-thumbnails-width);
-  background-color: var(--documentviewer-thumbnails-background);
-  border-right: 1px solid var(--documentviewer-thumbnails-border);
-  overflow-y: auto;
-  flex-shrink: 0;
-}
-
-.muka-documentviewer__thumbnails-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--documentviewer-thumbnails-item-gap);
-  padding: var(--spacing-2);
-}
-
-.muka-documentviewer__thumbnail-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-1);
-  padding: var(--documentviewer-thumbnails-item-padding);
-  border-radius: var(--documentviewer-thumbnails-item-borderRadius);
-  border: 2px solid var(--documentviewer-thumbnails-item-border-default);
-  background-color: var(--documentviewer-thumbnails-item-background-default);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: 100%;
-}
-
-.muka-documentviewer__thumbnail-item:hover {
-  background-color: var(--documentviewer-thumbnails-item-background-hover);
-}
-
-.muka-documentviewer__thumbnail-item--selected {
-  background-color: var(--documentviewer-thumbnails-item-background-selected);
-  border-color: var(--documentviewer-thumbnails-item-border-selected);
-}
-
-.muka-documentviewer__thumbnail-item:focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-.muka-documentviewer__thumbnail-preview {
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--border-radius-sm);
-}
-
-.muka-documentviewer__thumbnail-preview canvas {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.muka-documentviewer__thumbnail-label {
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-xs-regular-fontSize);
-  color: var(--color-text-default-default);
-  font-weight: var(--alias-font-brand-weight-medium);
-}
-
-/* Loading state */
-.muka-documentviewer__loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  background-color: var(--documentviewer-loading-overlay-background);
-}
-
-/* Error state */
-.muka-documentviewer__error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  padding: var(--spacing-4);
-  background-color: var(--documentviewer-error-background);
-}
-
-/* Accessibility - visually hidden */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* React-PDF specific styles */
-.react-pdf__Document {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.react-pdf__Page {
-  max-width: 100%;
-  box-shadow: var(--documentviewer-page-shadow);
-  border-radius: var(--documentviewer-page-borderRadius);
-  overflow: hidden;
-}
-
-.react-pdf__Page__canvas {
-  max-width: 100%;
-  height: auto !important;
-  display: block;
-}
-
-.react-pdf__Page__textContent {
-  max-width: 100%;
-}
-
-.react-pdf__Page__annotations {
-  max-width: 100%;
-}
-
-
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
-
-.muka-divider {
-  flex-shrink: 0;
-}
-
-.muka-divider--horizontal {
-  width: 100%;
-  height: var(--separator-width);
-}
-
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
-}
-
-.muka-divider--default {
-  background-color: var(--separator-color-default);
-}
-
-.muka-divider--contrast {
-  background-color: var(--separator-color-contrast);
-}
-
-
-/* Dialog */
-/* Dialog Component Styles */
+/* Dialog */
+/* Dialog Component Styles */
 
 /* ─── Native dialog reset ─────────────────────────────── */
 
@@ -10870,6 +10811,7 @@ li.muka-listitem {
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
+  max-height: 100dvh;
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -10904,6 +10846,8 @@ li.muka-listitem {
 
 .muka-dialog--lg .muka-dialog__surface {
   height: calc(100vh - var(--dialog-margin-top-mobile));
+  /* dvh tracks the visible area as mobile toolbars show and hide */
+  height: calc(100dvh - var(--dialog-margin-top-mobile));
 }
 
 /* Body */
@@ -11097,6 +11041,285 @@ li.muka-listitem {
 }
 
 
+/* DocumentViewer */
+/* DocumentViewer Component Styles - Using Muka Design Tokens */
+
+.muka-documentviewer {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--documentviewer-container-background);
+  border-radius: var(--documentviewer-container-borderRadius);
+  overflow: hidden;
+  position: relative;
+}
+
+.muka-documentviewer--fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  border-radius: 0;
+}
+
+/* Toolbar */
+.muka-documentviewer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--documentviewer-toolbar-height);
+  padding: var(--documentviewer-toolbar-padding-y) var(--documentviewer-toolbar-padding-x);
+  background-color: var(--documentviewer-toolbar-background);
+  border-bottom: 1px solid var(--documentviewer-toolbar-border);
+  gap: var(--documentviewer-toolbar-gap);
+  flex-shrink: 0;
+}
+
+.muka-documentviewer__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: var(--documentviewer-toolbar-gap);
+}
+
+.muka-documentviewer__toolbar-section--center {
+  flex: 1;
+  justify-content: center;
+}
+
+.muka-documentviewer__toolbar-section--end {
+  justify-content: flex-end;
+}
+
+/* Page navigation */
+.muka-documentviewer__page-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-documentviewer__page-number {
+  width: 3rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  text-align: center;
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  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-level0);
+  color: var(--color-text-default-default);
+}
+
+.muka-documentviewer__page-number:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 0;
+  border-color: var(--color-border-focus);
+}
+
+.muka-documentviewer__page-total {
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  color: var(--color-text-subtle-default);
+}
+
+/* Zoom controls */
+.muka-documentviewer__zoom-display {
+  min-width: var(--documentviewer-zoom-button-width);
+  padding: var(--spacing-1) var(--spacing-2);
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  font-weight: var(--alias-font-brand-weight-semibold);
+  color: var(--color-text-default-default);
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.muka-documentviewer__zoom-display:hover {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-documentviewer__zoom-display:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 0;
+}
+
+/* Content area */
+.muka-documentviewer__content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.muka-documentviewer__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Canvas */
+.muka-documentviewer__canvas {
+  flex: 1;
+  background-color: var(--documentviewer-canvas-background);
+  padding: var(--documentviewer-canvas-padding);
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.muka-documentviewer__page {
+  background-color: var(--documentviewer-page-background);
+  box-shadow: var(--documentviewer-page-shadow);
+  border-radius: var(--documentviewer-page-borderRadius);
+  overflow: hidden;
+}
+
+.muka-documentviewer__page canvas {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.muka-documentviewer__page-number {
+  text-align: center;
+  padding: var(--spacing-2);
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  color: var(--color-text-subtle-default);
+}
+
+/* Thumbnails */
+.muka-documentviewer__thumbnails {
+  width: var(--documentviewer-thumbnails-width);
+  background-color: var(--documentviewer-thumbnails-background);
+  border-right: 1px solid var(--documentviewer-thumbnails-border);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.muka-documentviewer__thumbnails-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--documentviewer-thumbnails-item-gap);
+  padding: var(--spacing-2);
+}
+
+.muka-documentviewer__thumbnail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--documentviewer-thumbnails-item-padding);
+  border-radius: var(--documentviewer-thumbnails-item-borderRadius);
+  border: 2px solid var(--documentviewer-thumbnails-item-border-default);
+  background-color: var(--documentviewer-thumbnails-item-background-default);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.muka-documentviewer__thumbnail-item:hover {
+  background-color: var(--documentviewer-thumbnails-item-background-hover);
+}
+
+.muka-documentviewer__thumbnail-item--selected {
+  background-color: var(--documentviewer-thumbnails-item-background-selected);
+  border-color: var(--documentviewer-thumbnails-item-border-selected);
+}
+
+.muka-documentviewer__thumbnail-item:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-documentviewer__thumbnail-preview {
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-documentviewer__thumbnail-preview canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.muka-documentviewer__thumbnail-label {
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-xs-regular-fontSize);
+  color: var(--color-text-default-default);
+  font-weight: var(--alias-font-brand-weight-medium);
+}
+
+/* Loading state */
+.muka-documentviewer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  background-color: var(--documentviewer-loading-overlay-background);
+}
+
+/* Error state */
+.muka-documentviewer__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--spacing-4);
+  background-color: var(--documentviewer-error-background);
+}
+
+/* Accessibility - visually hidden */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* React-PDF specific styles */
+.react-pdf__Document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.react-pdf__Page {
+  max-width: 100%;
+  box-shadow: var(--documentviewer-page-shadow);
+  border-radius: var(--documentviewer-page-borderRadius);
+  overflow: hidden;
+}
+
+.react-pdf__Page__canvas {
+  max-width: 100%;
+  height: auto !important;
+  display: block;
+}
+
+.react-pdf__Page__textContent {
+  max-width: 100%;
+}
+
+.react-pdf__Page__annotations {
+  max-width: 100%;
+}
+
+
 /* DatePicker */
 /* DatePicker — compact native date field. */
 /* Field/label/helper styling is inherited from ../Input/Input.css. */
@@ -11649,7 +11872,10 @@ li.muka-listitem {
   fill: none;
   /* Subtle lift on the filled segment, matching the Figma elevation */
   filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
-  transition: stroke-dasharray 0.3s ease;
+  /* Butt caps keep the always-rendered 0% arc invisible (round caps would draw a dot) */
+  stroke-linecap: butt;
+  /* view duration (300ms) reads at the 24px size; tokens zero it for reduced motion */
+  transition: stroke-dasharray var(--motion-duration-view) var(--motion-easing-default);
 }
 
 /* ─── Indeterminate (spinner) ─────────────────────────── */