@pontive/pontkit-core 1.7.9 → 1.8.0

package/dist/styles.css

@@ -537,11 +537,92 @@
  *  pont-ref-breakpoint-*
  * ===========================================================================
  */
+/*
+ * ===========================================================================
+ *  BORDER REFERENCE TOKENS
+ *  pont-ref-border-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * BORDER STYLE * */
+  --pont-ref-border-style-solid: solid;
+  --pont-ref-border-style-dashed: dashed;
+  --pont-ref-border-style-dotted: dotted;
+  --pont-ref-border-style-double: double;
+  --pont-ref-border-style-hidden: hidden;
+  --pont-ref-border-style-none: none;
+}
+
+/*
+ * ===========================================================================
+ *  EFFECT REFERENCE TOKENS
+ *  pont-ref-effect-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * BOX SHADOW * */
+  --pont-ref-effect-shadow-none: 0 0 #0000;
+
+  /* * MIX BLEND MODE * */
+  --pont-ref-effect-mix-blend-normal: normal;
+  --pont-ref-effect-mix-blend-multiply: multiply;
+  --pont-ref-effect-mix-blend-screen: screen;
+  --pont-ref-effect-mix-blend-overlay: overlay;
+  --pont-ref-effect-mix-blend-darken: darken;
+  --pont-ref-effect-mix-blend-lighten: lighten;
+  --pont-ref-effect-mix-blend-dodge: color-dodge;
+  --pont-ref-effect-mix-blend-burn: color-burn;
+  --pont-ref-effect-mix-blend-hard-light: hard-light;
+  --pont-ref-effect-mix-blend-soft-light: soft-light;
+  --pont-ref-effect-mix-blend-difference: difference;
+  --pont-ref-effect-mix-blend-exclusion: exclusion;
+  --pont-ref-effect-mix-blend-hue: hue;
+  --pont-ref-effect-mix-blend-saturation: saturation;
+  --pont-ref-effect-mix-blend-color: color;
+  --pont-ref-effect-mix-blend-luminosity: luminosity;
+  --pont-ref-effect-mix-blend-plus-darker: plus-darker;
+  --pont-ref-effect-mix-blend-plus-lighter: plus-lighter;
+
+  /* * BACKGROUND BLEND MODE * */
+  --pont-ref-effect-bg-blend-normal: normal;
+  --pont-ref-effect-bg-blend-multiply: multiply;
+  --pont-ref-effect-bg-blend-screen: screen;
+  --pont-ref-effect-bg-blend-overlay: overlay;
+  --pont-ref-effect-bg-blend-darken: darken;
+  --pont-ref-effect-bg-blend-lighten: lighten;
+  --pont-ref-effect-bg-blend-dodge: color-dodge;
+  --pont-ref-effect-bg-blend-burn: color-burn;
+  --pont-ref-effect-bg-blend-hard-light: hard-light;
+  --pont-ref-effect-bg-blend-soft-light: soft-light;
+  --pont-ref-effect-bg-blend-difference: difference;
+  --pont-ref-effect-bg-blend-exclusion: exclusion;
+  --pont-ref-effect-bg-blend-hue: hue;
+  --pont-ref-effect-bg-blend-saturation: saturation;
+  --pont-ref-effect-bg-blend-color: color;
+  --pont-ref-effect-bg-blend-luminosity: luminosity;
+}
+
+/*
+ * ===========================================================================
+ *  LAYOUT REFERENCE TOKENS
+ *  pont-ref-layout-*
+ * ===========================================================================
+ */
+
+:root {
+  /* * ASPECT RATIO * */
+  --pont-ref-layout-aspect-square: 1 / 1;
+  --pont-ref-layout-aspect-video: 16 / 9;
+}
+
 /*
  * ===========================================================================
  *  SEMANTIC TOKENS INDEX
  * ===========================================================================
  */
+
 /*
  * ===========================================================================
  *  COLOR SEMANTIC TOKENS
@@ -2168,36 +2249,141 @@
  * ===========================================================================
  */
 
