@norconsult-digital-public/isypixel 2.0.2-canary.5 → 2.0.2-canary.6

package/dist/docs/web-components/ip-avatar/llm.md

@@ -72,27 +72,33 @@ A theme-aware user avatar. It shows a profile image with a fallback chain (prima
 
 > The avatar reuses generic semantic tokens as theme-aware stand-ins; a dedicated avatar token family (background, foreground, ring, container hover/selected) does not exist yet. Avatar sizes are literal pixel values for the same reason. These are marked `//TODO` in the SCSS and will be replaced once design adds the avatar tokens.
 
-| SCSS variable                                                | Role                                                              |
-| ------------------------------------------------------------ | ----------------------------------------------------------------- |
-| `$ip_color_surface_primary_default`                          | Ring layer background behind the ring gap                         |
-| `$ip_color_text_primary_blue`                                | Foreground colour: initials, silhouette, loader, and default ring |
-| `$ip_color_border_opaque_15`                                 | No-image background behind initials / silhouette                  |
-| `$ip_color_border_opaque_10`                                 | Clickable container hover background and the stripe overlay       |
-| `$ip_color_border_opaque_20`                                 | Selected container background                                     |
-| `$ip_color_button_focus_default`                             | Focus ring when `clickable`                                       |
-| `$ip_color_brand_accent_primary_default`                     | Ring colour for `ring-variant="brand"`                            |
-| `$ip_color_extended_green-500`                               | Ring colour for `ring-variant="success"`                          |
-| `$ip_color_extended_yellow-500`                              | Ring colour for `ring-variant="warning"`                          |
-| `$ip_color_extended_red-500`                                 | Ring colour for `ring-variant="error"`                            |
-| `$ip_color_text_primary_black`                               | Label (name) text colour                                          |
-| `$ip_radius_size_small`                                      | Framed container and focus-ring radius                            |
-| `$ip_spacing_space_050` / `$ip_spacing_space_200`            | Framed container padding                                          |
-| `$ip_spacing_space_100` / `_200` / `_300`                    | Avatar↔label gap defaults for small / medium / large              |
-| `$ip_typography_body_font_size_small` / `_medium` / `_large` | Initials and label font size per size                             |
-| `$ip_typography_body_line_height_compact`                    | Line height for the name and caption lines                        |
-| `$ip_typography_font_family_primary`                         | Font family for initials and label                                |
-| `$ip_typography_font_weight_bold_700`                        | Initials font weight                                              |
-| `$ip_typography_font_weight_light_300`                       | Caption and placeholder font weight (italic)                      |
+| SCSS variable                                                | Role                                                                     |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------ |
+| `$ip_color_surface_primary_default`                          | Ring layer background behind the ring gap                                |
+| `$ip_color_text_primary_blue`                                | Foreground colour: initials, silhouette, loader, and default ring        |
+| `$ip_color_border_opaque_15`                                 | No-image background behind initials / silhouette                         |
+| `$ip_color_border_opaque_10`                                 | Clickable container hover background and the stripe overlay              |
+| `$ip_color_border_opaque_20`                                 | Selected container background                                            |
+| `$ip_color_button_focus_default`                             | Focus ring when `clickable`                                              |
+| `$ip_color_brand_accent_primary_default`                     | Ring colour for `ring-variant="brand"`                                   |
+| `$ip_color_extended_green-500`                               | Ring colour for `ring-variant="success"`                                 |
+| `$ip_color_extended_yellow-500`                              | Ring colour for `ring-variant="warning"`                                 |
+| `$ip_color_extended_red-500`                                 | Ring colour for `ring-variant="error"`                                   |
+| `$ip_color_text_primary_black`                               | Default label (name) text colour; override with `--ip-avatar-text-color` |
+| `$ip_radius_size_small`                                      | Framed container and focus-ring radius                                   |
+| `$ip_spacing_space_050` / `$ip_spacing_space_200`            | Framed container padding                                                 |
+| `$ip_spacing_space_100` / `_200` / `_300`                    | Avatar↔label gap defaults for small / medium / large                     |
+| `$ip_typography_body_font_size_small` / `_medium` / `_large` | Initials and label font size per size                                    |
+| `$ip_typography_body_line_height_compact`                    | Line height for the name and caption lines                               |
+| `$ip_typography_font_family_primary`                         | Font family for initials and label                                       |
+| `$ip_typography_font_weight_bold_700`                        | Initials font weight                                                     |
+| `$ip_typography_font_weight_light_300`                       | Caption and placeholder font weight (italic)                             |
+
+## CSS custom properties
+
+| Property                 | Default                        | Role                                                                                                                                                  |
+| ------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--ip-avatar-text-color` | `$ip_color_text_primary_black` | Label (name and caption) text colour. Set to `currentColor` so the label inherits its surroundings — e.g. on a dark surface such as inside a tooltip. |
 
 ## Usage
 

package/dist/docs/web-components/ip-avatar-stack/llm.md

@@ -0,0 +1,169 @@
+# ip-avatar-stack
+
+A stacked-avatar component that overlaps multiple `ip-avatar` instances and shows a combined names label (the first person's name plus a `+N` count for the rest). Consumers place `ip-avatar` elements in the default slot; the stack manages the overlap, the overflow collapse into a `+N` counter, and the label. It reuses each avatar's own ring to keep the overlapping circles visually distinct.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-avatar-stack-usage--docs
+
+> This component requires ISY Pixel global styles to render correctly. Always remind the user to verify that styles are imported in their global stylesheet. See `llm.md` in the package root for style import options.
+
+> Place `ip-avatar` elements in the default slot. The stack forces each slotted avatar to `image-only`, so you do not need to set `mode` yourself. In `label-mode="name"` the stack reads the first avatar's `name` for the text label, so set `name` on at least the first avatar. Match each avatar's `size` to the stack's `size` so the circles align.
+
+## Attributes
+
+| Attribute         | Type    | Default     | Values                                       | Description                                                                                                                                                                                           |
+| ----------------- | ------- | ----------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `max`             | number  | `3`         | Any integer ≥ 1                              | Maximum number of avatars rendered (the hard cap). Surplus avatars are hidden; in `label-mode="counter"` they collapse into a `+N` counter circle (N = total − visible).                              |
+| `auto-fit`        | boolean | `true`      | `true`, `false`                              | Reduces the visible avatars to fit the container width, collapsing the rest like `max` does (`max` stays the cap). Set `false` for a fixed stack that always shows up to `max`.                       |
+| `size`            | string  | `"medium"`  | `"small"`, `"medium"`, `"large"`, `"custom"` | Stack size: drives the overflow counter size (small 40px, medium 50px, large 64px) and the default overlap.                                                                                           |
+| `custom-size`     | string  | `undefined` | Any CSS length                               | Diameter of the overflow counter when `size="custom"`, applied to both width and height.                                                                                                              |
+| `overlap`         | string  | `undefined` | Any CSS length                               | Overrides the overlap offset between circles. Defaults scale with `size` (small 20px, medium 24px, large 30px).                                                                                       |
+| `label-mode`      | string  | `"name"`    | `"name"`, `"counter"`, `"none"`              | How the group is summarised. `name`: first name + `+N` rest text label. `counter`: a `+N` counter circle in the stack. `none`: nothing. The counter circle and the text label are mutually exclusive. |
+| `gap`             | string  | `undefined` | Any CSS length                               | Overrides the gap between the stack and the label. Defaults scale with `size`.                                                                                                                        |
+| `preview-avatars` | boolean | `true`      | `true`, `false`                              | Whether the tooltip previews (the counter preview and the names-label tooltip) show a small avatar beside each person. Set `false` for a compact, name-only list.                                     |
+| `clickable`       | boolean | `false`     | `true`, `false`                              | Makes the `+N` overflow counter (in `label-mode="counter"`) focusable, keyboard-activatable, and emits `ipOverflowClick`.                                                                             |
+| `disabled`        | boolean | `false`     | `true`, `false`                              | Greys out the stack and, when `clickable`, prevents activation of the overflow counter.                                                                                                               |
+
+**Counter mode** — In `label-mode="counter"`, when more avatars are slotted than are shown, the visible avatars are shown (up to `max`, or fewer with `auto-fit`) and the remainder collapse into a single `+N` counter circle appended to the stack, where N = total − visible. No text label is shown. The collapsed avatars are hidden from the layout and the accessibility tree. Hovering or focusing the counter opens a tooltip previewing the collapsed people. The preview reads `name`, `src`, and `caption` from the collapsed `ip-avatar` elements; by default each row shows a small `ip-avatar` with its name and caption, or just the name and caption when `preview-avatars="false"`.
+
+**Auto-fit** — On by default. The stack measures its container width and shows as many avatars as fit, collapsing the rest into the `+N` counter (counter mode) or reflecting them in the `+N` text (name mode). `max` remains the upper cap, so the visible count is never more than `max` and adapts down as the container narrows. It needs a width-constrained ancestor to measure against; place the stack in its own container for best results. Set `auto-fit="false"` for a fixed stack that always shows up to `max`.
+
+**Names label** — In `label-mode="name"` the text label reads the first slotted avatar's `name` and appends `+N`, where N is the number of remaining avatars (total − 1), e.g. `Markus Halvorsen +2` for three avatars. This mode shows no counter circle. When more than one avatar is slotted, hovering the label opens a tooltip listing every slotted person (not just the overflow), using the same preview rows as counter mode and honouring `preview-avatars`.
+
+## Slots
+
+| Slot       | Description                                                                        |
+| ---------- | ---------------------------------------------------------------------------------- |
+| `default`  | The `ip-avatar` elements to stack. Non-`ip-avatar` nodes are ignored.              |
+| `label`    | Overrides the auto-generated text label. Shown in `label-mode="name"`.             |
+| `overflow` | Overrides the content of the `+N` counter circle. Shown in `label-mode="counter"`. |
+
+## Events
+
+| Event             | Payload | When                                                                                           |
+| ----------------- | ------- | ---------------------------------------------------------------------------------------------- |
+| `ipOverflowClick` | `void`  | A `clickable` overflow counter is activated by mouse or keyboard. Not emitted when `disabled`. |
+
+## Accessibility
+
+- The overlap and paint order are presentational only; each slotted `ip-avatar` keeps its own accessible name and tooltip.
+- Avatars collapsed into the `+N` counter are hidden from the accessibility tree; their names are surfaced through the counter's tooltip preview instead.
+- When `clickable`, the overflow counter exposes `role="button"`, is focusable (`tabindex="0"`), shows a `:focus-visible` ring, is activated with Enter or Space, and carries an `aria-label` describing how many more there are.
+- When `disabled`, a clickable counter sets `aria-disabled="true"` and blocks `ipOverflowClick`.
+
+## Design tokens
+
+> The stack reuses generic semantic tokens as theme-aware stand-ins; a dedicated avatar token family (background, foreground, ring, sizes, overlap) does not exist yet. Counter sizes and overlap offsets are literal pixel values for the same reason. These are marked `//TODO` in the SCSS and will be replaced once design adds the avatar tokens.
+
+| SCSS variable                                                | Role                                                       |
+| ------------------------------------------------------------ | ---------------------------------------------------------- |
+| `$ip_color_surface_primary_default`                          | Overflow counter ring layer background behind the ring gap |
+| `$ip_color_text_primary_blue`                                | Overflow counter ring colour and `+N` text colour          |
+| `$ip_color_border_opaque_15`                                 | Overflow counter inner background behind the `+N` text     |
+| `$ip_color_button_focus_default`                             | Focus ring of the overflow counter when `clickable`        |
+| `$ip_color_text_tertiary_default`                            | Names label text colour                                    |
+| `$ip_spacing_space_100` / `_200` / `_300`                    | Stack↔label gap defaults for small / medium / large        |
+| `$ip_typography_body_font_size_small` / `_medium` / `_large` | Counter and label font size per size                       |
+| `$ip_typography_body_line_height_compact`                    | Label line height                                          |
+| `$ip_typography_font_family_primary`                         | Font family for the counter and label                      |
+| `$ip_typography_font_weight_bold_700`                        | `+N` counter font weight                                   |
+
+## Usage
+
+### HTML
+
+> Attribute names must be **kebab-case** in HTML: use `label-mode`, not `labelMode`.
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-avatar-stack.js';
+import '@norconsult-digital-public/isypixel/web-components/ip-avatar.js';
+```
+
+```html
+<ip-avatar-stack max="3" size="medium" label-mode="name">
+  <ip-avatar name="Markus Halvorsen" src="/users/markus.jpg"></ip-avatar>
+  <ip-avatar name="Mia Berg" src="/users/mia.jpg"></ip-avatar>
+  <ip-avatar name="Jonas Lie" src="/users/jonas.jpg"></ip-avatar>
+  <ip-avatar name="Sara Nilsen"></ip-avatar>
+</ip-avatar-stack>
+```
+
+### React
+
+```tsx
+import { IpAvatarStack, IpAvatar } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpAvatarStack max={3} size='medium' labelMode='name' clickable onIpOverflowClick={() => {}}>
+  <IpAvatar name='Markus Halvorsen' src='/users/markus.jpg' />
+  <IpAvatar name='Mia Berg' src='/users/mia.jpg' />
+  <IpAvatar name='Jonas Lie' src='/users/jonas.jpg' />
+  <IpAvatar name='Sara Nilsen' />
+</IpAvatarStack>;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpAvatarStack, IpAvatar } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpAvatarStack :max="3" size="medium" label-mode="name">
+    <IpAvatar name="Markus Halvorsen" src="/users/markus.jpg" />
+    <IpAvatar name="Mia Berg" src="/users/mia.jpg" />
+    <IpAvatar name="Jonas Lie" src="/users/jonas.jpg" />
+    <IpAvatar name="Sara Nilsen" />
+  </IpAvatarStack>
+</template>
+```
+
+### Angular
+
+```ts
+import { IpAvatarStack, IpAvatar } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-avatar-stack [max]="3" size="medium" label-mode="name" clickable (ipOverflowClick)="onShowAll()">
+  <ip-avatar name="Markus Halvorsen" [src]="markusUrl"></ip-avatar>
+  <ip-avatar name="Mia Berg" [src]="miaUrl"></ip-avatar>
+  <ip-avatar name="Jonas Lie" [src]="jonasUrl"></ip-avatar>
+  <ip-avatar name="Sara Nilsen"></ip-avatar>
+</ip-avatar-stack>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-avatar-stack.js';
+  import '@norconsult-digital-public/isypixel/web-components/ip-avatar.js';
+</script>
+
+<ip-avatar-stack max="3" size="medium" label-mode="name">
+  <ip-avatar name="Markus Halvorsen" src="/users/markus.jpg"></ip-avatar>
+  <ip-avatar name="Mia Berg" src="/users/mia.jpg"></ip-avatar>
+  <ip-avatar name="Jonas Lie" src="/users/jonas.jpg"></ip-avatar>
+  <ip-avatar name="Sara Nilsen"></ip-avatar>
+</ip-avatar-stack>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `ip-avatar-stack.js` and `ip-avatar.js` to `wwwroot/lib/isypixel/components/` at build time. See `llm.md` in the package root for the MSBuild target.
+
+```html
+<script type="module" src="lib/isypixel/components/ip-avatar-stack.js"></script>
+<script type="module" src="lib/isypixel/components/ip-avatar.js"></script>
+
+<ip-avatar-stack max="3" size="medium" label-mode="name">
+  <ip-avatar name="Markus Halvorsen" src="/users/markus.jpg"></ip-avatar>
+  <ip-avatar name="Mia Berg" src="/users/mia.jpg"></ip-avatar>
+  <ip-avatar name="Jonas Lie" src="/users/jonas.jpg"></ip-avatar>
+  <ip-avatar name="Sara Nilsen"></ip-avatar>
+</ip-avatar-stack>
+```
+
+- Boolean attributes such as `clickable` and `disabled` must be set as `clickable="true"` (string value) — Blazor does not reliably render bare boolean attributes on custom elements.

