@revikornmann/muka-ui 0.26.0 → 0.27.0

package/dist/styles/wireframe-dark.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: #e54d4e;
   --color-state-error-contrast: #fea6a6;
   --color-state-error-background: #3d181e;
+  --color-state-error-solid-default: #e54d4e;
+  --color-state-error-solid-hover: #f56565;
+  --color-state-error-solid-pressed: #f56565;
   --color-state-info-default: #0090ff;
   --color-state-info-contrast: #70b8ff;
   --color-state-info-background: #0d2847;
@@ -1275,6 +1280,9 @@ body {
   --alias-color-state-error-contrast: #fea6a6;
   --alias-color-state-error-default: #e54d4e;
   --alias-color-state-error-muted: #3d181e;
+  --alias-color-state-error-solid-default: #e54d4e;
+  --alias-color-state-error-solid-hover: #f56565;
+  --alias-color-state-error-solid-pressed: #f56565;
   --alias-color-state-error-surface-level0: #2c1419;
   --alias-color-state-error-surface-level1: #3d181e;
   --alias-color-state-error-surface-level2: #4a1a22;
@@ -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: #e54d4e;
+  --button-color-destructive-background-hover: #f56565;
+  --button-color-destructive-background-pressed: #f56565;
+  --button-color-destructive-background-disabled: #313131;
+  --button-color-destructive-foreground-default: #111111;
+  --button-color-destructive-foreground-hover: #111111;
+  --button-color-destructive-foreground-pressed: #111111;
+  --button-color-destructive-foreground-disabled: #606060;
+  --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: #2a2a2a;
   --button-color-secondary-background-hover: #2a2a2a;
   --button-color-secondary-background-pressed: #313131;
@@ -1935,7 +1955,7 @@ body {
   --contextmenu-trigger-outline-color: #b4b4b4;
   --contextmenu-trigger-outline-offset: 0.25rem;
   --tabs-trigger-color-default-background: #2a2a2a;
-  --tabs-trigger-color-default-foreground: #eeeeee;
+  --tabs-trigger-color-default-foreground: #7b7b7b;
   --tabs-trigger-color-default-border: #606060;
   --tabs-trigger-color-hover-background: #2a2a2a;
   --tabs-trigger-color-hover-foreground: #eeeeee;
@@ -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: #111111;
   --tabs-panel-border: #606060;
+  --tabs-indicator-color: #b4b4b4;
+  --tabs-indicator-height-sm: 2px;
+  --tabs-indicator-height-md: 3px;
+  --tabs-indicator-height-lg: 4px;
+  --tabs-list-padding-x: 1rem;
   --separator-color-default: #313131;
   --separator-color-contrast: #606060;
   --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: #313131;
   --avatar-color-foreground-default: #eeeeee;
   --avatar-color-foreground-muted: #606060;
-  --avatar-color-border-default: #313131;
   --avatar-color-status-online: #30a46c;
   --avatar-color-status-offline: #606060;
   --avatar-color-status-busy: #e54d4e;
   --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: #111111;
+  --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: #eeeeee;
   --toast-color-info-foreground: #111111;
   --toast-color-info-accent: #0d2847;
@@ -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 {
 }
 
 
-/* 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);
-}
+/* Toggle */
+/* Toggle Component Styles - Using Muka Design Tokens */
 
-.muka-text-link--default:hover,
-.muka-text-link--default:focus-visible {
-  color: var(--color-text-action-hover);
+/* Wrapper container */
+.muka-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  padding: var(--spacing-4) 0;
 }
 
-.muka-text-link--default:active {
-  color: var(--color-text-action-pressed);
+.muka-toggle--with-caption {
+  padding: var(--spacing-5) 0;
 }
 
-/* ─── 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-toggle--disabled {
+  opacity: 0.6;
 }
 
-.muka-text-link--subtle:hover,
-.muka-text-link--subtle:focus-visible,
-.muka-text-link--subtle:active {
+/* 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);
 }
 
-/* ─── 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;
-  }
+.muka-toggle__icon svg {
+  width: 100%;
+  height: 100%;
 }
 
-
-/* Textarea */
-/* Textarea Component Styles - Using Muka Design Tokens */
-
-.muka-textarea {
-  display: inline-flex;
+/* Content area (label + caption) */
+.muka-toggle__content {
+  display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-1);
 }
 
 /* Label */
-.muka-textarea__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-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 {
+.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);
-}
-
-/* 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-toggle--disabled .muka-toggle__label {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
 }
 
-.muka-textarea__field--md {
-  min-height: var(--input-textarea-height-default);
-  border-radius: var(--input-field-radius-md);
+/* 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--lg {
-  min-height: var(--input-textarea-height-lg);
-  border-radius: var(--input-field-radius-lg);
+/* Switch container */
+.muka-toggle__switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 
-/* 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);
+.muka-toggle--disabled .muka-toggle__switch {
+  cursor: not-allowed;
 }
 
-/* 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);
+/* 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;
 }
 
-/* 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);
+/* 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;
 }
 
-.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);
+/* 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;
 }
 
-.muka-textarea__native::placeholder {
-  color: var(--color-text-subtle-default);
+/* Focus state */
+.muka-toggle__input:focus-visible + .muka-toggle__track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
 }
 
-.muka-textarea__field--disabled .muka-textarea__native {
-  color: var(--input-field-color-disabled-foreground);
-  cursor: not-allowed;
+/* Checked (on) state */
+.muka-toggle__input:checked + .muka-toggle__track {
+  background-color: var(--toggle-track-color-on);
 }
 
-/* Footer (helper/error + count) */
-.muka-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-2);
+.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__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;
+/* Disabled state */
+.muka-toggle--disabled .muka-toggle__track {
+  background-color: var(--toggle-track-color-disabled);
+  box-shadow: none;
 }
 
-.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-toggle--disabled .muka-toggle__knob {
+  background-color: var(--toggle-knob-color-disabled);
+  box-shadow: none;
 }
 
-.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;
+/* 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) {
@@ -4179,6 +3999,252 @@ body {
 }
 
 
+/* 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-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 */
 
@@ -4444,198 +4510,90 @@ body {
 .muka-table__header-cell {
   vertical-align: middle;
 }
-
-/* Size: Small */
-.muka-table--sm .muka-table__cell,
-.muka-table--sm .muka-table__header-cell {
-  padding: var(--table-cell-padding-y-sm) var(--table-cell-padding-x-sm);
-}
-
-/* Size: Medium */
-.muka-table--md .muka-table__cell,
-.muka-table--md .muka-table__header-cell {
-  padding: var(--table-cell-padding-y-md) var(--table-cell-padding-x-md);
-}
-
-/* Size: Large */
-.muka-table--lg .muka-table__cell,
-.muka-table--lg .muka-table__header-cell {
-  padding: var(--table-cell-padding-y-lg) var(--table-cell-padding-x-lg);
-}
-
-/* Alignment */
-.muka-table__cell--left,
-.muka-table__header-cell--left {
-  text-align: left;
-}
-
-.muka-table__cell--center,
-.muka-table__header-cell--center {
-  text-align: center;
-}
-
-.muka-table__cell--right,
-.muka-table__header-cell--right {
-  text-align: right;
-}
-
-/* ========================================
-   HEADER CELLS
-   ======================================== */
-
-.muka-table__header-cell {
-  font-family: var(--text-body-base-bold-fontFamily);
-  font-weight: var(--text-body-base-bold-fontWeight);
-  font-size: var(--text-body-base-bold-fontSize);
-  line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
-  white-space: nowrap;
-}
-
-.muka-table__header-content {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-/* Sortable */
-.muka-table__header-cell--sortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.muka-table__header-cell--sortable:hover {
-  color: var(--color-text-default-default);
-}
-
-.muka-table__header-cell--sortable:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: -2px;
-}
-
-/* Sort icon */
-.muka-table__sort-icon {
-  width: 1em;
-  height: 1em;
-  opacity: 0.4;
-  transition: opacity 0.2s, transform 0.2s;
-}
-
-.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
-  opacity: 0.7;
-}
-
-.muka-table__sort-icon--asc,
-.muka-table__sort-icon--desc {
-  opacity: 1;
-}
-
-
-/* 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;
+
+/* Size: Small */
+.muka-table--sm .muka-table__cell,
+.muka-table--sm .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-sm) var(--table-cell-padding-x-sm);
 }
 
