@revikornmann/muka-ui 0.25.0 → 0.27.0

package/dist/styles/wireframe-light.css

@@ -377,6 +377,8 @@ body {
   --color-red-10: #dc3d43;
   --color-red-11: #cd2b31;
   --color-red-12: #381316;
+  --color-redStrong-1: #bd1524;
+  --color-redStrong-2: #ab001a;
   --color-ruby-1: #fffcfd;
   --color-ruby-2: #fff7f8;
   --color-ruby-3: #ffeef1;
@@ -1175,6 +1177,9 @@ body {
   --color-state-error-default: #e5484d;
   --color-state-error-contrast: #cd2b31;
   --color-state-error-background: #ffefef;
+  --color-state-error-solid-default: #cd2b31;
+  --color-state-error-solid-hover: #bd1524;
+  --color-state-error-solid-pressed: #ab001a;
   --color-state-info-default: #0091ff;
   --color-state-info-contrast: #0d74ce;
   --color-state-info-background: #edf6ff;
@@ -1275,6 +1280,9 @@ body {
   --alias-color-state-error-contrast: #cd2b31;
   --alias-color-state-error-default: #e5484d;
   --alias-color-state-error-muted: #ffefef;
+  --alias-color-state-error-solid-default: #cd2b31;
+  --alias-color-state-error-solid-hover: #bd1524;
+  --alias-color-state-error-solid-pressed: #ab001a;
   --alias-color-state-error-surface-level0: #fff8f8;
   --alias-color-state-error-surface-level1: #ffefef;
   --alias-color-state-error-surface-level2: #ffe5e5;
@@ -1571,6 +1579,18 @@ body {
   --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --button-color-primary-shadow-pressed: none;
   --button-color-primary-shadow-disabled: none;
+  --button-color-destructive-background-default: #cd2b31;
+  --button-color-destructive-background-hover: #bd1524;
+  --button-color-destructive-background-pressed: #ab001a;
+  --button-color-destructive-background-disabled: #e0e0e0;
+  --button-color-destructive-foreground-default: #fcfcfc;
+  --button-color-destructive-foreground-hover: #fcfcfc;
+  --button-color-destructive-foreground-pressed: #fcfcfc;
+  --button-color-destructive-foreground-disabled: #bbbbbb;
+  --button-color-destructive-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
+  --button-color-destructive-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
+  --button-color-destructive-shadow-pressed: none;
+  --button-color-destructive-shadow-disabled: none;
   --button-color-secondary-background-default: #e8e8e8;
   --button-color-secondary-background-hover: #e8e8e8;
   --button-color-secondary-background-pressed: #e0e0e0;
@@ -1935,7 +1955,7 @@ body {
   --contextmenu-trigger-outline-color: #113264;
   --contextmenu-trigger-outline-offset: 0.25rem;
   --tabs-trigger-color-default-background: #e8e8e8;
-  --tabs-trigger-color-default-foreground: #202020;
+  --tabs-trigger-color-default-foreground: #838383;
   --tabs-trigger-color-default-border: #bbbbbb;
   --tabs-trigger-color-hover-background: #e8e8e8;
   --tabs-trigger-color-hover-foreground: #202020;
@@ -1950,8 +1970,16 @@ body {
   --tabs-trigger-padding-y: 0.5rem;
   --tabs-trigger-height: 3rem;
   --tabs-trigger-radius: 0px;
+  --tabs-trigger-min-height-sm: 2.5rem;
+  --tabs-trigger-min-height-md: 3.5rem;
+  --tabs-trigger-min-height-lg: 5rem;
   --tabs-panel-background: #fcfcfc;
   --tabs-panel-border: #bbbbbb;
+  --tabs-indicator-color: #113264;
+  --tabs-indicator-height-sm: 2px;
+  --tabs-indicator-height-md: 3px;
+  --tabs-indicator-height-lg: 4px;
+  --tabs-list-padding-x: 1rem;
   --separator-color-default: #e0e0e0;
   --separator-color-contrast: #bbbbbb;
   --separator-width: 0.0625rem;
@@ -1984,6 +2012,9 @@ body {
   --progress-size-circle-strokeWidth-sm: 0.25rem;
   --progress-size-circle-strokeWidth-md: 0.5rem;
   --progress-size-circle-strokeWidth-lg: 0.75rem;
+  --avatar-size-4xs: 1rem;
+  --avatar-size-3xs: 1.5rem;
+  --avatar-size-2xs: 2rem;
   --avatar-size-xs: 2.5rem;
   --avatar-size-sm: 3rem;
   --avatar-size-md: 4rem;
@@ -1993,26 +2024,38 @@ body {
   --avatar-color-background-loading: #e0e0e0;
   --avatar-color-foreground-default: #202020;
   --avatar-color-foreground-muted: #bbbbbb;
-  --avatar-color-border-default: #e0e0e0;
   --avatar-color-status-online: #30a46c;
   --avatar-color-status-offline: #bbbbbb;
   --avatar-color-status-busy: #e5484d;
   --avatar-color-status-away: #ffc53d;
   --avatar-radius-circle: 999rem;
   --avatar-radius-square: 0px;
+  --avatar-radius-square-sm: 0px;
+  --avatar-font-size-3xs: 0.75rem;
+  --avatar-font-size-2xs: 0.75rem;
   --avatar-font-size-xs: 0.75rem;
   --avatar-font-size-sm: 0.875rem;
   --avatar-font-size-md: 1.125rem;
   --avatar-font-size-lg: 1.25rem;
   --avatar-font-size-xl: 1.5rem;
+  --avatar-status-size-3xs: 0.5rem;
+  --avatar-status-size-2xs: 0.5rem;
   --avatar-status-size-xs: 0.5rem;
   --avatar-status-size-sm: 0.75rem;
   --avatar-status-size-md: 1rem;
   --avatar-status-size-lg: 1.25rem;
   --avatar-status-size-xl: 1.5rem;
-  --avatar-border-width: 1px;
-  --avatar-group-spacing-tight: -0.5rem;
-  --avatar-group-spacing-normal: -0.25rem;
+  --avatar-group-ring-width: 0.125rem;
+  --avatar-group-ring-color: #fcfcfc;
+  --avatar-group-overlap-tight-sm: 2rem;
+  --avatar-group-overlap-tight-2xs: 1.25rem;
+  --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-spacious-2xs: 0.75rem;
+  --avatar-group-overlap-spacious-3xs: 0.5rem;
   --toast-color-info-background: #202020;
   --toast-color-info-foreground: #fcfcfc;
   --toast-color-info-accent: #edf6ff;
@@ -2418,116 +2461,6 @@ 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;
@@ -2878,166 +2811,113 @@ body {
 }
 
 
-/* Toggle */
-/* Toggle Component Styles - Using Muka Design Tokens */
+/* View */
+/* View Component Styles */
 
-/* Wrapper container */
-.muka-toggle {
+/* ─── Base layout ─────────────────────────────────────── */
+
+.muka-view {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
+  flex-direction: column;
+  height: 100dvh;
+  background-color: var(--view-color-background);
   position: relative;
-  padding: var(--spacing-4) 0;
+  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;
 }
 
-.muka-toggle--with-caption {
-  padding: var(--spacing-5) 0;
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-view--surface-3 {
+  background-color: var(--color-surface-level3);
 }
 
-.muka-toggle--disabled {
-  opacity: 0.6;
+/* ─── 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);
+  }
 }
 
-/* Icon */
-.muka-toggle__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+/* ─── TopBar elevation ────────────────────────────────── */
+
+.muka-view .muka-topbar {
   flex-shrink: 0;
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
-  color: var(--color-text-default-default);
+  z-index: 3;
+  box-shadow: var(--shadow-level2);
 }
 
-.muka-toggle__icon svg {
-  width: 100%;
-  height: 100%;
-}
+/* ─── Scrollable body ─────────────────────────────────── */
 
-/* Content area (label + caption) */
-.muka-toggle__content {
+.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;
-  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;
+/* 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;
 }
 
-.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);
+@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--disabled .muka-toggle__label {
-  color: var(--color-text-subtle-default);
-  cursor: not-allowed;
+.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);
 }
 
-/* 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);
-}
+/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
-/* Switch container */
-.muka-toggle__switch {
-  position: relative;
-  display: inline-flex;
+.muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
-  cursor: pointer;
+  z-index: 2;
 }
 
-.muka-toggle--disabled .muka-toggle__switch {
-  cursor: not-allowed;
+/* 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;
+  }
 }
 
-/* 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);
+.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
+  display: none;
 }
 
 
@@ -3766,249 +3646,166 @@ body {
 }
 
 
-/* Textarea */
-/* Textarea Component Styles - Using Muka Design Tokens */
+/* Toggle */
+/* Toggle Component Styles - Using Muka Design Tokens */
 
-.muka-textarea {
-  display: inline-flex;
-  flex-direction: column;
+/* Wrapper container */
+.muka-toggle {
+  display: flex;
+  align-items: center;
   gap: var(--spacing-2);
+  position: relative;
+  padding: var(--spacing-4) 0;
 }
 
-/* Label */
-.muka-textarea__label {
+.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);
-  cursor: pointer;
 }
 
-.muka-textarea__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-toggle__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-.muka-textarea__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);
+/* Content area (label + caption) */
+.muka-toggle__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
 }
 
-.muka-textarea__label--lg {
+/* 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-textarea__required {
-  color: var(--color-state-error-default);
+.muka-toggle--disabled .muka-toggle__label {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
 }
 
-/* Field container */
-.muka-textarea__field {
-  display: flex;
-  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;
-  box-sizing: border-box;
+/* 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);
 }
 
-.muka-textarea__field--sm {
-  min-height: var(--input-textarea-height-sm);
-  border-radius: var(--input-field-radius-sm);
+/* Switch container */
+.muka-toggle__switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
-.muka-textarea__field--md {
-  min-height: var(--input-textarea-height-default);
-  border-radius: var(--input-field-radius-md);
+.muka-toggle--disabled .muka-toggle__switch {
+  cursor: not-allowed;
 }
 
-.muka-textarea__field--lg {
-  min-height: var(--input-textarea-height-lg);
-  border-radius: var(--input-field-radius-lg);
+/* 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;
 }
 
-/* Focus state */
-.muka-textarea__field--focused:not(.muka-textarea__field--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-focus-border);
-  background-color: var(--input-field-color-focus-background);
-  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+/* 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;
 }
 
-/* Error state */
-.muka-textarea__field--error:not(.muka-textarea__field--disabled) {
-  border-width: var(--border-width-bold);
-  border-color: var(--input-field-color-error-border);
-  background-color: var(--input-field-color-error-background);
-  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+/* 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;
 }
 
-/* Disabled state */
-.muka-textarea__field--disabled {
-  background-color: var(--input-field-color-disabled-background);
-  border-color: var(--input-field-color-disabled-border);
-  cursor: not-allowed;
+/* Focus state */
+.muka-toggle__input:focus-visible + .muka-toggle__track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
 }
 
-/* Native textarea */
-.muka-textarea__native {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--input-field-color-default-foreground);
-  font-family: var(--text-input-md-fontFamily);
-  font-weight: var(--text-input-md-fontWeight);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-  padding: 0;
-  width: 100%;
-  min-width: 0;
+/* Checked (on) state */
+.muka-toggle__input:checked + .muka-toggle__track {
+  background-color: var(--toggle-track-color-on);
 }
 
-.muka-textarea__field--sm .muka-textarea__native {
-  font-family: var(--text-input-sm-fontFamily);
-  font-weight: var(--text-input-sm-fontWeight);
-  font-size: var(--text-input-sm-fontSize);
-  line-height: var(--text-input-sm-lineHeight);
+.muka-toggle__input:checked + .muka-toggle__track .muka-toggle__knob {
+  left: calc(var(--toggle-track-width) - var(--toggle-knob-size) - var(--toggle-knob-offset));
 }
 
-.muka-textarea__field--lg .muka-textarea__native {
-  font-family: var(--text-input-lg-fontFamily);
-  font-weight: var(--text-input-lg-fontWeight);
-  font-size: var(--text-input-lg-fontSize);
-  line-height: var(--text-input-lg-lineHeight);
+/* Disabled state */
+.muka-toggle--disabled .muka-toggle__track {
+  background-color: var(--toggle-track-color-disabled);
+  box-shadow: none;
 }
 
-.muka-textarea__native::placeholder {
-  color: var(--color-text-subtle-default);
+.muka-toggle--disabled .muka-toggle__knob {
+  background-color: var(--toggle-knob-color-disabled);
+  box-shadow: none;
 }
 
-.muka-textarea__field--disabled .muka-textarea__native {
-  color: var(--input-field-color-disabled-foreground);
-  cursor: not-allowed;
-}
-
-/* Footer (helper/error + count) */
-.muka-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-.muka-textarea__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;
-}
-
-.muka-textarea__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;
-}
-
-.muka-textarea__count {
-  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-left: auto;
-}
-
-
-/* TextLink */
-/* TextLink Component Styles - Using Muka Design Tokens */
-
-.muka-text-link {
-  display: inline;
-  cursor: pointer;
-  text-decoration: underline;
-  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
-  text-underline-offset: 0.2em;
-  text-decoration-thickness: from-font;
-  /* Rounds the focus ring's corners; the link itself has no visible box. */
-  border-radius: var(--border-radius-sm);
-  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
-}
-
-/* ─── Sizes ───────────────────────────────────────────────
-   Mirrors the body text scale so a link matches the copy it sits in. */
-.muka-text-link--sm {
-  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);
-}
-
-.muka-text-link--base {
-  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-text-link--lg {
-  font-family: var(--text-body-lg-regular-fontFamily);
-  font-weight: var(--text-body-lg-regular-fontWeight);
-  font-size: var(--text-body-lg-regular-fontSize);
-  line-height: var(--text-body-lg-regular-lineHeight);
-}
-
-/* ─── Variant: default (accent) ───────────────────────────
-   Visited repeats the default colour on purpose: the design treats visited and
-   default the same, and pinning it stops the browser's purple from showing. */
-.muka-text-link--default,
-.muka-text-link--default:visited {
-  color: var(--color-text-action-default);
-}
-
-.muka-text-link--default:hover,
-.muka-text-link--default:focus-visible {
-  color: var(--color-text-action-hover);
-}
-
-.muka-text-link--default:active {
-  color: var(--color-text-action-pressed);
-}
-
-/* ─── Variant: subtle (neutral) ───────────────────────────
-   Hover, focus and pressed all darken to the default text colour. */
-.muka-text-link--subtle,
-.muka-text-link--subtle:visited {
-  color: var(--color-text-subtle-default);
-}
-
-.muka-text-link--subtle:hover,
-.muka-text-link--subtle:focus-visible,
-.muka-text-link--subtle:active {
-  color: var(--color-text-default-default);
-}
-
-/* ─── Focus ───────────────────────────────────────────────
-   Same ring as every other focusable Muka component. */
-.muka-text-link:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .muka-text-link {
-    transition: none;
-  }
+/* Divider */
+.muka-toggle__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-muted);
 }
 
 
@@ -4043,12 +3840,17 @@ body {
   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-2, 8px);
+  gap: var(--spacing-1);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -4061,8 +3863,8 @@ body {
   color: var(--tabs-trigger-color-default-foreground);
 
   /* Default MD size values */
-  height: 48px;
-  padding: 0 var(--spacing-3, 12px);
+  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);
@@ -4071,8 +3873,8 @@ body {
 
 /* Size Variants */
 .muka-tabs--size-sm .muka-tabs__trigger {
-  height: 36px;
-  padding: 0 var(--spacing-2, 8px);
+  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);
@@ -4080,8 +3882,8 @@ body {
 }
 
 .muka-tabs--size-lg .muka-tabs__trigger {
-  height: 56px;
-  padding: 0 var(--spacing-4, 16px);
+  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);
@@ -4105,8 +3907,8 @@ body {
   bottom: -1px; /* Overlap the 1px border */
   left: 0;
   right: 0;
-  height: 3px;
-  background-color: var(--tabs-trigger-color-current-foreground);
+  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;
@@ -4114,6 +3916,13 @@ body {
   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;
@@ -4124,18 +3933,29 @@ body {
   outline-offset: -2px;
 }
 
-/* Icons */
-.muka-tabs__icon {
+/* 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;
 }
-.muka-tabs--size-sm .muka-tabs__icon svg { width: 16px; height: 16px; }
-.muka-tabs--size-md .muka-tabs__icon svg { width: 20px; height: 20px; }
-.muka-tabs--size-lg .muka-tabs__icon svg { width: 24px; height: 24px; }
+/* 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) {
@@ -4159,25 +3979,271 @@ body {
   }
 }
 
-/* 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);
+/* 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;
+}
+
+
+/* Textarea */
+/* Textarea Component Styles - Using Muka Design Tokens */
+
+.muka-textarea {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-textarea__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-textarea__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-textarea__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-textarea__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-textarea__required {
+  color: var(--color-state-error-default);
+}
+
+/* Field container */
+.muka-textarea__field {
+  display: flex;
+  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;
+  box-sizing: border-box;
+}
+
+.muka-textarea__field--sm {
+  min-height: var(--input-textarea-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-textarea__field--md {
+  min-height: var(--input-textarea-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-textarea__field--lg {
+  min-height: var(--input-textarea-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Focus state */
+.muka-textarea__field--focused:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Error state */
+.muka-textarea__field--error:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Disabled state */
+.muka-textarea__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+/* Native textarea */
+.muka-textarea__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-textarea__field--sm .muka-textarea__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-textarea__field--lg .muka-textarea__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-textarea__native::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-textarea__field--disabled .muka-textarea__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Footer (helper/error + count) */
+.muka-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.muka-textarea__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;
+}
+
+.muka-textarea__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;
+}
+
+.muka-textarea__count {
+  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-left: auto;
+}
+
+
+/* TextLink */
+/* TextLink Component Styles - Using Muka Design Tokens */
+
+.muka-text-link {
+  display: inline;
+  cursor: pointer;
+  text-decoration: underline;
+  /* Nudge the rule clear of descenders; the Figma underline sits off baseline. */
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: from-font;
+  /* Rounds the focus ring's corners; the link itself has no visible box. */
+  border-radius: var(--border-radius-sm);
+  transition: color var(--motion-duration-micro, 0.15s) var(--motion-easing-enter, ease);
+}
+
+/* ─── Sizes ───────────────────────────────────────────────
+   Mirrors the body text scale so a link matches the copy it sits in. */
+.muka-text-link--sm {
+  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);
+}
+
+.muka-text-link--base {
+  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-text-link--lg {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+/* ─── Variant: default (accent) ───────────────────────────
+   Visited repeats the default colour on purpose: the design treats visited and
+   default the same, and pinning it stops the browser's purple from showing. */
+.muka-text-link--default,
+.muka-text-link--default:visited {
+  color: var(--color-text-action-default);
+}
+
+.muka-text-link--default:hover,
+.muka-text-link--default:focus-visible {
+  color: var(--color-text-action-hover);
 }
 
-.muka-tabs__panel:focus-visible {
+.muka-text-link--default:active {
+  color: var(--color-text-action-pressed);
+}
+
+/* ─── Variant: subtle (neutral) ───────────────────────────
+   Hover, focus and pressed all darken to the default text colour. */
+.muka-text-link--subtle,
+.muka-text-link--subtle:visited {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-text-link--subtle:hover,
+.muka-text-link--subtle:focus-visible,
+.muka-text-link--subtle:active {
+  color: var(--color-text-default-default);
+}
+
+/* ─── Focus ───────────────────────────────────────────────
+   Same ring as every other focusable Muka component. */
+.muka-text-link:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .muka-text-link {
+    transition: none;
+  }
+}
+
 
 /* Table */
 /* Table Component Styles - Using Muka Design Tokens */
@@ -4531,114 +4597,6 @@ body {
 }
 
 
-/* SwipeActions */
-/* SwipeActions Component Styles */
-
-.muka-swipe-actions {
-  position: relative;
-  overflow: hidden;
-  touch-action: pan-y;
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: var(--color-surface-level3);
-}
-
-.muka-swipe-actions--disabled {
-  touch-action: auto;
-}
-
-/* ─── Row that holds the actual content ────────────────── */
-
-.muka-swipe-actions__row {
-  position: relative;
-  z-index: 1;
-  background-color: inherit;
-  will-change: transform;
-}
-
-/* ─── Action panels — sit beneath the row ──────────────── */
-
-.muka-swipe-actions__panel {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: stretch;
-  z-index: 0;
-}
-
-.muka-swipe-actions__panel--left {
-  left: 0;
-}
-
-.muka-swipe-actions__panel--right {
-  right: 0;
-}
-
-/* ─── Single action button ─────────────────────────────── */
-
-.muka-swipe-actions__button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-1);
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-2);
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-  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);
-  -webkit-tap-highlight-color: transparent;
-  transition: filter 0.12s ease;
-}
-
-.muka-swipe-actions__button:hover {
-  filter: brightness(0.95);
-}
-
-.muka-swipe-actions__button:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: -2px;
-}
-
-.muka-swipe-actions__button-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ─── Color variants ───────────────────────────────────── */
-
-.muka-swipe-actions__button--neutral {
-  background-color: var(--color-surface-level2);
-  color: var(--color-text-default-default);
-}
-
-.muka-swipe-actions__button--primary {
-  background-color: var(--color-action-default);
-  color: var(--color-text-default-inverse);
-}
-
-.muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default);
-  color: var(--color-text-default-inverse);
-}
-
-.muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default);
-  color: var(--color-text-default-default);
-}
-
-.muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default);
-  color: var(--color-text-default-inverse);
-}
-
-
 /* Spinner */
 /* Spinner Component Styles */
 
@@ -4734,71 +4692,179 @@ body {
   padding-bottom: var(--spacing-3);
 }
 
-/* ─── Label ───────────────────────────────────────────── */
+/* ─── Label ───────────────────────────────────────────── */
+
+.muka-spec-row__label {
+  flex: 0 0 auto;
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Value ───────────────────────────────────────────── */
+
+.muka-spec-row__value {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-text-default-default);
+}
+
+.muka-spec-row__value-text {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-spec-row__hint {
+  color: var(--color-text-subtle-default);
+  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);
+}
+
+/* ─── Label width (horizontal stacking) ───────────────── */
+
+.muka-spec-list--label-small .muka-spec-row__label {
+  width: 80px;
+}
+
+.muka-spec-list--label-medium .muka-spec-row__label {
+  width: 120px;
+}
+
+.muka-spec-list--label-large .muka-spec-row__label {
+  width: 160px;
+}
+
+/* ─── Vertical stacking ───────────────────────────────── */
+
+.muka-spec-list--vertical .muka-spec-row {
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.muka-spec-list--vertical .muka-spec-row__label {
+  width: 100%;
+  white-space: normal;
+}
+
+
+/* SwipeActions */
+/* SwipeActions Component Styles */
+
+.muka-swipe-actions {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: var(--color-surface-level3);
+}
+
+.muka-swipe-actions--disabled {
+  touch-action: auto;
+}
+
+/* ─── Row that holds the actual content ────────────────── */
+
+.muka-swipe-actions__row {
+  position: relative;
+  z-index: 1;
+  background-color: inherit;
+  will-change: transform;
+}
+
+/* ─── Action panels — sit beneath the row ──────────────── */
+
+.muka-swipe-actions__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+  z-index: 0;
+}
+
+.muka-swipe-actions__panel--left {
+  left: 0;
+}
 
-.muka-spec-row__label {
-  flex: 0 0 auto;
-  margin: 0;
-  color: var(--color-text-subtle-default);
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  font-size: var(--text-body-base-regular-fontSize);
-  line-height: var(--text-body-base-regular-lineHeight);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.muka-swipe-actions__panel--right {
+  right: 0;
 }
 
-/* ─── Value ───────────────────────────────────────────── */
+/* ─── Single action button ─────────────────────────────── */
 
-.muka-spec-row__value {
-  flex: 1 1 0;
-  min-width: 0;
-  margin: 0;
+.muka-swipe-actions__button {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-2);
+  background-color: var(--color-surface-level2);
   color: var(--color-text-default-default);
+  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);
+  -webkit-tap-highlight-color: transparent;
+  transition: filter 0.12s ease;
 }
 
-.muka-spec-row__value-text {
-  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-swipe-actions__button:hover {
+  filter: brightness(0.95);
 }
 
-.muka-spec-row__hint {
-  color: var(--color-text-subtle-default);
-  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);
+.muka-swipe-actions__button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
 }
 
-/* ─── Label width (horizontal stacking) ───────────────── */
-
-.muka-spec-list--label-small .muka-spec-row__label {
-  width: 80px;
+.muka-swipe-actions__button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.muka-spec-list--label-medium .muka-spec-row__label {
-  width: 120px;
+/* ─── Color variants ───────────────────────────────────── */
+
+.muka-swipe-actions__button--neutral {
+  background-color: var(--color-surface-level2);
+  color: var(--color-text-default-default);
 }
 
-.muka-spec-list--label-large .muka-spec-row__label {
-  width: 160px;
+.muka-swipe-actions__button--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-default-inverse);
 }
 
-/* ─── Vertical stacking ───────────────────────────────── */
+.muka-swipe-actions__button--success {
+  background-color: var(--color-state-success-default);
+  color: var(--color-text-default-inverse);
+}
 
-.muka-spec-list--vertical .muka-spec-row {
-  flex-direction: column;
-  gap: var(--spacing-1);
+.muka-swipe-actions__button--warning {
+  background-color: var(--color-state-warning-default);
+  color: var(--color-text-default-default);
 }
 
-.muka-spec-list--vertical .muka-spec-row__label {
-  width: 100%;
-  white-space: normal;
+.muka-swipe-actions__button--destructive {
+  background-color: var(--color-state-error-default);
+  color: var(--color-text-default-inverse);
 }
 
 
@@ -7433,6 +7499,77 @@ body {
 }
 
 
+/* ProfileBadge */
+/* ProfileBadge Component Styles - Using Muka Design Tokens */
+
+.muka-profile-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--text-body-base-regular-fontFamily);
+}
+
+/* Size variants */
+.muka-profile-badge--lg {
+  gap: var(--spacing-4); /* 16px */
+}
+
+.muka-profile-badge--md {
+  gap: var(--spacing-3); /* 12px */
+}
+
+.muka-profile-badge__avatar {
+  flex-shrink: 0;
+}
+
+/* Text stack */
+.muka-profile-badge__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.muka-profile-badge__name {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-profile-badge__email {
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-size: var(--text-body-xs-regular-fontSize);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Clickable state */
+.muka-profile-badge--clickable {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: opacity 0.2s ease;
+}
+
+.muka-profile-badge--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-profile-badge--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-profile-badge--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+
 /* PriceTag */
 /* PriceTag Component Styles - Using Muka Design Tokens */
 
@@ -7530,77 +7667,6 @@ body {
 }
 
 
-/* ProfileBadge */
-/* ProfileBadge Component Styles - Using Muka Design Tokens */
-
-.muka-profile-badge {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--text-body-base-regular-fontFamily);
-}
-
-/* Size variants */
-.muka-profile-badge--lg {
-  gap: var(--spacing-4); /* 16px */
-}
-
-.muka-profile-badge--md {
-  gap: var(--spacing-3); /* 12px */
-}
-
-.muka-profile-badge__avatar {
-  flex-shrink: 0;
-}
-
-/* Text stack */
-.muka-profile-badge__text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.muka-profile-badge__name {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-size: var(--text-body-base-regular-fontSize);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  line-height: var(--text-body-base-regular-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-.muka-profile-badge__email {
-  font-family: var(--text-body-xs-regular-fontFamily);
-  font-size: var(--text-body-xs-regular-fontSize);
-  font-weight: var(--text-body-xs-regular-fontWeight);
-  line-height: var(--text-body-xs-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-/* Clickable state */
-.muka-profile-badge--clickable {
-  cursor: pointer;
-  border: none;
-  background: none;
-  padding: 0;
-  text-align: left;
-  border-radius: var(--radius-md);
-  transition: opacity 0.2s ease;
-}
-
-.muka-profile-badge--clickable:hover {
-  opacity: 0.9;
-}
-
-.muka-profile-badge--clickable:active {
-  opacity: 0.8;
-}
-
-.muka-profile-badge--clickable:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-
 /* Popover */
 /* Popover Component Styles */
 
@@ -8006,18 +8072,46 @@ body {
   white-space: nowrap;
 }
 
-/* Hide the native number spinners — affixes/step API replace them. */
-.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
-.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+/* Hide the native number spinners — affixes/step API replace them. */
+.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
+.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.muka-numberinput__field .muka-input__native {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+
+/* 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;
 }
 
-.muka-numberinput__field .muka-input__native {
-  -moz-appearance: textfield;
-  appearance: textfield;
+/* ─── 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 */
@@ -8498,34 +8592,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; }
-
-
 /* ListItem */
 /* ListItem Component Styles - Using Muka Design Tokens */
 
@@ -8954,6 +9020,184 @@ li.muka-listitem {
 }
 
 
+/* 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);
+}
+
+.muka-inputcounter--sm {
+  --muka-inputcounter-height: var(--input-field-height-sm);
+  --muka-inputcounter-pad: calc(var(--spacing-1) + var(--spacing-1));
+  --muka-inputcounter-min: var(--size-2xl);
+}
+
+.muka-inputcounter--lg {
+  --muka-inputcounter-radius: var(--input-field-radius-lg);
+  --muka-inputcounter-height: var(--input-field-height-lg);
+}
+
+/* Label row — label, info tooltip trigger, optional hint */
+.muka-inputcounter__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-xl);
+}
+
+.muka-inputcounter__info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.muka-inputcounter__info .muka-icon {
+  color: var(--color-action-default);
+}
+
+.muka-inputcounter__info:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-inputcounter__optional {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Field + button group */
+.muka-inputcounter__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+/* Field — grows with the value (in ch), never narrower than the Figma width.
+   Padding sits on the native input so the 2px focus/error border doesn't
+   need compensating: content is centred in a fixed box. */
+.muka-inputcounter__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--muka-inputcounter-height);
+  width: calc(
+    max(var(--muka-inputcounter-min), calc(var(--muka-inputcounter-chars, 1) * 1ch)) +
+      2 * var(--muka-inputcounter-pad) + 2 * var(--border-width-regular)
+  );
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--muka-inputcounter-radius);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.muka-inputcounter__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--shadow-sunken);
+  pointer-events: none;
+}
+
+.muka-inputcounter__field--focused:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+}
+
+.muka-inputcounter__field--error:not(.muka-inputcounter__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+}
+
+.muka-inputcounter__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+}
+
+.muka-inputcounter__field--disabled::after {
+  display: none;
+}
+
+.muka-inputcounter__native {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--muka-inputcounter-pad) - var(--border-width-regular));
+  border: none;
+  outline: none;
+  background: transparent;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-inputcounter--sm .muka-inputcounter__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-inputcounter__field--disabled .muka-inputcounter__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Button group — secondary icon-only Buttons joined by a divider.
+   Only the outer corners are rounded. */
+.muka-inputcounter__group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.muka-inputcounter__group .muka-button {
+  border-radius: 0;
+}
+
+.muka-inputcounter__group .muka-button:first-child {
+  border-start-start-radius: var(--muka-inputcounter-radius);
+  border-end-start-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__group .muka-button:last-child {
+  border-start-end-radius: var(--muka-inputcounter-radius);
+  border-end-end-radius: var(--muka-inputcounter-radius);
+}
+
+.muka-inputcounter__divider {
+  flex: none;
+  width: var(--border-width-regular);
+  background-color: var(--color-border-default);
+}
+
+
 /* Input */
 /* Input Component Styles - Using Muka Design Tokens */
 
@@ -13392,6 +13636,39 @@ button.muka-chat-photo-grid__tile:focus-visible {
   opacity: 1; /* Remove opacity since we have proper disabled tokens */
 }
 
+/* Destructive variant - primary's structure on the solid error fill, for
+   irreversible actions. Hover and pressed step away from the label color, so
+   contrast never drops (darker in light themes, lighter in dark themes).
+   Disabled is neutral grey rather than primary's brand-tinted fill. */
+.muka-button--destructive {
+  background-color: var(--button-color-destructive-background-default);
+  color: var(--button-color-destructive-foreground-default);
+  box-shadow: var(--button-color-destructive-shadow-default);
+}
+
+.muka-button--destructive:hover:not(:disabled) {
+  background-color: var(--button-color-destructive-background-hover);
+  color: var(--button-color-destructive-foreground-hover);
+  box-shadow: var(--button-color-destructive-shadow-hover);
+}
+
+.muka-button--destructive:active:not(:disabled),
+.muka-button--destructive.muka-button--pressed:not(:disabled),
+.muka-button--destructive[data-state="open"]:not(:disabled),
+.muka-button--destructive[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--button-color-destructive-background-pressed);
+  color: var(--button-color-destructive-foreground-pressed);
+  box-shadow: var(--button-color-destructive-shadow-pressed);
+}
+
+.muka-button--destructive:disabled {
+  background-color: var(--button-color-destructive-background-disabled);
+  color: var(--button-color-destructive-foreground-disabled);
+  box-shadow: var(--button-color-destructive-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* Secondary variant - supporting actions, no border, only bottom inner shadow */
 .muka-button--secondary {
   background-color: var(--button-color-secondary-background-default);
@@ -14325,12 +14602,29 @@ button.muka-chat-photo-grid__tile:focus-visible {
   vertical-align: middle;
   background-color: var(--avatar-color-background-default);
   color: var(--avatar-color-foreground-default);
-  border: var(--avatar-border-width) solid var(--avatar-color-border-default);
   font-family: var(--alias-font-brand-family);
   font-weight: var(--alias-font-brand-weight-semibold);
 }
 
 /* Size variants */
+.muka-avatar--4xs {
+  width: var(--avatar-size-4xs);
+  height: var(--avatar-size-4xs);
+  font-size: var(--avatar-font-size-3xs); /* only used by an AvatarGroup "+N" */
+}
+
+.muka-avatar--3xs {
+  width: var(--avatar-size-3xs);
+  height: var(--avatar-size-3xs);
+  font-size: var(--avatar-font-size-3xs);
+}
+
+.muka-avatar--2xs {
+  width: var(--avatar-size-2xs);
+  height: var(--avatar-size-2xs);
+  font-size: var(--avatar-font-size-2xs);
+}
+
 .muka-avatar--xs {
   width: var(--avatar-size-xs);
   height: var(--avatar-size-xs);
@@ -14370,6 +14664,20 @@ button.muka-chat-photo-grid__tile:focus-visible {
   border-radius: var(--avatar-radius-square);
 }
 
+.muka-avatar--square.muka-avatar--4xs,
+.muka-avatar--square.muka-avatar--3xs,
+.muka-avatar--square.muka-avatar--2xs {
+  border-radius: var(--avatar-radius-square-sm);
+}
+
+/* 4xs is too small for initials, the fallback icon or a status dot:
+   it shows the picture, or the plain background */
+.muka-avatar--4xs .muka-avatar__initials,
+.muka-avatar--4xs .muka-avatar__fallback,
+.muka-avatar--4xs .muka-avatar__status {
+  display: none;
+}
+
 /* Clickable state */
 .muka-avatar--clickable {
   cursor: pointer;
@@ -14473,6 +14781,16 @@ button.muka-chat-photo-grid__tile:focus-visible {
   box-sizing: border-box;
 }
 
+.muka-avatar--3xs .muka-avatar__status {
+  width: var(--avatar-status-size-3xs);
+  height: var(--avatar-status-size-3xs);
+}
+
+.muka-avatar--2xs .muka-avatar__status {
+  width: var(--avatar-status-size-2xs);
+  height: var(--avatar-status-size-2xs);
+}
+
 .muka-avatar--xs .muka-avatar__status {
   width: var(--avatar-status-size-xs);
   height: var(--avatar-status-size-xs);
@@ -14526,56 +14844,130 @@ button.muka-chat-photo-grid__tile:focus-visible {
   background-color: var(--avatar-color-status-away);
 }
 
-/* Avatar Group */
+/* Avatar Group (Figma "Avatar Stack") */
 .muka-avatar-group {
   display: inline-flex;
   align-items: center;
   flex-direction: row;
 }
 
+/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
 .muka-avatar-group__item {
   position: relative;
   display: inline-flex;
-  border: 2px solid var(--color-surface-level1);
-  border-radius: inherit;
+  z-index: 0;
 }
 
-/* Add border radius to match avatar shape */
-.muka-avatar-group__item .muka-avatar--circle {
-  border-radius: var(--avatar-radius-circle);
+.muka-avatar-group__item:hover {
+  z-index: 10;
 }
 
-.muka-avatar-group__item .muka-avatar--square {
-  border-radius: var(--avatar-radius-square);
+/* Grouped avatars get a ring outside their edge, drawn as a shadow so it
+   does not change the avatar's size or the overlap */
+.muka-avatar-group__item .muka-avatar {
+  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);
+   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); }
+.muka-avatar-group--2xs { --muka-avatar-group-size: var(--avatar-size-2xs); }
+.muka-avatar-group--xs { --muka-avatar-group-size: var(--avatar-size-xs); }
+.muka-avatar-group--sm { --muka-avatar-group-size: var(--avatar-size-sm); }
+.muka-avatar-group--md { --muka-avatar-group-size: var(--avatar-size-md); }
+.muka-avatar-group--lg { --muka-avatar-group-size: var(--avatar-size-lg); }
+.muka-avatar-group--xl { --muka-avatar-group-size: var(--avatar-size-xl); }
+
+.muka-avatar-group--tight { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) * 2 / 3); }
+.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--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--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--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); }
+
+.muka-avatar-group__item:not(:first-child) {
+  margin-left: calc(-1 * var(--muka-avatar-group-overlap));
 }
 
-.muka-avatar-group__item .muka-avatar {
+/* Overflow avatar styling */
+.muka-avatar--overflow {
+  background-color: var(--avatar-color-background-default);
+  color: var(--avatar-color-foreground-default);
+  font-weight: var(--alias-font-brand-weight-semibold);
+}
+
+
+/* Autocomplete */
+/* Autocomplete — Figma Input Autocomplete (Input field + single-line suggestion Menu).
+   The field reuses the Input styles (.muka-input*); only the menu wiring lives here. */
+
+.muka-autocomplete {
+  min-width: 200px;
+}
+
+/* Covers the field's outer edge so the menu matches its full width. The menu
+   is only open while focused, when the field has the bold border. */
+.muka-autocomplete__menu-anchor {
+  position: absolute;
+  inset: calc(-1 * var(--border-width-bold));
+  z-index: 0;
+  margin: 0;
+  padding: 0;
   border: none;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0;
 }
 
-/* Spacing variants for avatar group */
-.muka-avatar-group--tight .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-tight));
+/* Keep the field content above the invisible anchor. */
+.muka-autocomplete__field > :not(.muka-autocomplete__menu-anchor) {
+  position: relative;
+  z-index: 1;
 }
 
-.muka-avatar-group--normal .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-normal));
+/* Figma: the menu is as wide as the field (never below the menu min-width token). */
+.muka-autocomplete__menu {
+  width: var(--radix-dropdown-menu-trigger-width);
+  max-width: calc(100vw - 2rem);
 }
 
-/* Z-index stacking for overlap effect */
-.muka-avatar-group__item {
-  z-index: 0;
+/* Suggestions are single-line; long labels truncate. */
+.muka-autocomplete__menu .muka-menu__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.muka-avatar-group__item:hover {
-  z-index: 10;
+/* Loading and empty rows: menu-row geometry, not selectable. */
+.muka-autocomplete__status {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  min-height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
 }
 
-/* Overflow avatar styling */
-.muka-avatar--overflow {
-  background-color: var(--avatar-color-background-default);
-  color: var(--avatar-color-foreground-default);
-  font-weight: var(--alias-font-brand-weight-semibold);
+.muka-autocomplete__footer {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
 }