package/dist/llm.md

@@ -175,6 +175,7 @@ In `index.html` `<body>`:
 | `ip-icon-button`       | Circular icon-only button with CSS ripple, visual variants, and loading state                                    | `docs/web-components/ip-icon-button/llm.md`       |
 | `ip-tooltip`           | Tooltip that wraps a trigger and shows non-interactive content on hover, focus, and Escape                       | `docs/web-components/ip-tooltip/llm.md`           |
 | `ip-avatar`            | Theme-aware avatar with image/fallback/initials/silhouette chain, label, ring, loader, corner slots, and tooltip | `docs/web-components/ip-avatar/llm.md`            |
+| `ip-avatar-stack`      | Overlapping stack of `ip-avatar` elements with overflow collapse into a `+N` counter and a combined names label  | `docs/web-components/ip-avatar-stack/llm.md`      |
 | `ip-main-menu`         | Sidebar navigation wrapper with expanded/auto-hide/collapsed desktop modes and mobile drawer                     | `docs/web-components/ip-main-menu/llm.md`         |
 | `ip-main-menu-toggle`  | Hamburger button for the top bar that opens the `ip-main-menu` mobile drawer via a shared store                  | `docs/web-components/ip-main-menu-toggle/llm.md`  |
 | `ip-main-menu-section` | Semantic section wrapper that groups navigation items with an optional visible label                             | `docs/web-components/ip-main-menu-section/llm.md` |