+/*
+ * --------------------------------------------------
+ *  AVATAR
+ * --------------------------------------------------
+ */
+
 :root {
-  /* Used for avatar group avatar children */
-  --pont-avatar-space-me-in-group: var(--pont-ref-space-neg-2);
+  /* SIZING */
+  --pont-avatar-sizing-w: calc(var(--pont-ref-space) * 8);
+  --pont-avatar-sizing-h: calc(var(--pont-ref-space) * 8);
+
+  --pont-avatar-sizing-w-sm: calc(var(--pont-ref-space) * 6);
+  --pont-avatar-sizing-h-sm: calc(var(--pont-ref-space) * 6);
+
+  --pont-avatar-sizing-w-lg: calc(var(--pont-ref-space) * 10);
+  --pont-avatar-sizing-h-lg: calc(var(--pont-ref-space) * 10);
+
+  /* TYPOGRAPHY */
+  --pont-avatar-typography-font: var(--pont-sem-font-family-default);
+  --pont-avatar-typography-size: var(--pont-ref-font-size-sm);
+  --pont-avatar-typography-weight: var(--pont-ref-font-weight-normal);
+  --pont-avatar-typography-tracking: var(--pont-ref-font-letter-spacing-normal);
+  --pont-avatar-typography-leading: var(--pont-ref-font-line-height-of-sm);
+
+  --pont-avatar-typography-size-sm: var(--pont-ref-font-size-xs);
+  --pont-avatar-typography-weight-sm: var(--pont-ref-font-weight-normal);
+  --pont-avatar-typography-tracking-sm: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-avatar-typography-leading-sm: var(--pont-ref-font-line-height-of-xs);
+
+  --pont-avatar-typography-size-lg: var(--pont-ref-font-size-sm);
+  --pont-avatar-typography-weight-lg: var(--pont-ref-font-weight-normal);
+  --pont-avatar-typography-tracking-lg: var(
+    --pont-ref-font-letter-spacing-normal
+  );
+  --pont-avatar-typography-leading-lg: var(--pont-ref-font-line-height-of-sm);
 
-  /* Used for avatar and avatar group count */
-  --pont-avatar-space-size: var(--pont-sem-space-identity-size);
-  --pont-avatar-space-size-sm: var(--pont-sem-space-identity-size-sm);
-  --pont-avatar-space-size-lg: var(--pont-sem-space-identity-size-lg);
+  /* BORDER */
+  --pont-avatar-border-radius-tl: var(--pont-ref-radius-full);
+  --pont-avatar-border-radius-tr: var(--pont-ref-radius-full);
+  --pont-avatar-border-radius-br: var(--pont-ref-radius-full);
+  --pont-avatar-border-radius-bl: var(--pont-ref-radius-full);
 
-  /* Used for avatar fallback and avatar group count */
-  --pont-avatar-font-size: var(--pont-sem-font-identity-size);
-  --pont-avatar-font-size-sm: var(--pont-sem-font-identity-size-sm);
-  --pont-avatar-font-line-height: var(--pont-sem-font-identity-line-height);
-  --pont-avatar-font-line-height-sm: var(--pont-sem-font-identity-line-height-sm);
-  --pont-avatar-color-text: hsl(var(--pont-sem-color-text-secondary));
+  --pont-avatar-border-style: var(--pont-ref-border-style-solid);
+  --pont-avatar-border-color: hsl(var(--pont-sem-color-border));
+  --pont-avatar-border-width-t: var(--pont-sem-width-border);
+  --pont-avatar-border-width-r: var(--pont-sem-width-border);
+  --pont-avatar-border-width-b: var(--pont-sem-width-border);
+  --pont-avatar-border-width-l: var(--pont-sem-width-border);
 
-  /* Used for avatar fallback and avatar group count */
-  --pont-avatar-color-bg: hsl(var(--pont-sem-color-bg-fill-secondary));
+  /* EFFECT */
+  --pont-avatar-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-avatar-effect-inset-shadow: inset var(--pont-ref-effect-shadow-none);
+  --pont-avatar-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
 
-  /* Used for avatar, avatar image, avatar image, and avatar group count */
-  --pont-avatar-radius: var(--pont-sem-radius-identity);
+  --pont-avatar-effect-ring-offset-w: 0px;
+  --pont-avatar-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-avatar-effect-ring-offset: 0 0 0 var(--pont-avatar-effect-ring-offset-w) var(--pont-avatar-effect-ring-offset-color);
 
-  /* Used for avatar, avatar badge, and avatar group count */
-  --pont-avatar-width-ring: var(--pont-sem-width-ring-whitespace);
-  --pont-avatar-color-ring: hsl(var(--pont-sem-color-ring-whitespace));
+  --pont-avatar-effect-ring-w: 2px;
+  --pont-avatar-effect-ring-color: hsl(var(--pont-sem-color-bg));
+  --pont-avatar-effect-ring: 0 0 0 calc(var(--pont-avatar-effect-ring-w) + var(--pont-avatar-effect-ring-offset-w)) var(--pont-avatar-effect-ring-color);
 
-  /* Used for icons inside avatar group count */
-  --pont-avatar-icon-space-size: var(--pont-sem-space-icon-size);
-  --pont-avatar-icon-space-size-sm: var(--pont-sem-space-icon-size-xs);
-  --pont-avatar-icon-space-size-lg: var(--pont-sem-space-icon-size-lg);
+  --pont-avatar-effect-mix-blend: var(--pont-ref-effect-mix-blend-darken);
+}
+
+[data-theme="dark"] {
+  /* EFFECT */
+  --pont-avatar-effect-mix-blend: var(--pont-ref-effect-mix-blend-lighten);
+}
+
+/*
+ * --------------------------------------------------
+ *  AVATAR IMAGE
+ * --------------------------------------------------
+ */
+
+:root {
+  /* LAYOUT */
+  --pont-avatar-image-layout-aspect: var(--pont-ref-layout-aspect-square);
+}
+
+/*
+ * --------------------------------------------------
+ *  AVATAR FALLBACK
+ * --------------------------------------------------
+ */
+
+:root {
+  /* TYPOGRAPHY */
+  --pont-avatar-fallback-typography-font: var(--pont-avatar-typography-font);
+  --pont-avatar-fallback-typography-size: var(--pont-avatar-typography-size);
+  --pont-avatar-fallback-typography-weight: var(
+    --pont-avatar-typography-weight
+  );
+  --pont-avatar-fallback-typography-tracking: var(
+    --pont-avatar-typography-tracking
+  );
+  --pont-avatar-fallback-typography-leading: var(
+    --pont-avatar-typography-leading
+  );
+
+  --pont-avatar-fallback-typography-size-sm: var(
+    --pont-avatar-typography-size-sm
+  );
+  --pont-avatar-fallback-typography-weight-sm: var(
+    --pont-avatar-typography-weight-sm
+  );
+  --pont-avatar-fallback-typography-tracking-sm: var(
+    --pont-avatar-typography-tracking-sm
+  );
+  --pont-avatar-fallback-typography-leading-sm: var(
+    --pont-avatar-typography-leading-sm
+  );
+
+  --pont-avatar-fallback-typography-size-lg: var(
+    --pont-avatar-typography-size-lg
+  );
+  --pont-avatar-fallback-typography-weight-lg: var(
+    --pont-avatar-typography-weight-lg
+  );
+  --pont-avatar-fallback-typography-tracking-lg: var(
+    --pont-avatar-typography-tracking-lg
+  );
+  --pont-avatar-fallback-typography-leading-lg: var(
+    --pont-avatar-typography-leading-lg
+  );
+
+  --pont-avatar-fallback-typography-color: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+
+  /* BACKGROUND */
+  --pont-avatar-fallback-bg-color: hsl(var(--pont-sem-color-bg-fill-secondary));
 }
 
 /*
@@ -2207,18 +2393,159 @@
  */
 
 :root {
-  --pont-avatar-badge-space-size: var(--pont-sem-space-indicator-size-xs);
-  --pont-avatar-badge-space-size-sm: var(--pont-sem-space-indicator-size-2xs);
-  --pont-avatar-badge-space-size-lg: var(--pont-sem-space-indicator-size-sm);
+  /* LAYOUT */
+  --pont-avatar-badge-layout-inset-t: auto;
+  --pont-avatar-badge-layout-inset-r: calc(var(--pont-ref-space) * 0);
+  --pont-avatar-badge-layout-inset-b: calc(var(--pont-ref-space) * 0);
+  --pont-avatar-badge-layout-inset-l: auto;
+
+  --pont-avatar-badge-layout-z: 10;
+
+  /* SIZING */
+  --pont-avatar-badge-sizing-w: calc(var(--pont-ref-space) * 2.5);
+  --pont-avatar-badge-sizing-h: calc(var(--pont-ref-space) * 2.5);
+
+  --pont-avatar-badge-sizing-w-sm: calc(var(--pont-ref-space) * 2);
+  --pont-avatar-badge-sizing-h-sm: calc(var(--pont-ref-space) * 2);
+
+  --pont-avatar-badge-sizing-w-lg: calc(var(--pont-ref-space) * 3);
+  --pont-avatar-badge-sizing-h-lg: calc(var(--pont-ref-space) * 3);
+
+  /* TYPOGRAPHY */
+  --pont-avatar-badge-typography-color: hsl(
+    var(--pont-sem-color-text-brand-on-fill)
+  );
+
+  /* BACKGROUND */
+  --pont-avatar-badge-bg-color: hsl(var(--pont-sem-color-bg-fill-brand));
+
+  /* BORDER */
+  --pont-avatar-badge-border-radius-tl: var(--pont-ref-radius-full);
+  --pont-avatar-badge-border-radius-tr: var(--pont-ref-radius-full);
+  --pont-avatar-badge-border-radius-br: var(--pont-ref-radius-full);
+  --pont-avatar-badge-border-radius-bl: var(--pont-ref-radius-full);
+
+  /* EFFECT */
+  --pont-avatar-badge-effect-shadow: var(--pont-ref-effect-shadow-none);
+  --pont-avatar-badge-effect-inset-shadow: inset var(--pont-ref-effect-shadow-none);
+  --pont-avatar-badge-effect-inset-ring: inset var(--pont-ref-effect-shadow-none);
+
+  --pont-avatar-badge-effect-ring-offset-w: 0px;
+  --pont-avatar-badge-effect-ring-offset-color: hsl(var(--pont-sem-color-bg));
+  --pont-avatar-badge-effect-ring-offset: 0 0 0 var(--pont-avatar-badge-effect-ring-offset-w) var(--pont-avatar-badge-effect-ring-offset-color);
+
+  --pont-avatar-badge-effect-ring-w: 2px;
+  --pont-avatar-badge-effect-ring-color: hsl(var(--pont-sem-color-bg));
+  --pont-avatar-badge-effect-ring: 0 0 0 calc(var(--pont-avatar-badge-effect-ring-w) + var(--pont-avatar-badge-effect-ring-offset-w)) var(--pont-avatar-badge-effect-ring-color);
+
+  --pont-avatar-badge-effect-bg-blend: var(--pont-ref-effect-bg-blend-color);
+}
+
+/* * -------- AVATAR BADGE > ICON -------- * */
+
+:root {
+  /* SIZING */
+  --pont-avatar-badge-icon-sizing-w: calc(var(--pont-ref-space) * 2);
+  --pont-avatar-badge-icon-sizing-h: calc(var(--pont-ref-space) * 2);
 
-  --pont-avatar-badge-color-text: hsl(var(--pont-sem-color-text-brand-on-fill));
+  /* Note: shadcn hides the avatar badge icon for the small size */
+  --pont-avatar-badge-icon-sizing-w-sm: calc(var(--pont-ref-space) * 1.5);
+  --pont-avatar-badge-icon-sizing-h-sm: calc(var(--pont-ref-space) * 1.5);
 
-  --pont-avatar-badge-color-bg: hsl(var(--pont-sem-color-bg-fill-brand));
+  --pont-avatar-badge-icon-sizing-w-lg: calc(var(--pont-ref-space) * 2);
+  --pont-avatar-badge-icon-sizing-h-lg: calc(var(--pont-ref-space) * 2);
+}
 
