@grasco/profile-picture 0.1.9 → 0.2.1

package/dist/react.d.cts

@@ -11,6 +11,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
 type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type LoadingStrategy = "lazy" | "eager";
 type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
+type FallbackMode = "initials" | "gradient";
+type ImageMode = "transparent" | "original";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
 interface PresenceConfig {
     /** Current status */
@@ -88,6 +90,8 @@ interface ProfilePictureProps$1 {
     alt?: string;
     /** External customer ID for CDN image loading */
     extCustomerId?: string;
+    /** CDN image mode: 'transparent' for transparent background, 'original' for original background */
+    imageMode?: ImageMode;
     /** Predefined size or custom pixel value */
     size?: Size | number;
     /** Shape variant */
@@ -122,6 +126,8 @@ interface ProfilePictureProps$1 {
     placeholderColor?: string;
     /** Custom fallback text (overrides initials from alt) */
     fallback?: string;
+    /** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
+    fallbackMode?: FallbackMode;
     /** Interactive behavior configuration */
     interactive?: InteractionConfig;
 }
@@ -352,6 +358,11 @@ declare function getCdnBaseUrl(): string;
 /**
  * React-specific props extending the core ProfilePictureProps
  */
+interface ProfilePictureClickDetail {
+    extCustomerId?: string;
+    alt?: string;
+    src?: string;
+}
 interface ProfilePictureProps extends ProfilePictureProps$1 {
     /** Called when image loads successfully */
     onLoad?: () => void;
@@ -361,6 +372,8 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
     onCdnError?: (detail: {
         error: string;
     }) => void;
+    /** Called when the profile picture is clicked (requires interactive.pressable) */
+    onClick?: (detail: ProfilePictureClickDetail) => void;
     /** Additional CSS class names */
     className?: string;
     /** Inline styles */
@@ -372,13 +385,14 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
  * Type-safe wrapper around the profile-picture web component.
  * Uses ref as a prop (React 19+ pattern).
  */
-declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
     ref?: React.Ref<HTMLElement>;
 }): React.ReactElement<{
     ref: React.RefObject<HTMLElement>;
     src: string | undefined;
     alt: string | undefined;
     "ext-customer-id": string | undefined;
+    "image-mode": ImageMode | undefined;
     size: number | Size | undefined;
     variant: Variant | undefined;
     shadow: ShadowPreset | undefined;
@@ -396,12 +410,13 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     placeholder: PlaceholderType | undefined;
     "placeholder-color": string | undefined;
     fallback: string | undefined;
+    "fallback-mode": FallbackMode | undefined;
     interactive: string | undefined;
     class: string | undefined;
     style: React.CSSProperties | undefined;
-}, string | React.JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>> | null;
 declare namespace ProfilePicture {
     var displayName: string;
 }
 
-export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };
+export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, type ProfilePictureClickDetail, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };

package/dist/react.d.ts

@@ -11,6 +11,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
 type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type LoadingStrategy = "lazy" | "eager";
 type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
+type FallbackMode = "initials" | "gradient";
+type ImageMode = "transparent" | "original";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
 interface PresenceConfig {
     /** Current status */
@@ -88,6 +90,8 @@ interface ProfilePictureProps$1 {
     alt?: string;
     /** External customer ID for CDN image loading */
     extCustomerId?: string;
+    /** CDN image mode: 'transparent' for transparent background, 'original' for original background */
+    imageMode?: ImageMode;
     /** Predefined size or custom pixel value */
     size?: Size | number;
     /** Shape variant */
@@ -122,6 +126,8 @@ interface ProfilePictureProps$1 {
     placeholderColor?: string;
     /** Custom fallback text (overrides initials from alt) */
     fallback?: string;
+    /** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
+    fallbackMode?: FallbackMode;
     /** Interactive behavior configuration */
     interactive?: InteractionConfig;
 }
@@ -352,6 +358,11 @@ declare function getCdnBaseUrl(): string;
 /**
  * React-specific props extending the core ProfilePictureProps
  */
+interface ProfilePictureClickDetail {
+    extCustomerId?: string;
+    alt?: string;
+    src?: string;
+}
 interface ProfilePictureProps extends ProfilePictureProps$1 {
     /** Called when image loads successfully */
     onLoad?: () => void;
@@ -361,6 +372,8 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
     onCdnError?: (detail: {
         error: string;
     }) => void;
+    /** Called when the profile picture is clicked (requires interactive.pressable) */
+    onClick?: (detail: ProfilePictureClickDetail) => void;
     /** Additional CSS class names */
     className?: string;
     /** Inline styles */
@@ -372,13 +385,14 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
  * Type-safe wrapper around the profile-picture web component.
  * Uses ref as a prop (React 19+ pattern).
  */
-declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, className, style, ref, }: ProfilePictureProps & {
     ref?: React.Ref<HTMLElement>;
 }): React.ReactElement<{
     ref: React.RefObject<HTMLElement>;
     src: string | undefined;
     alt: string | undefined;
     "ext-customer-id": string | undefined;
+    "image-mode": ImageMode | undefined;
     size: number | Size | undefined;
     variant: Variant | undefined;
     shadow: ShadowPreset | undefined;
@@ -396,12 +410,13 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     placeholder: PlaceholderType | undefined;
     "placeholder-color": string | undefined;
     fallback: string | undefined;
+    "fallback-mode": FallbackMode | undefined;
     interactive: string | undefined;
     class: string | undefined;
     style: React.CSSProperties | undefined;
-}, string | React.JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>> | null;
 declare namespace ProfilePicture {
     var displayName: string;
 }
 
-export { type BadgeConfig, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };
+export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, type ProfilePictureClickDetail, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };

package/dist/react.js

@@ -1,4 +1,4 @@
-import Ae,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Be=Object.defineProperty;var s=(r,n,e,t)=>{for(var o=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(o=(p(n,e,o))||o);return o&&Be(n,e,o),o};var te="grasco-profile-picture-styles",G=false,de=false;function le(){if(G||typeof document>"u")return;if(document.getElementById(te)){G=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){G=true;return}de||(de=true,Ge());}function Ge(){(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>Fe());}function Fe(){if(G||typeof document>"u")return;if(document.getElementById(te)){G=true;return}let r=Ne();if(!r)return;let n=document.createElement("link");n.id=te,n.rel="stylesheet",n.href=r,document.head.appendChild(n),G=true;}function Ne(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let n=import.meta.url;if(n)return `${n.substring(0,n.lastIndexOf("/")+1)}dist/styles.css`}catch{}let r=document.currentScript;if(r?.src){let n=new URL(r.src);return `${n.href.substring(0,n.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var F={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ce={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},ue={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},$={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var N={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},I={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function R(...r){return r.filter(Boolean).join(" ")}function re(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Y(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function ne(r){return Math.round(r*.38)}function ge(r,n){let e;if(n){let o=Math.round(r*.31);e=Math.min(24,Math.max(14,o));}else {let o=Math.round(r*.22);e=Math.min(14,Math.max(8,o));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function fe(r,n){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(n-1)*2)}function me(r,n){return typeof r=="string"?r:n&&r>n?`${n}+`:r.toString()}function he(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let o=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${o}deg ${i}deg`}).join(", ")})`}function He(r){let n=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);n=(n<<5)-n+t,n&=n;}return Math.abs(n)}function be(r,n,e){let o=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${n} 0deg ${o}deg, ${e} ${o}deg 360deg)`}function K(r){let n=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=He(r)%n.length;return n[e]}function xe(r){return typeof r=="number"?r:F[r]??F[I.size]}function oe(r,n,e){let t=e?n-1:n;if(r<=t)return {visible:r,hidden:0,showCounter:false};let o=t-1,i=r-o;return {visible:o,hidden:i,showCounter:true}}function X(r,n,e,t,o){let i=o??n*(1-e);return r*i}function ve(r,n,e){return e==="ltr"?n-r:r+1}function we(r,n,e,t){if(r===0)return 0;if(r===1)return n;let o=t??n*(1-e);return n+o*(r-1)}function ye(r){return r>99?"+99":`+${r}`}function Ce(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function Se(r){if(!(r&&re(r)))return "light";let n=r.replace("#","");n.length===3&&(n=n.split("").map(p=>p+p).join(""));let e=Number.parseInt(n.slice(0,2),16),t=Number.parseInt(n.slice(2,4),16),o=Number.parseInt(n.slice(4,6),16);return (.299*e+.587*t+.114*o)/255>.5?"light":"dark"}function ke(r,n,e,t,o){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${n}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${o}`}function $e(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ie(r,n){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:n,borderStyle:"solid"}}}function Ee(r,n){return n?{className:"",style:{background:n}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function ze(r){return {boxShadow:ue[r]}}var je={shimmer:`
+import Ne,{useRef,useCallback,useEffect,useState}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var We=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(p(o,e,n))||n);return n&&We(o,e,n),n};var se="grasco-profile-picture-styles",N=false,me=false;function he(){if(N||typeof document>"u")return;if(document.getElementById(se)){N=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){N=true;return}me||(me=true,Je());}function Je(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ye());}function Ye(){if(N||typeof document>"u")return;if(document.getElementById(se)){N=true;return}let r=Ke();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),N=true;}function Ke(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let o=import.meta.url;if(o)return `${o.substring(0,o.lastIndexOf("/")+1)}styles.css`}catch{}let r=document.currentScript;if(r?.src){let o=new URL(r.src);return `${o.href.substring(0,o.href.lastIndexOf("/")+1)}dist/styles.css`}return null}var H={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},be={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},xe={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},I={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var j={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},E={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function z(...r){return r.filter(Boolean).join(" ")}function ye(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function Q(r){let e=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return e.length===0?"?":e.length===1?e[0].slice(0,1).toUpperCase():(e[0][0]+(e.at(-1)?.[0]??"")).toUpperCase()}function pe(r){return Math.round(r*.38)}function we(r,o){let e;if(o){let n=Math.round(r*.31);e=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);e=Math.min(14,Math.max(8,n));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function Ce(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Se(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function ke(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let n=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${n}deg ${i}deg`}).join(", ")})`}function Z(r){let o=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);o=(o<<5)-o+t,o&=o;}return Math.abs(o)}function $e(r,o,e){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${e} ${n}deg 360deg)`}function _(r){let o=["linear-gradient(135deg, #667eea 0%, #764ba2 100%)","linear-gradient(135deg, #f093fb 0%, #f5576c 100%)","linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)","linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)","linear-gradient(135deg, #fa709a 0%, #fee140 100%)","linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)","linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)","linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)","linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%)","linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)"],e=Z(r)%o.length;return o[e]}var ve=[["#f4a261","#e76f51","#d4a5a5"],["#f2a9b0","#e07a5f","#d4c4a8"],["#c9b1d0","#e8a0bf","#f0d1ce"],["#89c2d9","#a3c4bc","#d5c6e0"],["#f7c59f","#f2a07b","#efcfe3"],["#b5a7d5","#d4a5c9","#f0c3d7"],["#7ec8c8","#6a9fb5","#c2b5d6"],["#f0b3ba","#d4a5c9","#c9d1d9"],["#e8b960","#d4956a","#c9a5b8"],["#a7c4a0","#c9d4a5","#e0c9b1"],["#c4819b","#d9a5b8","#b5aed4"],["#f0c27f","#e0a87c","#d4b5c9"]];function Ie(r){let o=Z(r),e=ve[o%ve.length],t=Z(r+"pos1"),n=Z(r+"pos2"),i=20+o%61,p=20+(o>>4)%61,d=20+t%61,c=20+(t>>4)%61,g=20+n%61,f=20+(n>>4)%61;return [`radial-gradient(circle at ${i}% ${p}%, ${e[0]} 0%, transparent 70%)`,`radial-gradient(circle at ${d}% ${c}%, ${e[1]} 0%, transparent 70%)`,`radial-gradient(circle at ${g}% ${f}%, ${e[2]} 0%, transparent 70%)`].join(", ")}function Ee(r){return typeof r=="number"?r:H[r]??H[E.size]}function de(r,o,e){let t=e?o-1:o;if(r<=t)return {visible:r,hidden:0,showCounter:false};let n=t-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function ee(r,o,e,t,n){let i=n??o*(1-e);return r*i}function ze(r,o,e){return e==="ltr"?o-r:r+1}function De(r,o,e,t){if(r===0)return 0;if(r===1)return o;let n=t??o*(1-e);return o+n*(r-1)}function Te(r){return r>99?"+99":`+${r}`}function Me(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function Pe(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${e}_${t}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Re(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ae(r,o){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4",5:"np:border-[5px]",6:"np:border-[6px]",8:"np:border-8"}[r],style:{borderColor:o,borderStyle:"solid"}}}function Le(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function Ue(r){return {boxShadow:xe[r]}}var Xe={shimmer:`
 @keyframes pp-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -36,8 +36,8 @@ import Ae,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
   0% { transform: scale(0.8); opacity: 0; }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); opacity: 1; }
-}`},Ve=Object.values(je).join(`
-`),We=`
+}`},Ze=Object.values(Xe).join(`
+`),Qe=`
 /* Profile Picture Component Styles */
 .pp-container {
   --pp-transition-duration: 200ms;
@@ -53,6 +53,7 @@ import Ae,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
 }
 
 /* Inner container for image clipping - allows badges/rings to overflow */
