spoko-design-system 1.5.3 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.7.0](https://github.com/polo-blue/sds/compare/v1.6.0...v1.7.0) (2025-10-29)
+
+### Features
+
+* add Tippy.js tooltips with ProductEngine components and API-driven translations ([eb18a17](https://github.com/polo-blue/sds/commit/eb18a171a3e5d80889f64a645d82767898561764))
+
+## [1.6.0](https://github.com/polo-blue/sds/compare/v1.5.3...v1.6.0) (2025-10-28)
+
+### Features
+
+* add accent.medium color ([#0082d6](https://github.com/polo-blue/sds/issues/0082d6)) to theme palette ([0cb1f3b](https://github.com/polo-blue/sds/commit/0cb1f3b095a745a4991e5062af5ee5d5679297c7)), closes [#0099da](https://github.com/polo-blue/sds/issues/0099da) [#0087c1](https://github.com/polo-blue/sds/issues/0087c1)
+
 ## [1.5.3](https://github.com/polo-blue/sds/compare/v1.5.2...v1.5.3) (2025-10-28)
 
 ### Bug Fixes

package/index.ts

@@ -19,6 +19,8 @@ export { default as Headline } from './src/components/Headline.vue';
 export { default as Quote } from './src/components/Quote.vue';
 
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
+export { default as ProductEngine } from './src/components/Product/ProductEngine.vue';
+export { default as ProductEngines } from './src/components/Product/ProductEngines.vue';
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
 export { default as ProductColors } from './src/components/Product/ProductColors.vue';
 export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.5.3",
+  "version": "1.7.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -53,12 +53,13 @@
   ],
   "dependencies": {
     "@algolia/client-search": "^5.41.0",
-    "@astrojs/mdx": "^4.3.8",
+    "@astrojs/mdx": "^4.3.9",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/ts-plugin": "^1.10.5",
-    "@astrojs/vue": "^5.1.1",
+    "@astrojs/vue": "^5.1.2",
     "@docsearch/css": "^4.2.0",
+    "@floating-ui/vue": "^1.1.9",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/bx": "^1.2.2",
@@ -107,6 +108,7 @@
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
     "swiper": "^12.0.3",
+    "tippy.js": "^6.3.7",
     "unocss": "66.5.4",
     "vite-plugin-pwa": "^1.1.0",
     "vue": "^3.5.22"
@@ -115,14 +117,14 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.9.2",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
     "@typescript-eslint/parser": "^8.46.2",
     "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.15.1",
+    "astro": "^5.15.2",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.4.0",

package/src/components/PrCode.vue

@@ -27,69 +27,31 @@ const props = defineProps({
 </script>
 
 <template>
-  <span class="relative has-tooltip inline-block">
-    <span
-      data-pagefind-filter="PR-Code"
-      class="btn-prcode"
-      :class="[
-        prcode.variant_category ? `btn-prcode--variant-${prcode.variant_category.toLowerCase()}` : '',
-        { 'btn-prcode--pdp': isPdp }
-      ]"
-    >
-      {{ prcode.code }}
-    </span>
-
-    <!-- Dynamic Tooltip with description from API -->
-    <div v-if="props.prcode.description" class="tooltip">
-      <div class="tooltip-content">
-        {{ props.prcode.description }}
-        <span v-if="props.prcode.group" class="tooltip-group">
-          ({{ props.prcode.group }})
-        </span>
-      </div>
-    </div>
+  <span
+    data-pagefind-filter="PR-Code"
+    class="btn-prcode"
+    :class="[
+      prcode.variant_category ? `btn-prcode--variant-${prcode.variant_category.toLowerCase()}` : '',
+      { 'btn-prcode--pdp': isPdp }
+    ]"
+    :data-tippy-content="prcode.description || undefined"
+  >
+    {{ prcode.code }}
   </span>
 </template>
 
 <style scoped>
-/* Base PrCode Button Styles */
+/* Base PrCode Styles */
 .btn-prcode {
-  @apply inline-block relative cursor-default;
+  @apply inline-block cursor-default;
+  @apply px-1.5 py-0.5;
+  @apply rounded;
 }
 
 .btn-prcode--pdp {
   @apply mb-1;
 }
 
-/* Tooltip Styles - Similar to ProductEngine */
-.tooltip {
-  @apply invisible absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-50;
-  @apply px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap;
-  @apply bg-blue-darker text-white text-xs;
-  @apply pointer-events-none;
-  max-width: 300px;
-  white-space: normal;
-}
-
-.has-tooltip:hover .tooltip {
-  @apply visible;
-}
-
-.tooltip-content {
-  @apply relative;
-}
-
-.tooltip-group {
-  @apply ml-2 opacity-75 text-xs font-light;
-}
-
-/* Tooltip Arrow */
-.tooltip::after {
-  content: '';
-  @apply absolute left-1/2 -translate-x-1/2 top-full;
-  @apply border-4 border-transparent border-t-blue-darker;
-}
-
 /* Semantic Variant Category Colors */
 /* GTI - Red */
 .btn-prcode--variant-gti {

package/src/components/Product/ProductEngine.vue

@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import type { PropType } from 'vue';
+import tippy, { type Instance } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import '../../styles/tippy-theme.css';
+
+/*
+  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
+  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
+*/
+
+interface Engine {
+  id?: number;
+  code: string;
+  name?: string;
+  info?: string | null;
+  serie?: {
+    value: string;
+    label: string;
+  };
+  type?: {
+    value: string;
+    translated: string;
+    label: string;
+  };
+  power?: {
+    kw: number;
+    ps: number;
+    ps_label: string;
+    label: string;
+  };
+  date?: {
+    value: string;
+    label: string;
+  };
+  displacement?: {
+    value: number;
+    label: string;
+  };
+  compression_ratio?: {
+    value: string | null;
+    label: string;
+  };
+  valves?: {
+    value: number | null;
+    label: string;
+  };
+  euro?: {
+    value: number;
+    label: string;
+  };
+  pivot?: any;
+
+  // Backward compatibility - old flat structure
+  kw?: number;
+  ps?: number;
+  cc?: number;
+  c_ratio?: string | null;
+}
+
+const props = defineProps({
+  engine: {
+    type: Object as PropType<Engine>,
+    required: true,
+  },
+  showComma: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  translations: {
+    type: Object as PropType<{
+      power?: string;
+      cc?: string;
+      compressionRatio?: string;
+      valves?: string;
+      euro?: string;
+      horsepowerUnit?: string; // 'PS' for German, 'KM' for Polish, 'HP' for English
+    }>,
+    default: () => ({
+      power: 'Power',
+      cc: 'CC',
+      compressionRatio: 'C. Ratio',
+      valves: 'Valves',
+      euro: 'Euro',
+      horsepowerUnit: 'PS',
+    }),
+    required: false,
+  },
+});
+
+const engineRef = ref<HTMLElement | null>(null);
+let tippyInstance: Instance | null = null;
+
+// Helper to get series value (supports both old and new API)
+const getSerieValue = (): string => {
+  if (props.engine.serie && typeof props.engine.serie === 'object') {
+    return props.engine.serie.value;
+  }
+  // Backward compatibility - old API
+  const serie = props.engine.serie as any;
+  if (!serie) return '';
+  return serie === 3 ? 'EA288' : serie === 2 ? 'EA189' : `Serie ${serie}`;
+};
+
+// Generate tooltip HTML content
+const getTooltipContent = () => {
+  // Header section
+  let headerContent = `<strong>${props.engine.name || props.engine.code}</strong>`;
+  if (props.engine.info) {
+    headerContent += ` <span class="info">${props.engine.info}</span>`;
+  }
+  const serieValue = getSerieValue();
+  if (serieValue) {
+    headerContent += `<div class="series-badge">${serieValue}</div>`;
+  }
+
+  const header = `<div class="tooltip-header">${headerContent}</div>`;
+
+  // Specs rows
+  const rows = [];
+
+  // Power (supports both new and old API structure)
+  const power = props.engine.power;
+  const oldKw = props.engine.kw;
+  const oldPs = props.engine.ps;
+
+  if (power || oldKw || oldPs) {
+    const powerValues = [];
+    const kw = power?.kw || oldKw;
+    const ps = power?.ps || oldPs;
+    const psLabel = power?.ps_label || props.translations.horsepowerUnit;
+    const powerLabel = power?.label || props.translations.power;
+
+    if (kw) powerValues.push(`${kw} kW`);
+    if (ps) powerValues.push(`${ps} ${psLabel}`);
+
+    if (powerValues.length) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${powerLabel}:</span><span class="tooltip-value">${powerValues.join(' / ')}</span></div>`);
+    }
+  }
+
+  // Displacement (CC)
+  const displacement = props.engine.displacement;
+  const oldCc = props.engine.cc;
+
+  if (displacement || oldCc) {
+    const ccValue = displacement?.value || oldCc;
+    const ccLabel = displacement?.label || props.translations.cc;
+
+    if (ccValue) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${ccLabel}:</span><span class="tooltip-value">${ccValue} cm³</span></div>`);
+    }
+  }
+
+  // Euro standard
+  const euro = props.engine.euro;
+
+  if (euro && typeof euro === 'object') {
+    if (euro.value) {
+      rows.push(`<div class="tooltip-row"><span class="tooltip-label">${euro.label}:</span><span class="tooltip-value">Euro ${euro.value}</span></div>`);
+    }
+  } else if (euro) {
+    // Backward compatibility - old API
+    rows.push(`<div class="tooltip-row"><span class="tooltip-label">${props.translations.euro}:</span><span class="tooltip-value">Euro ${euro}</span></div>`);
+  }
+
+  const specsContent = rows.length
+    ? `<div class="tooltip-specs">${rows.join('')}</div>`
+    : '';
+
+  return header + specsContent;
+};
+
+onMounted(() => {
+  if (engineRef.value) {
+    tippyInstance = tippy(engineRef.value, {
+      content: getTooltipContent(),
+      allowHTML: true,
+      theme: 'sds',
+      placement: 'top',
+      arrow: true,
+      animation: 'shift-away',
+      duration: [200, 150],
+      maxWidth: 280,
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (tippyInstance) {
+    tippyInstance.destroy();
+  }
+});
+</script>
+
+<template>
+  <span
+    ref="engineRef"
+    class="engine-code"
+    :class="`engine-code-${engine.code}`"
+  >
+    {{ engine.code }}<span v-if="showComma">,</span>
+  </span>
+</template>
+
+<style scoped>
+/* Engine Code Styles */
+.engine-code {
+  @apply inline-block mr-1;
+  @apply underline decoration-dotted underline-offset-4 py-0.5;
+  @apply decoration-neutral-light cursor-default;
+  @apply transition-colors duration-200;
+}
+
+.engine-code:hover {
+  @apply decoration-blue-darker dark:decoration-blue-light;
+}
+
+/* Semantic Engine Code Colors */
+/* GTI Engines - Red */
+.engine-code-CAVE,
+.engine-code-CTHE,
+.engine-code-DAJA,
+.engine-code-DAYB {
+  @apply text-red-600 dark:text-red-500;
+}
+
+/* WRC R Engine - Blue */
+.engine-code-CDLJ {
+  @apply text-blue-600 dark:text-blue-500;
+}
+
+/* Special Blue Engines */
+.engine-code-CPTA,
+.engine-code-CZEA {
+  @apply text-blue-700 dark:text-blue-600;
+}
+</style>

package/src/components/Product/ProductEngines.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { PropType } from 'vue';
+import ProductEngine from './ProductEngine.vue';
+
+/*
+  ProductEngines wrapper component
+  Displays a list of engine codes with tooltips
+*/
+
+interface Engine {
+  id?: number;
+  code: string;
+  name?: string;
+  info?: string | null;
+  serie?: {
+    value: string;
+    label: string;
+  } | number;
+  type?: {
+    value: string;
+    translated: string;
+    label: string;
+  };
+  power?: {
+    kw: number;
+    ps: number;
+    ps_label: string;
+    label: string;
+  };
+  date?: {
+    value: string;
+    label: string;
+  };
+  displacement?: {
+    value: number;
+    label: string;
+  };
+  compression_ratio?: {
+    value: string | null;
+    label: string;
+  };
+  valves?: {
+    value: number | null;
+    label: string;
+  };
+  euro?: {
+    value: number;
+    label: string;
+  } | number;
+  pivot?: any;
+
+  // Backward compatibility
+  kw?: number;
+  ps?: number;
+  cc?: number;
+}
+
+const props = defineProps({
+  engines: {
+    type: Array as PropType<Engine[]>,
+    default: () => [],
+    required: true,
+  },
+  isPdp: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  translations: {
+    type: Object as PropType<{
+      power?: string;
+      cc?: string;
+      compressionRatio?: string;
+      valves?: string;
+      euro?: string;
+      horsepowerUnit?: string;
+    }>,
+    default: () => ({
+      power: 'Power',
+      cc: 'CC',
+      compressionRatio: 'C. Ratio',
+      valves: 'Valves',
+      euro: 'Euro',
+      horsepowerUnit: 'PS',
+    }),
+    required: false,
+  },
+});
+
+// Sort engines by code
+const sortedEngines = computed(() => {
+  if (!props.engines || !props.engines.length) return [];
+  return [...props.engines].sort((a, b) => {
+    return (a.code || '').localeCompare(b.code || '');
+  });
+});
+</script>
+
+<template>
+  <div v-if="sortedEngines.length" class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
+    <ProductEngine
+      v-for="(engine, index) in sortedEngines"
+      :key="engine.id || index"
+      :engine="engine"
+      :show-comma="index !== sortedEngines.length - 1"
+      :translations="translations"
+    />
+  </div>
+</template>
+
+<style scoped>
+.engines-list {
+  @apply leading-none;
+}
+</style>

package/src/config.ts

@@ -41,6 +41,7 @@ export const SIDEBAR = [
   { text: 'Modal', link: '/components/modal/' },
   { text: 'PostHeader', link: '/components/post-header/' },
   { text: 'PR-Code', link: '/components/pr-code/' },
+  { text: 'Product Engine', link: '/components/product-engine/' },
   { text: 'Product Number', link: '/components/product-number/' },
   { text: 'Product Tile', link: '/components/product-tile/' },
   { text: 'Quote', link: '/components/quote/' },

package/src/layouts/MainLayout.astro

@@ -20,6 +20,11 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
   });
 </script>
 
+<script>
+  // Global Tooltips - Tippy.js
+  import '../scripts/tooltips.ts';
+</script>
+
 <html
   dir={content.dir ?? 'ltr'}
   lang={content.lang ?? 'en-us'}

package/src/pages/components/product-engine.mdx

@@ -0,0 +1,370 @@
+---
+title: "ProductEngine"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductEngine from '../../components/Product/ProductEngine.vue'
+import ProductEngines from '../../components/Product/ProductEngines.vue'
+
+# ProductEngine
+
+Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
+
+## Single Engine Code
+
+Display a single engine code with tooltip showing detailed engine information.
+
+### import:
+
+```js
+import ProductEngine from 'spoko-design-system/src/components/Product/ProductEngine.vue'
+```
+
+### Basic Usage (New API Structure):
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full flex gap-2">
+          <ProductEngine client:load engine={{
+               code: "CAYA",
+               name: "1.6 TDI",
+               serie: { value: "EA189", label: "Seria silnika" },
+               power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
+               displacement: { value: 1598, label: "Pojemność" },
+               euro: { value: 5, label: "Norma Euro" }
+          }} />
+          <ProductEngine client:load engine={{
+               code: "CAYB",
+               name: "1.6 TDI",
+               serie: { value: "EA189", label: "Seria silnika" },
+               power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
+               displacement: { value: 1598, label: "Pojemność" },
+               euro: { value: 5, label: "Norma Euro" }
+          }} />
+     </div>
+</div>
+
+```vue
+<!-- New API structure (with built-in translations) -->
+<ProductEngine :engine="{
+  code: 'CAYA',
+  name: '1.6 TDI',
+  serie: { value: 'EA189', label: 'Seria silnika' },
+  power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1598, label: 'Pojemność' },
+  euro: { value: 5, label: 'Norma Euro' }
+}" />
+
+<!-- Old API structure (backward compatible) -->
+<ProductEngine
+  :engine="{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }"
+  :translations="{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }"
+/>
+```
+
+### Special Engine Variants (Colored):
+
+Engine codes for special editions are automatically color-coded:
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full flex flex-wrap gap-3">
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">GTI Engine (Red)</small>
+               <ProductEngine client:load engine={{
+                    code: "CAVE",
+                    name: "1.4 TSI",
+                    power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1390, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               }} />
+          </div>
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">WRC Engine (Blue)</small>
+               <ProductEngine client:load engine={{
+                    code: "CDLJ",
+                    name: "1.6 TDI",
+                    power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 6, label: "Norma Euro" }
+               }} />
+          </div>
+          <div class="flex flex-col gap-1">
+               <small class="text-xs text-gray-500">Special Blue</small>
+               <ProductEngine client:load engine={{
+                    code: "CPTA",
+                    name: "1.0 TSI",
+                    power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 999, label: "Pojemność" },
+                    euro: { value: 6, label: "Norma Euro" }
+               }} />
+          </div>
+     </div>
+</div>
+
+```vue
+<!-- GTI Engine - Red -->
+<ProductEngine :engine="{
+  code: 'CAVE',
+  name: '1.4 TSI',
+  power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1390, label: 'Pojemność' },
+  euro: { value: 5, label: 'Norma Euro' }
+}" />
+
+<!-- WRC Engine - Blue -->
+<ProductEngine :engine="{
+  code: 'CDLJ',
+  name: '1.6 TDI',
+  power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
+  displacement: { value: 1598, label: 'Pojemność' },
+  euro: { value: 6, label: 'Norma Euro' }
+}" />
+```
+
+## Engine List
+
+Display multiple engine codes from an array (from API response).
+
+### import:
+
+```js
+import ProductEngines from 'spoko-design-system/src/components/Product/ProductEngines.vue'
+```
+
+### Usage:
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <ProductEngines client:load engines={[
+               {
+                    id: 13,
+                    code: "CAYA",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 55, ps: 75, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+               {
+                    id: 14,
+                    code: "CAYB",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 66, ps: 90, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+               {
+                    id: 15,
+                    code: "CAYC",
+                    name: "1.6 TDI",
+                    serie: { value: "EA189", label: "Seria silnika" },
+                    power: { kw: 77, ps: 105, ps_label: "KM", label: "Moc" },
+                    displacement: { value: 1598, label: "Pojemność" },
+                    euro: { value: 5, label: "Norma Euro" }
+               },
+          ]} />
+     </div>
+</div>
+
+```vue
+<ProductEngines :engines="[
+  {
+    id: 13,
+    code: 'CAYA',
+    name: '1.6 TDI',
+    serie: { value: 'EA189', label: 'Seria silnika' },
+    power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
+    displacement: { value: 1598, label: 'Pojemność' },
+    euro: { value: 5, label: 'Norma Euro' }
+  },
+  {
+    id: 14,
+    code: 'CAYB',
+    name: '1.6 TDI',
+    serie: { value: 'EA189', label: 'Seria silnika' },
+    power: { kw: 66, ps: 90, ps_label: 'KM', label: 'Moc' },
+    displacement: { value: 1598, label: 'Pojemność' },
+    euro: { value: 5, label: 'Norma Euro' }
+  }
+]" />
+```
+
+### With API Data:
+
+When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
+
+```vue
+<ProductEngines
+  :engines="product.part_engines"
+  :isPdp="true"
+/>
+```
+
+**Note**: The new API structure includes labels and translations, so you no longer need to pass the `translations` prop. The component will use labels from the API (e.g., "Moc", "Pojemność", "KM").
+
+### API Response Structure:
+
+```json
+{
+  "part_engines": [
+    {
+      "id": 13,
+      "code": "CAYA",
+      "name": "1.6 TDI",
+      "info": null,
+      "serie": {
+        "value": "EA189",
+        "label": "Seria silnika"
+      },
+      "type": {
+        "value": "diesel",
+        "translated": "Diesel",
+        "label": "Typ paliwa"
+      },
+      "power": {
+        "kw": 55,
+        "ps": 75,
+        "ps_label": "KM",
+        "label": "Moc"
+      },
+      "date": {
+        "value": "03/2009–05/2010",
+        "label": "Data produkcji"
+      },
+      "displacement": {
+        "value": 1598,
+        "label": "Pojemność"
+      },
+      "compression_ratio": {
+        "value": "16,5:1",
+        "label": "Stopień sprężania"
+      },
+      "valves": {
+        "value": 16,
+        "label": "Zawory"
+      },
+      "euro": {
+        "value": 5,
+        "formatted": "Norma Euro 5",
+        "label": "Norma Euro"
+      }
+    },
+    {
+      "id": 14,
+      "code": "CAYB",
+      "name": "1.6 TDI",
+      "info": null,
+      "serie": {
+        "value": "EA189",
+        "label": "Seria silnika"
+      },
+      "type": {
+        "value": "diesel",
+        "translated": "Diesel",
+        "label": "Typ paliwa"
+      },
+      "power": {
+        "kw": 66,
+        "ps": 90,
+        "ps_label": "KM",
+        "label": "Moc"
+      },
+      "date": {
+        "value": "03/2009–03/2014",
+        "label": "Data produkcji"
+      },
+      "displacement": {
+        "value": 1598,
+        "label": "Pojemność"
+      },
+      "compression_ratio": {
+        "value": "16,5:1",
+        "label": "Stopień sprężania"
+      },
+      "valves": {
+        "value": 16,
+        "label": "Zawory"
+      },
+      "euro": {
+        "value": 5,
+        "formatted": "Norma Euro 5",
+        "label": "Norma Euro"
+      }
+    }
+  ]
+}
+```
+
+## Props
+
+### ProductEngine Props:
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `engine` | `Object` | Yes | - | Engine object with nested structure from API |
+| `engine.code` | `String` | Yes | - | Engine code (e.g., "CAYA") |
+| `engine.name` | `String` | No | - | Engine name (e.g., "1.6 TDI") |
+| `engine.info` | `String` | No | - | Additional info shown in header |
+| `engine.serie` | `Object` | No | - | Engine series object |
+| `engine.serie.value` | `String` | No | - | Series value (e.g., "EA189", "EA288") |
+| `engine.serie.label` | `String` | No | - | Series label (e.g., "Seria silnika") |
+| `engine.power` | `Object` | No | - | Power object with kw, ps, labels |
+| `engine.power.kw` | `Number` | No | - | Power in kilowatts |
+| `engine.power.ps` | `Number` | No | - | Power in horsepower |
+| `engine.power.ps_label` | `String` | No | - | Unit label (e.g., "KM", "PS") |
+| `engine.power.label` | `String` | No | - | Power label (e.g., "Moc") |
+| `engine.displacement` | `Object` | No | - | Displacement object |
+| `engine.displacement.value` | `Number` | No | - | Displacement in cm³ |
+| `engine.displacement.label` | `String` | No | - | Label (e.g., "Pojemność") |
+| `engine.euro` | `Object` | No | - | Euro standard object |
+| `engine.euro.value` | `Number` | No | - | Euro standard number |
+| `engine.euro.label` | `String` | No | - | Label (e.g., "Norma Euro") |
+| `engine.euro.formatted` | `String` | No | - | Formatted string (e.g., "Norma Euro 5") |
+| `showComma` | `Boolean` | No | `false` | Show comma after code (for lists) |
+| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
+
+**Note**: The component supports both the new nested API structure (with built-in labels) and the old flat structure for backward compatibility.
+
+### ProductEngines Props:
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `engines` | `Array<Object>` | Yes | `[]` | Array of engine objects (new nested structure) |
+| `isPdp` | `Boolean` | No | `false` | Product detail page styling |
+| `translations` | `Object` | No | API labels | Fallback translations (used only with old API) |
+
+## Features
+
+- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js)
+- ✅ **API-Driven Translations**: Labels and units come directly from API
+- ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
+- ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
+- ✅ **Semantic Colors**: Automatic color coding for special engines (GTI, WRC, etc.)
+- ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
+- ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
+- ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
+- ✅ **SEO-Friendly**: Static HTML enhanced with client-side tooltips
+- ✅ **Backward Compatible**: Works with both new and old API structures
+- ✅ **Touch Friendly**: Works on mobile devices
+
+## Engine Color Coding
+
+Special engine codes are automatically color-coded:
+
+| Engine Codes | Color | Description |
+|--------------|-------|-------------|
+| CAVE, CTHE, DAJA, DAYB | Red | GTI Performance engines |
+| CDLJ | Blue | WRC/R Street engines |
+| CPTA, CZEA | Light Blue | Special blue engines |
+
+## Notes
+
+- Hover over any engine code to see full specifications in a detailed tooltip
+- Tooltips use Tippy.js with custom two-tone SDS theme
+- **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
+- **No manual translations needed**: The API provides all labels and units
+- The component automatically extracts series value from nested structure
+- Date field is not shown in tooltips (only power, displacement, and euro)
+- Missing data fields are gracefully hidden
+- Commas between engine codes are automatically handled in lists
+- **Backward compatible**: Still works with old flat API structure
+- Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)

package/src/scripts/tooltips.ts

@@ -0,0 +1,46 @@
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+import '../styles/tippy-theme.css';
+
+/**
+ * Global Tooltip Initializer
+ * Automatically enhances all elements with data-tippy-content attribute
+ * Works with static HTML - perfect for SEO and Astro static pages
+ */
+
+function initTooltips() {
+  // Destroy existing tooltips to avoid duplicates
+  document.querySelectorAll('[data-tippy-content]').forEach((el: any) => {
+    if (el._tippy) {
+      el._tippy.destroy();
+    }
+  });
+
+  // Initialize tooltips for all elements with data-tippy-content
+  tippy('[data-tippy-content]', {
+    theme: 'sds',
+    placement: 'top',
+    arrow: true,
+    animation: 'shift-away',
+    duration: [200, 150],
+    maxWidth: 280,
+    allowHTML: true, // Allow HTML content for rich tooltips
+  });
+}
+
+// Initialize on page load
+if (typeof window !== 'undefined') {
+  // Initial load
+  document.addEventListener('DOMContentLoaded', () => {
+    initTooltips();
+    // Reinitialize after a short delay to catch Vue components
+    setTimeout(initTooltips, 100);
+  });
+
+  // Reinitialize on Astro page transitions (for View Transitions)
+  document.addEventListener('astro:page-load', () => {
+    initTooltips();
+    // Reinitialize after a short delay to catch Vue components
+    setTimeout(initTooltips, 100);
+  });
+}

package/src/styles/tippy-theme.css

@@ -0,0 +1,131 @@
+/*
+ * Custom Tippy.js Theme for SDS
+ * Matches the design system colors and styling
+ */
+
+/* SDS Theme for Tippy */
+.tippy-box[data-theme~='sds'] {
+  background-color: #f3f4f6 !important; /* neutral-lightest */
+  color: #1e293b !important; /* slate-darkest */
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  max-width: 280px;
+  border: 1px solid #e5e7eb; /* neutral-lighter */
+}
+
+.tippy-box[data-theme~='sds'][data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: #f3f4f6;
+}
+.tippy-box[data-theme~='sds'][data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: #f3f4f6;
+}
+
+/* Content styling */
+.tippy-box[data-theme~='sds'] .tippy-content {
+  padding: 0.5rem 0.75rem;
+  background-color: transparent !important;
+  color: #1e293b !important; /* slate-darkest */
+}
+
+/* Remove padding for structured tooltips (with tooltip-header) */
+.tippy-box[data-theme~='sds'] .tippy-content:has(.tooltip-header) {
+  padding: 0;
+}
+
+/* Force all child elements to inherit text color */
+.tippy-box[data-theme~='sds'] * {
+  color: inherit;
+}
+
+/* Engine tooltip header - dark blue background */
+.tippy-box[data-theme~='sds'] .tooltip-header {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.5rem;
+  background-color: #001e50;
+  border-radius: 0.5rem 0.5rem 0 0;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header strong {
+  font-weight: 600;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header .info {
+  font-weight: 300;
+  margin-left: 0.5rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-header .series-badge {
+  margin-left: auto;
+  font-weight: 400;
+  color: #00b0f0;
+  font-size: 0.75rem;
+}
+
+/* Engine tooltip specs */
+.tippy-box[data-theme~='sds'] .tooltip-specs {
+  padding: 0.375rem 0.5rem;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-row:last-child {
+  border-bottom: none;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-label {
+  font-size: 0.7rem;
+  color: #64748B;
+  font-weight: 400;
+}
+
+.tippy-box[data-theme~='sds'] .tooltip-value {
+  font-size: 0.75rem;
+  color: #1e293b;
+  font-weight: 500;
+  margin-left: 1rem;
+}
+
+/* Engine tooltip table styling */
+.tippy-box[data-theme~='sds'] table {
+  width: 100%;
+  margin-top: 0.25rem;
+  border-collapse: collapse;
+  color: white;
+}
+
+.tippy-box[data-theme~='sds'] th {
+  text-align: left;
+  padding: 0.125rem 0.5rem 0.125rem 0;
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-weight: 400;
+  font-size: 0.7rem;
+}
+
+.tippy-box[data-theme~='sds'] td {
+  padding: 0.125rem 0;
+  font-weight: 500;
+  text-align: right;
+  color: white !important;
+}
+
+.tippy-box[data-theme~='sds'] strong {
+  font-weight: 600;
+}

package/uno-config/theme/colors.ts

@@ -21,6 +21,7 @@ export const colors = {
     // Secondary colors - accent palette
     accent: {
         light: '#0099da',
+        medium: '#0082d6',     // Medium accent blue
         default: '#0087c1',    // Default accent
         dark: '#006ea6',
         darker: '#00437a',