@grasco/profile-picture 0.1.9 → 0.2.1

package/dist/index.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;
 }
@@ -212,16 +218,12 @@ interface ProfilePictureGroupProps$1 {
  * CDN sizes: 80, 120, 240, 480, 960
  */
 declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
-/**
- * Detect theme (dark/light) from background color using luminance calculation
- * Returns 'light' for non-hex colors or when luminance > 0.5
- */
-declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
 /**
  * Construct CDN URL for profile picture
- * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{imageMode}.webp?hostname={hostname}
+ * @param imageMode - "transparent" for transparent background, "original" for original background
  */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", imageMode: "transparent" | "original", hostname: string): string;
 
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
@@ -396,6 +398,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;
@@ -405,6 +412,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 */
@@ -416,13 +425,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;
@@ -440,12 +450,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 ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };

package/dist/index.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;
 }
@@ -212,16 +218,12 @@ interface ProfilePictureGroupProps$1 {
  * CDN sizes: 80, 120, 240, 480, 960
  */
 declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
-/**
- * Detect theme (dark/light) from background color using luminance calculation
- * Returns 'light' for non-hex colors or when luminance > 0.5
- */
-declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
 /**
  * Construct CDN URL for profile picture
- * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{imageMode}.webp?hostname={hostname}
+ * @param imageMode - "transparent" for transparent background, "original" for original background
  */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", imageMode: "transparent" | "original", hostname: string): string;
 
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
@@ -396,6 +398,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;
@@ -405,6 +412,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 */
@@ -416,13 +425,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;
@@ -440,12 +450,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 ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };

package/dist/index.js

