@grasco/profile-picture 0.1.7 → 0.1.8

package/dist/angular.cjs

@@ -1,2 +1,1013 @@
-'use strict';var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;var r="grasco-profile-picture-styles",n=false,s=false;function i(){if(n||typeof document>"u")return;if(document.getElementById(r)){n=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){n=true;return}s||(s=true,l());}function l(){(typeof requestIdleCallback<"u"?requestIdleCallback:e=>setTimeout(e,1))(()=>u());}function u(){if(n||typeof document>"u")return;if(document.getElementById(r)){n=true;return}let t=c();if(!t)return;let e=document.createElement("link");e.id=r,e.rel="stylesheet",e.href=t,document.head.appendChild(e),n=true;}function c(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let e=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('angular.cjs', document.baseURI).href));if(e)return `${e.substring(0,e.lastIndexOf("/")+1)}dist/styles.css`}catch{}let t=document.currentScript;if(t?.src){let e=new URL(t.src);return `${e.href.substring(0,e.href.lastIndexOf("/")+1)}dist/styles.css`}return null}i();//# sourceMappingURL=angular.cjs.map
+'use strict';var lit=require('lit'),decorators_js=require('lit/decorators.js'),styleMap_js=require('lit/directives/style-map.js');var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;var wt=Object.defineProperty;var vt=Object.getOwnPropertyDescriptor;var s=(r,n,t,e)=>{for(var o=e>1?void 0:e?vt(n,t):n,i=r.length-1,p;i>=0;i--)(p=r[i])&&(o=(e?p(n,t,o):p(o))||o);return e&&o&&wt(n,t,o),o};var G="grasco-profile-picture-styles",T=false,J=false;function K(){if(T||typeof document>"u")return;if(document.getElementById(G)){T=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){T=true;return}J||(J=true,yt());}function yt(){(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>Ct());}function Ct(){if(T||typeof document>"u")return;if(document.getElementById(G)){T=true;return}let r=St();if(!r)return;let n=document.createElement("link");n.id=G,n.rel="stylesheet",n.href=r,document.head.appendChild(n),T=true;}function St(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let n=(typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('angular.cjs', document.baseURI).href));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 E={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},X={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},Z={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"};var A={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},y={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function k(...r){return r.filter(Boolean).join(" ")}function N(r){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(r)}function B(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 j(r){return Math.round(r*.38)}function Q(r,n){let t;if(n){let o=Math.round(r*.31);t=Math.min(24,Math.max(14,o));}else {let o=Math.round(r*.22);t=Math.min(14,Math.max(8,o));}let e=Math.max(9,Math.round(t*.55));return {size:t,fontSize:e}}function _(r,n){let t=Math.min(16,Math.max(8,Math.round(r*.2)));return Math.min(18,t+(n-1)*2)}function P(r,n){return typeof r=="string"?r:n&&r>n?`${n}+`:r.toString()}function tt(r){return r.length===0?"transparent":r.length===1?r[0]:`conic-gradient(${r.map((t,e)=>{let o=e/r.length*360,i=(e+1)/r.length*360;return `${t} ${o}deg ${i}deg`}).join(", ")})`}function kt(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 et(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 M(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=kt(r)%n.length;return n[t]}function rt(r){return typeof r=="number"?r:E[r]??E[y.size]}function H(r,n,t){let e=t?n-1:n;if(r<=e)return {visible:r,hidden:0,showCounter:false};let o=e-1,i=r-o;return {visible:o,hidden:i,showCounter:true}}function U(r,n,t,e,o){let i=o??n*(1-t);return r*i}function nt(r,n,t){return t==="ltr"?n-r:r+1}function ot(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 it(r){return r>99?"+99":`+${r}`}function at(r){return r<=80?"80":r<=120?"120":r<=240?"240":r<=480?"480":"960"}function st(r){if(!(r&&N(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 pt(r,n,t,e,o){let i=r.endsWith("/")?r.slice(0,-1):r,p=`${n}_${t}_${e}.webp`;return `${i}/api/profile-picture/cdn/${p}?hostname=${o}`}function dt(r){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[r]}function lt(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 ct(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 gt(r){return {boxShadow:Z[r]}}var $t={shimmer:`
+@keyframes pp-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}`,pulse:`
+@keyframes pp-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(0.98); }
+}`,skeleton:`
+@keyframes pp-skeleton {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}`,badgeBounce:`
+@keyframes pp-badge-bounce {
+  0% { transform: scale(0) translateY(10px); opacity: 0; }
+  50% { transform: scale(1.2) translateY(-2px); }
+  100% { transform: scale(1) translateY(0); opacity: 1; }
+}`,ringRotate:`
+@keyframes pp-ring-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}`,presencePulse:`
+@keyframes pp-presence-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
+  50% { box-shadow: 0 0 0 4px transparent; }
+}`,glow:`
+@keyframes pp-glow {
+  0%, 100% { box-shadow: 0 0 20px 0 var(--pp-glow-color, rgba(99, 102, 241, 0.3)); }
+  50% { box-shadow: 0 0 30px 5px var(--pp-glow-color, rgba(99, 102, 241, 0.5)); }
+}`,fadeIn:`
+@keyframes pp-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}`,scaleIn:`
+@keyframes pp-scale-in {
+  0% { transform: scale(0.8); opacity: 0; }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); opacity: 1; }
+}`},It=Object.values($t).join(`
+`),zt=`
+/* Profile Picture Component Styles */
+.pp-container {
+  --pp-transition-duration: 200ms;
+  --pp-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --pp-spring-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  -webkit-user-select: none;
+  flex-shrink: 0;
+}
+
+/* Inner container for image clipping - allows badges/rings to overflow */
+.pp-inner {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+/* Interactive states */
+.pp-interactive {
+  cursor: pointer;
+  transition: transform var(--pp-transition-duration) var(--pp-spring-timing),
+              box-shadow var(--pp-transition-duration) var(--pp-transition-timing);
+}
+
+.pp-interactive:hover {
+  transform: scale(1.05);
+}
+
+.pp-interactive:active {
+  transform: scale(0.95);
+}
+
+.pp-interactive:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+}
+
+/* Image styles */
+.pp-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity var(--pp-transition-duration) var(--pp-transition-timing);
+}
+
+.pp-image-loading {
+  opacity: 0;
+}
+
+.pp-image-loaded {
+  opacity: 1;
+}
+
+/* Fallback styles */
+.pp-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+  letter-spacing: 0.02em;
+}
+
+.pp-fallback-icon {
+  color: rgba(156, 163, 175, 0.8);
+}
+
+/* Shimmer placeholder */
+.pp-shimmer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.pp-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: pp-shimmer 1.5s infinite;
+}
+
+/* Pulse placeholder */
+.pp-pulse {
+  animation: pp-pulse 2s ease-in-out infinite;
+}
+
+/* Skeleton placeholder */
+.pp-skeleton {
+  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
+  background-size: 200% 100%;
+  animation: pp-skeleton 1.5s ease-in-out infinite;
+}
+
+/* Badge styles */
+.pp-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+  line-height: 1;
+  animation: pp-badge-bounce 0.4s var(--pp-spring-timing);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.pp-badge-with-icon {
+  gap: 4px;
+}
+
+.pp-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.pp-badge-pulse {
+  animation: pp-badge-bounce 0.4s var(--pp-spring-timing),
+             pp-presence-pulse 2s ease-in-out infinite 0.4s;
+}
+
+.pp-badge-glow {
+  box-shadow: 0 0 10px 2px var(--pp-badge-glow-color, currentColor);
+}
+
+/* Ring effect (Instagram-style) */
+.pp-ring {
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  padding: 3px;
+  background: var(--pp-ring-color, linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: background 0.3s ease;
+}
+
+.pp-ring-animated {
+  animation: pp-ring-rotate 3s linear infinite;
+}
+
+.pp-ring-progress {
+  /* Progress rings should not animate rotation */
+  animation: none;
+}
+
+/* Presence indicator */
+.pp-presence {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 9999px;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.pp-presence-animated {
+  animation: pp-presence-pulse 2s ease-in-out infinite;
+}
+
+/* Glow effect */
+.pp-glow {
+  animation: pp-glow 2s ease-in-out infinite;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .pp-container,
+  .pp-interactive,
+  .pp-image,
+  .pp-shimmer::after,
+  .pp-pulse,
+  .pp-skeleton,
+  .pp-badge,
+  .pp-ring-animated,
+  .pp-presence-animated,
+  .pp-glow {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+`,ut=`${It}
+${zt}`,ht=`
+@keyframes np-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.np-shimmer {
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: np-shimmer 1.5s infinite;
+}
+`;function ft(r,n=.3){if(N(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 Tt=`
+@keyframes ppg-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+@keyframes ppg-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ppg-avatar-lift {
+  from {
+    transform: translateY(0) scale(1);
+  }
+  to {
+    transform: translateY(-4px) scale(1.08);
+  }
+}
+
+@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;
+  }
+}
+`,Et=`
+/* Profile Picture Group Container */
+.ppg-container {
+  --ppg-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --ppg-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ppg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --ppg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --ppg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --ppg-radius: 12px;
+  --ppg-counter-bg: #f5f5f7;
+  --ppg-counter-text: #1d1d1f;
+  --ppg-add-bg: #f5f5f7;
+  --ppg-add-hover: #e8e8ed;
+  --ppg-add-icon: #86868b;
+  --ppg-border: rgba(0, 0, 0, 0.08);
+  --ppg-tooltip-bg: rgba(29, 29, 31, 0.95);
+  --ppg-tooltip-text: #ffffff;
+  --ppg-dropdown-bg: #ffffff;
+  --ppg-dropdown-hover: #f5f5f7;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  isolation: isolate;
+}
+
+/* Avatar wrapper for positioning */
+.ppg-avatar-wrapper {
+  position: absolute;
+  top: 0;
+  transition: transform var(--ppg-spring), z-index 0s;
+  cursor: pointer;
+  border-radius: 9999px;
+}
+
+.ppg-avatar-wrapper:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.4);
+}
+
+/* Hover lift animation */
+.ppg-animated .ppg-avatar-wrapper:hover {
+  z-index: 100 !important;
+  animation: ppg-avatar-lift var(--ppg-spring) forwards;
+}
+
+.ppg-avatar-wrapper:hover {
+  z-index: 100 !important;
+}
+
+/* Nested profile-picture styling */
+.ppg-avatar-wrapper profile-picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+/* Counter button */
+.ppg-counter {
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--ppg-counter-bg);
+  color: var(--ppg-counter-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: -0.01em;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), var(--ppg-shadow-sm);
+  transition: transform var(--ppg-spring), background-color var(--ppg-transition);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ppg-counter:hover {
+  background: #ebebed;
+  transform: scale(1.05);
+}
+
+.ppg-counter:active {
+  transform: scale(0.98);
+}
+
+.ppg-counter:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(0, 122, 255, 0.4);
+}
+
+/* Add button */
+.ppg-add-button {
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--ppg-add-bg);
+  border: 2px dashed var(--ppg-border);
+  cursor: pointer;
+  transition: all var(--ppg-spring);
+  box-shadow: var(--ppg-shadow-sm);
+}
+
+.ppg-add-button:hover {
+  background: var(--ppg-add-hover);
+  border-color: rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+
+.ppg-add-button:active {
+  transform: scale(0.98);
+}
+
+.ppg-add-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.4);
+}
+
+.ppg-add-icon {
+  color: var(--ppg-add-icon);
+  transition: color var(--ppg-transition);
+}
+
+.ppg-add-button:hover .ppg-add-icon {
+  color: #1d1d1f;
+}
+
+/* Tooltip */
+.ppg-tooltip {
+  position: absolute;
+  z-index: 9999;
+  padding: 6px 12px;
+  background: var(--ppg-tooltip-bg);
+  color: var(--ppg-tooltip-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 8px;
+  box-shadow: var(--ppg-shadow-lg);
+  pointer-events: none;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  animation: ppg-tooltip-in 150ms ease-out forwards;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.ppg-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: rotate(45deg);
+}
+
+.ppg-tooltip[data-position="top"]::after {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.ppg-tooltip[data-position="bottom"]::after {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+/* Dropdown */
+.ppg-dropdown {
+  position: absolute;
+  z-index: 9998;
+  right: 0;
+  min-width: 220px;
+  max-width: 300px;
+  background: var(--ppg-dropdown-bg);
+  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 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% + 10px);
+}
+
+.ppg-dropdown[data-position="top"] {
+  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: 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.06em;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.02), transparent);
+}
+
+.ppg-dropdown-list {
+  overflow-y: auto;
+  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 12px;
+  cursor: pointer;
+  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: 36px;
+  height: 36px;
+  border-radius: 9999px;
+  object-fit: cover;
+  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: 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: 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: 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"] {
+  background: #FFD60A;
+}
+
+.ppg-dropdown-presence[data-status="busy"],
+.ppg-dropdown-presence[data-status="dnd"] {
+  background: #FF453A;
+}
+
+.ppg-dropdown-presence[data-status="offline"] {
+  background: #8E8E93;
+}
+
+/* Backdrop for dropdown */
+.ppg-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9997;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ppg-container,
+  .ppg-avatar-wrapper,
+  .ppg-counter,
+  .ppg-add-button,
+  .ppg-tooltip,
+  .ppg-dropdown {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .ppg-animated .ppg-avatar-wrapper:hover {
+    animation: none !important;
+    transform: none !important;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ppg-container {
+    --ppg-counter-bg: #2c2c2e;
+    --ppg-counter-text: #ffffff;
+    --ppg-add-bg: #2c2c2e;
+    --ppg-add-hover: #3a3a3c;
+    --ppg-add-icon: #98989d;
+    --ppg-border: rgba(255, 255, 255, 0.1);
+    --ppg-dropdown-bg: #2c2c2e;
+    --ppg-dropdown-hover: #3a3a3c;
+  }
+
+  .ppg-avatar-wrapper profile-picture {
+    box-shadow: 0 0 6px 1.5px rgb(28 28 30 / 16%), var(--ppg-shadow-sm);
+  }
+
+  .ppg-counter {
+    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);
+  }
+}
+`,mt=`${Tt}
+${Et}`;var a=class extends lit.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.loading=v.loading;this.placeholder=v.placeholder;this.placeholderColor=v.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;(typeof requestIdleCallback<"u"?requestIdleCallback:e=>setTimeout(e,1))(()=>{if(a.stylesInjected)return;let e=document.createElement("style");e.textContent=ut,document.head.appendChild(e),a.stylesInjected=true;});}get pixelSize(){let t=this.size;return typeof t=="number"?t:E[t]??E[v.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=at(this.pixelSize),e=st(this.bgColor),o=typeof window<"u"?window.location.hostname:"localhost";this.cdnImageUrl=pt(a.cdnBaseUrl,this.extCustomerId,t,e,o);}getContainerStyles(){let t=ct(this.bgColor,this.bgGradient),e=this.border?lt(this.borderWidth,this.borderColor):null,o=gt(this.shadow),i={};if(this.glow){let d=this.glow.color??this.borderColor??"#6366f1";i={"--pp-glow-color":d,boxShadow:ft(d,this.glow.intensity??.3)};}let p=this.interactive?.hoverable||this.interactive?.pressable;return {classes:k("pp-container",dt(this.variant),t.className,e?.className,p&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:A[this.variant],...t.style,...e?.style,...o,...i,cursor:this.interactive?.cursor??(p?"pointer":"default"),transform:this.rotation?`rotate(${this.rotation}deg)`:void 0}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return lit.nothing;let t={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return lit.html`
+      ${this.placeholder==="shimmer"?lit.html`<style>${ht}</style>`:lit.nothing}
+      <div
+        class=${k("np:absolute np:inset-0",t)}
+        style=${styleMap_js.styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
+      </div>
+    `}renderFallback(){if(this.fallback)return lit.html`
+        <span
+          class="pp-fallback"
+          style=${styleMap_js.styleMap({fontSize:`${j(this.pixelSize)}px`})}>
+          ${this.fallback}
+        </span>
+      `;if(this.alt){let e=M(this.alt);return lit.html`
+        <div
+          class="pp-fallback np:absolute np:inset-0"
+          style=${styleMap_js.styleMap({background:this.bgColor??e,fontSize:`${j(this.pixelSize)}px`})}>
+          ${B(this.alt)}
+        </div>
+      `}let t=this.pixelSize*.5;return lit.html`
+      <svg
+        class="pp-fallback-icon"
+        style="width: ${t}px; height: ${t}px;"
+        fill="currentColor"
+        viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+      </svg>
+    `}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():lit.html`
+      <img
+        src=${e}
+        alt=${this.alt}
+        loading=${this.loading}
+        decoding="async"
+        @load=${this.handleLoad}
+        @error=${this.handleError}
+        class=${k("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        draggable="false" />
+    `}renderRing(){if(!this.ring?.show)return lit.nothing;let t=this.ring.width??3,e=this.ring.gap??3,o=t+e,i,p=this.ring.progress!==void 0;if(p){let d=this.ring.progress??0,u=this.ring.color??"#30D158",h=this.ring.emptyColor??"#8E8E93";i=et(d,u,h);}else this.ring.gradient&&this.ring.gradient.length>0?i=tt(this.ring.gradient):i=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)";return lit.html`
+      <div
+        class=${k("pp-ring",this.ring.animate&&!p&&"pp-ring-animated",p&&"pp-ring-progress")}
+        style=${styleMap_js.styleMap({inset:`-${o}px`,padding:`${t}px`,background:i,borderRadius:A[this.variant]})}>
+      </div>
+    `}getCornerOffset(){let t=this.border?this.borderWidth:0,e=this.pixelSize*.08,i={circle:1,square:.5,rounded:.8,squircle:1.2}[this.variant];return Math.round(e*i-t*.5)}renderPresence(){if(!this.presence)return lit.nothing;let t=this.presence.thickness??2,e=_(this.pixelSize,t),o=X[this.presence.status],i=this.getCornerOffset();return lit.html`
+      <div
+        class=${k("pp-presence",this.presence.animate&&"pp-presence-animated")}
+        style=${styleMap_js.styleMap({width:`${e}px`,height:`${e}px`,backgroundColor:o,bottom:`${i}px`,right:`${i}px`,color:o})}
+        title=${this.presence.status}>
+      </div>
+    `}renderBadge(){if(!this.badge)return lit.nothing;let t=this.badge.position??"bottom-right",e=this.badge.content!==void 0,o=this.badge.icon!==void 0,i=e||o,{size:p,fontSize:d}=Q(this.pixelSize,i),u=this.badge.bgColor??"#22c55e",h=this.badge.color??"#ffffff",f=this.badge.borderRadius??"9999px",m=e&&this.badge.content!==void 0?P(this.badge.content,this.badge.max):null,z=o?this.badge.icon:null,O=d*.9,g=`${-this.getCornerOffset()}px`,R={"top-left":{top:g,left:g},"top-center":{top:g,left:"50%",transform:"translateX(-50%)"},"top-right":{top:g,right:g},"bottom-left":{bottom:g,left:g},"bottom-center":{bottom:g,left:"50%",transform:"translateX(-50%)"},"bottom-right":{bottom:g,right:g}};return lit.html`
+      <div
+        class=${k("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow",o&&"pp-badge-with-icon")}
+        style=${styleMap_js.styleMap({width:i?"auto":`${p}px`,minWidth:`${p}px`,height:`${p}px`,padding:i?"0 6px":"0",fontSize:`${d}px`,backgroundColor:u,color:h,borderRadius:f,"--pp-badge-glow-color":u,gap:o&&e?"4px":"0",...R[t]})}>
+        ${z?lit.html`<span class="pp-badge-icon" style=${styleMap_js.styleMap({fontSize:`${O}px`})}>${z}</span>`:lit.nothing}
+        ${m??lit.nothing}
+      </div>
+    `}render(){let t=this.getContainerStyles(),e=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return lit.html`
+      <div
+        class=${t.classes}
+        style=${styleMap_js.styleMap(t.styles)}
+        tabindex=${e??lit.nothing}
+        role=${this.interactive?.pressable?"button":lit.nothing}
+        aria-label=${this.alt||lit.nothing}
+        data-profile-picture>
+
+        <!-- Ring Effect (behind everything) -->
+        ${this.renderRing()}
+
+        <!-- Inner container for image clipping -->
+        <div
+          class="pp-inner"
+          style=${styleMap_js.styleMap({borderRadius:A[this.variant]})}>
+          <!-- Placeholder -->
+          ${this.renderPlaceholder()}
+
+          <!-- Main Image or Fallback -->
+          ${this.renderImage()}
+        </div>
+
+        <!-- Badge -->
+        ${this.renderBadge()}
+
+        <!-- Presence Indicator -->
+        ${this.renderPresence()}
+      </div>
+    `}};a.stylesInjected=false,a.cdnBaseUrl="",a.instances=new Set,s([decorators_js.property({type:String})],a.prototype,"src",2),s([decorators_js.property({type:String})],a.prototype,"alt",2),s([decorators_js.property({type:String,attribute:"ext-customer-id"})],a.prototype,"extCustomerId",2),s([decorators_js.property({type:String})],a.prototype,"size",2),s([decorators_js.property({type:String})],a.prototype,"variant",2),s([decorators_js.property({type:String})],a.prototype,"shadow",2),s([decorators_js.property({type:Boolean})],a.prototype,"border",2),s([decorators_js.property({type:Number,attribute:"border-width"})],a.prototype,"borderWidth",2),s([decorators_js.property({type:String,attribute:"border-color"})],a.prototype,"borderColor",2),s([decorators_js.property({type:Number})],a.prototype,"rotation",2),s([decorators_js.property({type:String,attribute:"bg-color"})],a.prototype,"bgColor",2),s([decorators_js.property({type:String,attribute:"bg-gradient"})],a.prototype,"bgGradient",2),s([decorators_js.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([decorators_js.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([decorators_js.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([decorators_js.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([decorators_js.property({type:String})],a.prototype,"loading",2),s([decorators_js.property({type:String})],a.prototype,"placeholder",2),s([decorators_js.property({type:String,attribute:"placeholder-color"})],a.prototype,"placeholderColor",2),s([decorators_js.property({type:String})],a.prototype,"fallback",2),s([decorators_js.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([decorators_js.state()],a.prototype,"isLoaded",2),s([decorators_js.state()],a.prototype,"hasError",2),s([decorators_js.state()],a.prototype,"cdnImageUrl",2),s([decorators_js.state()],a.prototype,"cdnLoadFailed",2),a=s([decorators_js.customElement("profile-picture")],a);var q=false;function Mt(){if(q||typeof document>"u")return;(typeof requestIdleCallback<"u"?requestIdleCallback:n=>setTimeout(n,1))(()=>{if(q)return;let n=document.createElement("style");n.textContent=mt,document.head.appendChild(n),q=true;});}var c=class extends lit.LitElement{constructor(){super(...arguments);this.max=y.max;this.direction=y.direction;this.overlap=y.overlap;this.size=y.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=y.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 Mt(),this}get pixelSize(){return rt(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??y.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??y.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout(),this.destroyPortal();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","ext-customer-id","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let t=Array.from(this.children).filter(e=>e.tagName.toLowerCase()==="profile-picture"&&e.getAttribute("slot")!=="internal");this.users=t.map((e,o)=>{let i=(u,h)=>{let f=h??u,m=e[u];return m!=null&&m!==""?String(m):e.getAttribute(f)??void 0},p=i("borderWidth","border-width"),d=p?Number.parseInt(String(p),10):void 0;return {id:i("dataUserId","data-user-id"),name:i("alt")??`User ${o+1}`,src:i("src"),extCustomerId:i("extCustomerId","ext-customer-id"),status:i("dataStatus","data-status"),element:e,index:o,variant:i("variant"),shadow:i("shadow"),border:!!(e.border??e.hasAttribute("border")),borderWidth:d,borderColor:i("borderColor","border-color"),bgColor:i("bgColor","bg-color"),bgGradient:i("bgGradient","bg-gradient")}});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&&(lit.render(lit.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(),o=10,i=280,p=Math.min(this.dropdownMaxHeight+60,t.length*56+60),d=window.innerWidth,u=window.innerHeight;if(d<480){let F=lit.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_js.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_js.styleMap({maxHeight:"calc(70vh - 60px)"})}
+          >
+            ${t.map(xt=>this.renderDropdownItem(xt))}
+          </div>
+        </div>
+      `;lit.render(F,this.portalContainer);return}let f=u-e.bottom-o,m=e.top-o,z=d-e.left,O=e.right,I=this.dropdownPosition;I==="bottom"&&f<p&&m>f?I="top":I==="top"&&m<p&&f>m&&(I="bottom");let g;z>=i?g=e.left:O>=i?g=e.right-i:g=(d-i)/2,g=Math.max(8,Math.min(g,d-i-8));let R=I==="bottom"?e.bottom+o:void 0,Y=I==="top"?u-e.top+o:void 0,bt=lit.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_js.styleMap({position:"fixed",pointerEvents:"auto",top:R!==void 0?`${R}px`:"auto",bottom:Y!==void 0?`${Y}px`:"auto",left:`${g}px`,width:`${i}px`})}
+        data-position=${I}
+        role="menu"
+        aria-label="Hidden users"
+      >
+        <div class="ppg-dropdown-header">
+          ${t.length} more
+        </div>
+        <div
+          class="ppg-dropdown-list"
+          style=${styleMap_js.styleMap({maxHeight:`${this.dropdownMaxHeight}px`})}
+        >
+          ${t.map(F=>this.renderDropdownItem(F))}
+        </div>
+      </div>
+    `;lit.render(bt,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 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.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,o){let i=U(e,this.pixelSize,this.overlap,this.direction,this.spacing),p=nt(e,o,this.direction),d=t.variant??"circle",u=t.shadow??"none",h=this.rotationAmount?e%2===0?-this.rotationAmount:this.rotationAmount:0;return lit.html`
+      <div
+        class="ppg-avatar-wrapper"
+        style=${styleMap_js.styleMap({left:`${i}px`,zIndex:String(p),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
+        tabindex="0"
+        role="button"
+        aria-label=${t.name}
+        @click=${()=>this.handleAvatarClick(t)}
+        @mouseenter=${f=>this.handleAvatarHover(t,f)}
+        @mouseleave=${this.handleAvatarLeave}
+        @keydown=${f=>this.handleKeyDown(f,()=>this.handleAvatarClick(t))}
+      >
+        ${this.renderProfilePicture(t,d,u,h)}
+      </div>
+    `}renderProfilePicture(t,e,o,i){return lit.html`
+      <profile-picture
+        .src=${t.src||void 0}
+        .alt=${t.name}
+        .size=${this.pixelSize}
+        .variant=${e}
+        .shadow=${o}
+        .rotation=${i}
+        .extCustomerId=${t.extCustomerId}
+        ?border=${t.border}
+        .borderWidth=${t.border?t.borderWidth??2:2}
+        .borderColor=${t.border?t.borderColor??"#ffffff":"#ffffff"}
+        .bgColor=${t.bgGradient?void 0:t.bgColor??"#ffffff"}
+        .bgGradient=${t.bgGradient??void 0}
+        data-user-id=${t.id??""}
+        data-status=${t.status??""}
+      ></profile-picture>
+    `}renderCounter(t,e,o){return lit.html`
+      <button
+        class="ppg-counter"
+        style=${styleMap_js.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(o)}
+      >
+        ${it(t)}
+      </button>
+    `}renderAddButton(t){let e=Math.round(this.pixelSize*.4);return lit.html`
+      <button
+        class="ppg-add-button"
+        style=${styleMap_js.styleMap({left:`${t}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
+        aria-label=${this.addButtonLabel}
+        @click=${this.handleAddClick}
+      >
+        <svg
+          class="ppg-add-icon"
+          width=${e}
+          height=${e}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </button>
+    `}renderTooltip(){if(!this.tooltipData)return lit.nothing;let{user:t,rect:e}=this.tooltipData,o=8,i=this.getBoundingClientRect(),p=e.left-i.left+e.width/2,d=e.top-i.top,u=e.bottom-i.top,h=this.tooltipPosition==="top";return lit.html`
+      <div
+        class="ppg-tooltip"
+        style=${styleMap_js.styleMap({top:h?"auto":`${u+o}px`,bottom:h?`${i.height-d+o}px`:"auto",left:`${p}px`})}
+        data-position=${this.tooltipPosition}
+        role="tooltip"
+      >
+        ${t.name}
+      </div>
+    `}renderDropdownItem(t){let e=M(t.name),o=t.src||t.extCustomerId;return lit.html`
+      <div
+        class="ppg-dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        @click=${()=>this.handleDropdownItemClick(t)}
+        @keydown=${i=>this.handleKeyDown(i,()=>this.handleDropdownItemClick(t))}
+      >
+        ${o?lit.html`<profile-picture
+              class="ppg-dropdown-avatar"
+              .src=${t.src||void 0}
+              .alt=${t.name}
+              .extCustomerId=${t.extCustomerId}
+              .size=${40}
+              variant="circle"
+              shadow="none"
+            ></profile-picture>`:lit.html`<div
+              class="ppg-dropdown-avatar-fallback"
+              style=${styleMap_js.styleMap({background:e})}
+            >
+              ${B(t.name)}
+            </div>`}
+        <div class="ppg-dropdown-info">
+          <div class="ppg-dropdown-name">${t.name}</div>
+          ${this.showPresence&&t.status?lit.html`
+                <div class="ppg-dropdown-status">
+                  <span
+                    class="ppg-dropdown-presence"
+                    data-status=${t.status}
+                  ></span>
+                  ${this.formatStatus(t.status)}
+                </div>
+              `:lit.nothing}
+        </div>
+      </div>
+    `}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:o}=H(this.users.length,this.max,this.showAddButton),i=this.users.slice(o);this.updatePortalContent(i);}}render(){let{visible:t,hidden:e,showCounter:o}=H(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;o&&d++,this.showAddButton&&d++;let u=ot(d,this.pixelSize,this.overlap,this.spacing),h=o?U(t,this.pixelSize,this.overlap,this.direction,this.spacing):0,f=U(t+(o?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return lit.html`
+      <div
+        class=${k("ppg-container",this.animated&&"ppg-animated")}
+        style=${styleMap_js.styleMap({width:`${u}px`,height:`${this.pixelSize}px`})}
+        role="group"
+        aria-label="User avatars"
+      >
+        <!-- Hidden slot for original children -->
+        <slot style="display: none;"></slot>
+
+        <!-- Visible avatars -->
+        ${i.map((m,z)=>this.renderAvatar(m,z,t))}
+
+        <!-- Counter -->
+        ${o?this.renderCounter(e,h,p):lit.nothing}
+
+        <!-- Add button -->
+        ${this.showAddButton?this.renderAddButton(f):lit.nothing}
+
+        <!-- Tooltip -->
+        ${this.renderTooltip()}
+      </div>
+    `}};s([decorators_js.property({type:Number})],c.prototype,"max",2),s([decorators_js.property({type:String})],c.prototype,"direction",2),s([decorators_js.property({type:Number})],c.prototype,"overlap",2),s([decorators_js.property({type:String})],c.prototype,"size",2),s([decorators_js.property({type:Number})],c.prototype,"spacing",2),s([decorators_js.property({type:Object})],c.prototype,"tooltip",2),s([decorators_js.property({type:Object})],c.prototype,"dropdown",2),s([decorators_js.property({type:Boolean,attribute:"show-add-button"})],c.prototype,"showAddButton",2),s([decorators_js.property({type:String,attribute:"add-button-label"})],c.prototype,"addButtonLabel",2),s([decorators_js.property({type:Boolean})],c.prototype,"animated",2),s([decorators_js.property({type:Number,attribute:"rotation-amount"})],c.prototype,"rotationAmount",2),s([decorators_js.state()],c.prototype,"users",2),s([decorators_js.state()],c.prototype,"dropdownOpen",2),s([decorators_js.state()],c.prototype,"tooltipData",2),c=s([decorators_js.customElement("profile-picture-group")],c);function pe(r){a.setCdnBaseUrl(r);}function de(){return a.getCdnBaseUrl()}K();exports.getCdnBaseUrl=de;exports.setCdnBaseUrl=pe;//# sourceMappingURL=angular.cjs.map
 //# sourceMappingURL=angular.cjs.map