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

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-date-display/llm.md

@@ -0,0 +1,161 @@
+# ip-date-display
+
+A presentational component that displays a date formatted for reading. It supports a selectable date detail level (`dateFormat`), optional time (`timeFormat`), and a `variant` that sets the text colour: three neutral emphasis levels or three semantic colours. An optional leading `icon` slot lets the consumer add an indicator. Use it for deadlines, completion dates, and other dates that should be emphasised by state.
+
+The component is purely presentational: it is not interactive, emits no events, and does not participate in forms. The `variant` is set by the consumer, not computed internally.
+
+The locale is read reactively from `PixelLocaleService`. There is no `locale` prop. Calling `PixelLocaleService.setLocale(...)` re-renders the date in the new locale automatically.
+
+**Storybook:** https://pixel.isy.no/storybook/?path=/docs/core-ui-ip-date-display-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                                                                                                                                                                                                                            |
+| ------------ | ------ | ----------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `date`       | string | `""`        | ISO 8601 date or datetime                                                     | The date to display, e.g. `"2025-08-19"` or `"2025-08-19T14:30"`. Formatted internally. An empty value renders nothing; an unparseable value renders a localized "Invalid date" fallback.                                              |
+| `dateFormat` | string | `"short"`   | `"short"`, `"medium"`, `"long"`                                               | Date detail level. Maps to the `Intl.DateTimeFormat` `dateStyle` option.                                                                                                                                                               |
+| `timeFormat` | string | `"none"`    | `"none"`, `"short"`, `"medium"`                                               | Whether and how detailed the time is shown. Maps to `Intl.DateTimeFormat` `timeStyle`; `"none"` shows no time. Only applies when `date` has a time component.                                                                          |
+| `variant`    | string | `"primary"` | `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"error"` | Visual treatment. `primary`/`secondary`/`tertiary` are neutral emphasis levels; `success`/`warning`/`error` colour the date. The slotted icon inherits this colour. The semantic colour is generic: use `label` to convey its meaning. |
+| `label`      | string | `""`        | Any string                                                                    | Optional accessible label describing what a semantic variant means, e.g. `"Overdue"` or `"Do not start before"`. Rendered as visually hidden text.                                                                                     |
+
+## Slots
+
+| Slot   | Description                                                                                                              |
+| ------ | ------------------------------------------------------------------------------------------------------------------------ |
+| `icon` | Optional leading icon shown before the date. Decorative (`aria-hidden`); inherits the variant colour via `currentColor`. |
+
+## Events
+
+None. Purely presentational.
+
+## Formatting
+
+The date is formatted with `Intl.DateTimeFormat(PixelLocaleService.getLocale(), { dateStyle, timeStyle })`.
+
+| `dateFormat` / `timeFormat` | `nb-NO`                     | `en-US`                      |
+| --------------------------- | --------------------------- | ---------------------------- |
+| `short` / `none`            | `19.08.2025`                | `8/19/25`                    |
+| `short` / `short`           | `19.08.2025, 14:30`         | `8/19/25, 2:30 PM`           |
+| `long` / `short`            | `19. august 2025 kl. 14:30` | `August 19, 2025 at 2:30 PM` |
+
+- `timeFormat` only has an effect when `date` carries a time component (an ISO datetime such as `2025-08-19T14:30`). A date-only value ignores `timeFormat`.
+- Date-only values are formatted in UTC so a timezone-shifted midnight cannot move the displayed calendar day.
+- An empty `date` renders nothing. A non-empty but unparseable `date` renders a localized "Invalid date" fallback.
+
+## Accessibility
+
+- The date renders inside a `<time datetime="...">` element. The `datetime` attribute reflects the full ISO value passed in `date`, including the time when present.
+- A semantic variant's colour is generic and not conveyed to assistive tech on its own. Set `label` to describe what it means (e.g. "Overdue"); it is announced as visually hidden text. Without a `label`, a semantic colour carries no meaning for screen readers.
+- The slotted `icon` is decorative and marked `aria-hidden`. It reinforces the variant visually but carries no meaning for screen readers.
+- When `date` is unparseable, the fallback renders only the localized "Invalid date" text: neither the slotted `icon` nor a `label` is shown, since neither applies to an error state.
+
+## Localisation
+
+The visible "Invalid date" fallback ships in English and Norwegian (`nb-NO`) and is resolved through `PixelI18nService`, the same mechanism as other Pixel components. Override it with `PixelI18nService.setCustomLanguage({ 'ip-date-display': { ... } })`. The `label` is not localised by the component: the consumer supplies it in the correct language.
+
+| Key           | `en`         | `nb-NO`      |
+| ------------- | ------------ | ------------ |
+| `invalidDate` | Invalid date | Ugyldig dato |
+
+## Design tokens
+
+> The `success`, `warning`, and `error` variants use temporary non-adaptive primitive stand-ins. No contrast-approved semantic tokens for these exist in Figma yet, so suitable `extended/*` shades are used and marked `//TODO` in the SCSS. The final tokens and WCAG contrast are resolved in the post-summer design cleanup.
+
+| SCSS variable                             | Role                                            |
+| ----------------------------------------- | ----------------------------------------------- |
+| `$ip_color_text_primary_black`            | Text colour for `variant="primary"`             |
+| `$ip_color_text_secondary_default`        | Text colour for `variant="secondary"`           |
+| `$ip_color_text_tertiary_default`         | Text colour for `variant="tertiary"`            |
+| `$ip_color_extended_green-950`            | Text colour for `variant="success"` (temporary) |
+| `$ip_color_extended_yellow-950`           | Text colour for `variant="warning"` (temporary) |
+| `$ip_color_extended_red-600`              | Text colour for `variant="error"` (temporary)   |
+| `$ip_typography_body_font_family_default` | Date font family                                |
+| `$ip_typography_body_font_size_small`     | Date font size                                  |
+| `$ip_typography_body_font_weight_default` | Date font weight                                |
+| `$ip_spacing_space_100`                   | Gap between a slotted icon and the date         |
+
+## Usage
+
+### HTML
+
+```js
+import '@norconsult-digital-public/isypixel/web-components/ip-date-display.js';
+```
+
+```html
+<ip-date-display date="2025-08-19" date-format="long" variant="error" label="Overdue">
+  <i slot="icon" class="fas fa-triangle-exclamation"></i>
+</ip-date-display>
+```
+
+### React
+
+```tsx
+import { IpDateDisplay } from '@norconsult-digital-public/isypixel/web-components/react';
+
+<IpDateDisplay date='2025-08-19' dateFormat='long' variant='error' label='Overdue'>
+  <i slot='icon' className='fas fa-triangle-exclamation' />
+</IpDateDisplay>;
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { IpDateDisplay } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
+
+<template>
+  <IpDateDisplay date="2025-08-19" date-format="long" variant="error" label="Overdue">
+    <i slot="icon" class="fas fa-triangle-exclamation" />
+  </IpDateDisplay>
+</template>
+```
+
+### Angular
+
+```ts
+import { IpDateDisplay } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+
+```html
+<ip-date-display date="2025-08-19" date-format="long" variant="error" label="Overdue">
+  <i slot="icon" class="fas fa-triangle-exclamation"></i>
+</ip-date-display>
+```
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import '@norconsult-digital-public/isypixel/web-components/ip-date-display.js';
+</script>
+
+<ip-date-display date="2025-08-19" date-format="long" variant="error" label="Overdue">
+  <i slot="icon" class="fas fa-triangle-exclamation"></i>
+</ip-date-display>
+```
+
+### Blazor
+
+> Attribute names must be **kebab-case** in Blazor HTML.
+
+Copy `ip-date-display.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-date-display.js"></script>
+
+<ip-date-display date="2025-08-19" date-format="long" variant="error" label="Overdue">
+  <i slot="icon" class="fas fa-triangle-exclamation"></i>
+</ip-date-display>
+```
+
+### Set the locale
+
+```ts
+import { PixelLocaleService } from '@norconsult-digital-public/isypixel/web-components/services';
+
+PixelLocaleService.setLocale('nb-NO'); // all mounted ip-date-display elements re-render
+```