package/dist/types/components/ip-avatar-stack/ip-avatar-stack.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter, JSX } from '../../stencil-public-runtime';
+export declare class IpAvatarStack {
+    /** Host element, used to keep the stacking layout in sync when layout props change. */
+    private host;
+    /** Maximum number of avatars shown before the rest collapse into a `+N` counter. Acts as the hard cap; with `auto-fit` on, fewer may show. */
+    max: number;
+    /** Reduces the visible avatars to fit the container width, collapsing the rest like `max` does (`max` stays the cap). Set `auto-fit="false"` for a fixed stack that always shows up to `max`. */
+    autoFit: boolean;
+    /** Stack size. Drives the overflow counter size and the default overlap; slotted avatars should match. */
+    size: 'small' | 'medium' | 'large' | 'custom';
+    /** Diameter of the overflow counter when `size="custom"`. Any CSS length, applied to both width and height. */
+    customSize: string | undefined;
+    /** Overrides the overlap offset between circles. Any CSS length; defaults scale with `size`. */
+    overlap: string | undefined;
+    /** How the group is summarised: the first name with a `+N` rest count, a `+N` overflow counter circle in the stack, or nothing. The counter circle and the text label are mutually exclusive. */
+    labelMode: 'name' | 'counter' | 'none';
+    /** Overrides the gap between the stack and the label. Any CSS length; defaults scale with `size`. */
+    gap: string | undefined;
+    /** Whether the tooltip previews (the counter and the names label) show a small avatar beside each person, or just the name and caption. */
+    previewAvatars: boolean;
+    /** Makes the `+N` overflow counter focusable, keyboard-activatable, and emits `ipOverflowClick`. */
+    clickable: boolean;
+    /** Greys out the stack and, when `clickable`, prevents activation of the overflow counter. */
+    disabled: boolean;
+    /** Identity of every slotted avatar, in order. Drives the count, the names label, the counter, and both tooltip previews. */
+    private people;
+    /** Width-fitted cap computed by the width observer when `autoFit` is on; `null` until first measured (then `effectiveMax` falls back to `max`). */
+    private fittedMax;
+    /** Emitted when a clickable, non-disabled overflow counter is activated by mouse or keyboard. */
+    overflowClick: EventEmitter<void>;
+    /** Active width observer driving auto-fit; null when auto-fit is off or the element is detached. */
+    private resizeObserver;
+    /** True once the first render has measured; gates restart-on-reconnect so the very first connect defers to `componentDidLoad`. */
+    private hasLoaded;
+    /** Re-reads the slot and re-applies the layout when the collapse threshold changes. */
+    relayout(): void;
+    /** Re-fits when a dimension-affecting prop changes — the count that fits depends on avatar size and overlap. */
+    onDimensionChange(): void;
+    /** Starts or stops width observation when auto-fit is toggled, resetting the fitted cap. */
+    onAutoFitChange(): void;
+    /** Restarts width observation when the element is re-attached after a move; the first connect defers to `componentDidLoad`. */
+    connectedCallback(): void;
+    /** Begins observing the container width once the element and its slotted avatars exist. */
+    componentDidLoad(): void;
+    /** Tears down the width observer when the element leaves the DOM. */
+    disconnectedCallback(): void;
+    /** The `ip-avatar` elements currently assigned to the default slot. */
+    private assignedAvatars;
+    /** Reads the first avatar's name from the `name` property, falling back to the attribute for plain-HTML consumers. */
+    private nameOf;
+    /** Reads an avatar's image source from the `src` property, falling back to the attribute for plain-HTML consumers. */
+    private srcOf;
+    /** Reads an avatar's caption from the `caption` property, falling back to the attribute for plain-HTML consumers. */
+    private captionOf;
+    /** Records every slotted avatar's identity, then applies the stacking layout. */
+    private syncFromSlot;
+    /** Re-reads the slotted avatars whenever the assigned set changes. */
+    private handleSlotChange;
+    /** Forces each avatar to image-only, paints each above the one before it (last on top), and collapses avatars beyond `effectiveMax` into the overflow counter. */
+    private applyStacking;
+    /** Avatars to show before collapsing: the width-fitted cap (never above `max`) in auto-fit mode, otherwise `max`. */
+    private get effectiveMax();
+    /** Observes the parent's width (container resize) and the window (ambient resize) so the fitted cap stays in sync. */
+    private startObserving;
+    /** Disconnects the width observer and the window listener. */
+    private stopObserving;
+    /** Measures the container and updates the fitted cap, re-applying the stacking layout when it changes. */
+    private recomputeFit;
+    /** Content-box width available to the stack, measured from its parent. */
+    private availableWidth;
+    /** Current overlap offset in px, read from the computed custom property (set per size or via the `overlap` prop). */
+    private measuredOverlap;
+    /** Current stack↔label gap in px, read from the computed custom property (set per size or via the `gap` prop). */
+    private measuredGap;
+    /** Natural width of the rendered names label, reserved so it is not clipped before avatars collapse in name mode. */
+    private measuredLabelWidth;
+    /** Pixel width the `+N` counter occupies, matching the per-size circle in the SCSS. */
+    private counterWidth;
+    /** Largest avatar count that fits the available width, reserving room for the counter when one will show. At least 1. */
+    private computeFittedMax;
+    /** Emits ipOverflowClick when the counter is clickable and not disabled. */
+    private handleOverflowActivate;
+    /** Activates the overflow counter on Enter or Space, mirroring native button keyboard behaviour. */
+    private handleOverflowKeyDown;
+    /** Auto-generated names label: the first name plus a `+N` count of the remaining avatars. */
+    private get labelText();
+    /** Renders the people preview: ip-avatar's built-in label per row, or a compact name-only list when `previewAvatars` is off. Shared by the counter preview and the names-label tooltip. */
+    private renderPeopleList;
+    /** A preview row using ip-avatar's own circle, name, and caption. The class makes its label inherit the tooltip bubble's colour. */
+    private renderPersonRow;
+    /** A compact, avatar-less preview row — the name with an optional caption beneath. Used when `previewAvatars` is off, where ip-avatar's circle-bound label cannot apply. */
+    private renderPersonName;
+    /** Inline custom properties for the overlap and label gap, set only when the consumer overrides the defaults. */
+    private get hostStyle();
+    render(): JSX.Element;
+}

