@grasco/profile-picture 0.2.6 → 0.2.7

package/dist/angular.d.cts

@@ -40,6 +40,8 @@ interface BadgeConfig {
     max?: number;
     /** Icon to display before content (emoji, Unicode symbol, or text) */
     icon?: string;
+    /** Scale multiplier for badge size (default: 1) */
+    scale?: number;
 }
 interface GlowConfig {
     /** Glow color (defaults to border or bg color) */

package/dist/angular.d.ts

@@ -40,6 +40,8 @@ interface BadgeConfig {
     max?: number;
     /** Icon to display before content (emoji, Unicode symbol, or text) */
     icon?: string;
+    /** Scale multiplier for badge size (default: 1) */
+    scale?: number;
 }
 interface GlowConfig {
     /** Glow color (defaults to border or bg color) */

package/dist/angular.js

@@ -1,4 +1,4 @@
-import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var ke=Object.defineProperty;var s=(r,o,e,t)=>{for(var n=void 0,i=r.length-1,l;i>=0;i--)(l=r[i])&&(n=(l(o,e,n))||n);return n&&ke(o,e,n),n};var H="grasco-profile-picture-styles",T=false,X=false;function Z(){if(T||typeof document>"u")return;if(document.getElementById(H)){T=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){T=true;return}X||(X=true,$e());}function $e(){(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>Ie());}function Ie(){if(T||typeof document>"u")return;if(document.getElementById(H)){T=true;return}let r=ze();if(!r)return;let o=document.createElement("link");o.id=H,o.rel="stylesheet",o.href=r,document.head.appendChild(o),T=true;}function ze(){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 D={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},Q={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},_={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)"},v={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},S={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function $(...r){return r.filter(Boolean).join(" ")}function te(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function P(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 W(r){return Math.round(r*.38)}function re(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 ne(r,o){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(o-1)*2)}function oe(r,o){return typeof r=="string"?r:o&&r>o?`${o}+`:r.toString()}function ie(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 B(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 ae(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 O(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=B(r)%o.length;return o[e]}var ee=[["#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 V(r,o,e){let t=p=>[Number.parseInt(p.slice(1,3),16),Number.parseInt(p.slice(3,5),16),Number.parseInt(p.slice(5,7),16)],n=t(r),i=t(o),l=p=>Math.round(n[p]+(i[p]-n[p])*e).toString(16).padStart(2,"0");return `#${l(0)}${l(1)}${l(2)}`}function se(r){let o=B(r),e=ee[o%ee.length],t="#f5f0eb",n=V(e[0],t,.85),i=V(e[1],t,.85),l=V(e[2],t,.85),p=B(r+"pos1"),d=B(r+"pos2"),c=20+o%61,u=20+(o>>4)%61,b=20+p%61,z=20+(p>>4)%61,E=20+d%61,w=20+(d>>4)%61;return [`radial-gradient(circle at ${c}% ${u}%, ${e[0]} 0%, ${n} 70%)`,`radial-gradient(circle at ${b}% ${z}%, ${e[1]} 0%, ${i} 70%)`,`radial-gradient(circle at ${E}% ${w}%, ${e[2]} 0%, ${l} 70%)`].join(", ")}function pe(r){return typeof r=="number"?r:D[r]??D[S.size]}function q(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 L(r,o,e,t,n){let i=n??o*(1-e);return r*i}function de(r,o,e){return e==="ltr"?o-r:r+1}function le(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 ce(r){return r>99?"+99":`+${r}`}function ge(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function ue(r,o,e,t,n){let i=r.endsWith("/")?r.slice(0,-1):r,l=`${o}_${e}_${t}.webp`;return `${i}/profile-picture/cdn/${l}?hostname=${n}`}function fe(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function be(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 me(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 he(r){return {boxShadow:_[r]}}var Me={shimmer:`
+import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var $e=Object.defineProperty;var s=(r,n,e,t)=>{for(var o=void 0,i=r.length-1,d;i>=0;i--)(d=r[i])&&(o=(d(n,e,o))||o);return o&&$e(n,e,o),o};var W="grasco-profile-picture-styles",T=false,Z=false;function Q(){if(T||typeof document>"u")return;if(document.getElementById(W)){T=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){T=true;return}Z||(Z=true,Me());}function Me(){(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>ze());}function ze(){if(T||typeof document>"u")return;if(document.getElementById(W)){T=true;return}let r=Ee();if(!r)return;let n=document.createElement("link");n.id=W,n.rel="stylesheet",n.href=r,document.head.appendChild(n),T=true;}function Ee(){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)}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},_={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},ee={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)"},y={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm",zoom:1.2};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},I={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function M(...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 G(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 V(r){return Math.round(r*.38)}function oe(r,n){let e;if(n){let o=Math.round(r*.31);e=Math.min(24,Math.max(14,o));}else {let o=Math.round(r*.22);e=Math.min(14,Math.max(8,o));}let t=Math.max(9,Math.round(e*.55));return {size:e,fontSize:t}}function ne(r,n){let e=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,e+(n-1)*2)}function ie(r,n){return typeof r=="string"?r:n&&r>n?`${n}+`:r.toString()}function ae(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((e,t)=>{let o=t/r.length*360,i=(t+1)/r.length*360;return `${e} ${o}deg ${i}deg`}).join(", ")})`}function L(r){let n=0;for(let e=0;e<r.length;e++){let t=r.charCodeAt(e);n=(n<<5)-n+t,n&=n;}return Math.abs(n)}function se(r,n,e){let o=Math.max(0,Math.min(100,r))/100*360;return `conic-gradient(from 270deg, ${n} 0deg ${o}deg, ${e} ${o}deg 360deg)`}function 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%)"],e=L(r)%n.length;return n[e]}var te=[["oklch(70% 0.18 30)","oklch(65% 0.20 350)","oklch(60% 0.22 280)"],["oklch(72% 0.16 15)","oklch(68% 0.19 45)","oklch(62% 0.15 280)"],["oklch(70% 0.15 310)","oklch(65% 0.18 280)","oklch(75% 0.12 340)"],["oklch(70% 0.14 220)","oklch(65% 0.18 200)","oklch(60% 0.20 280)"],["oklch(75% 0.16 70)","oklch(68% 0.20 40)","oklch(65% 0.14 320)"],["oklch(68% 0.18 280)","oklch(72% 0.15 310)","oklch(65% 0.20 340)"],["oklch(70% 0.15 175)","oklch(65% 0.18 200)","oklch(60% 0.20 260)"],["oklch(72% 0.14 350)","oklch(68% 0.16 310)","oklch(75% 0.10 220)"],["oklch(72% 0.18 85)","oklch(65% 0.20 55)","oklch(60% 0.16 310)"],["oklch(70% 0.14 155)","oklch(68% 0.16 130)","oklch(72% 0.12 80)"],["oklch(65% 0.20 340)","oklch(70% 0.16 310)","oklch(62% 0.18 270)"],["oklch(75% 0.18 90)","oklch(68% 0.16 60)","oklch(62% 0.14 310)"]],Te="oklch(95% 0.02 264)";function pe(r,n){let e=L(r),t=te[e%te.length],o=L(r+"orb1"),i=L(r+"orb2"),d=15+e%41,l=60+(e>>3)%21,p=35+o%31,c=65+(o>>3)%21,g=70+i%21,h=10+(i>>3)%31,E=Te,U=n<50?Math.max(n*.008,1):Math.max(n*.015,4),m=n<50?Math.max(n*.004,1.2):Math.max(n*.008,1.5),w=n<50?Math.max(n*.004,.5):Math.max(n*.008,2),$;return n<30?$=1.1:n<50?$=Math.max(m*1.2,1.3):$=m,{"--pp-cloud-bg":E,"--pp-cloud-c1":t[0],"--pp-cloud-c2":t[1],"--pp-cloud-c3":t[2],"--pp-cloud-blur":`${U}px`,"--pp-cloud-contrast":`${$}`,"--pp-cloud-shadow":`${w}px`,"--pp-cloud-p1":`${d}% ${l}%`,"--pp-cloud-p2":`${p}% ${c}%`,"--pp-cloud-p3":`${g}% ${h}%`}}function de(r){return typeof r=="number"?r:D[r]??D[I.size]}function q(r,n,e){let t=e?n-1:n;if(r<=t)return {visible:r,hidden:0,showCounter:false};let o=t-1,i=r-o;return {visible:o,hidden:i,showCounter:true}}function N(r,n,e,t,o){let i=o??n*(1-e);return r*i}function le(r,n,e){return e==="ltr"?n-r:r+1}function ce(r,n,e,t){if(r===0)return 0;if(r===1)return n;let o=t??n*(1-e);return n+o*(r-1)}function ue(r){return r>99?"+99":`+${r}`}function ge(r){return r<=80?"120":r<=120?"240":r<=240?"480":("960")}function fe(r,n,e,t,o){let i=r.endsWith("/")?r.slice(0,-1):r,d=`${n}_${e}_${t}.webp`;return `${i}/profile-picture/cdn/${d}?hostname=${o}`}function he(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function be(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 me(r,n){return n?{className:"",style:{background:n}}:r?r.includes("gradient")?{className:"",style:{background:r}}:{className:"",style:{backgroundColor:r}}:{className:"",style:{backgroundColor:"transparent"}}}function xe(r){return {boxShadow:ee[r]}}var De={shimmer:`
 @keyframes pp-shimmer {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -36,8 +36,17 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
   0% { transform: scale(0.8); opacity: 0; }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); opacity: 1; }