-  --pont-avatar-badge-radius: var(--pont-sem-radius-indicator);
+/*
+ * --------------------------------------------------
+ *  AVATAR GROUP
+ * --------------------------------------------------
+ */
 
-  --pont-avatar-badge-icon-space-size: var(--pont-sem-space-icon-size-3xs);
-  --pont-avatar-badge-icon-space-size-lg: var(--pont-sem-space-icon-size-2xs);
+:root {
+  /* SPACING */
+  --pont-avatar-group-spacing-x: calc(var(--pont-ref-space) * -2);
+  --pont-avatar-group-spacing-y: calc(var(--pont-ref-space) * 0);
+}
+
+/*
+ * --------------------------------------------------
+ *  AVATAR GROUP COUNT
+ * --------------------------------------------------
+ */
+
+:root {
+  /* SIZING */
+  --pont-avatar-group-count-sizing-w: var(--pont-avatar-sizing-w);
+  --pont-avatar-group-count-sizing-h: var(--pont-avatar-sizing-h);
+
+  --pont-avatar-group-count-sizing-w-sm: var(--pont-avatar-sizing-w-sm);
+  --pont-avatar-group-count-sizing-h-sm: var(--pont-avatar-sizing-h-sm);
+
+  --pont-avatar-group-count-sizing-w-lg: var(--pont-avatar-sizing-w-lg);
+  --pont-avatar-group-count-sizing-h-lg: var(--pont-avatar-sizing-h-lg);
+
+  /* TYPOGRAPHY */
+  --pont-avatar-group-count-typography-font: var(--pont-avatar-typography-font);
+  --pont-avatar-group-count-typography-size: var(--pont-avatar-typography-size);
+  --pont-avatar-group-count-typography-weight: var(
+    --pont-avatar-typography-weight
+  );
+  --pont-avatar-group-count-typography-tracking: var(
+    --pont-avatar-typography-tracking
+  );
+  --pont-avatar-group-count-typography-leading: var(
+    --pont-avatar-typography-leading
+  );
+
+  --pont-avatar-group-count-typography-size-sm: var(
+    --pont-avatar-typography-size-sm
+  );
+  --pont-avatar-group-count-typography-weight-sm: var(
+    --pont-avatar-typography-weight-sm
+  );
+  --pont-avatar-group-count-typography-tracking-sm: var(
+    --pont-avatar-typography-tracking-sm
+  );
+  --pont-avatar-group-count-typography-leading-sm: var(
+    --pont-avatar-typography-leading-sm
+  );
+
+  --pont-avatar-group-count-typography-size-lg: var(
+    --pont-avatar-typography-size-lg
+  );
+  --pont-avatar-group-count-typography-weight-lg: var(
+    --pont-avatar-typography-weight-lg
+  );
+  --pont-avatar-group-count-typography-tracking-lg: var(
+    --pont-avatar-typography-tracking-lg
+  );
+  --pont-avatar-group-count-typography-leading-lg: var(
+    --pont-avatar-typography-leading-lg
+  );
+
+  --pont-avatar-group-count-typography-color: hsl(
+    var(--pont-sem-color-text-secondary)
+  );
+
+  /* BACKGROUND */
+  --pont-avatar-group-count-bg-color: hsl(
+    var(--pont-sem-color-bg-fill-secondary)
+  );
+}
+
+/* * -------- AVATAR GROUP COUNT > ICON -------- * */
+
+:root {
+  /* SIZING */
+  --pont-avatar-group-count-icon-sizing-w: calc(var(--pont-ref-space) * 4);
+  --pont-avatar-group-count-icon-sizing-h: calc(var(--pont-ref-space) * 4);
+
+  --pont-avatar-group-count-icon-sizing-w-sm: calc(var(--pont-ref-space) * 3);
+  --pont-avatar-group-count-icon-sizing-h-sm: calc(var(--pont-ref-space) * 3);
+
+  --pont-avatar-group-count-icon-sizing-w-lg: calc(var(--pont-ref-space) * 5);
+  --pont-avatar-group-count-icon-sizing-h-lg: calc(var(--pont-ref-space) * 5);
 }
 
 /*
@@ -6122,29 +6449,61 @@ pont-callout-action {
 
 pont-avatar {
   flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
 }
 
-pont-avatar > [data-slot="avatar"] {
+[data-pont-avatar] {
   display: flex;
   position: relative;
 
-  width: var(--pont-avatar-space-size);
-  height: var(--pont-avatar-space-size);
+  width: var(--pont-avatar-sizing-w);
+  height: var(--pont-avatar-sizing-h);
+
+  border-top-left-radius: var(--pont-avatar-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-border-radius-bl);
+
+  -webkit-user-select: none;
+
+     -moz-user-select: none;
 
-  border-radius: var(--pont-avatar-radius);
+          user-select: none;
 }
 
-pont-avatar > [data-slot="avatar"][data-size="sm"] {
-  width: var(--pont-avatar-space-size-sm);
-  height: var(--pont-avatar-space-size-sm);
+/* * SIZES * */
+
+[data-pont-avatar][data-size="sm"] {
+  width: var(--pont-avatar-sizing-w-sm);
+  height: var(--pont-avatar-sizing-h-sm);
 }
 
