@getflip/swirl-components 0.130.0 → 0.131.1

package/dist/collection/components/swirl-avatar/swirl-avatar.css

@@ -40,12 +40,29 @@
     outline-color: var(--s-focus-default);
   }
 
-.avatar--size-2xs {
+.avatar--size-3xs {
   width: 1.25rem;
   height: 1.25rem;
   font-size: 0.625rem;
 }
 
+.avatar--size-3xs.avatar--has-icon {
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+  }
+
+.avatar--size-3xs.avatar--variant-square,
+  .avatar--size-3xs.avatar--variant-square .avatar__image,
+  .avatar--size-3xs.avatar--variant-square .avatar__initials {
+    border-radius: 0.25rem;
+  }
+
+.avatar--size-2xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.625rem;
+}
+
 .avatar--size-2xs.avatar--has-icon {
     padding-right: 0.125rem;
     padding-left: 0.125rem;

package/dist/collection/components/swirl-avatar/swirl-avatar.js

@@ -1,7 +1,8 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 const swirlAvatarSizeMappings = {
-  "2xs": 20,
+  "3xs": 20,
+  "2xs": 24,
   xs: 28,
   s: 32,
   m: 40,
@@ -242,7 +243,7 @@ export class SwirlAvatar {
         "mutable": false,
         "complexType": {
           "original": "SwirlAvatarSize",
-          "resolved": "\"2xl\" | \"2xs\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+          "resolved": "\"2xl\" | \"2xs\" | \"3xs\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
           "references": {
             "SwirlAvatarSize": {
               "location": "local",

package/dist/collection/components/swirl-avatar/swirl-avatar.stories.js

@@ -36,7 +36,6 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar", args);
   element.innerHTML = `
-  <swirl-badge aria-label="3 new messages" label="3" size="s" slot="tool"></swirl-badge>
 `;
   return element;
 };

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css

@@ -38,7 +38,7 @@
 .avatar-group__badge {
   position: absolute;
   z-index: 2;
-  right: 0;
+  right: calc(-1 * var(--s-space-4));
   bottom: 0;
   display: inline-flex;
   width: 1.5rem;

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js

@@ -15,7 +15,7 @@ export class SwirlAvatarGroup {
       return;
     }
     const badge = this.badgeEl.querySelector("swirl-badge");
-    badge?.setAttribute("size", "m");
+    badge?.setAttribute("size", "s");
   }
   render() {
     const className = classnames("avatar-group", {

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.spec.js

@@ -6,8 +6,8 @@ describe("swirl-avatar-group", () => {
       components: [SwirlAvatarGroup],
       html: `
         <swirl-avatar-group badge="<swirl-badge aria-label=&quot;3 new messages&quot; label=&quot;3&quot;></swirl-badge>">
-          <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></swirl-avatar>
-          <swirl-avatar label="John Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144" size="s"></swirl-avatar>
+          <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="s"></swirl-avatar>
+          <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="s"></swirl-avatar>
         </swirl-avatar-group>
       `,
     });
@@ -17,12 +17,12 @@ describe("swirl-avatar-group", () => {
           <div class="avatar-group avatar-group--has-badge" role="group">
             <slot></slot>
             <span class="avatar-group__badge">
-              <swirl-badge aria-label="3 new messages" label="3" size="m"></swirl-badge>
+              <swirl-badge aria-label="3 new messages" label="3" size="s"></swirl-badge>
             </span>
           </div>
         </mock:shadow-root>
-       <swirl-avatar label="Jane Doe" size="s" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144"></swirl-avatar>
-       <swirl-avatar label="John Doe" size="s" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144"></swirl-avatar>
+       <swirl-avatar label="Jane Doe" size="s" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"></swirl-avatar>
+       <swirl-avatar label="John Doe" size="s" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b"></swirl-avatar>
       </swirl-avatar-group>
     `);
   });

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js

@@ -23,8 +23,8 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar-group", args);
   element.innerHTML = `
-    <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></swirl-avatar>
-    <swirl-avatar label="John Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144" size="s"></swirl-avatar>
+    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="xs"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="xs"></swirl-avatar>
   `;
   return element;
 };

package/dist/collection/components/swirl-badge/swirl-badge.css

@@ -15,7 +15,7 @@
   max-width: 100%;
   justify-content: center;
   align-items: center;
-  border: 0.125rem solid var(--swirl-badge-border-color);
+  box-shadow: 0 0 0 0.125rem var(--swirl-badge-border-color);
   border-radius: 2rem;
   color: var(--s-text-on-status);
   font-size: var(--s-font-size-sm);
@@ -52,8 +52,8 @@
 
 .badge--size-s .badge__icon > swirl-icon,
     .badge--size-s .badge__icon > *::part(icon) {
-      width: 0.75rem;
-      height: 0.75rem;
+      width: 1rem;
+      height: 1rem;
     }
 
 .badge--size-m {

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
       <swirl-avatar
         slot="media"
         label="Jane Doe"
-        src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144"></swirl-avatar>
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144"></swirl-avatar>
 
       <swirl-stack slot="badges" align="center" orientation="horizontal" spacing="8">
         <swirl-icon-notifications-off size="16"></swirl-icon-notifications-off>