+/* Background is applied here (not on container) to prevent sub-pixel bleed-through */
 .pp-inner {
   position: absolute;
   inset: 0;
@@ -240,8 +241,8 @@ import Ae,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
     transition: none !important;
   }
 }
-`,Te=`${Ve}
-${We}`,De=`
+`,Be=`${Ze}
+${Qe}`,Oe=`
 @keyframes np-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
@@ -251,7 +252,7 @@ ${We}`,De=`
   background-size: 200% 100%;
   animation: np-shimmer 1.5s infinite;
 }
-`;function Pe(r,n=.3){if(re(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),o=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${o}, ${n})`}return `0 0 20px 0 ${r}`}var qe=`
+`;function Ge(r,o=.3){if(ye(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var _e=`
 @keyframes ppg-tooltip-in {
   from {
     opacity: 0;
@@ -302,7 +303,7 @@ ${We}`,De=`
     opacity: 1;
   }
 }
-`,Je=`
+`,et=`
 /* Profile Picture Group Container */
 .ppg-container {
   --ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -747,29 +748,34 @@ ${We}`,De=`
     box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
   }
 }
-`,Re=`${qe}
-${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=$.size;this.variant=$.variant;this.shadow=$.shadow;this.border=false;this.borderWidth=$.borderWidth;this.borderColor=$.borderColor;this.rotation=0;this.loading=$.loading;this.placeholder=$.placeholder;this.placeholderColor=$.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Te,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:F[e]??F[$.size]}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&(this.cdnLoadFailed||!this.previousExtCustomerId)&&(this.previousExtCustomerId||(this.previousExtCustomerId=this.extCustomerId),this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src),(e.has("extCustomerId")||e.has("size")||e.has("bgColor"))&&this.extCustomerId!==this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Ce(this.pixelSize),t=Se(this.bgColor),o=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ke(a.cdnBaseUrl,this.extCustomerId,e,t,o);}getContainerStyles(){let e=Ee(this.bgColor,this.bgGradient),t=this.border?Ie(this.borderWidth,this.borderColor):null,o=ze(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Pe(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:R("pp-container",$e(this.variant),e.className,t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:N[this.variant],...e.style,...t?.style,...o,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
-      ${this.placeholder==="shimmer"?html`<style>${De}</style>`:nothing}
+`,Fe=`${_e}
+${et}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=I.size;this.variant=I.variant;this.shadow=I.shadow;this.border=false;this.borderWidth=I.borderWidth;this.borderColor=I.borderColor;this.rotation=0;this.loading=I.loading;this.placeholder=I.placeholder;this.placeholderColor=I.placeholderColor;this.imageMode="original";this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.randomSeed=Math.random().toString(36).slice(2);this.RETRY_DELAY_MS=3e4;}static{this.stylesInjected=false;}static{this.cdnBaseUrl="";}static{this.instances=new Set;}static setCdnBaseUrl(e){a.cdnBaseUrl=e,a.instances.forEach(t=>{t.extCustomerId&&!t.cdnImageUrl&&(t.cdnLoadFailed=false,t.retryTimeoutId&&(clearTimeout(t.retryTimeoutId),t.retryTimeoutId=void 0),t.previousExtCustomerId||(t.previousExtCustomerId=t.extCustomerId),t.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:t=>setTimeout(t,1))(()=>{if(a.stylesInjected)return;let t=document.createElement("style");t.textContent=Be,document.head.appendChild(t),a.stylesInjected=true;});}get pixelSize(){let e=this.size;return typeof e=="number"?e:H[e]??H[I.size]}get gradientSeed(){return this.extCustomerId||this.alt||this.src||this.randomSeed}connectedCallback(){super.connectedCallback(),a.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&a.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(e){super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,n=e.has("size")||e.has("imageMode");(t||n&&this.extCustomerId)&&(this.previousExtCustomerId=this.extCustomerId,this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.isLoaded=false,this.hasError=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage());}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.interactive?.pressable&&this.dispatchEvent(new CustomEvent("profile-picture-click",{bubbles:true,composed:true,detail:{extCustomerId:this.extCustomerId,alt:this.alt,src:this.src}}));}handleKeyDown(e){this.interactive?.pressable&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e));}handleError(){if(this.cdnImageUrl&&!this.cdnLoadFailed){this.cdnLoadFailed=true,this.cdnImageUrl=void 0,this.dispatchEvent(new CustomEvent("cdn-error",{bubbles:true,composed:true,detail:{error:"Image load failed"}})),this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.retryTimeoutId=setTimeout(()=>{this.retryTimeoutId=void 0,this.extCustomerId&&a.cdnBaseUrl&&(this.cdnLoadFailed=false,this.hasError=false,this.isLoaded=false,this.loadCdnImage());},this.RETRY_DELAY_MS);return}this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}loadCdnImage(){if(!(this.extCustomerId&&a.cdnBaseUrl)){this.cdnLoadFailed=true;return}let e=Me(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=Pe(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Le(this.bgColor,this.bgGradient),t=this.border?Ae(this.borderWidth,this.borderColor):null,n=Ue(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Ge(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:z("pp-container",Re(this.variant),t?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:j[this.variant],...t?.style,...n,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0},innerStyles:e.style??{},innerClasses:e.className}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
+      ${this.placeholder==="shimmer"?html`<style>${Oe}</style>`:nothing}
       <div
-        class=${R("np:absolute np:inset-0",e)}
+        class=${z("np:absolute np:inset-0",e)}
         style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
       </div>
-    `}renderFallback(){if(this.fallback)return html`
+    `}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=Ie(this.gradientSeed);return html`
+        <div
+          class="pp-fallback np:absolute np:inset-0"
+          style=${styleMap({background:e?"transparent":n})}>
+        </div>
+      `}if(this.fallback)return html`
         <span
           class="pp-fallback"
-          style=${styleMap({fontSize:`${ne(this.pixelSize)}px`})}>
+          style=${styleMap({fontSize:`${pe(this.pixelSize)}px`})}>
           ${this.fallback}
         </span>
-      `;if(this.alt){let t=K(this.alt);return html`
+      `;if(this.alt){let n=_(this.alt);return html`
         <div
           class="pp-fallback np:absolute np:inset-0"
-          style=${styleMap({background:this.bgColor??t,fontSize:`${ne(this.pixelSize)}px`})}>
-          ${Y(this.alt)}
+          style=${styleMap({background:e?"transparent":n,fontSize:`${pe(this.pixelSize)}px`})}>
+          ${Q(this.alt)}
         </div>
-      `}let e=this.pixelSize*.5;return html`
+      `}let t=this.pixelSize*.5;return html`
       <svg
         class="pp-fallback-icon"
-        style="width: ${e}px; height: ${e}px;"
+        style="width: ${t}px; height: ${t}px;"
         fill="currentColor"
         viewBox="0 0 24 24">
         <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
@@ -782,24 +788,24 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         decoding="async"
         @load=${this.handleLoad}
         @error=${this.handleError}
-        class=${R("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        class=${z("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
         draggable="false" />
-    `}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,o=e+t,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,g=this.ring.color??"#30D158",f=this.ring.emptyColor??"#8E8E93";i=be(d,g,f);}else this.ring.gradient&&this.ring.gradient.length>0?i=he(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
+    `}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,t=this.ring.gap??3,n=e+t,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,c=this.ring.color??"#30D158",g=this.ring.emptyColor??"#8E8E93";i=$e(d,c,g);}else this.ring.gradient&&this.ring.gradient.length>0?i=ke(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
       <div
-        class=${R("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
-        style=${styleMap({inset:`-${o}px`,padding:`${e}px`,background:i,borderRadius:N[this.variant]})}>
+        class=${z("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
+        style=${styleMap({inset:`-${n}px`,padding:`${e}px`,background:i,borderRadius:j[this.variant]})}>
       </div>
-    `}getCornerOffset(){let e=this.border?this.borderWidth:0,t=this.pixelSize*.08,i={circle:1,square:.5,rounded:.8,squircle:1.2}[this.variant];return Math.round(t*i-e*.5)}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=fe(this.pixelSize,e),o=ce[this.presence.status],i=this.getCornerOffset();return html`
+    `}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,t=Ce(this.pixelSize,e),n=be[this.presence.status],p=this.getCornerOffset()-t/2;return html`
       <div
-        class=${R("pp-presence",this.presence.animate&&"pp-presence-animated")}
-        style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:o,bottom:`${i}px`,right:`${i}px`,color:o})}
+        class=${z("pp-presence",this.presence.animate&&"pp-presence-animated")}
+        style=${styleMap({width:`${t}px`,height:`${t}px`,backgroundColor:n,bottom:`${p}px`,right:`${p}px`,color:n})}
         title=${this.presence.status}>
       </div>
-    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,o=this.badge.icon!==void 0,i=t||o,{size:p,fontSize:d}=ge(this.pixelSize,i),g=this.badge.bgColor??"#22c55e",f=this.badge.color??"#ffffff",m=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?me(this.badge.content,this.badge.max):null,v=o?this.badge.icon:null,T=d*.9,c=`${-this.getCornerOffset()}px`,L={"top-left":{top:c,left:c},"top-center":{top:c,left:"50%",transform:"translateX(-50%)"},"top-right":{top:c,right:c},"bottom-left":{bottom:c,left:c},"bottom-center":{bottom:c,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:c,right:c}};return html`
+    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",t=this.badge.content!==void 0,n=this.badge.icon!==void 0,i=t||n,{size:p,fontSize:d}=we(this.pixelSize,i),c=this.badge.bgColor??"#22c55e",g=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",h=t&&this.badge.content!==void 0?Se(this.badge.content,this.badge.max):null,S=n?this.badge.icon:null,P=d*.9,m=`${this.getCornerOffset()-p/2}px`,R={"top-left":{top:m,left:m},"top-center":{top:m,left:"50%",transform:"translateX(-50%)"},"top-right":{top:m,right:m},"bottom-left":{bottom:m,left:m},"bottom-center":{bottom:m,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:m,right:m}};return html`
       <div
