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

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/docs/web-components/ip-icon-count/llm.md

@@ -0,0 +1,126 @@
+# ip-icon-count
+
+A compact inline indicator that pairs a slotted icon with a value. Use it to show a count or measurement next to a contextual icon — e.g. a paperclip with `+14` for attachments, a checklist icon with `16` for tasks, or a temperature icon with `37°C` for a sensor reading.
+
+The component is display only: it is not interactive, emits no events, and does not participate in forms. Consumers needing click behaviour wrap it in a `<button>` or `<a>`.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-icon-count-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.
+
+## Attributes
+
+| Attribute | Type   | Default     | Values                                         | Description                                                                                                                        |
+| --------- | ------ | ----------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `value`   | string | `""`        | Any string                                     | The value shown next to the icon. A string so `"12"`, `"+14"`, and `"37°C"` are all valid. When empty, a `-` placeholder is shown. |
+| `variant` | string | `"default"` | `"default"`, `"brand"`, `"warning"`, `"error"` | Colour variant for the icon and value.                                                                                             |
+| `size`    | string | `"medium"`  | `"small"`, `"medium"`, `"large"`               | Size of the icon and value text.                                                                                                   |
+| `label`   | string | `""`        | Any string                                     | Optional accessible label describing the value, e.g. `"12 attachments"`. Sets `aria-label` on the host. See Accessibility.         |
+
+## Slots
+
+| Slot   | Description                                                 |
+| ------ | ----------------------------------------------------------- |
+| `icon` | The icon element to display. Typically an `<i>` or `<svg>`. |
+
+## Accessibility
+
+- The slotted icon is decorative and marked `aria-hidden`. On its own, an icon plus a value is not descriptive to assistive technology.
+- When `label` is set, the host is exposed as `role="img"` with the label as its accessible name, so screen readers announce the meaning (e.g. "12 attachments") rather than the bare value.
+- When `label` is empty, the component is exposed as-is and the value text is read on its own. Provide a `label` whenever the icon carries meaning that the value alone does not convey.
+
+## Design tokens
+
+> The `brand`, `warning`, and `error` variants use colours that fall below WCAG AA contrast on light surfaces (`brand`) or are non-adaptive primitive stand-ins (`warning`, `error`) because no sufficiently contrasting semantic tokens exist yet. These are marked `//TODO` in the SCSS and will be replaced with semantic, theme-aware tokens once design adds them. The same gap applies to the ip-avatar ring variants.
+
+| SCSS variable                                                               | Role                                                      |
+| --------------------------------------------------------------------------- | --------------------------------------------------------- |
+| `$ip_color_text_secondary_default`                                          | Value colour for `variant="default"`                      |
+| `$ip_color_icon_primary_default`                                            | Icon colour for `variant="default"`                       |
+| `$ip_color_brand_accent_primary_default`                                    | Icon and value colour for `variant="brand"`               |
+| `$ip_color_extended_orange-700`                                             | Icon and value colour for `variant="warning"` (temporary) |
+| `$ip_color_extended_red-700`                                                | Icon and value colour for `variant="error"` (temporary)   |
+| `$ip_iconography_size_tiny` / `_small` / `_medium`                          | Icon size for `size` small / medium / large               |
+| `$ip_typography_mono_spaced_numbers_font_size_tiny` / `_small` / `_default` | Value font size for `size` small / medium / large         |
+| `$ip_typography_mono_spaced_numbers_font_family_default`                    | Value font family (monospace)                             |
+| `$ip_typography_mono_spaced_numbers_font_weight_default`                    | Value font weight                                         |
+| `$ip_typography_mono_spaced_numbers_letter_spacing_default`                 | Value letter spacing                                      |
+| `$ip_radius_size_medium`                                                    | Container border radius                                   |
+| `$ip_spacing_space_075`                                                     | Gap between the icon and the value                        |
+| `$ip_spacing_space_025` / `$ip_spacing_space_050`                           | Container padding (vertical / horizontal)                 |
+
+## Usage
+
+### HTML
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-icon-count.js';
+```
+
+```html
+<ip-icon-count value="+14" variant="default" size="medium" label="14 attachments">
+  <i slot="icon" class="fa-solid fa-paperclip"></i>
+</ip-icon-count>
+```
+
+### React
+
+```tsx
+import { IpIconCount } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpIconCount value='+14' variant='default' size='medium' label='14 attachments'>
+  <i slot='icon' className='fa-solid fa-paperclip' />
+</IpIconCount>;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpIconCount } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpIconCount value="+14" variant="default" size="medium" label="14 attachments">
+    <i slot="icon" class="fa-solid fa-paperclip" />
+  </IpIconCount>
+</template>
+```
+
+### Angular
+
+```ts
+import { IpIconCount } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-icon-count value="+14" variant="default" size="medium" label="14 attachments">
+  <i slot="icon" class="fa-solid fa-paperclip"></i>
+</ip-icon-count>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-icon-count.js';
+</script>
+
+<ip-icon-count value="+14" variant="default" size="medium" label="14 attachments">
+  <i slot="icon" class="fa-solid fa-paperclip"></i>
+</ip-icon-count>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `ip-icon-count.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-icon-count.js"></script>
+
+<ip-icon-count value="+14" variant="default" size="medium" label="14 attachments">
+  <i slot="icon" class="fa-solid fa-paperclip"></i>
+</ip-icon-count>
+```

package/dist/llm.md

@@ -175,6 +175,8 @@ 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-icon-count`        | Compact inline indicator pairing a slotted icon with a value, e.g. an attachment count or a sensor reading       | `docs/web-components/ip-icon-count/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/ip-icon-count/ip-icon-count.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from '../../stencil-public-runtime';
+/** Compact inline indicator pairing a slotted icon with a value, e.g. an attachment count or a sensor reading. Display only — not interactive. */
+export declare class IpIconCount {
+    /** Value shown next to the icon. A string so "12", "+14", and "37°C" are all valid. Empty renders a "-" placeholder so the layout stays consistent. */
+    value: string;
+    /** Colour variant for the icon and value. Mirrors the `variant` naming on ip-button / ip-icon-button. */
+    variant: 'default' | 'brand' | 'warning' | 'error';
+    /** Size of the icon and value text. */
+    size: 'small' | 'medium' | 'large';
+    /** Optional accessible label describing the value, e.g. "12 attachments". Sets aria-label on the host; an icon + value alone is not descriptive to screen readers. */
+    label: string;
+    /** Renders the icon and value, exposing a single labelled image to assistive tech when `label` is set. */
+    render(): JSX.Element;
+}