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

package/README.dev.md

@@ -11,7 +11,7 @@ Tegel Lite is a **styles-only** component library that provides the same design
 ## 📦 Installation
 
 ```bash
-npm install @scania/tegel-lite
+npm install @scania/tegel-lite@0.0.1-beta.10
 ```
 
 ## 🚀 Quick Start

package/README.md

@@ -10,7 +10,7 @@
 ## Installation
 
 ```bash
-npm install @scania/tegel-lite
+npm install @scania/tegel-lite@0.0.1-beta.10
 ```
 
 ## Quick Start
@@ -87,6 +87,35 @@ dist/
 
 All components use the `tl-` prefix.
 
+## AI Coding Rules
+
+This package ships with AI-aware coding rules that help AI assistants (Cursor, Claude Code, GitHub Copilot, OpenAI Codex) write correct tegel-lite markup.
+
+After installing the package, run:
+
+```bash
+npx tegel-lite-setup-rules
+```
+
+An interactive CLI will let you choose which AI tools to configure:
+
+| AI Tool | Files installed |
+| --- | --- |
+| **Cursor** | `.cursor/rules/tegel-lite/*.mdc` |
+| **Claude Code** | `CLAUDE.md` at project root |
+| **GitHub Copilot** | `.github/copilot-instructions.md` |
+| **OpenAI Codex** | `AGENTS.md` at project root |
+
+All options are selected by default. Use arrow keys to navigate, space to toggle, and enter to confirm.
+
+To skip the interactive prompt and install all formats at once:
+
+```bash
+npx tegel-lite-setup-rules --all
+```
+
+Re-running the command will update existing rules in place (using section markers) without duplicating content.
+
 ## Documentation
 
 Full documentation: **[tegel.scania.com](https://tegel.scania.com)**

package/bin/setup-ai-rules.js

@@ -0,0 +1,347 @@
+#!/usr/bin/env node
+
+/**
+ * setup-ai-rules.js
+ *
+ * Interactive CLI to copy @scania/tegel-lite AI coding rules into a user's project.
+ *
+ * Usage:
+ *   npx tegel-lite-setup-rules          # Interactive mode
+ *   npx tegel-lite-setup-rules --all    # Copy all rule formats (skip prompts)
+ *
+ * Plain Node.js — no external dependencies. Uses built-in readline.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, '..');
+
+// Where files will be copied to
+const projectRoot = process.cwd();
+
+// Markers for idempotent updates in aggregated files
+const MARKER_START = '<!-- START @scania/tegel-lite rules -->';
+const MARKER_END = '<!-- END @scania/tegel-lite rules -->';
+
+// ── Tool definitions ──────────────────────────────────────────────────────────
+
+const TOOLS = [
+  {
+    id: 'cursor',
+    label: 'Cursor',
+    description: '.cursor/rules/tegel-lite/*.mdc',
+    sourceDir: path.join(packageRoot, '.cursor', 'rules', 'tegel-lite'),
+    targetDir: path.join(projectRoot, '.cursor', 'rules', 'tegel-lite'),
+    mode: 'directory',
+  },
+  {
+    id: 'claude',
+    label: 'Claude Code',
+    description: 'CLAUDE.md at project root',
+    sourceFile: path.join(packageRoot, 'CLAUDE.md'),
+    targetFile: path.join(projectRoot, 'CLAUDE.md'),
+    mode: 'aggregated',
+  },
+  {
+    id: 'copilot',
+    label: 'GitHub Copilot',
+    description: '.github/copilot-instructions.md',
+    sourceFile: path.join(packageRoot, '.github', 'copilot-instructions.md'),
+    targetFile: path.join(projectRoot, '.github', 'copilot-instructions.md'),
+    mode: 'aggregated',
+  },
+  {
+    id: 'codex',
+    label: 'OpenAI Codex',
+    description: 'AGENTS.md at project root',
+    sourceFile: path.join(packageRoot, 'AGENTS.md'),
+    targetFile: path.join(projectRoot, 'AGENTS.md'),
+    mode: 'aggregated',
+  },
+];
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/**
+ * Wrap content in section markers for idempotent updates.
+ */
+function wrapWithMarkers(content) {
+  return `${MARKER_START}\n${content.trim()}\n${MARKER_END}`;
+}
+
+/**
+ * Replace the marked section in existing file content, or append if not found.
+ */
+function upsertMarkedSection(existingContent, newSection) {
+  const pattern = `${escapeRegex(MARKER_START)}[\\s\\S]*?${escapeRegex(MARKER_END)}`;
+  const markerRegex = new RegExp(pattern);
+
+  if (markerRegex.test(existingContent)) {
+    // Replace existing section
+    return existingContent.replace(new RegExp(pattern), newSection);
+  }
+
+  // Append with spacing
+  const separator = existingContent.trim().length > 0 ? '\n\n' : '';
+  return existingContent.trimEnd() + separator + newSection + '\n';
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Ask a yes/no question via readline.
+ */
+function askYesNo(rl, question) {
+  return new Promise((resolve) => {
+    rl.question(`${question} (y/N): `, (answer) => {
+      resolve(answer.trim().toLowerCase() === 'y');
+    });
+  });
+}
+
+// ── Checkbox UI ───────────────────────────────────────────────────────────────
+
+/**
+ * Display an interactive checkbox list in the terminal.
+ * Arrow keys navigate, space toggles, enter confirms.
+ */
+function showCheckboxList(items) {
+  return new Promise((resolve) => {
+    const selected = items.map(() => true); // All selected by default
+    let cursor = 0;
+
+    const { stdin, stdout } = process;
+
+    // Check if we can use raw mode (not available in all environments)
+    if (!stdin.isTTY) {
+      console.log('Non-interactive terminal detected. Selecting all tools.');
+      resolve(items.map((_, i) => i));
+      return;
+    }
+
+    function render() {
+      // Move cursor up to overwrite previous render (except first time)
+      stdout.write('\x1B[?25l'); // Hide cursor
+
+      const lines = items.map((item, i) => {
+        const checkbox = selected[i] ? '\x1B[32m◉\x1B[0m' : '○';
+        const pointer = i === cursor ? '\x1B[36m❯\x1B[0m ' : '  ';
+        const desc = `\x1B[2m${item.description}\x1B[0m`;
+        return `${pointer}${checkbox} ${item.label}  ${desc}`;
+      });
+
+      lines.push('');
+      lines.push('\x1B[2m↑↓ navigate · space toggle · enter confirm\x1B[0m');
+
+      return lines.join('\n');
+    }
+
+    // Initial render
+    const output = render();
+    stdout.write(output);
+
+    stdin.setRawMode(true);
+    stdin.resume();
+    stdin.setEncoding('utf-8');
+
+    function onKeypress(key) {
+      // Ctrl+C
+      if (key === '\x03') {
+        stdin.setRawMode(false);
+        stdin.removeListener('data', onKeypress);
+        stdout.write('\x1B[?25h\n'); // Show cursor
+        process.exit(0);
+      }
+
+      // Enter
+      if (key === '\r' || key === '\n') {
+        stdin.setRawMode(false);
+        stdin.removeListener('data', onKeypress);
+        stdout.write('\x1B[?25h\n'); // Show cursor
+        resolve(selected.reduce((acc, sel, i) => (sel ? [...acc, i] : acc), []));
+        return;
+      }
+
+      // Space — toggle
+      if (key === ' ') {
+        selected[cursor] = !selected[cursor];
+      }
+
+      // Arrow up or k
+      if (key === '\x1B[A' || key === 'k') {
+        cursor = (cursor - 1 + items.length) % items.length;
+      }
+
+      // Arrow down or j
+      if (key === '\x1B[B' || key === 'j') {
+        cursor = (cursor + 1) % items.length;
+      }
+
+      // Re-render: move up to overwrite
+      const lineCount = items.length + 2;
+      stdout.write(`\x1B[${lineCount}A\x1B[0J`);
+      stdout.write(render());
+    }
+
+    stdin.on('data', onKeypress);
+  });
+}
+
+// ── Copy logic ────────────────────────────────────────────────────────────────
+
+/**
+ * Copy a directory of files (e.g. .cursor/rules/tegel-lite/*.mdc).
+ */
+function copyDirectoryTool(tool, rl, skipPrompt) {
+  return copyDirectoryToolAsync(tool, rl, skipPrompt);
+}
+
+async function copyDirectoryToolAsync(tool, rl, skipPrompt) {
+  if (!fs.existsSync(tool.sourceDir)) {
+    console.log(`  ⚠ Source not found: ${path.relative(packageRoot, tool.sourceDir)}`);
+    console.log('    Run "npm run generate:ai-rules" in the package first.');
+    return;
+  }
+
+  const files = fs.readdirSync(tool.sourceDir).filter((f) => f.endsWith('.mdc'));
+
+  if (files.length === 0) {
+    console.log('  ⚠ No .mdc files found in source directory.');
+    return;
+  }
+
+  // Check if target directory already exists
+  if (fs.existsSync(tool.targetDir) && !skipPrompt) {
+    const overwrite = await askYesNo(
+      rl,
+      `  Target exists: ${path.relative(projectRoot, tool.targetDir)}. Overwrite?`,
+    );
+    if (!overwrite) {
+      console.log('  Skipped.');
+      return;
+    }
+  }
+
+  fs.mkdirSync(tool.targetDir, { recursive: true });
+
+  for (const file of files) {
+    const src = path.join(tool.sourceDir, file);
+    const dest = path.join(tool.targetDir, file);
+    fs.copyFileSync(src, dest);
+    console.log(`  Copied: ${path.relative(projectRoot, dest)}`);
+  }
+}
+
+/**
+ * Copy an aggregated file (CLAUDE.md, AGENTS.md, copilot-instructions.md).
+ * Uses markers for idempotent upsert.
+ */
+async function copyAggregatedTool(tool, rl, skipPrompt) {
+  if (!fs.existsSync(tool.sourceFile)) {
+    console.log(`  ⚠ Source not found: ${path.relative(packageRoot, tool.sourceFile)}`);
+    console.log('    Run "npm run generate:ai-rules" in the package first.');
+    return;
+  }
+
+  const sourceContent = fs.readFileSync(tool.sourceFile, 'utf-8');
+  const wrappedContent = wrapWithMarkers(sourceContent);
+  const targetRelative = path.relative(projectRoot, tool.targetFile);
+
+  if (fs.existsSync(tool.targetFile)) {
+    const existingContent = fs.readFileSync(tool.targetFile, 'utf-8');
+
+    // Check if markers already exist
+    if (existingContent.includes(MARKER_START)) {
+      // Update in place
+      const updatedContent = upsertMarkedSection(existingContent, wrappedContent);
+      fs.writeFileSync(tool.targetFile, updatedContent, 'utf-8');
+      console.log(`  Updated: ${targetRelative} (replaced existing tegel-lite section)`);
+      return;
+    }
+
+    // File exists but no markers — ask to append
+    if (!skipPrompt) {
+      const append = await askYesNo(
+        rl,
+        `  File exists: ${targetRelative}. Append tegel-lite rules?`,
+      );
+      if (!append) {
+        console.log('  Skipped.');
+        return;
+      }
+    }
+
+    const updatedContent = upsertMarkedSection(existingContent, wrappedContent);
+    fs.writeFileSync(tool.targetFile, updatedContent, 'utf-8');
+    console.log(`  Updated: ${targetRelative} (appended tegel-lite section)`);
+  } else {
+    // Create new file
+    const dir = path.dirname(tool.targetFile);
+    fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(tool.targetFile, wrappedContent + '\n', 'utf-8');
+    console.log(`  Created: ${targetRelative}`);
+  }
+}
+
+// ── Main ──────────────────────────────────────────────────────────────────────
+
+async function main() {
+  const args = process.argv.slice(2);
+  const skipPrompt = args.includes('--all');
+
+  console.log('');
+  console.log('\x1B[1m@scania/tegel-lite — AI Coding Rules Setup\x1B[0m');
+  console.log('');
+
+  let selectedIndices;
+
+  if (skipPrompt) {
+    console.log('Installing all rule formats (--all flag).\n');
+    selectedIndices = TOOLS.map((_, i) => i);
+  } else {
+    console.log('Select which AI tools to configure:\n');
+    selectedIndices = await showCheckboxList(TOOLS);
+  }
+
+  if (selectedIndices.length === 0) {
+    console.log('No tools selected. Exiting.');
+    process.exit(0);
+  }
+
+  const selectedTools = selectedIndices.map((i) => TOOLS[i]);
+
+  console.log(`\nInstalling rules for: ${selectedTools.map((t) => t.label).join(', ')}\n`);
+
+  // Create a readline interface for yes/no prompts
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  for (const tool of selectedTools) {
+    console.log(`\n${tool.label}:`);
+
+    if (tool.mode === 'directory') {
+      await copyDirectoryTool(tool, rl, skipPrompt);
+    } else {
+      await copyAggregatedTool(tool, rl, skipPrompt);
+    }
+  }
+
+  rl.close();
+
+  console.log('\n\x1B[32m✓ Done!\x1B[0m AI coding rules installed successfully.');
+  console.log('\nRe-run this command anytime to update rules to the latest version.\n');
+}
+
+main().catch((err) => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});

package/dist/components.css

@@ -941,11 +941,11 @@
 }
 .traton .tl-card--primary {
   --card-box: none;
-  --card-background: var(--card-background-secondary);
+  --card-background: transparent;
 }
 .traton .tl-card--secondary {
   --card-box: none;
-  --card-background: var(--card-background-primary);
+  --card-background: transparent;
 }
 
 /* Dark mode */
