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

package/.ai/rules/04-components-navigation.mdc

@@ -1,358 +0,0 @@
----
-description: Navigation and utility components including tabs, breadcrumbs, header, footer, side menu
-alwaysApply: true
----
-
-# 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>
-```

package/.ai/rules/05-guidelines.mdc

@@ -1,144 +0,0 @@
----
-description: Spacing, color usage, responsiveness, accessibility, and code conventions
-alwaysApply: true
----
-
-# 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.