@norconsult-digital-public/isypixel 2.0.2 → 2.0.4-canary.1

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

@@ -0,0 +1,209 @@
+# 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. "Empty" means nothing is assigned to the slot — see the note below.                                                                                                                                                                                                                    |
+| `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. Without a footer, the auto-divider sits above this row instead; with a footer there is no divider between footer and actions. Hidden in slim layout, and removed entirely (no gap or divider) when the slot is empty. |
+
+> **Empty `footer` and `actions` wrappers still count as content:** the card removes the footer (divider included) and the actions row only when _nothing_ is assigned to the slot. A wrapper element that is always rendered but happens to be empty — `<div slot="footer">` whose own children are all conditional — is assigned content, so the divider is drawn with nothing under it. The card cannot tell the difference; a nested element with no text is not distinguishable from one that renders an icon. Render the wrapper conditionally instead, so the slot is genuinely empty:
+>
+> ```html
+> <!-- Angular -->
+> @if (hasFooterContent) {
+> <div slot="footer">…</div>
+> }
+> ```
+>
+> Alternatively, slot the individual items directly (`<ip-avatar slot="footer">`, `<ip-icon-count slot="footer">`) with the condition on each — several elements may share one slot name, and the slot is empty when none of them render.
+
+## 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.
+
+## Height and equal-height grids
+
+The card box fills whatever height the host element (`<ip-card>`) is given, and falls back to its content height when the host is content-sized. Nothing needs to be enabled — there is no `fullHeight` prop.
+
+- **In a CSS grid or flex row**, items stretch by default (`align-items: stretch`), so sibling cards in the same row already render at equal height with no extra CSS. Only set `align-items` to something other than `stretch` if you _want_ content-sized cards.
+- **With an explicit height**, style the host: `ip-card { height: 100% }` or `block-size: 100%`.
+- **When the card is wrapped** in another element (a framework component's host, a `<div>`, a repeater item), that wrapper must pass the height on — give it `height: 100%`, or `display: contents` so it disappears from the layout entirely. A wrapper with an auto height is the usual reason a card refuses to fill its row.
+
+When a card is taller than its content, the spare height goes to the body (`default` slot), so the `footer` and `actions` rows sit at the card's bottom edge instead of leaving a gap below them. Content that overflows a fixed-height card is clipped (the card sets `overflow: hidden`).
+
+```html
+<!-- Equal-height cards, no per-card CSS needed -->
+<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px">
+  <ip-card heading="Short card"><p>One line.</p></ip-card>
+  <ip-card heading="Tall card"><p>Several lines of body content…</p></ip-card>
+</div>
+```
+
+## 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, or above the actions when there is no 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>
+```

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

