@grasco/profile-picture 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import zt,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,html}from'lit';import {property,state,customElement}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Rt=Object.defineProperty;var Tt=Object.getOwnPropertyDescriptor;var s=(r,n,t,e)=>{for(var o=e>1?void 0:e?Tt(n,t):n,a=r.length-1,p;a>=0;a--)(p=r[a])&&(o=(e?p(n,t,o):p(o))||o);return e&&o&&Rt(n,t,o),o};var rt="grasco-profile-picture-styles",M=false;function nt(){if(M||typeof document>"u")return;if(document.getElementById(rt)){M=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){M=true;return}let n=Ut();if(!n)return;let t=document.createElement("link");t.id=rt,t.rel="stylesheet",t.href=n,document.head.appendChild(t),M=true;}function Ut(){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 D={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ot={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},it={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)"},C={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var R={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},S={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function x(...r){return r.filter(Boolean).join(" ")}function L(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function at(r){return {"top-left":"np:top-0 np:left-0","top-right":"np:top-0 np:right-0","bottom-left":"np:bottom-0 np:left-0","bottom-right":"np:bottom-0 np:right-0"}[r]}function st(r){return {"top-left":"np:-rotate-45 np:-translate-x-1/4 np:-translate-y-1/2","top-right":"np:rotate-45 np:translate-x-1/4 np:-translate-y-1/2","bottom-left":"np:rotate-45 np:-translate-x-1/4 np:translate-y-1/2","bottom-right":"np:-rotate-45 np:translate-x-1/4 np:translate-y-1/2"}[r]}function O(r){let t=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return t.length===0?"?":t.length===1?t[0].slice(0,1).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}function X(r){return Math.round(r*.38)}function pt(r,n){let e=Math.max(n?18:10,Math.round(r*(n?.32:.22))),o=Math.round(e*.6);return {size:e,fontSize:o}}function dt(r,n){return Math.max(8,Math.round(r*.25))+(n-1)*2}function lt(r,n){return typeof r=="string"?r:n&&r>n?`${n}+`:r.toString()}function ct(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((t,e)=>{let o=e/r.length*360,a=(e+1)/r.length*360;return `${t} ${o}deg ${a}deg`}).join(", ")})`}function Lt(r){let n=0;for(let t=0;t<r.length;t++){let e=r.charCodeAt(t);n=(n<<5)-n+e,n&=n;}return Math.abs(n)}function gt(r,n,t){let o=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${n} 0deg ${o}deg, ${t} ${o}deg 360deg)`}function F(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%)"],t=Lt(r)%n.length;return n[t]}function ut(r){return typeof r=="number"?r:D[r]??D[S.size]}function bt(r,n,t){let e=t?n-1:n;if(r<=e)return {visible:r,hidden:0,showCounter:false};let o=e-1,a=r-o;return {visible:o,hidden:a,showCounter:true}}function N(r,n,t,e,o){let a=o??n*(1-t);return r*a}function ft(r,n,t){return t==="ltr"?n-r:r+1}function ht(r,n,t,e){if(r===0)return 0;if(r===1)return n;let o=e??n*(1-t);return n+o*(r-1)}function mt(r){return r>99?"+99":`+${r}`}function Q(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function P(r){if(!(r&&L(r)))return "light";let n=r.replace("#","");n.length===3&&(n=n.split("").map(p=>p+p).join(""));let t=Number.parseInt(n.slice(0,2),16),e=Number.parseInt(n.slice(2,4),16),o=Number.parseInt(n.slice(4,6),16);return (.299*t+.587*e+.114*o)/255>.5?"light":"dark"}function _(r,n,t,e,o){let a=r.endsWith("/")?r.slice(0,-1):r,p=`${n}_${t}_${e}.webp`;return `${a}/api/profile-picture/cdn/${p}?hostname=${o}`}function xt(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function vt(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 yt(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 wt(r){return {boxShadow:it[r]}}var Bt={shimmer:`
+import Ut,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,html,render}from'lit';import {property,state,customElement}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var Ft=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var s=(r,o,t,e)=>{for(var n=e>1?void 0:e?Nt(o,t):o,i=r.length-1,p;i>=0;i--)(p=r[i])&&(n=(e?p(o,t,n):p(n))||n);return e&&n&&Ft(o,t,n),n};var ct="grasco-profile-picture-styles",K=false;function gt(){if(K||typeof document>"u")return;if(document.getElementById(ct)){K=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){K=true;return}let o=Ht();if(!o)return;let t=document.createElement("link");t.id=ct,t.rel="stylesheet",t.href=o,document.head.appendChild(t),K=true;}function Ht(){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 N={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},ut={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},ft={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)"},R={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var H={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},z={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function $(...r){return r.filter(Boolean).join(" ")}function V(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function bt(r){return {"top-left":"np:top-0 np:left-0","top-center":"np:top-0 np:left-1/2 np:-translate-x-1/2","top-right":"np:top-0 np:right-0","bottom-left":"np:bottom-0 np:left-0","bottom-center":"np:bottom-0 np:left-1/2 np:-translate-x-1/2","bottom-right":"np:bottom-0 np:right-0"}[r]}function ht(r){return {"top-left":"np:-rotate-45 np:-translate-x-1/4 np:-translate-y-1/2","top-center":"np:rotate-0 np:-translate-y-1/2","top-right":"np:rotate-45 np:translate-x-1/4 np:-translate-y-1/2","bottom-left":"np:rotate-45 np:-translate-x-1/4 np:translate-y-1/2","bottom-center":"np:rotate-0 np:translate-y-1/2","bottom-right":"np:-rotate-45 np:translate-x-1/4 np:translate-y-1/2"}[r]}function q(r){let t=r.trim().replace(/[^\w\s]/g,"").split(/\s+/).filter(Boolean);return t.length===0?"?":t.length===1?t[0].slice(0,1).toUpperCase():(t[0][0]+(t.at(-1)?.[0]??"")).toUpperCase()}function rt(r){return Math.round(r*.38)}function mt(r,o){let t;if(o){let n=Math.round(r*.31);t=Math.min(24,Math.max(14,n));}else {let n=Math.round(r*.22);t=Math.min(14,Math.max(8,n));}let e=Math.max(9,Math.round(t*.55));return {size:t,fontSize:e}}function xt(r,o){let t=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,t+(o-1)*2)}function vt(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function yt(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((t,e)=>{let n=e/r.length*360,i=(e+1)/r.length*360;return `${t} ${n}deg ${i}deg`}).join(", ")})`}function Pt(r){let o=0;for(let t=0;t<r.length;t++){let e=r.charCodeAt(t);o=(o<<5)-o+e,o&=o;}return Math.abs(o)}function wt(r,o,t){let n=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${o} 0deg ${n}deg, ${t} ${n}deg 360deg)`}function X(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%)"],t=Pt(r)%o.length;return o[t]}function Ct(r){return typeof r=="number"?r:N[r]??N[z.size]}function nt(r,o,t){let e=t?o-1:o;if(r<=e)return {visible:r,hidden:0,showCounter:false};let n=e-1,i=r-n;return {visible:n,hidden:i,showCounter:true}}function Z(r,o,t,e,n){let i=n??o*(1-t);return r*i}function St(r,o,t){return t==="ltr"?o-r:r+1}function kt(r,o,t,e){if(r===0)return 0;if(r===1)return o;let n=e??o*(1-t);return o+n*(r-1)}function $t(r){return r>99?"+99":`+${r}`}function ot(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function it(r){if(!(r&&V(r)))return "light";let o=r.replace("#","");o.length===3&&(o=o.split("").map(p=>p+p).join(""));let t=Number.parseInt(o.slice(0,2),16),e=Number.parseInt(o.slice(2,4),16),n=Number.parseInt(o.slice(4,6),16);return (.299*t+.587*e+.114*n)/255>.5?"light":"dark"}function at(r,o,t,e,n){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${o}_${t}_${e}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${n}`}function Et(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function It(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 Rt(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 zt(r){return {boxShadow:ft[r]}}var jt={shimmer:`
 @keyframes pp-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -36,8 +36,8 @@ import zt,{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; }
-}`},Gt=Object.values(Bt).join(`
-`),Mt=`
+}`},Vt=Object.values(jt).join(`
+`),Wt=`
 /* Profile Picture Component Styles */
 .pp-container {
   --pp-transition-duration: 200ms;
@@ -154,7 +154,6 @@ import zt,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 9999px;
   font-weight: 600;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
   line-height: 1;
@@ -259,8 +258,8 @@ import zt,{useRef,useCallback,useEffect}from'react';import {LitElement,nothing,h
     transition: none !important;
   }
 }
-`,Ct=`${Gt}
-${Mt}`,St=`
+`,At=`${Vt}
+${Wt}`,Tt=`
 @keyframes np-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
@@ -270,22 +269,22 @@ ${Mt}`,St=`
   background-size: 200% 100%;
   animation: np-shimmer 1.5s infinite;
 }
-`;function kt(r,n=.3){if(L(r)){let t=Number.parseInt(r.slice(1,3),16),e=Number.parseInt(r.slice(3,5),16),o=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${t}, ${e}, ${o}, ${n})`}return `0 0 20px 0 ${r}`}var Ot=`
+`;function Dt(r,o=.3){if(V(r)){let t=Number.parseInt(r.slice(1,3),16),e=Number.parseInt(r.slice(3,5),16),n=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${t}, ${e}, ${n}, ${o})`}return `0 0 20px 0 ${r}`}var Jt=`
 @keyframes ppg-tooltip-in {
   from {
     opacity: 0;
-    transform: translateY(4px) scale(0.96);
+    transform: translateX(-50%) translateY(4px) scale(0.96);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateX(-50%) translateY(0) scale(1);
   }
 }
 
 @keyframes ppg-dropdown-in {
   from {
     opacity: 0;
-    transform: translateY(-8px) scale(0.96);
+    transform: translateY(-6px) scale(0.95);
   }
   to {
     opacity: 1;
@@ -301,7 +300,27 @@ ${Mt}`,St=`
     transform: translateY(-4px) scale(1.08);
   }
 }
-`,Ft=`
+
+@keyframes ppg-modal-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes ppg-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+`,Yt=`
 /* Profile Picture Group Container */
 .ppg-container {
   --ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -382,7 +401,7 @@ ${Mt}`,St=`
 }
 
 .ppg-counter:hover {
-  background: #e8e8ed;
+  background: #ebebed;
   transform: scale(1.05);
 }
 
@@ -436,7 +455,7 @@ ${Mt}`,St=`
 
 /* Tooltip */
 .ppg-tooltip {
-  position: fixed;
+  position: absolute;
   z-index: 9999;
   padding: 6px 12px;
   background: var(--ppg-tooltip-bg);
@@ -448,7 +467,8 @@ ${Mt}`,St=`
   box-shadow: var(--ppg-shadow-lg);
   pointer-events: none;
   white-space: nowrap;
-  animation: ppg-tooltip-in 150ms ease-out;
+  transform: translateX(-50%);
+  animation: ppg-tooltip-in 150ms ease-out forwards;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
@@ -477,111 +497,168 @@ ${Mt}`,St=`
 /* Dropdown */
 .ppg-dropdown {
   position: absolute;
-  z-index: 1000;
-  min-width: 200px;
-  max-width: 280px;
+  z-index: 9998;
+  right: 0;
+  min-width: 220px;
+  max-width: 300px;
   background: var(--ppg-dropdown-bg);
-  border-radius: var(--ppg-radius);
-  box-shadow: var(--ppg-shadow-lg);
-  border: 1px solid var(--ppg-border);
+  border-radius: 14px;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.12),
+    0 1px 4px rgba(0, 0, 0, 0.08),
+    0 0 0 1px var(--ppg-border);
   overflow: hidden;
-  animation: ppg-dropdown-in 200ms ease-out;
+  animation: ppg-dropdown-in 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  transform-origin: top right;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .ppg-dropdown[data-position="bottom"] {
-  top: calc(100% + 8px);
+  top: calc(100% + 10px);
 }
 
 .ppg-dropdown[data-position="top"] {
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 10px);
+  transform-origin: bottom right;
+}
+
+/* Modal style for mobile */
+.ppg-dropdown[data-position="modal"] {
+  transform-origin: center center;
+  animation: ppg-modal-in 250ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  border-radius: 20px;
+}
+
+.ppg-backdrop-visible {
+  background: rgba(0, 0, 0, 0.4);
+  animation: ppg-backdrop-in 200ms ease-out forwards;
 }
 
 .ppg-dropdown-header {
-  padding: 12px 16px 8px;
-  font-size: 12px;
+  padding: 14px 16px 10px;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+  font-size: 11px;
   font-weight: 600;
   color: #86868b;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  border-bottom: 1px solid var(--ppg-border);
+  letter-spacing: 0.06em;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.02), transparent);
 }
 
 .ppg-dropdown-list {
   overflow-y: auto;
-  padding: 4px 0;
+  padding: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.2) transparent;
+}
+
+.ppg-dropdown-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ppg-dropdown-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ppg-dropdown-list::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.15);
+  border-radius: 3px;
 }
 
 .ppg-dropdown-item {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 16px;
+  padding: 10px 12px;
   cursor: pointer;
-  transition: background-color var(--ppg-transition);
+  border-radius: 10px;
+  transition: all 150ms ease;
+  margin: 2px 0;
 }
 
 .ppg-dropdown-item:hover {
   background: var(--ppg-dropdown-hover);
+  transform: translateX(2px);
 }
 
 .ppg-dropdown-item:focus-visible {
   outline: none;
   background: var(--ppg-dropdown-hover);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
+}
+
+.ppg-dropdown-item:active {
+  transform: scale(0.98);
 }
 
 .ppg-dropdown-avatar {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: 9999px;
   object-fit: cover;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 2px solid rgba(255, 255, 255, 0.8);
 }
 
 .ppg-dropdown-avatar-fallback {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 .ppg-dropdown-info {
   flex: 1;
   min-width: 0;
+  padding-right: 4px;
+  text-align: left;
 }
 
 .ppg-dropdown-name {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #1d1d1f;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: 1.3;
+  text-align: left;
 }
 
 .ppg-dropdown-status {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
   font-size: 12px;
   color: #86868b;
   margin-top: 2px;
+  line-height: 1.2;
 }
 
 .ppg-dropdown-presence {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 9999px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1.5px var(--ppg-dropdown-bg);
 }
 
 .ppg-dropdown-presence[data-status="online"] {
   background: #30D158;
+  box-shadow: 0 0 0 1.5px var(--ppg-dropdown-bg), 0 0 6px rgba(48, 209, 88, 0.5);
 }
 
 .ppg-dropdown-presence[data-status="away"] {
@@ -601,7 +678,7 @@ ${Mt}`,St=`
 .ppg-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 999;
+  z-index: 9997;
 }
 
 /* Reduced motion */
@@ -643,33 +720,69 @@ ${Mt}`,St=`
     box-shadow: 0 0 0 1.5px rgba(28, 28, 30, 0.95), var(--ppg-shadow-sm);
   }
 
+  .ppg-counter:hover {
+    background: #3a3a3c;
+  }
+
+  .ppg-dropdown {
+    background: rgba(44, 44, 46, 0.95);
+    box-shadow:
+      0 4px 24px rgba(0, 0, 0, 0.4),
+      0 1px 4px rgba(0, 0, 0, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+
   .ppg-dropdown-name {
     color: #ffffff;
   }
 
   .ppg-dropdown-header {
     color: #98989d;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
+  }
+
+  .ppg-dropdown-avatar {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .ppg-dropdown-avatar-fallback {
     border-color: rgba(255, 255, 255, 0.1);
   }
+
+  .ppg-dropdown-list {
+    scrollbar-color: rgba(255,255,255,0.35) transparent;
+  }
+
+  .ppg-dropdown-list::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.35);
+  }
+
+  .ppg-dropdown-presence {
+    box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95);
+  }
+
+  .ppg-dropdown-presence[data-status="online"] {
+    box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
+  }
 }
-`,$t=`${Ot}
-${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=C.size;this.variant=C.variant;this.shadow=C.shadow;this.border=false;this.borderWidth=C.borderWidth;this.borderColor=C.borderColor;this.rotation=0;this.loading=C.loading;this.placeholder=C.placeholder;this.placeholderColor=C.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static setCdnBaseUrl(t){i.cdnBaseUrl=t,i.instances.forEach(e=>{e.extCustomerId&&!e.cdnImageUrl&&(e.cdnLoadFailed=false,e.retryTimeoutId&&(clearTimeout(e.retryTimeoutId),e.retryTimeoutId=void 0),e.previousExtCustomerId||(e.previousExtCustomerId=e.extCustomerId),e.loadCdnImage());});}static getCdnBaseUrl(){return i.cdnBaseUrl}createRenderRoot(){return i.injectStylesOnce(),this}static injectStylesOnce(){if(i.stylesInjected||typeof document>"u")return;let t=document.createElement("style");t.textContent=Ct,document.head.appendChild(t),i.stylesInjected=true;}get pixelSize(){let t=this.size;return typeof t=="number"?t:D[t]??D[C.size]}connectedCallback(){super.connectedCallback(),i.instances.add(this);}disconnectedCallback(){super.disconnectedCallback(),i.instances.delete(this),this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0);}firstUpdated(){this.extCustomerId&&i.cdnBaseUrl&&(this.previousExtCustomerId=this.extCustomerId,this.loadCdnImage());}updated(t){super.updated(t),this.extCustomerId&&i.cdnBaseUrl&&!this.cdnImageUrl&&(this.cdnLoadFailed||!this.previousExtCustomerId)&&(this.previousExtCustomerId||(this.previousExtCustomerId=this.extCustomerId),this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(t){t.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src),(t.has("extCustomerId")||t.has("size")||t.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&&i.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&&i.cdnBaseUrl)){this.cdnLoadFailed=true;return}let t=Q(this.pixelSize),e=P(this.bgColor),o=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=_(i.cdnBaseUrl,this.extCustomerId,t,e,o);}getContainerStyles(){let t=yt(this.bgColor,this.bgGradient),e=this.border?vt(this.borderWidth,this.borderColor):null,o=wt(this.shadow),a={};if(this.glow){let l=this.glow.color??this.borderColor??"#6366f1";a={"--pp-glow-color":l,boxShadow:kt(l,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:x("pp-container",xt(this.variant),t.className,e?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:R[this.variant],...t.style,...e?.style,...o,...a,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 t={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
-      ${this.placeholder==="shimmer"?html`<style>${St}</style>`:nothing}
+`,Lt=`${Jt}
+${Yt}`;var a=class extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=R.size;this.variant=R.variant;this.shadow=R.shadow;this.border=false;this.borderWidth=R.borderWidth;this.borderColor=R.borderColor;this.rotation=0;this.loading=R.loading;this.placeholder=R.placeholder;this.placeholderColor=R.placeholderColor;this.isLoaded=false;this.hasError=false;this.cdnLoadFailed=false;this.previousSrc="";this.RETRY_DELAY_MS=3e4;}static setCdnBaseUrl(t){a.cdnBaseUrl=t,a.instances.forEach(e=>{e.extCustomerId&&!e.cdnImageUrl&&(e.cdnLoadFailed=false,e.retryTimeoutId&&(clearTimeout(e.retryTimeoutId),e.retryTimeoutId=void 0),e.previousExtCustomerId||(e.previousExtCustomerId=e.extCustomerId),e.loadCdnImage());});}static getCdnBaseUrl(){return a.cdnBaseUrl}createRenderRoot(){return a.injectStylesOnce(),this}static injectStylesOnce(){if(a.stylesInjected||typeof document>"u")return;let t=document.createElement("style");t.textContent=At,document.head.appendChild(t),a.stylesInjected=true;}get pixelSize(){let t=this.size;return typeof t=="number"?t:N[t]??N[R.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(t){super.updated(t),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&(this.cdnLoadFailed||!this.previousExtCustomerId)&&(this.previousExtCustomerId||(this.previousExtCustomerId=this.extCustomerId),this.cdnLoadFailed=false,this.loadCdnImage());}willUpdate(t){t.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src),(t.has("extCustomerId")||t.has("size")||t.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 t=ot(this.pixelSize),e=it(this.bgColor),n=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=at(a.cdnBaseUrl,this.extCustomerId,t,e,n);}getContainerStyles(){let t=Rt(this.bgColor,this.bgGradient),e=this.border?It(this.borderWidth,this.borderColor):null,n=zt(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:Dt(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:$("pp-container",Et(this.variant),t.className,e?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:H[this.variant],...t.style,...e?.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 t={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
+      ${this.placeholder==="shimmer"?html`<style>${Tt}</style>`:nothing}
       <div
-        class=${x("np:absolute np:inset-0",t)}
+        class=${$("np:absolute np:inset-0",t)}
         style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
       </div>
     `}renderFallback(){if(this.fallback)return html`
         <span
           class="pp-fallback"
-          style=${styleMap({fontSize:`${X(this.pixelSize)}px`})}>
+          style=${styleMap({fontSize:`${rt(this.pixelSize)}px`})}>
           ${this.fallback}
         </span>
-      `;if(this.alt){let e=F(this.alt);return html`
+      `;if(this.alt){let e=X(this.alt);return html`
         <div
           class="pp-fallback np:absolute np:inset-0"
-          style=${styleMap({background:this.bgColor??e,fontSize:`${X(this.pixelSize)}px`})}>
-          ${O(this.alt)}
+          style=${styleMap({background:this.bgColor??e,fontSize:`${rt(this.pixelSize)}px`})}>
+          ${q(this.alt)}
         </div>
       `}let t=this.pixelSize*.5;return html`
       <svg
@@ -679,7 +792,7 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         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" />
       </svg>
-    `}renderImage(){let t=!!(this.extCustomerId&&i.cdnBaseUrl),e;return this.cdnImageUrl?e=this.cdnImageUrl:(!t||this.cdnLoadFailed)&&(e=this.src),this.hasError||!e?this.renderFallback():html`
+    `}renderImage(){let t=!!(this.extCustomerId&&a.cdnBaseUrl),e;return this.cdnImageUrl?e=this.cdnImageUrl:(!t||this.cdnLoadFailed)&&(e=this.src),this.hasError||!e?this.renderFallback():html`
       <img
         src=${e}
         alt=${this.alt}
@@ -687,33 +800,33 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         decoding="async"
         @load=${this.handleLoad}
         @error=${this.handleError}
-        class=${x("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        class=${$("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
         draggable="false" />
-    `}renderRing(){if(!this.ring?.show)return nothing;let t=this.ring.width??3,e=this.ring.gap??3,o=t+e,a,p=this.ring.progress!==void 0;if(p){let l=this.ring.progress??0,u=this.ring.color??"#30D158",b=this.ring.emptyColor??"#8E8E93";a=gt(l,u,b);}else this.ring.gradient&&this.ring.gradient.length>0?a=ct(this.ring.gradient):a=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
+    `}renderRing(){if(!this.ring?.show)return nothing;let t=this.ring.width??3,e=this.ring.gap??3,n=t+e,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,u=this.ring.color??"#30D158",f=this.ring.emptyColor??"#8E8E93";i=wt(d,u,f);}else this.ring.gradient&&this.ring.gradient.length>0?i=yt(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
       <div
-        class=${x("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
-        style=${styleMap({inset:`-${o}px`,padding:`${t}px`,background:a,borderRadius:R[this.variant]})}>
+        class=${$("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
+        style=${styleMap({inset:`-${n}px`,padding:`${t}px`,background:i,borderRadius:H[this.variant]})}>
       </div>
-    `}renderPresence(){if(!this.presence)return nothing;let t=this.presence.thickness??2,e=dt(this.pixelSize,t),o=ot[this.presence.status],a=Math.max(0,this.pixelSize*.02);return html`
+    `}renderPresence(){if(!this.presence)return nothing;let t=this.presence.thickness??2,e=xt(this.pixelSize,t),n=ut[this.presence.status],i=Math.max(0,this.pixelSize*.02);return html`
       <div
-        class=${x("pp-presence",this.presence.animate&&"pp-presence-animated")}
-        style=${styleMap({width:`${e}px`,height:`${e}px`,backgroundColor:o,bottom:`${a}px`,right:`${a}px`,color:o})}
+        class=${$("pp-presence",this.presence.animate&&"pp-presence-animated")}
+        style=${styleMap({width:`${e}px`,height:`${e}px`,backgroundColor:n,bottom:`${i}px`,right:`${i}px`,color:n})}
         title=${this.presence.status}>
       </div>
-    `}renderBadge(){if(!this.badge)return nothing;let t=this.badge.position??"bottom-right",e=this.badge.content!==void 0,o=this.badge.icon!==void 0,a=e||o,{size:p,fontSize:l}=pt(this.pixelSize,a),u=this.badge.bgColor??"#22c55e",b=this.badge.color??"#ffffff",h=e&&this.badge.content!==void 0?lt(this.badge.content,this.badge.max):null,k=o?this.badge.icon:null,$=l*.9,E={"top-left":{top:"-4px",left:"-4px"},"top-right":{top:"-4px",right:"-4px"},"bottom-left":{bottom:"-4px",left:"-4px"},"bottom-right":{bottom:"-4px",right:"-4px"}};return html`
+    `}renderBadge(){if(!this.badge)return nothing;let t=this.badge.position??"bottom-right",e=this.badge.content!==void 0,n=this.badge.icon!==void 0,i=e||n,{size:p,fontSize:d}=mt(this.pixelSize,i),u=this.badge.bgColor??"#22c55e",f=this.badge.color??"#ffffff",h=this.badge.borderRadius??"9999px",v=e&&this.badge.content!==void 0?vt(this.badge.content,this.badge.max):null,y=n?this.badge.icon:null,T=d*.9,l=`${-Math.round(this.pixelSize*.06)}px`,m={"top-left":{top:l,left:l},"top-center":{top:l,left:"50%",transform:"translateX(-50%)"},"top-right":{top:l,right:l},"bottom-left":{bottom:l,left:l},"bottom-center":{bottom:l,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:l,right:l}};return html`
       <div
-        class=${x("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",o&&"pp-badge-with-icon")}
-        style=${styleMap({width:a?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:a?"0 6px":"0",fontSize:`${l}px`,backgroundColor:u,color:b,"--pp-badge-glow-color":u,gap:o&&e?"4px":"0",...E[t]})}>
-        ${k?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${$}px`})}>${k}</span>`:nothing}
-        ${h??nothing}
+        class=${$("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:u,color:f,borderRadius:h,"--pp-badge-glow-color":u,gap:n&&e?"4px":"0",...m[t]})}>
+        ${y?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${T}px`})}>${y}</span>`:nothing}
+        ${v??nothing}
       </div>
-    `}renderRibbon(){if(!this.ribbon)return nothing;let t=this.ribbon.position??"top-right",e=this.ribbon.bgColor??"#ef4444",o=this.ribbon.color??"#ffffff",a=L(e)?{backgroundColor:e}:{background:e},p={color:o},l=this.pixelSize*.9,u=this.pixelSize*.4,b=Math.max(8,this.pixelSize*.11);return html`
+    `}renderRibbon(){if(!this.ribbon)return nothing;let t=this.ribbon.position??"top-right",e=this.ribbon.bgColor??"#ef4444",n=this.ribbon.color??"#ffffff",i=V(e)?{backgroundColor:e}:{background:e},p={color:n},d=Math.min(75,this.pixelSize*.9),u=Math.min(32,this.pixelSize*.4),f=Math.min(13,Math.max(8,this.pixelSize*.11));return html`
       <div
-        class=${x("pp-ribbon-container",at(t))}
-        style=${styleMap({width:`${l}px`,height:`${u}px`})}>
+        class=${$("pp-ribbon-container",bt(t))}
+        style=${styleMap({width:`${d}px`,height:`${u}px`})}>
         <div
-          class=${x("pp-ribbon np:origin-center np:transform",st(t))}
-          style=${styleMap({fontSize:`${b}px`,padding:`${b*.3}px 0`,...a,...p})}>
+          class=${$("pp-ribbon np:origin-center np:transform",ht(t))}
+          style=${styleMap({fontSize:`${f}px`,padding:`${f*.3}px 0`,...i,...p})}>
           ${this.ribbon.icon?html`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:nothing}
           ${this.ribbon.text}
         </div>
@@ -733,7 +846,7 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         <!-- Inner container for image clipping -->
         <div
           class="pp-inner"
-          style=${styleMap({borderRadius:R[this.variant]})}>
+          style=${styleMap({borderRadius:H[this.variant]})}>
           <!-- Placeholder -->
           ${this.renderPlaceholder()}
 
@@ -750,10 +863,58 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         <!-- Presence Indicator -->
         ${this.renderPresence()}
       </div>
-    `}};i.stylesInjected=false,i.cdnBaseUrl="",i.instances=new Set,s([property({type:String})],i.prototype,"src",2),s([property({type:String})],i.prototype,"alt",2),s([property({type:String,attribute:"ext-customer-id"})],i.prototype,"extCustomerId",2),s([property({type:String})],i.prototype,"size",2),s([property({type:String})],i.prototype,"variant",2),s([property({type:String})],i.prototype,"shadow",2),s([property({type:Boolean})],i.prototype,"border",2),s([property({type:Number,attribute:"border-width"})],i.prototype,"borderWidth",2),s([property({type:String,attribute:"border-color"})],i.prototype,"borderColor",2),s([property({type:Number})],i.prototype,"rotation",2),s([property({type:String,attribute:"bg-color"})],i.prototype,"bgColor",2),s([property({type:String,attribute:"bg-gradient"})],i.prototype,"bgGradient",2),s([property({type:Object,attribute:"ring",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"ring",2),s([property({type:Object,attribute:"presence",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"presence",2),s([property({type:Object,attribute:"glow",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"glow",2),s([property({type:Object,attribute:"ribbon",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"ribbon",2),s([property({type:Object,attribute:"badge",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"badge",2),s([property({type:String})],i.prototype,"loading",2),s([property({type:String})],i.prototype,"placeholder",2),s([property({type:String,attribute:"placeholder-color"})],i.prototype,"placeholderColor",2),s([property({type:String})],i.prototype,"fallback",2),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],i.prototype,"interactive",2),s([state()],i.prototype,"isLoaded",2),s([state()],i.prototype,"hasError",2),s([state()],i.prototype,"cdnImageUrl",2),s([state()],i.prototype,"cdnLoadFailed",2),i=s([customElement("profile-picture")],i);var It=false;function Wt(){if(It||typeof document>"u")return;let r=document.createElement("style");r.textContent=$t,document.head.appendChild(r),It=true;}var g=class extends LitElement{constructor(){super(...arguments);this.max=S.max;this.direction=S.direction;this.overlap=S.overlap;this.size=S.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=S.animated;this.rotationAmount=0;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.handleBackdropClick=()=>{this.dropdownOpen=false;};}createRenderRoot(){return Wt(),this}get pixelSize(){return ut(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??S.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??S.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();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let t=Array.from(this.children).filter(e=>e.tagName.toLowerCase()==="profile-picture"&&e.getAttribute("slot")!=="internal");this.users=t.map((e,o)=>{let a=e.getAttribute("border-width"),p=a?Number.parseInt(a,10):void 0;return {id:e.getAttribute("data-user-id")??void 0,name:e.getAttribute("alt")??`User ${o+1}`,src:e.getAttribute("src")??void 0,status:e.getAttribute("data-status")??void 0,element:e,index:o,variant:e.getAttribute("variant")??void 0,shadow:e.getAttribute("shadow")??void 0,border:e.hasAttribute("border"),borderWidth:p,borderColor:e.getAttribute("border-color")??void 0,bgColor:e.getAttribute("bg-color")??void 0,bgGradient:e.getAttribute("bg-gradient")??void 0}});for(let e of this.users)e.element&&(e.element.style.display="none");}handleAvatarClick(t){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:t},bubbles:true,composed:true}));}handleAvatarHover(t,e){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let o=e.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:t,rect:o.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:t},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(t){this.dropdownOpen=!this.dropdownOpen,this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:t,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(t){this.dropdownOpen=false,this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:t},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(t,e){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),e());}renderAvatar(t,e,o){let a=N(e,this.pixelSize,this.overlap,this.direction,this.spacing),p=ft(e,o,this.direction),l=t.variant??"circle",u=t.shadow??"none",b=this.rotationAmount?e%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
+    `}};a.stylesInjected=false,a.cdnBaseUrl="",a.instances=new Set,s([property({type:String})],a.prototype,"src",2),s([property({type:String})],a.prototype,"alt",2),s([property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId",2),s([property({type:String})],a.prototype,"size",2),s([property({type:String})],a.prototype,"variant",2),s([property({type:String})],a.prototype,"shadow",2),s([property({type:Boolean})],a.prototype,"border",2),s([property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth",2),s([property({type:String,attribute:"border-color"})],a.prototype,"borderColor",2),s([property({type:Number})],a.prototype,"rotation",2),s([property({type:String,attribute:"bg-color"})],a.prototype,"bgColor",2),s([property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient",2),s([property({type:Object,attribute:"ring",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"ring",2),s([property({type:Object,attribute:"presence",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"presence",2),s([property({type:Object,attribute:"glow",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"glow",2),s([property({type:Object,attribute:"ribbon",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"ribbon",2),s([property({type:Object,attribute:"badge",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"badge",2),s([property({type:String})],a.prototype,"loading",2),s([property({type:String})],a.prototype,"placeholder",2),s([property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor",2),s([property({type:String})],a.prototype,"fallback",2),s([property({type:Object,attribute:"interactive",converter:{fromAttribute:t=>{if(t)try{return JSON.parse(t)}catch{return}},toAttribute:t=>t?JSON.stringify(t):null}})],a.prototype,"interactive",2),s([state()],a.prototype,"isLoaded",2),s([state()],a.prototype,"hasError",2),s([state()],a.prototype,"cdnImageUrl",2),s([state()],a.prototype,"cdnLoadFailed",2),a=s([customElement("profile-picture")],a);var Mt=false;function Qt(){if(Mt||typeof document>"u")return;let r=document.createElement("style");r.textContent=Lt,document.head.appendChild(r),Mt=true;}var b=class extends LitElement{constructor(){super(...arguments);this.max=z.max;this.direction=z.direction;this.overlap=z.overlap;this.size=z.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=z.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 Qt(),this}get pixelSize(){return Ct(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??z.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??z.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","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let t=Array.from(this.children).filter(e=>e.tagName.toLowerCase()==="profile-picture"&&e.getAttribute("slot")!=="internal");this.users=t.map((e,n)=>{let i=e.getAttribute("border-width"),p=i?Number.parseInt(i,10):void 0;return {id:e.getAttribute("data-user-id")??void 0,name:e.getAttribute("alt")??`User ${n+1}`,src:e.getAttribute("src")??void 0,status:e.getAttribute("data-status")??void 0,element:e,index:n,variant:e.getAttribute("variant")??void 0,shadow:e.getAttribute("shadow")??void 0,border:e.hasAttribute("border"),borderWidth:p,borderColor:e.getAttribute("border-color")??void 0,bgColor:e.getAttribute("bg-color")??void 0,bgGradient:e.getAttribute("bg-gradient")??void 0}});for(let e of this.users)e.element&&(e.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(t){if(!(this.portalContainer&&this.counterRef))return;let e=this.counterRef.getBoundingClientRect(),n=10,i=280,p=Math.min(this.dropdownMaxHeight+60,t.length*56+60),d=window.innerWidth,u=window.innerHeight;if(d<480){let S=html`
+        <div
+          class="ppg-backdrop ppg-backdrop-visible"
+          style="pointer-events: auto; background: rgba(0,0,0,0.5);"
+          @click=${this.handleBackdropClick}
+          aria-hidden="true"
+        ></div>
+        <div
+          class="ppg-dropdown ppg-dropdown-modal"
+          style=${styleMap({position:"fixed",pointerEvents:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"calc(100vw - 32px)",maxWidth:"320px",maxHeight:"70vh"})}
+          data-position="modal"
+          role="menu"
+          aria-label="Hidden users"
+        >
+          <div class="ppg-dropdown-header">
+            ${t.length} more
+          </div>
+          <div
+            class="ppg-dropdown-list"
+            style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
+          >
+            ${t.map(L=>this.renderDropdownItem(L))}
+          </div>
+        </div>
+      `;render(S,this.portalContainer);return}let h=u-e.bottom-n,v=e.top-n,y=d-e.left,T=e.right,l=this.dropdownPosition;l==="bottom"&&h<p&&v>h?l="top":l==="top"&&v<p&&h>v&&(l="bottom");let m;y>=i?m=e.left:T>=i?m=e.right-i:m=(d-i)/2,m=Math.max(8,Math.min(m,d-i-8));let M=l==="bottom"?e.bottom+n:void 0,U=l==="top"?u-e.top+n:void 0,P=html`
+      <div
+        class="ppg-backdrop"
+        style="pointer-events: auto;"
+        @click=${this.handleBackdropClick}
+        aria-hidden="true"
+      ></div>
+      <div
+        class="ppg-dropdown ppg-dropdown-portal"
+        style=${styleMap({position:"fixed",pointerEvents:"auto",top:M!==void 0?`${M}px`:"auto",bottom:U!==void 0?`${U}px`:"auto",left:`${m}px`,width:`${i}px`})}
+        data-position=${l}
+        role="menu"
+        aria-label="Hidden users"
+      >
+        <div class="ppg-dropdown-header">
+          ${t.length} more
+        </div>
+        <div
+          class="ppg-dropdown-list"
+          style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
+        >
+          ${t.map(S=>this.renderDropdownItem(S))}
+        </div>
+      </div>
+    `;render(P,this.portalContainer);}handleAvatarClick(t){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:t},bubbles:true,composed:true}));}handleAvatarHover(t,e){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=e.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:t,rect:n.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:t},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(t){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(t)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:t,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(t){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:t},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(t,e){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),e());}renderAvatar(t,e,n){let i=Z(e,this.pixelSize,this.overlap,this.direction,this.spacing),p=St(e,n,this.direction),d=t.variant??"circle",u=t.shadow??"none",f=this.rotationAmount?e%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
       <div
         class="ppg-avatar-wrapper"
-        style=${styleMap({left:`${a}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
+        style=${styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
         tabindex="0"
         role="button"
         aria-label=${t.name}
@@ -762,16 +923,16 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         @mouseleave=${this.handleAvatarLeave}
         @keydown=${h=>this.handleKeyDown(h,()=>this.handleAvatarClick(t))}
       >
-        ${this.renderProfilePicture(t,l,u,b)}
+        ${this.renderProfilePicture(t,d,u,f)}
       </div>
-    `}renderProfilePicture(t,e,o,a){return html`
+    `}renderProfilePicture(t,e,n,i){return html`
       <profile-picture
         .src=${t.src??""}
         .alt=${t.name}
         .size=${this.pixelSize}
         .variant=${e}
-        .shadow=${o}
-        .rotation=${a}
+        .shadow=${n}
+        .rotation=${i}
         ?border=${t.border}
         .borderWidth=${t.border?t.borderWidth??2:2}
         .borderColor=${t.border?t.borderColor??"#ffffff":"#ffffff"}
@@ -780,16 +941,16 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         data-user-id=${t.id??""}
         data-status=${t.status??""}
       ></profile-picture>
-    `}renderCounter(t,e){return html`
+    `}renderCounter(t,e,n){return html`
       <button
         class="ppg-counter"
         style=${styleMap({left:`${e}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
         aria-label=${`${t} more users`}
         aria-expanded=${this.dropdownOpen}
         aria-haspopup="true"
-        @click=${()=>this.handleCounterClick(this.users.slice(-t))}
+        @click=${()=>this.handleCounterClick(n)}
       >
-        ${mt(t)}
+        ${$t(t)}
       </button>
     `}renderAddButton(t){let e=Math.round(this.pixelSize*.4);return html`
       <button
@@ -813,44 +974,22 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
       </button>
-    `}renderTooltip(){if(!this.tooltipData)return nothing;let{user:t,rect:e}=this.tooltipData,o=8,a,p;return this.tooltipPosition==="bottom"?(a=e.bottom+o,p=e.left+e.width/2):(a=e.top-o,p=e.left+e.width/2),html`
+    `}renderTooltip(){if(!this.tooltipData)return nothing;let{user:t,rect:e}=this.tooltipData,n=8,i=this.getBoundingClientRect(),p=e.left-i.left+e.width/2,d=e.top-i.top,u=e.bottom-i.top,f=this.tooltipPosition==="top";return html`
       <div
         class="ppg-tooltip"
-        style=${styleMap({top:this.tooltipPosition==="top"?"auto":`${a}px`,bottom:this.tooltipPosition==="top"?`${window.innerHeight-e.top+o}px`:"auto",left:`${p}px`,transform:"translateX(-50%)"})}
+        style=${styleMap({top:f?"auto":`${u+n}px`,bottom:f?`${i.height-d+n}px`:"auto",left:`${p}px`})}
         data-position=${this.tooltipPosition}
         role="tooltip"
       >
         ${t.name}
       </div>
-    `}renderDropdown(t){return this.dropdownOpen?html`
-      <div
-        class="ppg-backdrop"
-        @click=${this.handleBackdropClick}
-        aria-hidden="true"
-      ></div>
-      <div
-        class="ppg-dropdown"
-        data-position=${this.dropdownPosition}
-        role="menu"
-        aria-label="Hidden users"
-      >
-        <div class="ppg-dropdown-header">
-          ${t.length} more
-        </div>
-        <div
-          class="ppg-dropdown-list"
-          style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
-        >
-          ${t.map(e=>this.renderDropdownItem(e))}
-        </div>
-      </div>
-    `:nothing}renderDropdownItem(t){let e=F(t.name);return html`
+    `}renderDropdownItem(t){let e=X(t.name);return html`
       <div
         class="ppg-dropdown-item"
         role="menuitem"
         tabindex="0"
         @click=${()=>this.handleDropdownItemClick(t)}
-        @keydown=${o=>this.handleKeyDown(o,()=>this.handleDropdownItemClick(t))}
+        @keydown=${n=>this.handleKeyDown(n,()=>this.handleDropdownItemClick(t))}
       >
         ${t.src?html`<img
               class="ppg-dropdown-avatar"
@@ -860,7 +999,7 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
               class="ppg-dropdown-avatar-fallback"
               style=${styleMap({background:e})}
             >
-              ${O(t.name)}
+              ${q(t.name)}
             </div>`}
         <div class="ppg-dropdown-info">
           <div class="ppg-dropdown-name">${t.name}</div>
@@ -875,9 +1014,9 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
               `:nothing}
         </div>
       </div>
-    `}formatStatus(t){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[t]??t}render(){let{visible:t,hidden:e,showCounter:o}=bt(this.users.length,this.max,this.showAddButton),a=this.direction==="ltr"?this.users.slice(0,t):this.users.slice(0,t).reverse(),p=this.users.slice(t),l=t;o&&l++,this.showAddButton&&l++;let u=ht(l,this.pixelSize,this.overlap,this.spacing),b=o?N(t,this.pixelSize,this.overlap,this.direction,this.spacing):0,h=N(t+(o?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
+    `}formatStatus(t){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[t]??t}updated(t){super.updated(t);let e=this.querySelector(".ppg-counter");if(e&&(this.counterRef=e),this.dropdownOpen&&this.portalContainer){let{visible:n}=nt(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:t,hidden:e,showCounter:n}=nt(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,t):this.users.slice(0,t).reverse(),p=this.users.slice(t),d=t;n&&d++,this.showAddButton&&d++;let u=kt(d,this.pixelSize,this.overlap,this.spacing),f=n?Z(t,this.pixelSize,this.overlap,this.direction,this.spacing):0,h=Z(t+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
       <div
-        class=${x("ppg-container",this.animated&&"ppg-animated")}
+        class=${$("ppg-container",this.animated&&"ppg-animated")}
         style=${styleMap({width:`${u}px`,height:`${this.pixelSize}px`})}
         role="group"
         aria-label="User avatars"
@@ -886,19 +1025,16 @@ ${Ft}`;var i=class extends LitElement{constructor(){super(...arguments);this.src
         <slot style="display: none;"></slot>
 
         <!-- Visible avatars -->
-        ${a.map((k,$)=>this.renderAvatar(k,$,t))}
+        ${i.map((v,y)=>this.renderAvatar(v,y,t))}
 
         <!-- Counter -->
-        ${o?this.renderCounter(e,b):nothing}
+        ${n?this.renderCounter(e,f,p):nothing}
 
         <!-- Add button -->
         ${this.showAddButton?this.renderAddButton(h):nothing}
 
         <!-- Tooltip -->
         ${this.renderTooltip()}
-
-        <!-- Dropdown -->
-        ${o?this.renderDropdown(p):nothing}
       </div>
-    `}};s([property({type:Number})],g.prototype,"max",2),s([property({type:String})],g.prototype,"direction",2),s([property({type:Number})],g.prototype,"overlap",2),s([property({type:String})],g.prototype,"size",2),s([property({type:Number})],g.prototype,"spacing",2),s([property({type:Object})],g.prototype,"tooltip",2),s([property({type:Object})],g.prototype,"dropdown",2),s([property({type:Boolean,attribute:"show-add-button"})],g.prototype,"showAddButton",2),s([property({type:String,attribute:"add-button-label"})],g.prototype,"addButtonLabel",2),s([property({type:Boolean})],g.prototype,"animated",2),s([property({type:Number,attribute:"rotation-amount"})],g.prototype,"rotationAmount",2),s([state()],g.prototype,"users",2),s([state()],g.prototype,"dropdownOpen",2),s([state()],g.prototype,"tooltipData",2),g=s([customElement("profile-picture-group")],g);var et=zt.forwardRef(({max:r,direction:n,overlap:t,size:e,spacing:o,tooltip:a,dropdown:p,showAddButton:l,addButtonLabel:u,animated:b,onAvatarClick:h,onAvatarHover:k,onCounterClick:$,onDropdownItemClick:E,onAddClick:G,className:H,style:V,children:W},I)=>{let A=useRef(null),Y=useCallback(c=>{h?.(c.detail.user);},[h]),J=useCallback(c=>{k?.(c.detail.user);},[k]),K=useCallback(c=>{let U=c;$?.(U.detail.hiddenUsers,U.detail.open);},[$]),q=useCallback(c=>{E?.(c.detail.user);},[E]),Z=useCallback(()=>{G?.();},[G]);return useEffect(()=>{let c=A.current;if(c)return c.addEventListener("avatar-click",Y),c.addEventListener("avatar-hover",J),c.addEventListener("counter-click",K),c.addEventListener("dropdown-item-click",q),c.addEventListener("add-click",Z),()=>{c.removeEventListener("avatar-click",Y),c.removeEventListener("avatar-hover",J),c.removeEventListener("counter-click",K),c.removeEventListener("dropdown-item-click",q),c.removeEventListener("add-click",Z);}},[Y,J,K,q,Z]),useEffect(()=>{typeof I=="function"?I(A.current):I&&(I.current=A.current);},[I]),zt.createElement("profile-picture-group",{ref:A,max:r,direction:n,overlap:t,size:e,spacing:o,tooltip:a,dropdown:p,"show-add-button":l||void 0,"add-button-label":u,animated:b,class:H,style:V},W)});et.displayName="ProfilePictureGroup";var Dt=zt.forwardRef(({src:r,alt:n,size:t,variant:e,border:o,borderWidth:a,borderColor:p,bgColor:l,bgGradient:u,ribbon:b,badge:h,loading:k,placeholder:$,placeholderColor:E,fallback:G,onLoad:H,onError:V,className:W,style:I},A)=>zt.createElement("profile-picture",{ref:A,src:r,alt:n,size:t,variant:e,border:o,"border-width":a,"border-color":p,"bg-color":l,"bg-gradient":u,ribbon:b,badge:h,loading:k,placeholder:$,"placeholder-color":E,fallback:G,onLoad:H,onError:V,className:W,style:I}));Dt.displayName="ProfilePicture";nt();export{Dt as ProfilePicture,et as ProfilePictureGroup,_ as constructCdnUrl,P as detectThemeFromColor,Q as getCdnSizeLabel};//# sourceMappingURL=index.js.map
+    `}};s([property({type:Number})],b.prototype,"max",2),s([property({type:String})],b.prototype,"direction",2),s([property({type:Number})],b.prototype,"overlap",2),s([property({type:String})],b.prototype,"size",2),s([property({type:Number})],b.prototype,"spacing",2),s([property({type:Object})],b.prototype,"tooltip",2),s([property({type:Object})],b.prototype,"dropdown",2),s([property({type:Boolean,attribute:"show-add-button"})],b.prototype,"showAddButton",2),s([property({type:String,attribute:"add-button-label"})],b.prototype,"addButtonLabel",2),s([property({type:Boolean})],b.prototype,"animated",2),s([property({type:Number,attribute:"rotation-amount"})],b.prototype,"rotationAmount",2),s([state()],b.prototype,"users",2),s([state()],b.prototype,"dropdownOpen",2),s([state()],b.prototype,"tooltipData",2),b=s([customElement("profile-picture-group")],b);var dt=Ut.forwardRef(({max:r,direction:o,overlap:t,size:e,spacing:n,tooltip:i,dropdown:p,showAddButton:d,addButtonLabel:u,animated:f,rotationAmount:h,onAvatarClick:v,onAvatarHover:y,onCounterClick:T,onDropdownItemClick:l,onAddClick:m,className:M,style:U,children:P},S)=>{let L=useRef(null),B=useCallback(g=>{v?.(g.detail.user);},[v]),O=useCallback(g=>{y?.(g.detail.user);},[y]),G=useCallback(g=>{let k=g;T?.(k.detail.hiddenUsers,k.detail.open);},[T]),F=useCallback(g=>{l?.(g.detail.user);},[l]),j=useCallback(()=>{m?.();},[m]);return useEffect(()=>{let g=L.current;if(g)return g.addEventListener("avatar-click",B),g.addEventListener("avatar-hover",O),g.addEventListener("counter-click",G),g.addEventListener("dropdown-item-click",F),g.addEventListener("add-click",j),()=>{g.removeEventListener("avatar-click",B),g.removeEventListener("avatar-hover",O),g.removeEventListener("counter-click",G),g.removeEventListener("dropdown-item-click",F),g.removeEventListener("add-click",j);}},[B,O,G,F,j]),useEffect(()=>{typeof S=="function"?S(L.current):S&&(S.current=L.current);},[S]),Ut.createElement("profile-picture-group",{ref:L,max:r,direction:o,overlap:t,size:e,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":u,animated:f,"rotation-amount":h,class:M,style:U},P)});dt.displayName="ProfilePictureGroup";function Gt({src:r,alt:o,extCustomerId:t,size:e,variant:n,shadow:i,border:p,borderWidth:d,borderColor:u,rotation:f,bgColor:h,bgGradient:v,glow:y,ring:T,presence:l,ribbon:m,badge:M,loading:U,placeholder:P,placeholderColor:S,fallback:L,interactive:B,onLoad:O,onError:G,onCdnError:F,className:j,style:g,ref:k}){let Y=useRef(null),_=useCallback(()=>{O?.();},[O]),tt=useCallback(()=>{G?.();},[G]),et=useCallback(D=>{F?.(D.detail);},[F]);return useEffect(()=>{let D=Y.current;if(D)return D.addEventListener("load",_),D.addEventListener("error",tt),D.addEventListener("cdn-error",et),()=>{D.removeEventListener("load",_),D.removeEventListener("error",tt),D.removeEventListener("cdn-error",et);}},[_,tt,et]),useEffect(()=>{typeof k=="function"?k(Y.current):k&&(k.current=Y.current);},[k]),Ut.createElement("profile-picture",{ref:Y,src:r,alt:o,"ext-customer-id":t,size:e,variant:n,shadow:i,border:p||void 0,"border-width":d,"border-color":u,rotation:f,"bg-color":h,"bg-gradient":v,glow:y?JSON.stringify(y):void 0,ring:T?JSON.stringify(T):void 0,presence:l?JSON.stringify(l):void 0,ribbon:m?JSON.stringify(m):void 0,badge:M?JSON.stringify(M):void 0,loading:U,placeholder:P,"placeholder-color":S,fallback:L,interactive:B?JSON.stringify(B):void 0,class:j,style:g})}Gt.displayName="ProfilePicture";gt();export{Gt as ProfilePicture,dt as ProfilePictureGroup,at as constructCdnUrl,it as detectThemeFromColor,ot as getCdnSizeLabel};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map