@scania/tegel-lite 0.0.1 → 0.0.2-rules-beta.0

package/.github/copilot-instructions.md

@@ -0,0 +1,2045 @@
+# @scania/tegel-lite — AI Coding Rules
+
+> Auto-generated by `npm run generate:ai-rules`. Do not edit manually.
+
+> Generated: 2026-02-13
+
+## 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.