npm - @norconsult-digital-public/isypixel - Versions diffs - 2.0.2-canary.3 → 2.0.2-canary.4 - Mend

@norconsult-digital-public/isypixel 2.0.2-canary.3 → 2.0.2-canary.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/LICENSE.md CHANGED Viewed

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

package/dist/docs/web-components/ip-icon-button/llm.md ADDED Viewed

@@ -0,0 +1,113 @@
+# ip-icon-button
+A circular icon-only button with a CSS ripple on click and a built-in tooltip on hover. Available in five visual variants shared with `ip-button`, plus two transparent variants (`transparentOnLight`/`transparentOnDark`) for use on surfaces that do not follow the global theme. Requires a `label` attribute for screen reader accessibility — `label` is also used as the tooltip text by default.
+## Attributes
+| Attribute            | Type    | Default     | Allowed values                                                                                                                  | Description                                                                                                                                                                    |
+| -------------------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `variant`            | string  | `"primary"` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"brand"` \| `"destructive"` \| `"transparentOnLight"` \| `"transparentOnDark"` | Visual variant of the button. The two transparent variants are interim placeholders used internally by `ip-main-menu` and may change when the dedicated token family lands.    |
+| `size`               | string  | `"medium"`  | `"small"` \| `"medium"` \| `"large"`                                                                                            | Controls the size of the button. Affects padding and icon size.                                                                                                                |
+| `disabled`           | boolean | `false`     | —                                                                                                                               | Disables the button. Also set implicitly when `loading` is `true`.                                                                                                             |
+| `loading`            | boolean | `false`     | —                                                                                                                               | Replaces the icon with a spinner and disables interaction. Renders a screen-reader-only "Loading..." text.                                                                     |
+| `type`               | string  | `"button"`  | `"button"` \| `"submit"` \| `"reset"`                                                                                           | Controls form behaviour. Defaults to `"button"` to prevent accidental form submission.                                                                                         |
+| `label`              | string  | `""`        | —                                                                                                                               | **Required.** Sets `aria-label` for screen readers and is used as the default tooltip text. When empty, the tooltip is implicitly hidden and a development warning is logged.  |
+| `disableTooltip`     | boolean | `false`     | —                                                                                                                               | Hides the built-in tooltip. Useful when the button is already described by surrounding context.                                                                                |
+| `tooltipSize`        | string  | —           | `"small"` \| `"medium"` \| `"large"`                                                                                            | Overrides the tooltip size. When unset, the tooltip inherits the button's `size`.                                                                                              |
+| `tooltipPosition`    | string  | —           | `"top"` \| `"right"` \| `"bottom"` \| `"left"`                                                                                  | Position of the tooltip relative to the button. When unset, the tooltip uses its own default (`"top"`).                                                                        |
+| `tooltipVariant`     | string  | `"default"` | `"default"` \| `"onLight"` \| `"onDark"`                                                                                        | Color variant of the tooltip. `default` adapts to the active theme. Use `"onLight"`/`"onDark"` when the button sits on a surface whose color does not follow the global theme. |
+| `tooltipHideOnClick` | boolean | `true`      | —                                                                                                                               | When `false`, clicking the button does not dismiss the tooltip. Use for toggle buttons where the tooltip text updates on click (e.g. collapse/expand, pin/unpin).              |
+| `aria-expanded`      | string  | `null`      | `"true"` \| `"false"`                                                                                                           | Property name: `expanded`. Forwards `aria-expanded` to the inner `<button>` for disclosure patterns (e.g. menu toggles). When `null` (default) the attribute is not rendered.  |
+## Slots
+| Slot      | Description                                                                                  |
+| --------- | -------------------------------------------------------------------------------------------- |
+| `icon`    | The icon element to display. Hidden when `loading` is `true`. Typically an `<i>` or `<svg>`. |
+| `tooltip` | Optional HTML override for the tooltip content. When omitted, the `label` value is used.     |
+## Size tokens
+| Size     | Padding (all sides)     | Icon size                            |
+| -------- | ----------------------- | ------------------------------------ |
+| `small`  | `$ip_spacing_space_100` | `$ip_iconography_size_small` (18px)  |
+| `medium` | `$ip_spacing_space_125` | `$ip_iconography_size_medium` (20px) |
+| `large`  | `$ip_spacing_space_150` | `$ip_iconography_size_large` (22px)  |
+## Color tokens
+| Token                                                                 | Description                                            |
+| --------------------------------------------------------------------- | ------------------------------------------------------ |
+| `$ip_color_icon_button_background_primary_default`                    | Primary background, default state                      |
+| `$ip_color_icon_button_background_primary_hover`                      | Primary background, hover state                        |
+| `$ip_color_icon_button_background_primary_active`                     | Primary background, active state                       |
+| `$ip_color_button_background_[variant]_default/hover/active/disabled` | Background for secondary, tertiary, brand, destructive |
+| `$ip_color_button_icon_[variant]_default`                             | Icon color, default state                              |
+| `$ip_color_button_icon_[variant]_disabled`                            | Icon color, disabled state                             |
+| `$ip_color_button_focus_default`                                      | Focus outline color                                    |
+## Usage examples
+### HTML
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+<!-- With HTML tooltip override -->
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+  <span slot="tooltip">Save <strong>document</strong></span>
+</ip-icon-button>
+```
+### React
+```tsx
+import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/react';
+<IpIconButton label='Save' variant='primary'>
+  <i slot='icon' className='fas fa-floppy-disk' />
+</IpIconButton>;
+```
+### Vue
+```html
+<IpIconButton label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk" />
+</IpIconButton>
+```
+### Angular
+```ts
+import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```
+### Svelte
+```html
+<script>
+  import '@norconsult-digital-public/isypixel/web-components/ip-icon-button.js';
+</script>
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```
+### Blazor
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```

package/dist/docs/web-components/ip-main-menu/llm.md ADDED Viewed

@@ -0,0 +1,219 @@
+# ip-main-menu
+Outer sidebar navigation wrapper for ISY applications. Manages three desktop display modes (expanded, auto-hide, collapsed) and a full-height mobile overlay drawer. Must be composed with `ip-main-menu-section`, `ip-main-menu-group`, and `ip-main-menu-item`.
+> **Opening the drawer on mobile:** The mobile drawer is opened by the separate `ip-main-menu-toggle` component, placed in your top bar. The two communicate through a shared store — no wiring needed. See `ip-main-menu-toggle/llm.md`.
+> **Layout requirement:** On desktop, the parent element must use `display: flex` or `display: grid` with a defined height, otherwise the sidebar will not fill the viewport. Example: `<div style="display:flex; height:100vh;"><ip-main-menu>...</ip-main-menu><main>...</main></div>`. At the mobile breakpoint the nav becomes a fixed overlay drawer and the host collapses to take no space in the layout.
+> **Breakpoint:** Mobile drawer behaviour activates at or below the `mobileBreakpoint` prop (default `1024px`). The value is shared through the store so `ip-main-menu-toggle` switches at the exact same width with no extra wiring. Below 768px the drawer spans the full viewport width (a fixed phone-size breakpoint, not configurable). No breakpoint design token is available yet; these values are hardcoded.
+> **Single-instance:** Use one `<ip-main-menu>` per page. The desktop mode and mobile drawer state are kept in a module-level store, so multiple instances on the same page will share state and stay in sync — there is no per-instance isolation.
+## Attributes
+| Attribute          | Type                                       | Default      | Allowed values                             | Description                                                                                                                                                                      |
+| ------------------ | ------------------------------------------ | ------------ | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `heading`          | `string`                                   | —            | Any string                                 | Required. App name shown in expanded mode. Used as `aria-label` on `<nav>` and as `aria-label` on the brand element.                                                             |
+| `mode`             | `'expanded' \| 'auto-hide' \| 'collapsed'` | `'expanded'` | `'expanded'`, `'auto-hide'`, `'collapsed'` | Desktop display mode. Sets initial state; internal state tracks user interactions. Not persisted across refreshes or browser sessions — persist via `ipModeChange` (see below).  |
+| `brandHref`        | `string`                                   | —            | Any URL string                             | Optional. When set, the brand area (logo + heading) renders as an `<a>` linking to this URL. Without it, it renders as a `<button>` that emits `ipBrandClick`.                   |
+| `expandDelay`      | `number`                                   | `300`        | Any non-negative number (ms)               | Hover-intent delay before `auto-hide` expands. Increase to ignore longer drift-overs, decrease for snappier expansion. Only applies in `auto-hide` mode.                         |
+| `collapseDelay`    | `number`                                   | `300`        | Any non-negative number (ms)               | Grace period before `auto-hide` collapses after the mouse leaves. Increase to forgive accidental cursor slips, decrease for snappier collapse. Only applies in `auto-hide` mode. |
+| `mobileBreakpoint` | `string`                                   | `'1024px'`   | Any CSS length (e.g. `1024px`, `64rem`)    | Viewport width at or below which the menu becomes a mobile drawer and `ip-main-menu-toggle` appears. Shared through the store so both components switch at the same width.       |
+### Desktop modes
+| Mode        | Width | Behaviour                                 |
+| ----------- | ----- | ----------------------------------------- |
+| `expanded`  | 230px | Full labels and icons visible.            |
+| `auto-hide` | 64px  | Icons only. Expands temporarily on hover. |
+| `collapsed` | 64px  | Icons only. No hover expansion.           |
+Mode transitions:
+- **expanded → auto-hide**: click pin button
+- **expanded → collapsed**: click collapse button
+- **collapsed → expanded**: click collapse button (rotated 180°)
+- **auto-hide → expanded**: click pin/unpin button
+> The collapse button is only shown in `expanded` and `collapsed` modes. The pin button is only shown in `expanded` and `auto-hide` modes.
+## Slots
+| Slot            | Description                                                                                                                                                                                                                                                                                                                       |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `logo`          | Custom logo shown in collapsed/auto-hide mode. Falls back to the built-in ISY logo if omitted.                                                                                                                                                                                                                                    |
+| `default`       | Main navigation content (`ip-main-menu-section`, `ip-main-menu-group`, `ip-main-menu-item`).                                                                                                                                                                                                                                      |
+| `bottom`        | Content pinned to the bottom of the sidebar (e.g. user profile, logout).                                                                                                                                                                                                                                                          |
+| `icon-close`    | Mobile drawer close icon. Default: Font Awesome Free `xmark` (solid). Replace by slotting your own.                                                                                                                                                                                                                               |
+| `icon-pin`      | Desktop pin button icon — shown when mode is `expanded`. Default: Font Awesome Free `thumbtack` (solid). Replace by slotting your own.                                                                                                                                                                                            |
+| `icon-unpin`    | Desktop pin button icon — shown when mode is `auto-hide`. Default: same `thumbtack` SVG as `icon-pin`, rotated 45° via CSS — identical size, no clipping. The intended design icon is FA Pro `thumbtack-angle` (sharp regular); inject it through this slot when a Pro license is available (slotted icons are not auto-rotated). |
+| `icon-collapse` | Desktop collapse/expand button icon. Rotates 180° based on mode. Default: Font Awesome Free `chevron-left` (solid). Replace by slotting your own.                                                                                                                                                                                 |
+> **Icon fallbacks:** Default SVGs are inlined from Font Awesome Free 7.2.0 (CC BY 4.0 — see LICENSE.md). Each fallback is a separate export in `icons.ts`, so any default a consumer overrides via the matching `icon-*` slot is tree-shaken from the bundle.
+## Injecting icons
+ISY applications use Font Awesome per the design system, and the bundled fallbacks are already FA Free SVGs. Slot injection is therefore only needed in two cases:
+**1. The unpin icon (recommended when an FA Pro license is available).** The intended design icon for `icon-unpin` is [`thumbtack-angle`](https://fontawesome.com/icons/sharp/regular/thumbtack-angle) (sharp regular), which is FA Pro and cannot be bundled for license reasons. The built-in fallback approximates it with the Free `thumbtack` rotated 45°. Inject the intended icon when the consuming application has a Pro license:
+```html
+<ip-main-menu heading="My Application" brand-href="/">
+  <i slot="icon-unpin" class="fa-sharp fa-regular fa-thumbtack-angle"></i>
+</ip-main-menu>
+```
+**2. A different icon library.** If the application does not use Font Awesome, replace all four control icons:
+```html
+<ip-main-menu heading="My Application" brand-href="/">
+  <span slot="icon-close">...</span>
+  <span slot="icon-pin">...</span>
+  <span slot="icon-unpin">...</span>
+  <span slot="icon-collapse">...</span>
+</ip-main-menu>
+```
+The same pattern applies in all frameworks: slot the element into the matching named slot.
+## Events
+| Event                | Payload                                                 | Description                                                                                          |
+| -------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `ipModeChange`       | `CustomEvent<'expanded' \| 'auto-hide' \| 'collapsed'>` | Fires when the user changes desktop mode.                                                            |
+| `ipMobileOpenChange` | `CustomEvent<boolean>`                                  | Fires when the mobile drawer opens or closes. Use this to lock body scroll.                          |
+| `ipBrandClick`       | `CustomEvent<void>`                                     | Fires when the brand area is clicked and `brandHref` is not set. Use for SPA client-side navigation. |
+### Persisting mode across sessions
+The mode lives in memory only; refreshing the page resets it to the `mode` prop. Persist it yourself until a dedicated menu state persistence service is added to Pixel:
+```javascript
+const nav = document.querySelector('ip-main-menu');
+nav.mode = localStorage.getItem('nav-mode') ?? 'expanded';
+nav.addEventListener('ipModeChange', (e) => {
+  localStorage.setItem('nav-mode', e.detail);
+});
+```
+## Design tokens
+| Token                                           | Role                                                                                |
+| ----------------------------------------------- | ----------------------------------------------------------------------------------- |
+| `ip_color_menu_main_background_primary_default` | Sidebar background                                                                  |
+| `ip_color_button_focus_default`                 | Focus outline on control buttons (interim until a menu-specific focus token exists) |
+> **Token gaps (flagged to design team):**
+>
+> - Text/icon colour tokens for sidebar controls (`ip_color_menu_main_*_text`), heading, and logo
+> - Control button hover background and scrollbar colours (hardcoded with `//TODO:` comments)
+> - Width tokens (230px expanded, 64px collapsed)
+> - Mobile breakpoint token (drawer breakpoint defaults to 1024px via `mobileBreakpoint`; full-width phone breakpoint hardcoded to 768px)
+> - Mobile backdrop overlay colour token
+## Usage examples
+### HTML
+```html
+<!-- With brandHref — brand area renders as <a> -->
+<div style="display:flex; height:100vh;">
+  <ip-main-menu heading="My Application" brand-href="/">
+    <ip-main-menu-section label="Main">
+      <ip-main-menu-item label="Dashboard" active>
+        <svg slot="icon" ...></svg>
+      </ip-main-menu-item>
+    </ip-main-menu-section>
+    <ip-main-menu-item label="Settings" slot="bottom">
+      <svg slot="icon" ...></svg>
+    </ip-main-menu-item>
+  </ip-main-menu>
+  <main>...</main>
+</div>
+<!-- Without brandHref — brand area renders as <button>, handle ipBrandClick for SPA navigation -->
+<ip-main-menu heading="My Application" id="nav"></ip-main-menu>
+<script>
+  document.getElementById('nav').addEventListener('ipBrandClick', () => router.navigate('/'));
+</script>
+```
+### React
+```tsx
+import { IpMainMenu, IpMainMenuSection, IpMainMenuItem } from '@norconsult-digital-public/isypixel/web-components/react';
+// href-based navigation
+<IpMainMenu heading='My Application' brandHref='/'>
+  <IpMainMenuSection label='Main'>
+    <IpMainMenuItem label='Dashboard' active />
+  </IpMainMenuSection>
+</IpMainMenu>
+// SPA / client-side navigation
+<IpMainMenu heading='My Application' onIpBrandClick={() => navigate('/')}>
+  ...
+</IpMainMenu>
+```
+### Vue
+```vue
+<!-- href-based -->
+<IpMainMenu heading="My Application" brand-href="/">
+  <IpMainMenuSection label="Main">
+    <IpMainMenuItem label="Dashboard" :active="true" />
+  </IpMainMenuSection>
+</IpMainMenu>
+<!-- SPA -->
+<IpMainMenu heading="My Application" @ip-brand-click="router.push('/')">
+  ...
+</IpMainMenu>
+```
+### Angular
+```html
+<!-- href-based -->
+<ip-main-menu heading="My Application" brandHref="/">
+  <ip-main-menu-section label="Main">
+    <ip-main-menu-item label="Dashboard" [active]="true"></ip-main-menu-item>
+  </ip-main-menu-section>
+</ip-main-menu>
+<!-- SPA -->
+<ip-main-menu heading="My Application" (ipBrandClick)="router.navigate(['/'])"> </ip-main-menu>
+```
+### Svelte
+```svelte
+<!-- href-based -->
+<IpMainMenu heading="My Application" brandHref="/">
+  <IpMainMenuSection label="Main">
+    <IpMainMenuItem label="Dashboard" active />
+  </IpMainMenuSection>
+</IpMainMenu>
+<!-- SPA -->
+<IpMainMenu heading="My Application" on:ipBrandClick={() => goto('/')}>
+  ...
+</IpMainMenu>
+```
+### Blazor
+```razor
+<!-- href-based -->
+<ip-main-menu heading="My Application" brand-href="/">
+  <ip-main-menu-section label="Main">
+    <ip-main-menu-item label="Dashboard" active="true"></ip-main-menu-item>
+  </ip-main-menu-section>
+</ip-main-menu>
+<!-- SPA -->
+<ip-main-menu heading="My Application" @onipBrandClick="NavigateHome">
+</ip-main-menu>
+```

