@revikornmann/muka-ui 0.26.0 → 0.27.0

package/dist/styles/components/Avatar.css

@@ -12,12 +12,29 @@
   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);
@@ -57,6 +74,20 @@
   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;
@@ -160,6 +191,16 @@
   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);
@@ -213,44 +254,17 @@
   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;
 }
 
@@ -258,6 +272,41 @@
   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);

package/dist/styles/components/Button.css

@@ -116,6 +116,39 @@
   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);

package/dist/styles/components/Tabs.css

@@ -28,12 +28,17 @@
   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;
@@ -46,8 +51,8 @@
   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);
@@ -56,8 +61,8 @@
 
 /* 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);
@@ -65,8 +70,8 @@
 }
 
 .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);
@@ -90,8 +95,8 @@
   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;
@@ -99,6 +104,13 @@
   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;
@@ -109,18 +121,29 @@
   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) {