package/dist/docs/web-components/services/locale/llm.md

@@ -0,0 +1,62 @@
+# PixelLocaleService
+
+Static service holding the application's active formatting locale. Used by components that format values with `Intl` (dates now; numbers, currency, and relative time later). Independent of `PixelI18nService`: locale owns formatting (an open BCP 47 set), i18n owns translations (a closed language set).
+
+## Import
+
+```ts
+import { PixelLocaleService } from '@norconsult-digital-public/isypixel/web-components/services';
+```
+
+## API
+
+All methods operate on a reactive `@stencil/store`. Calling `setLocale` or `resetLocale` triggers an **automatic re-render** of every mounted Pixel component that reads the locale in `render()`. No page reload, no manual refresh.
+
+| Method        | Signature                   | Description                                                                                                                                                           |
+| ------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `setLocale`   | `(locale: string) => void`  | Sets the active locale (BCP 47, e.g. `'nb-NO'`, `'en-US'`). Expects a valid locale string; the input is not validated at runtime. Re-renders all components using it. |
+| `resetLocale` | `() => void`                | Clears the active locale so formatting follows the runtime/browser locale again. Re-renders all components using it.                                                  |
+| `getLocale`   | `() => string \| undefined` | Returns the current locale. `undefined` means formatting follows the environment.                                                                                     |
+
+## Behaviour
+
+- **Default:** no locale set. Formatting follows the browser/runtime locale (`Intl` called with `undefined`). Call `resetLocale` to return to this state.
+- **Type:** `string`. No closed enum. BCP 47 is an open set; the library does not maintain a list of allowed locales.
+- **Reactivity:** internal `@stencil/store`, same principle as i18n. Components read the locale inside `render()` and re-render automatically on `setLocale` or `resetLocale`.
+
+## Usage examples
+
+### Set the locale
+
+```ts
+import { PixelLocaleService } from '@norconsult-digital-public/isypixel/web-components/services';
+
+PixelLocaleService.setLocale('nb-NO');
+```
+
+### Follow the environment
+
+```ts
+PixelLocaleService.resetLocale();
+```
+
+### Read the current locale
+
+```ts
+const locale = PixelLocaleService.getLocale(); // 'nb-NO' | undefined
+```
+
+### Blazor
+
+Locale is JavaScript-only. Call from a JS interop entry point or a `.js` file loaded in `index.html`:
+
+```js
+import { PixelLocaleService } from '@norconsult-digital-public/isypixel/web-components/services';
+PixelLocaleService.setLocale('nb-NO');
+```
+
+## Notes
+
+- `PixelLocaleService` is intentionally decoupled from `PixelI18nService`. Setting the language does not change the locale, and vice versa. Set both if an app switches its whole UI language.
+- `setLocale` expects a valid BCP 47 string; the input is not validated at runtime. To follow the environment again, call `resetLocale` rather than passing a sentinel value.
+- Reactivity is powered by `@stencil/store`. Components that read `getLocale()` inside `render()` are automatically tracked and re-rendered when `setLocale` or `resetLocale` is called. No manual subscription is required.