@@ -0,0 +1,157 @@
+# ip-chip
+
+A compact, presentational chip: a label/tag with a semantic status colour, orthogonal fill and border axes, an optional leading icon, a collapsed icon-only state, and an optional remove button. It has no click or selection behaviour of its own — interactivity and selection are owned by `ip-chip-group`. Standalone, it is a status tag or a removable input tag.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-chip-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                                                                                                                    |
+| -------------- | ------- | ---------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`      | string  | `"info"`   | `"neutral"`, `"info"`, `"success"`, `"warning"`, `"error"`, `"brand"` | Drives the chip colour (fill and icon). `info` is the default; `neutral` is a status-less greyscale chip.                      |
+| `border-style` | string  | `"solid"`  | `"none"`, `"solid"`, `"dashed"`                                       | Border style.                                                                                                                  |
+| `size`         | string  | `"medium"` | `"small"`, `"medium"`, `"large"`                                      | Chip size.                                                                                                                     |
+| `value`        | string  | `""`       | Any string                                                            | Passive identity read by `ip-chip-group`. No effect standalone.                                                                |
+| `interactive`  | boolean | `false`    | `true`, `false`                                                       | Makes the chip body a toggle button with `aria-pressed`. Set by `ip-chip-group` in single/multiple mode; no effect standalone. |
+| `selected`     | boolean | `false`    | `true`, `false`                                                       | Visual selected state. Set primarily by `ip-chip-group`; styling only.                                                         |
+| `collapsed`    | boolean | `false`    | `true`, `false`                                                       | Hides the text visually and shows only the icon. The text is kept for screen readers. Requires the `icon` slot.                |
+| `removable`    | boolean | `false`    | `true`, `false`                                                       | Shows a built-in remove button (X).                                                                                            |
+| `remove-label` | string  | `"Remove"` | Any string                                                            | Accessible label for the remove button. The chip text is appended where available, e.g. "Remove High".                         |
+| `disabled`     | boolean | `false`    | `true`, `false`                                                       | Disables the chip and its remove button.                                                                                       |
+
+**Colour vs border** — `variant` sets the fill tint and icon colour; `border-style` independently controls the border line (`none`, `solid`, or `dashed`). The border is a neutral grey on every variant — the status colour lives in the fill and the icon.
+
+## Slots
+
+| Slot          | Description                                                                                        |
+| ------------- | -------------------------------------------------------------------------------------------------- |
+| `default`     | The text content of the chip.                                                                      |
+| `icon`        | Leading icon or status dot, shown before the text. Required when `collapsed`.                      |
+| `remove-icon` | Overrides the icon inside the remove button. Defaults to a built-in X (Font Awesome Free `xmark`). |
+
+## Events
+
+| Event      | Payload | When                                                                  |
+| ---------- | ------- | --------------------------------------------------------------------- |
+| `ipRemove` | `void`  | The built-in remove button is activated. Not emitted when `disabled`. |
+
+## Methods
+
+| Method     | Signature                                                    | Description                                                                                                                                                                                      |
+| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `setFocus` | `setFocus(segment?: 'primary' \| 'remove') => Promise<void>` | Moves focus to a chip segment (default `'primary'`). Falls back to the other segment when the requested one is not focusable. Used by `ip-chip-group` to restore focus after a keyboard removal. |
+
+## Accessibility
+
+- The chip is presentational by default. Inside `ip-chip-group` it becomes a **split button**: the primary (body) and the remove button are separate, sibling `<button>`s — never nested. In selection modes the group makes the primary a toggle button with `aria-pressed`; every primary and remove button is a natural tab stop.
+- When a chip is removed via keyboard inside `ip-chip-group`, the group moves focus to a neighbouring chip (see the ip-chip-group docs). Standalone, the consumer is responsible for moving focus after removing the chip from the DOM.
+- When `collapsed`, the text is visually hidden but kept for assistive technology, so the chip retains an accessible name.
+- The remove button is an always-focusable `<button>` with an accessible name combining `remove-label` and the chip text, e.g. "Remove High". It shows a `:focus-visible` ring.
+- When `disabled`, the remove button sets both `disabled` and `aria-disabled="true"`, and the chip is greyed out.
+- Long text is truncated with an ellipsis: the chip is never wider than its container, and `--ip-chip-max-width` can cap it narrower. The full text is then shown in an `ip-tooltip` on hover/focus. A `collapsed` chip always offers its full text in the tooltip.
+
+## Design tokens
+
+> The chip reuses generic semantic tokens and non-adaptive primitive extended/core colours as theme stand-ins; a dedicated chip token family (fill, border, text, focus, remove-hover, target size) does not exist yet. These are marked `//TODO` in the SCSS and will be replaced once design adds the chip tokens.
+
+| SCSS variable                                                | Role                                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `$ip_color_core_steel_blue-900`                              | Text colour on every variant — a non-adaptive near-black (= primary-black's light value) so it stays legible on the light fills in both themes; the label is shown at 60% opacity. A 20%-opacity mix of it is the non-adaptive border on filled chips (visible on the light fill in both themes). |
+| `$ip_color_border_opaque_20`                                 | Adaptive border for the group-unselected (ghost) chip, which sits on the page rather than a fill: near-black at 20% in light mode, flipping to translucent white in dark mode so the outline stays visible. Also the remove-button hover background.                                              |
+| `$ip_color_text_primary_black`                               | Text colour for a fill-less ghost chip (group-unselected) — adaptive, so it follows the page in dark mode                                                                                                                                                                                         |
+| `$ip_color_extended_indigo-100` / `-700`                     | `info` (default) fill / icon                                                                                                                                                                                                                                                                      |
+| `$ip_color_brand_accent_primary_default`                     | `brand` fill (a pale `color-mix` wash) and icon — the teal brand accent                                                                                                                                                                                                                           |
+| `$ip_color_extended_green-100` / `-700`                      | `success` fill / icon                                                                                                                                                                                                                                                                             |
+| `$ip_color_extended_orange-100` / `-950`                     | `warning` fill / icon                                                                                                                                                                                                                                                                             |
+| `$ip_color_extended_red-100` / `-600`                        | `error` fill / icon                                                                                                                                                                                                                                                                               |
+| `$ip_color_core_light_gray-200` / `-900`                     | `neutral` fill / icon (status-less greyscale)                                                                                                                                                                                                                                                     |
+| `$ip_color_border_opaque_10`                                 | Resting background of the remove button                                                                                                                                                                                                                                                           |
+| `$ip_color_button_focus_default`                             | Focus ring for the chip and the remove button (borrowed from ip-button)                                                                                                                                                                                                                           |
+| `$ip_radius_size_medium`                                     | Border radius — fixed across sizes, matching ip-button                                                                                                                                                                                                                                            |
+| `$ip_spacing_space_025` – `$ip_spacing_space_150`            | Padding and gaps per size                                                                                                                                                                                                                                                                         |
+| `$ip_typography_body_font_size_small` / `_medium` / `_large` | Text font size per size                                                                                                                                                                                                                                                                           |
+| `$ip_typography_font_family_primary`                         | Font family                                                                                                                                                                                                                                                                                       |
+| `$ip_typography_font_weight_medium_500`                      | Text font weight                                                                                                                                                                                                                                                                                  |
+
+## CSS custom properties
+
+| Property              | Default | Role                                                           |
+| --------------------- | ------- | -------------------------------------------------------------- |
+| `--ip-chip-max-width` | `100%`  | Maximum chip width before the text truncates with an ellipsis. |
+
+## Usage
+
+### HTML
+
+> Attribute names must be **kebab-case** in HTML: use `border-style`, not `borderStyle`.
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-chip.js';
+```
+
+```html
+<ip-chip variant="warning" border-style="dashed">
+  <span slot="icon">●</span>
+  High
+</ip-chip>
+
+<ip-chip variant="info" removable remove-label="Remove">Periodic 2 months</ip-chip>
+```
+
+### React
+
+```tsx
+import { IpChip } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpChip variant='warning' borderStyle='dashed' onIpRemove={() => {}}>
+  High
+</IpChip>;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpChip } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpChip variant="info" removable @ipRemove="onRemove">Periodic 2 months</IpChip>
+</template>
+```
+
+### Angular
+
+```ts
+import { IpChip } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-chip variant="success" border-style="none" (ipRemove)="onRemove()">Scheduled</ip-chip>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-chip.js';
+</script>
+
+<ip-chip variant="error" border-style="dashed">Failure</ip-chip>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `ip-chip.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-chip.js"></script>
+
+<ip-chip variant="warning" border-style="dashed">High</ip-chip>
+```
+
+- Boolean attributes such as `removable`, `collapsed`, `selected`, and `disabled` must be set as `removable="true"` (string value) — Blazor does not reliably render bare boolean attributes on custom elements.