-.muka-swipe-actions__panel--left {
-  left: 0;
+/* Size: Medium */
+.muka-table--md .muka-table__cell,
+.muka-table--md .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-md) var(--table-cell-padding-x-md);
 }
 
-.muka-swipe-actions__panel--right {
-  right: 0;
+/* Size: Large */
+.muka-table--lg .muka-table__cell,
+.muka-table--lg .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-lg) var(--table-cell-padding-x-lg);
 }
 
-/* ─── Single action button ─────────────────────────────── */
+/* Alignment */
+.muka-table__cell--left,
+.muka-table__header-cell--left {
+  text-align: left;
+}
 
-.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-table__cell--center,
+.muka-table__header-cell--center {
+  text-align: center;
 }
 
-.muka-swipe-actions__button:hover {
-  filter: brightness(0.95);
+.muka-table__cell--right,
+.muka-table__header-cell--right {
+  text-align: right;
 }
 
-.muka-swipe-actions__button:focus-visible {
-  outline: 2px solid var(--color-action-default);
-  outline-offset: -2px;
+/* ========================================
+   HEADER CELLS
+   ======================================== */
+
+.muka-table__header-cell {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+  white-space: nowrap;
 }
 
-.muka-swipe-actions__button-icon {
+.muka-table__header-content {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: var(--spacing-1);
 }
 
-/* ─── Color variants ───────────────────────────────────── */
+/* Sortable */
+.muka-table__header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
 
-.muka-swipe-actions__button--neutral {
-  background-color: var(--color-surface-level2);
+.muka-table__header-cell--sortable:hover {
   color: var(--color-text-default-default);
 }
 
-.muka-swipe-actions__button--primary {
-  background-color: var(--color-action-default);
-  color: var(--color-text-default-inverse);
+.muka-table__header-cell--sortable:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
 }
 
-.muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default);
-  color: var(--color-text-default-inverse);
+/* Sort icon */
+.muka-table__sort-icon {
+  width: 1em;
+  height: 1em;
+  opacity: 0.4;
+  transition: opacity 0.2s, transform 0.2s;
 }
 
-.muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default);
-  color: var(--color-text-default-default);
+.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
+  opacity: 0.7;
 }
 
-.muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default);
-  color: var(--color-text-default-inverse);
+.muka-table__sort-icon--asc,
+.muka-table__sort-icon--desc {
+  opacity: 1;
 }
 
 