-}`},Ee=Object.values(Me).join(`
-`),Te=`
+}`,cloudRotate:`
+@property --pp-cloud-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes pp-cloud-rotate {
+  to { --pp-cloud-angle: 360deg; }
+}`},Ae=Object.values(De).join(`
+`),Re=`
 /* Profile Picture Component Styles */
 .pp-container {
   --pp-transition-duration: 200ms;
@@ -117,6 +126,77 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
   color: rgba(156, 163, 175, 0.8);
 }
 
+/* Cloudy orb background (animated conic gradients with blur + contrast) */
+.pp-cloudy-bg {
+  display: grid;
+  grid-template-areas: "stack";
+  overflow: hidden;
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+}
+
+.pp-cloudy-bg::before,
+.pp-cloudy-bg::after {
+  content: "";
+  display: block;
+  grid-area: stack;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.pp-cloudy-bg::before {
+  background:
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * 2) at var(--pp-cloud-p1),
+      var(--pp-cloud-c3),
+      transparent 20% 80%,
+      var(--pp-cloud-c3)
+    ),
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * 2) at var(--pp-cloud-p2),
+      var(--pp-cloud-c2),
+      transparent 30% 60%,
+      var(--pp-cloud-c2)
+    ),
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * -3) at var(--pp-cloud-p3),
+      var(--pp-cloud-c1),
+      transparent 40% 60%,
+      var(--pp-cloud-c1)
+    ),
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * 2) at 15% 5%,
+      var(--pp-cloud-c2),
+      transparent 10% 90%,
+      var(--pp-cloud-c2)
+    ),
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * 1) at 20% 80%,
+      var(--pp-cloud-c1),
+      transparent 10% 90%,
+      var(--pp-cloud-c1)
+    ),
+    conic-gradient(
+      from calc(var(--pp-cloud-angle) * -2) at 85% 10%,
+      var(--pp-cloud-c3),
+      transparent 20% 80%,
+      var(--pp-cloud-c3)
+    );
+  box-shadow: inset var(--pp-cloud-bg) 0 0 var(--pp-cloud-shadow)
+    calc(var(--pp-cloud-shadow) * 0.2);
+  filter: blur(var(--pp-cloud-blur)) contrast(var(--pp-cloud-contrast));
+  animation: pp-cloud-rotate 20s linear infinite;
+}
+
+.pp-cloudy-bg::after {
+  backdrop-filter: blur(calc(var(--pp-cloud-blur) * 1.5));
+  mix-blend-mode: overlay;
+  background: var(--pp-cloud-bg);
+  opacity: 0.15;
+}
+
 /* Shimmer placeholder */
 .pp-shimmer {
   position: absolute;
@@ -236,13 +316,14 @@ import {LitElement,nothing,html,render}from'lit';import {property,state}from'lit
   .pp-badge,
   .pp-ring-animated,
   .pp-presence-animated,
-  .pp-glow {
+  .pp-glow,
+  .pp-cloudy-bg::before {
     animation: none !important;
     transition: none !important;
   }
 }
-`,xe=`${Ee}
-${Te}`,we=`
+`,ve=`${Ae}
+${Re}`,we=`
 @keyframes np-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
@@ -252,7 +333,7 @@ ${Te}`,we=`
   background-size: 200% 100%;
   animation: np-shimmer 1.5s infinite;
 }
