npm - @scania/tegel-lite - Versions diffs - 0.0.3-rules-beta.9 → 0.1.0 - Mend

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

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

Files changed (38) hide show

package/README.md +0 -29
package/dist/assets/icons/scania/microphone.svg +4 -0
package/dist/assets/icons/scania/microphone_inactive.svg +7 -0
package/dist/assets/icons/scania/notification_snooze.svg +6 -0
package/dist/assets/icons/scania/paperclip.svg +3 -0
package/dist/components.css +2036 -1807
package/dist/global.css +3 -2
package/dist/scania-variables.css +8 -0
package/dist/tl-button.css +19 -0
package/dist/tl-dropdown.css +36 -1
package/dist/tl-folder-tabs.css +64 -0
package/dist/tl-header.css +207 -51
package/dist/tl-icon.css +16 -0
package/dist/tl-inline-tabs.css +81 -0
package/dist/tl-navigation-tabs.css +81 -0
package/dist/tl-slider.css +1024 -1485
package/dist/tl-text-field.css +32 -13
package/package.json +3 -14
package/.ai/rules/01-design-tokens.mdc +0 -318
package/.ai/rules/02-components-forms.mdc +0 -396
package/.ai/rules/03-components-display.mdc +0 -474
package/.ai/rules/04-components-navigation.mdc +0 -358
package/.ai/rules/05-guidelines.mdc +0 -144
package/.ai/rules/06-patterns.mdc +0 -352
package/.cursor/rules/tegel-lite/01-design-tokens.mdc +0 -317
package/.cursor/rules/tegel-lite/02-components-forms.mdc +0 -395
package/.cursor/rules/tegel-lite/03-components-display.mdc +0 -473
package/.cursor/rules/tegel-lite/04-components-navigation.mdc +0 -357
package/.cursor/rules/tegel-lite/05-guidelines.mdc +0 -143
package/.cursor/rules/tegel-lite/06-patterns.mdc +0 -351
package/.github/copilot-instructions.md +0 -2045
package/AGENTS.md +0 -2045
package/CLAUDE.md +0 -2045
package/bin/setup-ai-rules.js +0 -368
package/dist/tl-folder-tab.css +0 -87
package/dist/tl-inline-tab.css +0 -80
package/dist/tl-navigation-tab.css +0 -114
package/dist/tl-textarea-mixins.css +0 -0

package/.ai/rules/06-patterns.mdc DELETED Viewed

@@ -1,352 +0,0 @@
----
-description: Common page patterns and AI assistant prompt rules for code generation
-alwaysApply: true
----
-# 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.

package/.cursor/rules/tegel-lite/01-design-tokens.mdc DELETED Viewed

@@ -1,317 +0,0 @@
----
-description: 01-design-tokens
-alwaysApply: true
----
-# 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    |