@revikornmann/muka-ui 0.27.0 → 0.27.2

package/dist/styles/wireframe-dark.css

@@ -2047,15 +2047,16 @@ body {
   --avatar-status-size-xl: 1.5rem;
   --avatar-group-ring-width: 0.125rem;
   --avatar-group-ring-color: #111111;
-  --avatar-group-overlap-tight-sm: 2rem;
-  --avatar-group-overlap-tight-2xs: 1.25rem;
+  --avatar-group-overlap-tight-xs: 1.75rem;
+  --avatar-group-overlap-tight-2xs: 1.5rem;
   --avatar-group-overlap-tight-3xs: 1rem;
-  --avatar-group-overlap-compact-sm: 1.5rem;
-  --avatar-group-overlap-compact-2xs: 1rem;
-  --avatar-group-overlap-compact-3xs: 0.75rem;
-  --avatar-group-overlap-spacious-sm: 1rem;
+  --avatar-group-overlap-compact-xs: 1.5rem;
+  --avatar-group-overlap-compact-2xs: 1.125rem;
+  --avatar-group-overlap-compact-3xs: 0.875rem;
+  --avatar-group-overlap-spacious-xs: 1rem;
   --avatar-group-overlap-spacious-2xs: 0.75rem;
   --avatar-group-overlap-spacious-3xs: 0.5rem;
+  --avatar-group-badge-offset: 0.25rem;
   --toast-color-info-background: #eeeeee;
   --toast-color-info-foreground: #111111;
   --toast-color-info-accent: #0d2847;
@@ -2461,6 +2462,116 @@ body {
 }
 
 
+/* View */
+/* View Component Styles */
+
+/* ─── Base layout ─────────────────────────────────────── */
+
+.muka-view {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  background-color: var(--view-color-background);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
+
+  /* Width reserved for the footer nav once it becomes a left sidebar at the
+     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
+  --view-sidebar-width: 240px;
+}
+
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-view--surface-3 {
+  background-color: var(--color-surface-level3);
+}
+
+/* ─── Large screens: make room for the left sidebar ──────────
+   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
+   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
+   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
+   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
+   for a sidebar that hasn't rendered yet. */
+@media (min-width: 1024px) {
+  .muka-view:has(.muka-bottombar--desktop-sidebar) {
+    padding-left: var(--view-sidebar-width);
+  }
+}
+
+/* ─── TopBar elevation ────────────────────────────────── */
+
+.muka-view .muka-topbar {
+  flex-shrink: 0;
+  z-index: 3;
+  box-shadow: var(--shadow-level2);
+}
+
+/* ─── Scrollable body ─────────────────────────────────── */
+
+.muka-view__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: clip;
+  z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inner wrapper constrains content width at the large tier (enterprise desktop)
+   using the alias-layer section/container tokens, while the body scrolls full
+   width. Full-bleed below large. */
+.muka-view__body-inner {
+  width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
+}
+
+@media (min-width: 1024px) {
+  .muka-view:not([data-size]) .muka-view__body-inner {
+    max-width: var(--container-max-width-xl);
+    margin-inline: auto;
+    padding-inline: var(--section-padding-horizontal-default);
+  }
+}
+
+.muka-view[data-size='lg'] .muka-view__body-inner {
+  max-width: var(--container-max-width-xl);
+  margin-inline: auto;
+  padding-inline: var(--section-padding-horizontal-default);
+}
+
+/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
+
+.muka-view__footer {
+  position: sticky;
+  bottom: 0;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+/* Inside an AppShell, the persistent left rail replaces the per-view bottom
+   navigation at the large tier, so hide a footer that holds a navigation bar.
+   Scoped to `.muka-app-shell` so bare Views (and the standalone
+   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
+   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
+@media (min-width: 1024px) {
+  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
+    display: none;
+  }
+}
+
+.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
+  display: none;
+}
+
+
 /* Typography */
 .muka-typography-catalog {
   display: flex;
@@ -2811,122 +2922,175 @@ body {
 }
 
 
-/* View */
-/* View Component Styles */
-
-/* ─── Base layout ─────────────────────────────────────── */
+/* Toggle */
+/* Toggle Component Styles - Using Muka Design Tokens */
 
-.muka-view {
+/* Wrapper container */
+.muka-toggle {
   display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  background-color: var(--view-color-background);
+  align-items: center;
+  gap: var(--spacing-2);
   position: relative;
-  isolation: isolate;
-  box-sizing: border-box;
-
-  /* Width reserved for the footer nav once it becomes a left sidebar at the
-     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
-  --view-sidebar-width: 240px;
+  padding: var(--spacing-4) 0;
 }
 
-/* ─── Surface level variants ─────────────────────────── */
-
-.muka-view--surface-3 {
-  background-color: var(--color-surface-level3);
+.muka-toggle--with-caption {
+  padding: var(--spacing-5) 0;
 }
 
-/* ─── Large screens: make room for the left sidebar ──────────
-   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
-   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
-   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
-   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
-   for a sidebar that hasn't rendered yet. */
-@media (min-width: 1024px) {
-  .muka-view:has(.muka-bottombar--desktop-sidebar) {
-    padding-left: var(--view-sidebar-width);
-  }
+.muka-toggle--disabled {
+  opacity: 0.6;
 }
 
-/* ─── TopBar elevation ────────────────────────────────── */
-
-.muka-view .muka-topbar {
+/* Icon */
+.muka-toggle__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
-  z-index: 3;
-  box-shadow: var(--shadow-level2);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+  color: var(--color-text-default-default);
 }
 
-/* ─── Scrollable body ─────────────────────────────────── */
-
-.muka-view__body {
-  flex: 1 1 0%;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: clip;
-  z-index: 1;
+.muka-toggle__icon svg {
+  width: 100%;
+  height: 100%;
+}
 
-  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
-     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
-     reveal the content underneath. */
+/* Content area (label + caption) */
+.muka-toggle__content {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
 }
 
-/* Inner wrapper constrains content width at the large tier (enterprise desktop)
-   using the alias-layer section/container tokens, while the body scrolls full
-   width. Full-bleed below large. */
-.muka-view__body-inner {
-  width: 100%;
-  /* Grow on short content so the sticky footer is pushed to the bottom rather
-     than floating mid-screen. */
-  flex: 1 0 auto;
+/* Label */
+.muka-toggle__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);
+  cursor: pointer;
 }
 
-@media (min-width: 1024px) {
-  .muka-view:not([data-size]) .muka-view__body-inner {
-    max-width: var(--container-max-width-xl);
-    margin-inline: auto;
-    padding-inline: var(--section-padding-horizontal-default);
-  }
+.muka-toggle--with-caption .muka-toggle__label {
+  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-view[data-size='lg'] .muka-view__body-inner {
-  max-width: var(--container-max-width-xl);
-  margin-inline: auto;
-  padding-inline: var(--section-padding-horizontal-default);
+.muka-toggle--disabled .muka-toggle__label {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
 }
 
-/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
-
-.muka-view__footer {
-  position: sticky;
-  bottom: 0;
-  flex-shrink: 0;
-  z-index: 2;
+/* Caption */
+.muka-toggle__caption {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-subtle-default);
 }
 
-/* Inside an AppShell, the persistent left rail replaces the per-view bottom
-   navigation at the large tier, so hide a footer that holds a navigation bar.
-   Scoped to `.muka-app-shell` so bare Views (and the standalone
-   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
-   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
-@media (min-width: 1024px) {
-  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
-    display: none;
-  }
+/* Switch container */
+.muka-toggle__switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
-.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
-  display: none;
+.muka-toggle--disabled .muka-toggle__switch {
+  cursor: not-allowed;
 }
 
-
-/* Toast */
-/* Toast Component Styles - Using Muka Design Tokens */
-
-.muka-toast {
-  display: flex;
-  align-items: flex-start;
+/* Hidden native input */
+.muka-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Track (background pill) */
+.muka-toggle__track {
+  display: flex;
+  align-items: center;
+  width: var(--toggle-track-width);
+  height: var(--toggle-track-height);
+  border-radius: var(--toggle-track-radius);
+  background-color: var(--toggle-track-color-off);
+  transition: background-color 0.2s ease;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.16);
+  position: relative;
+}
+
+/* Knob (sliding circle) */
+.muka-toggle__knob {
+  position: absolute;
+  width: var(--toggle-knob-size);
+  height: var(--toggle-knob-size);
+  border-radius: var(--border-radius-full);
+  background-color: var(--toggle-knob-color-default);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+  left: var(--toggle-knob-offset);
+  transition: left 0.2s ease, transform 0.2s ease;
+}
+
+/* Focus state */
+.muka-toggle__input:focus-visible + .muka-toggle__track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked (on) state */
+.muka-toggle__input:checked + .muka-toggle__track {
+  background-color: var(--toggle-track-color-on);
+}
+
+.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
+  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
+}
+
+/* Disabled state */
+.muka-toggle--disabled .muka-toggle__track {
+  background-color: var(--toggle-track-color-disabled);
+  box-shadow: none;
+}
+
+.muka-toggle--disabled .muka-toggle__knob {
+  background-color: var(--toggle-knob-color-disabled);
+  box-shadow: none;
+}
+
+/* Divider */
+.muka-toggle__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-muted);
+}
+
+
+/* Toast */
+/* Toast Component Styles - Using Muka Design Tokens */
+
+.muka-toast {
+  display: flex;
+  align-items: flex-start;
   gap: var(--toast-gap);
   padding: var(--toast-padding-y) var(--toast-padding-x);
   border-radius: var(--toast-radius);
@@ -3616,388 +3780,35 @@ body {
     border-color var(--motion-duration-micro) var(--motion-easing-enter);
 }
 
-.muka-thumbnail__remove:hover {
-  color: var(--button-color-tertiary-foreground-hover);
-  background-color: var(--button-color-tertiary-background-hover);
-  border-color: var(--button-color-tertiary-border-hover);
-}
-
-.muka-thumbnail__remove:active {
-  color: var(--button-color-tertiary-foreground-pressed);
-  background-color: var(--button-color-tertiary-background-pressed);
-  border-color: var(--button-color-tertiary-border-pressed);
-}
-
-.muka-thumbnail__remove:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-/* ─── Reduced motion ──────────────────────────────────── */
-@media (prefers-reduced-motion: reduce) {
-  .muka-thumbnail__image,
-  .muka-thumbnail__remove {
-    transition: none;
-  }
-
-  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
-    transform: none;
-  }
-}
-
-
-/* Toggle */
-/* Toggle Component Styles - Using Muka Design Tokens */
-
-/* Wrapper container */
-.muka-toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  position: relative;
-  padding: var(--spacing-4) 0;
-}
-
-.muka-toggle--with-caption {
-  padding: var(--spacing-5) 0;
-}
-
-.muka-toggle--disabled {
-  opacity: 0.6;
-}
-
-/* Icon */
-.muka-toggle__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
-  color: var(--color-text-default-default);
-}
-
-.muka-toggle__icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Content area (label + caption) */
-.muka-toggle__content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  gap: var(--spacing-1);
-}
-
-/* Label */
-.muka-toggle__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);
-  cursor: pointer;
-}
-
-.muka-toggle--with-caption .muka-toggle__label {
-  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-toggle--disabled .muka-toggle__label {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
-}
-
-/* Caption */
-.muka-toggle__caption {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-/* Switch container */
-.muka-toggle__switch {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.muka-toggle--disabled .muka-toggle__switch {
-  cursor: not-allowed;
-}
-
-/* Hidden native input */
-.muka-toggle__input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Track (background pill) */
-.muka-toggle__track {
-  display: flex;
-  align-items: center;
-  width: var(--toggle-track-width);
-  height: var(--toggle-track-height);
-  border-radius: var(--toggle-track-radius);
-  background-color: var(--toggle-track-color-off);
-  transition: background-color 0.2s ease;
-  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.16);
-  position: relative;
-}
-
-/* Knob (sliding circle) */
-.muka-toggle__knob {
-  position: absolute;
-  width: var(--toggle-knob-size);
-  height: var(--toggle-knob-size);
-  border-radius: var(--border-radius-full);
-  background-color: var(--toggle-knob-color-default);
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-  left: var(--toggle-knob-offset);
-  transition: left 0.2s ease, transform 0.2s ease;
-}
-
-/* Focus state */
-.muka-toggle__input:focus-visible + .muka-toggle__track {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-/* Checked (on) state */
-.muka-toggle__input:checked + .muka-toggle__track {
-  background-color: var(--toggle-track-color-on);
-}
-
-.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
-  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
-}
-
-/* Disabled state */
-.muka-toggle--disabled .muka-toggle__track {
-  background-color: var(--toggle-track-color-disabled);
-  box-shadow: none;
-}
-
-.muka-toggle--disabled .muka-toggle__knob {
-  background-color: var(--toggle-knob-color-disabled);
-  box-shadow: none;
-}
-
-/* Divider */
-.muka-toggle__divider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--color-border-muted);
-}
-
-
-/* Tabs */
-/* Tabs Component Styles - Clean underline style tabs matching Figma */
-
-.muka-tabs {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Alignment Variants */
-.muka-tabs--align-left .muka-tabs__list {
-  justify-content: flex-start;
-}
-.muka-tabs--align-center .muka-tabs__list {
-  justify-content: center;
-}
-.muka-tabs--align-fill .muka-tabs__list {
-  justify-content: space-between;
-}
-.muka-tabs--align-fill .muka-tabs__trigger {
-  flex: 1;
-}
-
-/* Tab List — strip container */
-.muka-tabs__list {
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 2;
-  border-bottom: 1px solid var(--tabs-trigger-color-default-border);
-}
-
-/* Padding: inset the tabs; the divider (border) still spans the full width */
-.muka-tabs--padding-default .muka-tabs__list {
-  padding-inline: var(--tabs-list-padding-x);
-}
-
-/* Tab Trigger — clean underline style */
-.muka-tabs__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-1);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  outline: none;
-  white-space: nowrap;
-  position: relative;
-  z-index: 2;
-  color: var(--tabs-trigger-color-default-foreground);
-
-  /* Default MD size values */
-  min-height: var(--tabs-trigger-min-height-md);
-  padding: var(--spacing-3);
-  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);
-}
-
-/* Size Variants */
-.muka-tabs--size-sm .muka-tabs__trigger {
-  min-height: var(--tabs-trigger-min-height-sm);
-  padding: 0 var(--spacing-2);
-  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);
-}
-
-.muka-tabs--size-lg .muka-tabs__trigger {
-  min-height: var(--tabs-trigger-min-height-lg);
-  padding: var(--spacing-4);
-  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);
-}
-
-/* Hover state */
-.muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
-  color: var(--tabs-trigger-color-hover-foreground);
-}
-
-/* Current tab */
-.muka-tabs__trigger--current {
-  color: var(--tabs-trigger-color-current-foreground);
-}
-
-/* Active bottom border (underline) */
-.muka-tabs__trigger--current::after {
-  content: '';
-  position: absolute;
-  bottom: -1px; /* Overlap the 1px border */
-  left: 0;
-  right: 0;
-  height: var(--tabs-indicator-height-md);
-  background-color: var(--tabs-indicator-color);
-  border-bottom-left-radius: 1px;
-  border-bottom-right-radius: 1px;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  z-index: 3;
-}
-
-.muka-tabs--size-sm .muka-tabs__trigger--current::after {
-  height: var(--tabs-indicator-height-sm);
-}
-.muka-tabs--size-lg .muka-tabs__trigger--current::after {
-  height: var(--tabs-indicator-height-lg);
-}
-
-.muka-tabs__trigger--disabled {
-  color: var(--tabs-trigger-color-disabled-foreground);
-  cursor: not-allowed;
-}
-
-.muka-tabs__trigger:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: -2px;
-}
-
-/* Label: Figma pads the label 8px either side, so with the 4px gap a leading
-   item sits 12px from the text */
-.muka-tabs__label {
-  padding: 0 var(--spacing-2);
-}
-
-/* Leading item: icon, avatar, avatar group or data pie chart */
-.muka-tabs__leading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.muka-tabs__trigger .muka-icon {
-  color: inherit;
-}
-/* Icon sizes only: avatars and pie charts are sized through their size prop */
-.muka-tabs--size-sm .muka-tabs__leading > svg,
-.muka-tabs--size-sm .muka-tabs__leading > .muka-icon svg { width: 16px; height: 16px; }
-.muka-tabs--size-md .muka-tabs__leading > svg,
-.muka-tabs--size-md .muka-tabs__leading > .muka-icon svg { width: 20px; height: 20px; }
-.muka-tabs--size-lg .muka-tabs__leading > svg,
-.muka-tabs--size-lg .muka-tabs__leading > .muka-icon svg { width: 24px; height: 24px; }
-
-/* Responsive Scroll behavior on small screens */
-@media (max-width: 768px) {
-  .muka-tabs__list {
-    /* Make scrollable */
-    overflow-x: auto;
-    overflow-y: hidden;
-    /* Force left alignment on mobile to prevent clipping when scrolling */
-    justify-content: flex-start !important;
-    max-width: 100vw;
-    -webkit-overflow-scrolling: touch;
-    /* Hide scrollbar for cleaner look */
-    scrollbar-width: none;
-  }
-  .muka-tabs__list::-webkit-scrollbar {
-    display: none;
-  }
-  /* Remove flex: 1 behavior for Fill tabs on mobile so they map correctly */
-  .muka-tabs--align-fill .muka-tabs__trigger {
-    flex: 0 0 auto;
-  }
+.muka-thumbnail__remove:hover {
+  color: var(--button-color-tertiary-foreground-hover);
+  background-color: var(--button-color-tertiary-background-hover);
+  border-color: var(--button-color-tertiary-border-hover);
 }
 
-/* Tab Panel — content area */
-.muka-tabs__panel {
-  background-color: var(--tabs-panel-background);
-  /* border-top: var(--border-width-regular) solid var(--tabs-panel-border); removed in favor of the new tablist border */
-  border-bottom: var(--border-width-regular) solid var(--tabs-panel-border);
-  padding: var(--spacing-4);
-  position: relative;
-  z-index: 1;
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
+.muka-thumbnail__remove:active {
+  color: var(--button-color-tertiary-foreground-pressed);
+  background-color: var(--button-color-tertiary-background-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
 }
 
-.muka-tabs__panel:focus-visible {
+.muka-thumbnail__remove:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
 
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-thumbnail__image,
+  .muka-thumbnail__remove {
+    transition: none;
+  }
+
+  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
+    transform: none;
+  }
+}
+
 
 /* Textarea */
 /* Textarea Component Styles - Using Muka Design Tokens */
@@ -4245,6 +4056,196 @@ body {
 }
 
 
+/* Tabs */
+/* Tabs Component Styles - Clean underline style tabs matching Figma */
+
+.muka-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Alignment Variants */
+.muka-tabs--align-left .muka-tabs__list {
+  justify-content: flex-start;
+}
+.muka-tabs--align-center .muka-tabs__list {
+  justify-content: center;
+}
+.muka-tabs--align-fill .muka-tabs__list {
+  justify-content: space-between;
+}
+.muka-tabs--align-fill .muka-tabs__trigger {
+  flex: 1;
+}
+
+/* Tab List — strip container */
+.muka-tabs__list {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  border-bottom: 1px solid var(--tabs-trigger-color-default-border);
+}
+
+/* Padding: inset the tabs; the divider (border) still spans the full width */
+.muka-tabs--padding-default .muka-tabs__list {
+  padding-inline: var(--tabs-list-padding-x);
+}
+
+/* Tab Trigger — clean underline style */
+.muka-tabs__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  outline: none;
+  white-space: nowrap;
+  position: relative;
+  z-index: 2;
+  color: var(--tabs-trigger-color-default-foreground);
+
+  /* Default MD size values */
+  min-height: var(--tabs-trigger-min-height-md);
+  padding: var(--spacing-3);
+  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);
+}
+
+/* Size Variants */
+.muka-tabs--size-sm .muka-tabs__trigger {
+  min-height: var(--tabs-trigger-min-height-sm);
+  padding: 0 var(--spacing-2);
+  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);
+}
+
+.muka-tabs--size-lg .muka-tabs__trigger {
+  min-height: var(--tabs-trigger-min-height-lg);
+  padding: var(--spacing-4);
+  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);
+}
+
+/* Hover state */
+.muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
+  color: var(--tabs-trigger-color-hover-foreground);
+}
+
+/* Current tab */
+.muka-tabs__trigger--current {
+  color: var(--tabs-trigger-color-current-foreground);
+}
+
+/* Active bottom border (underline) */
+.muka-tabs__trigger--current::after {
+  content: '';
+  position: absolute;
+  bottom: -1px; /* Overlap the 1px border */
+  left: 0;
+  right: 0;
+  height: var(--tabs-indicator-height-md);
+  background-color: var(--tabs-indicator-color);
+  border-bottom-left-radius: 1px;
+  border-bottom-right-radius: 1px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  z-index: 3;
+}
+
+.muka-tabs--size-sm .muka-tabs__trigger--current::after {
+  height: var(--tabs-indicator-height-sm);
+}
+.muka-tabs--size-lg .muka-tabs__trigger--current::after {
+  height: var(--tabs-indicator-height-lg);
+}
+
+.muka-tabs__trigger--disabled {
+  color: var(--tabs-trigger-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+.muka-tabs__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* Label: Figma pads the label 8px either side, so with the 4px gap a leading
+   item sits 12px from the text */
+.muka-tabs__label {
+  padding: 0 var(--spacing-2);
+}
+
+/* Leading item: icon, avatar, avatar group or data pie chart */
+.muka-tabs__leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.muka-tabs__trigger .muka-icon {
+  color: inherit;
+}
+/* Icon sizes only: avatars and pie charts are sized through their size prop */
+.muka-tabs--size-sm .muka-tabs__leading > svg,
+.muka-tabs--size-sm .muka-tabs__leading > .muka-icon svg { width: 16px; height: 16px; }
+.muka-tabs--size-md .muka-tabs__leading > svg,
+.muka-tabs--size-md .muka-tabs__leading > .muka-icon svg { width: 20px; height: 20px; }
+.muka-tabs--size-lg .muka-tabs__leading > svg,
+.muka-tabs--size-lg .muka-tabs__leading > .muka-icon svg { width: 24px; height: 24px; }
+
+/* Responsive Scroll behavior on small screens */
+@media (max-width: 768px) {
+  .muka-tabs__list {
+    /* Make scrollable */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Force left alignment on mobile to prevent clipping when scrolling */
+    justify-content: flex-start !important;
+    max-width: 100vw;
+    -webkit-overflow-scrolling: touch;
+    /* Hide scrollbar for cleaner look */
+    scrollbar-width: none;
+  }
+  .muka-tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+  /* Remove flex: 1 behavior for Fill tabs on mobile so they map correctly */
+  .muka-tabs--align-fill .muka-tabs__trigger {
+    flex: 0 0 auto;
+  }
+}
+
+/* Tab Panel — content area */
+.muka-tabs__panel {
+  background-color: var(--tabs-panel-background);
+  /* border-top: var(--border-width-regular) solid var(--tabs-panel-border); removed in favor of the new tablist border */
+  border-bottom: var(--border-width-regular) solid var(--tabs-panel-border);
+  padding: var(--spacing-4);
+  position: relative;
+  z-index: 1;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-tabs__panel:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+
 /* Table */
 /* Table Component Styles - Using Muka Design Tokens */
 
@@ -14846,9 +14847,12 @@ button.muka-chat-photo-grid__tile:focus-visible {
 
 /* Avatar Group (Figma "Avatar Stack") */
 .muka-avatar-group {
+  position: relative;
   display: inline-flex;
   align-items: center;
   flex-direction: row;
+  /* Never stretch to a grid cell or column, so the badge stays on the last avatar */
+  width: fit-content;
 }
 
 /* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
@@ -14868,7 +14872,7 @@ button.muka-chat-photo-grid__tile:focus-visible {
   box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
 }
 
-/* Overlap. Figma specifies exact values for 48 / 32 / 24px avatars (sm / 2xs / 3xs);
+/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
    other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
 .muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
 .muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
@@ -14883,13 +14887,13 @@ button.muka-chat-photo-grid__tile:focus-visible {
 .muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
 .muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
 
-.muka-avatar-group--tight.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-sm); }
+.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
 .muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
 .muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
-.muka-avatar-group--compact.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-sm); }
+.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
 .muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
 .muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
-.muka-avatar-group--spacious.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-sm); }
+.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
 .muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
 .muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
 
@@ -14897,6 +14901,14 @@ button.muka-chat-photo-grid__tile:focus-visible {
   margin-left: calc(-1 * var(--muka-avatar-group-overlap));
 }
 
+/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
+.muka-avatar-group__badge {
+  position: absolute;
+  top: calc(-1 * var(--avatar-group-badge-offset));
+  right: calc(-1 * var(--avatar-group-badge-offset));
+  z-index: 20;
+}
+
 /* Overflow avatar styling */
 .muka-avatar--overflow {
   background-color: var(--avatar-color-background-default);