@getflip/swirl-components 0.393.0 → 0.394.1

package/dist/types/components.d.ts

@@ -14,7 +14,7 @@ import { SwirlAppLayoutMobileView, SwirlAppLayoutNavigationExpansionState } from
 import { SwirlAutocompleteSuggestion, SwirlAutocompleteValue } from "./components/swirl-autocomplete/swirl-autocomplete";
 import { SwirlTextInputMode } from "./components/swirl-text-input/swirl-text-input";
 import { SwirlAvatarBadgePosition, SwirlAvatarColor, SwirlAvatarLoading, SwirlAvatarSize, SwirlAvatarToolPosition, SwirlAvatarVariant } from "./components/swirl-avatar/swirl-avatar";
-import { SwirlAvatarGroupLayout } from "./components/swirl-avatar-group/swirl-avatar-group";
+import { SwirlAvatarGroupLayout, SwirlAvatarGroupSemantics } from "./components/swirl-avatar-group/swirl-avatar-group";
 import { SwirlBadgeIntent, SwirlBadgeSize, SwirlBadgeVariant } from "./components/swirl-badge/swirl-badge";
 import { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./components/swirl-banner/swirl-banner";
 import { SwirlBoxBorderColor, SwirlBoxOverflow, SwirlBoxPadding, SwirlBoxPosition } from "./components/swirl-box/swirl-box";
@@ -93,7 +93,7 @@ export { SwirlAppLayoutMobileView, SwirlAppLayoutNavigationExpansionState } from
 export { SwirlAutocompleteSuggestion, SwirlAutocompleteValue } from "./components/swirl-autocomplete/swirl-autocomplete";
 export { SwirlTextInputMode } from "./components/swirl-text-input/swirl-text-input";
 export { SwirlAvatarBadgePosition, SwirlAvatarColor, SwirlAvatarLoading, SwirlAvatarSize, SwirlAvatarToolPosition, SwirlAvatarVariant } from "./components/swirl-avatar/swirl-avatar";
-export { SwirlAvatarGroupLayout } from "./components/swirl-avatar-group/swirl-avatar-group";
+export { SwirlAvatarGroupLayout, SwirlAvatarGroupSemantics } from "./components/swirl-avatar-group/swirl-avatar-group";
 export { SwirlBadgeIntent, SwirlBadgeSize, SwirlBadgeVariant } from "./components/swirl-badge/swirl-badge";
 export { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./components/swirl-banner/swirl-banner";
 export { SwirlBoxBorderColor, SwirlBoxOverflow, SwirlBoxPadding, SwirlBoxPosition } from "./components/swirl-box/swirl-box";
@@ -419,6 +419,10 @@ export namespace Components {
           * @default "diagonal"
          */
         "layout"?: SwirlAvatarGroupLayout;
+        /**
+          * @default "group"
+         */
+        "semantics"?: SwirlAvatarGroupSemantics;
     }
     interface SwirlBadge {
         "icon"?: string;
@@ -9449,6 +9453,10 @@ declare namespace LocalJSX {
           * @default "diagonal"
          */
         "layout"?: SwirlAvatarGroupLayout;
+        /**
+          * @default "group"
+         */
+        "semantics"?: SwirlAvatarGroupSemantics;
     }
     interface SwirlBadge {
         "icon"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.393.0",
+  "version": "0.394.1",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/vscode-data.json

@@ -702,6 +702,18 @@
               "name": "horizontal"
             }
           ]
+        },
+        {
+          "name": "semantics",
+          "description": "",
+          "values": [
+            {
+              "name": "group"
+            },
+            {
+              "name": "list"
+            }
+          ]
         }
       ]
     },

package/dist/swirl-components/p-bf58de31.entry.js

@@ -1 +0,0 @@
-import{r as a,h as r,H as t}from"./p-CWOhMVtL.js";import{c as o}from"./p-orsBiyT_.js";const i=class{constructor(r){a(this,r),this.layout="diagonal",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!Boolean(this.badge))return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");Boolean(r)||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("diagonal"===this.layout?a=>{a.style.position="",a.style.zIndex=""}:(a,r)=>{a.style.position="relative",a.style.zIndex=String(this.avatars.length-r)})}render(){const a=o("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":Boolean(this.badge)}),i=o("avatar-group__badge");return r(t,{key:"44eb5dcca9331aa60a63143ce040ea3f713ecfe0"},r("div",{key:"459e73dfa19bdd06b3865eef1b9fde257a541500","aria-label":this.label,class:a,role:"group"},r("slot",{key:"d91f3fba819973281cc9a1b5b057bcb20a4f3cd4",onSlotchange:this.onSlotChange}),this.badge&&r("span",{key:"f57d98c7b2bac0e0febaeb866be117619cd2ea9a",class:i,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}};i.style=":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";export{i as swirl_avatar_group}