@norconsult-digital-public/isypixel 2.0.1 → 2.0.2-canary.10

package/LICENSE.md

@@ -14,3 +14,14 @@ Norconsult Digital AS.
 
 The software is provided "AS IS", without warranties of any kind.
 Reverse engineering, decompilation, and disassembly are prohibited.
+
+---
+
+## Third-party attribution
+
+This package includes SVG icons sourced from Font Awesome Free 7.2.0.
+
+- Source: https://fontawesome.com
+- License: https://fontawesome.com/license/free
+- Icons under CC BY 4.0
+- Copyright © Fonticons, Inc.

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

@@ -0,0 +1,172 @@
+# ip-avatar
+
+A theme-aware user avatar. It shows a profile image with a fallback chain (primary image → fallback image → initials → silhouette), an optional one- or two-line label (name + caption), a configurable ring, a forced or automatic loading state, and four positional corner slots. It is domain-agnostic: status, signing, and responsibility semantics are not baked in — consumers place and style their own markers via the corner slots.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-avatar-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                                                                                                |
+| ----------------------- | ------- | ------------ | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `name`                  | string  | `""`         | Any string                                                                            | Full name. Used as the image `alt`, the source for initials/abbreviation, and the tooltip text.            |
+| `alt-name`              | string  | `undefined`  | Any string                                                                            | Explicit short/alternative name shown when `mode="alt-name"`. When unset, the name is abbreviated.         |
+| `caption`               | string  | `undefined`  | Any string                                                                            | Secondary line shown beneath the name, e.g. a role or title.                                               |
+| `placeholder`           | string  | `undefined`  | Any string                                                                            | Text shown beside the avatar when there is no name, e.g. an unselected-resource hint.                      |
+| `src`                   | string  | `undefined`  | Any image URL                                                                         | Primary profile image URL, tried first in the fallback chain.                                              |
+| `fallback-src`          | string  | `undefined`  | Any image URL                                                                         | Fallback image URL, used when `src` is missing or fails to load.                                           |
+| `mode`                  | string  | `"fullname"` | `"fullname"`, `"alt-name"`, `"firstname"`, `"lastname"`, `"initials"`, `"image-only"` | Which name representation is shown as visible text beside the avatar.                                      |
+| `fallback`              | string  | `"auto"`     | `"auto"`, `"initials"`, `"silhouette"`                                                | Circle content when there is no image. `auto` shows initials when a name is set, silhouette when nameless. |
+| `label-position`        | string  | `"right"`    | `"top"`, `"right"`, `"bottom"`, `"left"`                                              | Placement of the text label relative to the circle.                                                        |
+| `gap`                   | string  | `undefined`  | Any CSS length                                                                        | Overrides the gap between the avatar and the label. Defaults scale with `size`.                            |
+| `size`                  | string  | `"medium"`   | `"small"`, `"medium"`, `"large"`, `"custom"`                                          | Avatar size: `small` 40px, `medium` 50px (42px image), `large` 64px. Use `custom` with `custom-size`.      |
+| `custom-size`           | string  | `undefined`  | Any CSS length                                                                        | Diameter when `size="custom"`, applied to both width and height so the avatar stays circular.              |
+| `image-loading`         | string  | `"lazy"`     | `"lazy"`, `"eager"`                                                                   | Native image loading strategy forwarded to the inner `<img>`.                                              |
+| `loading`               | boolean | `false`      | `true`, `false`                                                                       | Forces the loading indicator regardless of image state, e.g. before `src` is known.                        |
+| `ring-variant`          | string  | `"default"`  | `"default"`, `"brand"`, `"success"`, `"warning"`, `"error"`, `"custom"`               | Predefined, theme-aware ring colour. Use `custom` together with `ring-color` for a raw colour.             |
+| `ring-color`            | string  | `undefined`  | Any CSS colour                                                                        | Raw ring colour, applied only when `ring-variant="custom"`. Does not adapt to light/dark.                  |
+| `ring-style`            | string  | `"solid"`    | `"solid"`, `"dashed"`, `"dotted"`                                                     | Line style of the ring.                                                                                    |
+| `ring-gap`              | string  | `undefined`  | Any CSS length                                                                        | Gap between the ring and the content. Defaults to a small constant (2px).                                  |
+| `striped`               | boolean | `false`      | `true`, `false`                                                                       | Overlays subtle diagonal stripes on the no-image background (initials / silhouette).                       |
+| `clickable`             | boolean | `false`      | `true`, `false`                                                                       | Makes the avatar interactive: focusable, keyboard-activatable, and emits `ipClick`.                        |
+| `selected`              | boolean | `false`      | `true`, `false`                                                                       | Applies the selected (active) container styling, e.g. for the chosen item in a list.                       |
+| `disabled`              | boolean | `false`      | `true`, `false`                                                                       | Greys out the avatar and, when `clickable`, prevents activation.                                           |
+| `full-width`            | boolean | `false`      | `true`, `false`                                                                       | Stretches the avatar to fill the row, so stacked avatars span the full width.                              |
+| `maintain-label-height` | boolean | `false`      | `true`, `false`                                                                       | Keeps both label lines at a constant height even when empty, so avatars in a row stay aligned.             |
+| `disable-tooltip`       | boolean | `false`      | `true`, `false`                                                                       | Disables the built-in tooltip entirely.                                                                    |
+| `tooltip-position`      | string  | `"top"`      | `"top"`, `"right"`, `"bottom"`, `"left"`                                              | Placement of the tooltip, forwarded to `ip-tooltip`.                                                       |
+| `tooltip-size`          | string  | `"medium"`   | `"small"`, `"medium"`, `"large"`                                                      | Size of the tooltip, forwarded to `ip-tooltip`.                                                            |
+| `tooltip-variant`       | string  | `"default"`  | `"default"`, `"onLight"`, `"onDark"`                                                  | Colour variant of the tooltip, forwarded to `ip-tooltip`.                                                  |
+
+**Fallback chain** — `src` is tried first. When it fails to load, `fallback-src` is tried next. When both are missing or fail, the avatar shows the user's initials (when a name is set) or a silhouette glyph. `fallback` can force `initials` or `silhouette`. Each image failure emits `ipImageError` with the failed URL.
+
+**Tooltip content** — The tooltip surfaces the full `name` whenever the visible text differs from it (e.g. `firstname`, `lastname`, `initials`, or an abbreviated `alt-name`). When the visible text already equals the full name — in `mode="fullname"`, or in `mode="alt-name"` for a name short enough that abbreviation leaves it unchanged — the tooltip is auto-disabled unless custom `tooltip` slot content is provided.
+
+## Slots
+
+| Slot           | Description                                                                                   |
+| -------------- | --------------------------------------------------------------------------------------------- |
+| `top-left`     | Adornment anchored to the top-left corner of the circle. The consumer supplies and styles it. |
+| `top-right`    | Adornment anchored to the top-right corner.                                                   |
+| `bottom-left`  | Adornment anchored to the bottom-left corner.                                                 |
+| `bottom-right` | Adornment anchored to the bottom-right corner, e.g. a status badge.                           |
+| `tooltip`      | Optional override of the tooltip content. Defaults to the derived name when not provided.     |
+
+## Events
+
+| Event          | Payload               | When                                                                                 |
+| -------------- | --------------------- | ------------------------------------------------------------------------------------ |
+| `ipImageError` | `string` (failed src) | An image fails to load and the component advances down the fallback chain.           |
+| `ipClick`      | `void`                | A `clickable` avatar is activated by mouse or keyboard. Not emitted when `disabled`. |
+
+## Accessibility
+
+- The image uses `name` as its `alt`. When the initials fallback is shown, `name` is exposed to assistive technology via visually hidden text and the initials/silhouette are marked `aria-hidden`.
+- While an image loads or `loading` is set, the media sets `aria-busy="true"` and renders visually hidden loading text. Initials/silhouette are the final state, never a stuck spinner.
+- When `clickable`, the avatar exposes `role="button"`, is focusable (`tabindex="0"`), shows a `:focus-visible` ring, and is activated with Enter or Space.
+- A non-clickable avatar with an active tooltip is keyboard-focusable via `ip-tooltip`'s WCAG 1.4.13 behaviour (the tooltip sets `tabindex="0"` on its trigger), so Tab reaches it and focus shows the tooltip, with a `:focus-visible` ring.
+- When `disabled`, a clickable avatar sets `aria-disabled="true"`, drops out of the tab order, and blocks `ipClick`.
+- A `clickable` avatar with no visible label derives its accessible name from `name` (falling back to `placeholder`). When using `mode="image-only"` (or no name/placeholder) on a clickable avatar, supply an accessible name yourself via the `tooltip` slot or a wrapping label, or the button is announced unnamed.
+
+## Design tokens
+
+> 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_tertiary_default`                            | Default label (name) text colour, matching `ip-avatar-stack`; 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 (applied only when the avatar is `clickable` or `selected`)                 |
+| `$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_tertiary_default` | 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
+
+### HTML
+
+> Attribute names must be **kebab-case** in HTML: use `fallback-src`, not `fallbackSrc`.
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-avatar.js';
+```
+
+```html
+<ip-avatar name="Alexander Wangsvik" caption="Elkraft, ingeniør" src="/users/alexander.jpg" fallback-src="/users/default.png">
+  <span slot="bottom-right" class="badge">✓</span>
+</ip-avatar>
+```
+
+### React
+
+```tsx
+import { IpAvatar } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpAvatar name='Alexander Wangsvik' caption='Elkraft, ingeniør' src='/users/alexander.jpg' fallbackSrc='/users/default.png' onIpClick={() => {}} />;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpAvatar } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpAvatar name="Alexander Wangsvik" caption="Elkraft, ingeniør" src="/users/alexander.jpg" fallback-src="/users/default.png" />
+</template>
+```
+
+### Angular
+
+```ts
+import { IpAvatar } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-avatar name="Alexander Wangsvik" caption="Elkraft, ingeniør" [src]="imageUrl" ring-variant="brand" (ipClick)="onSelect()"></ip-avatar>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-avatar.js';
+</script>
+
+<ip-avatar name="Alexander Wangsvik" caption="Elkraft, ingeniør" src="/users/alexander.jpg" fallback-src="/users/default.png"></ip-avatar>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `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.js"></script>
+
+<ip-avatar name="Alexander Wangsvik" caption="Elkraft, ingeniør" src="/users/alexander.jpg" fallback-src="/users/default.png"></ip-avatar>
+```
+
+- Boolean attributes such as `clickable`, `disabled`, `striped`, and `disable-tooltip` 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-avatar-stack/llm.md

@@ -0,0 +1,171 @@
+# 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"`, `"alt-name"`, `"counter"`, `"none"` | How the group is summarised. `name`: first name + `+N` rest text label. `alt-name`: same, but uses the first avatar's short `alt-name` (falling back to `name`). `counter`: a `+N` counter circle in the stack. `none`: nothing. The counter circle and the text label are mutually exclusive. |
+| `label-position`  | string  | `"right"`   | `"top"`, `"right"`, `"bottom"`, `"left"`      | Which side of the avatars the text label sits on, mirroring `ip-avatar`. No effect in `counter`/`none` modes.                                                                                                                                                                                  |
+| `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. `label-mode="alt-name"` behaves the same but uses the first avatar's short `alt-name` (falling back to `name` when unset), e.g. `Markus +2`; the full `name` is still shown in the tooltip preview. 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`.
+- The names label (when it has a tooltip, i.e. more than one person) and a non-clickable counter are keyboard-focusable via `ip-tooltip`'s WCAG 1.4.13 behaviour: the tooltip sets `tabindex="0"` on its trigger, so Tab reaches them and focus shows the people list. Both show a `:focus-visible` ring.
+
+## 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 and the names label     |
+| `$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/{web-components/components → docs/web-components}/ip-button/llm.md

@@ -8,14 +8,15 @@ Clickable button component with support for visual variants, loading state, and
 
 ## Attributes
 
-| Attribute   | Type    | Default     | Values                                                               |
-| ----------- | ------- | ----------- | -------------------------------------------------------------------- |
-| `variant`   | string  | `"primary"` | `"primary"`, `"secondary"`, `"tertiary"`, `"brand"`, `"destructive"` |
-| `size`      | string  | `"medium"`  | `"small"`, `"medium"`, `"large"`                                     |
-| `loading`   | boolean | `false`     | `true`, `false`                                                      |
-| `disabled`  | boolean | `false`     | `true`, `false`                                                      |
-| `type`      | string  | `"submit"`  | `"submit"`, `"reset"`, `"button"`                                    |
-| `alignIcon` | string  | `"start"`   | `"start"`, `"end"`                                                   |
+| Attribute    | Type    | Default     | Values                                                               |
+| ------------ | ------- | ----------- | -------------------------------------------------------------------- |
+| `variant`    | string  | `"primary"` | `"primary"`, `"secondary"`, `"tertiary"`, `"brand"`, `"destructive"` |
+| `size`       | string  | `"medium"`  | `"small"`, `"medium"`, `"large"`                                     |
+| `loading`    | boolean | `false`     | `true`, `false`                                                      |
+| `disabled`   | boolean | `false`     | `true`, `false`                                                      |
+| `type`       | string  | `"submit"`  | `"submit"`, `"reset"`, `"button"`                                    |
+| `alignIcon`  | string  | `"start"`   | `"start"`, `"end"`                                                   |
+| `aria-label` | string  | —           | Any string                                                           |
 
 **size** — Controls the size of the button. Defaults to `"medium"`. Affects padding, gap, and font size.
 
@@ -57,6 +58,8 @@ Clickable button component with support for visual variants, loading state, and
 | _(default)_ | Button label text                                                                    |
 | `icon`      | Optional icon. Position is controlled by the `alignIcon` prop (`"start"` or `"end"`) |
 
+> **Icon-only buttons:** When no label text is slotted, the button has no visible accessible name. In this case, set `aria-label` on the `<ip-button>` host element — it is automatically forwarded to the inner `<button>`. Example: `<ip-button aria-label="Delete item"><i slot="icon">…</i></ip-button>`.
+
 ## Other Tokens
 
 | SCSS variable                        | CSS variable                          | Description                   |
@@ -151,10 +154,14 @@ import { IpButton } from '@norconsult-digital-public/isypixel/web-components/rea
 
 ### Vue
 
-```tsx
+```vue
+<script setup lang="ts">
 import { IpButton } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
 
-<IpButton variant='primary'>Click me</IpButton>;
+<template>
+  <IpButton variant="primary">Click me</IpButton>
+</template>
 ```
 
 ### Angular

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

