fix(avatar-stack): remove UA margins on figure

.changeset/eleven-ghosts-occur.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**AvatarStack**: override user-agent margins on figure

apps/www/app/_components/avatar-stack/avatar-stack.module.css

@@ -1,39 +1,7 @@
-.avatarStack {
-  --avatar-size: 30px;
-  --gap: 4px;
-  --overlap: -12px;
+.avatarStackOverrides {
   --outline-color: light-dark(transparent, white);
-
-  --captured-length: var(--overlap); /*overlap*/
-  display: flex;
-  padding-block: 1px;
-  transition: --captured-length 0.2s ease;
-  width: calc(var(--avatar-size) * var(--n) + var(--overlap) * (var(--n) - 1));
   filter: drop-shadow(0 0 0.5px var(--outline-color)) drop-shadow(0 0 0.5px var(--outline-color)) drop-shadow(0 0 0.5px var(--outline-color));
-  &:hover {
-    --captured-length: 0px;
-  }
-  &:empty {
-    display: none;
-  }
-  img {
-    width: var(--avatar-size);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    mask: radial-gradient(50% 50% at calc(150% + var(--captured-length)), transparent calc(100% - 1px + var(--gap)), #000 calc(100% + var(--gap)));
-    &:not(:first-child) {
-      margin-left: var(--captured-length);
-    }
-    &:last-child {
-      mask: none;
-    }
-  }
-  .digdir {
-    background-color: #1e2b3c;
-  }
-  .mattilsynet {
-    background-color: #054449;
+  > * {
+    --dsc-avatar-background: transparent;
   }
 }

apps/www/app/_components/avatar-stack/avatar-stack.tsx

@@ -1,8 +1,9 @@
-import type { CSSProperties } from 'react';
+import { Avatar, EXPERIMENTAL_AvatarStack } from '@digdir/designsystemet-react';
 import classes from './avatar-stack.module.css';
 
 type AvatarStackProps = {
   authors: string;
+  expandable?: 'fixed';
 };
 
 const avatarMap = {
@@ -21,7 +22,7 @@ const avatarMap = {
 
 type AvatarKey = keyof typeof avatarMap;
 
-export const AvatarStack = ({ authors }: AvatarStackProps) => {
+export const AvatarStack = ({ authors, expandable }: AvatarStackProps) => {
   const authorsLowercase = authors.toLowerCase();
 
   // Split authors string on common delimiters
@@ -43,18 +44,18 @@ export const AvatarStack = ({ authors }: AvatarStackProps) => {
   }
 
   return (
-    <span
-      className={classes.avatarStack}
-      style={{ '--n': matchedAvatars.length } as CSSProperties}
-      aria-hidden
+    <EXPERIMENTAL_AvatarStack
+      className={classes.avatarStackOverrides}
+      avatarSize='30px'
+      gap='4px'
+      expandable={expandable}
+      overlap={40}
     >
       {matchedAvatars.map((avatarKey) => (
-        <img
-          key={avatarKey}
-          src={`/img/avatars/${avatarMap[avatarKey]}`}
-          alt=''
-        />
+        <Avatar aria-hidden key={avatarKey}>
+          <img src={`/img/avatars/${avatarMap[avatarKey]}`} alt='' />
+        </Avatar>
       ))}
-    </span>
+    </EXPERIMENTAL_AvatarStack>
   );
 };

apps/www/app/_components/blog-card/blog-card.tsx

@@ -63,20 +63,22 @@ export const BlogCard = ({
             <Link to={href}>{title}</Link>
           </Heading>
           <Paragraph data-size={featured ? 'md' : 'sm'}>{desc}</Paragraph>
-          <Paragraph data-size={'md'} className={classes.meta}>
-            <AvatarStack authors={author || ''} />
-            {author ||
-              (date && (
-                <>
-                  <span>{date}</span>
-                  {author && (
-                    <>
-                      <span aria-hidden className={classes.metaSquare} />
-                      <span>{author}</span>
-                    </>
-                  )}
-                </>
-              ))}
+          <Paragraph data-size={'md'} className={classes.meta} asChild>
+            <span>
+              <AvatarStack authors={author || ''} />
+              {author ||
+                (date && (
+                  <>
+                    <span>{date}</span>
+                    {author && (
+                      <>
+                        <span aria-hidden className={classes.metaSquare} />
+                        <span>{author}</span>
+                      </>
+                    )}
+                  </>
+                ))}
+            </span>
           </Paragraph>
         </CardBlock>
       </article>

apps/www/app/routes/best-practices/page.tsx

@@ -89,7 +89,7 @@ export default function BestPractices({
                     href='#article-contributors'
                     aria-label={t('contributors')}
                   >
-                    <AvatarStack authors={author} />
+                    <AvatarStack authors={author} expandable='fixed' />
                   </a>
                   <span>{author}</span>
                 </>

apps/www/app/routes/blog/page.tsx

@@ -101,12 +101,14 @@ export default function Blog({
         <Paragraph className={classes.ingress} data-size='lg' variant='long'>
           {description}
         </Paragraph>
-        <Paragraph data-size='sm' className={classes.meta}>
-          <a href='#article-contributors' aria-label={t('contributors')}>
-            <AvatarStack authors={author} />
-          </a>
-          <span className={classes.authors}>{author}</span>
-          <span className={classes.date}>{formatDate(date, lang)}</span>
+        <Paragraph data-size='sm' className={classes.meta} asChild>
+          <span>
+            <a href='#article-contributors' aria-label={t('contributors')}>
+              <AvatarStack authors={author} expandable='fixed' />
+            </a>
+            <span className={classes.authors}>{author}</span>
+            <span className={classes.date}>{formatDate(date, lang)}</span>
+          </span>
         </Paragraph>
       </div>
       <Image

apps/www/app/routes/patterns/page.tsx

@@ -87,7 +87,10 @@ export default function Patterns({
                     href='#article-contributors'
                     aria-label={t('contributors')}
                   >
-                    <AvatarStack authors={frontmatter.partners} />
+                    <AvatarStack
+                      authors={frontmatter.partners}
+                      expandable='fixed'
+                    />
                   </a>
                   <span className={classes.partners}>
                     {frontmatter.partners}

packages/css/src/avatar-stack.css

@@ -20,6 +20,7 @@
   isolation: isolate;
   padding-block: 1px;
   width: max-content;
+  margin: 0; /*remove user-agent default for figure*/
   transition: --captured-length 0.2s ease;
 
   &:focus-visible {