@grasco/profile-picture 0.1.0

package/dist/angular.d.cts

@@ -0,0 +1,132 @@
+import * as lit_html from 'lit-html';
+import { LitElement } from 'lit';
+
+/**
+ * Profile Picture Component - Type Definitions
+ * Apple-inspired design system with modern 2025 aesthetics
+ */
+type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type Variant = "circle" | "rounded" | "squircle" | "square";
+type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type LoadingStrategy = "lazy" | "eager";
+type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
+type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
+interface PresenceConfig {
+    /** Current status */
+    status: PresenceStatus;
+    /** Show animated ring */
+    animate?: boolean;
+    /** Ring thickness (1-3) */
+    thickness?: 1 | 2 | 3;
+}
+interface RibbonConfig {
+    /** Text displayed on the ribbon */
+    text: string;
+    /** Position of the ribbon */
+    position?: Position;
+    /** Text color (CSS color) */
+    color?: string;
+    /** Background color (CSS color or gradient) */
+    bgColor?: string;
+    /** Icon before text (emoji or symbol) */
+    icon?: string;
+}
+interface BadgeConfig {
+    /** Badge content (text, number, or empty for dot) */
+    content?: string | number;
+    /** Position of the badge */
+    position?: Position;
+    /** Text/icon color */
+    color?: string;
+    /** Background color */
+    bgColor?: string;
+    /** Enable pulse animation */
+    pulse?: boolean;
+    /** Enable glow effect */
+    glow?: boolean;
+    /** Max value to display (shows 99+ if exceeded) */
+    max?: number;
+}
+interface GlowConfig {
+    /** Glow color (defaults to border or bg color) */
+    color?: string;
+    /** Intensity (0-1) */
+    intensity?: number;
+    /** Animate the glow */
+    animate?: boolean;
+}
+interface RingConfig {
+    /** Show ring */
+    show: boolean;
+    /** Ring color or gradient */
+    color?: string;
+    /** Gradient colors for multi-color ring */
+    gradient?: string[];
+    /** Ring width */
+    width?: number;
+    /** Gap between ring and avatar */
+    gap?: number;
+    /** Animate (rotate for gradient) */
+    animate?: boolean;
+}
+interface InteractionConfig {
+    /** Enable hover effects */
+    hoverable?: boolean;
+    /** Enable press/click effects */
+    pressable?: boolean;
+    /** Show focus ring on focus */
+    focusable?: boolean;
+    /** Cursor style */
+    cursor?: "pointer" | "default" | "zoom-in";
+}
+type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+
+declare class ProfilePicture extends LitElement {
+    private static stylesInjected;
+    protected createRenderRoot(): this;
+    private static injectStylesOnce;
+    src: string;
+    alt: string;
+    size: Size | string;
+    variant: Variant;
+    shadow: ShadowPreset;
+    border: boolean;
+    borderWidth: 1 | 2 | 3 | 4;
+    borderColor: string;
+    bgColor?: string;
+    bgGradient?: string;
+    ring?: RingConfig;
+    presence?: PresenceConfig;
+    glow?: GlowConfig;
+    ribbon?: RibbonConfig;
+    badge?: BadgeConfig;
+    loading: LoadingStrategy;
+    placeholder: PlaceholderType;
+    placeholderColor: string;
+    fallback?: string;
+    interactive?: InteractionConfig;
+    private isLoaded;
+    private hasError;
+    private previousSrc;
+    private get pixelSize();
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    private handleLoad;
+    private handleError;
+    private getContainerStyles;
+    private renderPlaceholder;
+    private renderFallback;
+    private renderImage;
+    private renderRing;
+    private renderPresence;
+    private renderBadge;
+    private renderRibbon;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "profile-picture": ProfilePicture;
+    }
+}
+
+export type { BadgeConfig, LoadingStrategy, PlaceholderType, Position, RibbonConfig, Size, Variant };

package/dist/angular.d.ts