package/dist/types/components.d.ts

@@ -148,6 +148,58 @@ export namespace Components {
          */
         "tooltipVariant": 'default' | 'onLight' | 'onDark';
     }
+    interface IpAvatarStack {
+        /**
+          * Reduces the visible avatars to fit the container width, collapsing the rest like `max` does (`max` stays the cap). Set `auto-fit="false"` for a fixed stack that always shows up to `max`.
+          * @default true
+         */
+        "autoFit": boolean;
+        /**
+          * Makes the `+N` overflow counter focusable, keyboard-activatable, and emits `ipOverflowClick`.
+          * @default false
+         */
+        "clickable": boolean;
+        /**
+          * Diameter of the overflow counter when `size="custom"`. Any CSS length, applied to both width and height.
+          * @default undefined
+         */
+        "customSize": string | undefined;
+        /**
+          * Greys out the stack and, when `clickable`, prevents activation of the overflow counter.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Overrides the gap between the stack and the label. Any CSS length; defaults scale with `size`.
+          * @default undefined
+         */
+        "gap": string | undefined;
+        /**
+          * How the group is summarised: the first name with a `+N` rest count, a `+N` overflow counter circle in the stack, or nothing. The counter circle and the text label are mutually exclusive.
+          * @default 'name'
+         */
+        "labelMode": 'name' | 'counter' | 'none';
+        /**
+          * Maximum number of avatars shown before the rest collapse into a `+N` counter. Acts as the hard cap; with `auto-fit` on, fewer may show.
+          * @default 3
+         */
+        "max": number;
+        /**
+          * Overrides the overlap offset between circles. Any CSS length; defaults scale with `size`.
+          * @default undefined
+         */
+        "overlap": string | undefined;
+        /**
+          * Whether the tooltip previews (the counter and the names label) show a small avatar beside each person, or just the name and caption.
+          * @default true
+         */
+        "previewAvatars": boolean;
+        /**
+          * Stack size. Drives the overflow counter size and the default overlap; slotted avatars should match.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large' | 'custom';
+    }
     interface IpButton {
         /**
           * Position of the icon slot — "start" places it before the label, "end" places it after
@@ -406,6 +458,10 @@ export interface IpAvatarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIpAvatarElement;
 }
+export interface IpAvatarStackCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIpAvatarStackElement;
+}
 export interface IpMainMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIpMainMenuElement;
@@ -437,6 +493,23 @@ declare global {
         prototype: HTMLIpAvatarElement;
         new (): HTMLIpAvatarElement;
     };
+    interface HTMLIpAvatarStackElementEventMap {
+        "ipOverflowClick": void;
+    }
+    interface HTMLIpAvatarStackElement extends Components.IpAvatarStack, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIpAvatarStackElementEventMap>(type: K, listener: (this: HTMLIpAvatarStackElement, ev: IpAvatarStackCustomEvent<HTMLIpAvatarStackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIpAvatarStackElementEventMap>(type: K, listener: (this: HTMLIpAvatarStackElement, ev: IpAvatarStackCustomEvent<HTMLIpAvatarStackElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIpAvatarStackElement: {
+        prototype: HTMLIpAvatarStackElement;
+        new (): HTMLIpAvatarStackElement;
+    };
     interface HTMLIpButtonElement extends Components.IpButton, HTMLStencilElement {
     }
     var HTMLIpButtonElement: {
@@ -541,6 +614,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ip-avatar": HTMLIpAvatarElement;
+        "ip-avatar-stack": HTMLIpAvatarStackElement;
         "ip-button": HTMLIpButtonElement;
         "ip-icon-button": HTMLIpIconButtonElement;
         "ip-main-menu": HTMLIpMainMenuElement;
@@ -704,6 +778,62 @@ declare namespace LocalJSX {
          */
         "tooltipVariant"?: 'default' | 'onLight' | 'onDark';
     }
