@revikornmann/muka-ui 0.28.0 → 0.28.1

package/dist/styles/muka-dark.css

@@ -2471,38 +2471,6 @@ body {
 }
 
 
-/* VoiceMessage */
-/* VoiceMessage Component Styles */
-
-.muka-voice-message {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  width: 100%;
-  min-width: min(16rem, 60vw);
-}
-
-.muka-voice-message__wave {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.muka-voice-message__time {
-  flex: 0 0 auto;
-  white-space: nowrap;
-  font-size: var(--text-label-sm-fontSize, 0.75rem);
-  line-height: var(--text-label-sm-lineHeight, 1);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-subtle-default);
-}
-
-/* On the tinted own bubble the surface is the action color, so the timer flips
- * to the inverse text token for contrast. */
-.muka-voice-message--own .muka-voice-message__time {
-  color: var(--color-text-default-inverse);
-}
-
-
 /* View */
 /* View Component Styles */
 
@@ -2613,6 +2581,38 @@ body {
 }
 
 
+/* VoiceMessage */
+/* VoiceMessage Component Styles */
+
+.muka-voice-message {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: min(16rem, 60vw);
+}
+
+.muka-voice-message__wave {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.muka-voice-message__time {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-size: var(--text-label-sm-fontSize, 0.75rem);
+  line-height: var(--text-label-sm-lineHeight, 1);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-subtle-default);
+}
+
+/* On the tinted own bubble the surface is the action color, so the timer flips
+ * to the inverse text token for contrast. */
+.muka-voice-message--own .muka-voice-message__time {
+  color: var(--color-text-default-inverse);
+}
+
+
 /* Typography */
 .muka-typography-catalog {
   display: flex;
@@ -7380,6 +7380,178 @@ body {
 }
 
 
+/* 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 {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.muka-progress--circle .muka-progress__track {
+  fill: none;
+  stroke: var(--color-surface-level1);
+}
+
+.muka-progress--circle.muka-progress--sm .muka-progress__track,
+.muka-progress--circle.muka-progress--sm .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-sm);
+}
+
+.muka-progress--circle.muka-progress--md .muka-progress__track,
+.muka-progress--circle.muka-progress--md .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-md);
+}
+
+.muka-progress--circle.muka-progress--lg .muka-progress__track,
+.muka-progress--circle.muka-progress--lg .muka-progress__fill {
+  stroke-width: var(--progress-size-circle-strokeWidth-lg);
+}
+
+.muka-progress--circle .muka-progress__fill {
+  fill: none;
+  stroke: var(--color-action-default);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+.muka-progress--circle .muka-progress__label {
+  position: absolute;
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-progress--circle.muka-progress--sm .muka-progress__label {
+  font-size: var(--text-label-sm-semibold-fontSize);
+}
+
+.muka-progress--circle.muka-progress--md .muka-progress__label {
+  font-size: var(--text-label-md-semibold-fontSize);
+}
+
+.muka-progress--circle.muka-progress--lg .muka-progress__label {
+  font-size: var(--text-label-lg-semibold-fontSize);
+}
+
+/* Indeterminate animation for circle */
+.muka-progress--circle.muka-progress--indeterminate .muka-progress__circle {
+  animation: muka-progress-circle-rotate 2s linear infinite;
+}
+
+.muka-progress--circle.muka-progress--indeterminate .muka-progress__fill {
+  animation: muka-progress-circle-dash 1.5s ease-in-out infinite;
+}
+
+@keyframes muka-progress-circle-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes muka-progress-circle-dash {
+  0% {
+    stroke-dashoffset: 220;
+  }
+  50% {
+    stroke-dashoffset: 70;
+  }
+  100% {
+    stroke-dashoffset: 220;
+  }
+}
+
+
 /* ProfileBadge */
 /* ProfileBadge Component Styles - Using Muka Design Tokens */
 
@@ -7451,115 +7623,18 @@ body {
 }
 
 
-/* PriceTag */
-/* PriceTag Component Styles - Using Muka Design Tokens */
+/* Popover */
+/* Popover Component Styles */
 
-.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);
-}
-
-
-/* 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;
+.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 {
@@ -7804,197 +7879,122 @@ body {
 }
 
 
-/* Progress */
-/* Progress Component Styles - Using Muka Design Tokens */
-
-/* ========================================
-   BAR VARIANT
-   ======================================== */
+/* PriceTag */
+/* PriceTag Component Styles - Using Muka Design Tokens */
 