package/dist/docs/web-components/ip-main-menu-group/llm.md ADDED Viewed

@@ -0,0 +1,114 @@
+# ip-main-menu-group
+Collapsible group of navigation items with a label, optional icon, and an animated chevron. The chevron rotates 180° on open/close. In collapsed mode the label and chevron are hidden; a tooltip appears on hover/focus.
+> **Note:** This component must be used inside an `ip-main-menu`.
+## Attributes
+| Attribute | Type      | Default | Allowed values  | Description                                                                                                                                                                                                                                               |
+| --------- | --------- | ------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`   | `string`  | —       | Any string      | Required. Group label in expanded mode. Used as accessible name and tooltip in collapsed mode.                                                                                                                                                            |
+| `active`  | `boolean` | `false` | `true`, `false` | Whether any child item is active. Applies selected styling to the group trigger.                                                                                                                                                                          |
+| `open`    | `boolean` | `false` | `true`, `false` | Initial expanded state. Internal state takes over after first interaction (uncontrolled pattern). Not persisted across refreshes or browser sessions — listen to `ipOpenChange` to persist. A menu state persistence service may be added to Pixel later. |
+## Slots
+| Slot           | Description                                                                           |
+| -------------- | ------------------------------------------------------------------------------------- |
+| `default`      | `ip-main-menu-item` children.                                                         |
+| `icon`         | Icon displayed to the left of the label.                                              |
+| `icon-chevron` | Chevron icon. Default: inline SVG arrow. Rotates 180° via CSS transition when `open`. |
+> **Custom chevron:** Slot `icon-chevron` to replace the built-in arrow, e.g. `<i slot="icon-chevron" class="fa-solid fa-chevron-down"></i>`. The slotted icon rotates 180° on open/close just like the default.
+## Events
+| Event          | Payload                | Description                                           |
+| -------------- | ---------------------- | ----------------------------------------------------- |
+| `ipOpenChange` | `CustomEvent<boolean>` | Fires when the user toggles the group open or closed. |
+## Design tokens
+| Token                                                               | Role                                                                    |
+| ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `ip_color_menu_main_item_background_primary_default`                | Group trigger background (default)                                      |
+| `ip_color_menu_main_group_item_background_primary_default`          | Group trigger background (open) and child item background               |
+| `ip_color_menu_main_group_item_background_primary_hover`            | Group trigger background (hover)                                        |
+| `ip_color_menu_main_group_item_background_primary_active`           | Group trigger background (pressed)                                      |
+| `ip_color_menu_main_group_item_background_primary_selected_default` | Group trigger background when `active`                                  |
+| `ip_color_menu_main_group_item_background_primary_selected_hover`   | Active group trigger background (hover)                                 |
+| `ip_color_menu_main_group_item_background_primary_selected_active`  | Active group trigger background (pressed)                               |
+| `ip_color_menu_main_item_vertical_divider_primary_default`          | Left-border accent on active group trigger                              |
+| `ip_color_button_focus_default`                                     | Focus outline colour (interim until a menu-specific focus token exists) |
+> **Token gaps:** Text/icon colour tokens for group items are not yet available. Hardcoded values are used with `// TODO` comments.
+## Usage examples
+### HTML
+```html
+<ip-main-menu heading="My App">
+  <ip-main-menu-group label="Reports">
+    <svg slot="icon" ...></svg>
+    <ip-main-menu-item label="Monthly"></ip-main-menu-item>
+    <ip-main-menu-item label="Yearly"></ip-main-menu-item>
+  </ip-main-menu-group>
+</ip-main-menu>
+```
+### React
+```tsx
+<IpMainMenu heading='My App'>
+  <IpMainMenuGroup label='Reports' onIpOpenChange={(e) => console.log(e.detail)}>
+    <svg slot='icon' />
+    <IpMainMenuItem label='Monthly' />
+  </IpMainMenuGroup>
+</IpMainMenu>
+```
+### Vue
+```vue
+<IpMainMenu heading="My App">
+  <IpMainMenuGroup label="Reports" @ip-open-change="handleChange">
+    <svg slot="icon" />
+    <IpMainMenuItem label="Monthly" />
+  </IpMainMenuGroup>
+</IpMainMenu>
+```
+### Angular
+```html
+<ip-main-menu heading="My App">
+  <ip-main-menu-group label="Reports" (ipOpenChange)="handleChange($event)">
+    <svg slot="icon"></svg>
+    <ip-main-menu-item label="Monthly"></ip-main-menu-item>
+  </ip-main-menu-group>
+</ip-main-menu>
+```
+### Svelte
+```svelte
+<IpMainMenu heading="My App">
+  <IpMainMenuGroup label="Reports" on:ipOpenChange={handleChange}>
+    <svg slot="icon" />
+    <IpMainMenuItem label="Monthly" />
+  </IpMainMenuGroup>
+</IpMainMenu>
+```
+### Blazor
+```razor
+<ip-main-menu heading="My App">
+  <ip-main-menu-group label="Reports">
+    <svg slot="icon"></svg>
+    <ip-main-menu-item label="Monthly"></ip-main-menu-item>
+  </ip-main-menu-group>
+</ip-main-menu>
+```