package/dist/docs/web-components/ip-chip-group/llm.md

@@ -0,0 +1,165 @@
+# ip-chip-group
+
+Groups `ip-chip` children under one shared interaction model. `selection-mode` decides what activating a chip does — nothing (display/grouping), select one, or select many — while `removable` on individual chips is orthogonal and adds a trailing remove button. Each chip is rendered as a **split button** (a primary action and an optional remove action as separate buttons); every button is a natural tab stop, and the group restores focus to a neighbouring chip after a keyboard-initiated removal.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-chip-group-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.
+
+## The two axes
+
+The group composes two independent things — combine them freely:
+
+1. **Selection** — the group's `selection-mode`: `none`, `single`, or `multiple`. A change emits `ipChange`.
+2. **Removal** — a chip's own `removable` attribute adds a remove button that emits `ipRemove` (on the chip). Independent of `selection-mode`.
+
+| Goal                            | Recipe                                                                     |
+| ------------------------------- | -------------------------------------------------------------------------- |
+| Read-only status group          | `selection-mode="none"`                                                    |
+| Removable tags (not selectable) | `selection-mode="none"` + chips `removable`                                |
+| Choose one / several            | `selection-mode="single"` / `"multiple"`                                   |
+| Choose several **and** remove   | `selection-mode="multiple"` + `removable` + listen `ipChange` / `ipRemove` |
+
+## Attributes
+
+| Attribute        | Type                | Default        | Values                             | Description                                                                                           |
+| ---------------- | ------------------- | -------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `selection-mode` | string              | `"none"`       | `"none"`, `"single"`, `"multiple"` | What activating a chip does: nothing (display), select one, or select many.                           |
+| `value`          | string \| string\[] | `undefined`    | Any value(s)                       | Selected value(s). Binding it makes the group controlled. `string` in single, `string[]` in multiple. |
+| `orientation`    | string              | `"horizontal"` | `"horizontal"`, `"vertical"`       | Visual layout direction of the chips.                                                                 |
+| `disabled`       | boolean             | `false`        | `true`, `false`                    | Disables the whole group and all of its chips.                                                        |
+
+**Control model** — uncontrolled by default: the group owns the selection state (and `value`, if set initially, seeds it). It becomes controlled when the consumer binds `value` and writes the new value back in the `ipChange` handler — like a native `<input>`.
+
+**`value` typing** — a `string` in single mode (settable via the attribute), a `string[]` in multiple mode (must be set via the **property**, since an HTML attribute can only carry a string).
+
+**Chip identity** — a chip is identified by its `value`; a chip without one falls back to its trimmed text content. Chips that share the same fallback text share one identity — selecting one selects all of them — so always set `value` on selectable chips.
+
+## Slots
+
+| Slot      | Description                     |
+| --------- | ------------------------------- |
+| `default` | One or more `ip-chip` elements. |
+
+## Events
+
+| Event      | Payload                         | When                                                                                           |
+| ---------- | ------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `ipChange` | `{ value: string \| string[] }` | Selection changes (single/multiple only). `value` is a string in single, an array in multiple. |
+
+> Removal is emitted as `ipRemove` on the individual `ip-chip`, not on the group.
+
+## Accessibility
+
+- The group is `role="group"`. Provide an accessible name via `aria-label` or `aria-labelledby`. Orientation is visual only (a reflected `orientation` attribute drives the layout); `aria-orientation` is intentionally not set, since it is not a valid property on `role="group"`.
+- **Split button** — each chip exposes a primary button and, when `removable`, a separate remove button; they are never nested, so clicking remove never also toggles selection.
+- **Keyboard** — every primary and remove button is a natural tab stop; Enter/Space and click activate the focused button natively.
+- **Focus restoration on removal** — when a chip is removed while its remove button holds visible keyboard focus (`:focus-visible`), the group moves focus to the next chip's remove button (or the closest previous one when the last chip was removed), so serial keyboard removal never drops focus. Pointer-initiated removals never move focus. Focus moves only after the consumer actually removes the chip from the DOM in its `ipRemove` handler.
+- **Selection** — in single/multiple the primary is a toggle button with `aria-pressed`. Selection is explicit (it does not follow focus).
+- In `none` mode the primary is not interactive or focusable (display only); a `removable` chip's remove button stays focusable.
+- When `disabled`, the group and every chip are disabled; chips re-enable to their own prior state when the group is re-enabled.
+
+## Design tokens
+
+| SCSS variable           | Role              |
+| ----------------------- | ----------------- |
+| `$ip_spacing_space_100` | Gap between chips |
+
+## Usage
+
+### HTML
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-chip-group.js';
+import '@norconsult-digital-public/isypixel/web-components/ip-chip.js';
+```
+
+```html
+<!-- Filter: choose several, each removable -->
+<ip-chip-group selection-mode="multiple" aria-label="Filter by status">
+  <ip-chip value="high" removable>High</ip-chip>
+  <ip-chip value="medium" removable>Medium</ip-chip>
+  <ip-chip value="low" removable>Low</ip-chip>
+</ip-chip-group>
+
+<!-- Removable tags, no selection -->
+<ip-chip-group aria-label="Applied tags">
+  <ip-chip value="design" removable>Design</ip-chip>
+  <ip-chip value="frontend" removable>Frontend</ip-chip>
+</ip-chip-group>
+```
+
+### React
+
+```tsx
+import { IpChipGroup, IpChip } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpChipGroup selectionMode='multiple' aria-label='Tags' onIpChange={(e) => setValue(e.detail.value)}>
+  <IpChip value='a' removable onIpRemove={() => remove('a')}>
+    Design
+  </IpChip>
+  <IpChip value='b' removable onIpRemove={() => remove('b')}>
+    Frontend
+  </IpChip>
+</IpChipGroup>;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpChipGroup, IpChip } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpChipGroup selection-mode="single" aria-label="Priority" @ipChange="onChange">
+    <IpChip value="high">High</IpChip>
+    <IpChip value="low">Low</IpChip>
+  </IpChipGroup>
+</template>
+```
+
+### Angular
+
+```ts
+import { IpChipGroup, IpChip } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-chip-group selection-mode="multiple" aria-label="Filters" (ipChange)="onChange($event)">
+  <ip-chip value="a" [removable]="true" (ipRemove)="remove('a')">Design</ip-chip>
+  <ip-chip value="b" [removable]="true" (ipRemove)="remove('b')">Frontend</ip-chip>
+</ip-chip-group>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-chip-group.js';
+  import '@norconsult-digital-public/isypixel/web-components/ip-chip.js';
+</script>
+
+<ip-chip-group selection-mode="multiple" aria-label="Filter">
+  <ip-chip value="a">A</ip-chip>
+  <ip-chip value="b">B</ip-chip>
+</ip-chip-group>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `ip-chip-group.js` and `ip-chip.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-chip-group.js"></script>
+<script type="module" src="lib/isypixel/components/ip-chip.js"></script>
+
+<ip-chip-group selection-mode="single" aria-label="Priority">
+  <ip-chip value="high">High</ip-chip>
+  <ip-chip value="low">Low</ip-chip>
+</ip-chip-group>
+```
+
+- For multiple selection, set `value` as a property (`string[]`) from your view model — an HTML attribute can only carry a single string.