package/dist/llm.md

@@ -169,26 +169,30 @@ 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-icon-count`        | Compact inline indicator pairing a slotted icon with a value, e.g. an attachment count or a sensor reading       | `docs/web-components/ip-icon-count/llm.md`        |
-| `ip-main-menu`         | Sidebar navigation wrapper with expanded/auto-hide/collapsed desktop modes and mobile drawer                     | `docs/web-components/ip-main-menu/llm.md`         |
-| `ip-main-menu-toggle`  | Hamburger button for the top bar that opens the `ip-main-menu` mobile drawer via a shared store                  | `docs/web-components/ip-main-menu-toggle/llm.md`  |
-| `ip-main-menu-section` | Semantic section wrapper that groups navigation items with an optional visible label                             | `docs/web-components/ip-main-menu-section/llm.md` |
-| `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-date-display`      | Presentational date display with selectable detail, optional time, a `variant` for neutral emphasis or a semantic colour, and an optional leading icon slot; locale read reactively from `PixelLocaleService` | `docs/web-components/ip-date-display/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
 
-| Service             | Description                                                                                                               | Docs                                       |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
-| `PixelThemeService` | Static service for managing light/dark theme. Persists choice in localStorage                                             | `docs/services/theme-service/llm.md`       |
-| `PixelI18nService`  | Static i18n service for translating built-in component strings. Supports built-in languages and custom language injection | `docs/web-components/services/i18n/llm.md` |
+| Service              | Description                                                                                                                                         | Docs                                         |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| `PixelThemeService`  | Static service for managing light/dark theme. Persists choice in localStorage                                                                       | `docs/services/theme-service/llm.md`         |
+| `PixelI18nService`   | Static i18n service for translating built-in component strings. Supports built-in languages and custom language injection                           | `docs/web-components/services/i18n/llm.md`   |
+| `PixelLocaleService` | Static service holding the active formatting locale for `Intl`-based components (dates now; numbers, currency later). Reactive, decoupled from i18n | `docs/web-components/services/locale/llm.md` |
 
 ## Migration guides