@@ -1,4 +1,4 @@
-import Le,{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 Oe=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&&Oe(o,e,n),n};var te="grasco-profile-picture-styles",G=false,ge=false;function fe(){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}ge||(ge=true,Fe());}function Fe(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ne());}function Ne(){if(G||typeof document>"u")return;if(document.getElementById(te)){G=true;return}let r=He();if(!r)return;let o=document.createElement("link");o.id=te,o.rel="stylesheet",o.href=r,document.head.appendChild(o),G=true;}function He(){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)}dist/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 F={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},me={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},he={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 oe(r){return Math.round(r*.38)}function be(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 xe(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function ve(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function we(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 je(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 ye(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 K(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=je(r)%o.length;return o[e]}function Ce(r){return typeof r=="number"?r:F[r]??F[I.size]}function ne(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 X(r,o,e,t,n){let i=n??o*(1-e);return r*i}function Se(r,o,e){return e==="ltr"?o-r:r+1}function ke(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 $e(r){return r>99?"+99":`+${r}`}function ie(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function ae(r){if(!(r&&re(r)))return "light";let o=r.replace("#","");o.length===3&&(o=o.split("").map(p=>p+p).join(""));let e=Number.parseInt(o.slice(0,2),16),t=Number.parseInt(o.slice(2,4),16),n=Number.parseInt(o.slice(4,6),16);return (.299*e+.587*t+.114*n)/255>.5?"light":"dark"}function se(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 Ie(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Ee(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 Pe(r,o){return o?{className:"",style:{background:o}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"#e7e7e7"}}}function ze(r){return {boxShadow:he[r]}}var Ve={shimmer:`
+import He,{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 qe=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&&qe(o,e,n),n};var se="grasco-profile-picture-styles",N=false,xe=false;function ve(){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}xe||(xe=true,Ye());}function Ye(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ke());}function Ke(){if(N||typeof document>"u")return;if(document.getElementById(se)){N=true;return}let r=Xe();if(!r)return;let o=document.createElement("link");o.id=se,o.rel="stylesheet",o.href=r,document.head.appendChild(o),N=true;}function Xe(){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},ye={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},we={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 P(...r){return r.filter(Boolean).join(" ")}function Se(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 ke(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 $e(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function Ie(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function Ee(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 Pe(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 Ce=[["#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 ze(r){let o=Z(r),e=Ce[o%Ce.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 De(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 Te(r,o,e){return e==="ltr"?o-r:r+1}function Me(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 Re(r){return r>99?"+99":`+${r}`}function le(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ce(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 Ae(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function Le(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 Ue(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 Be(r){return {boxShadow:we[r]}}var Ze={shimmer:`
 @keyframes pp-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -36,8 +36,8 @@ import Le,{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; }
-}`},We=Object.values(Ve).join(`
-`),qe=`
+}`},Qe=Object.values(Ze).join(`
+`),_e=`
 /* Profile Picture Component Styles */
 .pp-container {
   --pp-transition-duration: 200ms;
@@ -53,6 +53,7 @@ import Le,{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 Le,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
     transition: none !important;
   }
 }
-`,Te=`${We}
-${qe}`,De=`
+`,Ge=`${Qe}
+${_e}`,Oe=`
 @keyframes np-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
@@ -251,7 +252,7 @@ ${qe}`,De=`
   background-size: 200% 100%;
   animation: np-shimmer 1.5s infinite;
 }
-`;function Re(r,o=.3){if(re(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 Je=`
+`;function Fe(r,o=.3){if(Se(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 et=`
 @keyframes ppg-tooltip-in {
   from {
     opacity: 0;
@@ -302,7 +303,7 @@ ${qe}`,De=`
     opacity: 1;
   }
 }
-`,Ye=`
+`,tt=`
 /* Profile Picture Group Container */
 .ppg-container {
   --ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -747,29 +748,34 @@ ${qe}`,De=`
     box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
   }
 }
-`,Ae=`${Je}
-${Ye}`;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=ie(this.pixelSize),t=ae(this.bgColor),n=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=se(a.cdnBaseUrl,this.extCustomerId,e,t,n);}getContainerStyles(){let e=Pe(this.bgColor,this.bgGradient),t=this.border?Ee(this.borderWidth,this.borderColor):null,n=ze(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Re(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:R("pp-container",Ie(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,...n,...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}
+`,Ne=`${et}
+${tt}`;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=Ge,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=le(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ce(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=Ue(this.bgColor,this.bgGradient),t=this.border?Le(this.borderWidth,this.borderColor):null,n=Be(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Fe(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:P("pp-container",Ae(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=${P("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=ze(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:`${oe(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:`${oe(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 @@ ${Ye}`;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=${P("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,n=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=ye(d,g,f);}else this.ring.gradient&&this.ring.gradient.length>0?i=we(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=Pe(d,c,g);}else this.ring.gradient&&this.ring.gradient.length>0?i=Ee(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:`-${n}px`,padding:`${e}px`,background:i,borderRadius:N[this.variant]})}>
+        class=${P("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=xe(this.pixelSize,e),n=me[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=$e(this.pixelSize,e),n=ye[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:n,bottom:`${i}px`,right:`${i}px`,color:n})}
+        class=${P("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,n=this.badge.icon!==void 0,i=t||n,{size:p,fontSize:d}=be(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?ve(this.badge.content,this.badge.max):null,v=n?this.badge.icon:null,z=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}=ke(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?Ie(this.badge.content,this.badge.max):null,S=n?this.badge.icon:null,M=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",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:g,color:f,borderRadius:m,"--pp-badge-glow-color":g,gap:n&&t?"4px":"0",...L[e]})}>
-        ${v?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${z}px`})}>${v}</span>`:nothing}
+        class=${P("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:`${M}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 @@ ${Ye}`;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 @@ ${Ye}`;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=${P("pp-inner",e.innerClasses)}
+          style=${styleMap({borderRadius:j[this.variant],...e.innerStyles})}>
           <!-- Placeholder -->
           ${this.renderPlaceholder()}
 
@@ -831,7 +839,7 @@ ${Ye}`;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 le=false;function Ze(){if(le||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(le)return;let o=document.createElement("style");o.textContent=Ae,document.head.appendChild(o),le=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 Ze(),this}get pixelSize(){return Ce(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,n)=>{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 ${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,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 fe=false;function ot(){if(fe||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(fe)return;let o=document.createElement("style");o.textContent=Ne,document.head.appendChild(o),fe=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 ot(),this}get pixelSize(){return De(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 @@ ${Ye}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
             class="ppg-dropdown-list"
             style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
           >
-            ${e.map(T=>this.renderDropdownItem(T))}
+            ${e.map(q=>this.renderDropdownItem(q))}
           </div>
         </div>
-      `;render(y,this.portalContainer);return}let m=g-t.bottom-n,h=t.top-n,v=d-t.left,z=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:z>=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+n:void 0,U=x==="top"?g-t.top+n:void 0,j=html`
+      `;render(k,this.portalContainer);return}let f=c-t.bottom-n,h=t.top-n,S=d-t.left,M=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:M>=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 @@ ${Ye}`;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 @@ ${Ye}`;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 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=X(t,this.pixelSize,this.overlap,this.direction,this.spacing),p=Se(t,n,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=Te(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,11 +895,11 @@ ${Ye}`;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,n,i){return html`
       <profile-picture
@@ -919,7 +927,7 @@ ${Ye}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         aria-haspopup="true"
         @click=${()=>this.handleCounterClick(n)}
       >
-        ${$e(e)}
+        ${Re(e)}
       </button>
     `}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
       <button
@@ -943,16 +951,16 @@ ${Ye}`;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,n=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+n}px`,bottom:f?`${i.height-d+n}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),n=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"
@@ -972,7 +980,7 @@ ${Ye}`;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 @@ ${Ye}`;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:n}=ne(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=ne(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 g=ke(d,this.pixelSize,this.overlap,this.spacing),f=n?X(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,m=X(e+(n?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=Me(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=${P("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 @@ ${Ye}`;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 -->
-        ${n?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 ce=Le.forwardRef(({max:r,direction:o,overlap:e,size:t,spacing:n,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:g,animated:f,rotationAmount:m,onAvatarClick:h,onAvatarHover:v,onCounterClick:z,onDropdownItemClick:x,onAddClick:c,className:L,style:U,children:j},y)=>{let T=useRef(null),B=useCallback(l=>{h?.(l.detail.user);},[h]),M=useCallback(l=>{v?.(l.detail.user);},[v]),O=useCallback(l=>{let k=l;z?.(k.detail.hiddenUsers,k.detail.open);},[z]),V=useCallback(l=>{x?.(l.detail.user);},[x]),W=useCallback(()=>{c?.();},[c]);return useEffect(()=>{let l=T.current;if(l)return l.addEventListener("avatar-click",B),l.addEventListener("avatar-hover",M),l.addEventListener("counter-click",O),l.addEventListener("dropdown-item-click",V),l.addEventListener("add-click",W),()=>{l.removeEventListener("avatar-click",B),l.removeEventListener("avatar-hover",M),l.removeEventListener("counter-click",O),l.removeEventListener("dropdown-item-click",V),l.removeEventListener("add-click",W);}},[B,M,O,V,W]),useEffect(()=>{typeof y=="function"?y(T.current):y&&(y.current=T.current);},[y]),Le.createElement("profile-picture-group",{ref:T,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":g,animated:f,"rotation-amount":m,class:L,style:U},j)});ce.displayName="ProfilePictureGroup";function tt(r){H.setCdnBaseUrl(r);}function rt(){return H.getCdnBaseUrl()}function Me({src:r,alt:o,extCustomerId:e,size:t,variant:n,shadow:i,border:p,borderWidth:d,borderColor:g,rotation:f,bgColor:m,bgGradient:h,glow:v,ring:z,presence:x,badge:c,loading:L,placeholder:U,placeholderColor:j,fallback:y,interactive:T,onLoad:B,onError:M,onCdnError:O,className:V,style:W,ref:l}){let k=useRef(null),Q=useCallback(()=>{B?.();},[B]),_=useCallback(()=>{M?.();},[M]),ee=useCallback(D=>{O?.(D.detail);},[O]);return useEffect(()=>{let D=k.current;if(D)return D.addEventListener("load",Q),D.addEventListener("error",_),D.addEventListener("cdn-error",ee),()=>{D.removeEventListener("load",Q),D.removeEventListener("error",_),D.removeEventListener("cdn-error",ee);}},[Q,_,ee]),useEffect(()=>{typeof l=="function"?l(k.current):l&&(l.current=k.current);},[l]),Le.createElement("profile-picture",{ref:k,src:r||void 0,alt:o,"ext-customer-id":e,size:t,variant:n,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:z?JSON.stringify(z):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:T?JSON.stringify(T):void 0,class:V,style:W})}Me.displayName="ProfilePicture";fe();export{Me as ProfilePicture,ce as ProfilePictureGroup,se as constructCdnUrl,ae as detectThemeFromColor,rt as getCdnBaseUrl,ie as getCdnSizeLabel,tt as setCdnBaseUrl};//# sourceMappingURL=index.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 st(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}var he=He.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:M,onDropdownItemClick:x,onAddClick:v,className:m,style:R,children:W},k)=>{let q=st(),L=useRef(null),U=useCallback(u=>{h?.(u.detail.user);},[h]),B=useCallback(u=>{S?.(u.detail.user);},[S]),G=useCallback(u=>{let A=u;M?.(A.detail.hiddenUsers,A.detail.open);},[M]),O=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",G),u.addEventListener("dropdown-item-click",O),u.addEventListener("add-click",F),()=>{u.removeEventListener("avatar-click",U),u.removeEventListener("avatar-hover",B),u.removeEventListener("counter-click",G),u.removeEventListener("dropdown-item-click",O),u.removeEventListener("add-click",F);}},[U,B,G,O,F]),useEffect(()=>{typeof k=="function"?k(L.current):k&&(k.current=L.current);},[k]),q?He.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 ct(){let[r,o]=useState(false);return useEffect(()=>{o(true);},[]),r}function ut(r){V.setCdnBaseUrl(r);}function gt(){return V.getCdnBaseUrl()}function je({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:M,ring:x,presence:v,badge:m,loading:R,placeholder:W,placeholderColor:k,fallback:q,fallbackMode:L,interactive:U,onLoad:B,onError:G,onCdnError:O,onClick:F,className:u,style:A,ref:J}){let Ve=ct(),X=useRef(null),ne=useCallback(()=>{B?.();},[B]),oe=useCallback(()=>{G?.();},[G]),ie=useCallback(y=>{O?.(y.detail);},[O]),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]),Ve?He.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:M?JSON.stringify(M):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}je.displayName="ProfilePicture";ve();export{je as ProfilePicture,he as ProfilePictureGroup,ce as constructCdnUrl,gt as getCdnBaseUrl,le as getCdnSizeLabel,ut as setCdnBaseUrl};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map