+    interface IpAvatarStack {
+        /**
+          * Reduces the visible avatars to fit the container width, collapsing the rest like `max` does (`max` stays the cap). Set `auto-fit="false"` for a fixed stack that always shows up to `max`.
+          * @default true
+         */
+        "autoFit"?: boolean;
+        /**
+          * Makes the `+N` overflow counter focusable, keyboard-activatable, and emits `ipOverflowClick`.
+          * @default false
+         */
+        "clickable"?: boolean;
+        /**
+          * Diameter of the overflow counter when `size="custom"`. Any CSS length, applied to both width and height.
+          * @default undefined
+         */
+        "customSize"?: string | undefined;
+        /**
+          * Greys out the stack and, when `clickable`, prevents activation of the overflow counter.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Overrides the gap between the stack and the label. Any CSS length; defaults scale with `size`.
+          * @default undefined
+         */
+        "gap"?: string | undefined;
+        /**
+          * How the group is summarised: the first name with a `+N` rest count, a `+N` overflow counter circle in the stack, or nothing. The counter circle and the text label are mutually exclusive.
+          * @default 'name'
+         */
+        "labelMode"?: 'name' | 'counter' | 'none';
+        /**
+          * Maximum number of avatars shown before the rest collapse into a `+N` counter. Acts as the hard cap; with `auto-fit` on, fewer may show.
+          * @default 3
+         */
+        "max"?: number;
+        /**
+          * Emitted when a clickable, non-disabled overflow counter is activated by mouse or keyboard.
+         */
+        "onIpOverflowClick"?: (event: IpAvatarStackCustomEvent<void>) => void;
+        /**
+          * Overrides the overlap offset between circles. Any CSS length; defaults scale with `size`.
+          * @default undefined
+         */
+        "overlap"?: string | undefined;
+        /**
+          * Whether the tooltip previews (the counter and the names label) show a small avatar beside each person, or just the name and caption.
+          * @default true
+         */
+        "previewAvatars"?: boolean;
+        /**
+          * Stack size. Drives the overflow counter size and the default overlap; slotted avatars should match.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large' | 'custom';
+    }
     interface IpButton {
         /**
           * Position of the icon slot — "start" places it before the label, "end" places it after
@@ -1028,6 +1158,18 @@ declare namespace LocalJSX {
         "tooltipSize": 'small' | 'medium' | 'large';
         "tooltipVariant": 'default' | 'onLight' | 'onDark';
     }
+    interface IpAvatarStackAttributes {
+        "max": number;
+        "autoFit": boolean;
+        "size": 'small' | 'medium' | 'large' | 'custom';
+        "customSize": string | undefined;
+        "overlap": string | undefined;
+        "labelMode": 'name' | 'counter' | 'none';
+        "gap": string | undefined;
+        "previewAvatars": boolean;
+        "clickable": boolean;
+        "disabled": boolean;
+    }
     interface IpButtonAttributes {
         "ariaLabel": string | null;
         "variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
@@ -1092,6 +1234,7 @@ declare namespace LocalJSX {
 
     interface IntrinsicElements {
         "ip-avatar": Omit<IpAvatar, keyof IpAvatarAttributes> & { [K in keyof IpAvatar & keyof IpAvatarAttributes]?: IpAvatar[K] } & { [K in keyof IpAvatar & keyof IpAvatarAttributes as `attr:${K}`]?: IpAvatarAttributes[K] } & { [K in keyof IpAvatar & keyof IpAvatarAttributes as `prop:${K}`]?: IpAvatar[K] };
+        "ip-avatar-stack": Omit<IpAvatarStack, keyof IpAvatarStackAttributes> & { [K in keyof IpAvatarStack & keyof IpAvatarStackAttributes]?: IpAvatarStack[K] } & { [K in keyof IpAvatarStack & keyof IpAvatarStackAttributes as `attr:${K}`]?: IpAvatarStackAttributes[K] } & { [K in keyof IpAvatarStack & keyof IpAvatarStackAttributes as `prop:${K}`]?: IpAvatarStack[K] };
         "ip-button": Omit<IpButton, keyof IpButtonAttributes> & { [K in keyof IpButton & keyof IpButtonAttributes]?: IpButton[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `attr:${K}`]?: IpButtonAttributes[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `prop:${K}`]?: IpButton[K] };
         "ip-icon-button": Omit<IpIconButton, keyof IpIconButtonAttributes> & { [K in keyof IpIconButton & keyof IpIconButtonAttributes]?: IpIconButton[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `attr:${K}`]?: IpIconButtonAttributes[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `prop:${K}`]?: IpIconButton[K] };
         "ip-main-menu": Omit<IpMainMenu, keyof IpMainMenuAttributes> & { [K in keyof IpMainMenu & keyof IpMainMenuAttributes]?: IpMainMenu[K] } & { [K in keyof IpMainMenu & keyof IpMainMenuAttributes as `attr:${K}`]?: IpMainMenuAttributes[K] } & { [K in keyof IpMainMenu & keyof IpMainMenuAttributes as `prop:${K}`]?: IpMainMenu[K] } & OneOf<"heading", IpMainMenu["heading"], IpMainMenuAttributes["heading"]>;
@@ -1107,6 +1250,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ip-avatar": LocalJSX.IntrinsicElements["ip-avatar"] & JSXBase.HTMLAttributes<HTMLIpAvatarElement>;
+            "ip-avatar-stack": LocalJSX.IntrinsicElements["ip-avatar-stack"] & JSXBase.HTMLAttributes<HTMLIpAvatarStackElement>;
             "ip-button": LocalJSX.IntrinsicElements["ip-button"] & JSXBase.HTMLAttributes<HTMLIpButtonElement>;
             /**
              * Circular icon-only button with tooltip, five variants, three sizes, and form participation.

package/dist/types/index.d.ts

@@ -11,3 +11,4 @@ export { IpMainMenuItem } from './components/ip-main-menu-item/ip-main-menu-item
 export { IpIconButton } from './components/ip-icon-button/ip-icon-button';
 export { IpTooltip } from './components/ip-tooltip/ip-tooltip';
 export { IpAvatar } from './components/ip-avatar/ip-avatar';
+export { IpAvatarStack } from './components/ip-avatar-stack/ip-avatar-stack';

package/dist/web-components/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BB9-AZXH.js";export{I as IpButton}from"./p-DrSqAb5O.js";export{P as PixelI18nService}from"./p-DHUR9EVo.js";export{I as IpMainMenu}from"./p-CWbwcDHB.js";export{I as IpMainMenuToggle}from"./p-B7DtfC4M.js";export{I as IpMainMenuSection}from"./p-uroVS1GL.js";export{I as IpMainMenuGroup}from"./p-CSHQqNXM.js";export{I as IpMainMenuItem}from"./p-CPd0stBB.js";export{I as IpIconButton}from"./p-C7Kf2aED.js";export{I as IpTooltip}from"./p-B1x6AHw9.js";export{I as IpAvatar}from"./p-DpQ72I9n.js";
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BB9-AZXH.js";export{I as IpButton}from"./p-6Z45CK1I.js";export{P as PixelI18nService}from"./p-DHUR9EVo.js";export{I as IpMainMenu}from"./p-VLgeZTve.js";export{I as IpMainMenuToggle}from"./p-C1tFWpS0.js";export{I as IpMainMenuSection}from"./p-BYKtWIr5.js";export{I as IpMainMenuGroup}from"./p-BkayA00u.js";export{I as IpMainMenuItem}from"./p-DWpUb5rd.js";export{I as IpIconButton}from"./p-MvV7276a.js";export{I as IpTooltip}from"./p-msgdnxTK.js";export{I as IpAvatar}from"./p-CXMRqnYG.js";export{I as IpAvatarStack}from"./p-D7rK08OB.js";

package/dist/web-components/components/ip-avatar-stack.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface IpAvatarStack extends Components.IpAvatarStack, HTMLElement {}
+export const IpAvatarStack: {
+    prototype: IpAvatarStack;
+    new (): IpAvatarStack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/web-components/components/ip-avatar-stack.js

@@ -0,0 +1 @@
+import{I as o,d as r}from"./p-D7rK08OB.js";const s=o,p=r;export{s as IpAvatarStack,p as defineCustomElement}

package/dist/web-components/components/ip-avatar.js

@@ -1 +1 @@
-import{I as o,d as p}from"./p-DpQ72I9n.js";const s=o,r=p;export{s as IpAvatar,r as defineCustomElement}
+import{I as o,d as s}from"./p-CXMRqnYG.js";const p=o,r=s;export{p as IpAvatar,r as defineCustomElement}

package/dist/web-components/components/ip-button.js

@@ -1 +1 @@
-import{I as o,d as r}from"./p-DrSqAb5O.js";const s=o,p=r;export{s as IpButton,p as defineCustomElement}
+import{I as o,d as s}from"./p-6Z45CK1I.js";const p=o,r=s;export{p as IpButton,r as defineCustomElement}

package/dist/web-components/components/ip-icon-button.js

@@ -1 +1 @@
-import{I as o,d as s}from"./p-C7Kf2aED.js";const a=o,p=s;export{a as IpIconButton,p as defineCustomElement}
+import{I as o,d as s}from"./p-MvV7276a.js";const a=o,p=s;export{a as IpIconButton,p as defineCustomElement}

package/dist/web-components/components/ip-main-menu-group.js

@@ -1 +1 @@
-import{I as o,d as s}from"./p-CSHQqNXM.js";const p=o,r=s;export{p as IpMainMenuGroup,r as defineCustomElement}
+import{I as o,d as s}from"./p-BkayA00u.js";const a=o,p=s;export{a as IpMainMenuGroup,p as defineCustomElement}

package/dist/web-components/components/ip-main-menu-item.js

@@ -1 +1 @@
-import{I as s,d as o}from"./p-CPd0stBB.js";const t=s,p=o;export{t as IpMainMenuItem,p as defineCustomElement}
+import{I as o,d as p}from"./p-DWpUb5rd.js";const r=o,s=p;export{r as IpMainMenuItem,s as defineCustomElement}

package/dist/web-components/components/ip-main-menu-section.js

@@ -1 +1 @@
-import{I as o,d as r}from"./p-uroVS1GL.js";const s=o,p=r;export{s as IpMainMenuSection,p as defineCustomElement}
+import{I as o,d as r}from"./p-BYKtWIr5.js";const s=o,t=r;export{s as IpMainMenuSection,t as defineCustomElement}

package/dist/web-components/components/ip-main-menu-toggle.js

@@ -1 +1 @@
-import{I as o,d as s}from"./p-B7DtfC4M.js";const t=o,p=s;export{t as IpMainMenuToggle,p as defineCustomElement}
+import{I as o,d as p}from"./p-C1tFWpS0.js";const s=o,t=p;export{s as IpMainMenuToggle,t as defineCustomElement}

package/dist/web-components/components/ip-main-menu.js

@@ -1 +1 @@
-import{I as o,d as s}from"./p-CWbwcDHB.js";const p=o,r=s;export{p as IpMainMenu,r as defineCustomElement}
+import{I as o,d as s}from"./p-VLgeZTve.js";const e=o,p=s;export{e as IpMainMenu,p as defineCustomElement}

package/dist/web-components/components/ip-tooltip.js

@@ -1 +1 @@
-import{I as o,d as s}from"./p-B1x6AHw9.js";const p=o,r=s;export{p as IpTooltip,r as defineCustomElement}
+import{I as s,d as o}from"./p-msgdnxTK.js";const m=s,p=o;export{m as IpTooltip,p as defineCustomElement}