astralkit 0.2.0 → 0.3.1

package/primitives/avatar.css

@@ -0,0 +1,410 @@
+
+
+/* Avatar primitives -- base, sizes, colors, shapes, groups, progress, rings, faces */
+
+
+
+/* Avatar base */
+.ak-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  background: var(--color-ak-surface-2);
+  color: var(--color-ak-text-secondary);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  border: none;
+  /* Fix jagged circle edge from overflow:hidden + border-radius.
+     Inset shadow acts as an AA layer at the clip boundary. */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+.ak-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  filter: grayscale(100%);
+}
+
+/* Size modifiers */
+.ak-avatar--md  { width: var(--size-ak-avatar-md);  height: var(--size-ak-avatar-md);  font-size: var(--text-ak-avatar-md); font-weight: 600; }
+.ak-avatar--md i { font-size: var(--size-ak-icon-md); }
+.ak-avatar--lg  { width: var(--size-ak-avatar-lg);  height: var(--size-ak-avatar-lg);  font-size: var(--text-ak-avatar-lg); font-weight: 600; }
+.ak-avatar--lg i { font-size: var(--size-ak-icon-lg); }
+.ak-avatar--xl  { width: var(--size-ak-avatar-xl);  height: var(--size-ak-avatar-xl);  font-size: var(--text-ak-avatar-xl); font-weight: 500; }
+.ak-avatar--xl i { font-size: var(--size-ak-icon-xl); }
+.ak-avatar--2xl { width: var(--size-ak-avatar-2xl); height: var(--size-ak-avatar-2xl); font-size: var(--text-ak-avatar-2xl); font-weight: 500; }
+.ak-avatar--2xl i { font-size: var(--size-ak-icon-2xl); }
+.ak-avatar--3xl { width: var(--size-ak-avatar-3xl); height: var(--size-ak-avatar-3xl); font-size: var(--text-ak-avatar-3xl); font-weight: 500; }
+.ak-avatar--3xl i { font-size: var(--size-ak-icon-3xl); }
+
+/* Color variants */
+.ak-avatar--primary { background: var(--color-ak-primary); color: var(--color-ak-on-primary); }
+.ak-avatar--success { background: var(--color-ak-success-subtle); color: var(--color-ak-success-text); }
+.ak-avatar--warning { background: var(--color-ak-warning-subtle); color: var(--color-ak-warning-text); }
+.ak-avatar--danger  { background: var(--color-ak-danger-subtle); color: var(--color-ak-danger-text); }
+.ak-avatar--info    { background: var(--color-ak-info-subtle); color: var(--color-ak-info-text); }
+.ak-avatar--surface { background: var(--color-ak-surface-2); color: var(--color-ak-text-secondary); }
+
+/* Shape variants */
+.ak-avatar--rounded { border-radius: var(--radius-ak-lg); }
+.ak-avatar--square  { border-radius: var(--radius-ak-sm); }
+
+/* Interactive avatar */
+.ak-avatar--interactive {
+  cursor: pointer;
+  transition: transform var(--duration-ak-fast) var(--ease-ak-default),
+              box-shadow var(--duration-ak-fast) var(--ease-ak-default);
+}
+.ak-avatar--interactive:hover { transform: scale(1.08); }
+.ak-avatar--interactive:active { transform: scale(0.96); }
+.ak-avatar--interactive:focus-visible {
+  outline: 2px solid var(--color-ak-border-focus);
+  outline-offset: 2px;
+}
+
+/* Ring variants — outline + box-shadow approach eliminates the subpixel
+   bleed artifact that occurs with multi-layer box-shadows.
+   - box-shadow: white gap (covers the element edge cleanly)
+   - outline: colored ring (separate compositing layer, no bleed) */
+.ak-avatar--ring-primary { box-shadow: 0 0 0 var(--ak-ring-gap, 3px) var(--color-ak-bg); outline: var(--ak-ring-width, 3px) solid var(--color-ak-primary); outline-offset: var(--ak-ring-gap, 3px); }
+.ak-avatar--ring-success { box-shadow: 0 0 0 var(--ak-ring-gap, 3px) var(--color-ak-bg); outline: var(--ak-ring-width, 3px) solid var(--color-ak-success); outline-offset: var(--ak-ring-gap, 3px); }
+.ak-avatar--ring-warning { box-shadow: 0 0 0 var(--ak-ring-gap, 3px) var(--color-ak-bg); outline: var(--ak-ring-width, 3px) solid var(--color-ak-warning); outline-offset: var(--ak-ring-gap, 3px); }
+.ak-avatar--ring-info    { box-shadow: 0 0 0 var(--ak-ring-gap, 3px) var(--color-ak-bg); outline: var(--ak-ring-width, 3px) solid var(--color-ak-info); outline-offset: var(--ak-ring-gap, 3px); }
+.ak-avatar--ring-border  { box-shadow: 0 0 0 1px var(--color-ak-border); }
+
+/* Scale ring per avatar size */
+.ak-avatar--md[class*="ak-avatar--ring-"]  { --ak-ring-gap: 2px; --ak-ring-width: 2px; }
+.ak-avatar--lg[class*="ak-avatar--ring-"]  { --ak-ring-gap: 2px; --ak-ring-width: 2px; }
+.ak-avatar--xl[class*="ak-avatar--ring-"]  { --ak-ring-gap: 2px; --ak-ring-width: 3px; }
+.ak-avatar--2xl[class*="ak-avatar--ring-"] { --ak-ring-gap: 3px; --ak-ring-width: 3px; }
+.ak-avatar--3xl[class*="ak-avatar--ring-"] { --ak-ring-gap: 3px; --ak-ring-width: 4px; }
+
+/* Fallback (initials/icon shown when image fails) */
+.ak-avatar__fallback { display: none; }
+.ak-avatar--fallback img { display: none; }
+.ak-avatar--fallback .ak-avatar__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Avatar wrap (positions badges/status relative to avatar) */
+.ak-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
+
+/* Wrap size modifiers for badge/status positioning */
+.ak-avatar-wrap--md .ak-status-dot { width: var(--size-ak-status-md); height: var(--size-ak-status-md); border: var(--size-ak-badge-border-md) solid var(--color-ak-bg); bottom: var(--offset-ak-status-md); right: var(--offset-ak-status-md); }
+.ak-avatar-wrap--md .ak-status-dot--dnd::after { width: 7px; height: 1.5px; }
+.ak-avatar-wrap--md .ak-badge { min-width: var(--size-ak-status-md); height: var(--size-ak-status-md); border: var(--size-ak-badge-border-md) solid var(--color-ak-bg); top: var(--offset-ak-status-md); right: var(--offset-ak-status-md); }
+.ak-avatar-wrap--md .ak-badge--count { min-width: var(--size-ak-badge-md); height: var(--size-ak-badge-md); font-size: var(--text-ak-badge-md); top: var(--offset-ak-badge-md-top, var(--offset-ak-badge-md)); right: var(--offset-ak-badge-md-right, var(--offset-ak-badge-md)); --ak-badge-pad: 2px; }
+.ak-avatar-wrap--md .ak-notif-badge { min-width: var(--size-ak-badge-md); height: var(--size-ak-badge-md); font-size: var(--text-ak-badge-md); top: var(--offset-ak-badge-md); right: var(--offset-ak-badge-md); }
+.ak-avatar-wrap--md .ak-rank-badge { width: var(--size-ak-icon-badge-md); height: var(--size-ak-icon-badge-md); font-size: 0.625rem; border: var(--size-ak-badge-border-md) solid var(--color-ak-bg); top: var(--offset-ak-icon-badge-md); right: var(--offset-ak-icon-badge-md); }
+.ak-avatar-wrap--md .ak-status-icon { width: var(--size-ak-icon-badge-md); height: var(--size-ak-icon-badge-md); border: var(--size-ak-badge-border-md) solid var(--color-ak-bg); bottom: var(--offset-ak-icon-badge-md); right: var(--offset-ak-icon-badge-md); }
+.ak-avatar-wrap--md .ak-status-icon i { font-size: 12px; }
+.ak-avatar-wrap--md .ak-verified-badge { width: var(--size-ak-badge-md); height: var(--size-ak-badge-md); border: var(--size-ak-badge-border-md) solid var(--color-ak-bg); bottom: var(--offset-ak-badge-md-top, var(--offset-ak-badge-md)); right: var(--offset-ak-badge-md-right, var(--offset-ak-badge-md)); }
+.ak-avatar-wrap--md .ak-verified-badge i { font-size: 10px; }
+
+.ak-avatar-wrap--lg .ak-status-dot { width: var(--size-ak-status-lg); height: var(--size-ak-status-lg); border: var(--size-ak-badge-border-lg) solid var(--color-ak-bg); bottom: var(--offset-ak-status-lg); right: var(--offset-ak-status-lg); }
+.ak-avatar-wrap--lg .ak-status-dot--dnd::after { width: 8px; height: 1.5px; }
+.ak-avatar-wrap--lg .ak-badge { min-width: var(--size-ak-status-lg); height: var(--size-ak-status-lg); border: var(--size-ak-badge-border-lg) solid var(--color-ak-bg); top: var(--offset-ak-status-lg); right: var(--offset-ak-status-lg); }
+.ak-avatar-wrap--lg .ak-badge--count { min-width: var(--size-ak-badge-lg); height: var(--size-ak-badge-lg); font-size: var(--text-ak-badge-lg); top: var(--offset-ak-badge-lg-top, var(--offset-ak-badge-lg)); right: var(--offset-ak-badge-lg-right, var(--offset-ak-badge-lg)); --ak-badge-pad: 2px; }
+.ak-avatar-wrap--lg .ak-notif-badge { min-width: var(--size-ak-badge-lg); height: var(--size-ak-badge-lg); font-size: var(--text-ak-badge-lg); top: var(--offset-ak-badge-lg); right: var(--offset-ak-badge-lg); }
+.ak-avatar-wrap--lg .ak-rank-badge { width: var(--size-ak-icon-badge-lg); height: var(--size-ak-icon-badge-lg); font-size: 0.6875rem; border: var(--size-ak-badge-border-lg) solid var(--color-ak-bg); top: var(--offset-ak-icon-badge-lg); right: var(--offset-ak-icon-badge-lg); }
+.ak-avatar-wrap--lg .ak-status-icon { width: var(--size-ak-icon-badge-lg); height: var(--size-ak-icon-badge-lg); border: var(--size-ak-badge-border-lg) solid var(--color-ak-bg); bottom: var(--offset-ak-icon-badge-lg); right: var(--offset-ak-icon-badge-lg); }
+.ak-avatar-wrap--lg .ak-status-icon i { font-size: 13px; }
+.ak-avatar-wrap--lg .ak-verified-badge { width: var(--size-ak-badge-lg); height: var(--size-ak-badge-lg); border: var(--size-ak-badge-border-lg) solid var(--color-ak-bg); bottom: var(--offset-ak-badge-lg-top, var(--offset-ak-badge-lg)); right: var(--offset-ak-badge-lg-right, var(--offset-ak-badge-lg)); }
+.ak-avatar-wrap--lg .ak-verified-badge i { font-size: 12px; }
+
+.ak-avatar-wrap--xl .ak-status-dot { width: var(--size-ak-status-xl); height: var(--size-ak-status-xl); border: var(--size-ak-badge-border-xl) solid var(--color-ak-bg); bottom: var(--offset-ak-status-xl); right: var(--offset-ak-status-xl); }
+.ak-avatar-wrap--xl .ak-status-dot--dnd::after { width: 9px; height: 2px; }
+.ak-avatar-wrap--xl .ak-badge { min-width: var(--size-ak-status-xl); height: var(--size-ak-status-xl); border: var(--size-ak-badge-border-xl) solid var(--color-ak-bg); top: var(--offset-ak-status-xl); right: var(--offset-ak-status-xl); }
+.ak-avatar-wrap--xl .ak-badge--count { min-width: var(--size-ak-badge-xl); height: var(--size-ak-badge-xl); font-size: var(--text-ak-badge-xl); top: var(--offset-ak-badge-xl-top, var(--offset-ak-badge-xl)); right: var(--offset-ak-badge-xl-right, var(--offset-ak-badge-xl)); --ak-badge-pad: 3px; }
+.ak-avatar-wrap--xl .ak-notif-badge { min-width: var(--size-ak-badge-xl); height: var(--size-ak-badge-xl); font-size: var(--text-ak-badge-xl); top: var(--offset-ak-badge-xl); right: var(--offset-ak-badge-xl); }
+.ak-avatar-wrap--xl .ak-rank-badge { width: var(--size-ak-icon-badge-xl); height: var(--size-ak-icon-badge-xl); font-size: 0.75rem; border: var(--size-ak-badge-border-xl) solid var(--color-ak-bg); top: var(--offset-ak-icon-badge-xl); right: var(--offset-ak-icon-badge-xl); }
+.ak-avatar-wrap--xl .ak-status-icon { width: var(--size-ak-icon-badge-xl); height: var(--size-ak-icon-badge-xl); border: var(--size-ak-badge-border-xl) solid var(--color-ak-bg); bottom: var(--offset-ak-icon-badge-xl); right: var(--offset-ak-icon-badge-xl); }
+.ak-avatar-wrap--xl .ak-status-icon i { font-size: 14px; }
+.ak-avatar-wrap--xl .ak-verified-badge { width: var(--size-ak-badge-xl); height: var(--size-ak-badge-xl); border: var(--size-ak-badge-border-xl) solid var(--color-ak-bg); bottom: var(--offset-ak-badge-xl-top, var(--offset-ak-badge-xl)); right: var(--offset-ak-badge-xl-right, var(--offset-ak-badge-xl)); }
+.ak-avatar-wrap--xl .ak-verified-badge i { font-size: 14px; }
+
+.ak-avatar-wrap--2xl .ak-status-dot { width: var(--size-ak-status-2xl); height: var(--size-ak-status-2xl); border: var(--size-ak-badge-border-2xl) solid var(--color-ak-bg); bottom: var(--offset-ak-status-2xl); right: var(--offset-ak-status-2xl); }
+.ak-avatar-wrap--2xl .ak-status-dot--dnd::after { width: 11px; height: 2px; }
+.ak-avatar-wrap--2xl .ak-badge { min-width: var(--size-ak-status-2xl); height: var(--size-ak-status-2xl); border: var(--size-ak-badge-border-2xl) solid var(--color-ak-bg); top: var(--offset-ak-status-2xl); right: var(--offset-ak-status-2xl); }
+.ak-avatar-wrap--2xl .ak-badge--count { min-width: var(--size-ak-badge-2xl); height: var(--size-ak-badge-2xl); font-size: var(--text-ak-badge-2xl); top: var(--offset-ak-badge-2xl-top, var(--offset-ak-badge-2xl)); right: var(--offset-ak-badge-2xl-right, var(--offset-ak-badge-2xl)); }
+.ak-avatar-wrap--2xl .ak-rank-badge { width: var(--size-ak-icon-badge-2xl); height: var(--size-ak-icon-badge-2xl); font-size: 0.875rem; border: var(--size-ak-badge-border-2xl) solid var(--color-ak-bg); top: var(--offset-ak-icon-badge-2xl); right: var(--offset-ak-icon-badge-2xl); }
+.ak-avatar-wrap--2xl .ak-status-icon { width: var(--size-ak-icon-badge-2xl); height: var(--size-ak-icon-badge-2xl); border: var(--size-ak-badge-border-2xl) solid var(--color-ak-bg); bottom: var(--offset-ak-icon-badge-2xl); right: var(--offset-ak-icon-badge-2xl); }
+.ak-avatar-wrap--2xl .ak-status-icon i { font-size: 16px; }
+.ak-avatar-wrap--2xl .ak-verified-badge { width: var(--size-ak-badge-2xl); height: var(--size-ak-badge-2xl); border: var(--size-ak-badge-border-2xl) solid var(--color-ak-bg); bottom: var(--offset-ak-badge-2xl-top, var(--offset-ak-badge-2xl)); right: var(--offset-ak-badge-2xl-right, var(--offset-ak-badge-2xl)); }
+.ak-avatar-wrap--2xl .ak-verified-badge i { font-size: 18px; }
+
+.ak-avatar-wrap--3xl .ak-status-dot { width: var(--size-ak-status-3xl); height: var(--size-ak-status-3xl); border: var(--size-ak-badge-border-3xl) solid var(--color-ak-bg); bottom: var(--offset-ak-status-3xl); right: var(--offset-ak-status-3xl); }
+.ak-avatar-wrap--3xl .ak-status-dot--dnd::after { width: 13px; height: 2.5px; }
+.ak-avatar-wrap--3xl .ak-badge { min-width: var(--size-ak-status-3xl); height: var(--size-ak-status-3xl); border: var(--size-ak-badge-border-3xl) solid var(--color-ak-bg); top: var(--offset-ak-status-3xl); right: var(--offset-ak-status-3xl); }
+.ak-avatar-wrap--3xl .ak-badge--count { min-width: var(--size-ak-badge-3xl); height: var(--size-ak-badge-3xl); font-size: var(--text-ak-badge-3xl); top: var(--offset-ak-badge-3xl-top, var(--offset-ak-badge-3xl)); right: var(--offset-ak-badge-3xl-right, var(--offset-ak-badge-3xl)); }
+.ak-avatar-wrap--3xl .ak-rank-badge { width: var(--size-ak-icon-badge-3xl); height: var(--size-ak-icon-badge-3xl); font-size: 1rem; border: var(--size-ak-badge-border-3xl) solid var(--color-ak-bg); top: var(--offset-ak-icon-badge-3xl); right: var(--offset-ak-icon-badge-3xl); }
+.ak-avatar-wrap--3xl .ak-status-icon { width: var(--size-ak-icon-badge-3xl); height: var(--size-ak-icon-badge-3xl); border: var(--size-ak-badge-border-3xl) solid var(--color-ak-bg); bottom: var(--offset-ak-icon-badge-3xl); right: var(--offset-ak-icon-badge-3xl); }
+.ak-avatar-wrap--3xl .ak-status-icon i { font-size: 20px; }
+.ak-avatar-wrap--3xl .ak-verified-badge { width: var(--size-ak-badge-3xl); height: var(--size-ak-badge-3xl); border: var(--size-ak-badge-border-3xl) solid var(--color-ak-bg); bottom: var(--offset-ak-badge-3xl-top, var(--offset-ak-badge-3xl)); right: var(--offset-ak-badge-3xl-right, var(--offset-ak-badge-3xl)); }
+.ak-avatar-wrap--3xl .ak-verified-badge i { font-size: 22px; }
+
+/* Social badge per-size — sized to match count-badge ratio for visual
+   parity with other avatar badges (~30-45% of avatar size). Border
+   width scales with avatar so the "cutout" ring reads at every size. */
+.ak-avatar-wrap--md  .ak-social-badge { width: var(--size-ak-badge-md);  height: var(--size-ak-badge-md);  font-size: 10px; border-width: var(--size-ak-badge-border-md); }
+.ak-avatar-wrap--lg  .ak-social-badge { width: var(--size-ak-badge-lg);  height: var(--size-ak-badge-lg);  font-size: 12px; border-width: var(--size-ak-badge-border-lg); }
+.ak-avatar-wrap--xl  .ak-social-badge { width: var(--size-ak-badge-xl);  height: var(--size-ak-badge-xl);  font-size: 14px; border-width: var(--size-ak-badge-border-xl); }
+.ak-avatar-wrap--2xl .ak-social-badge { width: var(--size-ak-badge-2xl); height: var(--size-ak-badge-2xl); font-size: 18px; border-width: var(--size-ak-badge-border-2xl); }
+.ak-avatar-wrap--3xl .ak-social-badge { width: var(--size-ak-badge-3xl); height: var(--size-ak-badge-3xl); font-size: 22px; border-width: var(--size-ak-badge-border-3xl); }
+
+/* Status dot offset adjustments for ring avatars — ring (box-shadow) extends
+   beyond the layout box, so the dot needs to shift outward to sit at the ring edge */
+.ak-avatar-wrap--md:has([class*="ak-avatar--ring-"])  .ak-status-dot { bottom: -2px; right: -2px; }
+.ak-avatar-wrap--lg:has([class*="ak-avatar--ring-"])  .ak-status-dot { bottom: -2px; right: -2px; }
+.ak-avatar-wrap--xl:has([class*="ak-avatar--ring-"])  .ak-status-dot { bottom: 0px;  right: 0px; }
+.ak-avatar-wrap--2xl:has([class*="ak-avatar--ring-"]) .ak-status-dot { bottom: 2px;  right: 2px; }
+.ak-avatar-wrap--3xl:has([class*="ak-avatar--ring-"]) .ak-status-dot { bottom: 4px;  right: 4px; }
+
+/* Avatar group (stacked/overlapping) */
+.ak-avatar-group { display: flex; align-items: center; }
+.ak-avatar-group .ak-avatar { position: relative; }
+/* White ring only on filled avatars and overflow counter so they
+   read as separated chips. The "+" add button uses a dashed border
+   instead — no white ring so the dashes are the only visible edge.
+   Integer pixel widths to avoid subpixel anti-aliasing. */
+.ak-avatar-group .ak-avatar,
+.ak-avatar-group .ak-avatar-overflow { box-shadow: 0 0 0 3px var(--color-ak-bg); }
+.ak-avatar-group--xl .ak-avatar,
+.ak-avatar-group--xl .ak-avatar-overflow { box-shadow: 0 0 0 4px var(--color-ak-bg); }
+.ak-avatar-group--2xl .ak-avatar,
+.ak-avatar-group--2xl .ak-avatar-overflow { box-shadow: 0 0 0 6px var(--color-ak-bg); }
+.ak-avatar-group--3xl .ak-avatar,
+.ak-avatar-group--3xl .ak-avatar-overflow { box-shadow: 0 0 0 7px var(--color-ak-bg); }
+.ak-avatar-group .ak-avatar:first-child,
+.ak-avatar-group .ak-avatar-add:first-child,
+.ak-avatar-group .ak-avatar-overflow:first-child { margin-left: 0; }
+
+/* Hover micro-interaction: diagonal shimmer sweep across the face.
+   The ::after pseudo is hidden (opacity: 0) at rest so it can never
+   leak a visible band on dark backgrounds. Hovering triggers a
+   keyframe animation that slides a soft white gradient across the
+   circle once, then resets. `overflow: hidden` on .ak-avatar clips
+   it to the circle so it reads as a sheen, not a square flash.
+   Skipped under prefers-reduced-motion. */
+/* Shimmer is scoped to avatars that contain an <img> (photo avatars) so
+   static initials/icon avatars don't flash on hover. Works in group
+   contexts and standalone showcases. */
+.ak-avatar:has(img)::after,
+.ak-avatar-group .ak-avatar::after,
+.ak-avatar-group .ak-avatar-overflow::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    110deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.35) 50%,
+    transparent 70%
+  );
+  opacity: 0;
+  pointer-events: none;
+}
+.ak-avatar:has(img):hover::after,
+.ak-avatar-group .ak-avatar:hover::after,
+.ak-avatar-group .ak-avatar-overflow:hover::after {
+  animation: ak-avatar-shimmer 700ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes ak-avatar-shimmer {
+  0%   { transform: translateX(-120%); opacity: 1; }
+  100% { transform: translateX(120%);  opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-avatar:has(img):hover::after,
+  .ak-avatar-group .ak-avatar:hover::after,
+  .ak-avatar-group .ak-avatar-overflow:hover::after {
+    animation: none;
+  }
+}
+
+/* Group size modifiers */
+.ak-avatar-group--md .ak-avatar,
+.ak-avatar-group--md .ak-avatar-add,
+.ak-avatar-group--md .ak-avatar-overflow { margin-left: -8px; }
+.ak-avatar-group--md .ak-avatar-overflow { width: var(--size-ak-avatar-md); height: var(--size-ak-avatar-md); font-size: var(--text-ak-avatar-md); font-weight: 600; }
+.ak-avatar-group--md .ak-avatar-add { width: var(--size-ak-avatar-md); height: var(--size-ak-avatar-md); }
+.ak-avatar-group--md .ak-avatar-add i { font-size: var(--size-ak-icon-md); }
+
+.ak-avatar-group--lg .ak-avatar,
+.ak-avatar-group--lg .ak-avatar-add,
+.ak-avatar-group--lg .ak-avatar-overflow { margin-left: -10px; }
+.ak-avatar-group--lg .ak-avatar-overflow { width: var(--size-ak-avatar-lg); height: var(--size-ak-avatar-lg); font-size: var(--text-ak-avatar-lg); font-weight: 600; }
+.ak-avatar-group--lg .ak-avatar-add { width: var(--size-ak-avatar-lg); height: var(--size-ak-avatar-lg); }
+.ak-avatar-group--lg .ak-avatar-add i { font-size: var(--size-ak-icon-lg); }
+
+.ak-avatar-group--xl .ak-avatar,
+.ak-avatar-group--xl .ak-avatar-add,
+.ak-avatar-group--xl .ak-avatar-overflow { margin-left: -12px; }
+.ak-avatar-group--xl .ak-avatar-overflow { width: var(--size-ak-avatar-xl); height: var(--size-ak-avatar-xl); font-size: var(--text-ak-avatar-xl); font-weight: 500; }
+.ak-avatar-group--xl .ak-avatar-add { width: var(--size-ak-avatar-xl); height: var(--size-ak-avatar-xl); }
+.ak-avatar-group--xl .ak-avatar-add i { font-size: 1.75rem; }
+
+.ak-avatar-group--2xl .ak-avatar,
+.ak-avatar-group--2xl .ak-avatar-add,
+.ak-avatar-group--2xl .ak-avatar-overflow { margin-left: -16px; }
+.ak-avatar-group--2xl .ak-avatar-overflow { width: var(--size-ak-avatar-2xl); height: var(--size-ak-avatar-2xl); font-size: var(--text-ak-avatar-2xl); font-weight: 400; }
+.ak-avatar-group--2xl .ak-avatar-add { width: var(--size-ak-avatar-2xl); height: var(--size-ak-avatar-2xl); }
+.ak-avatar-group--2xl .ak-avatar-add i { font-size: var(--size-ak-icon-2xl); }
+
+.ak-avatar-group--3xl .ak-avatar,
+.ak-avatar-group--3xl .ak-avatar-add,
+.ak-avatar-group--3xl .ak-avatar-overflow { margin-left: -20px; }
+.ak-avatar-group--3xl .ak-avatar-overflow { width: var(--size-ak-avatar-3xl); height: var(--size-ak-avatar-3xl); font-size: var(--text-ak-avatar-3xl); font-weight: 400; }
+.ak-avatar-group--3xl .ak-avatar-add { width: var(--size-ak-avatar-3xl); height: var(--size-ak-avatar-3xl); }
+.ak-avatar-group--3xl .ak-avatar-add i { font-size: var(--size-ak-icon-3xl); }
+
+/* Avatar overflow ("+3" counter) */
+.ak-avatar-overflow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-surface-2);
+  color: var(--color-ak-text-secondary);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color var(--duration-ak-fast) var(--ease-ak-default);
+  /* Clip the shimmer ::after to the circle shape (same reason
+     .ak-avatar needs overflow:hidden to clip its <img>). */
+  overflow: hidden;
+  position: relative;
+}
+.ak-avatar-overflow:hover { background: var(--color-ak-active); z-index: 5; }
+.ak-avatar-overflow:focus-visible {
+  outline: 2px solid var(--color-ak-border-focus);
+  outline-offset: 2px;
+}
+
+/* Avatar add button */
+.ak-avatar-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  border: 2px dashed var(--color-ak-border);
+  background: none;
+  color: var(--color-ak-text-muted);
+  cursor: pointer;
+  transition: border-color var(--duration-ak-fast) var(--ease-ak-default),
+              color var(--duration-ak-fast) var(--ease-ak-default),
+              background-color var(--duration-ak-fast) var(--ease-ak-default);
+}
+.ak-avatar-add:hover {
+  border-color: var(--color-ak-border-strong);
+  color: var(--color-ak-text);
+  background: var(--color-ak-hover);
+}
+.ak-avatar-add:focus-visible {
+  outline: 2px solid var(--color-ak-border-focus);
+  outline-offset: 2px;
+}
+
+/* Avatar progress ring */
+.ak-avatar-progress { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+.ak-avatar-progress--md  { width: 56px;  height: 56px;  }
+.ak-avatar-progress--lg  { width: 66px;  height: 66px;  }
+.ak-avatar-progress--xl  { width: 86px;  height: 86px;  }
+.ak-avatar-progress--2xl { width: 126px; height: 126px; }
+.ak-avatar-progress--3xl { width: 166px; height: 166px; }
+.ak-avatar-progress--md  .ak-progress-ring__track,
+.ak-avatar-progress--md  .ak-progress-ring__fill  { stroke-width: 14; }
+.ak-avatar-progress--lg  .ak-progress-ring__track,
+.ak-avatar-progress--lg  .ak-progress-ring__fill  { stroke-width: 12; }
+.ak-avatar-progress--xl  .ak-progress-ring__track,
+.ak-avatar-progress--xl  .ak-progress-ring__fill  { stroke-width: 12; }
+.ak-avatar-progress--2xl .ak-progress-ring__track,
+.ak-avatar-progress--2xl .ak-progress-ring__fill  { stroke-width: 10; }
+.ak-avatar-progress--3xl .ak-progress-ring__track,
+.ak-avatar-progress--3xl .ak-progress-ring__fill  { stroke-width: 8; }
+
+/* Progress ring SVG */
+.ak-progress-ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.ak-progress-ring__track {
+  fill: none;
+  stroke: var(--color-ak-border-subtle);
+  shape-rendering: geometricPrecision;
+}
+.ak-progress-ring__fill {
+  fill: none;
+  stroke: var(--color-ak-primary);
+  stroke-linecap: round;
+  shape-rendering: geometricPrecision;
+  stroke-dasharray: 552.92;
+  stroke-dashoffset: calc(552.92 - (552.92 * var(--progress, 0) / 100));
+  transition: stroke-dashoffset 800ms cubic-bezier(0.4, 0, 0.2, 1),
+              stroke 400ms ease;
+}
+.ak-progress-ring__fill--primary { stroke: var(--color-ak-primary); }
+.ak-progress-ring__fill--success { stroke: var(--color-ak-success); }
+.ak-progress-ring__fill--warning { stroke: var(--color-ak-warning); }
+.ak-progress-ring__fill--danger  { stroke: var(--color-ak-danger); }
+.ak-progress-ring__fill--info    { stroke: var(--color-ak-info); }
+
+/* Progress ring shape variants */
+.ak-progress-ring--rounded .ak-progress-ring__track,
+.ak-progress-ring--rounded .ak-progress-ring__fill { stroke-linecap: round; }
+.ak-progress-ring--square .ak-progress-ring__track,
+.ak-progress-ring--square .ak-progress-ring__fill { stroke-linecap: square; }
+.ak-progress-ring--circle .ak-progress-ring__track,
+.ak-progress-ring--circle .ak-progress-ring__fill { stroke-linecap: round; }
+
+/* Avatar ring (decorative border ring) */
+.ak-avatar-ring {
+  position: absolute;
+  inset: -3px;
+  border-radius: var(--radius-ak-full);
+  border: 2px solid var(--color-ak-primary);
+  pointer-events: none;
+}
+
+/* Face stack (simpler avatar group variant) */
+.ak-faces { display: flex; align-items: center; isolation: isolate; }
+.ak-face {
+  width: 40px;
+  height: 40px;
+  margin-left: -10px;
+  border-radius: var(--radius-ak-full);
+  overflow: hidden;
+  outline: 3px solid var(--color-ak-bg);
+  outline-offset: -0.5px;
+  flex-shrink: 0;
+}
+.ak-face:first-child { margin-left: 0; }
+.ak-face:nth-child(1) { z-index: 5; }
+.ak-face:nth-child(2) { z-index: 4; }
+.ak-face:nth-child(3) { z-index: 3; }
+.ak-face:nth-child(4) { z-index: 2; }
+.ak-face:nth-child(5) { z-index: 1; }
+.ak-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.ak-face--lg { width: 48px; height: 48px; margin-left: -12px; }
+.ak-face--lg:first-child { margin-left: 0; }
+.ak-face--xl { width: 56px; height: 56px; margin-left: -14px; }
+.ak-face--xl:first-child { margin-left: 0; }
+
+
+/* Note: The unlayered override block that was here has been removed.
+   With @layer gone, the border declarations above now compete with
+   Tailwind preflight via specificity (.class > *) and win. */

package/primitives/badges.css

@@ -0,0 +1,231 @@
+
+
+/* Badge primitives -- notification badges, status dots, rank, social, verified, count badges */
+
+
+
+/* Badge (notification counts) */
+/* Base badge — background + color only.
+   Position is set by context (absolute on avatars, static in nav links). */
+/* Exact match of HTML badge CSS — nothing extra */
+.ak-badge {
+  position: absolute;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+  /* Monochrome by default — use .ak-badge--danger/success/warning/info
+     to override when a semantic color is needed.
+     No outer shadow: the white border (set per-size in avatar.css)
+     matches the page background and creates a "cutout" illusion —
+     the badge appears to be carved into the avatar rather than
+     floating on top. An outer shadow would contradict that. */
+}
+.ak-badge--count {
+  /* Horizontal padding is overridable via --ak-badge-pad so tighter
+     sizes (MD/LG/XL on avatars) can keep a perfect circle for
+     2-digit counts without stretching into a pill. */
+  padding: 0 var(--ak-badge-pad, 4px);
+  font-weight: 700;
+  color: var(--color-ak-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Tabular digits so "11" / "24" / "99+" share column widths and
+     read centered regardless of digit mix. Tight letter-spacing
+     makes multi-digit counts feel like a single token. */
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.ak-badge--success { background: var(--color-ak-success); }
+.ak-badge--warning { background: var(--color-ak-warning); }
+.ak-badge--danger  { background: var(--color-ak-danger); }
+.ak-badge--info    { background: var(--color-ak-info); }
+
+/* Dark panel/rail badge overrides */
+[data-ak-dark-panel] .ak-badge,
+[data-ak-dark-rail] .ak-badge,
+[data-ak-mobile-sheet] .ak-badge {
+  background: #ffffff;
+  color: #171717;
+}
+[data-ak-dark-panel] .ak-on-elevated .ak-badge,
+[data-ak-dark-rail] .ak-on-elevated .ak-badge,
+[data-ak-mobile-sheet] .ak-on-elevated .ak-badge {
+  background: #171717;
+  color: #ffffff;
+}
+
+/* Badge variants */
+.ak-badge-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+}
+.ak-badge-inline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+.ak-badge-subtle {
+  background: var(--color-ak-primary-subtle);
+  color: var(--color-ak-primary);
+}
+
+/* Count badge (standalone) */
+.ak-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+  background: var(--color-ak-surface-2);
+  color: var(--color-ak-text-secondary);
+}
+
+/* Notification badge — monochrome by default.
+   Add .ak-notif-badge.ak-badge--danger etc. to override when needed. */
+.ak-notif-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+  font-weight: 700;
+  padding: 0 0.25rem;
+}
+
+/* Pro/plan badges */
+.ak-pro-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+  background: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+}
+.ak-plan-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+
+/* Verified badge — monochrome by default. Add .ak-badge--info
+   to override with the traditional blue checkmark. */
+.ak-verified-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-primary);
+}
+.ak-verified-badge i {
+  color: var(--color-ak-on-primary);
+}
+
+/* Rank badge — tonal monochrome hierarchy.
+   1st = primary (black), 2nd = secondary neutral, 3rd = surface. */
+.ak-rank-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  font-weight: 700;
+}
+.ak-rank-badge--1 { background: var(--color-ak-primary);      color: var(--color-ak-on-primary); }
+.ak-rank-badge--2 { background: var(--color-ak-text-secondary); color: var(--color-ak-bg); }
+.ak-rank-badge--3 { background: var(--color-ak-surface-2);    color: var(--color-ak-text); }
+
+/* Social badge — per-size border width set in avatar.css to scale with avatar */
+.ak-social-badge {
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-ak-full);
+  border-style: solid;
+  border-color: var(--color-ak-bg);
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.ak-social-badge--google   { background: #ffffff; color: #4285F4; }
+.ak-social-badge--linkedin { background: #0A66C2; color: #ffffff; }
+.ak-social-badge--meta     { background: #0081FB; color: #ffffff; }
+.ak-social-badge--x        { background: #000000; color: #ffffff; }
+
+/* Status dot */
+.ak-status-dot {
+  position: absolute;
+  border-radius: var(--radius-ak-full);
+}
+.ak-status-dot--online  { background: var(--color-ak-success); }
+.ak-status-dot--away    { background: var(--color-ak-warning); }
+.ak-status-dot--busy    { background: var(--color-ak-danger); }
+.ak-status-dot--offline { background: var(--color-ak-text-muted); }
+.ak-status-dot--dnd     { background: var(--color-ak-danger); }
+.ak-status-dot--dnd::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--color-ak-text-inverse);
+  border-radius: var(--radius-ak-full);
+}
+
+/* Activity / status badges */
+.ak-activity-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 600;
+}
+.ak-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-ak-full);
+  font-size: var(--text-ak-xs);
+  font-weight: 500;
+}
+.ak-notification-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-ak-full);
+  background: var(--color-ak-danger);
+}
+.ak-status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-ak-full);
+}
+
+/* Presence indicators */
+.ak-presence-online { background-color: var(--color-ak-success); }
+.ak-presence-away   { background-color: var(--color-ak-warning); }
+
+
+
+/* Note: Unlayered override block removed — no longer needed without @layer. */