-.muka-progress--bar {
+.muka-price-tag {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  width: 100%;
+  flex-shrink: 0;
 }
 
-.muka-progress--bar .muka-progress__track {
-  flex: 1;
-  background-color: var(--color-surface-level1);
-  border-radius: var(--border-radius-full);
-  overflow: hidden;
+/* Medium: stacked layout (price on top, unit below) */
+.muka-price-tag--md {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
 }
 
-.muka-progress--bar.muka-progress--sm .muka-progress__track {
-  height: var(--progress-size-bar-height-sm);
+/* Small: inline layout */
+.muka-price-tag--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
 }
 
-.muka-progress--bar.muka-progress--md .muka-progress__track {
-  height: var(--progress-size-bar-height-md);
+/* Amount row: currency + numbers */
+.muka-price-tag__amount {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
 }
 
-.muka-progress--bar.muka-progress--lg .muka-progress__track {
-  height: var(--progress-size-bar-height-lg);
+.muka-price-tag--sm .muka-price-tag__amount {
+  align-items: center;
 }
 
-.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;
+/* Numbers group: whole + decimal + cents */
+.muka-price-tag__numbers {
+  display: flex;
+  align-items: baseline;
 }
 
-.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;
+/* ─── 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);
 }
 
-/* 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;
+.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);
 }
 
-@keyframes muka-progress-bar-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(250%);
-  }
+.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);
 }
 
-/* ========================================
-   CIRCLE VARIANT
-   ======================================== */
+/* ─── Small size typography ───────────────────────────── */
 
-.muka-progress--circle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.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-progress--circle.muka-progress--sm {
-  width: var(--progress-size-circle-diameter-sm);
-  height: var(--progress-size-circle-diameter-sm);
+.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);
 }
 
-.muka-progress--circle.muka-progress--md {
-  width: var(--progress-size-circle-diameter-md);
-  height: var(--progress-size-circle-diameter-md);
-}
+/* ─── Unit label (same for both sizes) ────────────────── */
 
-.muka-progress--circle.muka-progress--lg {
-  width: var(--progress-size-circle-diameter-lg);
-  height: var(--progress-size-circle-diameter-lg);
+.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);
 }
 
-.muka-progress__circle {
+
+/* PhotoDraftStrip */
+/* PhotoDraftStrip Component Styles */
+
+.muka-photo-draft-strip {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
   width: 100%;
-  height: 100%;
-  transform: rotate(-90deg);
+  padding: var(--spacing-2) 0;
 }
 
-.muka-progress--circle .muka-progress__track {
-  fill: none;
-  stroke: var(--color-surface-level1);
-}
-
-.muka-progress--circle.muka-progress--sm .muka-progress__track,
-.muka-progress--circle.muka-progress--sm .muka-progress__fill {
-  stroke-width: var(--progress-size-circle-strokeWidth-sm);
-}
-
-.muka-progress--circle.muka-progress--md .muka-progress__track,
-.muka-progress--circle.muka-progress--md .muka-progress__fill {
-  stroke-width: var(--progress-size-circle-strokeWidth-md);
-}
-
-.muka-progress--circle.muka-progress--lg .muka-progress__track,
-.muka-progress--circle.muka-progress--lg .muka-progress__fill {
-  stroke-width: var(--progress-size-circle-strokeWidth-lg);
-}
-
-.muka-progress--circle .muka-progress__fill {
-  fill: none;
-  stroke: var(--color-action-default);
-  stroke-linecap: round;
-  transition: stroke-dashoffset 0.3s ease;
-}
-
-.muka-progress--circle .muka-progress__label {
-  position: absolute;
-  font-family: var(--text-label-sm-semibold-fontFamily);
-  font-weight: var(--text-label-sm-semibold-fontWeight);
-  color: var(--color-text-default-default);
-}
-
-.muka-progress--circle.muka-progress--sm .muka-progress__label {
-  font-size: var(--text-label-sm-semibold-fontSize);
-}
-
-.muka-progress--circle.muka-progress--md .muka-progress__label {
-  font-size: var(--text-label-md-semibold-fontSize);
-}
-
-.muka-progress--circle.muka-progress--lg .muka-progress__label {
-  font-size: var(--text-label-lg-semibold-fontSize);
-}
-
-/* Indeterminate animation for circle */
-.muka-progress--circle.muka-progress--indeterminate .muka-progress__circle {
-  animation: muka-progress-circle-rotate 2s linear infinite;
-}
-
-.muka-progress--circle.muka-progress--indeterminate .muka-progress__fill {
-  animation: muka-progress-circle-dash 1.5s ease-in-out infinite;
-}
-
-@keyframes muka-progress-circle-rotate {
-  100% {
-    transform: rotate(270deg);
-  }
-}
-
-@keyframes muka-progress-circle-dash {
-  0% {
-    stroke-dashoffset: 220;
-  }
-  50% {
-    stroke-dashoffset: 70;
-  }
-  100% {
-    stroke-dashoffset: 220;
-  }
-}
-
-
-/* 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 {
+  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 {
@@ -8138,34 +8138,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 */
 
@@ -8736,7 +8708,10 @@ body {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  pointer-events: none;
+  /* 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 ─────────── */
@@ -8828,6 +8803,34 @@ 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; }
+
+
 /* ListItem */
 /* ListItem Component Styles - Using Muka Design Tokens */
 
@@ -9022,255 +9025,62 @@ 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);
+  align-items: center;
+  color: var(--color-text-default-default);
+  cursor: pointer;
 }
 
-/* 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;
+.muka-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);
 }
 
-/* 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-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--md {
-  height: 60px;
-  min-width: 300px;
-  border-radius: var(--input-field-radius-md);
+.muka-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-license-plate-input__plate--lg {
-  height: 80px;
-  min-width: 400px;
-  border-radius: var(--input-field-radius-lg);
+.muka-label--disabled {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
 }
 
-/* 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-label__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);
-}
 
-/* Disabled */
-.muka-license-plate-input__plate--disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
+/* InputCounter */
+/* InputCounter — numeric field + joined decrement/increment buttons.
+   Label, helper and error text reuse Input.css (../Input/Input.css).
+   Field and button group share one radius per size:
+   sm/md → input.field.radius.md, lg → input.field.radius.lg. */
+
+.muka-inputcounter {
+  --muka-inputcounter-radius: var(--input-field-radius-md);
+  --muka-inputcounter-height: var(--input-field-height-default);
+  --muka-inputcounter-pad: calc(var(--spacing-2) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-3xl);
 
-/* 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;
-}
-
-.muka-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-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-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-label--disabled {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
-}
-
-.muka-label__required {
-  color: var(--color-state-error-default);
-}
-
-
-/* InputCounter */
-/* InputCounter — numeric field + joined decrement/increment buttons.
-   Label, helper and error text reuse Input.css (../Input/Input.css).
-   Field and button group share one radius per size:
-   sm/md → input.field.radius.md, lg → input.field.radius.lg. */
-
-.muka-inputcounter {
-  --muka-inputcounter-radius: var(--input-field-radius-md);
-  --muka-inputcounter-height: var(--input-field-height-default);
-  --muka-inputcounter-pad: calc(var(--spacing-2) + var(--spacing-1));
-  --muka-inputcounter-min: var(--size-3xl);
-
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-2);
 }
 
 .muka-inputcounter--sm {
@@ -9434,67 +9244,260 @@ 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 {
+/* Disabled */
+.muka-license-plate-input__plate--disabled {
   cursor: not-allowed;
+  opacity: 0.55;
 }
 
-/* Field container — default/hover: 1px border. Radius per Figma (812-10825): input field tokens. */
-.muka-input__field {
-  display: flex;
+/* EU strip */
+.muka-license-plate-input__eu-strip {
+  display: inline-flex;
+  flex-direction: column;
   align-items: center;
-  gap: var(--spacing-2);
-  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-md);
-  padding: var(--input-field-padding-y) var(--input-field-padding-x);
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  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. */
+.muka-input__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  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-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
   cursor: text;
   position: relative;
   box-sizing: border-box;
@@ -9715,60 +9718,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;
@@ -10051,146 +10000,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);
-
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  box-shadow: var(--shadow-level4);
+  flex-shrink: 0;
+  color: var(--color-icon-default-default, currentColor);
+}
 
-  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
-  -webkit-tap-highlight-color: transparent;
+/* Icons inside buttons should inherit from button's foreground color */
+.muka-button .muka-icon {
+  color: inherit;
 }
 
-.muka-fab:active {
-  transform: scale(0.96);
-  box-shadow: var(--shadow-level3);
+.muka-icon--subtle {
+  color: var(--color-icon-subtle-default);
 }
 
-.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 */
@@ -10333,6 +10195,147 @@ li.muka-listitem {
 }
 
 
+/* FAB */
+/* FAB (Floating Action Button) Component Styles */
+
+.muka-fab {
+  position: fixed;
+  z-index: 40;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+
+  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-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);
+}
+
+/* ─── Sizes (circular by default) ─────────────────────── */
+
+.muka-fab--md {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+
+.muka-fab--lg {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+}
+
+/* ─── 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-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 */
 
@@ -10739,429 +10742,150 @@ 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;
-}
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
 
-/* 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);
+.muka-divider {
   flex-shrink: 0;
 }
 
-.muka-documentviewer__toolbar-section {
-  display: flex;
-  align-items: center;
-  gap: var(--documentviewer-toolbar-gap);
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
 }
 
-.muka-documentviewer__toolbar-section--center {
-  flex: 1;
-  justify-content: center;
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
 }
 
-.muka-documentviewer__toolbar-section--end {
-  justify-content: flex-end;
+.muka-divider--default {
+  background-color: var(--separator-color-default);
 }
 
-/* Page navigation */
-.muka-documentviewer__page-input {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
 }
 
-.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);
-}
+/* Dialog */
+/* Dialog Component Styles */
 
