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

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 at a `max-width` (set `--ip-chip-max-width`); 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` | `none`  | 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.

package/dist/docs/web-components/ip-icon-count/llm.md

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

package/dist/llm.md

@@ -169,18 +169,21 @@ In `index.html` `<body>`:
 
 ## Components
 
-| Component              | Description                                                                                                      | Docs                                              |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
-| `ip-button`            | Clickable button with visual variants, loading state, and icon slot                                              | `docs/web-components/ip-button/llm.md`            |
-| `ip-icon-button`       | Circular icon-only button with CSS ripple, visual variants, and loading state                                    | `docs/web-components/ip-icon-button/llm.md`       |
-| `ip-tooltip`           | Tooltip that wraps a trigger and shows non-interactive content on hover, focus, and Escape                       | `docs/web-components/ip-tooltip/llm.md`           |
-| `ip-avatar`            | Theme-aware avatar with image/fallback/initials/silhouette chain, label, ring, loader, corner slots, and tooltip | `docs/web-components/ip-avatar/llm.md`            |
-| `ip-avatar-stack`      | Overlapping stack of `ip-avatar` elements with overflow collapse into a `+N` counter and a combined names label  | `docs/web-components/ip-avatar-stack/llm.md`      |
-| `ip-main-menu`         | Sidebar navigation wrapper with expanded/auto-hide/collapsed desktop modes and mobile drawer                     | `docs/web-components/ip-main-menu/llm.md`         |
-| `ip-main-menu-toggle`  | Hamburger button for the top bar that opens the `ip-main-menu` mobile drawer via a shared store                  | `docs/web-components/ip-main-menu-toggle/llm.md`  |
-| `ip-main-menu-section` | Semantic section wrapper that groups navigation items with an optional visible label                             | `docs/web-components/ip-main-menu-section/llm.md` |
-| `ip-main-menu-group`   | Collapsible group of navigation items with label, icon, and animated chevron                                     | `docs/web-components/ip-main-menu-group/llm.md`   |
-| `ip-main-menu-item`    | Individual navigation item; renders as `<a>` when `href` is provided, otherwise as `<button>`                    | `docs/web-components/ip-main-menu-item/llm.md`    |
+| Component              | Description                                                                                                                                                            | Docs                                              |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `ip-button`            | Clickable button with visual variants, loading state, and icon slot                                                                                                    | `docs/web-components/ip-button/llm.md`            |
+| `ip-icon-button`       | Circular icon-only button with CSS ripple, visual variants, and loading state                                                                                          | `docs/web-components/ip-icon-button/llm.md`       |
+| `ip-tooltip`           | Tooltip that wraps a trigger and shows non-interactive content on hover, focus, and Escape                                                                             | `docs/web-components/ip-tooltip/llm.md`           |
+| `ip-avatar`            | Theme-aware avatar with image/fallback/initials/silhouette chain, label, ring, loader, corner slots, and tooltip                                                       | `docs/web-components/ip-avatar/llm.md`            |
+| `ip-avatar-stack`      | Overlapping stack of `ip-avatar` elements with overflow collapse into a `+N` counter and a combined names label                                                        | `docs/web-components/ip-avatar-stack/llm.md`      |
+| `ip-icon-count`        | Compact inline indicator pairing a slotted icon with a value, e.g. an attachment count or a sensor reading                                                             | `docs/web-components/ip-icon-count/llm.md`        |
+| `ip-chip`              | Presentational status/tag chip with orthogonal fill and border, a leading icon, a collapsed state, and a remove button                                                 | `docs/web-components/ip-chip/llm.md`              |
+| `ip-chip-group`        | Groups `ip-chip` children as split buttons with one model: display, single, or multiple selection, plus per-chip removable, with focus restoration on keyboard removal | `docs/web-components/ip-chip-group/llm.md`        |
+| `ip-main-menu`         | Sidebar navigation wrapper with expanded/auto-hide/collapsed desktop modes and mobile drawer                                                                           | `docs/web-components/ip-main-menu/llm.md`         |
+| `ip-main-menu-toggle`  | Hamburger button for the top bar that opens the `ip-main-menu` mobile drawer via a shared store                                                                        | `docs/web-components/ip-main-menu-toggle/llm.md`  |
+| `ip-main-menu-section` | Semantic section wrapper that groups navigation items with an optional visible label                                                                                   | `docs/web-components/ip-main-menu-section/llm.md` |
+| `ip-main-menu-group`   | Collapsible group of navigation items with label, icon, and animated chevron                                                                                           | `docs/web-components/ip-main-menu-group/llm.md`   |
+| `ip-main-menu-item`    | Individual navigation item; renders as `<a>` when `href` is provided, otherwise as `<button>`                                                                          | `docs/web-components/ip-main-menu-item/llm.md`    |
 
 ## Services
 

package/dist/types/components/ip-chip/ip-chip.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter, JSX } from '../../stencil-public-runtime';
+/**
+ * Presentational chip: a compact status/tag label with a semantic colour, orthogonal fill and border, an optional
+ * leading icon, a collapsed icon-only state, and an optional remove button. It owns no selection logic — when
+ * `ip-chip-group` makes it `interactive`, its body renders as a toggle button whose pressed state the group drives.
+ * The chip only emits `ipRemove`.
+ */
+export declare class IpChip {
+    /** Host element, used to measure the label for truncation. */
+    private host;
+    /** Drives the chip colour (fill and icon). `neutral` is a status-less greyscale chip. */
+    variant: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'brand';
+    /** Border style. */
+    borderStyle: 'none' | 'solid' | 'dashed';
+    /** Chip size. */
+    size: 'small' | 'medium' | 'large';
+    /** Passive identity read by `ip-chip-group`. Has no effect when the chip is used standalone. */
+    value: string;
+    /** Makes the chip body a toggle button. Set by `ip-chip-group` in single/multiple mode; no effect standalone. */
+    interactive: boolean;
+    /** Visual selected state. Set by `ip-chip-group`; drives `aria-pressed` on the interactive body. */
+    selected: boolean;
+    /** Hides the text visually and shows only the icon. The text is kept for screen readers. Requires the `icon` slot. */
+    collapsed: boolean;
+    /** Shows a built-in remove button (X) as the chip's trailing action. */
+    removable: boolean;
+    /** Accessible label for the remove button. The chip text is appended where available, e.g. "Remove High". */
+    removeLabel: string;
+    /** Disables the chip and its remove button. */
+    disabled: boolean;
+    /** Tracks whether the `icon` slot has assigned content, to render the icon wrapper only when needed. */
+    private hasIcon;
+    /** Plain-text content of the chip, used for the remove button's accessible name and the tooltip. */
+    private labelText;
+    /** Whether the label is visually truncated, so the full text is offered in a tooltip. */
+    private isTruncated;
+    /** Emitted when the built-in remove button is activated. */
+    removeEvent: EventEmitter<void>;
+    /** Observes the label so truncation is re-evaluated when the chip is resized. */
+    private resizeObserver;
+    /** The label element currently observed, so the observer can follow it when a render recreates the label. */
+    private observedLabel;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /** Moves focus to a chip segment, falling back to the other one when the requested segment is not focusable. */
+    setFocus(segment?: 'primary' | 'remove'): Promise<void>;
+    /** Records whether the icon slot has content so the icon wrapper is only rendered when an icon is present. */
+    private handleIconSlotChange;
+    /** Captures the chip's text so the remove button can be named and the full text shown in the tooltip. */
+    private handleLabelSlotChange;
+    /** Emits ipRemove and stops the click from reaching the group, so removing never also toggles selection. */
+    private handleRemove;
+    /** Keeps the observer on the current label element — a render can recreate it (the body swaps span/button). */
+    private observeTruncation;
+    /** Flags the label as truncated when its content overflows the available width. */
+    private measureTruncation;
+    /** Accessible name for the remove button: the label with the chip text appended, e.g. "Remove High". */
+    private get removeAccessibleName();
+    /** The leading icon, wrapped only when it has content so an empty wrapper is never rendered. */
+    private renderIcon;
+    /** The chip body: a toggle button when the group made it interactive, otherwise a presentational span. */
+    private renderBody;
+    /** The trailing remove button — an always-focusable action independent of the chip body. */
+    private renderRemove;
+    render(): JSX.Element;
+}