-pont-avatar > [data-slot="avatar"][data-size="lg"] {
-  width: var(--pont-avatar-space-size-lg);
-  height: var(--pont-avatar-space-size-lg);
+[data-pont-avatar][data-size="lg"] {
+  width: var(--pont-avatar-sizing-w-lg);
+  height: var(--pont-avatar-sizing-h-lg);
+}
+
+/* * -------- AVATAR... AFTER -------- * */
+
+[data-pont-avatar]::after {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+
+  border-top-left-radius: var(--pont-avatar-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-border-radius-bl);
+
+  border-top-width: var(--pont-avatar-border-width-t);
+  border-right-width: var(--pont-avatar-border-width-r);
+  border-bottom-width: var(--pont-avatar-border-width-b);
+  border-left-width: var(--pont-avatar-border-width-l);
+
+  border-color: var(--pont-avatar-border-color);
+  border-style: var(--pont-avatar-border-style);
+
+  mix-blend-mode: var(--pont-avatar-effect-mix-blend);
 }
 
 /*
@@ -6158,12 +6517,18 @@ pont-avatar-image {
   height: 100%;
 }
 
-pont-avatar-image > [data-slot="avatar-image"] {
-  aspect-ratio: 1 / 1;
+[data-pont-avatar-image] {
+  aspect-ratio: var(--pont-avatar-image-layout-aspect);
   -o-object-fit: cover;
      object-fit: cover;
 
-  border-radius: var(--pont-avatar-radius);
+  width: 100%;
+  height: 100%;
+
+  border-top-left-radius: var(--pont-avatar-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-border-radius-bl);
 }
 
 /*
@@ -6177,27 +6542,45 @@ pont-avatar-fallback {
   height: 100%;
 }
 
-pont-avatar-fallback > [data-slot="avatar-fallback"] {
+[data-pont-avatar-fallback] {
   display: flex;
 
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   width: 100%;
   height: 100%;
 
-  font-size: var(--pont-avatar-font-size);
-  line-height: var(--pont-avatar-font-line-height);
-  color: var(--pont-avatar-color-text);
+  font-family: var(--pont-avatar-fallback-typography-font);
+  font-size: var(--pont-avatar-fallback-typography-size);
+  font-weight: var(--pont-avatar-fallback-typography-weight);
+  letter-spacing: var(--pont-avatar-fallback-typography-tracking);
+  line-height: var(--pont-avatar-fallback-typography-leading);
+
+  color: var(--pont-avatar-fallback-typography-color);
 
-  background-color: var(--pont-avatar-color-bg);
+  background-color: var(--pont-avatar-fallback-bg-color);
 
-  border-radius: var(--pont-avatar-radius);
+  border-top-left-radius: var(--pont-avatar-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-border-radius-bl);
 }
 
-pont-avatar > [data-slot="avatar"][data-size="sm"] > pont-avatar-fallback > [data-slot="avatar-fallback"] {
-  font-size: var(--pont-avatar-font-size-sm);
-  line-height: var(--pont-avatar-font-line-height-sm);
+/* * SIZES * */
+
+[data-pont-avatar][data-size="sm"] [data-pont-avatar-fallback] {
+  font-size: var(--pont-avatar-fallback-typography-size-sm);
+  font-weight: var(--pont-avatar-fallback-typography-weight-sm);
+  letter-spacing: var(--pont-avatar-fallback-typography-tracking-sm);
+  line-height: var(--pont-avatar-fallback-typography-leading-sm);
+}
+
+[data-pont-avatar][data-size="lg"] [data-pont-avatar-fallback] {
+  font-size: var(--pont-avatar-fallback-typography-size-lg);
+  font-weight: var(--pont-avatar-fallback-typography-weight-lg);
+  letter-spacing: var(--pont-avatar-fallback-typography-tracking-lg);
+  line-height: var(--pont-avatar-fallback-typography-leading-lg);
 }
 
 /*
@@ -6209,12 +6592,16 @@ pont-avatar > [data-slot="avatar"][data-size="sm"] > pont-avatar-fallback > [dat
 pont-avatar-badge {
   display: inline-flex;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
 
-  width: var(--pont-avatar-badge-space-size);
-  height: var(--pont-avatar-badge-space-size);
+  top: var(--pont-avatar-badge-layout-inset-t);
+  right: var(--pont-avatar-badge-layout-inset-r);
+  bottom: var(--pont-avatar-badge-layout-inset-b);
+  left: var(--pont-avatar-badge-layout-inset-l);
+
+  z-index: var(--pont-avatar-badge-layout-z);
+
+  justify-content: center;
+  align-items: center;
 
   -webkit-user-select: none;
 
@@ -6223,52 +6610,63 @@ pont-avatar-badge {
           user-select: none;
 }
 
-pont-avatar > [data-slot="avatar"][data-size="sm"] > pont-avatar-badge {
-  width: var(--pont-avatar-badge-space-size-sm);
-  height: var(--pont-avatar-badge-space-size-sm);
-}
-
-pont-avatar > [data-slot="avatar"][data-size="lg"] > pont-avatar-badge {
-  width: var(--pont-avatar-badge-space-size-lg);
-  height: var(--pont-avatar-badge-space-size-lg);
-}
-
-pont-avatar-badge > [data-slot="avatar-badge"] {
+[data-pont-avatar-badge] {
   display: flex;
-  align-items: center;
+
   justify-content: center;
+  align-items: center;
 
-  width: 100%;
-  height: 100%;
+  width: var(--pont-avatar-badge-sizing-w);
+  height: var(--pont-avatar-badge-sizing-h);
 
-  color: var(--pont-avatar-badge-color-text);
+  color: var(--pont-avatar-badge-typography-color);
 
-  background-color: var(--pont-avatar-badge-color-bg);
+  background-color: var(--pont-avatar-badge-bg-color);
 
-  border-radius: var(--pont-avatar-badge-radius);
+  border-top-left-radius: var(--pont-avatar-badge-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-badge-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-badge-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-badge-border-radius-bl);
 
   box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-avatar-width-ring) var(--pont-avatar-color-ring),
-    0 0 rgb(0 0 0);
+    var(--pont-avatar-badge-effect-inset-shadow),
+    var(--pont-avatar-badge-effect-inset-ring),
+    var(--pont-avatar-badge-effect-ring-offset),
+    var(--pont-avatar-badge-effect-ring), var(--pont-avatar-badge-effect-shadow);
+
+  background-blend-mode: var(--pont-avatar-badge-effect-bg-blend);
 }
 
-/* * AVATAR BADGE ICON CHILD * */
+/* * SIZES * */
 
-pont-avatar > [data-slot="avatar"][data-size="default"] > pont-avatar-badge > [data-slot="avatar-badge"] > svg {
-  width: var(--pont-avatar-badge-icon-space-size);
-  height: var(--pont-avatar-badge-icon-space-size);
+[data-pont-avatar][data-size="sm"] [data-pont-avatar-badge] {
+  width: var(--pont-avatar-badge-sizing-w-sm);
+  height: var(--pont-avatar-badge-sizing-h-sm);
 }
 
-pont-avatar > [data-slot="avatar"][data-size="sm"] > pont-avatar-badge > [data-slot="avatar-badge"] > svg {
-  display: none;
+[data-pont-avatar][data-size="lg"] [data-pont-avatar-badge] {
+  width: var(--pont-avatar-badge-sizing-w-lg);
+  height: var(--pont-avatar-badge-sizing-h-lg);
+}
+
+/* * -------- AVATAR BADGE > ICON -------- * */
+
+[data-pont-avatar-badge] > svg {
+  width: var(--pont-avatar-badge-icon-sizing-w);
+  height: var(--pont-avatar-badge-icon-sizing-h);
+}
+
+/* * SIZES * */
+
+/* Note: shadcn hides the avatar badge icon for the small size */
+[data-pont-avatar][data-size="sm"] [data-pont-avatar-badge] > svg {
+  width: var(--pont-avatar-badge-icon-sizing-w-sm);
+  height: var(--pont-avatar-badge-icon-sizing-h-sm);
 }
 
-pont-avatar > [data-slot="avatar"][data-size="lg"] > pont-avatar-badge > [data-slot="avatar-badge"] > svg {
-  width: var(--pont-avatar-badge-icon-space-size-lg);
-  height: var(--pont-avatar-badge-icon-space-size-lg);
+[data-pont-avatar][data-size="lg"] [data-pont-avatar-badge] > svg {
+  width: var(--pont-avatar-badge-icon-sizing-w-lg);
+  height: var(--pont-avatar-badge-icon-sizing-h-lg);
 }
 
 /*
@@ -6277,22 +6675,24 @@ pont-avatar > [data-slot="avatar"][data-size="lg"] > pont-avatar-badge > [data-s
  * --------------------------------------------------
  */
 
-pont-avatar-group > [data-slot="avatar-group"] {
+[data-pont-avatar-group] {
   display: flex;
 }
 
-pont-avatar-group > [data-slot="avatar-group"] > :not(:last-child) {
+[data-pont-avatar-group] > :not(:last-child) {
+  margin-block-start: 0;
+  margin-block-end: var(--pont-avatar-group-spacing-y);
   margin-inline-start: 0;
-  margin-inline-end: var(--pont-avatar-space-me-in-group);
+  margin-inline-end: var(--pont-avatar-group-spacing-x);
 }
 
-pont-avatar-group > [data-slot="avatar-group"] > pont-avatar > [data-slot="avatar"] {
+/* * -------- AVATAR GROUP > AVATAR -------- * */
+
+[data-pont-avatar-group] > pont-avatar > [data-pont-avatar] {
   box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-avatar-width-ring) var(--pont-avatar-color-ring),
-    0 0 rgb(0 0 0);
+    var(--pont-avatar-effect-inset-shadow),
+    var(--pont-avatar-effect-inset-ring), var(--pont-avatar-effect-ring-offset),
+    var(--pont-avatar-effect-ring), var(--pont-avatar-effect-shadow);
 }
 
 /*
@@ -6305,60 +6705,82 @@ pont-avatar-group-count {
   flex-shrink: 0;
 }
 
-pont-avatar-group-count > [data-slot="avatar-group-count"] {
+[data-pont-avatar-group-count] {
   display: flex;
   position: relative;
 
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
-  width: var(--pont-avatar-space-size);
-  height: var(--pont-avatar-space-size);
+  width: var(--pont-avatar-group-count-sizing-w);
+  height: var(--pont-avatar-group-count-sizing-h);
 
-  font-size: var(--pont-avatar-font-size);
-  line-height: var(--pont-avatar-font-line-height);
-  color: var(--pont-avatar-color-text);
+  font-family: var(--pont-avatar-group-count-typography-font);
+  font-size: var(--pont-avatar-group-count-typography-size);
+  font-weight: var(--pont-avatar-group-count-typography-weight);
+  letter-spacing: var(--pont-avatar-group-count-typography-tracking);
+  line-height: var(--pont-avatar-group-count-typography-leading);
 
-  background-color: var(--pont-avatar-color-bg);
+  color: var(--pont-avatar-group-count-typography-color);
 
-  border-radius: var(--pont-avatar-radius);
+  background-color: var(--pont-avatar-group-count-bg-color);
+
+  border-top-left-radius: var(--pont-avatar-border-radius-tl);
+  border-top-right-radius: var(--pont-avatar-border-radius-tr);
+  border-bottom-right-radius: var(--pont-avatar-border-radius-br);
+  border-bottom-left-radius: var(--pont-avatar-border-radius-bl);
 
   box-shadow:
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 rgb(0 0 0),
-    0 0 0 var(--pont-avatar-width-ring) var(--pont-avatar-color-ring),
-    0 0 rgb(0 0 0);
+    var(--pont-avatar-effect-inset-shadow),
+    var(--pont-avatar-effect-inset-ring), var(--pont-avatar-effect-ring-offset),
+    var(--pont-avatar-effect-ring), var(--pont-avatar-effect-shadow);
 }
 
-pont-avatar-group > [data-slot="avatar-group"]:has(> pont-avatar > [data-slot="avatar"][data-size="sm"]) > pont-avatar-group-count > [data-slot="avatar-group-count"] {
-  width: var(--pont-avatar-space-size-sm);
-  height: var(--pont-avatar-space-size-sm);
+/* * SIZES * */
+
+[data-pont-avatar-group]:has([data-pont-avatar][data-size="sm"])
+  [data-pont-avatar-group-count] {
+  width: var(--pont-avatar-group-count-sizing-w-sm);
+  height: var(--pont-avatar-group-count-sizing-h-sm);
 
-  font-size: var(--pont-avatar-font-size-sm);
-  line-height: var(--pont-avatar-font-line-height-sm);
+  font-size: var(--pont-avatar-group-count-typography-size-sm);
+  font-weight: var(--pont-avatar-group-count-typography-weight-sm);
+  letter-spacing: var(--pont-avatar-group-count-typography-tracking-sm);
+  line-height: var(--pont-avatar-group-count-typography-leading-sm);
 }
 
-pont-avatar-group > [data-slot="avatar-group"]:has(> pont-avatar > [data-slot="avatar"][data-size="lg"]) > pont-avatar-group-count > [data-slot="avatar-group-count"] {
-  width: var(--pont-avatar-space-size-lg);
-  height: var(--pont-avatar-space-size-lg);
+[data-pont-avatar-group]:has([data-pont-avatar][data-size="lg"])
+  [data-pont-avatar-group-count] {
+  width: var(--pont-avatar-group-count-sizing-w-lg);
+  height: var(--pont-avatar-group-count-sizing-h-lg);
+
+  font-size: var(--pont-avatar-group-count-typography-size-lg);
+  font-weight: var(--pont-avatar-group-count-typography-weight-lg);
+  letter-spacing: var(--pont-avatar-group-count-typography-tracking-lg);
+  line-height: var(--pont-avatar-group-count-typography-leading-lg);
 }
 
-/* * AVATAR GROUP COUNT ICON CHILD * */
+/* * -------- AVATAR GROUP COUNT > ICON -------- * */
 
-pont-avatar-group-count > [data-slot="avatar-group-count"] > svg {
-  width: var(--pont-avatar-icon-space-size);
-  height: var(--pont-avatar-icon-space-size);
+[data-pont-avatar-group-count] > svg {
+  width: var(--pont-avatar-group-count-icon-sizing-w);
+  height: var(--pont-avatar-group-count-icon-sizing-h);
 }
 
-pont-avatar-group > [data-slot="avatar-group"]:has(> pont-avatar > [data-slot="avatar"][data-size="sm"]) > pont-avatar-group-count > [data-slot="avatar-group-count"] > svg {
-  width: var(--pont-avatar-icon-space-size-sm);
-  height: var(--pont-avatar-icon-space-size-sm);
+/* * SIZES * */
+
+[data-pont-avatar-group]:has([data-pont-avatar][data-size="sm"])
+  [data-pont-avatar-group-count]
+  > svg {
+  width: var(--pont-avatar-group-count-icon-sizing-w-sm);
+  height: var(--pont-avatar-group-count-icon-sizing-h-sm);
 }
 
-pont-avatar-group > [data-slot="avatar-group"]:has(> pont-avatar > [data-slot="avatar"][data-size="lg"]) > pont-avatar-group-count > [data-slot="avatar-group-count"] > svg {
-  width: var(--pont-avatar-icon-space-size-lg);
-  height: var(--pont-avatar-icon-space-size-lg);
+[data-pont-avatar-group]:has([data-pont-avatar][data-size="lg"])
+  [data-pont-avatar-group-count]
+  > svg {
+  width: var(--pont-avatar-group-count-icon-sizing-w-lg);
+  height: var(--pont-avatar-group-count-icon-sizing-h-lg);
 }
 
 /*
@@ -12813,7 +13235,8 @@ pont-account-info pont-card[part="verification-form"] {
 }
 
 pont-account-info pont-avatar {
-  --pont-avatar-space-size-lg: var(--pont-account-info-avatar-space-size);
+  --pont-avatar-sizing-w-lg: var(--pont-account-info-avatar-space-size);
+  --pont-avatar-sizing-h-lg: var(--pont-account-info-avatar-space-size);
 }
 
 pont-account-info pont-card > [data-slot="card"] {
@@ -12982,7 +13405,8 @@ pont-member-management
   pont-member-management-members-panel
   pont-data-table
   pont-avatar {
-  --pont-avatar-space-size: var(--pont-member-management-avatar-space-size);
+    --pont-avatar-sizing-w: var(--pont-member-management-avatar-space-size);
+    --pont-avatar-sizing-h: var(--pont-member-management-avatar-space-size);
 }
 
 pont-member-management