{"version":3,"file":"avatar-group.cjs","names":[],"sources":["../src/content/avatar/avatar-group.ts"],"sourcesContent":["import { define, getHost, html, prop, useSlots, watchEffect } from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport componentStyles from './avatar-group.css?inline';\n\n/** AvatarGroup component properties */\nexport type OreAvatarGroupProps = {\n  /** Maximum number of avatars to show before showing a +N badge */\n  max?: number;\n  /** Total count shown in the overflow badge (defaults to the actual hidden count) */\n  total?: number;\n};\n\n/**\n * Groups multiple `ore-avatar` elements in a stacked, overlapping row.\n *\n * @element ore-avatar-group\n *\n * @attr {number} max - Max visible avatars before overflow badge (default: 5)\n * @attr {number} total - Override the total count displayed in the badge\n *\n * @slot - `ore-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @part overflow - Overflow count badge shown when avatars exceed `max`.\n *\n * @example\n * ```html\n * <ore-avatar-group max=\"3\">\n *   <ore-avatar src=\"/a.jpg\" alt=\"Alice\"></ore-avatar>\n *   <ore-avatar src=\"/b.jpg\" alt=\"Bob\"></ore-avatar>\n *   <ore-avatar src=\"/c.jpg\" alt=\"Carol\"></ore-avatar>\n *   <ore-avatar src=\"/d.jpg\" alt=\"Dave\"></ore-avatar>\n * </ore-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = 'ore-avatar-group' as const;\ndefine<OreAvatarGroupProps>(AVATAR_GROUP_TAG, {\n  props: {\n    max: prop.number(5),\n    total: prop.number(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...el.querySelectorAll('ore-avatar')];\n      const max = Number(props.max.value) || 5;\n      const hidden = Math.max(0, avatars.length - max);\n\n      overflowCount.value = props.total.value != null ? Number(props.total.value) - max : hidden;\n      avatars.forEach((a, i) => {\n        if (i >= max) a.setAttribute('data-avatar-group-hidden', '');\n        else a.removeAttribute('data-avatar-group-hidden');\n      });\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      updateVisibility();\n    });\n\n    const overflowLabel = () => `+${overflowCount.value} more`;\n    const overflowText = () => `+${overflowCount.value}`;\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`\n              <span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${overflowLabel}\">${overflowText}</span>\n            `\n          : ''}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"yLAqCA,IAAa,EAAmB,oBAChC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,IAAK,EAAA,KAAK,OAAO,CAAC,EAClB,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,YAER,GAAA,EAAgB,EAAA,OAAA,CAAO,CAAC,EAExB,MAAyB,CAC7B,IAAM,EAAU,CAAC,GAAG,EAAG,iBAAiB,YAAY,CAAC,EAC/C,EAAM,OAAO,EAAM,IAAI,KAAK,GAAK,EACjC,EAAS,KAAK,IAAI,EAAG,EAAQ,OAAS,CAAG,EAE/C,EAAc,MAAQ,EAAM,MAAM,OAAS,KAAyC,EAAlC,OAAO,EAAM,MAAM,KAAK,EAAI,EAC9E,EAAQ,SAAS,EAAG,IAAM,CACpB,GAAK,EAAK,EAAE,aAAa,2BAA4B,EAAE,EACtD,EAAE,gBAAgB,0BAA0B,CACnD,CAAC,CACH,EAEA,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MACtB,EAAiB,CACnB,CAAC,EAED,IAAM,MAAsB,IAAI,EAAc,MAAM,OAC9C,MAAqB,IAAI,EAAc,QAE7C,MAAO,GAAA,IAAI;;YAGP,EAAc,MAAQ,EAClB,EAAA,IAAI;yEACyD,EAAc,IAAI,EAAa;cAE5F,GAAG;KAEb,EACA,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}