@scania/tegel-lite 0.0.3-rules-beta.7 → 0.1.0

package/AGENTS.md

@@ -1,2045 +0,0 @@
-# @scania/tegel-lite — AI Coding Rules
-
-> Auto-generated by `npm run generate:ai-rules`. Do not edit manually.
-
-> Generated: 2026-02-17
-
-## 01-design-tokens
-
-# Design Tokens & Variables
-
-## RULE: ALWAYS use design tokens instead of hardcoded values.
-
-## Primitive Color Tokens (from scania-variables.css)
-
-### Blue (Primary Brand)
-
-| Token                     | Value     |
-| ------------------------- | --------- |
-| `--scania-color-blue-50`  | `#d8dde5` |
-| `--scania-color-blue-100` | `#bacde8` |
-| `--scania-color-blue-200` | `#87afe8` |
-| `--scania-color-blue-300` | `#4a89f3` |
-| `--scania-color-blue-400` | `#2a6ecf` |
-| `--scania-color-blue-500` | `#2058a8` |
-| `--scania-color-blue-600` | `#16417f` |
-| `--scania-color-blue-700` | `#0f3263` |
-| `--scania-color-blue-800` | `#041e42` |
-| `--scania-color-blue-900` | `#001533` |
-
-### Red (Secondary Brand / Danger)
-
-| Token                    | Value     |
-| ------------------------ | --------- |
-| `--scania-color-red-50`  | `#ffdfe3` |
-| `--scania-color-red-100` | `#ffb9b8` |
-| `--scania-color-red-200` | `#fc8a88` |
-| `--scania-color-red-300` | `#ea4851` |
-| `--scania-color-red-400` | `#d1001b` |
-| `--scania-color-red-500` | `#b20018` |
-| `--scania-color-red-600` | `#8a0012` |
-| `--scania-color-red-700` | `#6c0011` |
-| `--scania-color-red-800` | `#480008` |
-| `--scania-color-red-900` | `#350004` |
-
-### Green (Success)
-
-| Token                      | Value     |
-| -------------------------- | --------- |
-| `--scania-color-green-50`  | `#d3eee7` |
-| `--scania-color-green-100` | `#9bd9c2` |
-| `--scania-color-green-200` | `#65bda5` |
-| `--scania-color-green-300` | `#009e7e` |
-| `--scania-color-green-400` | `#008064` |
-| `--scania-color-green-500` | `#00664f` |
-| `--scania-color-green-600` | `#004c3b` |
-| `--scania-color-green-700` | `#0a382e` |
-| `--scania-color-green-800` | `#00251b` |
-| `--scania-color-green-900` | `#001a12` |
-
-### Yellow (Warning)
-
-| Token                       | Value     |
-| --------------------------- | --------- |
-| `--scania-color-yellow-50`  | `#f9eec3` |
-| `--scania-color-yellow-100` | `#f8e596` |
-| `--scania-color-yellow-200` | `#f4d65d` |
-| `--scania-color-yellow-300` | `#f1c21b` |
-| `--scania-color-yellow-400` | `#eaad06` |
-| `--scania-color-yellow-500` | `#b87c14` |
-| `--scania-color-yellow-600` | `#975717` |
-| `--scania-color-yellow-700` | `#6b3b10` |
-| `--scania-color-yellow-800` | `#4d260a` |
-| `--scania-color-yellow-900` | `#361b07` |
-
-### Grey (Neutral)
-
-| Token                      | Value     |
-| -------------------------- | --------- |
-| `--scania-color-grey-00`   | `#fff`    |
-| `--scania-color-grey-50`   | `#f6f7f9` |
-| `--scania-color-grey-100`  | `#edeff3` |
-| `--scania-color-grey-150`  | `#e0e5eb` |
-| `--scania-color-grey-200`  | `#d1d7e0` |
-| `--scania-color-grey-250`  | `#b4becd` |
-| `--scania-color-grey-300`  | `#93a2b7` |
-| `--scania-color-grey-350`  | `#7e90a9` |
-| `--scania-color-grey-400`  | `#6e829f` |
-| `--scania-color-grey-500`  | `#5f728c` |
-| `--scania-color-grey-600`  | `#4e5e75` |
-| `--scania-color-grey-700`  | `#3a4554` |
-| `--scania-color-grey-800`  | `#242c37` |
-| `--scania-color-grey-850`  | `#1c222b` |
-| `--scania-color-grey-900`  | `#15181d` |
-| `--scania-color-grey-950`  | `#0e1013` |
-| `--scania-color-grey-1000` | `#000`    |
-
-## Semantic Color Tokens (Light Mode)
-
-Use these instead of primitive colors in layouts:
-
-### Backgrounds
-
-| Token                                                                      | Usage                                 |
-| -------------------------------------------------------------------------- | ------------------------------------- |
-| `--color-background-base`                                                  | Page/app base background              |
-| `--color-background-layer-01`                                              | Primary card/section background       |
-| `--color-background-layer-02`                                              | Secondary/nested background           |
-| `--color-background-layer-03`                                              | Third-level nested background         |
-| `--color-background-overlay`                                               | Modal/drawer backdrop                 |
-| `--color-background-top`                                                   | Top-level surface                     |
-| `--color-background-accent-primary-default`                                | Primary button background             |
-| `--color-background-accent-primary-hover`                                  | Primary button hover                  |
-| `--color-background-accent-primary-pressed`                                | Primary button pressed                |
-| `--color-background-accent-primary-disabled`                               | Disabled button background            |
-| `--color-background-accent-danger-default`                                 | Danger action background              |
-| `--color-background-surface-100` through `--color-background-surface-1000` | Surface levels for subtle backgrounds |
-
-### Text (Foreground)
-
-| Token                                    | Usage                  |
-| ---------------------------------------- | ---------------------- |
-| `--color-foreground-text-strong`         | Primary text, headings |
-| `--color-foreground-text-defined`        | Secondary text, labels |
-| `--color-foreground-text-soft`           | Tertiary text          |
-| `--color-foreground-text-subtle`         | Placeholder, hint text |
-| `--color-foreground-text-disabled`       | Disabled text          |
-| `--color-foreground-text-accent-default` | Link text              |
-| `--color-foreground-text-accent-visited` | Visited link           |
-| `--color-foreground-text-brand`          | Brand-colored text     |
-
-### Borders
-
-| Token                                    | Usage                  |
-| ---------------------------------------- | ---------------------- |
-| `--color-foreground-border-strong`       | Strong visible borders |
-| `--color-foreground-border-soft`         | Default input borders  |
-| `--color-foreground-border-subtle`       | Hover borders          |
-| `--color-foreground-border-discrete`     | Divider lines          |
-| `--color-foreground-border-accent-focus` | Focus ring color       |
-| `--color-foreground-border-disabled`     | Disabled borders       |
-
-### Icons
-
-| Token                              | Usage           |
-| ---------------------------------- | --------------- |
-| `--color-foreground-icon-strong`   | Primary icons   |
-| `--color-foreground-icon-defined`  | Secondary icons |
-| `--color-foreground-icon-soft`     | Tertiary icons  |
-| `--color-foreground-icon-subtle`   | Faint icons     |
-| `--color-foreground-icon-disabled` | Disabled icons  |
-
-### System / Status Colors
-
-| Token                             | Usage                     |
-| --------------------------------- | ------------------------- |
-| `--color-system-success-default`  | Success states (green)    |
-| `--color-system-success-discrete` | Success background tint   |
-| `--color-system-warning-default`  | Warning states (yellow)   |
-| `--color-system-warning-discrete` | Warning background tint   |
-| `--color-system-danger-default`   | Error/danger states (red) |
-| `--color-system-danger-discrete`  | Error background tint     |
-| `--color-system-info-default`     | Info states (blue)        |
-| `--color-system-info-discrete`    | Info background tint      |
-
-## Spacing Units
-
-| Token               | Value   |
-| ------------------- | ------- |
-| `--scania-unit-0`   | `0`     |
-| `--scania-unit-1`   | `1px`   |
-| `--scania-unit-2`   | `2px`   |
-| `--scania-unit-4`   | `4px`   |
-| `--scania-unit-8`   | `8px`   |
-| `--scania-unit-12`  | `12px`  |
-| `--scania-unit-16`  | `16px`  |
-| `--scania-unit-20`  | `20px`  |
-| `--scania-unit-24`  | `24px`  |
-| `--scania-unit-32`  | `32px`  |
-| `--scania-unit-40`  | `40px`  |
-| `--scania-unit-48`  | `48px`  |
-| `--scania-unit-56`  | `56px`  |
-| `--scania-unit-64`  | `64px`  |
-| `--scania-unit-80`  | `80px`  |
-| `--scania-unit-96`  | `96px`  |
-| `--scania-unit-120` | `120px` |
-
-## Dimension/Spacing Semantic Tokens
-
-| Token                      | Value  | Usage                   |
-| -------------------------- | ------ | ----------------------- |
-| `--dimension-space-tiny`   | `4px`  | Micro spacing           |
-| `--dimension-space-small`  | `16px` | Default element spacing |
-| `--dimension-space-medium` | `24px` | Section padding         |
-| `--dimension-space-large`  | `48px` | Large gaps              |
-| `--dimension-space-huge`   | `80px` | Hero sections           |
-
-## Border Radius Tokens
-
-| Token                                      | Value    | Usage                      |
-| ------------------------------------------ | -------- | -------------------------- |
-| `--dimension-radius-narrow`                | `4px`    | Buttons, inputs, cards     |
-| `--dimension-radius-soft`                  | `8px`    | Larger containers          |
-| `--dimension-radius-rounded`               | `32px`   | Chips, pills               |
-| `--dimension-radius-circle`                | `9999px` | Avatars, circular elements |
-| `--dimension-radius-for-surface-clickable` | `4px`    | Clickable elements         |
-| `--dimension-radius-for-surface-field`     | `4px`    | Form fields                |
-
-## Font Families
-
-| Token                                 | Value                        | Usage                   |
-| ------------------------------------- | ---------------------------- | ----------------------- |
-| `--scania-font-family-display`        | `scania sans headline`       | Display/headline text   |
-| `--scania-font-family-default`        | `scania sans`                | Body/default text       |
-| `--scania-font-family-semi-condensed` | `scania sans semi condensed` | Side menu, compact text |
-
-## Font Weights
-
-| Token                          | Value |
-| ------------------------------ | ----- |
-| `--scania-font-weight-regular` | `400` |
-| `--scania-font-weight-bold`    | `700` |
-
-## Motion/Animation Tokens
-
-| Token                               | Value                            | Usage                |
-| ----------------------------------- | -------------------------------- | -------------------- |
-| `--tds-motion-duration-fast-01`     | `100ms`                          | Micro-interactions   |
-| `--tds-motion-duration-fast-02`     | `150ms`                          | Quick transitions    |
-| `--tds-motion-duration-moderate-01` | `200ms`                          | Standard transitions |
-| `--tds-motion-duration-moderate-02` | `300ms`                          | Moderate animations  |
-| `--tds-motion-duration-slow-01`     | `400ms`                          | Complex animations   |
-| `--tds-motion-duration-slow-02`     | `500ms`                          | Full animations      |
-| `--tds-motion-easing-scania`        | `cubic-bezier(0.4, 0, 0, 1)`     | Default easing       |
-| `--tds-motion-easing-enter`         | `cubic-bezier(0.1, 0.9, 0.2, 1)` | Enter transitions    |
-| `--tds-motion-easing-exit`          | `cubic-bezier(0.7, 0, 1, 0.5)`   | Exit transitions     |
-
----
-
-# Typography
-
-## Typography Scale (defined in scania-variables.css under `.scania`)
-
-### Display (Hero/Marketing)
-
-- **Display 01**: 216px / 183px LH / uppercase / Scania Sans Headline Bold
-- **Display 02**: 156px / 148px LH / uppercase / Scania Sans Headline Bold
-- **Display 03**: 112px / 106px LH / uppercase / Scania Sans Headline Bold
-- **Display 04**: 80px / 80px LH / uppercase / Scania Sans Headline Bold
-- **Display 05**: 56px / 56px LH / uppercase / Scania Sans Headline Bold
-
-### Headlines
-
-- **Headline 01**: 40px / 40px LH / uppercase / Scania Sans Headline Bold
-- **Headline 02**: 32px / 32px LH / Scania Sans Bold / ls: -1.28px
-- **Headline 03**: 24px / 24px LH / Scania Sans Bold / ls: -0.72px
-- **Headline 04**: 20px / 24px LH / Scania Sans Bold / ls: -0.4px
-- **Headline 05**: 16px / 24px LH / Scania Sans Bold / ls: -0.32px
-- **Headline 06**: 14px / 16px LH / uppercase / Scania Sans Bold / ls: -0.28px
-
-### Paragraphs / Body
-
-- **Paragraph 01**: 24px / 32px LH / Scania Sans Regular / ls: -0.72px
-- **Paragraph 02**: 20px / 24px LH / Scania Sans Regular / ls: -0.2px
-- **Body 01**: 16px / 24px LH / Scania Sans Regular / ls: -0.32px
-- **Body 02**: 14px / 20px LH / Scania Sans Regular / ls: -0.14px
-
-### Component Text
-
-- **Component Text 01**: 14px / 16px LH / ls: -0.14px
-- **Component Text 02**: 14px / 20px LH / ls: -0.14px
-- **Component Label 01**: 12px / 16px LH / ls: 0
-- **Component Label 02**: 10px / 8px LH / ls: 0
-- **Component Title 01**: 14px / 16px LH / ls: -0.14px
-- **Component Title 02**: 10px / 16px LH / uppercase / ls: 0.8px
-
-### Links
-
-- **Link 01**: 16px / 24px LH / ls: -0.32px
-- **Link 02**: 14px / 20px LH / ls: -0.14px
-
-## Typography Usage in Components
-
-Components use internal typography tokens like `--detail-02-*`, `--headline-07-*`, `--body-01-*` etc. These are automatically applied. Do NOT manually set font properties on Tegel components.
-
----
-
-# Layout & Grid
-
-Tegel Lite does not include a CSS grid utility system. Use standard CSS Grid/Flexbox with Tegel tokens:
-
-```html
-<div
-  class="scania tds-mode-light"
-  style="
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: var(--dimension-space-small);
-  padding: var(--dimension-space-medium);
-"
->
-  <!-- Grid items -->
-</div>
-```
-
-## Layout Components
-
-- **Header** (`.tl-header`) – Full-width app bar, fixed at top
-- **Side Menu** (`.tl-side-menu`) – Navigation sidebar, collapsible
-- **Footer** (`.tl-footer`) – Multi-section page footer
-
-## Breakpoints (used in components)
-
-| Breakpoint | Value    | Usage         |
-| ---------- | -------- | ------------- |
-| xs         | `320px`  | Mobile        |
-| sm         | `384px`  | Small mobile  |
-| md         | `672px`  | Tablet        |
-| lg         | `992px`  | Desktop       |
-| xl         | `1056px` | Large desktop |
-| xxl        | `1312px` | Wide desktop  |
-| xxxl       | `1584px` | Ultra-wide    |
-
----
-
-## 02-components-forms
-
-# Form Components
-
-## Button
-
-**Classes**: `tl-button`, `tl-button--primary`, `tl-button--secondary`, `tl-button--ghost`, `tl-button--danger`
-**Sizes**: `tl-button--xs` (24px), `tl-button--sm` (40px), `tl-button--md` (48px), `tl-button--lg` (56px)
-**Modifiers**: `tl-button--full-width`, `tl-button--icon`, `tl-button--only-icon`
-
-```html
-<!-- Primary button (default) -->
-<button class="tl-button tl-button--primary tl-button--md">
-  Primary Action
-</button>
-
-<!-- Secondary button -->
-<button class="tl-button tl-button--secondary tl-button--md">Secondary</button>
-
-<!-- Ghost button -->
-<button class="tl-button tl-button--ghost tl-button--sm">Ghost</button>
-
-<!-- Danger button -->
-<button class="tl-button tl-button--danger tl-button--md">Delete</button>
-
-<!-- Button with icon (text BEFORE icon) -->
-<button class="tl-button tl-button--primary tl-button--icon tl-button--md">
-  Save
-  <span class="tl-icon tl-icon--save" aria-hidden="true"></span>
-</button>
-
-<!-- Icon-only button -->
-<button
-  class="tl-button tl-button--only-icon tl-button--md"
-  aria-label="Settings"
->
-  <span class="tl-icon tl-icon--settings"></span>
-</button>
-
-<!-- Full width -->
-<button
-  class="tl-button tl-button--primary tl-button--md tl-button--full-width"
->
-  Full Width
-</button>
-
-<!-- Disabled -->
-<button class="tl-button tl-button--primary tl-button--md" disabled>
-  Disabled
-</button>
-```
-
-**Structure Rules**:
-
-- **Button with icon**: Text comes FIRST, then icon. Add `tl-button--icon` modifier. Icon should have `aria-hidden="true"`.
-- **Icon-only button**: Add `tl-button--only-icon` modifier and `aria-label` for accessibility.
-- **Size**: Always include a size modifier (--xs, --sm, --md, --lg).
-- **Variant**: Primary, secondary, ghost, or danger (optional, defaults to primary).
-
-**Do's**:
-
-- Always put text before icon in buttons with icons
-- Always add `aria-hidden="true"` to decorative icons in buttons with text
-- Always use `aria-label` for icon-only buttons
-
-**Don'ts**:
-
-- Never use `<div>` as a button
-- Never style buttons with custom colors
-- Never put icon before text in buttons with text
-
----
-
-## Text Field (Input)
-
-**Classes**: `tl-text-field`, `tl-text-field--lg` (56px, default), `tl-text-field--md` (48px), `tl-text-field--sm` (40px)
-**Variants**: `tl-text-field--primary`, `tl-text-field--secondary`, `tl-text-field--label-inside`
-**States**: `tl-text-field--error`, `tl-text-field--success`
-
-```html
-<!-- Basic text field with external label -->
-<div class="tl-text-field tl-text-field--lg">
-  <label class="tl-text-field__label" for="name">Name</label>
-  <input
-    class="tl-text-field__input"
-    id="name"
-    type="text"
-    placeholder="Enter your name"
-  />
-</div>
-
-<!-- Label inside -->
-<div class="tl-text-field tl-text-field--lg tl-text-field--label-inside">
-  <label class="tl-text-field__label" for="email">Email</label>
-  <input class="tl-text-field__input" id="email" type="email" placeholder=" " />
-</div>
-
-<!-- With helper text -->
-<div class="tl-text-field tl-text-field--lg">
-  <label class="tl-text-field__label" for="phone">Phone</label>
-  <input
-    class="tl-text-field__input"
-    id="phone"
-    type="tel"
-    placeholder="+46..."
-  />
-  <div class="tl-text-field__bottom">
-    <span class="tl-text-field__helper">Include country code</span>
-  </div>
-</div>
-
-<!-- Error state -->
-<div class="tl-text-field tl-text-field--lg tl-text-field--error">
-  <label class="tl-text-field__label" for="req">Required field</label>
-  <input class="tl-text-field__input" id="req" type="text" placeholder=" " />
-  <div class="tl-text-field__bottom">
-    <span class="tl-text-field__helper">This field is required</span>
-  </div>
-</div>
-
-<!-- With prefix/suffix icons -->
-<div class="tl-text-field tl-text-field--lg">
-  <label class="tl-text-field__label" for="search">Search</label>
-  <span class="tl-text-field__prefix--icon tl-icon tl-icon--search"></span>
-  <input
-    class="tl-text-field__input"
-    id="search"
-    type="text"
-    placeholder="Search..."
-  />
-</div>
-
-<!-- With character counter -->
-<div class="tl-text-field tl-text-field--lg">
-  <label class="tl-text-field__label" for="bio">Bio</label>
-  <input
-    class="tl-text-field__input"
-    id="bio"
-    type="text"
-    placeholder=" "
-    maxlength="100"
-  />
-  <div class="tl-text-field__bottom">
-    <span class="tl-text-field__helper">Short description</span>
-    <span class="tl-text-field__charcounter">
-      0<span class="tl-text-field__charcounter-divider">/</span>100
-    </span>
-  </div>
-</div>
-
-<!-- Disabled -->
-<div class="tl-text-field tl-text-field--lg">
-  <label class="tl-text-field__label" for="dis">Disabled</label>
-  <input
-    class="tl-text-field__input"
-    id="dis"
-    type="text"
-    disabled
-    placeholder="Cannot edit"
-  />
-</div>
-```
-
-**IMPORTANT for label-inside**: The `placeholder` attribute MUST be set (even to `" "` a space) for the floating label animation to work.
-
----
-
-## Textarea
-
-**Classes**: `tl-textarea`
-**Variants**: `tl-textarea--primary`, `tl-textarea--secondary`, `tl-textarea--label-inside`
-**States**: `tl-textarea--error`, `tl-textarea--success`
-
-```html
-<div class="tl-textarea">
-  <label class="tl-textarea__label" for="msg">Message</label>
-  <textarea
-    class="tl-textarea__input"
-    id="msg"
-    rows="4"
-    placeholder="Type here..."
-  ></textarea>
-  <div class="tl-textarea__bottom">
-    <span class="tl-textarea__helper">Max 500 characters</span>
-    <span class="tl-textarea__charcounter">
-      0<span class="tl-textarea__charcounter-divider">/</span>500
-    </span>
-  </div>
-</div>
-```
-
----
-
-## Checkbox
-
-**Classes**: `tl-checkbox`
-
-```html
-<label class="tl-checkbox">
-  <input class="tl-checkbox__input" type="checkbox" />
-  <span class="tl-checkbox__label">Accept terms</span>
-</label>
-
-<!-- Checked -->
-<label class="tl-checkbox">
-  <input class="tl-checkbox__input" type="checkbox" checked />
-  <span class="tl-checkbox__label">Selected</span>
-</label>
-
-<!-- Disabled -->
-<label class="tl-checkbox">
-  <input class="tl-checkbox__input" type="checkbox" disabled />
-  <span class="tl-checkbox__label">Disabled</span>
-</label>
-
-<!-- Indeterminate (add class manually) -->
-<label class="tl-checkbox">
-  <input
-    class="tl-checkbox__input tl-checkbox__input--indeterminate"
-    type="checkbox"
-  />
-  <span class="tl-checkbox__label">Indeterminate</span>
-</label>
-```
-
----
-
-## Radio Button
-
-**Classes**: `tl-radio-button`
-
-```html
-<label class="tl-radio-button">
-  <input class="tl-radio-button__input" type="radio" name="group1" value="a" />
-  <span class="tl-radio-button__label">Option A</span>
-</label>
-
-<label class="tl-radio-button">
-  <input class="tl-radio-button__input" type="radio" name="group1" value="b" />
-  <span class="tl-radio-button__label">Option B</span>
-</label>
-
-<label class="tl-radio-button">
-  <input
-    class="tl-radio-button__input"
-    type="radio"
-    name="group1"
-    value="c"
-    disabled
-  />
-  <span class="tl-radio-button__label">Disabled</span>
-</label>
-```
-
----
-
-## Toggle / Switch
-
-**Classes**: `tl-toggle`
-**Sizes**: default (44×24px), `tl-toggle__input--sm` (28×16px)
-
-```html
-<div class="tl-toggle">
-  <span class="tl-toggle__headline">Dark mode</span>
-  <label>
-    <input class="tl-toggle__input" type="checkbox" />
-    <span class="tl-toggle__label">Enable</span>
-  </label>
-</div>
-
-<!-- Small toggle -->
-<div class="tl-toggle">
-  <label>
-    <input
-      class="tl-toggle__input tl-toggle__input--sm"
-      type="checkbox"
-      checked
-    />
-    <span class="tl-toggle__label">On</span>
-  </label>
-</div>
-```
-
----
-
-## Dropdown / Select
-
-**Classes**: `tl-dropdown`
-**Sizes**: default (56px), `tl-dropdown--md` (48px), `tl-dropdown--sm` (40px)
-**Variants**: `tl-dropdown--primary`, `tl-dropdown--secondary`, `tl-dropdown--label-inside`
-**States**: `tl-dropdown--error`
-
-### Native Select
-
-```html
-<div class="tl-dropdown tl-dropdown--lg">
-  <label class="tl-dropdown__label" for="country">Country</label>
-  <select class="tl-dropdown__select" id="country">
-    <option value="">Select a country</option>
-    <option value="se">Sweden</option>
-    <option value="no">Norway</option>
-    <option value="dk">Denmark</option>
-  </select>
-</div>
-```
-
-### Custom Dropdown (requires JS for open/close)
-
-```html
-<div class="tl-dropdown tl-dropdown--lg">
-  <label class="tl-dropdown__label">Status</label>
-  <button
-    class="tl-dropdown__button"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-  >
-    <span class="tl-dropdown__text" data-placeholder="Select status"></span>
-  </button>
-  <ul class="tl-dropdown__list" role="listbox">
-    <li class="tl-dropdown__option" role="option" tabindex="0">Active</li>
-    <li class="tl-dropdown__option" role="option" tabindex="0">Inactive</li>
-    <li class="tl-dropdown__option tl-dropdown__option--disabled" role="option">
-      Archived
-    </li>
-  </ul>
-</div>
-```
-
-### Filterable Dropdown
-
-```html
-<div class="tl-dropdown tl-dropdown--lg">
-  <label class="tl-dropdown__label">Search items</label>
-  <div class="tl-dropdown__input-wrapper">
-    <input
-      class="tl-dropdown__input"
-      type="text"
-      placeholder="Type to filter..."
-      aria-expanded="false"
-      role="combobox"
-      autocomplete="off"
-    />
-    <button class="tl-dropdown__input-clear" aria-label="Clear">×</button>
-  </div>
-  <ul class="tl-dropdown__list" role="listbox">
-    <li class="tl-dropdown__option" role="option" tabindex="0">Item 1</li>
-    <li class="tl-dropdown__option" role="option" tabindex="0">Item 2</li>
-  </ul>
-</div>
-```
-
----
-
-## Datetime / Date Picker
-
-**Classes**: `tl-datetime`
-**Sizes**: default lg (56px), `tl-datetime--md` (48px), `tl-datetime--sm` (40px)
-**Variants**: `tl-datetime--primary`, `tl-datetime--secondary`, `tl-datetime--label-inside`
-**States**: `tl-datetime--error`
-
-```html
-<div class="tl-datetime tl-datetime--label-inside">
-  <div class="tl-datetime__wrapper">
-    <span class="tl-datetime__label-inside">Date</span>
-    <input class="tl-datetime__input" type="date" />
-  </div>
-</div>
-
-<!-- With external label -->
-<div class="tl-datetime">
-  <label class="tl-datetime__label" for="start">Start date</label>
-  <div class="tl-datetime__wrapper">
-    <input class="tl-datetime__input" id="start" type="date" />
-  </div>
-</div>
-
-<!-- Time picker -->
-<div class="tl-datetime">
-  <label class="tl-datetime__label" for="time">Time</label>
-  <div class="tl-datetime__wrapper">
-    <input class="tl-datetime__input" id="time" type="time" />
-  </div>
-</div>
-
-<!-- Error state -->
-<div class="tl-datetime tl-datetime--error">
-  <label class="tl-datetime__label" for="due">Due date</label>
-  <div class="tl-datetime__wrapper">
-    <input class="tl-datetime__input" id="due" type="date" />
-  </div>
-  <span class="tl-datetime__helper">Date cannot be in the past</span>
-</div>
-```
-
----
-
-## 03-components-display
-
-# Display Components
-
-## Card
-
-**Classes**: `tl-card`
-**Variants**: `tl-card--primary`, `tl-card--secondary`, `tl-card--clickable`, `tl-card--stretch`, `tl-card--expandable`
-
-```html
-<!-- Basic card -->
-<div class="tl-card">
-  <div class="tl-card__header">
-    <div class="tl-card__headings">
-      <span class="tl-card__title">Card Title</span>
-      <span class="tl-card__subtitle">Subtitle</span>
-    </div>
-  </div>
-  <div class="tl-card__body">
-    <div class="tl-card__content">
-      <p>Card content goes here.</p>
-    </div>
-  </div>
-</div>
-
-<!-- Card with image -->
-<div class="tl-card">
-  <img class="tl-card__image" src="image.jpg" alt="Description" />
-  <div class="tl-card__header tl-card__header--below">
-    <div class="tl-card__headings">
-      <span class="tl-card__title">Featured Card</span>
-    </div>
-  </div>
-  <div class="tl-card__body">
-    <div class="tl-card__content">
-      <p>Content below the image.</p>
-    </div>
-  </div>
-  <div class="tl-card__bottom-row">
-    <div class="tl-card__actions">
-      <button class="tl-button tl-button--primary tl-button--sm">Action</button>
-    </div>
-  </div>
-</div>
-
-<!-- Clickable card -->
-<button class="tl-card tl-card--clickable">
-  <div class="tl-card__header">
-    <div class="tl-card__headings">
-      <span class="tl-card__title">Clickable</span>
-    </div>
-  </div>
-  <div class="tl-card__body">
-    <div class="tl-card__content">Click anywhere</div>
-  </div>
-</button>
-
-<!-- Card with thumbnail -->
-<div class="tl-card">
-  <div class="tl-card__header">
-    <img class="tl-card__thumbnail" src="avatar.jpg" alt="User" />
-    <div class="tl-card__headings">
-      <span class="tl-card__title">User Name</span>
-      <span class="tl-card__subtitle">Role</span>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## Accordion
-
-**Classes**: `tl-accordion`
-**Variants**: `tl-accordion--primary`, `tl-accordion--secondary`, `tl-accordion--hide-last-border`
-
-```html
-<div class="tl-accordion">
-  <!-- Expanded item -->
-  <div class="tl-accordion__item tl-accordion__item--expanded">
-    <button class="tl-accordion__header-icon-end" aria-expanded="true">
-      <span class="tl-accordion__title">Section 1</span>
-    </button>
-    <div class="tl-accordion__panel">
-      <p>Content of section 1.</p>
-    </div>
-  </div>
-
-  <!-- Collapsed item -->
-  <div class="tl-accordion__item">
-    <button class="tl-accordion__header-icon-end" aria-expanded="false">
-      <span class="tl-accordion__title">Section 2</span>
-    </button>
-    <div class="tl-accordion__panel">
-      <p>Content of section 2.</p>
-    </div>
-  </div>
-
-  <!-- Disabled item -->
-  <div class="tl-accordion__item tl-accordion__item--disabled">
-    <button
-      class="tl-accordion__header-icon-end"
-      aria-expanded="false"
-      disabled
-    >
-      <span class="tl-accordion__title">Disabled</span>
-    </button>
-    <div class="tl-accordion__panel">
-      <p>Cannot expand.</p>
-    </div>
-  </div>
-</div>
-```
-
-**Icon position**: Use `tl-accordion__header-icon-start` for chevron on left, `tl-accordion__header-icon-end` for right.
-
----
-
-## Badge
-
-**Classes**: `tl-badge`
-**Sizes**: `tl-badge--sm` (8×8px dot), `tl-badge--lg` (20×20px), `tl-badge--pill` (auto-width)
-
-**IMPORTANT**: The badge component does NOT have built-in status variants (success, warning, danger). It only provides neutral notification badges.
-
-```html
-<!-- Notification badges (default usage) -->
-<span class="tl-badge tl-badge--sm"></span>
-<span class="tl-badge tl-badge--lg"><span class="tl-badge__text">5</span></span>
-<span class="tl-badge tl-badge--pill"
-  ><span class="tl-badge__text">New</span></span
->
-```
-
-### Status Badges (Custom Component)
-
-**NEVER use inline styles on badges.** For status indicators (success, warning, danger), create a custom component with proper CSS classes:
-
-```css
-/* Add to your custom stylesheet */
-.status-badge {
-  display: inline-block;
-  padding: var(--dimension-space-tiny) var(--dimension-space-small);
-  border-radius: var(--dimension-radius-rounded);
-  font-size: 12px;
-  font-weight: var(--scania-font-weight-bold);
-  text-align: center;
-}
-
-.status-badge--success {
-  background-color: var(--color-system-success-discrete);
-  color: var(--color-system-success-default);
-}
-
-.status-badge--warning {
-  background-color: var(--color-system-warning-discrete);
-  color: var(--color-system-warning-default);
-}
-
-.status-badge--danger {
-  background-color: var(--color-system-danger-discrete);
-  color: var(--color-system-danger-default);
-}
-
-.status-badge--info {
-  background-color: var(--color-system-info-discrete);
-  color: var(--color-system-info-default);
-}
-```
-
-```html
-<!-- CUSTOM: Status badges using Tegel tokens -->
-<span class="status-badge status-badge--success">Active</span>
-<span class="status-badge status-badge--warning">Pending</span>
-<span class="status-badge status-badge--danger">Error</span>
-<span class="status-badge status-badge--info">Info</span>
-```
-
----
-
-## Banner
-
-**Classes**: `tl-banner`
-**Variants**: `tl-banner--error`, `tl-banner--information`
-
-```html
-<!-- Default banner -->
-<div class="tl-banner" role="alert">
-  <span class="tl-banner__icon">
-    <span class="tl-icon tl-icon--info"></span>
-  </span>
-  <div class="tl-banner__content">
-    <div class="tl-banner__text">
-      <h6 class="tl-banner__header">Notice</h6>
-      <p class="tl-banner__subheader">System maintenance scheduled.</p>
-    </div>
-    <div class="tl-banner__actions">
-      <a href="#" class="tl-link tl-link--underline">Learn more</a>
-    </div>
-  </div>
-  <button class="tl-banner__close" aria-label="Close">
-    <span class="tl-icon tl-icon--cross"></span>
-  </button>
-</div>
-
-<!-- Error banner -->
-<div class="tl-banner tl-banner--error" role="alert">
-  <span class="tl-banner__icon">
-    <span class="tl-icon tl-icon--error"></span>
-  </span>
-  <div class="tl-banner__content">
-    <div class="tl-banner__text">
-      <h6 class="tl-banner__header">Error</h6>
-      <p class="tl-banner__subheader">Something went wrong.</p>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## Message
-
-**Classes**: `tl-message`
-**Variants**: `tl-message--information`, `tl-message--success`, `tl-message--warning`, `tl-message--error`, `tl-message--minimal`
-**Mode**: `tl-message--primary`, `tl-message--secondary`, `tl-message--no-icon`
-
-```html
-<!-- Information message -->
-<div class="tl-message tl-message--information">
-  <div class="tl-message__wrapper">
-    <div class="tl-message__content">
-      <p class="tl-message__header">Information</p>
-      <p class="tl-message__extended-message">Here is some helpful context.</p>
-    </div>
-  </div>
-</div>
-
-<!-- Error message -->
-<div class="tl-message tl-message--error">
-  <div class="tl-message__wrapper">
-    <div class="tl-message__content">
-      <p class="tl-message__header">Error occurred</p>
-      <p class="tl-message__extended-message">Please try again later.</p>
-    </div>
-  </div>
-</div>
-
-<!-- Minimal (inline) error message -->
-<div class="tl-message tl-message--error tl-message--minimal">
-  <div class="tl-message__wrapper">
-    <div class="tl-message__content">
-      <p class="tl-message__header">Invalid input</p>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## Toast
-
-**Classes**: `tl-toast`
-**Variants**: `tl-toast--information`, `tl-toast--success`, `tl-toast--error`, `tl-toast--warning`
-
-```html
-<div class="tl-toast tl-toast--success" role="alert">
-  <span class="tl-toast__icon">
-    <span class="tl-icon tl-icon--tick"></span>
-  </span>
-  <div class="tl-toast__content">
-    <div class="tl-toast__text">
-      <h6 class="tl-toast__header">Success</h6>
-      <p class="tl-toast__subheader">Item was saved.</p>
-    </div>
-  </div>
-  <button class="tl-toast__close" aria-label="Dismiss">
-    <span class="tl-icon tl-icon--cross"></span>
-  </button>
-</div>
-```
-
-Width is fixed at `348px`. Position with CSS `position: fixed`.
-
----
-
-## Modal / Dialog
-
-**Classes**: `tl-modal`
-**Sizes**: `tl-modal--xs`, `tl-modal--sm`, `tl-modal--md`, `tl-modal--lg`
-**Modifiers**: `tl-modal--visible` (shows modal), `tl-modal--sticky` (sticky header/actions)
-
-```html
-<!-- Overlay (backdrop) -->
-<div class="tl-modal__overlay tl-modal--visible"></div>
-
-<!-- Modal -->
-<div
-  class="tl-modal tl-modal--sm tl-modal--visible tl-modal--sticky"
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby="modal-title"
->
-  <div class="tl-modal__header">
-    <h5 class="tl-modal__title" id="modal-title">Confirm Action</h5>
-    <button class="tl-modal__close" aria-label="Close">
-      <span class="tl-icon tl-icon--cross"></span>
-    </button>
-  </div>
-  <div class="tl-modal__body">
-    <p>Are you sure you want to proceed?</p>
-  </div>
-  <div class="tl-modal__actions">
-    <button class="tl-button tl-button--secondary tl-button--md">Cancel</button>
-    <button class="tl-button tl-button--primary tl-button--md">Confirm</button>
-  </div>
-</div>
-```
-
-**Responsive widths** for `tl-modal--sm`:
-
-- Mobile (320px): 100%
-- Tablet (672px): 62.5%
-- Desktop (1056px): 43.75%
-- Wide (1312px): 37.5%
-- Ultra-wide (1584px): 37.5%
-
----
-
-## Table
-
-**Classes**: `tl-table`
-**Variants**: `tl-table--primary`, `tl-table--secondary`, `tl-table--responsive`, `tl-table--compact`
-**Modifiers**: `tl-table--zebra-rows-odd`, `tl-table--zebra-rows-even`, `tl-table--vertical-dividers`, `tl-table--horizontal-scroll`, `tl-table--clickable`
-
-```html
-<table class="tl-table tl-table--responsive">
-  <!-- Optional toolbar -->
-  <caption class="tl-table__toolbar">
-    <div class="tl-table__upper-bar">
-      <div class="tl-table__actionbar-left">
-        <span class="tl-table__title">Users</span>
-      </div>
-    </div>
-  </caption>
-
-  <thead class="tl-table__header">
-    <tr class="tl-table__row">
-      <th class="tl-table__header-cell">Name</th>
-      <th class="tl-table__header-cell">Email</th>
-      <th class="tl-table__header-cell">Role</th>
-    </tr>
-  </thead>
-
-  <tbody class="tl-table__body">
-    <tr class="tl-table__row">
-      <td class="tl-table__body-cell">John Doe</td>
-      <td class="tl-table__body-cell">john@example.com</td>
-      <td class="tl-table__body-cell">Admin</td>
-    </tr>
-    <tr class="tl-table__row">
-      <td class="tl-table__body-cell">Jane Smith</td>
-      <td class="tl-table__body-cell">jane@example.com</td>
-      <td class="tl-table__body-cell">User</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-### Sortable Headers
-
-```html
-<th class="tl-table__header-cell tl-table__header-cell--sortable">
-  <button class="tl-table__header-button">
-    <span class="tl-table__header-button-text">Name</span>
-    <span class="tl-table__header-button-icon tl-icon tl-icon--sorting"></span>
-  </button>
-</th>
-```
-
----
-
-## Block (Content Section)
-
-**Classes**: `tl-block`
-**Variants**: `tl-block--primary`, `tl-block--secondary`
-
-```html
-<div class="tl-block tl-block--primary">
-  <h2>Section Title</h2>
-  <p>Body text in a block.</p>
-  <div class="tl-block">
-    <h3>Nested Block</h3>
-    <p>Nested content with alternating background.</p>
-  </div>
-</div>
-```
-
-Blocks alternate background colors automatically when nested.
-
----
-
-## Stepper
-
-**Classes**: `tl-stepper`
-**Sizes**: `tl-stepper--lg`, `tl-stepper--sm`
-**Direction**: `tl-stepper--horizontal`, `tl-stepper--vertical`
-**Label**: `tl-stepper--label-below`, `tl-stepper--label-aside`, `tl-stepper--hide-labels`
-
-```html
-<div class="tl-stepper tl-stepper--horizontal tl-stepper--lg">
-  <ol class="tl-stepper__list">
-    <li class="tl-stepper__step tl-stepper__step--success">
-      <span class="tl-stepper__node"></span>
-      <span class="tl-stepper__label">Step 1</span>
-    </li>
-    <li class="tl-stepper__step tl-stepper__step--current">
-      <span class="tl-stepper__node">2</span>
-      <span class="tl-stepper__label">Step 2</span>
-    </li>
-    <li class="tl-stepper__step tl-stepper__step--upcoming">
-      <span class="tl-stepper__node">3</span>
-      <span class="tl-stepper__label">Step 3</span>
-    </li>
-  </ol>
-</div>
-```
-
-Step states: `tl-stepper__step--success`, `tl-stepper__step--error`, `tl-stepper__step--current`, `tl-stepper__step--upcoming`
-
----
-
-## Spinner / Loader
-
-**Classes**: `tl-spinner`
-**Sizes**: `tl-spinner--xs` (16px), `tl-spinner--sm` (24px), `tl-spinner--md` (52px), `tl-spinner--lg` (84px)
-**Color**: `tl-spinner--default`, `tl-spinner--inverted`
-
-```html
-<svg
-  class="tl-spinner tl-spinner--md tl-spinner--default"
-  aria-label="Loading"
-  role="img"
->
-  <circle class="tl-spinner__circle"></circle>
-</svg>
-```
-
----
-
-## Popover Canvas
-
-**Classes**: `tl-popover-canvas`
-**Modifiers**: `tl-popover-canvas--visible`, `tl-popover-canvas--animation-fade`, `tl-popover-canvas--primary`, `tl-popover-canvas--secondary`
-
-```html
-<div
-  class="tl-popover-canvas tl-popover-canvas--visible tl-popover-canvas--animation-fade"
->
-  <div class="tl-popover-canvas__content">
-    <h5 class="tl-popover-canvas__header">Popover Title</h5>
-    <p>Content here.</p>
-    <div class="tl-popover-canvas__actions">
-      <button class="tl-button tl-button--ghost tl-button--sm">Cancel</button>
-      <button class="tl-button tl-button--primary tl-button--sm">
-        Confirm
-      </button>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## 04-components-navigation
-
-# Navigation & Utility Components
-
-## Breadcrumbs
-
-**Classes**: `tl-breadcrumbs`
-
-```html
-<nav class="tl-breadcrumbs" aria-label="Breadcrumb">
-  <ol>
-    <li><a href="/">Home</a></li>
-    <li><a href="/products">Products</a></li>
-    <li><a href="/products/trucks" aria-current="page">Trucks</a></li>
-  </ol>
-</nav>
-```
-
----
-
-## Chip
-
-**Classes**: `tl-chip`
-**Sizes**: `tl-chip--sm` (24px), `tl-chip--lg` (32px)
-**States**: `tl-chip--selected`
-**Modifiers**: `tl-chip--prefix`, `tl-chip--suffix`
-
-```html
-<button class="tl-chip tl-chip--lg">Default</button>
-<button class="tl-chip tl-chip--lg tl-chip--selected">Selected</button>
-<button class="tl-chip tl-chip--sm" disabled>Disabled</button>
-```
-
----
-
-## Tabs
-
-### Inline Tabs
-
-```html
-<div class="tl-inline-tabs" role="tablist">
-  <button
-    class="tl-inline-tabs__tab tl-inline-tabs__tab--selected"
-    role="tab"
-    aria-selected="true"
-  >
-    Tab 1
-  </button>
-  <button class="tl-inline-tabs__tab" role="tab" aria-selected="false">
-    Tab 2
-  </button>
-  <button
-    class="tl-inline-tabs__tab tl-inline-tabs__tab--disabled"
-    role="tab"
-    aria-disabled="true"
-  >
-    Disabled
-  </button>
-</div>
-```
-
-### Folder Tabs
-
-```html
-<div class="tl-folder-tabs" role="tablist">
-  <button
-    class="tl-folder-tabs__tab tl-folder-tabs__tab--selected"
-    role="tab"
-    aria-selected="true"
-  >
-    Active
-  </button>
-  <button class="tl-folder-tabs__tab" role="tab" aria-selected="false">
-    Another
-  </button>
-</div>
-```
-
-### Navigation Tabs
-
-```html
-<nav class="tl-navigation-tabs" role="tablist">
-  <a
-    class="tl-navigation-tabs__tab tl-navigation-tabs__tab--selected"
-    href="/overview"
-    role="tab"
-    aria-selected="true"
-    >Overview</a
-  >
-  <a class="tl-navigation-tabs__tab" href="/details" role="tab">Details</a>
-</nav>
-```
-
----
-
-## Link
-
-**Classes**: `tl-link`
-**Modifiers**: `tl-link--underline`, `tl-link--standalone`, `tl-link--disabled`
-
-```html
-<a href="/page" class="tl-link tl-link--underline">
-  Learn more
-  <span class="tl-link__icon"
-    ><span class="tl-icon tl-icon--arrow_right"></span
-  ></span>
-</a>
-
-<!-- Standalone link (inherits detail-02 typography) -->
-<a href="/page" class="tl-link tl-link--standalone tl-link--underline"
-  >Standalone Link</a
->
-
-<!-- Disabled link -->
-<span class="tl-link tl-link--disabled">Disabled link</span>
-```
-
----
-
-## Divider
-
-**Classes**: `tl-divider`
-**Variants**: `tl-divider--horizontal`, `tl-divider--vertical`, `tl-divider--expressive`, `tl-divider--discrete`
-
-```html
-<div class="tl-divider tl-divider--horizontal"></div>
-<div class="tl-divider tl-divider--vertical" style="height: 40px;"></div>
-```
-
----
-
-## Tooltip
-
-**Classes**: `tl-tooltip`
-**Modifiers**: `tl-tooltip--visible`, position variants: `tl-tooltip--top-start`, `tl-tooltip--top-end`, `tl-tooltip--bottom-start`, `tl-tooltip--bottom-end`, `tl-tooltip--left-start`, `tl-tooltip--left-end`, `tl-tooltip--right-start`, `tl-tooltip--right-end`
-
-```html
-<div class="tl-tooltip tl-tooltip--visible tl-tooltip--bottom-start">
-  Tooltip text here
-</div>
-```
-
-Max width: 204px. Positioning requires JS or CSS `position: fixed`.
-
----
-
-## Popover Menu
-
-**Classes**: `tl-popover-menu`
-**Variants**: `tl-popover-menu--primary`, `tl-popover-menu--secondary`, `tl-popover-menu--visible`, `tl-popover-menu--fluid`
-
-```html
-<div
-  class="tl-popover-menu tl-popover-menu--visible tl-popover-menu--animation-fade"
->
-  <div class="tl-popover-menu__item-wrapper">
-    <button class="tl-popover-menu__item">
-      <span class="tl-icon tl-icon--edit"></span>
-      Edit
-    </button>
-    <button class="tl-popover-menu__item">
-      <span class="tl-icon tl-icon--copy"></span>
-      Duplicate
-    </button>
-    <div class="tl-divider tl-divider--horizontal"></div>
-    <button class="tl-popover-menu__item--disabled">
-      <span class="tl-icon tl-icon--trash"></span>
-      Delete
-    </button>
-  </div>
-</div>
-```
-
----
-
-## Slider
-
-**Classes**: `tl-slider`
-**Sizes**: default, `tl-slider--small`
-
-Slider requires JavaScript for thumb positioning. CSS provides the visual styling only.
-
----
-
-## Icon
-
-**Classes**: `tl-icon tl-icon--{name}`
-**Sizes**: `tl-icon--12` through `tl-icon--96` (even numbers only)
-
-Common icons:
-
-- Navigation: `arrow_left`, `arrow_right`, `arrow_up`, `arrow_down`, `chevron_down`, `chevron_up`, `chevron_left`, `chevron_right`, `back`
-- Actions: `edit`, `trash`, `copy`, `save`, `download`, `upload`, `export`, `search`, `filters`, `settings`, `plus`, `minus`, `cross`, `tick`
-- Status: `error`, `warning`, `info`, `tick`
-- UI: `burger`, `bento`, `kebab`, `meatballs`, `eye`, `eye_inactive`, `lock`, `unlock`
-- Objects: `calendar`, `clock`, `document`, `folder`, `image`, `profile`, `home`, `notification`
-
-```html
-<span class="tl-icon tl-icon--search"></span>
-<span class="tl-icon tl-icon--search tl-icon--24"></span>
-<span class="tl-icon tl-icon--error tl-icon--16"></span>
-```
-
-Icons inherit `color` from parent via `currentcolor`.
-
----
-
-## Header
-
-**Classes**: `tl-header`
-
-```html
-<header class="tl-header">
-  <nav class="tl-header__nav">
-    <ul class="tl-header__list">
-      <!-- Brand logo -->
-      <li class="tl-header__item">
-        <a class="tl-header__item-wrapper" href="/">
-          <span class="tl-header__brand"></span>
-        </a>
-      </li>
-
-      <!-- Title -->
-      <li class="tl-header__item">
-        <div class="tl-header__title">
-          <span class="tl-header__title-text">Application Name</span>
-        </div>
-      </li>
-
-      <!-- Nav items -->
-      <li class="tl-header__item">
-        <a class="tl-header__item-wrapper" href="/dashboard">Dashboard</a>
-      </li>
-
-      <!-- Spacer -->
-      <li class="tl-header__middle-spacer"></li>
-
-      <!-- Dropdown -->
-      <li class="tl-header__dropdown">
-        <button class="tl-header__dropdown-wrapper" aria-expanded="false">
-          <span class="tl-icon tl-icon--profile"></span>
-        </button>
-        <ul class="tl-header__dropdown-menu">
-          <li class="tl-header__dropdown-menu-item">
-            <a href="/settings">Settings</a>
-          </li>
-          <li class="tl-header__dropdown-menu-item">
-            <button>Logout</button>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-</header>
-```
-
----
-
-## Footer
-
-**Classes**: `tl-footer`
-**Variants**: `tl-footer--primary`, `tl-footer--secondary`
-
-```html
-<footer class="tl-footer">
-  <!-- Top section with link groups -->
-  <div class="tl-footer__top">
-    <div class="tl-footer__group">
-      <button class="tl-footer__top-title">Resources</button>
-      <a class="tl-footer__link" href="#">Documentation</a>
-      <a class="tl-footer__link" href="#">API Reference</a>
-    </div>
-    <div class="tl-footer__group">
-      <button class="tl-footer__top-title">Support</button>
-      <a class="tl-footer__link" href="#">Contact</a>
-      <a class="tl-footer__link" href="#">FAQ</a>
-    </div>
-  </div>
-
-  <!-- Main section with brand -->
-  <div class="tl-footer__main">
-    <div class="tl-footer__main-top">
-      <div class="tl-footer__main-top--start">
-        <div class="tl-footer__group">
-          <a class="tl-footer__link" href="#">Privacy Policy</a>
-          <a class="tl-footer__link" href="#">Cookie Policy</a>
-        </div>
-      </div>
-    </div>
-    <div class="tl-footer__main-bottom">
-      <p class="tl-footer__copyright">© 2025 Scania CV AB</p>
-      <span class="tl-footer__brand">Scania</span>
-    </div>
-  </div>
-</footer>
-```
-
----
-
-## Side Menu
-
-**Classes**: `tl-side-menu`
-**Modifiers**: `tl-side-menu--persistent`, `tl-side-menu--collapsed`
-
-```html
-<nav class="tl-side-menu tl-side-menu--persistent" aria-label="Side navigation">
-  <div class="tl-side-menu__wrapper tl-side-menu__wrapper--open">
-    <div class="tl-side-menu__overlay"></div>
-    <aside class="tl-side-menu__aside">
-      <div class="tl-side-menu__navigation">
-        <div class="tl-side-menu__list-wrapper">
-          <ul class="tl-side-menu__upper-list">
-            <li>
-              <a
-                class="tl-side-menu__item tl-side-menu__item--selected"
-                href="/dashboard"
-              >
-                <span class="tl-icon tl-icon--dashboard"></span>
-                Dashboard
-              </a>
-            </li>
-            <li>
-              <!-- Dropdown -->
-              <div class="tl-side-menu__dropdown">
-                <button class="tl-side-menu__item">
-                  <span class="tl-icon tl-icon--settings"></span>
-                  Settings
-                </button>
-                <div class="tl-side-menu__dropdown-menu">
-                  <ul class="tl-side-menu__dropdown-list">
-                    <li>
-                      <a
-                        class="tl-side-menu__dropdown-item"
-                        href="/settings/general"
-                        >General</a
-                      >
-                    </li>
-                    <li>
-                      <a
-                        class="tl-side-menu__dropdown-item"
-                        href="/settings/account"
-                        >Account</a
-                      >
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </aside>
-  </div>
-</nav>
-```
-
----
-
-## 05-guidelines
-
-# Guidelines
-
-## Spacing & Sizing Rules
-
-### Spacing Custom Properties (available globally)
-
-These are used by components internally and can be used for custom layouts:
-
-- `--tds-spacing-element-4` (4px)
-- `--tds-spacing-element-8` (8px)
-- `--tds-spacing-element-12` (12px)
-- `--tds-spacing-element-16` (16px)
-- `--tds-spacing-element-20` (20px)
-- `--tds-spacing-element-24` (24px)
-- `--tds-spacing-element-32` (32px)
-- `--tds-spacing-element-48` (48px)
-- `--tds-spacing-layout-64` (64px)
-
-### Rules
-
-1. Use `var(--dimension-space-small)` (16px) as the base gap between elements.
-2. Use `var(--dimension-space-medium)` (24px) for section padding.
-3. Use `var(--dimension-space-large)` (48px) for major section separators.
-4. Component height follows the sizing convention: sm=40px, md=48px, lg=56px.
-
----
-
-## Color Usage
-
-### Semantic Color Usage
-
-| Purpose                   | Token to Use                                  |
-| ------------------------- | --------------------------------------------- |
-| Page background           | `var(--color-background-base)`                |
-| Card/section background   | `var(--color-background-layer-01)`            |
-| Nested section background | `var(--color-background-layer-02)`            |
-| Primary heading text      | `var(--color-foreground-text-strong)`         |
-| Secondary text            | `var(--color-foreground-text-defined)`        |
-| Subtle/hint text          | `var(--color-foreground-text-subtle)`         |
-| Link text                 | `var(--color-foreground-text-accent-default)` |
-| Disabled text             | `var(--color-foreground-text-disabled)`       |
-| Default border            | `var(--color-foreground-border-soft)`         |
-| Focus outline             | `var(--color-foreground-border-accent-focus)` |
-| Success state             | `var(--color-system-success-default)`         |
-| Warning state             | `var(--color-system-warning-default)`         |
-| Error/danger state        | `var(--color-system-danger-default)`          |
-| Info state                | `var(--color-system-info-default)`            |
-
-### RULE: Never hardcode colors. Always use CSS custom properties.
-
----
-
-## Responsiveness
-
-### Breakpoints
-
-| Name    | Width    | CSS                          |
-| ------- | -------- | ---------------------------- |
-| Mobile  | < 672px  | `@media (max-width: 671px)`  |
-| Tablet  | ≥ 672px  | `@media (min-width: 672px)`  |
-| Desktop | ≥ 992px  | `@media (min-width: 992px)`  |
-| Wide    | ≥ 1056px | `@media (min-width: 1056px)` |
-| X-Wide  | ≥ 1312px | `@media (min-width: 1312px)` |
-| XX-Wide | ≥ 1584px | `@media (min-width: 1584px)` |
-
-### Rules
-
-1. **Mobile-first**: Write base styles for mobile, add media queries for larger screens.
-2. Header nav items hide below 992px (burger menu shows).
-3. Side menu collapses to overlay below 992px.
-4. Footer top section stacks vertically below 992px.
-5. Modal widths are responsive (100% on mobile, percentage-based on desktop).
-
----
-
-## Accessibility (a11y)
-
-### Required ARIA Attributes
-
-| Component     | Required ARIA                                                                 |
-| ------------- | ----------------------------------------------------------------------------- |
-| Button        | `aria-label` for icon-only buttons                                            |
-| Modal         | `role="dialog"`, `aria-modal="true"`, `aria-labelledby`                       |
-| Accordion     | `aria-expanded="true/false"` on trigger                                       |
-| Tabs          | `role="tablist"`, `role="tab"`, `aria-selected`                               |
-| Dropdown      | `aria-expanded`, `aria-haspopup="listbox"`, `role="listbox"`, `role="option"` |
-| Breadcrumbs   | `aria-label="Breadcrumb"`, `aria-current="page"` on last item                 |
-| Toast/Banner  | `role="alert"`                                                                |
-| Tooltip       | `role="tooltip"`, `aria-describedby` on trigger                               |
-| Spinner       | `aria-label="Loading"`, `role="img"`                                          |
-| Close buttons | `aria-label="Close"` or `aria-label="Dismiss"`                                |
-| Navigation    | `aria-label` on `<nav>` elements                                              |
-
-### Focus Management
-
-- All interactive elements have `:focus-visible` styles (2px solid blue-400 outline).
-- Focus outline uses `var(--color-foreground-border-accent-focus)`.
-- Modals should trap focus.
-- Side menu overlay closes on Escape.
-
-### Contrast
-
-- Use semantic tokens (they meet WCAG 2.1 AA contrast requirements).
-- Never override text colors with lighter alternatives.
-- `--color-foreground-text-strong` on `--color-background-base` = ≥4.5:1 ratio.
-
----
-
-## Code Conventions
-
-### BEM Naming Pattern
-
-```
-.tl-{block}                    → Component root
-.tl-{block}__{element}         → Sub-part of component
-.tl-{block}--{modifier}        → Variant/state
-.tl-{block}__{element}--{mod}  → Element variant
-```
-
-### Class Order in HTML
-
-1. Base class first: `tl-button`
-2. Variant modifier: `tl-button--primary`
-3. Size modifier: `tl-button--md`
-4. State modifier: `tl-button--full-width`
-
-Example: `class="tl-button tl-button--primary tl-button--md tl-button--full-width"`
-
-### Rules
-
-1. **NEVER write custom CSS** if a Tegel Lite class already exists for the purpose.
-2. **NEVER use inline styles for colors, spacing, or any design properties.** ALWAYS use CSS classes with Tegel tokens.
-   - ❌ BAD: `<span style="background-color: var(--color-system-success-discrete);">Active</span>`
-   - ✅ GOOD: Create a CSS class `.status-badge--success { background-color: var(--color-system-success-discrete); }`
-3. **NEVER add inline styles to Tegel components.** If a component doesn't have the variant you need, create a custom component.
-4. **ALWAYS use semantic HTML** (`<button>`, `<a>`, `<nav>`, `<header>`, etc.).
-5. **ALWAYS wrap the app** in `<body class="scania tds-mode-light">`.
-6. When building custom components, use Tegel tokens for all colors, spacing, and typography.
-7. Keep custom CSS in separate files, never modify the Tegel Lite CSS files.
-
----
-
-## 06-patterns
-
-# Composed Page Patterns
-
-## Login Page
-
-```html
-<body class="scania tds-mode-light">
-  <div
-    style="display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: var(--color-background-base);"
-  >
-    <div class="tl-card" style="width: 400px; max-width: 100%;">
-      <div class="tl-card__header">
-        <div class="tl-card__headings">
-          <span class="tl-card__title">Sign In</span>
-          <span class="tl-card__subtitle">Enter your credentials</span>
-        </div>
-      </div>
-      <div class="tl-card__body">
-        <div class="tl-card__content" style="max-inline-size: unset;">
-          <!-- Email field -->
-          <div
-            class="tl-text-field tl-text-field--lg"
-            style="margin-bottom: 16px;"
-          >
-            <label class="tl-text-field__label" for="login-email">Email</label>
-            <input
-              class="tl-text-field__input"
-              id="login-email"
-              type="email"
-              placeholder="user@scania.com"
-            />
-          </div>
-          <!-- Password field -->
-          <div
-            class="tl-text-field tl-text-field--lg"
-            style="margin-bottom: 24px;"
-          >
-            <label class="tl-text-field__label" for="login-pass"
-              >Password</label
-            >
-            <input
-              class="tl-text-field__input"
-              id="login-pass"
-              type="password"
-              placeholder="Enter password"
-            />
-          </div>
-          <button
-            class="tl-button tl-button--primary tl-button--md tl-button--full-width"
-          >
-            Sign In
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-```
-
----
-
-## Dashboard Layout (Header + Sidebar + Content)
-
-```html
-<body class="scania tds-mode-light">
-  <!-- Header -->
-  <header class="tl-header">
-    <nav class="tl-header__nav">
-      <ul class="tl-header__list">
-        <li class="tl-header__item">
-          <a class="tl-header__item-wrapper" href="/"
-            ><span class="tl-header__brand"></span
-          ></a>
-        </li>
-        <li class="tl-header__item">
-          <div class="tl-header__title">
-            <span class="tl-header__title-text">Fleet Manager</span>
-          </div>
-        </li>
-        <li class="tl-header__middle-spacer"></li>
-        <li class="tl-header__item">
-          <button class="tl-header__item-wrapper" aria-label="Notifications">
-            <span class="tl-icon tl-icon--notification"></span>
-          </button>
-        </li>
-      </ul>
-    </nav>
-  </header>
-
-  <!-- Layout -->
-  <div style="display: flex; min-height: calc(100vh - 64px);">
-    <!-- Side Menu -->
-    <nav
-      class="tl-side-menu tl-side-menu--persistent"
-      aria-label="Main navigation"
-      style="position: static; height: auto;"
-    >
-      <div class="tl-side-menu__wrapper tl-side-menu__wrapper--open">
-        <aside class="tl-side-menu__aside">
-          <div class="tl-side-menu__navigation">
-            <div class="tl-side-menu__list-wrapper">
-              <ul class="tl-side-menu__upper-list">
-                <li>
-                  <a
-                    class="tl-side-menu__item tl-side-menu__item--selected"
-                    href="/dashboard"
-                  >
-                    <span class="tl-icon tl-icon--dashboard"></span> Dashboard
-                  </a>
-                </li>
-                <li>
-                  <a class="tl-side-menu__item" href="/vehicles">
-                    <span class="tl-icon tl-icon--truck"></span> Vehicles
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </aside>
-      </div>
-    </nav>
-
-    <!-- Main Content -->
-    <main
-      style="flex: 1; padding: var(--dimension-space-medium); background-color: var(--color-background-base);"
-    >
-      <!-- Cards grid -->
-      <div
-        style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px;"
-      >
-        <div class="tl-card">
-          <div class="tl-card__header">
-            <div class="tl-card__headings">
-              <span class="tl-card__title">Total Vehicles</span>
-            </div>
-          </div>
-          <div class="tl-card__body">
-            <div
-              class="tl-card__content"
-              style="max-inline-size: unset; font-size: 32px; font-weight: 700;"
-            >
-              142
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Table -->
-      <table class="tl-table tl-table--responsive">
-        <thead class="tl-table__header">
-          <tr class="tl-table__row">
-            <th class="tl-table__header-cell">Vehicle</th>
-            <th class="tl-table__header-cell">Status</th>
-            <th class="tl-table__header-cell">Location</th>
-          </tr>
-        </thead>
-        <tbody class="tl-table__body">
-          <tr class="tl-table__row">
-            <td class="tl-table__body-cell">SCN-2024-001</td>
-            <td class="tl-table__body-cell">Active</td>
-            <td class="tl-table__body-cell">Södertälje</td>
-          </tr>
-        </tbody>
-      </table>
-    </main>
-  </div>
-</body>
-```
-
----
-
-## Form Page
-
-```html
-<main
-  style="max-width: 600px; margin: 0 auto; padding: var(--dimension-space-medium);"
->
-  <h2
-    style="font-family: var(--scania-font-family-default); font-weight: var(--scania-font-weight-bold); margin-bottom: 24px;"
-  >
-    New Vehicle Registration
-  </h2>
-
-  <form>
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div class="tl-text-field tl-text-field--lg">
-        <label class="tl-text-field__label" for="vin">VIN Number</label>
-        <input
-          class="tl-text-field__input"
-          id="vin"
-          type="text"
-          placeholder="Enter VIN"
-        />
-      </div>
-
-      <div class="tl-dropdown tl-dropdown--lg">
-        <label class="tl-dropdown__label" for="type">Vehicle Type</label>
-        <select class="tl-dropdown__select" id="type">
-          <option value="">Select type</option>
-          <option value="truck">Truck</option>
-          <option value="bus">Bus</option>
-        </select>
-      </div>
-
-      <div class="tl-datetime">
-        <label class="tl-datetime__label" for="reg-date"
-          >Registration Date</label
-        >
-        <div class="tl-datetime__wrapper">
-          <input class="tl-datetime__input" id="reg-date" type="date" />
-        </div>
-      </div>
-
-      <div class="tl-textarea">
-        <label class="tl-textarea__label" for="notes">Notes</label>
-        <textarea
-          class="tl-textarea__input"
-          id="notes"
-          rows="4"
-          placeholder="Additional details..."
-        ></textarea>
-      </div>
-
-      <label class="tl-checkbox">
-        <input class="tl-checkbox__input" type="checkbox" />
-        <span class="tl-checkbox__label"
-          >I confirm all information is correct</span
-        >
-      </label>
-
-      <div style="display: flex; gap: 16px; padding-top: 8px;">
-        <button
-          type="button"
-          class="tl-button tl-button--secondary tl-button--md"
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          class="tl-button tl-button--primary tl-button--md"
-        >
-          Register
-        </button>
-      </div>
-    </div>
-  </form>
-</main>
-```
-
----
-
-# AI Assistant Prompt Rules
-
-## CRITICAL: NO INLINE STYLES
-
-**NEVER EVER use inline `style=""` attributes for design properties on ANY element, especially not on Tegel components.**
-
-This includes:
-
-- ❌ Colors: `style="color: ..."` or `style="background-color: ..."`
-- ❌ Spacing: `style="padding: ..."` or `style="margin: ..."`
-- ❌ Typography: `style="font-size: ..."` or `style="font-weight: ..."`
-- ❌ Any design tokens: `style="background-color: var(--color-system-success-discrete);"`
-
-**ALWAYS create CSS classes instead:**
-
-- ✅ Define class in `<style>` section with Tegel tokens
-- ✅ Use BEM naming: `.custom-component--variant`
-- ✅ Mark with comment: `<!-- CUSTOM: Description -->`
-
-**If a Tegel component doesn't have the variant you need (e.g., status badges), create a custom component with proper CSS classes, NOT inline styles.**
-
----
-
-## Component Generation
-
-1. When the user asks for a button, ALWAYS default to `tl-button tl-button--md` (variant is optional).
-2. When the user asks for a button with icon:
-   - ALWAYS add `tl-button--icon` modifier
-   - ALWAYS put text BEFORE the icon
-   - ALWAYS add `aria-hidden="true"` to the icon
-   - Example: `<button class="tl-button tl-button--icon tl-button--md">Save<span class="tl-icon tl-icon--save" aria-hidden="true"></span></button>`
-3. When the user asks for an icon-only button:
-   - ALWAYS add `tl-button--only-icon` modifier
-   - ALWAYS add `aria-label` attribute describing the action
-   - Example: `<button class="tl-button tl-button--only-icon tl-button--md" aria-label="Settings"><span class="tl-icon tl-icon--settings"></span></button>`
-4. When the user asks for an input/text field, ALWAYS default to `tl-text-field tl-text-field--lg` with an external label.
-5. When the user asks for a card, ALWAYS include `tl-card__header` and `tl-card__body` sections.
-6. When the user asks for a table, ALWAYS include `tl-table__header` with `th.tl-table__header-cell` and `tl-table__body`.
-
-## Code Quality
-
-7. Generate ALWAYS complete, production-ready HTML – never pseudocode.
-8. Generate ALWAYS all necessary wrapper elements (e.g., `tl-card__body` > `tl-card__content`).
-9. Include ALWAYS relevant ARIA attributes for accessibility:
-   - Decorative icons in buttons with text: `aria-hidden="true"`
-   - Icon-only buttons: `aria-label="Action description"`
-   - Form labels: proper `for` and `id` attributes
-10. Comment HTML with `<!-- -->` to explain structure sections.
-11. Use ALWAYS the `scania tds-mode-light` classes on the `<body>` or root element.
-
-## Token Usage
-
-12. Use NEVER hardcoded color values – ALWAYS CSS custom properties.
-13. Use NEVER hardcoded pixel spacing – prefer Tegel spacing tokens.
-14. Use NEVER inline styles for any design properties (color, background, spacing, typography).
-    - ❌ `style="color: blue"` or `style="color: var(--color-foreground-text-accent-default)"`
-    - ✅ Create CSS class: `.custom-text { color: var(--color-foreground-text-accent-default); }`
-15. Use NEVER `style="background: #f5f5f5"` – create a CSS class instead.
-16. If a Tegel component lacks a needed variant, create a CUSTOM component with BEM classes, not inline styles.
-
-## Custom Components
-
-17. If the user requests a component that doesn't exist in Tegel Lite, build it using existing tokens and classes, and clearly mark it with a comment: `<!-- CUSTOM: Not a native Tegel Lite component -->`.
-18. Custom components should follow the BEM naming convention: `.tl-custom-{name}__element--modifier`.
-
-## File Structure
-
-19. Always import CSS files in the correct order: variables → global → components.
-20. Never modify the Tegel Lite source CSS files.
-21. Place custom overrides in a separate stylesheet loaded AFTER the Tegel files.
-
-## Dark Mode
-
-22. To switch to dark mode, replace `tds-mode-light` with `tds-mode-dark` on the wrapper element.
-23. All components automatically adapt – no additional work needed.
-24. When showing dark mode examples, add `tds-mode-dark` to the root wrapper.
-
-## Icon Usage
-
-25. Icons use the pattern `tl-icon tl-icon--{name}` and optionally `tl-icon--{size}`.
-26. Icons inherit color from parent. Use `color: var(--color-foreground-icon-strong)` on parent if needed.
-27. Decorative icons in buttons with text MUST have `aria-hidden="true"`.
-28. Icon-only interactive elements MUST have `aria-label` describing the action.
-
-## Size Convention
-
-29. Component sizes follow this convention (unless stated otherwise):
-    - `--xs` = 24px height (buttons only)
-    - `--sm` = 40px height
-    - `--md` = 48px height
-    - `--lg` = 56px height (default for inputs)
-
-## Mode Variants
-
-30. Components with `--primary` use `var(--color-background-layer-01)`.
-31. Components with `--secondary` use `var(--color-background-layer-02)`.
-32. Variant modifiers (primary, secondary, ghost, danger) are optional for buttons – use based on context.