-.muka-documentviewer__page-total {
-  font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-sm-fontSize);
-  color: var(--color-text-subtle-default);
-}
+/* ─── Native dialog reset ─────────────────────────────── */
 
-/* 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;
+.muka-dialog {
   border: none;
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
+  padding: 0;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
 }
 
-.muka-documentviewer__zoom-display:hover {
-  background-color: var(--color-surface-level2);
+.muka-dialog:not([open]) {
+  display: none;
 }
 
-.muka-documentviewer__zoom-display:focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 0;
+/* ─── Backdrop ────────────────────────────────────────── */
+
+.muka-dialog::backdrop {
+  background-color: var(--dialog-color-backdrop);
 }
 
-/* Content area */
-.muka-documentviewer__content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
+/* ─── Non-modal modifier ──────────────────────────────── */
+
+.muka-dialog--non-modal::backdrop {
+  pointer-events: auto;
 }
 
-.muka-documentviewer__main {
-  flex: 1;
+/* ─── Mobile: all sizes bottom-attached (< 1024px) ───── */
+
+.muka-dialog--sm,
+.muka-dialog--md,
+.muka-dialog--lg {
+  width: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  max-height: 100dvh;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  position: relative;
+  justify-content: flex-end;
+  align-items: stretch;
 }
 
-/* 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-dialog__surface:focus {
+  outline: none;
 }
 
-.muka-documentviewer__page {
-  background-color: var(--documentviewer-page-background);
-  box-shadow: var(--documentviewer-page-shadow);
-  border-radius: var(--documentviewer-page-borderRadius);
+.muka-dialog--sm .muka-dialog__surface,
+.muka-dialog--md .muka-dialog__surface,
+.muka-dialog--lg .muka-dialog__surface {
+  background-color: var(--dialog-color-background);
+  border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
+  box-shadow: var(--dialog-shadow-default);
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  min-height: var(--dialog-min-height-mobile);
 }
 
-.muka-documentviewer__page canvas {
-  display: block;
-  max-width: 100%;
-  height: auto;
+/* Mobile per-size heights */
+.muka-dialog--sm .muka-dialog__surface {
+  height: var(--dialog-height-mobile-sm);
 }
 
-.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);
+.muka-dialog--md .muka-dialog__surface {
+  height: var(--dialog-height-mobile-md);
 }
 
