@revikornmann/muka-ui 0.26.0 → 0.27.1

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;
@@ -3766,88 +3809,6 @@ 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);
-}
-
-.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;
-  }
-}
-
-
 /* Textarea */
 /* Textarea Component Styles - Using Muka Design Tokens */
 
@@ -4012,6 +3973,88 @@ 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);
+}
+
+.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;
+  }
+}
+
+
 /* Tabs */
 /* Tabs Component Styles - Clean underline style tabs matching Figma */
 
@@ -4043,12 +4086,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 +4109,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 +4119,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 +4128,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 +4153,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 +4162,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 +4179,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) {
@@ -10722,6 +10788,38 @@ li.muka-listitem {
 }
 
 
+/* DatePicker */
+/* DatePicker — compact native date field. */
+/* Field/label/helper styling is inherited from ../Input/Input.css. */
+
+/* Adopt the field typography on the native date input. */
+.muka-datepicker__field .muka-input__native {
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-datepicker__field--sm .muka-input__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+/* Tint the browser calendar indicator to match the field foreground. */
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.muka-datepicker__field .muka-input__native:disabled {
+  cursor: not-allowed;
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -10990,38 +11088,6 @@ li.muka-listitem {
 }
 
 
-/* DatePicker */
-/* DatePicker — compact native date field. */
-/* Field/label/helper styling is inherited from ../Input/Input.css. */
-
-/* Adopt the field typography on the native date input. */
-.muka-datepicker__field .muka-input__native {
-  font-family: var(--text-input-md-fontFamily);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-}
-
-.muka-datepicker__field--sm .muka-input__native {
-  font-family: var(--text-input-sm-fontFamily);
-  font-size: var(--text-input-sm-fontSize);
-  line-height: var(--text-input-sm-lineHeight);
-}
-
-/* Tint the browser calendar indicator to match the field foreground. */
-.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  opacity: 0.6;
-}
-
-.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
-  opacity: 1;
-}
-
-.muka-datepicker__field .muka-input__native:disabled {
-  cursor: not-allowed;
-}
-
-
 /* DataTable */
 /* DataTable Component Styles - Using Muka Design Tokens */
 
@@ -12339,17 +12405,139 @@ li.muka-listitem {
 }
 
 
-/* Checkbox */
-/* Checkbox Component Styles - Using Muka Design Tokens */
+/* ChatPhotoGrid */
+/* ChatPhotoGrid Component Styles */
 
-/* Wrapper - clickable label container */
-.muka-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  cursor: pointer;
-  user-select: none;
-}
+/*
+ * The grid clips to its own radius and the tiles stay square, so only the four
+ * outer corners round — matching the Figma "Wrapper" frame (5225:1394).
+ */
+.muka-chat-photo-grid {
+  display: grid;
+  gap: var(--chatphotogrid-gap);
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--chatphotogrid-radius);
+}
+
+/* ─── Tiles ────────────────────────────────────────────── */
+
+.muka-chat-photo-grid__tile {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--chatphotogrid-color-placeholder);
+  aspect-ratio: 1 / 1;
+}
+
+button.muka-chat-photo-grid__tile {
+  cursor: pointer;
+  appearance: none;
+}
+
+button.muka-chat-photo-grid__tile:focus-visible {
+  outline: var(--border-width-bold) solid var(--color-border-focus);
+  /* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
+  outline-offset: calc(-1 * var(--border-width-bold));
+}
+
+.muka-chat-photo-grid__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─── Overflow tile ────────────────────────────────────── */
+
+.muka-chat-photo-grid__overflow {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--chatphotogrid-color-overflow-background);
+  color: var(--chatphotogrid-color-overflow-foreground);
+  font-family: var(--text-body-2xl-regular-fontFamily);
+  font-weight: var(--text-body-2xl-regular-fontWeight);
+  font-size: var(--text-body-2xl-regular-fontSize);
+  line-height: var(--text-body-2xl-regular-lineHeight);
+}
+
+/* ─── Layouts ──────────────────────────────────────────── */
+
+.muka-chat-photo-grid--1 {
+  grid-template-columns: 1fr;
+}
+
+.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
+  aspect-ratio: 4 / 3;
+}
+
+.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
+  aspect-ratio: 3 / 4;
+}
+
+.muka-chat-photo-grid--2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.muka-chat-photo-grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.muka-chat-photo-grid--4 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
+.muka-chat-photo-grid--5 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
+  grid-column: span 3;
+}
+
+.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
+  grid-column: span 2;
+}
+
+.muka-chat-photo-grid--6,
+.muka-chat-photo-grid--overflow {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ─── Print ────────────────────────────────────────────── */
+
+@media print {
+  .muka-chat-photo-grid {
+    break-inside: avoid;
+  }
+
+  .muka-chat-photo-grid__image {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+}
+
+
+/* Checkbox */
+/* Checkbox Component Styles - Using Muka Design Tokens */
+
+/* Wrapper - clickable label container */
+.muka-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+}
 
 .muka-checkbox--disabled {
   cursor: not-allowed;
@@ -12506,128 +12694,6 @@ li.muka-listitem {
 }
 
 
-/* ChatPhotoGrid */
-/* ChatPhotoGrid Component Styles */
-
-/*
- * The grid clips to its own radius and the tiles stay square, so only the four
- * outer corners round — matching the Figma "Wrapper" frame (5225:1394).
- */
-.muka-chat-photo-grid {
-  display: grid;
-  gap: var(--chatphotogrid-gap);
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  border-radius: var(--chatphotogrid-radius);
-}
-
-/* ─── Tiles ────────────────────────────────────────────── */
-
-.muka-chat-photo-grid__tile {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background-color: var(--chatphotogrid-color-placeholder);
-  aspect-ratio: 1 / 1;
-}
-
-button.muka-chat-photo-grid__tile {
-  cursor: pointer;
-  appearance: none;
-}
-
-button.muka-chat-photo-grid__tile:focus-visible {
-  outline: var(--border-width-bold) solid var(--color-border-focus);
-  /* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
-  outline-offset: calc(-1 * var(--border-width-bold));
-}
-
-.muka-chat-photo-grid__image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* ─── Overflow tile ────────────────────────────────────── */
-
-.muka-chat-photo-grid__overflow {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--chatphotogrid-color-overflow-background);
-  color: var(--chatphotogrid-color-overflow-foreground);
-  font-family: var(--text-body-2xl-regular-fontFamily);
-  font-weight: var(--text-body-2xl-regular-fontWeight);
-  font-size: var(--text-body-2xl-regular-fontSize);
-  line-height: var(--text-body-2xl-regular-lineHeight);
-}
-
-/* ─── Layouts ──────────────────────────────────────────── */
-
-.muka-chat-photo-grid--1 {
-  grid-template-columns: 1fr;
-}
-
-.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
-  aspect-ratio: 4 / 3;
-}
-
-.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
-  aspect-ratio: 3 / 4;
-}
-
-.muka-chat-photo-grid--2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.muka-chat-photo-grid--3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.muka-chat-photo-grid--4 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
-.muka-chat-photo-grid--5 {
-  grid-template-columns: repeat(6, 1fr);
-}
-
-.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
-  grid-column: span 3;
-}
-
-.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
-  grid-column: span 2;
-}
-
-.muka-chat-photo-grid--6,
-.muka-chat-photo-grid--overflow {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-/* ─── Print ────────────────────────────────────────────── */
-
-@media print {
-  .muka-chat-photo-grid {
-    break-inside: avoid;
-  }
-
-  .muka-chat-photo-grid__image {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-}
-
-
 /* ChatMessageStack */
 /* ChatMessageStack Component Styles */
 
@@ -13570,10 +13636,43 @@ button.muka-chat-photo-grid__tile:focus-visible {
   opacity: 1; /* Remove opacity since we have proper disabled tokens */
 }
 
-/* Secondary variant - supporting actions, no border, only bottom inner shadow */
-.muka-button--secondary {
-  background-color: var(--button-color-secondary-background-default);
-  color: var(--button-color-secondary-foreground-default);
+/* 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);
+  color: var(--button-color-secondary-foreground-default);
   box-shadow: var(--button-color-secondary-shadow-default);
 }
 
@@ -13880,6 +13979,114 @@ button.muka-chat-photo-grid__tile:focus-visible {
 }
 
 
+/* BadgeNumber */
+/* BadgeNumber Component Styles - Using Muka Design Tokens */
+
+.muka-badge-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/*
+ * Sizes — fixed height, matching min-width (so a single digit renders as a
+ * circle), horizontal padding, and bold label typography. Vertical centering
+ * is handled by the fixed height + align-items: center.
+ */
+.muka-badge-number--2xs {
+  height: var(--badge-number-size-2xs);
+  min-width: var(--badge-number-size-2xs);
+  padding: 0 var(--badge-number-padding-2xs);
+  font-family: var(--text-label-xs-bold-fontFamily);
+  font-weight: var(--text-label-xs-bold-fontWeight);
+  font-size: var(--text-label-xs-bold-fontSize);
+  line-height: var(--text-label-xs-bold-lineHeight);
+}
+
+.muka-badge-number--xs {
+  height: var(--badge-number-size-xs);
+  min-width: var(--badge-number-size-xs);
+  padding: 0 var(--badge-number-padding-xs);
+  font-family: var(--text-label-sm-bold-fontFamily);
+  font-weight: var(--text-label-sm-bold-fontWeight);
+  font-size: var(--text-label-sm-bold-fontSize);
+  line-height: var(--text-label-sm-bold-lineHeight);
+}
+
+.muka-badge-number--sm {
+  height: var(--badge-number-size-sm);
+  min-width: var(--badge-number-size-sm);
+  padding: 0 var(--badge-number-padding-sm);
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+}
+
+.muka-badge-number--md {
+  height: var(--badge-number-size-md);
+  min-width: var(--badge-number-size-md);
+  padding: 0 var(--badge-number-padding-md);
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+}
+
+.muka-badge-number--lg {
+  height: var(--badge-number-size-lg);
+  min-width: var(--badge-number-size-lg);
+  padding: 0 var(--badge-number-padding-lg);
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+}
+
+.muka-badge-number__label {
+  /*
+   * The badge sets a tight line-height for compact sizing, which would clip
+   * glyph descenders; give the label a roomier line-height. Vertical centering
+   * is unaffected because the badge height is fixed and content is centered.
+   */
+  line-height: normal;
+}
+
+/* Neutral variant */
+.muka-badge-number--neutral {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+/* Info variant */
+.muka-badge-number--info {
+  background-color: var(--color-state-info-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Success variant */
+.muka-badge-number--success {
+  background-color: var(--color-state-success-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Warning variant */
+.muka-badge-number--warning {
+  background-color: var(--color-state-warning-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Error variant */
+.muka-badge-number--error {
+  background-color: var(--color-state-error-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+
 /* BottomBar */
 /* BottomBar Component Styles */
 
@@ -14196,114 +14403,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
 }
 
 
-/* BadgeNumber */
-/* BadgeNumber Component Styles - Using Muka Design Tokens */
-
-.muka-badge-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-full);
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-/*
- * Sizes — fixed height, matching min-width (so a single digit renders as a
- * circle), horizontal padding, and bold label typography. Vertical centering
- * is handled by the fixed height + align-items: center.
- */
-.muka-badge-number--2xs {
-  height: var(--badge-number-size-2xs);
-  min-width: var(--badge-number-size-2xs);
-  padding: 0 var(--badge-number-padding-2xs);
-  font-family: var(--text-label-xs-bold-fontFamily);
-  font-weight: var(--text-label-xs-bold-fontWeight);
-  font-size: var(--text-label-xs-bold-fontSize);
-  line-height: var(--text-label-xs-bold-lineHeight);
-}
-
-.muka-badge-number--xs {
-  height: var(--badge-number-size-xs);
-  min-width: var(--badge-number-size-xs);
-  padding: 0 var(--badge-number-padding-xs);
-  font-family: var(--text-label-sm-bold-fontFamily);
-  font-weight: var(--text-label-sm-bold-fontWeight);
-  font-size: var(--text-label-sm-bold-fontSize);
-  line-height: var(--text-label-sm-bold-lineHeight);
-}
-
-.muka-badge-number--sm {
-  height: var(--badge-number-size-sm);
-  min-width: var(--badge-number-size-sm);
-  padding: 0 var(--badge-number-padding-sm);
-  font-family: var(--text-label-md-bold-fontFamily);
-  font-weight: var(--text-label-md-bold-fontWeight);
-  font-size: var(--text-label-md-bold-fontSize);
-  line-height: var(--text-label-md-bold-lineHeight);
-}
-
-.muka-badge-number--md {
-  height: var(--badge-number-size-md);
-  min-width: var(--badge-number-size-md);
-  padding: 0 var(--badge-number-padding-md);
-  font-family: var(--text-label-lg-bold-fontFamily);
-  font-weight: var(--text-label-lg-bold-fontWeight);
-  font-size: var(--text-label-lg-bold-fontSize);
-  line-height: var(--text-label-lg-bold-lineHeight);
-}
-
-.muka-badge-number--lg {
-  height: var(--badge-number-size-lg);
-  min-width: var(--badge-number-size-lg);
-  padding: 0 var(--badge-number-padding-lg);
-  font-family: var(--text-label-2xl-bold-fontFamily);
-  font-weight: var(--text-label-2xl-bold-fontWeight);
-  font-size: var(--text-label-2xl-bold-fontSize);
-  line-height: var(--text-label-2xl-bold-lineHeight);
-}
-
-.muka-badge-number__label {
-  /*
-   * The badge sets a tight line-height for compact sizing, which would clip
-   * glyph descenders; give the label a roomier line-height. Vertical centering
-   * is unaffected because the badge height is fixed and content is centered.
-   */
-  line-height: normal;
-}
-
-/* Neutral variant */
-.muka-badge-number--neutral {
-  background-color: var(--color-surface-level1);
-  color: var(--color-text-default-default);
-}
-
-/* Info variant */
-.muka-badge-number--info {
-  background-color: var(--color-state-info-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Success variant */
-.muka-badge-number--success {
-  background-color: var(--color-state-success-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Warning variant */
-.muka-badge-number--warning {
-  background-color: var(--color-state-warning-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-/* Error variant */
-.muka-badge-number--error {
-  background-color: var(--color-state-error-contrast);
-  color: var(--color-text-default-inverse);
-}
-
-
 /* Badge */
 /* Badge Component Styles - Using Muka Design Tokens */
 
@@ -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);