@revikornmann/muka-ui 0.27.1 → 0.27.3

package/dist/styles/components/Avatar.css

@@ -7,7 +7,8 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  overflow: hidden;
+  /* No overflow clipping: the status dot sits on the edge. The image and the
+     loading shimmer round themselves to the avatar shape instead. */
   user-select: none;
   vertical-align: middle;
   background-color: var(--avatar-color-background-default);
@@ -80,9 +81,10 @@
   border-radius: var(--avatar-radius-square-sm);
 }
 
-/* 4xs is too small for initials, the fallback icon or a status dot:
+/* 4xs is too small for initials, an icon, 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__icon,
 .muka-avatar--4xs .muka-avatar__fallback,
 .muka-avatar--4xs .muka-avatar__status {
   display: none;
@@ -118,38 +120,59 @@
 .muka-avatar__skeleton {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
   background: linear-gradient(
     90deg,
     transparent 0%,
     var(--color-surface-level1) 50%,
     transparent 100%
-  );
+  ) no-repeat;
+  background-size: 50% 100%;
   animation: avatar-loading 1.5s ease-in-out infinite;
 }
 
+/* The highlight sweeps by background position, so it stays inside the
+   rounded shape without the avatar clipping its overflow */
 @keyframes avatar-loading {
   0% {
-    transform: translateX(-100%);
+    background-position: -100% 0;
   }
   100% {
-    transform: translateX(100%);
+    background-position: 200% 0;
   }
 }
 
 /* Avatar content */
 .muka-avatar__image {
+  border-radius: inherit;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
+/* Icon slot: a fixed icon size per avatar size, in the initials colour
+   (subtle text) */
 .muka-avatar__icon {
-  width: 60%;
-  height: 60%;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--avatar-color-foreground-default);
+}
+
+.muka-avatar--3xs .muka-avatar__icon { width: var(--avatar-icon-size-3xs); height: var(--avatar-icon-size-3xs); }
+.muka-avatar--2xs .muka-avatar__icon { width: var(--avatar-icon-size-2xs); height: var(--avatar-icon-size-2xs); }
+.muka-avatar--xs .muka-avatar__icon { width: var(--avatar-icon-size-xs); height: var(--avatar-icon-size-xs); }
+.muka-avatar--sm .muka-avatar__icon { width: var(--avatar-icon-size-sm); height: var(--avatar-icon-size-sm); }
+.muka-avatar--md .muka-avatar__icon { width: var(--avatar-icon-size-md); height: var(--avatar-icon-size-md); }
+.muka-avatar--lg .muka-avatar__icon { width: var(--avatar-icon-size-lg); height: var(--avatar-icon-size-lg); }
+.muka-avatar--xl .muka-avatar__icon { width: var(--avatar-icon-size-xl); height: var(--avatar-icon-size-xl); }
+
+/* A Muka Icon fills the slot and takes its colour (its own `color` prop still wins) */
+.muka-avatar__icon .muka-icon {
+  width: 100%;
+  height: 100%;
+  color: inherit;
 }
 
 .muka-avatar__icon svg {
@@ -256,9 +279,12 @@
 
 /* Avatar Group (Figma "Avatar Stack") */
 .muka-avatar-group {
+  position: relative;
   display: inline-flex;
   align-items: center;
   flex-direction: row;
+  /* Never stretch to a grid cell or column, so the badge stays on the last avatar */
+  width: fit-content;
 }
 
 /* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
@@ -278,7 +304,7 @@
   box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
 }
 
-/* Overlap. Figma specifies exact values for 48 / 32 / 24px avatars (sm / 2xs / 3xs);
+/* Overlap. Figma specifies exact values for 40 / 32 / 24px avatars (xs / 2xs / 3xs);
    other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
 .muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
 .muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
@@ -293,13 +319,13 @@
 .muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
 .muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
 
-.muka-avatar-group--tight.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-sm); }
+.muka-avatar-group--tight.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-xs); }
 .muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
 .muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
-.muka-avatar-group--compact.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-sm); }
+.muka-avatar-group--compact.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-xs); }
 .muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
 .muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
-.muka-avatar-group--spacious.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-sm); }
+.muka-avatar-group--spacious.muka-avatar-group--xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-xs); }
 .muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
 .muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
 
@@ -307,6 +333,14 @@
   margin-left: calc(-1 * var(--muka-avatar-group-overlap));
 }
 
+/* Badge: a BadgeNumber on the top-right corner of the stack, above every avatar */
+.muka-avatar-group__badge {
+  position: absolute;
+  top: calc(-1 * var(--avatar-group-badge-offset));
+  right: calc(-1 * var(--avatar-group-badge-offset));
+  z-index: 20;
+}
+
 /* Overflow avatar styling */
 .muka-avatar--overflow {
   background-color: var(--avatar-color-background-default);