-/* 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-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));
 }
 
-.muka-documentviewer__thumbnails-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--documentviewer-thumbnails-item-gap);
-  padding: var(--spacing-2);
+/* Body */
+.muka-dialog--sm .muka-dialog__body,
+.muka-dialog--md .muka-dialog__body,
+.muka-dialog--lg .muka-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dialog-padding-x);
+  background-color: var(--dialog-color-body-background);
 }
 
-.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%;
-}
+/* ─── Surface level variants ─────────────────────────── */
 
-.muka-documentviewer__thumbnail-item:hover {
-  background-color: var(--documentviewer-thumbnails-item-background-hover);
+.muka-dialog--surface-2 .muka-dialog__body {
+  background-color: var(--color-surface-level2);
 }
 
-.muka-documentviewer__thumbnail-item--selected {
-  background-color: var(--documentviewer-thumbnails-item-background-selected);
-  border-color: var(--documentviewer-thumbnails-item-border-selected);
-}
+/* ─── Footer ──────────────────────────────────────────── */
 
-.muka-documentviewer__thumbnail-item:focus {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
+.muka-dialog__footer {
+  flex-shrink: 0;
 }
 
-.muka-documentviewer__thumbnail-preview {
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--border-radius-sm);
-}
+/* Hide footer on mobile for modal dialogs with inputs (actions move to TopBar),
+   unless the consumer keeps them in the BottomBar (mobileActions="footer") */
+@media (max-width: 1023px) {
+  .muka-dialog:not(.muka-dialog--non-modal):not(.muka-dialog--no-inputs):not(.muka-dialog--mobile-actions-footer) .muka-dialog__footer {
+    display: none;
+  }
 
-.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 */
-
-/* ─── Native dialog reset ─────────────────────────────── */
-
-.muka-dialog {
-  border: none;
-  padding: 0;
-  max-width: none;
-  max-height: none;
-  overflow: visible;
-  background: transparent;
-  color: inherit;
-  box-shadow: none;
-}
-
-.muka-dialog:not([open]) {
-  display: none;
-}
-
-/* ─── Backdrop ────────────────────────────────────────── */
-
-.muka-dialog::backdrop {
-  background-color: var(--dialog-color-backdrop);
-}
-
-/* ─── Non-modal modifier ──────────────────────────────── */
-
-.muka-dialog--non-modal::backdrop {
-  pointer-events: auto;
-}
-
-/* ─── Mobile: all sizes bottom-attached (< 1024px) ───── */
-
-.muka-dialog--sm,
-.muka-dialog--md,
-.muka-dialog--lg {
-  width: 100%;
-  height: 100%;
-  max-width: 100vw;
-  max-height: 100vh;
-  max-height: 100dvh;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: stretch;
-}
-
-.muka-dialog__surface:focus {
-  outline: none;
-}
-
-.muka-dialog--sm .muka-dialog__surface,
-.muka-dialog--md .muka-dialog__surface,
-.muka-dialog--lg .muka-dialog__surface {
-  background-color: var(--dialog-color-background);
-  border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
-  box-shadow: var(--dialog-shadow-default);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: var(--dialog-min-height-mobile);
-}
-
-/* Mobile per-size heights */
-.muka-dialog--sm .muka-dialog__surface {
-  height: var(--dialog-height-mobile-sm);
-}
-
-.muka-dialog--md .muka-dialog__surface {
-  height: var(--dialog-height-mobile-md);
-}
-
-.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 */
-.muka-dialog--sm .muka-dialog__body,
-.muka-dialog--md .muka-dialog__body,
-.muka-dialog--lg .muka-dialog__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--dialog-padding-x);
-  background-color: var(--dialog-color-body-background);
-}
-
-/* ─── Surface level variants ─────────────────────────── */
-
-.muka-dialog--surface-2 .muka-dialog__body {
-  background-color: var(--color-surface-level2);
-}
-
-/* ─── Footer ──────────────────────────────────────────── */
-
-.muka-dialog__footer {
-  flex-shrink: 0;
-}
-
-/* Hide footer on mobile for modal dialogs with inputs (actions move to TopBar),
-   unless the consumer keeps them in the BottomBar (mobileActions="footer") */
-@media (max-width: 1023px) {
-  .muka-dialog:not(.muka-dialog--non-modal):not(.muka-dialog--no-inputs):not(.muka-dialog--mobile-actions-footer) .muka-dialog__footer {
-    display: none;
-  }
-
-  /* No-input modals: stack footer buttons vertically on mobile */
-  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content {
-    flex-direction: column;
-  }
-
-  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content > * {
-    width: 100%;
-  }
+  /* No-input modals: stack footer buttons vertically on mobile */
+  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content {
+    flex-direction: column;
+  }
+
+  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content > * {
+    width: 100%;
+  }
 }
 
 /* ─── Mobile slide animation (< 1024px) ─────────────── */
@@ -11316,6 +11040,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. */