@@ -0,0 +1,132 @@
+import * as lit_html from 'lit-html';
+import { LitElement } from 'lit';
+
+/**
+ * Profile Picture Component - Type Definitions
+ * Apple-inspired design system with modern 2025 aesthetics
+ */
+type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type Variant = "circle" | "rounded" | "squircle" | "square";
+type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type LoadingStrategy = "lazy" | "eager";
+type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
+type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
+interface PresenceConfig {
+    /** Current status */
+    status: PresenceStatus;
+    /** Show animated ring */
+    animate?: boolean;
+    /** Ring thickness (1-3) */
+    thickness?: 1 | 2 | 3;
+}
+interface RibbonConfig {
+    /** Text displayed on the ribbon */
+    text: string;
+    /** Position of the ribbon */
+    position?: Position;
+    /** Text color (CSS color) */
+    color?: string;
+    /** Background color (CSS color or gradient) */
+    bgColor?: string;
+    /** Icon before text (emoji or symbol) */
+    icon?: string;
+}
+interface BadgeConfig {
+    /** Badge content (text, number, or empty for dot) */
+    content?: string | number;
+    /** Position of the badge */
+    position?: Position;
+    /** Text/icon color */
+    color?: string;
+    /** Background color */
+    bgColor?: string;
+    /** Enable pulse animation */
+    pulse?: boolean;
+    /** Enable glow effect */
+    glow?: boolean;
+    /** Max value to display (shows 99+ if exceeded) */
+    max?: number;
+}
+interface GlowConfig {
+    /** Glow color (defaults to border or bg color) */
+    color?: string;
+    /** Intensity (0-1) */
+    intensity?: number;
+    /** Animate the glow */
+    animate?: boolean;
+}
+interface RingConfig {
+    /** Show ring */
+    show: boolean;
+    /** Ring color or gradient */
+    color?: string;
+    /** Gradient colors for multi-color ring */
+    gradient?: string[];
+    /** Ring width */
+    width?: number;
+    /** Gap between ring and avatar */
+    gap?: number;
+    /** Animate (rotate for gradient) */
+    animate?: boolean;
+}
+interface InteractionConfig {
+    /** Enable hover effects */
+    hoverable?: boolean;
+    /** Enable press/click effects */
+    pressable?: boolean;
+    /** Show focus ring on focus */
+    focusable?: boolean;
+    /** Cursor style */
+    cursor?: "pointer" | "default" | "zoom-in";
+}
+type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+
+declare class ProfilePicture extends LitElement {
+    private static stylesInjected;
+    protected createRenderRoot(): this;
+    private static injectStylesOnce;
+    src: string;
+    alt: string;
+    size: Size | string;
+    variant: Variant;
+    shadow: ShadowPreset;
+    border: boolean;
+    borderWidth: 1 | 2 | 3 | 4;
+    borderColor: string;
+    bgColor?: string;
+    bgGradient?: string;
+    ring?: RingConfig;
+    presence?: PresenceConfig;
+    glow?: GlowConfig;
+    ribbon?: RibbonConfig;
+    badge?: BadgeConfig;
+    loading: LoadingStrategy;
+    placeholder: PlaceholderType;
+    placeholderColor: string;
+    fallback?: string;
+    interactive?: InteractionConfig;
+    private isLoaded;
+    private hasError;
+    private previousSrc;
+    private get pixelSize();
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    private handleLoad;
+    private handleError;
+    private getContainerStyles;
+    private renderPlaceholder;
+    private renderFallback;
+    private renderImage;
+    private renderRing;
+    private renderPresence;
+    private renderBadge;
+    private renderRibbon;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "profile-picture": ProfilePicture;
+    }
+}
+
+export type { BadgeConfig, LoadingStrategy, PlaceholderType, Position, RibbonConfig, Size, Variant };

package/dist/angular.js

