spoko-design-system 1.2.2 → 1.3.1

package/.github/workflows/claude.yml

@@ -0,0 +1,37 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+      actions: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.3.1](https://github.com/polo-blue/sds/compare/v1.3.0...v1.3.1) (2025-10-05)
+
+## [1.3.0](https://github.com/polo-blue/sds/compare/v1.2.2...v1.3.0) (2025-10-05)
+
+### Features
+
+* add Claude Code GitHub Action workflow ([eba488f](https://github.com/polo-blue/sds/commit/eba488fe781ebb3e7676dc7e6dfd30cf3130798a))
+
 ## [1.2.2](https://github.com/polo-blue/sds/compare/v1.2.1...v1.2.2) (2025-10-05)
 
 ## [1.2.1](https://github.com/polo-blue/sds/compare/v1.2.0...v1.2.1) (2025-10-05)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Badge.vue

@@ -2,19 +2,22 @@
 const props = defineProps({
   badge: {
     type: String,
-    required: true,
+    required: false,
     default: '',
   },
   class: {
     type: String,
-    required: true,
+    required: false,
     default: 'bg-gray',
   },
 });
 </script>
 
 <template>
-  <div class="badge" :class="props.class">
+  <div
+    class="badge"
+    :class="props.class"
+  >
     {{ props.badge }}
   </div>
 </template>

package/src/components/Badges.vue

@@ -47,7 +47,10 @@ const getBadgeColor = (badge: string | BadgeObject): string => {
 </script>
 
 <template>
-  <div v-if="props.badges && props.badges.length > 0" class="absolute z-2">
+  <div
+    v-if="props.badges && props.badges.length > 0"
+    class="absolute z-2"
+  >
     <Badge
       v-for="(badge, index) in props.badges"
       :key="index"

package/src/components/Breadcrumbs.vue

@@ -39,9 +39,19 @@ const isLast = (index: number) => {
 <template>
   <nav>
     <ul class="breadcrumbs-base">
-      <li v-if="props.showBack" class="breadcrumb-item">
-        <button class="breadcrumb-back-btn" :title="props.textBack" onclick="history.back()">
-          <span class="block px-3" i-bx-bx-arrow-back />
+      <li
+        v-if="props.showBack"
+        class="breadcrumb-item"
+      >
+        <button
+          class="breadcrumb-back-btn"
+          :title="props.textBack"
+          onclick="history.back()"
+        >
+          <span
+            class="block px-3"
+            i-bx-bx-arrow-back
+          />
         </button>
       </li>
     </ul>
@@ -50,7 +60,10 @@ const isLast = (index: number) => {
       itemscope
       itemtype="https://schema.org/BreadcrumbList"
     >
-      <li v-if="props.showHome" class="breadcrumb-item">
+      <li
+        v-if="props.showHome"
+        class="breadcrumb-item"
+      >
         <a
           href="/"
           class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
@@ -58,7 +71,10 @@ const isLast = (index: number) => {
           itemprop="item"
           i-carbon-home
         />
-        <meta itemprop="position" content="1" />
+        <meta
+          itemprop="position"
+          content="1"
+        >
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -68,7 +84,10 @@ const isLast = (index: number) => {
         itemscope
         itemtype="https://schema.org/ListItem"
       >
-        <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
+        <span
+          v-if="index > 0 || props.showHome"
+          class="text-gray-400 px-1 py-4.25 sm:py-1"
+        >/</span>
 
         <a
           v-if="!isLast(index)"
@@ -77,7 +96,10 @@ const isLast = (index: number) => {
           itemprop="item"
           :title="`Polo 6R ${crumb.name}`"
         >
-          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+          <strong
+            class="font-normal"
+            itemprop="name"
+          >{{ crumb.name }}</strong>
         </a>
         <a
           v-else
@@ -86,15 +108,22 @@ const isLast = (index: number) => {
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
           itemprop="item"
         >
-          <span class="font-normal" itemprop="name">
+          <span
+            class="font-normal"
+            itemprop="name"
+          >
             <span v-html="crumb.name" />
-            <b v-if="productNumber" class="hidden sm:inline font-normal ml-1"
-              >&nbsp;{{ productNumber }}</b
-            >
+            <b
+              v-if="productNumber"
+              class="hidden sm:inline font-normal ml-1"
+            >&nbsp;{{ productNumber }}</b>
           </span>
         </a>
 
-        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)" />
+        <meta
+          itemprop="position"
+          :content="String(props.showHome ? index + 2 : index + 1)"
+        >
       </li>
     </ul>
   </nav>

package/src/components/ButtonCopy.vue

@@ -27,11 +27,18 @@ const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 
 <template>
-  <button :aria-label="texts.copy" class="btn-copy has-tooltip" @click="copy()">
+  <button
+    :aria-label="texts.copy"
+    class="btn-copy has-tooltip"
+    @click="copy()"
+  >
     <span
       :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`"
       :data-text="!copied ? texts.copy : texts.copied"
     />
-    <span i-ph-copy-simple-light class="leading-none w-full h-full" />
+    <span
+      i-ph-copy-simple-light
+      class="leading-none w-full h-full"
+    />
   </button>
 </template>

package/src/components/Category/CategoryLink.vue

@@ -1,5 +1,9 @@
 <template>
-  <a :href="href" class="category-link" :class="{ active: active }">
+  <a
+    :href="href"
+    class="category-link"
+    :class="{ active: active }"
+  >
     {{ text }}
   </a>
 </template>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,5 +1,9 @@
 <template>
-  <button class="category-toggler md:w-8" type="button" aria-label="toggle menu">
+  <button
+    class="category-toggler md:w-8"
+    type="button"
+    aria-label="toggle menu"
+  >
     <slot />
   </button>
 </template>

package/src/components/FeaturesList.vue

@@ -16,11 +16,18 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2 v-if="props.caption" class="features-list-caption">
+  <h2
+    v-if="props.caption"
+    class="features-list-caption"
+  >
     {{ props.caption }}
   </h2>
   <ul class="features-list-ul">
-    <li v-for="(item, index) in props.items" :key="index" class="features-list-item">
+    <li
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="features-list-item"
+    >
       {{ item }}
     </li>
   </ul>

package/src/components/FuckRussia.vue

@@ -1,20 +1,47 @@
 <template>
-  <div class="relative flex" title="FUCK PUTIN! FUCK RUZZIA!">
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
-    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
+  <div
+    class="relative flex"
+    title="FUCK PUTIN! FUCK RUZZIA!"
+  >
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-1 mt-0.5"
+    />
+    <div
+      i-mdi:tank
+      class="inline-block bg-ukraine mr-5 mt-0.5"
+    />
     <div class="relative">
-      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
-      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
+      <div
+        class="inline-block absolute"
+        i-noto-v1:flag-for-flag-russia
+      />
+      <div
+        i-emojione:fire
+        class="inline-block absolute -mt-1 animate-ping animate-pulseR"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
     <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
-      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow" />
+      <div
+        i-mdi:bullet
+        class="rotate-90 inline-block bg-yellow"
+      />
     </div>
   </div>
 </template>

package/src/components/Input.vue

@@ -125,18 +125,31 @@ const handleBlur = (event: globalThis.FocusEvent) => emit('blur', event);
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-    />
+    >
 
-    <label :for="id" :class="labelClass" style="transform-origin: top left">
+    <label
+      :for="id"
+      :class="labelClass"
+      style="transform-origin: top left"
+    >
       {{ label }}
-      <span v-if="required" class="text-red-500 ml-1">*</span>
+      <span
+        v-if="required"
+        class="text-red-500 ml-1"
+      >*</span>
     </label>
 
-    <div v-if="error && typeof error === 'string'" class="input-error-message">
+    <div
+      v-if="error && typeof error === 'string'"
+      class="input-error-message"
+    >
       {{ error }}
     </div>
 
-    <div v-if="success && typeof success === 'string'" class="input-success-message">
+    <div
+      v-if="success && typeof success === 'string'"
+      class="input-success-message"
+    >
       {{ success }}
     </div>
   </div>

package/src/components/MainColors.vue

@@ -7,13 +7,23 @@ const colorCategories = Object.entries(colors);
 
 <template>
   <div class="flex flex-col space-y-12">
-    <div v-for="[category, shades] in colorCategories" :key="category">
+    <div
+      v-for="[category, shades] in colorCategories"
+      :key="category"
+    >
       <h3 class="capitalize">
         {{ category }}
       </h3>
       <div class="grid grid-cols-3 md:grid-cols-9">
-        <div v-for="(value, name) in shades" :key="name" class="mb-6">
-          <div class="h-12 transition-all" :style="`background: ${value}`" />
+        <div
+          v-for="(value, name) in shades"
+          :key="name"
+          class="mb-6"
+        >
+          <div
+            class="h-12 transition-all"
+            :style="`background: ${value}`"
+          />
           <div class="text-sm flex flex-col text-center font-mono text-slate-500">
             <span>{{ name }}</span>
             <span class="uppercase text-xs">{{ value }}</span>

package/src/components/MainInput.vue

@@ -8,11 +8,10 @@ const props = defineProps<{
   <label class="group text-left w-full max-w-xs flex flex-col">
     <span
       class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium"
-      >{{ props.label }}</span
-    >
+    >{{ props.label }}</span>
     <input
       class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
       type="text"
-    />
+    >
   </label>
 </template>

package/src/components/PartNumber.vue

@@ -21,7 +21,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <component :is="props.as" :class="props.class">
+  <component
+    :is="props.as"
+    :class="props.class"
+  >
     {{ props.number }}
   </component>
 </template>

package/src/components/Product/ProductButton.vue

@@ -9,7 +9,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <button class="product-button" :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''">
+  <button
+    class="product-button"
+    :class="props.shadow ? 'drop-shadow hover:(drop-shadow-md)' : ''"
+  >
     <slot />
   </button>
 </template>

package/src/components/Product/ProductDetailName.vue

@@ -15,7 +15,10 @@ const props = defineProps({
 
 <template>
   <div class="font-bold detail-name w-full sm:w-50 flex">
-    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
+    <span
+      class="colon-after"
+      :class="styles && styles.length ? styles : 'mt-auto'"
+    >
       {{ props.text }}
     </span>
   </div>

package/src/components/Product/ProductDetails.vue

@@ -30,18 +30,28 @@ const props = defineProps({
 
 <template>
   <div v-if="details && details.length">
-    <template v-for="(detail, index) in details" :key="index">
+    <template
+      v-for="(detail, index) in details"
+      :key="index"
+    >
       <!-- PDP PAGE - PRODUCT ROW -->
       <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
       <li
         v-if="props.small"
         class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular"
       >
-        <span v-if="detail.id" class="inline-block mr-1 items--0">
+        <span
+          v-if="detail.id"
+          class="inline-block mr-1 items--0"
+        >
           {{ getTranslation(`detail.${detail.id}`) }}:
         </span>
 
-        <span v-if="detail.translated" :class="detail.id ? 'font-semibold' : ''" class="items--1">
+        <span
+          v-if="detail.translated"
+          :class="detail.id ? 'font-semibold' : ''"
+          class="items--1"
+        >
           {{ detail.value }}
         </span>
 
@@ -49,16 +59,26 @@ const props = defineProps({
           v-else-if="detail.value !== undefined && detail.id === 'color' && detail.isArrayValue"
           class="items--2 inline-block"
         >
-          <span v-for="(color, indexColor) in detail.value" :key="indexColor" class="comma">
+          <span
+            v-for="(color, indexColor) in detail.value"
+            :key="indexColor"
+            class="comma"
+          >
             {{ color['name'] }}
           </span>
         </div>
 
-        <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="items--3">
+        <span
+          v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
+          class="items--3"
+        >
           {{ locale === 'en' ? String(detail.value).replace(/,/g, '.') : String(detail.value) }}
         </span>
 
-        <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items items--4">
+        <span
+          v-else-if="detail.id && detail.id === 'paint-marks'"
+          class="items items--4"
+        >
           {{ detail.value }}
           <!-- <span v-for="(mark, index2) in JSON.parse(String(detail.value))" :key="index2" class="item">
           {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
@@ -71,8 +91,14 @@ const props = defineProps({
         class="text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4"
       >
         <!-- PRODUCT CARD -->
-        <ProductDetailName v-if="detail.id" :text="getTranslation(`detail.${detail.id}`)" />
-        <div v-if="detail.value" class="leading-4 flex items-end">
+        <ProductDetailName
+          v-if="detail.id"
+          :text="getTranslation(`detail.${detail.id}`)"
+        />
+        <div
+          v-if="detail.value"
+          class="leading-4 flex items-end"
+        >
           <span
             v-if="detail.translated && !detail.isArrayValue"
             :class="detail.id === 'light-function' ? 'whitespace-pre-line' : ''"
@@ -80,25 +106,34 @@ const props = defineProps({
             {{ getTranslation(`detail.value.${detail.value}`) }}
           </span>
 
-          <span v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue" class="">
+          <span
+            v-else-if="detail.id !== 'paint-marks' && !detail.isArrayValue"
+            class=""
+          >
             {{ detail.value }}
           </span>
 
           <span
             v-else-if="
               detail.value !== undefined &&
-              detail.id === 'for-exterior-colour' &&
-              detail.isArrayValue
+                detail.id === 'for-exterior-colour' &&
+                detail.isArrayValue
             "
             class=""
           >
-            <div v-for="(color, indexColor) in JSON.parse(String(detail.value))" :key="indexColor">
+            <div
+              v-for="(color, indexColor) in JSON.parse(String(detail.value))"
+              :key="indexColor"
+            >
               <span class="font-mono">{{ color }}</span> -
               {{ getTranslation(`colorCodes.${color}`) }}
             </div>
           </span>
 
-          <span v-else-if="detail.id && detail.id === 'paint-marks'" class="items">
+          <span
+            v-else-if="detail.id && detail.id === 'paint-marks'"
+            class="items"
+          >
             <span
               v-for="(mark, markIndex) in JSON.parse(String(detail.value))"
               :key="markIndex"
@@ -107,8 +142,15 @@ const props = defineProps({
               {{ mark[0] }} x <span>{{ getTranslation(`color.${mark[1]}`) }}</span>
             </span>
           </span>
-          <ul v-else-if="detail.id && detail.isArrayValue" class="items">
-            <li v-for="(d, index3) in JSON.parse(String(detail.value))" :key="index3" class="item">
+          <ul
+            v-else-if="detail.id && detail.isArrayValue"
+            class="items"
+          >
+            <li
+              v-for="(d, index3) in JSON.parse(String(detail.value))"
+              :key="index3"
+              class="item"
+            >
               · {{ d }}
             </li>
           </ul>

package/src/components/Product/ProductDoc.vue

@@ -20,7 +20,10 @@ const props = defineProps({
       :title="props.file.path"
       class="flex items-center hover:underline underline-offset-2 hover:underline-1"
     >
-      <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" />
+      <div
+        i-system-uicons-document-justified
+        class="text-blue-lightest dark:text-accent-light"
+      />
       <span>{{ props.file.name }}</span>
     </a>
   </li>

package/src/components/Product/ProductEngineType.vue

@@ -15,7 +15,10 @@ const props = withDefaults(
 </script>
 
 <template>
-  <ul v-if="props.engines.length" class="engine-types">
+  <ul
+    v-if="props.engines.length"
+    class="engine-types"
+  >
     <li
       v-for="(engine, index) in props.engines"
       :key="engine.id"

package/src/components/Product/ProductLink.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="product-link" itemscope itemtype="https://schema.org/Product">
+  <div
+    class="product-link"
+    itemscope
+    itemtype="https://schema.org/Product"
+  >
     <div
       :class="[bigTile ? 'product-link--big-tile' : 'product-thumb--plp product-thumb--carousel']"
     >
       <!-- Slot na ProductImage z Astro -->
       <slot name="image">
-        <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
+        <img
+          src="/1x1.png"
+          class="bg-neutral-lightest/70"
+          :alt="productName"
+        >
       </slot>
     </div>
 
     <div :class="[bigTile ? '' : 'sm:pl-4']">
-      <p v-if="price" class="block mb-2 font-600 font-headbold text-5">
+      <p
+        v-if="price"
+        class="block mb-2 font-600 font-headbold text-5"
+      >
         {{ price }}
       </p>
 
@@ -22,11 +33,20 @@
         v-html="nameFormatted"
       />
 
-      <ProductNumber :product-number="productNumber" :copy-disabled="true" />
+      <ProductNumber
+        :product-number="productNumber"
+        :copy-disabled="true"
+      />
 
       <template v-if="index !== null">
-        <meta itemprop="position" :content="index.toString()" />
-        <meta itemprop="name" :content="nameFormatted" />
+        <meta
+          itemprop="position"
+          :content="index.toString()"
+        >
+        <meta
+          itemprop="name"
+          :content="nameFormatted"
+        >
       </template>
     </div>
   </div>

package/src/components/Product/ProductModel.vue

@@ -10,7 +10,10 @@ const props = defineProps({
 });
 </script>
 <template>
-  <strong class="product-model" :data-pagefind-filter="`model:${props.carModel.name}`">{{
+  <strong
+    class="product-model"
+    :data-pagefind-filter="`model:${props.carModel.name}`"
+  >{{
     props.carModel.name
   }}</strong>
 </template>

package/src/components/Product/ProductModels.vue

@@ -11,8 +11,16 @@ const props = defineProps({
 </script>
 
 <template>
-  <div inline-flex flex-wrap max-w-max>
-    <span v-for="(modelId, index) in props.modelIds" :key="index" class="product-model block">
+  <div
+    inline-flex
+    flex-wrap
+    max-w-max
+  >
+    <span
+      v-for="(modelId, index) in props.modelIds"
+      :key="index"
+      class="product-model block"
+    >
       <ProductModel :id="modelId" />
     </span>
   </div>

package/src/components/Product/ProductPositions.vue

@@ -16,7 +16,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <span v-for="position in props.positions" :key="position.sort" class="product-position">
+  <span
+    v-for="position in props.positions"
+    :key="position.sort"
+    class="product-position"
+  >
     {{ position.name }}
   </span>
 </template>

package/src/components/ProductCodes.vue

@@ -24,8 +24,15 @@ const settings = {
 </script>
 
 <template>
-  <span v-for="(prcode, index) in settings.prcodes" :key="index" class="not-last:mr-1">
-    <PrCode v-if="!String(prcode).includes('+')" :prcode="prcode" />
+  <span
+    v-for="(prcode, index) in settings.prcodes"
+    :key="index"
+    class="not-last:mr-1"
+  >
+    <PrCode
+      v-if="!String(prcode).includes('+')"
+      :prcode="prcode"
+    />
     <span v-else>
       <PrCode
         v-for="(splittedCode, index2) in String(prcode).split('+')"

package/src/components/ProductDetailName.vue

@@ -23,7 +23,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64">
+  <component
+    :is="props.as"
+    class="font-bold detail-name w-full sm:w-50 flex 2xl:w-64"
+  >
     <span :class="styles && styles.length ? styles : 'mt-auto'">
       <b class="bg-white z-1 colon-after pr-1">{{ props.text }}</b>
     </span>

package/src/components/ProductDetailsList.vue

@@ -144,14 +144,25 @@ const groupedItems = computed(() => {
       </slot>
     </caption>
     <colgroup>
-      <col class="details-table-col" />
-      <col class="details-table-col" />
+      <col class="details-table-col">
+      <col class="details-table-col">
     </colgroup>
     <tbody>
-      <tr v-for="(row, index) in groupedItems" :key="index" class="details-table-row">
-        <ProductDetailName as="th" :text="getHeaderText(row)" class="details-table-header" />
+      <tr
+        v-for="(row, index) in groupedItems"
+        :key="index"
+        class="details-table-row"
+      >
+        <ProductDetailName
+          as="th"
+          :text="getHeaderText(row)"
+          class="details-table-header"
+        />
 
-        <td v-if="'links' in row" class="details-table-cell">
+        <td
+          v-if="'links' in row"
+          class="details-table-cell"
+        >
           <ul class="list-none p-0 m-0">
             <li
               v-for="(link, linkIndex) in row.links"
@@ -164,14 +175,22 @@ const groupedItems = computed(() => {
                   'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400',
                 ]"
               />
-              <a :href="link.value" target="_blank" rel="noopener noreferrer" class="link-primary">
+              <a
+                :href="link.value"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link-primary"
+              >
                 {{ link.name }}
               </a>
             </li>
           </ul>
         </td>
 
-        <td v-else-if="'id' in row && isColorArray(row)" class="details-table-cell">
+        <td
+          v-else-if="'id' in row && isColorArray(row)"
+          class="details-table-cell"
+        >
           <ul class="list-none p-0 m-0">
             <li
               v-for="(colorItem, colorIndex) in row.value as ColorCode[]"
@@ -189,11 +208,17 @@ const groupedItems = computed(() => {
           </ul>
         </td>
 
-        <td v-else-if="'id' in row && isPaintMarks(row)" class="details-table-cell">
+        <td
+          v-else-if="'id' in row && isPaintMarks(row)"
+          class="details-table-cell"
+        >
           <span class="text-gray-700 dark:text-gray-300">{{ row.value }}</span>
         </td>
 
-        <td v-else-if="'id' in row && isForExteriorColour(row)" class="details-table-cell">
+        <td
+          v-else-if="'id' in row && isForExteriorColour(row)"
+          class="details-table-cell"
+        >
           <ul class="list-none p-0 m-0">
             <li
               v-for="(colorEntry, colourIndex) in row.value as ColorCode[]"
@@ -211,7 +236,10 @@ const groupedItems = computed(() => {
           </ul>
         </td>
 
-        <td v-else-if="'id' in row && isGenericArray(row)" class="details-table-cell">
+        <td
+          v-else-if="'id' in row && isGenericArray(row)"
+          class="details-table-cell"
+        >
           <ul class="list-none p-0 m-0">
             <li
               v-for="(item, itemIndex) in row.value as string[]"
@@ -230,7 +258,10 @@ const groupedItems = computed(() => {
           v-html="row.value"
         />
 
-        <slot v-else-if="'id' in row" :name="row.id">
+        <slot
+          v-else-if="'id' in row"
+          :name="row.id"
+        >
           <td class="details-table-cell">
             {{ row.value }}
           </td>

package/src/components/SlimBanner.vue

@@ -15,22 +15,24 @@ const toggleVisibility = () => {
 </script>
 
 <template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner">
+  <div
+    v-if="isShow"
+    data-pagefind-ignore
+    class="slimbanner"
+  >
     <span
       class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]"
     />
-    <span class="leading-none"
-      ><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
-      />
+    <span class="leading-none"><span
+                                 data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
+                               />
       <a
         href="https://polo.blue/support-ukraine/"
         target="_blank"
         rel="noopener"
         title="Support Ukraine"
         class="underline underline-offset-2 hover:text-blue-wrc"
-        >this page</a
-      >.
+      >this page</a>.
     </span>
 
     <button

package/src/components/Table.vue

@@ -14,14 +14,26 @@ const capitalizeFirstLetter = (text: string) => {
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th v-for="(thead, index) in theads" :key="index" class="px-4 py-2 font-semibold">
+        <th
+          v-for="(thead, index) in theads"
+          :key="index"
+          class="px-4 py-2 font-semibold"
+        >
           {{ capitalizeFirstLetter(thead) }}
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, index) in props.data" :key="index" class="border">
-        <td v-for="key in Object.keys(row)" :key="key" class="px-4 py-2">
+      <tr
+        v-for="(row, index) in props.data"
+        :key="index"
+        class="border"
+      >
+        <td
+          v-for="key in Object.keys(row)"
+          :key="key"
+          class="px-4 py-2"
+        >
           {{ row[key] }}
         </td>
       </tr>

package/src/components/Translations.vue

@@ -18,7 +18,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-if="props.translations !== null && props.translations.uri" data-pagefind-ignore>
+  <div
+    v-if="props.translations !== null && props.translations.uri"
+    data-pagefind-ignore
+  >
     <a
       aria-label="Change language"
       type="button"