@@ -966,7 +966,10 @@
 }
 
 .traton .tds-mode-dark .tl-card--primary {
-  --card-background: var(--color-background-base);
+  --card-background: transparent;
+}
+.traton .tds-mode-dark .tl-card--secondary {
+  --card-background: transparent;
 }
 
 .tl-card {
@@ -8318,6 +8321,69 @@ body {
   fill: var(--folder-tabs-scroll-button-text);
 }
 
+/* tl-folder-tabs.scss (overlay buttons, no JS) */
+.tl-folder-tabs__tab {
+  all: unset;
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 142px;
+  inline-size: auto;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 16px;
+  text-align: left;
+  cursor: pointer;
+  border-left: 1px solid transparent;
+  border-top: 2px solid var(--folder-tab-surface);
+  background-color: var(--folder-tab-surface);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab + .tl-folder-tabs__tab {
+  border-left-color: var(--folder-tab-divider);
+}
+.tl-folder-tabs__tab:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+  background-color: var(--folder-tab-surface-hover);
+  border-top-color: var(--folder-tab-surface-hover);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected {
+  background-color: var(--folder-tab-surface-selected);
+  border-top-color: var(--folder-tab-border-selected);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--folder-tab-surface-selected);
+  z-index: 1;
+}
+.tl-folder-tabs__tab--disabled {
+  color: var(--folder-tab-text-disabled);
+  cursor: not-allowed;
+  user-select: none;
+}
+.tl-folder-tabs__tab--disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .tl-inline-tabs {
   /* Horizontal divider */
   --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
@@ -8411,6 +8477,86 @@ body {
   fill: var(--inline-tabs-scroll-button-text);
 }
 
+.tl-inline-tabs__tab {
+  all: unset;
+  margin-right: 32px;
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab * {
+  box-sizing: border-box;
+}
+.tl-inline-tabs__tab {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--inline-tabs-tab);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 20px 4px;
+}
+.tl-inline-tabs__tab:focus-visible {
+  outline: none;
+}
+.tl-inline-tabs__tab:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 18px 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
+  z-index: 2;
+  pointer-events: none;
+}
+.tl-inline-tabs__tab::after {
+  background-color: var(--inline-tabs-tab-indicator-hover);
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  z-index: 1;
+  transition: width 0.15s ease-in-out 0s;
+}
+.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
+  width: 0%;
+}
+.tl-inline-tabs__tab:hover {
+  cursor: pointer;
+  color: var(--inline-tabs-tab-hover);
+}
+.tl-inline-tabs__tab:hover::after {
+  width: 100%;
+}
+.tl-inline-tabs__tab--selected {
+  color: var(--inline-tabs-tab-selected);
+}
+.tl-inline-tabs__tab--selected::after {
+  background-color: var(--inline-tabs-tab-indicator-active);
+  width: 100%;
+}
+.tl-inline-tabs__tab--disabled {
+  color: var(--inline-tabs-tab-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-inline-tabs__tab--disabled::after {
+  content: none;
+}
+.tl-inline-tabs__tab--disabled:focus-visible::before {
+  box-shadow: none;
+}
+
 .tl-navigation-tabs__tab {
   /* tds-navigation-tab variables */
   --navigation-tabs-tab: var(--color-foreground-text-soft);
@@ -8502,6 +8648,86 @@ body {
   fill: var(--navigation-tabs-scroll-button-color);
 }
 
+.tl-navigation-tabs__tab {
+  all: unset;
+  margin-right: 32px;
+  box-sizing: border-box;
+}
+.tl-navigation-tabs__tab * {
+  box-sizing: border-box;
+}
+.tl-navigation-tabs__tab {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--navigation-tabs-tab);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 26px 4px;
+}
+.tl-navigation-tabs__tab:focus-visible {
+  outline: none;
+}
+.tl-navigation-tabs__tab:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 18px 0;
+  border-radius: 2px;
+  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
+  z-index: 2;
+  pointer-events: none;
+}
+.tl-navigation-tabs__tab::after {
+  background-color: var(--navigation-tabs-tab-indicator-hover);
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  z-index: 1;
+  transition: width 0.15s ease-in-out 0s;
+}
+.tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
+  width: 0%;
+}
+.tl-navigation-tabs__tab:hover {
+  cursor: pointer;
+  color: var(--navigation-tabs-tab-hover);
+}
+.tl-navigation-tabs__tab:hover::after {
+  width: 100%;
+}
+.tl-navigation-tabs__tab--selected {
+  color: var(--navigation-tabs-tab-selected);
+}
+.tl-navigation-tabs__tab--selected::after {
+  background-color: var(--navigation-tabs-tab-indicator-active);
+  width: 100%;
+}
+.tl-navigation-tabs__tab--disabled {
+  color: var(--navigation-tabs-tab-disabled);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.tl-navigation-tabs__tab--disabled::after {
+  content: none;
+}
+.tl-navigation-tabs__tab--disabled:focus-visible::before {
+  box-shadow: none;
+}
+
 .tl-textarea {
   --textarea-background-primary: var(--color-background-layer-01);
   --textarea-background-secondary: var(--color-background-layer-02);

package/dist/global.css

@@ -4959,13 +4959,13 @@ html {
 .tds-mode-light .tds-mode-variant-primary {
   --tds-table-body-row-background: var(--tds-grey-50);
   --tds-table-zebra-mode-backround: var(--tds-white);
-  --tds-table-body-row-background-selected: var(--tds-grey-50);
+  --tds-table-body-row-background-selected: var(--tds-grey-100);
 }
 :root .tds-mode-variant-secondary,
 .tds-mode-light .tds-mode-variant-secondary {
   --tds-table-body-row-background: var(--tds-white);
   --tds-table-zebra-mode-backround: var(--tds-grey-50);
-  --tds-table-body-row-background-selected: var(--tds-white);
+  --tds-table-body-row-background-selected: var(--tds-grey-100);
 }
 :root,
 .tds-mode-light {
@@ -5017,14 +5017,18 @@ html {
 .tds-mode-dark .tds-mode-variant-primary {
   --tds-table-body-row-background: var(--tds-grey-850);
   --tds-table-zebra-mode-backround: var(--tds-grey-900);
+  --tds-table-body-row-background-selected: var(--tds-grey-700);
+  --tds-table-body-row-background-selected-hover: var(--tds-grey-800);
 }
 .tds-mode-dark .tds-mode-variant-secondary {
   --tds-table-body-row-background: var(--tds-grey-900);
   --tds-table-zebra-mode-backround: var(--tds-grey-850);
+  --tds-table-body-row-background-selected: var(--tds-grey-700);
+  --tds-table-body-row-background-selected-hover: var(--tds-grey-800);
 }
 .tds-mode-dark {
   --tds-table-body-row-background-selected: var(--tds-grey-700);
-  --tds-table-body-row-background-selected-hover: var(--tds-grey-700);
+  --tds-table-body-row-background-selected-hover: var(--tds-grey-800);
   /* Table input */
   --tds-table-input-background-focus: var(--tds-grey-800);
   --tds-table-input-background-hover: var(--tds-white-50);