@@ -4802,6 +4760,114 @@ 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);
+}
+
+
 /* SocialSignInButton */
 /*
  * SocialSignInButton lockup colors are provider-mandated (Apple HIG /
@@ -13570,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);
@@ -14503,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);
@@ -14548,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;
@@ -14651,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);
@@ -14704,44 +14844,17 @@ 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;
-}
-
-/* Add border radius to match avatar shape */
-.muka-avatar-group__item .muka-avatar--circle {
-  border-radius: var(--avatar-radius-circle);
-}
-
-.muka-avatar-group__item .muka-avatar--square {
-  border-radius: var(--avatar-radius-square);
-}
-
-.muka-avatar-group__item .muka-avatar {
-  border: none;
-}
-
-/* Spacing variants for avatar group */
-.muka-avatar-group--tight .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-tight));
-}
-
-.muka-avatar-group--normal .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-normal));
-}
-
-/* Z-index stacking for overlap effect */
-.muka-avatar-group__item {
   z-index: 0;
 }
 
@@ -14749,6 +14862,41 @@ button.muka-chat-photo-grid__tile:focus-visible {
   z-index: 10;
 }
 
+/* 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));
+}
+
 /* Overflow avatar styling */
 .muka-avatar--overflow {
   background-color: var(--avatar-color-background-default);