-`;function ve(r,o=.3){if(te(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 De=`
+`;function ye(r,n=.3){if(re(r)){let e=Number.parseInt(r.slice(1,3),16),t=Number.parseInt(r.slice(3,5),16),o=Number.parseInt(r.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${t}, ${o}, ${n})`}return `0 0 20px 0 ${r}`}var Ue=`
 @keyframes ppg-tooltip-in {
   from {
     opacity: 0;
@@ -303,7 +384,7 @@ ${Te}`,we=`
     opacity: 1;
   }
 }
-`,Ae=`
+`,Be=`
 /* Profile Picture Group Container */
 .ppg-container {
   --ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -748,29 +829,29 @@ ${Te}`,we=`
     box-shadow: 0 0 0 1.5px rgba(44, 44, 46, 0.95), 0 0 6px rgba(48, 209, 88, 0.5);
   }
 }
-`,ye=`${De}
-${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=v.size;this.variant=v.variant;this.shadow=v.shadow;this.border=false;this.borderWidth=v.borderWidth;this.borderColor=v.borderColor;this.rotation=0;this.zoom=v.zoom;this.loading=v.loading;this.placeholder=v.placeholder;this.placeholderColor=v.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=xe,document.head.appendChild(t),a.stylesInjected=true;});}resolveObjectProp(e){if(e){if(typeof e=="string")try{return JSON.parse(e)}catch{return}return e}}get pixelSize(){let e=this.size;return typeof e=="number"?e:D[e]??D[v.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.resolveObjectProp(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.resolveObjectProp(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=ge(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=ue(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=me(this.bgColor,this.bgGradient),t=this.border?be(this.borderWidth,this.borderColor):null,n=he(this.shadow),i=this.resolveObjectProp(this.glow),l={};if(i){let c=i.color??this.borderColor??"#6366f1";l={"--pp-glow-color":c,boxShadow:ve(c,i.intensity??.3)};}let p=this.resolveObjectProp(this.interactive),d=p?.hoverable||p?.pressable;return {classes:$("pp-container",fe(this.variant),t?.className,d&&"pp-interactive",i?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:A[this.variant],...t?.style,...n,...l,cursor:p?.cursor??(d?"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`
+`,Ce=`${Ue}
+${Be}`;var a=class a extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=y.size;this.variant=y.variant;this.shadow=y.shadow;this.border=false;this.borderWidth=y.borderWidth;this.borderColor=y.borderColor;this.rotation=0;this.zoom=y.zoom;this.loading=y.loading;this.placeholder=y.placeholder;this.placeholderColor=y.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=ve,document.head.appendChild(t),a.stylesInjected=true;});}resolveObjectProp(e){if(e){if(typeof e=="string")try{return JSON.parse(e)}catch{return}return e}}get pixelSize(){let e=this.size;return typeof e=="number"?e:D[e]??D[y.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){if(super.updated(e),this.extCustomerId&&a.cdnBaseUrl&&!this.cdnImageUrl&&!this.previousExtCustomerId&&(this.previousExtCustomerId=this.extCustomerId,this.cdnLoadFailed=false,this.loadCdnImage()),!this.isLoaded&&!this.hasError){let t=this.querySelector("img.pp-image");t?.complete&&t.naturalWidth>0&&(this.isLoaded=true);}}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.previousSrc=this.src,this.cdnImageUrl||(this.isLoaded=false,this.hasError=false));let t=e.has("extCustomerId")&&this.extCustomerId!==this.previousExtCustomerId,o=e.has("size")||e.has("imageMode");if(t||o&&this.extCustomerId){this.previousExtCustomerId=this.extCustomerId;let i=this.cdnImageUrl;this.cdnImageUrl=void 0,this.cdnLoadFailed=false,this.retryTimeoutId&&(clearTimeout(this.retryTimeoutId),this.retryTimeoutId=void 0),this.loadCdnImage(),this.cdnImageUrl!==i&&(this.isLoaded=false,this.hasError=false);}}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleClick(e){this.resolveObjectProp(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.resolveObjectProp(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=ge(this.pixelSize),t=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=fe(a.cdnBaseUrl,this.extCustomerId,e,this.imageMode,t);}getContainerStyles(){let e=me(this.bgColor,this.bgGradient),t=this.border?be(this.borderWidth,this.borderColor):null,o=xe(this.shadow),i=this.resolveObjectProp(this.glow),d={};if(i){let c=i.color??this.borderColor??"#6366f1";d={"--pp-glow-color":c,boxShadow:ye(c,i.intensity??.3)};}let l=this.resolveObjectProp(this.interactive),p=l?.hoverable||l?.pressable;return {classes:M("pp-container",he(this.variant),t?.className,p&&"pp-interactive",i?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:A[this.variant],...t?.style,...o,...d,cursor:l?.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>${we}</style>`:nothing}
       <div