@@ -0,0 +1,353 @@
+import {LitElement,nothing,html}from'lit';import {property,state,customElement}from'lit/decorators.js';import {styleMap}from'lit/directives/style-map.js';var H=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var a=(t,r,e,n)=>{for(var i=n>1?void 0:n?W(r,e):r,p=t.length-1,l;p>=0;p--)(l=t[p])&&(i=(n?l(r,e,i):l(i))||i);return n&&i&&H(r,e,i),i};var C="grasco-profile-picture-styles",x=false;function k(){if(x||typeof document>"u")return;if(document.getElementById(C)){x=true;return}if(document.querySelector('link[href*="profile-picture"][href$="styles.css"]')){x=true;return}let r=Y();if(!r)return;let e=document.createElement("link");e.id=C,e.rel="stylesheet",e.href=r,document.head.appendChild(e),x=true;}function Y(){if(typeof window<"u"&&window.__GRASCO_PROFILE_PICTURE_CSS__)return window.__GRASCO_PROFILE_PICTURE_CSS__;try{let r=import.meta.url;if(r)return `${r.substring(0,r.lastIndexOf("/")+1)}styles.css`}catch{}let t=document.currentScript;if(t?.src){let r=new URL(t.src);return `${r.href.substring(0,r.href.lastIndexOf("/")+1)}styles.css`}return null}var w={"2xs":20,xs:24,sm:32,md:40,lg:48,xl:64,"2xl":80,"3xl":120},z={online:"#30D158",away:"#FFD60A",busy:"#FF453A",offline:"#8E8E93",dnd:"#FF453A"},$={none:"none",sm:"0 1px 2px 0 rgba(0, 0, 0, 0.05)",md:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",lg:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",glow:"0 0 20px 0 rgba(99, 102, 241, 0.3)"},c={size:"md",variant:"circle",loading:"lazy",placeholder:"shimmer",borderWidth:2,borderColor:"#ffffff",placeholderColor:"#f3f4f6",shadow:"sm"};var m={circle:"9999px",rounded:"12px",squircle:"30%",square:"0px"};function f(...t){return t.filter(Boolean).join(" ")}function y(t){return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(t)}function R(t){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"}[t]}function I(t){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"}[t]}function A(t){let e=t.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 S(t){return Math.round(t*.38)}function E(t,r){let n=Math.max(r?18:10,Math.round(t*(r?.32:.22))),i=Math.round(n*.6);return {size:n,fontSize:i}}function M(t,r){return Math.max(8,Math.round(t*.25))+(r-1)*2}function L(t,r){return typeof t=="string"?t:r&&t>r?`${r}+`:t.toString()}function D(t){return t.length===0?"transparent":t.length===1?t[0]:`conic-gradient(${t.map((e,n)=>{let i=n/t.length*360,p=(n+1)/t.length*360;return `${e} ${i}deg ${p}deg`}).join(", ")})`}function q(t){let r=0;for(let e=0;e<t.length;e++){let n=t.charCodeAt(e);r=(r<<5)-r+n,r&=r;}return Math.abs(r)}function F(t){let r=["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=q(t)%r.length;return r[e]}function B(t){return {circle:"np:rounded-full",rounded:"np:rounded-xl",squircle:"np:rounded-[30%]",square:"np:rounded-none"}[t]}function T(t,r){return {className:{1:"np:border",2:"np:border-2",3:"np:border-[3px]",4:"np:border-4"}[t],style:{borderColor:r,borderStyle:"solid"}}}function G(t,r){return r?{className:"",style:{background:r}}:t?t.includes("gradient")?{className:"",style:{background:t}}:{className:"",style:{backgroundColor:t}}:{className:"np:bg-gray-100"}}function U(t){return {boxShadow:$[t]}}var Z={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; }
+}`},_=Object.values(Z).join(`
+`),K=`
+/* 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;
+  }
+}
+`,O=`${_}
+${K}`,j=`
+@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 N(t,r=.3){if(y(t)){let e=Number.parseInt(t.slice(1,3),16),n=Number.parseInt(t.slice(3,5),16),i=Number.parseInt(t.slice(5,7),16);return `0 0 20px 0 rgba(${e}, ${n}, ${i}, ${r})`}return `0 0 20px 0 ${t}`}var o=class extends LitElement{constructor(){super(...arguments);this.src="";this.alt="";this.size=c.size;this.variant=c.variant;this.shadow=c.shadow;this.border=false;this.borderWidth=c.borderWidth;this.borderColor=c.borderColor;this.loading=c.loading;this.placeholder=c.placeholder;this.placeholderColor=c.placeholderColor;this.isLoaded=false;this.hasError=false;this.previousSrc="";}createRenderRoot(){return o.injectStylesOnce(),this}static injectStylesOnce(){if(o.stylesInjected||typeof document>"u")return;let e=document.createElement("style");e.textContent=O,document.head.appendChild(e),o.stylesInjected=true;}get pixelSize(){let e=this.size;return typeof e=="number"?e:w[e]??w[c.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=G(this.bgColor,this.bgGradient),n=this.border?T(this.borderWidth,this.borderColor):null,i=U(this.shadow),p={};if(this.glow){let u=this.glow.color??this.borderColor??"#6366f1";p={"--pp-glow-color":u,boxShadow:N(u,this.glow.intensity??.3)};}let l=this.interactive?.hoverable||this.interactive?.pressable;return {classes:f("pp-container",B(this.variant),e.className,n?.className,l&&"pp-interactive",this.glow?.animate&&"pp-glow"),styles:{width:`${this.pixelSize}px`,height:`${this.pixelSize}px`,borderRadius:m[this.variant],...e.style,...n?.style,...i,...p,cursor:this.interactive?.cursor??(l?"pointer":"default")}}}renderPlaceholder(){if(this.isLoaded||this.placeholder==="none")return nothing;let e={shimmer:"pp-shimmer",pulse:"pp-pulse",skeleton:"pp-skeleton",blur:"",none:""}[this.placeholder];return html`
+      ${this.placeholder==="shimmer"?html`<style>${j}</style>`:nothing}
+      <div
+        class=${f("np:absolute np:inset-0",e)}
+        style=${styleMap({backgroundColor:this.placeholderColor,borderRadius:"inherit"})}>
+      </div>
+    `}renderFallback(){if(this.fallback)return html`
+        <span
+          class="pp-fallback"
+          style=${styleMap({fontSize:`${S(this.pixelSize)}px`})}>
+          ${this.fallback}
+        </span>
+      `;if(this.alt){let n=F(this.alt);return html`
+        <div
+          class="pp-fallback np:absolute np:inset-0"
+          style=${styleMap({background:this.bgColor??n,fontSize:`${S(this.pixelSize)}px`})}>
+          ${A(this.alt)}
+        </div>
+      `}let e=this.pixelSize*.5;return html`
+      <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():html`
+      <img
+        src=${this.src}
+        alt=${this.alt}
+        loading=${this.loading}
+        decoding="async"
+        @load=${this.handleLoad}
+        @error=${this.handleError}
+        class=${f("pp-image",this.isLoaded?"pp-image-loaded":"pp-image-loading")}
+        draggable="false" />
+    `}renderRing(){if(!this.ring?.show)return nothing;let e=this.ring.width??3,n=this.ring.gap??3,i=e+n,p;return this.ring.gradient&&this.ring.gradient.length>0?p=D(this.ring.gradient):p=this.ring.color??"linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888)",html`
+      <div
+        class=${f("pp-ring",this.ring.animate&&"pp-ring-animated")}
+        style=${styleMap({inset:`-${i}px`,padding:`${e}px`,background:p,borderRadius:m[this.variant]})}>
+      </div>
+    `}renderPresence(){if(!this.presence)return nothing;let e=this.presence.thickness??2,n=M(this.pixelSize,e),i=z[this.presence.status],p=Math.max(0,this.pixelSize*.02);return html`
+      <div
+        class=${f("pp-presence",this.presence.animate&&"pp-presence-animated")}
+        style=${styleMap({width:`${n}px`,height:`${n}px`,backgroundColor:i,bottom:`${p}px`,right:`${p}px`,color:i})}
+        title=${this.presence.status}>
+      </div>
+    `}renderBadge(){if(!this.badge)return nothing;let e=this.badge.position??"bottom-right",n=this.badge.content!==void 0,{size:i,fontSize:p}=E(this.pixelSize,n),l=this.badge.bgColor??"#22c55e",u=this.badge.color??"#ffffff",v=n&&this.badge.content!==void 0?L(this.badge.content,this.badge.max):null,h={"top-left":{top:"-4px",left:"-4px"},"top-right":{top:"-4px",right:"-4px"},"bottom-left":{bottom:"-4px",left:"-4px"},"bottom-right":{bottom:"-4px",right:"-4px"}};return html`
+      <div
+        class=${f("pp-badge",this.badge.pulse&&"pp-badge-pulse",this.badge.glow&&"pp-badge-glow")}
+        style=${styleMap({width:n?"auto":`${i}px`,minWidth:`${i}px`,height:`${i}px`,padding:n?"0 6px":"0",fontSize:`${p}px`,backgroundColor:l,color:u,"--pp-badge-glow-color":l,...h[e]})}>
+        ${v??nothing}
+      </div>
+    `}renderRibbon(){if(!this.ribbon)return nothing;let e=this.ribbon.position??"top-right",n=this.ribbon.bgColor??"#ef4444",i=this.ribbon.color??"#ffffff",p=y(n)?{backgroundColor:n}:{background:n},l={color:i},u=this.pixelSize*.9,v=this.pixelSize*.4,h=Math.max(8,this.pixelSize*.11);return html`
+      <div
+        class=${f("pp-ribbon-container",R(e))}
+        style=${styleMap({width:`${u}px`,height:`${v}px`})}>
+        <div
+          class=${f("pp-ribbon np:origin-center np:transform",I(e))}
+          style=${styleMap({fontSize:`${h}px`,padding:`${h*.3}px 0`,...p,...l})}>
+          ${this.ribbon.icon?html`<span style="margin-right: 2px">${this.ribbon.icon}</span>`:nothing}
+          ${this.ribbon.text}
+        </div>
+      </div>
+    `}render(){let e=this.getContainerStyles(),n=this.interactive?.focusable||this.interactive?.pressable?0:void 0;return html`
+      <div
+        class=${e.classes}
+        style=${styleMap(e.styles)}
+        tabindex=${n??nothing}
+        role=${this.interactive?.pressable?"button":nothing}
+        aria-label=${this.alt||nothing}
+        data-profile-picture>
+
+        <!-- Ring Effect (behind everything) -->
+        ${this.renderRing()}
+
+        <!-- Inner container for image clipping -->
+        <div
+          class="pp-inner"
+          style=${styleMap({borderRadius:m[this.variant]})}>
+          <!-- Placeholder -->
+          ${this.renderPlaceholder()}
+
+          <!-- Main Image or Fallback -->
+          ${this.renderImage()}
+        </div>
+
+        <!-- Ribbon -->
+        ${this.renderRibbon()}
+
+        <!-- Badge -->
+        ${this.renderBadge()}
+
+        <!-- Presence Indicator -->
+        ${this.renderPresence()}
+      </div>
+    `}};o.stylesInjected=false,a([property({type:String})],o.prototype,"src",2),a([property({type:String})],o.prototype,"alt",2),a([property({type:String})],o.prototype,"size",2),a([property({type:String})],o.prototype,"variant",2),a([property({type:String})],o.prototype,"shadow",2),a([property({type:Boolean})],o.prototype,"border",2),a([property({type:Number,attribute:"border-width"})],o.prototype,"borderWidth",2),a([property({type:String,attribute:"border-color"})],o.prototype,"borderColor",2),a([property({type:String,attribute:"bg-color"})],o.prototype,"bgColor",2),a([property({type:String,attribute:"bg-gradient"})],o.prototype,"bgGradient",2),a([property({type:Object,attribute:false})],o.prototype,"ring",2),a([property({type:Object,attribute:false})],o.prototype,"presence",2),a([property({type:Object,attribute:false})],o.prototype,"glow",2),a([property({type:Object,attribute:false})],o.prototype,"ribbon",2),a([property({type:Object,attribute:false})],o.prototype,"badge",2),a([property({type:String})],o.prototype,"loading",2),a([property({type:String})],o.prototype,"placeholder",2),a([property({type:String,attribute:"placeholder-color"})],o.prototype,"placeholderColor",2),a([property({type:String})],o.prototype,"fallback",2),a([property({type:Object,attribute:false})],o.prototype,"interactive",2),a([state()],o.prototype,"isLoaded",2),a([state()],o.prototype,"hasError",2),o=a([customElement("profile-picture")],o);k();//# sourceMappingURL=angular.js.map
+//# sourceMappingURL=angular.js.map