@@ -0,0 +1,180 @@
+# ip-card
+
+Structural card container that groups related content in a rounded shell with an optional clickable primary action and an optional slim layout. The card owns no domain logic or semantics: the consumer composes the content from existing Pixel components (`ip-chip`, `ip-avatar-stack`, `ip-icon-count`, `ip-date-display`, `ip-icon-button`, `ip-status-marker`) through slots. A semantic status marker (4px stripe on the left edge) is added by slotting an `ip-status-marker` into the `marker` slot. Primary use: mobile rendering of table rows, plus summary, status, and content cards.
+
+> **`clickTarget` (where the action lives):** `'none'` (default) is inert. `'heading'` makes just the title the activatable primary action. `'card'` makes the whole card one action, mirroring a clickable table row: every click anywhere on the card is forwarded to the primary action, no exceptions. **Because of that, do not combine `'card'` with standalone interactive controls (including the `actions` slot)** — a slotted control still works, but the card activates as well. A card that needs its own buttons should use `'heading'` mode instead; alternatively a consumer can suppress the card activation per element by calling `event.preventDefault()` in its click handler. A click that ends a text selection does not activate the card. `heading` provides the accessible name and is required when activatable. In `'card'` mode, hovering anywhere on the card outlines the whole card after a short delay, pressing shows a stronger outline, keyboard focus shows the standard 2px focus ring around the card (same style as `ip-button`), and the heading never restyles. In `'heading'` mode the heading is styled as a link (blue), gains an underline while hovered, and keyboard focus rings the heading itself.
+
+> **`href` vs button (SPA note):** Setting `href` promotes `clickTarget` from `'none'` to `'heading'` (a link is never inert) and renders the action as a real `<a>` (native navigation, middle-click, open-in-new-tab); it does **not** emit `ipCardClick`. `clickTarget` set without `href` renders a `<button>` that emits `ipCardClick`. An `<a href>` rendered in shadow DOM performs a real browser navigation that framework routers do not intercept. For SPA client-side routing, leave `href` empty, set `clickTarget`, and listen to `ipCardClick`. Set `href` only for real links. This mirrors the `brandHref` / `ipBrandClick` split in `ip-main-menu`.
+
+> **Known `'card'`-mode limitations (accepted trade-offs of click delegation):** With `href`, native link affordances (middle-click, Ctrl/Cmd+click for a new tab) work only on the heading itself; a plain click elsewhere on the card is forwarded programmatically and performs a normal navigation. Selecting text on the card does not activate it, but browsers that do not expose shadow-DOM selections through `window.getSelection()` may still activate the card when the selection is inside the heading itself.
+
+## Attributes
+
+| Attribute     | Type                            | Default     | Allowed values                    | Description                                                                                                                                                                                                                              |
+| ------------- | ------------------------------- | ----------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `eyebrow`     | `string`                        | `''`        | Any string                        | Small overline label above the title.                                                                                                                                                                                                    |
+| `heading`     | `string`                        | `''`        | Any string                        | Main title. Conditionally required when the card is activatable (`clickTarget` or `href`), because it provides the accessible name.                                                                                                      |
+| `subheading`  | `string`                        | `''`        | Any string                        | Secondary line below the title.                                                                                                                                                                                                          |
+| `clickTarget` | `'none' \| 'heading' \| 'card'` | `'none'`    | `'none'`, `'heading'`, `'card'`   | Where the primary action's hit area lives. `'none'` is inert; `'heading'` makes just the title activatable; `'card'` forwards clicks on passive card areas to the primary action. Setting `href` promotes `'none'` to `'heading'`.       |
+| `href`        | `string \| undefined`           | `undefined` | Any URL string                    | Renders the primary action as a real `<a>` and makes the card activatable (at least `'heading'`). Without `href`, an activatable card is a `<button>` emitting `ipCardClick`.                                                            |
+| `target`      | `string \| undefined`           | `undefined` | Any anchor target (e.g. `_blank`) | Link target, applied only when `href` is set.                                                                                                                                                                                            |
+| `slim`        | `boolean` (reflected)           | `false`     | `true`, `false`                   | Slim layout. When `true`, the card shows the status marker, `heading`, `header-end` and body (`default` slot); the `eyebrow`, `subheading`, `footer` and `actions` are hidden. The consumer owns this prop; there is no built-in toggle. |
+
+## Slots
+
+| Slot         | Description                                                                                                                                                                                                                                                                                              |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `marker`     | Status marker anchored flush to the card's left edge (typically an `ip-status-marker`). Stays visible in slim layout.                                                                                                                                                                                    |
+| `header-end` | Right-aligned content in the top region (date, star, badge). Stays visible in slim layout.                                                                                                                                                                                                               |
+| `default`    | Body content (chips, meta rows). Stays visible in slim layout.                                                                                                                                                                                                                                           |
+| `footer`     | Passive info region below the auto-divider (avatar, counts, meta). Hidden in slim layout, and removed entirely (no gap or divider) when the slot is empty.                                                                                                                                               |
+| `actions`    | Right-aligned interactive controls (icon buttons, menu) shown as a bottom row. Do not combine with `clickTarget='card'` (clicks on the controls would also activate the card); use `'heading'` mode for cards with actions. Hidden in slim layout, and removed entirely (no gap) when the slot is empty. |
+
+## Events
+
+| Event         | Payload             | Description                                                                                                                                   |
+| ------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ipCardClick` | `CustomEvent<void>` | Fires when the primary action is activated (click / Enter / Space) in button mode: `clickTarget` set (`'heading'` or `'card'`) and no `href`. |
+
+## Slim layout
+
+Slim is a **static layout choice**, not a disclosure: the consumer sets the `slim` prop (there is no built-in toggle button). When `slim`:
+
+- The `heading`, `header-end` and body (`default` slot) stay visible, with tighter spacing.
+- The `eyebrow`, `subheading`, `footer` and `actions` are hidden.
+- The `marker` slot stays visible.
+
+Slim reuses the same `default` slot as the full card, so there is no separate slot to maintain. To drive it from state, bind `slim` to your own value; provide a lighter body in the `default` slot if the full content is too heavy for the compact row.
+
+## Design tokens
+
+| Token                                     | Role                                                                                                |
+| ----------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `ip_color_surface_primary_default`        | Card background                                                                                     |
+| `ip_color_border_opaque_15`               | Card border (default)                                                                               |
+| `ip_color_border_opaque_20`               | Card outline on hover (`'card'` mode)                                                               |
+| `ip_color_border_primary_default`         | Card outline on active/press (`'card'` mode)                                                        |
+| `ip_color_border_opaque_10`               | Auto-divider above the footer                                                                       |
+| `ip_color_text_primary_black`             | Heading text at rest (non-interactive and `'card'` mode)                                            |
+| `ip_color_hyperlink_text_primary_default` | Heading link colour at rest (`'heading'` mode)                                                      |
+| `ip_color_hyperlink_text_primary_hover`   | Heading link colour on hover (`'heading'` mode)                                                     |
+| `ip_color_text_secondary_default`         | Subheading text                                                                                     |
+| `ip_color_text_tertiary_default`          | Eyebrow text                                                                                        |
+| `ip_color_button_focus_default`           | Focus ring on the heading (`'heading'` mode) and the 2px focus ring around the card (`'card'` mode) |
+| `ip_radius_size_x_large`                  | Card corner radius (12px stand-in; Figma specifies 16px)                                            |
+
+> **Token gaps (flagged to design team, §8):**
+>
+> - A radius token for 16px (Figma spec). Interim: `ip_radius_size_x_large` (12px).
+> - A card-specific focus token; interim reuse of `ip_color_button_focus_default`.
+> - Border-width and motion tokens: the 5px interaction outline, 1px borders, and the 150ms transition/delay values are raw values, marked with `//TODO:` in the SCSS.
+
+## Usage examples
+
+### HTML
+
+```html
+<!-- Whole card clickable (table-row style): emits ipCardClick, for SPA routing -->
+<ip-card eyebrow="Work order" heading="Periodic maintenance, turbine 2" subheading="AO-11033380" click-target="card" id="card">
+  <ip-status-marker slot="marker" status="warning"></ip-status-marker>
+  <span slot="header-end">19.08.2025</span>
+  <p>SØR...FOFOL.411.012.300 - Guide vanes</p>
+  <div slot="footer">Alexander Wangsvik Olsen +2</div>
+  <ip-icon-button slot="actions" label="Edit"></ip-icon-button>
+</ip-card>
+<script>
+  document.getElementById('card').addEventListener('ipCardClick', () => router.navigate('/orders/11033380'));
+</script>
+
+<!-- Link card: real navigation, no ipCardClick -->
+<ip-card heading="Major leak. Dam is affected." href="/faults/314001" target="_blank">
+  <ip-status-marker slot="marker" status="error"></ip-status-marker>
+</ip-card>
+```
+
+### React
+
+```tsx
+import { IpCard, IpStatusMarker } from '@norconsult-digital-public/isypixel/web-components/react';
+
+// Interactive (SPA)
+<IpCard eyebrow='Work order' heading='Periodic maintenance' subheading='AO-11033380' clickTarget='card' onIpCardClick={() => navigate('/orders/11033380')}>
+  <IpStatusMarker slot='marker' status='warning' />
+  <span slot='header-end'>19.08.2025</span>
+  <p>Guide vanes</p>
+  <div slot='footer'>Alexander Wangsvik Olsen +2</div>
+</IpCard>
+
+// Link
+<IpCard heading='Major leak' href='/faults/314001' target='_blank'>
+  <IpStatusMarker slot='marker' status='error' />
+</IpCard>
+```
+
+### Vue
+
+```vue
+<!-- Interactive (SPA) -->
+<IpCard eyebrow="Work order" heading="Periodic maintenance" click-target="card" @ip-card-click="router.push('/orders/11033380')">
+  <IpStatusMarker slot="marker" status="warning" />
+  <span slot="header-end">19.08.2025</span>
+  <p>Guide vanes</p>
+  <div slot="footer">Alexander Wangsvik Olsen +2</div>
+</IpCard>
+
+<!-- Link -->
+<IpCard heading="Major leak" href="/faults/314001" target="_blank">
+  <IpStatusMarker slot="marker" status="error" />
+</IpCard>
+```
+
+### Angular
+
+```html
+<!-- Interactive (SPA) -->
+<ip-card eyebrow="Work order" heading="Periodic maintenance" clickTarget="card" (ipCardClick)="router.navigate(['/orders/11033380'])">
+  <ip-status-marker slot="marker" status="warning"></ip-status-marker>
+  <span slot="header-end">19.08.2025</span>
+  <p>Guide vanes</p>
+  <div slot="footer">Alexander Wangsvik Olsen +2</div>
+</ip-card>
+
+<!-- Link -->
+<ip-card heading="Major leak" href="/faults/314001" target="_blank">
+  <ip-status-marker slot="marker" status="error"></ip-status-marker>
+</ip-card>
+```
+
+### Svelte
+
+```svelte
+<!-- Interactive (SPA) -->
+<ip-card heading="Periodic maintenance" click-target="card" on:ipCardClick={() => goto('/orders/11033380')}>
+  <ip-status-marker slot="marker" status="warning"></ip-status-marker>
+  <span slot="header-end">19.08.2025</span>
+  <p>Guide vanes</p>
+  <div slot="footer">Alexander Wangsvik Olsen +2</div>
+</ip-card>
+
+<!-- Link -->
+<ip-card heading="Major leak" href="/faults/314001" target="_blank">
+  <ip-status-marker slot="marker" status="error"></ip-status-marker>
+</ip-card>
+```
+
+### Blazor
+
+```razor
+<!-- Interactive (SPA) -->
+<ip-card heading="Periodic maintenance" click-target="card" @onipCardClick="OpenOrder">
+  <ip-status-marker slot="marker" status="warning"></ip-status-marker>
+  <span slot="header-end">19.08.2025</span>
+  <p>Guide vanes</p>
+  <div slot="footer">Alexander Wangsvik Olsen +2</div>
+</ip-card>
+
+<!-- Link -->
+<ip-card heading="Major leak" href="/faults/314001" target="_blank">
+  <ip-status-marker slot="marker" status="error"></ip-status-marker>
+</ip-card>
+```