package/dist/docs/web-components/ip-main-menu-item/llm.md ADDED Viewed

@@ -0,0 +1,104 @@
+# ip-main-menu-item
+Individual navigation item for use inside `ip-main-menu`. Renders as an `<a>` when `href` is provided, otherwise as a `<button>`. In collapsed mode the label is hidden and a tooltip appears on hover/focus.
+> **Note:** This component must be used inside an `ip-main-menu` to receive the CSS custom properties that control collapsed/auto-hide behaviour.
+> **Mobile drawer:** Clicking an item automatically closes the `ip-main-menu` mobile drawer through the shared store, so navigation in drawer mode needs no extra wiring.
+## Attributes
+| Attribute  | Type                  | Default     | Allowed values          | Description                                                                            |
+| ---------- | --------------------- | ----------- | ----------------------- | -------------------------------------------------------------------------------------- |
+| `label`    | `string`              | —           | Any string              | Required. Item text in expanded mode. Used as accessible name and tooltip text.        |
+| `active`   | `boolean`             | `false`     | `true`, `false`         | Marks this item as the current page. Sets `aria-current="page"` automatically.         |
+| `href`     | `string \| undefined` | `undefined` | Any URL string          | If set, renders as `<a>`. Otherwise renders as `<button>`.                             |
+| `target`   | `string \| undefined` | `undefined` | `_blank`, `_self`, etc. | Forwarded to `<a target>`. Only relevant when `href` is set.                           |
+| `disabled` | `boolean`             | `false`     | `true`, `false`         | Disables interaction. On `<a>` uses `aria-disabled` + `tabindex="-1"` + blocked click. |
+## Slots
+| Slot   | Description                              |
+| ------ | ---------------------------------------- |
+| `icon` | Icon displayed to the left of the label. |
+## Design tokens
+| Token                                                         | Role                                             |
+| ------------------------------------------------------------- | ------------------------------------------------ |
+| `ip_color_menu_main_item_background_primary_default`          | Item background (default)                        |
+| `ip_color_menu_main_item_background_primary_hover`            | Item background (hover)                          |
+| `ip_color_menu_main_item_background_primary_active`           | Item background (pressed)                        |
+| `ip_color_menu_main_item_background_primary_selected_default` | Item background (active/selected)                |
+| `ip_color_menu_main_item_background_primary_selected_hover`   | Selected item background (hover)                 |
+| `ip_color_menu_main_item_background_primary_selected_active`  | Selected item background (pressed)               |
+| `ip_color_menu_main_item_vertical_divider_primary_default`    | Left-border accent on active item; focus outline |
+> **Token gaps:** Text/icon colour tokens for `menu_main` items are not yet available. Hardcoded values are used with `// TODO` comments.
+## Usage examples
+### HTML
+```html
+<ip-main-menu heading="My App">
+  <ip-main-menu-item label="Dashboard" active>
+    <svg slot="icon" ...></svg>
+  </ip-main-menu-item>
+  <ip-main-menu-item label="Settings" href="/settings">
+    <svg slot="icon" ...></svg>
+  </ip-main-menu-item>
+</ip-main-menu>
+```
+### React
+```tsx
+import { IpMainMenu, IpMainMenuItem } from '@norconsult-digital-public/isypixel/web-components/react';
+<IpMainMenu heading='My App'>
+  <IpMainMenuItem label='Dashboard' active>
+    <svg slot='icon' />
+  </IpMainMenuItem>
+</IpMainMenu>;
+```
+### Vue
+```vue
+<IpMainMenu heading="My App">
+  <IpMainMenuItem label="Dashboard" :active="true">
+    <svg slot="icon" />
+  </IpMainMenuItem>
+</IpMainMenu>
+```
+### Angular
+```html
+<ip-main-menu heading="My App">
+  <ip-main-menu-item label="Dashboard" [active]="true">
+    <svg slot="icon"></svg>
+  </ip-main-menu-item>
+</ip-main-menu>
+```
+### Svelte
+```svelte
+<IpMainMenu heading="My App">
+  <IpMainMenuItem label="Dashboard" active>
+    <svg slot="icon" />
+  </IpMainMenuItem>
+</IpMainMenu>
+```
+### Blazor
+```razor
+<ip-main-menu heading="My App">
+  <ip-main-menu-item label="Dashboard" active="true">
+    <svg slot="icon"></svg>
+  </ip-main-menu-item>
+</ip-main-menu>
+```