-        class=${R("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",o&&"pp-badge-with-icon")}
-        style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:g,color:f,borderRadius:m,"--pp-badge-glow-color":g,gap:o&&t?"4px":"0",...L[e]})}>
-        ${v?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${T}px`})}>${v}</span>`:nothing}
+        class=${z("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",n&&"pp-badge-with-icon")}
+        style=${styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:c,color:g,borderRadius:f,"--pp-badge-glow-color":c,gap:n&&t?"4px":"0",...R[e]})}>
+        ${S?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${P}px`})}>${S}</span>`:nothing}
         ${h??nothing}
       </div>
     `}render(){let e=this.getContainerStyles(),t=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
@@ -809,6 +815,8 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         tabindex=${t??nothing}
         role=${this.interactive?.pressable?"button":nothing}
         aria-label=${this.alt||nothing}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
         data-profile-picture>
 
         <!-- Ring Effect (behind everything) -->
@@ -816,8 +824,8 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
 
         <!-- Inner container for image clipping -->
         <div
-          class="pp-inner"
-          style=${styleMap({borderRadius:N[this.variant]})}>
+          class=${z("pp-inner",e.innerClasses)}
+          style=${styleMap({borderRadius:j[this.variant],...e.innerStyles})}>
           <!-- Placeholder -->
           ${this.renderPlaceholder()}
 
@@ -831,7 +839,7 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         <!-- Presence Indicator -->
         ${this.renderPresence()}
       </div>
-    `}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var H=a;customElements.get("profile-picture")||customElements.define("profile-picture",H);var se=false;function Xe(){if(se||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>{if(se)return;let n=document.createElement("style");n.textContent=Re,document.head.appendChild(n),se=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=I.max;this.direction=I.direction;this.overlap=I.overlap;this.size=I.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=I.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return Xe(),this}get pixelSize(){return xe(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??I.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??I.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,o)=>{let i=(g,f)=>{let m=f??g,h=t[g];return h!=null&&h!==""?String(h):t.getAttribute(m)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${o+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:o,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),o=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,g=window.innerHeight;if(d<480){let y=html`
+    `}};s([property({type:String})],a.prototype,"src"),s([property({type:String})],a.prototype,"alt"),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId"),s([property({type:String})],a.prototype,"size"),s([property({type:String})],a.prototype,"variant"),s([property({type:String})],a.prototype,"shadow"),s([property({type:Boolean})],a.prototype,"border"),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth"),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor"),s([property({type:Number})],a.prototype,"rotation"),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor"),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient"),s([property({type:Object,attribute:"ring",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"ring"),s([property({type:Object,attribute:"presence",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"presence"),s([property({type:Object,attribute:"glow",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"glow"),s([property({type:Object,attribute:"badge",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"badge"),s([property({type:String})],a.prototype,"loading"),s([property({type:String})],a.prototype,"placeholder"),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor"),s([property({type:String})],a.prototype,"fallback"),s([property({type:String,attribute:"fallback-mode"})],a.prototype,"fallbackMode"),s([property({type:String,attribute:"image-mode"})],a.prototype,"imageMode"),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:e=>{if(e)try{return JSON.parse(e)}catch{return}},toAttribute:e=>e?JSON.stringify(e):null}})],a.prototype,"interactive"),s([state()],a.prototype,"isLoaded"),s([state()],a.prototype,"hasError"),s([state()],a.prototype,"cdnImageUrl"),s([state()],a.prototype,"cdnLoadFailed");var V=a;customElements.get("profile-picture")||customElements.define("profile-picture",V);var ue=false;function nt(){if(ue||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(ue)return;let o=document.createElement("style");o.textContent=Fe,document.head.appendChild(o),ue=true;});}var b=class extends LitElement{constructor(){super(...arguments);this.max=E.max;this.direction=E.direction;this.overlap=E.overlap;this.size=E.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=E.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return nt(),this}get pixelSize(){return Ee(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??E.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??E.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,n)=>{let i=(c,g)=>{let f=g??c,h=t[c];return h!=null&&h!==""?String(h):t.getAttribute(f)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${n+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:n,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,e.length*56+60),d=window.innerWidth,c=window.innerHeight;if(d<480){let k=html`
         <div
           class="ppg-backdrop ppg-backdrop-visible"
           style="pointer-events: auto; background: rgba(0,0,0,0.5);"
@@ -852,10 +860,10 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
             class="ppg-dropdown-list"
             style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
           >
-            ${e.map(D=>this.renderDropdownItem(D))}
+            ${e.map(q=>this.renderDropdownItem(q))}
           </div>
         </div>
-      `;render(y,this.portalContainer);return}let m=g-t.bottom-o,h=t.top-o,v=d-t.left,T=t.right,x=this.dropdownPosition;x==="bottom"&&m<p&&h>m?x="top":x==="top"&&h<p&&m>h&&(x="bottom");let c;v>=i?c=t.left:T>=i?c=t.right-i:c=(d-i)/2,c=Math.max(8,Math.min(c,d-i-8));let L=x==="bottom"?t.bottom+o:void 0,U=x==="top"?g-t.top+o:void 0,j=html`
+      `;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,P=t.right,x=this.dropdownPosition;x==="bottom"&&f<p&&h>f?x="top":x==="top"&&h<p&&f>h&&(x="bottom");let v;S>=i?v=t.left:P>=i?v=t.right-i:v=(d-i)/2,v=Math.max(8,Math.min(v,d-i-8));let m=x==="bottom"?t.bottom+n:void 0,R=x==="top"?c-t.top+n:void 0,W=html`
       <div
         class="ppg-backdrop"
         style="pointer-events: auto;"
@@ -864,7 +872,7 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
       ></div>
       <div
         class="ppg-dropdown ppg-dropdown-portal"
-        style=${styleMap({position:"fixed",pointerEvents:"auto",top:L!==void 0?`${L}px`:"auto",bottom:U!==void 0?`${U}px`:"auto",left:`${c}px`,width:`${i}px`})}
+        style=${styleMap({position:"fixed",pointerEvents:"auto",top:m!==void 0?`${m}px`:"auto",bottom:R!==void 0?`${R}px`:"auto",left:`${v}px`,width:`${i}px`})}
         data-position=${x}
         role="menu"
         aria-label="Hidden users"
@@ -876,10 +884,10 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
           class="ppg-dropdown-list"
           style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
         >
-          ${e.map(y=>this.renderDropdownItem(y))}
+          ${e.map(k=>this.renderDropdownItem(k))}
         </div>
       </div>
-    `;render(j,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let o=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:o.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,o){let i=X(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=ve(t,o,this.direction),d=e.variant??"circle",g=e.shadow??"none",f=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
+    `;render(W,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,n){let i=ee(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=ze(t,n,this.direction),d=e.variant??"circle",c=e.shadow??"none",g=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
       <div
         class="ppg-avatar-wrapper"
         style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
@@ -887,19 +895,19 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         role="button"
         aria-label=${e.name}
         @click=${()=>this.handleAvatarClick(e)}
-        @mouseenter=${m=>this.handleAvatarHover(e,m)}
+        @mouseenter=${f=>this.handleAvatarHover(e,f)}
         @mouseleave=${this.handleAvatarLeave}
-        @keydown=${m=>this.handleKeyDown(m,()=>this.handleAvatarClick(e))}
+        @keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(e))}
       >
-        ${this.renderProfilePicture(e,d,g,f)}
+        ${this.renderProfilePicture(e,d,c,g)}
       </div>
-    `}renderProfilePicture(e,t,o,i){return html`
+    `}renderProfilePicture(e,t,n,i){return html`
       <profile-picture
         .src=${e.src||void 0}
         .alt=${e.name}
         .size=${this.pixelSize}
         .variant=${t}
-        .shadow=${o}
+        .shadow=${n}
         .rotation=${i}
         .extCustomerId=${e.extCustomerId}
         ?border=${e.border}
@@ -910,16 +918,16 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         data-user-id=${e.id??""}
         data-status=${e.status??""}
       ></profile-picture>
-    `}renderCounter(e,t,o){return html`
+    `}renderCounter(e,t,n){return html`
       <button
         class="ppg-counter"
         style=${styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
         aria-label=${`${e} more users`}
         aria-expanded=${this.dropdownOpen}
         aria-haspopup="true"
-        @click=${()=>this.handleCounterClick(o)}
+        @click=${()=>this.handleCounterClick(n)}
       >
-        ${ye(e)}
+        ${Te(e)}
       </button>
     `}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
       <button
@@ -943,16 +951,16 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
       </button>
-    `}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,o=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,d=t.top-i.top,g=t.bottom-i.top,f=this.tooltipPosition==="top";return html`
+    `}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,n=8,i=this.getBoundingClientRect(),p=t.left-i.left+t.width/2,d=t.top-i.top,c=t.bottom-i.top,g=this.tooltipPosition==="top";return html`
       <div
         class="ppg-tooltip"
-        style=${styleMap({top:f?"auto":`${g+o}px`,bottom:f?`${i.height-d+o}px`:"auto",left:`${p}px`})}
+        style=${styleMap({top:g?"auto":`${c+n}px`,bottom:g?`${i.height-d+n}px`:"auto",left:`${p}px`})}
         data-position=${this.tooltipPosition}
         role="tooltip"
       >
         ${e.name}
       </div>
-    `}renderDropdownItem(e){let t=K(e.name),o=e.src||e.extCustomerId;return html`
+    `}renderDropdownItem(e){let t=_(e.name),n=e.src||e.extCustomerId;return html`
       <div
         class="ppg-dropdown-item"
         role="menuitem"
@@ -960,7 +968,7 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         @click=${()=>this.handleDropdownItemClick(e)}
         @keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(e))}
       >
-        ${o?html`<profile-picture
+        ${n?html`<profile-picture
               class="ppg-dropdown-avatar"
               .src=${e.src||void 0}
               .alt=${e.name}
@@ -972,7 +980,7 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
               class="ppg-dropdown-avatar-fallback"
               style=${styleMap({background:t})}
             >
-              ${Y(e.name)}
+              ${Q(e.name)}
             </div>`}
         <div class="ppg-dropdown-info">
           <div class="ppg-dropdown-name">${e.name}</div>
@@ -987,10 +995,10 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
               `:nothing}
         </div>
       </div>
-    `}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:o}=oe(this.users.length,this.max,this.showAddButton),i=this.users.slice(o);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:o}=oe(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;o&&d++,this.showAddButton&&d++;let g=we(d,this.pixelSize,this.overlap,this.spacing),f=o?X(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,m=X(e+(o?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
+    `}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}updated(e){super.updated(e);let t=this.querySelector(".ppg-counter");if(t&&(this.counterRef=t),this.dropdownOpen&&this.portalContainer){let{visible:n}=de(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=de(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),p=this.users.slice(e),d=e;n&&d++,this.showAddButton&&d++;let c=De(d,this.pixelSize,this.overlap,this.spacing),g=n?ee(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=ee(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
       <div
-        class=${R("ppg-container",this.animated&&"ppg-animated")}
-        style=${styleMap({width:`${g}px`,height:`${this.pixelSize}px`})}
+        class=${z("ppg-container",this.animated&&"ppg-animated")}
+        style=${styleMap({width:`${c}px`,height:`${this.pixelSize}px`})}
         role="group"
         aria-label="User avatars"
       >
@@ -998,16 +1006,16 @@ ${Je}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         <slot style="display: none;"></slot>
 
         <!-- Visible avatars -->
-        ${i.map((h,v)=>this.renderAvatar(h,v,e))}
+        ${i.map((h,S)=>this.renderAvatar(h,S,e))}
 
         <!-- Counter -->
-        ${o?this.renderCounter(t,f,p):nothing}
+        ${n?this.renderCounter(t,g,p):nothing}
 
         <!-- Add button -->
-        ${this.showAddButton?this.renderAddButton(m):nothing}
+        ${this.showAddButton?this.renderAddButton(f):nothing}
 
         <!-- Tooltip -->
         ${this.renderTooltip()}
       </div>
-    `}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);var Ue=Ae.forwardRef(({max:r,direction:n,overlap:e,size:t,spacing:o,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:g,animated:f,rotationAmount:m,onAvatarClick:h,onAvatarHover:v,onCounterClick:T,onDropdownItemClick:x,onAddClick:c,className:L,style:U,children:j},y)=>{let D=useRef(null),M=useCallback(l=>{h?.(l.detail.user);},[h]),B=useCallback(l=>{v?.(l.detail.user);},[v]),O=useCallback(l=>{let k=l;T?.(k.detail.hiddenUsers,k.detail.open);},[T]),V=useCallback(l=>{x?.(l.detail.user);},[x]),W=useCallback(()=>{c?.();},[c]);return useEffect(()=>{let l=D.current;if(l)return l.addEventListener("avatar-click",M),l.addEventListener("avatar-hover",B),l.addEventListener("counter-click",O),l.addEventListener("dropdown-item-click",V),l.addEventListener("add-click",W),()=>{l.removeEventListener("avatar-click",M),l.removeEventListener("avatar-hover",B),l.removeEventListener("counter-click",O),l.removeEventListener("dropdown-item-click",V),l.removeEventListener("add-click",W);}},[M,B,O,V,W]),useEffect(()=>{typeof y=="function"?y(D.current):y&&(y.current=D.current);},[y]),Ae.createElement("profile-picture-group",{ref:D,max:r,direction:n,overlap:e,size:t,spacing:o,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":d||void 0,"add-button-label":g,animated:f,"rotation-amount":m,class:L,style:U},j)});Ue.displayName="ProfilePictureGroup";function Rt(r){H.setCdnBaseUrl(r);}function At(){return H.getCdnBaseUrl()}function et({src:r,alt:n,extCustomerId:e,size:t,variant:o,shadow:i,border:p,borderWidth:d,borderColor:g,rotation:f,bgColor:m,bgGradient:h,glow:v,ring:T,presence:x,badge:c,loading:L,placeholder:U,placeholderColor:j,fallback:y,interactive:D,onLoad:M,onError:B,onCdnError:O,className:V,style:W,ref:l}){let k=useRef(null),Q=useCallback(()=>{M?.();},[M]),_=useCallback(()=>{B?.();},[B]),ee=useCallback(P=>{O?.(P.detail);},[O]);return useEffect(()=>{let P=k.current;if(P)return P.addEventListener("load",Q),P.addEventListener("error",_),P.addEventListener("cdn-error",ee),()=>{P.removeEventListener("load",Q),P.removeEventListener("error",_),P.removeEventListener("cdn-error",ee);}},[Q,_,ee]),useEffect(()=>{typeof l=="function"?l(k.current):l&&(l.current=k.current);},[l]),Ae.createElement("profile-picture",{ref:k,src:r||void 0,alt:n,"ext-customer-id":e,size:t,variant:o,shadow:i,border:p||void 0,"border-width":d,"border-color":g,rotation:f,"bg-color":m,"bg-gradient":h,glow:v?JSON.stringify(v):void 0,ring:T?JSON.stringify(T):void 0,presence:x?JSON.stringify(x):void 0,badge:c?JSON.stringify(c):void 0,loading:L,placeholder:U,"placeholder-color":j,fallback:y,interactive:D?JSON.stringify(D):void 0,class:V,style:W})}et.displayName="ProfilePicture";le();export{et as ProfilePicture,Ue as ProfilePictureGroup,At as getCdnBaseUrl,Rt as setCdnBaseUrl};//# sourceMappingURL=react.js.map
+    `}};s([property({type:Number})],b.prototype,"max"),s([property({type:String})],b.prototype,"direction"),s([property({type:Number})],b.prototype,"overlap"),s([property({type:String})],b.prototype,"size"),s([property({type:Number})],b.prototype,"spacing"),s([property({type:Object})],b.prototype,"tooltip"),s([property({type:Object})],b.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel"),s([property({type:Boolean})],b.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount"),s([state()],b.prototype,"users"),s([state()],b.prototype,"dropdownOpen"),s([state()],b.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",b);function at(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var He=Ne.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:c,animated:g,rotationAmount:f,onAvatarClick:h,onAvatarHover:S,onCounterClick:P,onDropdownItemClick:x,onAddClick:v,className:m,style:R,children:W},k)=>{let q=at(),L=useRef(null),U=useCallback(u=>{h?.(u.detail.user);},[h]),B=useCallback(u=>{S?.(u.detail.user);},[S]),O=useCallback(u=>{let A=u;P?.(A.detail.hiddenUsers,A.detail.open);},[P]),G=useCallback(u=>{x?.(u.detail.user);},[x]),F=useCallback(()=>{v?.();},[v]);return useEffect(()=>{let u=L.current;if(u)return u.addEventListener("avatar-click",U),u.addEventListener("avatar-hover",B),u.addEventListener("counter-click",O),u.addEventListener("dropdown-item-click",G),u.addEventListener("add-click",F),()=>{u.removeEventListener("avatar-click",U),u.removeEventListener("avatar-hover",B),u.removeEventListener("counter-click",O),u.removeEventListener("dropdown-item-click",G),u.removeEventListener("add-click",F);}},[U,B,O,G,F]),useEffect(()=>{typeof k=="function"?k(L.current):k&&(k.current=L.current);},[k]),q?Ne.createElement("profile-picture-group",{ref:L,max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i?JSON.stringify(i):void 0,dropdown:p?JSON.stringify(p):void 0,"show-add-button":d||void 0,"add-button-label":c,animated:g,"rotation-amount":f,class:m,style:R},W):null});He.displayName="ProfilePictureGroup";function lt(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function Ht(r){V.setCdnBaseUrl(r);}function jt(){return V.getCdnBaseUrl()}function ct({src:r,alt:o,extCustomerId:e,imageMode:t,size:n,variant:i,shadow:p,border:d,borderWidth:c,borderColor:g,rotation:f,bgColor:h,bgGradient:S,glow:P,ring:x,presence:v,badge:m,loading:R,placeholder:W,placeholderColor:k,fallback:q,fallbackMode:L,interactive:U,onLoad:B,onError:O,onCdnError:G,onClick:F,className:u,style:A,ref:J}){let je=lt(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{O?.();},[O]),ie=useCallback(y=>{G?.(y.detail);},[G]),ae=useCallback(y=>{F?.(y.detail);},[F]);return useEffect(()=>{let y=X.current;if(y)return y.addEventListener("load",ne),y.addEventListener("error",oe),y.addEventListener("cdn-error",ie),y.addEventListener("profile-picture-click",ae),()=>{y.removeEventListener("load",ne),y.removeEventListener("error",oe),y.removeEventListener("cdn-error",ie),y.removeEventListener("profile-picture-click",ae);}},[ne,oe,ie,ae]),useEffect(()=>{typeof J=="function"?J(X.current):J&&(J.current=X.current);},[J]),je?Ne.createElement("profile-picture",{ref:X,src:r||void 0,alt:o,"ext-customer-id":e,"image-mode":t,size:n,variant:i,shadow:p,border:d||void 0,"border-width":c,"border-color":g,rotation:f,"bg-color":h,"bg-gradient":S,glow:P?JSON.stringify(P):void 0,ring:x?JSON.stringify(x):void 0,presence:v?JSON.stringify(v):void 0,badge:m?JSON.stringify(m):void 0,loading:R,placeholder:W,"placeholder-color":k,fallback:q,"fallback-mode":L,interactive:U?JSON.stringify(U):void 0,class:u,style:A}):null}ct.displayName="ProfilePicture";he();export{ct as ProfilePicture,He as ProfilePictureGroup,jt as getCdnBaseUrl,Ht as setCdnBaseUrl};//# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map