-        class=${$("np:absolute np:inset-0",e)}
+        class=${M("np:absolute np:inset-0",e)}
         style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
       </div>
-    `}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){let n=se(this.gradientSeed);return html`
+    `}renderFallback(){let e=!!(this.bgColor||this.bgGradient);if(this.fallbackMode==="gradient"){if(e)return html`<div class="pp-fallback np:absolute np:inset-0"></div>`;let o=pe(this.gradientSeed,this.pixelSize);return html`
         <div
-          class="pp-fallback np:absolute np:inset-0"
-          style=${styleMap({background:e?"transparent":n})}>
+          class="pp-cloudy-bg"
+          style=${styleMap(o)}>
         </div>
       `}if(this.fallback)return html`
         <span
           class="pp-fallback"
-          style=${styleMap({fontSize:`${W(this.pixelSize)}px`})}>
+          style=${styleMap({fontSize:`${V(this.pixelSize)}px`})}>
           ${this.fallback}
         </span>
-      `;if(this.alt){let n=O(this.alt);return html`
+      `;if(this.alt){let o=F(this.alt);return html`
         <div
           class="pp-fallback np:absolute np:inset-0"
-          style=${styleMap({background:e?"transparent":n,fontSize:`${W(this.pixelSize)}px`})}>
-          ${P(this.alt)}
+          style=${styleMap({background:e?"transparent":o,fontSize:`${V(this.pixelSize)}px`})}>
+          ${G(this.alt)}
         </div>
       `}let t=this.pixelSize*.5;return html`
       <svg
