@grasco/profile-picture 0.1.0

package/dist/standalone.standalone.js

@@ -0,0 +1,952 @@
+var je=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var l=(i,t,e,r)=>{for(var n=r>1?void 0:r?Fe(t,e):t,o=i.length-1,s;o>=0;o--)(s=i[o])&&(n=(r?s(t,e,n):s(n))||n);return r&&n&&je(t,e,n),n};var Wt="grasco-profile-picture-styles",st=false;function Vt(){if(st||typeof document>"u")return;if(document.getElementById(Wt)){st=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){st=true;return}let t=Ge();if(!t)return;let e=document.createElement("link");e.id=Wt,e.rel="stylesheet",e.href=t,document.head.appendChild(e),st=true;}function Ge(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let t=import.meta.url;if(t)return `${t.substring(0,t.lastIndexOf("/")+1)}styles.css`}catch{}let i=document.currentScript;if(i?.src){let t=new URL(i.src);return `${t.href.substring(0,t.href.lastIndexOf("/")+1)}styles.css`}return null}var qt=class{get shadowRoot(){return this.__host.__shadowRoot}constructor(t){this.ariaActiveDescendantElement=null,this.ariaAtomic="",this.ariaAutoComplete="",this.ariaBrailleLabel="",this.ariaBrailleRoleDescription="",this.ariaBusy="",this.ariaChecked="",this.ariaColCount="",this.ariaColIndex="",this.ariaColIndexText="",this.ariaColSpan="",this.ariaControlsElements=null,this.ariaCurrent="",this.ariaDescribedByElements=null,this.ariaDescription="",this.ariaDetailsElements=null,this.ariaDisabled="",this.ariaErrorMessageElements=null,this.ariaExpanded="",this.ariaFlowToElements=null,this.ariaHasPopup="",this.ariaHidden="",this.ariaInvalid="",this.ariaKeyShortcuts="",this.ariaLabel="",this.ariaLabelledByElements=null,this.ariaLevel="",this.ariaLive="",this.ariaModal="",this.ariaMultiLine="",this.ariaMultiSelectable="",this.ariaOrientation="",this.ariaOwnsElements=null,this.ariaPlaceholder="",this.ariaPosInSet="",this.ariaPressed="",this.ariaReadOnly="",this.ariaRelevant="",this.ariaRequired="",this.ariaRoleDescription="",this.ariaRowCount="",this.ariaRowIndex="",this.ariaRowIndexText="",this.ariaRowSpan="",this.ariaSelected="",this.ariaSetSize="",this.ariaSort="",this.ariaValueMax="",this.ariaValueMin="",this.ariaValueNow="",this.ariaValueText="",this.role="",this.form=null,this.labels=[],this.states=new Set,this.validationMessage="",this.validity={},this.willValidate=true,this.__host=t;}checkValidity(){return console.warn("`ElementInternals.checkValidity()` was called on the server.This method always returns true."),true}reportValidity(){return  true}setFormValue(){}setValidity(){}};var A=function(i,t,e,r,n){if(typeof t=="function"?i!==t||true:!t.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t.set(i,e),e},x=function(i,t,e,r){if(typeof t=="function"?i!==t||!r:!t.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(i):r?r.value:t.get(i)},H,at,pt,q,$t,Y,lt,z,K,P,dt,Yt,Kt=i=>typeof i=="boolean"?i:i?.capture??false;var At=class{constructor(){this.__eventListeners=new Map,this.__captureEventListeners=new Map;}addEventListener(t,e,r){if(e==null)return;let n=Kt(r)?this.__captureEventListeners:this.__eventListeners,o=n.get(t);if(o===void 0)o=new Map,n.set(t,o);else if(o.has(e))return;let s=typeof r=="object"&&r?r:{};s.signal?.addEventListener("abort",()=>this.removeEventListener(t,e,r)),o.set(e,s??{});}removeEventListener(t,e,r){if(e==null)return;let n=Kt(r)?this.__captureEventListeners:this.__eventListeners,o=n.get(t);o!==void 0&&(o.delete(e),o.size||n.delete(t));}dispatchEvent(t){let e=[this],r=this.__eventTargetParent;if(t.composed)for(;r;)e.push(r),r=r.__eventTargetParent;else for(;r&&r!==this.__host;)e.push(r),r=r.__eventTargetParent;let n=false,o=false,s=0,p=null,a=null,c=null,b=t.stopPropagation,g=t.stopImmediatePropagation;Object.defineProperties(t,{target:{get(){return p??a},...f},srcElement:{get(){return t.target},...f},currentTarget:{get(){return c},...f},eventPhase:{get(){return s},...f},composedPath:{value:()=>e,...f},stopPropagation:{value:()=>{n=true,b.call(t);},...f},stopImmediatePropagation:{value:()=>{o=true,g.call(t);},...f}});let S=(v,k,V)=>{typeof v=="function"?v(t):typeof v?.handleEvent=="function"&&v.handleEvent(t),k.once&&V.delete(v);},_=()=>(c=null,s=0,!t.defaultPrevented),U=e.slice().reverse();p=!this.__host||!t.composed?this:null;let Gt=v=>{for(a=this;a.__host&&v.includes(a.__host);)a=a.__host;};for(let v of U){!p&&(!a||a===v.__host)&&Gt(U.slice(U.indexOf(v))),c=v,s=v===t.target?2:1;let k=v.__captureEventListeners.get(t.type);if(k){for(let[V,Et]of k)if(S(V,Et,k),o)return _()}if(n)return _()}let _t=t.bubbles?e:[this];a=null;for(let v of _t){!p&&(!a||v===a.__host)&&Gt(_t.slice(0,_t.indexOf(v)+1)),c=v,s=v===t.target?2:3;let k=v.__eventListeners.get(t.type);if(k){for(let[V,Et]of k)if(S(V,Et,k),o)return _()}if(n)return _()}return _()}},Ct=At;var f={__proto__:null};f.enumerable=true;Object.freeze(f);var Rt=(P=class{constructor(t,e={}){if(H.set(this,false),at.set(this,false),pt.set(this,false),q.set(this,false),$t.set(this,Date.now()),Y.set(this,false),lt.set(this,void 0),z.set(this,void 0),K.set(this,void 0),this.NONE=0,this.CAPTURING_PHASE=1,this.AT_TARGET=2,this.BUBBLING_PHASE=3,arguments.length===0)throw new Error("The type argument must be specified");if(typeof e!="object"||!e)throw new Error('The "options" argument must be an object');let{bubbles:r,cancelable:n,composed:o}=e;A(this,H,!!n),A(this,at,!!r),A(this,pt,!!o),A(this,lt,`${t}`),A(this,z,null),A(this,K,false);}initEvent(t,e,r){throw new Error("Method not implemented.")}stopImmediatePropagation(){this.stopPropagation();}preventDefault(){A(this,q,true);}get target(){return x(this,z,"f")}get currentTarget(){return x(this,z,"f")}get srcElement(){return x(this,z,"f")}get type(){return x(this,lt,"f")}get cancelable(){return x(this,H,"f")}get defaultPrevented(){return x(this,H,"f")&&x(this,q,"f")}get timeStamp(){return x(this,$t,"f")}composedPath(){return x(this,K,"f")?[x(this,z,"f")]:[]}get returnValue(){return !x(this,H,"f")||!x(this,q,"f")}get bubbles(){return x(this,at,"f")}get composed(){return x(this,pt,"f")}get eventPhase(){return x(this,K,"f")?P.AT_TARGET:P.NONE}get cancelBubble(){return x(this,Y,"f")}set cancelBubble(t){t&&A(this,Y,true);}stopPropagation(){A(this,Y,true);}get isTrusted(){return  false}},H=new WeakMap,at=new WeakMap,pt=new WeakMap,q=new WeakMap,$t=new WeakMap,Y=new WeakMap,lt=new WeakMap,z=new WeakMap,K=new WeakMap,P.NONE=0,P.CAPTURING_PHASE=1,P.AT_TARGET=2,P.BUBBLING_PHASE=3,P);Object.defineProperties(Rt.prototype,{initEvent:f,stopImmediatePropagation:f,preventDefault:f,target:f,currentTarget:f,srcElement:f,type:f,cancelable:f,defaultPrevented:f,timeStamp:f,composedPath:f,returnValue:f,bubbles:f,composed:f,eventPhase:f,cancelBubble:f,stopPropagation:f,isTrusted:f});var Zt=(Yt=class extends Rt{constructor(t,e={}){super(t,e),dt.set(this,void 0),A(this,dt,e?.detail??null);}initCustomEvent(t,e,r,n){throw new Error("Method not implemented.")}get detail(){return x(this,dt,"f")}},dt=new WeakMap,Yt);Object.defineProperties(Zt.prototype,{detail:f});var Tt=Rt,kt=Zt;var E;(E=class{constructor(){this.STYLE_RULE=1,this.CHARSET_RULE=2,this.IMPORT_RULE=3,this.MEDIA_RULE=4,this.FONT_FACE_RULE=5,this.PAGE_RULE=6,this.NAMESPACE_RULE=10,this.KEYFRAMES_RULE=7,this.KEYFRAME_RULE=8,this.SUPPORTS_RULE=12,this.COUNTER_STYLE_RULE=11,this.FONT_FEATURE_VALUES_RULE=14,this.__parentStyleSheet=null,this.cssText="";}get parentRule(){return null}get parentStyleSheet(){return this.__parentStyleSheet}get type(){return 0}},E.STYLE_RULE=1,E.CHARSET_RULE=2,E.IMPORT_RULE=3,E.MEDIA_RULE=4,E.FONT_FACE_RULE=5,E.PAGE_RULE=6,E.NAMESPACE_RULE=10,E.KEYFRAMES_RULE=7,E.KEYFRAME_RULE=8,E.SUPPORTS_RULE=12,E.COUNTER_STYLE_RULE=11,E.FONT_FEATURE_VALUES_RULE=14,E);globalThis.Event??=Tt;globalThis.CustomEvent??=kt;var Xt=new WeakMap,Z=i=>{let t=Xt.get(i);return t===void 0&&Xt.set(i,t=new Map),t},We=class extends Ct{constructor(){super(...arguments),this.__shadowRootMode=null,this.__shadowRoot=null,this.__internals=null;}get attributes(){return Array.from(Z(this)).map(([t,e])=>({name:t,value:e}))}get shadowRoot(){return this.__shadowRootMode==="closed"?null:this.__shadowRoot}get localName(){return this.constructor.__localName}get tagName(){return this.localName?.toUpperCase()}setAttribute(t,e){Z(this).set(t,String(e));}removeAttribute(t){Z(this).delete(t);}toggleAttribute(t,e){if(this.hasAttribute(t)){if(e===void 0||!e)return this.removeAttribute(t),false}else return e===void 0||e?(this.setAttribute(t,""),true):false;return  true}hasAttribute(t){return Z(this).has(t)}attachShadow(t){let e={host:this};return this.__shadowRootMode=t.mode,t&&t.mode==="open"&&(this.__shadowRoot=e),e}attachInternals(){if(this.__internals!==null)throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");let t=new qt(this);return this.__internals=t,t}getAttribute(t){return Z(this).get(t)??null}};var Ve=class extends We{},Lt=Ve;globalThis.litServerRoot??=Object.defineProperty(new Lt,"localName",{get(){return "lit-server-root"}});function qe(){let i,t;return {promise:new Promise((r,n)=>{i=r,t=n;}),resolve:i,reject:t}}var Mt=class{constructor(){this.__definitions=new Map,this.__reverseDefinitions=new Map,this.__pendingWhenDefineds=new Map;}define(t,e){if(this.__definitions.has(t))if(process.env.NODE_ENV==="development")console.warn(`'CustomElementRegistry' already has "${t}" defined. This may have been caused by live reload or hot module replacement in which case it can be safely ignored.
+Make sure to test your application with a production build as repeat registrations will throw in production.`);else throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(this.__reverseDefinitions.has(e))throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the constructor has already been used with this registry for the tag name ${this.__reverseDefinitions.get(e)}`);e.__localName=t,this.__definitions.set(t,{ctor:e,observedAttributes:e.observedAttributes??[]}),this.__reverseDefinitions.set(e,t),this.__pendingWhenDefineds.get(t)?.resolve(e),this.__pendingWhenDefineds.delete(t);}get(t){return this.__definitions.get(t)?.ctor}getName(t){return this.__reverseDefinitions.get(t)??null}upgrade(t){throw new Error("customElements.upgrade is not currently supported in SSR. Please file a bug if you need it.")}async whenDefined(t){let e=this.__definitions.get(t);if(e)return e.ctor;let r=this.__pendingWhenDefineds.get(t);return r||(r=qe(),this.__pendingWhenDefineds.set(t,r)),r.promise}},Ye=Mt;var Jt=new Ye;var X=globalThis,ht=X.ShadowRoot&&(X.ShadyCSS===void 0||X.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,te=Symbol(),Qt=new WeakMap,ct=class{constructor(t,e,r){if(this._$cssResult$=true,r!==te)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o,e=this.t;if(ht&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=Qt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&Qt.set(e,t));}return t}toString(){return this.cssText}},ee=i=>new ct(typeof i=="string"?i:i+"",void 0,te);var re=(i,t)=>{if(ht)i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),n=X.litNonce;n!==void 0&&r.setAttribute("nonce",n),r.textContent=e.cssText,i.appendChild(r);}},Ut=ht||X.CSSStyleSheet===void 0?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return ee(e)})(i):i;var{is:Ke,defineProperty:Ze,getOwnPropertyDescriptor:Xe,getOwnPropertyNames:Je,getOwnPropertySymbols:Qe,getPrototypeOf:tr}=Object,tt=globalThis;tt.customElements??=Jt;var ie=tt.trustedTypes,er=ie?ie.emptyScript:"",rr=tt.reactiveElementPolyfillSupport,J=(i,t)=>i,Q={toAttribute(i,t){switch(t){case Boolean:i=i?er:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i);}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i);}catch{e=null;}}return e}},ut=(i,t)=>!Ke(i,t),ne={attribute:true,type:String,converter:Q,reflect:false,useDefault:false,hasChanged:ut};Symbol.metadata??=Symbol("metadata"),tt.litPropertyMetadata??=new WeakMap;var M=class extends(globalThis.HTMLElement??Lt){static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=ne){if(e.state&&(e.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=true),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),n=this.getPropertyDescriptor(t,r,e);n!==void 0&&Ze(this.prototype,t,n);}}static getPropertyDescriptor(t,e,r){let{get:n,set:o}=Xe(this.prototype,t)??{get(){return this[e]},set(s){this[e]=s;}};return {get:n,set(s){let p=n?.call(this);o?.call(this,s),this.requestUpdate(t,p,r);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??ne}static _$Ei(){if(this.hasOwnProperty(J("elementProperties")))return;let t=tr(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(J("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(J("properties"))){let e=this.properties,r=[...Je(e),...Qe(e)];for(let n of r)this.createProperty(n,e[n]);}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,n]of e)this.elementProperties.set(r,n);}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let n=this._$Eu(e,r);n!==void 0&&this._$Eh.set(n,e);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let n of r)e.unshift(Ut(n));}else t!==void 0&&e.push(Ut(t));return e}static _$Eu(t,e){let r=e.attribute;return r===false?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t);}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return re(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,e,r){this._$AK(t,r);}_$ET(t,e){let r=this.constructor.elementProperties.get(t),n=this.constructor._$Eu(t,r);if(n!==void 0&&r.reflect===true){let o=(r.converter?.toAttribute!==void 0?r.converter:Q).toAttribute(e,r.type);this._$Em=t,o==null?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null;}}_$AK(t,e){let r=this.constructor,n=r._$Eh.get(t);if(n!==void 0&&this._$Em!==n){let o=r.getPropertyOptions(n),s=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:Q;this._$Em=n;let p=s.fromAttribute(e,o.type);this[n]=p??this._$Ej?.get(n)??p,this._$Em=null;}}requestUpdate(t,e,r,n=false,o){if(t!==void 0){let s=this.constructor;if(n===false&&(o=this[t]),r??=s.getPropertyOptions(t),!((r.hasChanged??ut)(o,e)||r.useDefault&&r.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(s._$Eu(t,r))))return;this.C(t,e,r);}this.isUpdatePending===false&&(this._$ES=this._$EP());}C(t,e,{useDefault:r,reflect:n,wrapped:o},s){r&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),o!==true||s!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),n===true&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(e){Promise.reject(e);}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[n,o]of this._$Ep)this[n]=o;this._$Ep=void 0;}let r=this.constructor.elementProperties;if(r.size>0)for(let[n,o]of r){let{wrapped:s}=o,p=this[n];s!==true||this._$AL.has(n)||p===void 0||this.C(n,void 0,o,p);}}let t=false,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EM();}catch(r){throw t=false,this._$EM(),r}t&&this._$AE(e);}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM();}updated(t){}firstUpdated(t){}};M.elementStyles=[],M.shadowRootOptions={mode:"open"},M[J("elementProperties")]=new Map,M[J("finalized")]=new Map,rr?.({ReactiveElement:M}),(tt.reactiveElementVersions??=[]).push("2.1.2");var ft=globalThis,oe=i=>i,gt=ft.trustedTypes,se=gt?gt.createPolicy("lit-html",{createHTML:i=>i}):void 0,he="$lit$",D=`lit$${Math.random().toFixed(9).slice(2)}$`,ue="?"+D,ir=`<${ue}>`,N=ft.document===void 0?{createTreeWalker:()=>({})}:document,rt=()=>N.createComment(""),it=i=>i===null||typeof i!="object"&&typeof i!="function",Bt=Array.isArray,nr=i=>Bt(i)||typeof i?.[Symbol.iterator]=="function",Pt=`[ 	
+\f\r]`,et=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ae=/-->/g,pe=/>/g,O=RegExp(`>|${Pt}(?:([^\\s"'>=/]+)(${Pt}*=${Pt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),le=/'/g,de=/"/g,ge=/^(?:script|style|textarea|title)$/i,Ht=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),m=Ht(1),L=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),ce=new WeakMap,I=N.createTreeWalker(N,129);function fe(i,t){if(!Bt(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return se!==void 0?se.createHTML(t):t}var or=(i,t)=>{let e=i.length-1,r=[],n,o=t===2?"<svg>":t===3?"<math>":"",s=et;for(let p=0;p<e;p++){let a=i[p],c,b,g=-1,S=0;for(;S<a.length&&(s.lastIndex=S,b=s.exec(a),b!==null);)S=s.lastIndex,s===et?b[1]==="!--"?s=ae:b[1]!==void 0?s=pe:b[2]!==void 0?(ge.test(b[2])&&(n=RegExp("</"+b[2],"g")),s=O):b[3]!==void 0&&(s=O):s===O?b[0]===">"?(s=n??et,g=-1):b[1]===void 0?g=-2:(g=s.lastIndex-b[2].length,c=b[1],s=b[3]===void 0?O:b[3]==='"'?de:le):s===de||s===le?s=O:s===ae||s===pe?s=et:(s=O,n=void 0);let _=s===O&&i[p+1].startsWith("/>")?" ":"";o+=s===et?a+ir:g>=0?(r.push(c),a.slice(0,g)+he+a.slice(g)+D+_):a+D+(g===-2?p:_);}return [fe(i,o+(i[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},nt=class i{constructor({strings:t,_$litType$:e},r){let n;this.parts=[];let o=0,s=0,p=t.length-1,a=this.parts,[c,b]=or(t,e);if(this.el=i.createElement(c,r),I.currentNode=this.el.content,e===2||e===3){let g=this.el.content.firstChild;g.replaceWith(...g.childNodes);}for(;(n=I.nextNode())!==null&&a.length<p;){if(n.nodeType===1){if(n.hasAttributes())for(let g of n.getAttributeNames())if(g.endsWith(he)){let S=b[s++],_=n.getAttribute(g).split(D),U=/([.?@])?(.*)/.exec(S);a.push({type:1,index:o,name:U[2],strings:_,ctor:U[1]==="."?zt:U[1]==="?"?Ot:U[1]==="@"?It:F}),n.removeAttribute(g);}else g.startsWith(D)&&(a.push({type:6,index:o}),n.removeAttribute(g));if(ge.test(n.tagName)){let g=n.textContent.split(D),S=g.length-1;if(S>0){n.textContent=gt?gt.emptyScript:"";for(let _=0;_<S;_++)n.append(g[_],rt()),I.nextNode(),a.push({type:2,index:++o});n.append(g[S],rt());}}}else if(n.nodeType===8)if(n.data===ue)a.push({type:2,index:o});else {let g=-1;for(;(g=n.data.indexOf(D,g+1))!==-1;)a.push({type:7,index:o}),g+=D.length-1;}o++;}}static createElement(t,e){let r=N.createElement("template");return r.innerHTML=t,r}};function j(i,t,e=i,r){if(t===L)return t;let n=r!==void 0?e._$Co?.[r]:e._$Cl,o=it(t)?void 0:t._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(false),o===void 0?n=void 0:(n=new o(i),n._$AT(i,e,r)),r!==void 0?(e._$Co??=[])[r]=n:e._$Cl=n),n!==void 0&&(t=j(i,n._$AS(i,t.values),n,r)),t}var Dt=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,n=(t?.creationScope??N).importNode(e,true);I.currentNode=n;let o=I.nextNode(),s=0,p=0,a=r[0];for(;a!==void 0;){if(s===a.index){let c;a.type===2?c=new ot(o,o.nextSibling,this,t):a.type===1?c=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(c=new Nt(o,this,t)),this._$AV.push(c),a=r[++p];}s!==a?.index&&(o=I.nextNode(),s++);}return I.currentNode=N,n}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++;}},ot=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,n){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=n,this._$Cv=n?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=j(this,t,e),it(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==L&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):nr(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==d&&it(this._$AH)?this._$AA.nextSibling.data=t:this.T(N.createTextNode(t)),this._$AH=t;}$(t){let{values:e,_$litType$:r}=t,n=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=nt.createElement(fe(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===n)this._$AH.p(e);else {let o=new Dt(n,this),s=o.u(this.options);o.p(e),this.T(s),this._$AH=o;}}_$AC(t){let e=ce.get(t.strings);return e===void 0&&ce.set(t.strings,e=new nt(t)),e}k(t){Bt(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,n=0;for(let o of t)n===e.length?e.push(r=new i(this.O(rt()),this.O(rt()),this,this.options)):r=e[n],r._$AI(o),n++;n<e.length&&(this._$AR(r&&r._$AB.nextSibling,n),e.length=n);}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(false,true,e);t!==this._$AB;){let r=oe(t).nextSibling;oe(t).remove(),t=r;}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t));}},F=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,n,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=d;}_$AI(t,e=this,r,n){let o=this.strings,s=false;if(o===void 0)t=j(this,t,e,0),s=!it(t)||t!==this._$AH&&t!==L,s&&(this._$AH=t);else {let p=t,a,c;for(t=o[0],a=0;a<o.length-1;a++)c=j(this,p[r+a],e,a),c===L&&(c=this._$AH[a]),s||=!it(c)||c!==this._$AH[a],c===d?t=d:t!==d&&(t+=(c??"")+o[a+1]),this._$AH[a]=c;}s&&!n&&this.j(t);}j(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}},zt=class extends F{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===d?void 0:t;}},Ot=class extends F{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==d);}},It=class extends F{constructor(t,e,r,n,o){super(t,e,r,n,o),this.type=5;}_$AI(t,e=this){if((t=j(this,t,e,0)??d)===L)return;let r=this._$AH,n=t===d&&r!==d||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,o=t!==d&&(r===d||n);n&&this.element.removeEventListener(this.name,this,r),o&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}},Nt=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r;}get _$AU(){return this._$AM._$AU}_$AI(t){j(this,t);}};var sr=ft.litHtmlPolyfillSupport;sr?.(nt,ot),(ft.litHtmlVersions??=[]).push("3.3.2");var me=(i,t,e)=>{let r=e?.renderBefore??t,n=r._$litPart$;if(n===void 0){let o=e?.renderBefore??null;r._$litPart$=n=new ot(t.insertBefore(rt(),o),o,void 0,e??{});}return n._$AI(i),n};var jt=globalThis,C=class extends M{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=me(e,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return L}};C._$litElement$=true,C.finalized=true,jt.litElementHydrateSupport?.({LitElement:C});var ar=jt.litElementPolyfillSupport;ar?.({LitElement:C});(jt.litElementVersions??=[]).push("4.2.2");var mt=i=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(i,t);}):customElements.define(i,t);};var pr={attribute:true,type:String,converter:Q,reflect:false,hasChanged:ut},lr=(i=pr,t,e)=>{let{kind:r,metadata:n}=e,o=globalThis.litPropertyMetadata.get(n);if(o===void 0&&globalThis.litPropertyMetadata.set(n,o=new Map),r==="setter"&&((i=Object.create(i)).wrapped=true),o.set(e.name,i),r==="accessor"){let{name:s}=e;return {set(p){let a=t.get.call(this);t.set.call(this,p),this.requestUpdate(s,a,i,true,p);},init(p){return p!==void 0&&this.C(s,void 0,i,p),p}}}if(r==="setter"){let{name:s}=e;return function(p){let a=this[s];t.call(this,p),this.requestUpdate(s,a,i,true,p);}}throw Error("Unsupported decorator location: "+r)};function h(i){return (t,e)=>typeof e=="object"?lr(i,t,e):((r,n,o)=>{let s=n.hasOwnProperty(o);return n.constructor.createProperty(o,r),s?Object.getOwnPropertyDescriptor(n,o):void 0})(i,t,e)}function B(i){return h({...i,state:true,attribute:false})}var be={ATTRIBUTE:1},ve=i=>(...t)=>({_$litDirective$:i,values:t}),vt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,r){this._$Ct=t,this._$AM=e,this._$Ci=r;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};var ye="important",dr=" !"+ye,y=ve(class extends vt{constructor(i){if(super(i),i.type!==be.ATTRIBUTE||i.name!=="style"||i.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(i){return Object.keys(i).reduce((t,e)=>{let r=i[e];return r==null?t:t+`${e=e.includes("-")?e:e.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(i,[t]){let{style:e}=i.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(let r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?e.removeProperty(r):e[r]=null);for(let r in t){let n=t[r];if(n!=null){this.ft.add(r);let o=typeof n=="string"&&n.endsWith(dr);r.includes("-")||o?e.setProperty(r,o?n.slice(0,-11):n,o?ye:""):e[r]=n;}}return L}});var G={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},xe={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},we={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},R={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var W={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"},T={max:4,direction:"ltr",overlap:.3,size:"md",tooltipDelay:300,dropdownMaxHeight:280,animated:true};function $(...i){return i.filter(Boolean).join(" ")}function yt(i){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(i)}function Se(i){return {"top-left":"np:top-0 np:left-0","top-right":"np:top-0 np:right-0","bottom-left":"np:bottom-0 np:left-0","bottom-right":"np:bottom-0 np:right-0"}[i]}function _e(i){return {"top-left":"np:-rotate-45 np:-translate-x-1/4 np:-translate-y-1/2","top-right":"np:rotate-45 np:translate-x-1/4 np:-translate-y-1/2","bottom-left":"np:rotate-45 np:-translate-x-1/4 np:translate-y-1/2","bottom-right":"np:-rotate-45 np:translate-x-1/4 np:translate-y-1/2"}[i]}function xt(i){let e=i.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[e.length-1][0]).toUpperCase()}function Ft(i){return Math.round(i*.38)}function Ee(i,t){let r=Math.max(t?18:10,Math.round(i*(t?.32:.22))),n=Math.round(r*.6);return {size:r,fontSize:n}}function $e(i,t){return Math.max(8,Math.round(i*.25))+(t-1)*2}function Ae(i,t){return typeof i=="string"?i:t&&i>t?`${t}+`:i.toString()}function Ce(i){return i.length===0?"transparent":i.length===1?i[0]:`conic-gradient(${i.map((e,r)=>{let n=r/i.length*360,o=(r+1)/i.length*360;return `${e} ${n}deg ${o}deg`}).join(", ")})`}function cr(i){let t=0;for(let e=0;e<i.length;e++){let r=i.charCodeAt(e);t=(t<<5)-t+r,t&=t;}return Math.abs(t)}function wt(i){let t=["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=cr(i)%t.length;return t[e]}function Re(i){return typeof i=="number"?i:G[i]??G[T.size]}function Te(i,t,e){let r=e?t-1:t;if(i<=r)return {visible:i,hidden:0,showCounter:false};let n=r-1,o=i-n;return {visible:n,hidden:o,showCounter:true}}function St(i,t,e,r,n){let o=n??t*(1-e);return i*o}function ke(i,t,e){return e==="ltr"?t-i:i+1}function Me(i,t,e,r){if(i===0)return 0;if(i===1)return t;let n=r??t*(1-e);return t+n*(i-1)}function Le(i){return i>99?"+99":`+${i}`}function Ue(i){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[i]}function Pe(i,t){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4"}[i],style:{borderColor:t,borderStyle:"solid"}}}function De(i,t){return t?{className:"",style:{background:t}}:i?i.includes("gradient")?{className:"",style:{background:i}}:{className:"",style:{backgroundColor:i}}:{className:"np:bg-gray-100"}}function ze(i){return {boxShadow:we[i]}}var hr={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; }
+}`},ur=Object.values(hr).join(`
+`),gr=`
+/* 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;
+  border-radius: 9999px;
+  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);
+  border: 2px solid white;
+}
+
+.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);
+}
+
+/* Ribbon styles */
+.pp-ribbon-container {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.pp-ribbon {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* 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;
+}
+
+.pp-ring-animated {
+  animation: pp-ring-rotate 3s linear infinite;
+}
+
+/* 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;
+  }
+}
+`,Oe=`${ur}
+${gr}`,Ie=`
+@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 Ne(i,t=.3){if(yt(i)){let e=Number.parseInt(i.slice(1,3),16),r=Number.parseInt(i.slice(3,5),16),n=Number.parseInt(i.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${r}, ${n}, ${t})`}return `0 0 20px 0 ${i}`}var fr=`
+@keyframes ppg-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ppg-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+  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);
+  }
+}
+`,mr=`
+/* 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: #e8e8ed;
+  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: fixed;
+  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;
+  animation: ppg-tooltip-in 150ms ease-out;
+  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: 1000;
+  min-width: 200px;
+  max-width: 280px;
+  background: var(--ppg-dropdown-bg);
+  border-radius: var(--ppg-radius);
+  box-shadow: var(--ppg-shadow-lg);
+  border: 1px solid var(--ppg-border);
+  overflow: hidden;
+  animation: ppg-dropdown-in 200ms ease-out;
+}
+
+.ppg-dropdown[data-position="bottom"] {
+  top: calc(100% + 8px);
+}
+
+.ppg-dropdown[data-position="top"] {
+  bottom: calc(100% + 8px);
+}
+
+.ppg-dropdown-header {
+  padding: 12px 16px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #86868b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--ppg-border);
+}
+
+.ppg-dropdown-list {
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.ppg-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  cursor: pointer;
+  transition: background-color var(--ppg-transition);
+}
+
+.ppg-dropdown-item:hover {
+  background: var(--ppg-dropdown-hover);
+}
+
+.ppg-dropdown-item:focus-visible {
+  outline: none;
+  background: var(--ppg-dropdown-hover);
+}
+
+.ppg-dropdown-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  object-fit: cover;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.ppg-dropdown-avatar-fallback {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+}
+
+.ppg-dropdown-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ppg-dropdown-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d1d1f;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ppg-dropdown-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #86868b;
+  margin-top: 2px;
+}
+
+.ppg-dropdown-presence {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+}
+
+.ppg-dropdown-presence[data-status="online"] {
+  background: #30D158;
+}
+
+.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: 999;
+}
+
+/* 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-dropdown-name {
+    color: #ffffff;
+  }
+
+  .ppg-dropdown-header {
+    color: #98989d;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+}
+`,Be=`${fr}
+${mr}`;var u=class extends C{constructor(){super(...arguments);this.src="";this.alt="";this.size=R.size;this.variant=R.variant;this.shadow=R.shadow;this.border=false;this.borderWidth=R.borderWidth;this.borderColor=R.borderColor;this.loading=R.loading;this.placeholder=R.placeholder;this.placeholderColor=R.placeholderColor;this.isLoaded=false;this.hasError=false;this.previousSrc="";}createRenderRoot(){return u.injectStylesOnce(),this}static injectStylesOnce(){if(u.stylesInjected||typeof document>"u")return;let e=document.createElement("style");e.textContent=Oe,document.head.appendChild(e),u.stylesInjected=true;}get pixelSize(){let e=this.size;return typeof e=="number"?e:G[e]??G[R.size]}willUpdate(e){e.has("src")&&this.src!==this.previousSrc&&(this.isLoaded=false,this.hasError=false,this.previousSrc=this.src);}handleLoad(){this.isLoaded=true,this.dispatchEvent(new CustomEvent("load",{bubbles:true,composed:true}));}handleError(){this.hasError=true,this.isLoaded=true,this.dispatchEvent(new CustomEvent("error",{bubbles:true,composed:true}));}getContainerStyles(){let e=De(this.bgColor,this.bgGradient),r=this.border?Pe(this.borderWidth,this.borderColor):null,n=ze(this.shadow),o={};if(this.glow){let p=this.glow.color??this.borderColor??"#6366f1";o={"--pp-glow-color":p,boxShadow:Ne(p,this.glow.intensity??.3)};}let s=this.interactive?.hoverable||this.interactive?.pressable;return {classes:$("pp-container",Ue(this.variant),e.className,r?.className,s&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:W[this.variant],...e.style,...r?.style,...n,...o,cursor:this.interactive?.cursor??(s?"pointer":"default")}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return d;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return m`
+      ${this.placeholder==="shimmer"?m`<style>${Ie}</style>`:d}
+      <div
+        class=${$("np:absolute np:inset-0",e)}
+        style=${y({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
+      </div>
+    `}renderFallback(){if(this.fallback)return m`
+        <span
+          class="pp-fallback"
+          style=${y({fontSize:`${Ft(this.pixelSize)}px`})}>
+          ${this.fallback}
+        </span>
+      `;if(this.alt){let r=wt(this.alt);return m`
+        <div
+          class="pp-fallback np:absolute np:inset-0"
+          style=${y({background:this.bgColor??r,fontSize:`${Ft(this.pixelSize)}px`})}>
+          ${xt(this.alt)}
+        </div>
+      `}let e=this.pixelSize*.5;return m`
+      <svg
+        class="pp-fallback-icon"
+        style="width: ${e}px; height: ${e}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(){return this.hasError||!this.src?this.renderFallback():m`
+      <img
+        src=${this.src}
+        alt=${this.alt}
+        loading=${this.loading}
+        decoding="async"
+        @load=${this.handleLoad}
+        @error=${this.handleError}
+        class=${$("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        draggable="false" />
+    `}renderRing(){if(!this.ring?.show)return d;let e=this.ring.width??3,r=this.ring.gap??3,n=e+r,o;return this.ring.gradient&&this.ring.gradient.length>0?o=Ce(this.ring.gradient):o=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)",m`
+      <div
+        class=${$("pp-ring",this.ring.animate&&"pp-ring-animated")}
+        style=${y({inset:`-${n}px`,padding:`${e}px`,background:o,borderRadius:W[this.variant]})}>
+      </div>
+    `}renderPresence(){if(!this.presence)return d;let e=this.presence.thickness??2,r=$e(this.pixelSize,e),n=xe[this.presence.status],o=Math.max(0,this.pixelSize*.02);return m`
+      <div
+        class=${$("pp-presence",this.presence.animate&&"pp-presence-animated")}
+        style=${y({width:`${r}px`,height:`${r}px`,backgroundColor:n,bottom:`${o}px`,right:`${o}px`,color:n})}
+        title=${this.presence.status}>
+      </div>
+    `}renderBadge(){if(!this.badge)return d;let e=this.badge.position??"bottom-right",r=this.badge.content!==void 0,{size:n,fontSize:o}=Ee(this.pixelSize,r),s=this.badge.bgColor??"#22c55e",p=this.badge.color??"#ffffff",a=r&&this.badge.content!==void 0?Ae(this.badge.content,this.badge.max):null,c={"top-left":{top:"-4px",left:"-4px"},"top-right":{top:"-4px",right:"-4px"},"bottom-left":{bottom:"-4px",left:"-4px"},"bottom-right":{bottom:"-4px",right:"-4px"}};return m`
+      <div
+        class=${$("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow")}
+        style=${y({width:r?"auto":`${n}px`,minWidth:`${n}px`,height:`${n}px`,padding:r?"0 6px":"0",fontSize:`${o}px`,backgroundColor:s,color:p,"--pp-badge-glow-color":s,...c[e]})}>
+        ${a??d}
+      </div>
+    `}renderRibbon(){if(!this.ribbon)return d;let e=this.ribbon.position??"top-right",r=this.ribbon.bgColor??"#ef4444",n=this.ribbon.color??"#ffffff",o=yt(r)?{backgroundColor:r}:{background:r},s={color:n},p=this.pixelSize*.9,a=this.pixelSize*.4,c=Math.max(8,this.pixelSize*.11);return m`
+      <div
+        class=${$("pp-ribbon-container",Se(e))}
+        style=${y({width:`${p}px`,height:`${a}px`})}>
+        <div
+          class=${$("pp-ribbon np:origin-center np:transform",_e(e))}
+          style=${y({fontSize:`${c}px`,padding:`${c*.3}px 0`,...o,...s})}>
+          ${this.ribbon.icon?m`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:d}
+          ${this.ribbon.text}
+        </div>
+      </div>
+    `}render(){let e=this.getContainerStyles(),r=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return m`
+      <div
+        class=${e.classes}
+        style=${y(e.styles)}
+        tabindex=${r??d}
+        role=${this.interactive?.pressable?"button":d}
+        aria-label=${this.alt||d}
+        data-profile-picture>
+
+        <!-- Ring Effect (behind everything) -->
+        ${this.renderRing()}
+
+        <!-- Inner container for image clipping -->
+        <div
+          class="pp-inner"
+          style=${y({borderRadius:W[this.variant]})}>
+          <!-- Placeholder -->
+          ${this.renderPlaceholder()}
+
+          <!-- Main Image or Fallback -->
+          ${this.renderImage()}
+        </div>
+
+        <!-- Ribbon -->
+        ${this.renderRibbon()}
+
+        <!-- Badge -->
+        ${this.renderBadge()}
+
+        <!-- Presence Indicator -->
+        ${this.renderPresence()}
+      </div>
+    `}};u.stylesInjected=false,l([h({type:String})],u.prototype,"src",2),l([h({type:String})],u.prototype,"alt",2),l([h({type:String})],u.prototype,"size",2),l([h({type:String})],u.prototype,"variant",2),l([h({type:String})],u.prototype,"shadow",2),l([h({type:Boolean})],u.prototype,"border",2),l([h({type:Number,attribute:"border-width"})],u.prototype,"borderWidth",2),l([h({type:String,attribute:"border-color"})],u.prototype,"borderColor",2),l([h({type:String,attribute:"bg-color"})],u.prototype,"bgColor",2),l([h({type:String,attribute:"bg-gradient"})],u.prototype,"bgGradient",2),l([h({type:Object,attribute:false})],u.prototype,"ring",2),l([h({type:Object,attribute:false})],u.prototype,"presence",2),l([h({type:Object,attribute:false})],u.prototype,"glow",2),l([h({type:Object,attribute:false})],u.prototype,"ribbon",2),l([h({type:Object,attribute:false})],u.prototype,"badge",2),l([h({type:String})],u.prototype,"loading",2),l([h({type:String})],u.prototype,"placeholder",2),l([h({type:String,attribute:"placeholder-color"})],u.prototype,"placeholderColor",2),l([h({type:String})],u.prototype,"fallback",2),l([h({type:Object,attribute:false})],u.prototype,"interactive",2),l([B()],u.prototype,"isLoaded",2),l([B()],u.prototype,"hasError",2),u=l([mt("profile-picture")],u);var He=false;function br(){if(He||typeof document>"u")return;let i=document.createElement("style");i.textContent=Be,document.head.appendChild(i),He=true;}var w=class extends C{constructor(){super(...arguments);this.max=T.max;this.direction=T.direction;this.overlap=T.overlap;this.size=T.size;this.showAddButton=false;this.addButtonLabel="Add user";this.animated=T.animated;this.users=[];this.dropdownOpen=false;this.tooltipData=null;this.tooltipTimeout=null;this.slotObserver=null;this.handleBackdropClick=()=>{this.dropdownOpen=false;};}createRenderRoot(){return br(),this}get pixelSize(){return Re(this.size)}get tooltipEnabled(){return this.tooltip?.enabled!==false}get tooltipPosition(){return this.tooltip?.position??"top"}get tooltipDelay(){return this.tooltip?.delay??T.tooltipDelay}get dropdownMaxHeight(){return this.dropdown?.maxHeight??T.dropdownMaxHeight}get showPresence(){return this.dropdown?.showPresence!==false}get dropdownPosition(){return this.dropdown?.position??"bottom"}connectedCallback(){super.connectedCallback(),this.updateUsers(),this.setupSlotObserver();}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.clearTooltipTimeout();}setupSlotObserver(){this.slotObserver=new MutationObserver(()=>{this.updateUsers();}),this.slotObserver.observe(this,{childList:true,subtree:true,attributes:true,attributeFilter:["src","alt","data-user-id","data-status","variant","shadow","border","border-width","border-color","bg-color","bg-gradient"]});}updateUsers(){let e=Array.from(this.children).filter(r=>r.tagName.toLowerCase()==="profile-picture"&&r.getAttribute("slot")!=="internal");this.users=e.map((r,n)=>{let o=r.getAttribute("border-width"),s=o?Number.parseInt(o,10):void 0;return {id:r.getAttribute("data-user-id")??void 0,name:r.getAttribute("alt")??`User ${n+1}`,src:r.getAttribute("src")??void 0,status:r.getAttribute("data-status")??void 0,element:r,index:n,variant:r.getAttribute("variant")??void 0,shadow:r.getAttribute("shadow")??void 0,border:r.hasAttribute("border"),borderWidth:s,borderColor:r.getAttribute("border-color")??void 0,bgColor:r.getAttribute("bg-color")??void 0,bgGradient:r.getAttribute("bg-gradient")??void 0}});for(let r of this.users)r.element&&(r.element.style.display="none");}handleAvatarClick(e){this.dispatchEvent(new CustomEvent("avatar-click",{detail:{user:e},bubbles:true,composed:true}));}handleAvatarHover(e,r){if(!this.tooltipEnabled)return;this.clearTooltipTimeout();let n=r.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.dispatchEvent(new CustomEvent("counter-click",{detail:{hiddenUsers:e,open:this.dropdownOpen},bubbles:true,composed:true}));}handleDropdownItemClick(e){this.dropdownOpen=false,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,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r());}renderAvatar(e,r,n){let o=St(r,this.pixelSize,this.overlap,this.direction,this.spacing),s=ke(r,n,this.direction),p=e.variant??"circle",a=e.shadow??"none";return m`
+      <div
+        class="ppg-avatar-wrapper"
+        style=${y({left:`${o}px`,zIndex:String(s),width:`${this.pixelSize}px`,height:`${this.pixelSize}px`})}
+        tabindex="0"
+        role="button"
+        aria-label=${e.name}
+        @click=${()=>this.handleAvatarClick(e)}
+        @mouseenter=${c=>this.handleAvatarHover(e,c)}
+        @mouseleave=${this.handleAvatarLeave}
+        @keydown=${c=>this.handleKeyDown(c,()=>this.handleAvatarClick(e))}
+      >
+        ${this.renderProfilePicture(e,p,a)}
+      </div>
+    `}renderProfilePicture(e,r,n){return m`
+      <profile-picture
+        .src=${e.src??""}
+        .alt=${e.name}
+        .size=${this.pixelSize}
+        .variant=${r}
+        .shadow=${n}
+        ?border=${e.border}
+        .borderWidth=${e.border?e.borderWidth??2:2}
+        .borderColor=${e.border?e.borderColor??"#ffffff":"#ffffff"}
+        .bgColor=${e.bgGradient?void 0:e.bgColor??"#ffffff"}
+        .bgGradient=${e.bgGradient??void 0}
+        data-user-id=${e.id??""}
+        data-status=${e.status??""}
+      ></profile-picture>
+    `}renderCounter(e,r){return m`
+      <button
+        class="ppg-counter"
+        style=${y({left:`${r}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(this.users.slice(-e))}
+      >
+        ${Le(e)}
+      </button>
+    `}renderAddButton(e){let r=Math.round(this.pixelSize*.4);return m`
+      <button
+        class="ppg-add-button"
+        style=${y({left:`${e}px`,width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,zIndex:"1"})}
+        aria-label=${this.addButtonLabel}
+        @click=${this.handleAddClick}
+      >
+        <svg
+          class="ppg-add-icon"
+          width=${r}
+          height=${r}
+          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 d;let{user:e,rect:r}=this.tooltipData,n=8,o,s;return this.tooltipPosition==="bottom"?(o=r.bottom+n,s=r.left+r.width/2):(o=r.top-n,s=r.left+r.width/2),m`
+      <div
+        class="ppg-tooltip"
+        style=${y({top:this.tooltipPosition==="top"?"auto":`${o}px`,bottom:this.tooltipPosition==="top"?`${window.innerHeight-r.top+n}px`:"auto",left:`${s}px`,transform:"translateX(-50%)"})}
+        data-position=${this.tooltipPosition}
+        role="tooltip"
+      >
+        ${e.name}
+      </div>
+    `}renderDropdown(e){return this.dropdownOpen?m`
+      <div
+        class="ppg-backdrop"
+        @click=${this.handleBackdropClick}
+        aria-hidden="true"
+      ></div>
+      <div
+        class="ppg-dropdown"
+        data-position=${this.dropdownPosition}
+        role="menu"
+        aria-label="Hidden users"
+      >
+        <div class="ppg-dropdown-header">
+          ${e.length} more
+        </div>
+        <div
+          class="ppg-dropdown-list"
+          style=${y({maxHeight:`${this.dropdownMaxHeight}px`})}
+        >
+          ${e.map(r=>this.renderDropdownItem(r))}
+        </div>
+      </div>
+    `:d}renderDropdownItem(e){let r=wt(e.name);return m`
+      <div
+        class="ppg-dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        @click=${()=>this.handleDropdownItemClick(e)}
+        @keydown=${n=>this.handleKeyDown(n,()=>this.handleDropdownItemClick(e))}
+      >
+        ${e.src?m`<img
+              class="ppg-dropdown-avatar"
+              src=${e.src}
+              alt=${e.name}
+            />`:m`<div
+              class="ppg-dropdown-avatar-fallback"
+              style=${y({background:r})}
+            >
+              ${xt(e.name)}
+            </div>`}
+        <div class="ppg-dropdown-info">
+          <div class="ppg-dropdown-name">${e.name}</div>
+          ${this.showPresence&&e.status?m`
+                <div class="ppg-dropdown-status">
+                  <span
+                    class="ppg-dropdown-presence"
+                    data-status=${e.status}
+                  ></span>
+                  ${this.formatStatus(e.status)}
+                </div>
+              `:d}
+        </div>
+      </div>
+    `}formatStatus(e){return {online:"Online",away:"Away",busy:"Busy",offline:"Offline",dnd:"Do not disturb"}[e]??e}render(){let{visible:e,hidden:r,showCounter:n}=Te(this.users.length,this.max,this.showAddButton),o=this.direction==="ltr"?this.users.slice(0,e):this.users.slice(0,e).reverse(),s=this.users.slice(e),p=e;n&&p++,this.showAddButton&&p++;let a=Me(p,this.pixelSize,this.overlap,this.spacing),c=n?St(e,this.pixelSize,this.overlap,this.direction,this.spacing):0,b=St(e+(n?1:0),this.pixelSize,this.overlap,this.direction,this.spacing);return m`
+      <div
+        class=${$("ppg-container",this.animated&&"ppg-animated")}
+        style=${y({width:`${a}px`,height:`${this.pixelSize}px`})}
+        role="group"
+        aria-label="User avatars"
+      >
+        <!-- Hidden slot for original children -->
+        <slot style="display: none;"></slot>
+
+        <!-- Visible avatars -->
+        ${o.map((g,S)=>this.renderAvatar(g,S,e))}
+
+        <!-- Counter -->
+        ${n?this.renderCounter(r,c):d}
+
+        <!-- Add button -->
+        ${this.showAddButton?this.renderAddButton(b):d}
+
+        <!-- Tooltip -->
+        ${this.renderTooltip()}
+
+        <!-- Dropdown -->
+        ${n?this.renderDropdown(s):d}
+      </div>
+    `}};l([h({type:Number})],w.prototype,"max",2),l([h({type:String})],w.prototype,"direction",2),l([h({type:Number})],w.prototype,"overlap",2),l([h({type:String})],w.prototype,"size",2),l([h({type:Number})],w.prototype,"spacing",2),l([h({type:Object})],w.prototype,"tooltip",2),l([h({type:Object})],w.prototype,"dropdown",2),l([h({type:Boolean,attribute:"show-add-button"})],w.prototype,"showAddButton",2),l([h({type:String,attribute:"add-button-label"})],w.prototype,"addButtonLabel",2),l([h({type:Boolean})],w.prototype,"animated",2),l([B()],w.prototype,"users",2),l([B()],w.prototype,"dropdownOpen",2),l([B()],w.prototype,"tooltipData",2),w=l([mt("profile-picture-group")],w);Vt();
+/*! Bundled license information:
+
+@lit-labs/ssr-dom-shim/lib/element-internals.js:
+@lit-labs/ssr-dom-shim/lib/events.js:
+  (**
+   * @license
+   * Copyright 2023 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit-labs/ssr-dom-shim/lib/css.js:
+  (**
+   * @license
+   * Copyright 2024 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit-labs/ssr-dom-shim/index.js:
+@lit/reactive-element/node/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/node/lit-html.js:
+lit-element/lit-element.js:
+@lit/reactive-element/node/decorators/custom-element.js:
+@lit/reactive-element/node/decorators/property.js:
+@lit/reactive-element/node/decorators/state.js:
+@lit/reactive-element/node/decorators/event-options.js:
+@lit/reactive-element/node/decorators/base.js:
+@lit/reactive-element/node/decorators/query.js:
+@lit/reactive-element/node/decorators/query-all.js:
+@lit/reactive-element/node/decorators/query-async.js:
+@lit/reactive-element/node/decorators/query-assigned-nodes.js:
+lit-html/node/directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/node/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/node/decorators/query-assigned-elements.js:
+  (**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/node/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*///# sourceMappingURL=standalone.standalone.js.map
+//# sourceMappingURL=standalone.standalone.js.map