@@ -780,7 +861,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         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 e=!!(this.extCustomerId&&a.cdnBaseUrl),t;if(this.cdnImageUrl?t=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(t=this.src),this.hasError||!t)return this.renderFallback();let n=this.zoom&&this.zoom!==1?styleMap({transform:`scale(${this.zoom})`}):nothing;return html`
+    `}renderImage(){let e=!!(this.extCustomerId&&a.cdnBaseUrl),t;if(this.cdnImageUrl?t=this.cdnImageUrl:(!e||this.cdnLoadFailed)&&(t=this.src),this.hasError||!t)return this.renderFallback();let o=this.zoom&&this.zoom!==1?styleMap({transform:`scale(${this.zoom})`}):nothing;return html`
       <img
         src=${t}
         alt=${this.alt}
@@ -788,32 +869,32 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         decoding="async"
         @load=${this.handleLoad}
         @error=${this.handleError}
-        class=${$("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
-        style=${n}
+        class=${M("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        style=${o}
         draggable="false" />
-    `}renderRing(){let e=this.resolveObjectProp(this.ring);if(!e?.show)return nothing;let t=e.width??3,n=e.gap??3,i=t+n,l,p=e.progress!==void 0;if(p){let d=e.progress??0,c=e.color??"#30D158",u=e.emptyColor??"#8E8E93";l=ae(d,c,u);}else e.gradient&&e.gradient.length>0?l=ie(e.gradient):l=e.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
+    `}renderRing(){let e=this.resolveObjectProp(this.ring);if(!e?.show)return nothing;let t=e.width??3,o=e.gap??3,i=t+o,d,l=e.progress!==void 0;if(l){let p=e.progress??0,c=e.color??"#30D158",g=e.emptyColor??"#8E8E93";d=se(p,c,g);}else e.gradient&&e.gradient.length>0?d=ae(e.gradient):d=e.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return html`
       <div
-        class=${$("pp-ring",e.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
-        style=${styleMap({inset:`-${i}px`,padding:`${t}px`,background:l,borderRadius:A[this.variant]})}>
+        class=${M("pp-ring",e.animate&&!l&&"pp-ring-animated",l&&"pp-ring-progress")}
+        style=${styleMap({inset:`-${i}px`,padding:`${t}px`,background:d,borderRadius:A[this.variant]})}>
       </div>
-    `}getCornerOffset(){let e=this.pixelSize/2,n={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*n}renderPresence(){let e=this.resolveObjectProp(this.presence);if(!e)return nothing;let t=e.thickness??2,n=ne(this.pixelSize,t),i=Q[e.status],p=this.getCornerOffset()-n/2;return html`
+    `}getCornerOffset(){let e=this.pixelSize/2,o={circle:1-Math.SQRT2/2,square:0,rounded:.04,squircle:.08}[this.variant];return e*o}renderPresence(){let e=this.resolveObjectProp(this.presence);if(!e)return nothing;let t=e.thickness??2,o=ne(this.pixelSize,t),i=_[e.status],l=this.getCornerOffset()-o/2;return html`
       <div
-        class=${$("pp-presence",e.animate&&"pp-presence-animated")}
-        style=${styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${p}px`,right:`${p}px`,color:i})}
+        class=${M("pp-presence",e.animate&&"pp-presence-animated")}
+        style=${styleMap({width:`${o}px`,height:`${o}px`,backgroundColor:i,bottom:`${l}px`,right:`${l}px`,color:i})}
         title=${e.status}>
       </div>
-    `}renderBadge(){let e=this.resolveObjectProp(this.badge);if(!e)return nothing;let t=e.position??"bottom-right",n=e.content!==void 0,i=e.icon!==void 0,l=n||i,{size:p,fontSize:d}=re(this.pixelSize,l),c=e.bgColor??"#22c55e",u=e.color??"#ffffff",b=e.borderRadius??"9999px",z=n&&e.content!==void 0?oe(e.content,e.max):null,E=i?e.icon:null,w=d*.9,m=`${this.getCornerOffset()-p/2}px`,N={"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`
+    `}renderBadge(){let e=this.resolveObjectProp(this.badge);if(!e)return nothing;let t=e.position??"bottom-right",o=e.content!==void 0,i=e.icon!==void 0,d=o||i,l=e.scale??1,{size:p,fontSize:c}=oe(this.pixelSize,d),g=Math.round(p*l),h=Math.round(c*l),E=e.bgColor??"#22c55e",U=e.color??"#ffffff",m=e.borderRadius??"9999px",w=o&&e.content!==void 0?ie(e.content,e.max):null,$=i?e.icon:null,O=h*.9,x=`${this.getCornerOffset()-g/2}px`,ke={"top-left":{top:x,left:x},"top-center":{top:x,left:"50%",transform:"translateX(-50%)"},"top-right":{top:x,right:x},"bottom-left":{bottom:x,left:x},"bottom-center":{bottom:x,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:x,right:x}},Se=w?.length===1&&!i,H=d&&!Se;return html`
       <div
-        class=${$("pp-badge",e.pulse&&"pp-badge-pulse",e.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
-        style=${styleMap({width:l?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:l?"0 6px":"0",fontSize:`${d}px`,backgroundColor:c,color:u,borderRadius:b,"--pp-badge-glow-color":c,gap:i&&n?"4px":"0",...N[t]})}>
-        ${E?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${w}px`})}>${E}</span>`:nothing}
-        ${z??nothing}
+        class=${M("pp-badge",e.pulse&&"pp-badge-pulse",e.glow&&"pp-badge-glow",i&&"pp-badge-with-icon")}
+        style=${styleMap({width:H?"auto":`${g}px`,minWidth:H?`${g}px`:"",height:`${g}px`,padding:H?"0 6px":"0",fontSize:`${h}px`,backgroundColor:E,color:U,borderRadius:m,"--pp-badge-glow-color":E,gap:i&&o?"4px":"0",...ke[t]})}>
+        ${$?html`<span class="pp-badge-icon" style=${styleMap({fontSize:`${O}px`})}>${$}</span>`:nothing}
+        ${w??nothing}
       </div>
-    `}render(){let e=this.getContainerStyles(),t=this.resolveObjectProp(this.interactive),n=t?.focusable||t?.pressable?0:void 0;return html`
+    `}render(){let e=this.getContainerStyles(),t=this.resolveObjectProp(this.interactive),o=t?.focusable||t?.pressable?0:void 0;return html`
       <div
         class=${e.classes}
         style=${styleMap(e.styles)}
-        tabindex=${n??nothing}
+        tabindex=${o??nothing}
         role=${t?.pressable?"button":nothing}
         aria-label=${this.alt||nothing}
         @click=${this.handleClick}
@@ -825,7 +906,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
 
         <!-- Inner container for image clipping -->
         <div
-          class=${$("pp-inner",e.innerClasses)}
+          class=${M("pp-inner",e.innerClasses)}
           style=${styleMap({borderRadius:A[this.variant],...e.innerStyles})}>
           <!-- Placeholder -->
           ${this.renderPlaceholder()}
@@ -840,7 +921,7 @@ ${Ae}`;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:Number})],a.prototype,"zoom"),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 R=a;customElements.get("profile-picture")||customElements.define("profile-picture",R);var K=false;function Be(){if(K||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:o=>setTimeout(o,1))(()=>{if(K)return;let o=document.createElement("style");o.textContent=ye,document.head.appendChild(o),K=true;});}var f=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.portalContainer=null;this.counterRef=null;this.handleBackdropClick=()=>{this.dropdownOpen=false,this.destroyPortal();};}createRenderRoot(){return Be(),this}get pixelSize(){return pe(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(),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","image-mode","zoom","loading","placeholder","placeholder-color","fallback","fallback-mode","glow","ring","badge","interactive"]});}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=(d,c)=>{let u=c??d,b=t[d];return b!=null&&b!==""?String(b):t.getAttribute(u)??void 0},l=i("borderWidth","border-width"),p=l?Number.parseInt(String(l),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:p,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient"),imageMode:i("imageMode","image-mode"),zoom:(()=>{let d=i("zoom");return d?Number(d):void 0})(),loading:i("loading"),placeholder:i("placeholder"),placeholderColor:i("placeholderColor","placeholder-color"),fallback:i("fallback"),fallbackMode:i("fallbackMode","fallback-mode"),glow:(()=>{let d=t.glow;if(d&&typeof d=="object")return d;let c=t.getAttribute("glow");if(c)try{return JSON.parse(c)}catch{}})(),ring:(()=>{let d=t.ring;if(d&&typeof d=="object")return d;let c=t.getAttribute("ring");if(c)try{return JSON.parse(c)}catch{}})(),badge:(()=>{let d=t.badge;if(d&&typeof d=="object")return d;let c=t.getAttribute("badge");if(c)try{return JSON.parse(c)}catch{}})(),interactive:(()=>{let d=t.interactive;if(d&&typeof d=="object")return d;let c=t.getAttribute("interactive");if(c)try{return JSON.parse(c)}catch{}})()}});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,l=Math.min(this.dropdownMaxHeight+60,e.length*56+60),p=window.innerWidth,d=window.innerHeight;if(p<480){let j=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:Number})],a.prototype,"zoom"),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 R=a;customElements.get("profile-picture")||customElements.define("profile-picture",R);var K=false;function Le(){if(K||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>{if(K)return;let n=document.createElement("style");n.textContent=Ce,document.head.appendChild(n),K=true;});}var f=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 Le(),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??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","image-mode","zoom","loading","placeholder","placeholder-color","fallback","fallback-mode","glow","ring","badge","interactive"]});}updateUsers(){let e=Array.from(this.children).filter(t=>t.tagName.toLowerCase()==="profile-picture"&&t.getAttribute("slot")!=="internal");this.users=e.map((t,o)=>{let i=(p,c)=>{let g=c??p,h=t[p];return h!=null&&h!==""?String(h):t.getAttribute(g)??void 0},d=i("borderWidth","border-width"),l=d?Number.parseInt(String(d),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${o+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:t,index:o,variant:i("variant"),shadow:i("shadow"),border:!!(t.border??t.hasAttribute("border")),borderWidth:l,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient"),imageMode:i("imageMode","image-mode"),zoom:(()=>{let p=i("zoom");return p?Number(p):void 0})(),loading:i("loading"),placeholder:i("placeholder"),placeholderColor:i("placeholderColor","placeholder-color"),fallback:i("fallback"),fallbackMode:i("fallbackMode","fallback-mode"),glow:(()=>{let p=t.glow;if(p&&typeof p=="object")return p;let c=t.getAttribute("glow");if(c)try{return JSON.parse(c)}catch{}})(),ring:(()=>{let p=t.ring;if(p&&typeof p=="object")return p;let c=t.getAttribute("ring");if(c)try{return JSON.parse(c)}catch{}})(),badge:(()=>{let p=t.badge;if(p&&typeof p=="object")return p;let c=t.getAttribute("badge");if(c)try{return JSON.parse(c)}catch{}})(),interactive:(()=>{let p=t.interactive;if(p&&typeof p=="object")return p;let c=t.getAttribute("interactive");if(c)try{return JSON.parse(c)}catch{}})()}});for(let t of this.users)t.element&&(t.element.style.display="none");}createPortal(){this.portalContainer||(this.portalContainer=document.createElement("div"),this.portalContainer.className="ppg-portal",this.portalContainer.style.cssText="position: fixed; z-index: 99999; pointer-events: none;",document.body.appendChild(this.portalContainer),document.body.style.overflow="hidden");}destroyPortal(){this.portalContainer&&(render(nothing,this.portalContainer),this.portalContainer.remove(),this.portalContainer=null,document.body.style.overflow="");}updatePortalContent(e){if(!(this.portalContainer&&this.counterRef))return;let t=this.counterRef.getBoundingClientRect(),o=10,i=280,d=Math.min(this.dropdownMaxHeight+60,e.length*56+60),l=window.innerWidth,p=window.innerHeight;if(l<480){let P=html`
         <div
           class="ppg-backdrop ppg-backdrop-visible"
           style="pointer-events: auto; background: rgba(0,0,0,0.5);"
@@ -861,10 +942,10 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
             class="ppg-dropdown-list"
             style=${styleMap({maxHeight:"calc(70vh - 60px)"})}
           >
-            ${e.map(Ce=>this.renderDropdownItem(Ce))}
+            ${e.map(x=>this.renderDropdownItem(x))}
           </div>
         </div>
-      `;render(j,this.portalContainer);return}let u=d-t.bottom-n,b=t.top-n,z=p-t.left,E=t.right,w=this.dropdownPosition;w==="bottom"&&u<l&&b>u?w="top":w==="top"&&b<l&&u>b&&(w="bottom");let M;z>=i?M=t.left:E>=i?M=t.right-i:M=(p-i)/2,M=Math.max(8,Math.min(M,p-i-8));let F=w==="bottom"?t.bottom+n:void 0,m=w==="top"?d-t.top+n:void 0,N=html`
+      `;render(P,this.portalContainer);return}let g=p-t.bottom-o,h=t.top-o,E=l-t.left,U=t.right,m=this.dropdownPosition;m==="bottom"&&g<d&&h>g?m="top":m==="top"&&h<d&&g>h&&(m="bottom");let w;E>=i?w=t.left:U>=i?w=t.right-i:w=(l-i)/2,w=Math.max(8,Math.min(w,l-i-8));let $=m==="bottom"?t.bottom+o:void 0,O=m==="top"?p-t.top+o:void 0,X=html`
       <div
         class="ppg-backdrop"
         style="pointer-events: auto;"
@@ -873,8 +954,8 @@ ${Ae}`;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:F!==void 0?`${F}px`:"auto",bottom:m!==void 0?`${m}px`:"auto",left:`${M}px`,width:`${i}px`})}
-        data-position=${w}
+        style=${styleMap({position:"fixed",pointerEvents:"auto",top:$!==void 0?`${$}px`:"auto",bottom:O!==void 0?`${O}px`:"auto",left:`${w}px`,width:`${i}px`})}
+        data-position=${m}
         role="menu"
         aria-label="Hidden users"
       >
@@ -885,30 +966,30 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
           class="ppg-dropdown-list"
           style=${styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
         >
-          ${e.map(j=>this.renderDropdownItem(j))}
+          ${e.map(P=>this.renderDropdownItem(P))}
         </div>
       </div>
-    `;render(N,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=L(t,this.pixelSize,this.overlap,this.direction,this.spacing),l=de(t,n,this.direction),p=e.variant??"circle",d=e.shadow??"none",c=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
+    `;render(X,this.portalContainer);}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,t){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let o=t.currentTarget;this.tooltipTimeout=window.setTimeout(()=>{this.tooltipData={user:e,rect:o.getBoundingClientRect()};},this.tooltipDelay),this.dispatchEvent(new CustomEvent("avatar-hover",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarLeave(){this.clearTooltipTimeout(),this.tooltipData=null;}clearTooltipTimeout(){this.tooltipTimeout&&(window.clearTimeout(this.tooltipTimeout),this.tooltipTimeout=null);}handleCounterClick(e){this.dropdownOpen=!this.dropdownOpen,this.dropdownOpen?(this.createPortal(),this.updatePortalContent(e)):this.destroyPortal(),this.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,this.destroyPortal(),this.dispatchEvent(new CustomEvent("dropdown-item-click",{detail:{user:e},bubbles:true,composed:true}));}handleAddClick(){this.dispatchEvent(new CustomEvent("add-click",{bubbles:true,composed:true}));}handleKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),t());}renderAvatar(e,t,o){let i=N(t,this.pixelSize,this.overlap,this.direction,this.spacing),d=le(t,o,this.direction),l=e.variant??"circle",p=e.shadow??"none",c=this.rotationAmount?t%2===0?-this.rotationAmount:this.rotationAmount:0;return html`
       <div
         class="ppg-avatar-wrapper"
-        style=${styleMap({left:`${i}px`,zIndex:String(l),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
+        style=${styleMap({left:`${i}px`,zIndex:String(d),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
         tabindex="0"
         role="button"
         aria-label=${e.name}
         @click=${()=>this.handleAvatarClick(e)}
-        @mouseenter=${u=>this.handleAvatarHover(e,u)}
+        @mouseenter=${g=>this.handleAvatarHover(e,g)}
         @mouseleave=${this.handleAvatarLeave}
-        @keydown=${u=>this.handleKeyDown(u,()=>this.handleAvatarClick(e))}
+        @keydown=${g=>this.handleKeyDown(g,()=>this.handleAvatarClick(e))}
       >
-        ${this.renderProfilePicture(e,p,d,c)}
+        ${this.renderProfilePicture(e,l,p,c)}
       </div>
-    `}renderProfilePicture(e,t,n,i){return html`
+    `}renderProfilePicture(e,t,o,i){return html`
       <profile-picture
         .src=${e.src||void 0}
         .alt=${e.name}
         .size=${this.pixelSize}
         .variant=${t}
-        .shadow=${n}
+        .shadow=${o}
         .rotation=${i}
         .extCustomerId=${e.extCustomerId}
         ?border=${e.border}
@@ -930,16 +1011,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         data-user-id=${e.id??""}
         data-status=${e.status??""}
       ></profile-picture>
-    `}renderCounter(e,t,n){return html`
+    `}renderCounter(e,t,o){return html`
       <button
         class="ppg-counter"
         style=${styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
         aria-label=${`${e} more users`}
         aria-expanded=${this.dropdownOpen}
         aria-haspopup="true"
-        @click=${()=>this.handleCounterClick(n)}
+        @click=${()=>this.handleCounterClick(o)}
       >
-        ${ce(e)}
+        ${ue(e)}
       </button>
     `}renderAddButton(e){let t=Math.round(this.pixelSize*.4);return html`
       <button
@@ -963,16 +1044,16 @@ ${Ae}`;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(),l=t.left-i.left+t.width/2,p=t.top-i.top,d=t.bottom-i.top,c=this.tooltipPosition==="top";return html`
+    `}renderTooltip(){if(!this.tooltipData)return nothing;let{user:e,rect:t}=this.tooltipData,o=8,i=this.getBoundingClientRect(),d=t.left-i.left+t.width/2,l=t.top-i.top,p=t.bottom-i.top,c=this.tooltipPosition==="top";return html`
       <div
         class="ppg-tooltip"
-        style=${styleMap({top:c?"auto":`${d+n}px`,bottom:c?`${i.height-p+n}px`:"auto",left:`${l}px`})}
+        style=${styleMap({top:c?"auto":`${p+o}px`,bottom:c?`${i.height-l+o}px`:"auto",left:`${d}px`})}
         data-position=${this.tooltipPosition}
         role="tooltip"
       >
         ${e.name}
       </div>
-    `}renderDropdownItem(e){let t=O(e.name),n=e.src||e.extCustomerId;return html`
+    `}renderDropdownItem(e){let t=F(e.name),o=e.src||e.extCustomerId;return html`
       <div
         class="ppg-dropdown-item"
         role="menuitem"
@@ -980,7 +1061,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         @click=${()=>this.handleDropdownItemClick(e)}
         @keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(e))}
       >
-        ${n?html`<profile-picture
+        ${o?html`<profile-picture
               class="ppg-dropdown-avatar"
               .src=${e.src||void 0}
               .alt=${e.name}
@@ -992,7 +1073,7 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
               class="ppg-dropdown-avatar-fallback"
               style=${styleMap({background:t})}
             >
-              ${P(e.name)}
+              ${G(e.name)}
             </div>`}
         <div class="ppg-dropdown-info">
           <div class="ppg-dropdown-name">${e.name}</div>
@@ -1007,10 +1088,10 @@ ${Ae}`;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}=q(this.users.length,this.max,this.showAddButton),i=this.users.slice(n);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:n}=q(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),l=this.users.slice(e),p=e;n&&p++,this.showAddButton&&p++;let d=le(p,this.pixelSize,this.overlap,this.spacing),c=n?L(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,u=L(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:o}=q(this.users.length,this.max,this.showAddButton),i=this.users.slice(o);this.updatePortalContent(i);}}render(){let{visible:e,hidden:t,showCounter:o}=q(this.users.length,this.max,this.showAddButton),i=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),d=this.users.slice(e),l=e;o&&l++,this.showAddButton&&l++;let p=ce(l,this.pixelSize,this.overlap,this.spacing),c=o?N(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,g=N(e+(o?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return html`
       <div
-        class=${$("ppg-container",this.animated&&"ppg-animated")}
-        style=${styleMap({width:`${d}px`,height:`${this.pixelSize}px`})}
+        class=${M("ppg-container",this.animated&&"ppg-animated")}
+        style=${styleMap({width:`${p}px`,height:`${this.pixelSize}px`})}
         role="group"
         aria-label="User avatars"
       >
@@ -1018,16 +1099,16 @@ ${Ae}`;var a=class a extends LitElement{constructor(){super(...arguments);this.s
         <slot style="display: none;"></slot>
 
         <!-- Visible avatars -->
-        ${i.map((b,z)=>this.renderAvatar(b,z,e))}
+        ${i.map((h,E)=>this.renderAvatar(h,E,e))}
 
         <!-- Counter -->
-        ${n?this.renderCounter(t,c,l):nothing}
+        ${o?this.renderCounter(t,c,d):nothing}
 
         <!-- Add button -->
-        ${this.showAddButton?this.renderAddButton(u):nothing}
+        ${this.showAddButton?this.renderAddButton(g):nothing}
 
         <!-- Tooltip -->
         ${this.renderTooltip()}
       </div>
-    `}};s([property({type:Number})],f.prototype,"max"),s([property({type:String})],f.prototype,"direction"),s([property({type:Number})],f.prototype,"overlap"),s([property({type:String})],f.prototype,"size"),s([property({type:Number})],f.prototype,"spacing"),s([property({type:Object})],f.prototype,"tooltip"),s([property({type:Object})],f.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],f.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],f.prototype,"addButtonLabel"),s([property({type:Boolean})],f.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],f.prototype,"rotationAmount"),s([state()],f.prototype,"users"),s([state()],f.prototype,"dropdownOpen"),s([state()],f.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",f);function dt(r){R.setCdnBaseUrl(r);}function lt(){return R.getCdnBaseUrl()}Z();export{lt as getCdnBaseUrl,dt as setCdnBaseUrl};//# sourceMappingURL=angular.js.map
+    `}};s([property({type:Number})],f.prototype,"max"),s([property({type:String})],f.prototype,"direction"),s([property({type:Number})],f.prototype,"overlap"),s([property({type:String})],f.prototype,"size"),s([property({type:Number})],f.prototype,"spacing"),s([property({type:Object})],f.prototype,"tooltip"),s([property({type:Object})],f.prototype,"dropdown"),s([property({type:Boolean,attribute:"show-add-button"})],f.prototype,"showAddButton"),s([property({type:String,attribute:"add-button-label"})],f.prototype,"addButtonLabel"),s([property({type:Boolean})],f.prototype,"animated"),s([property({type:Number,attribute:"rotation-amount"})],f.prototype,"rotationAmount"),s([state()],f.prototype,"users"),s([state()],f.prototype,"dropdownOpen"),s([state()],f.prototype,"tooltipData");customElements.get("profile-picture-group")||customElements.define("profile-picture-group",f);function gt(r){R.setCdnBaseUrl(r);}function ft(){return R.getCdnBaseUrl()}Q();export{ft as getCdnBaseUrl,gt as setCdnBaseUrl};//# sourceMappingURL=angular.js.map
 //# sourceMappingURL=angular.js.map