spoko-design-system 1.27.2 → 1.28.0

package/.claude/settings.json

@@ -13,13 +13,13 @@
       "Bash(git diff:*)",
       "Bash(git log:*)",
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
       "Bash(git push:*)"
     ],
     "deny": [
       "Bash(pnpm semantic-release:*)",
       "Bash(pnpm publish:*)",
-      "Bash(npm publish:*)",
+      "Bash(npm publish:*)"
     ],
     "ask": [
       "Bash(rm:*)",

package/.github/workflows/claude.yml

@@ -26,7 +26,7 @@ jobs:
       actions: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
 

package/.github/workflows/code-quality.yml

@@ -13,17 +13,17 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.17.1
+          version: 10.30.3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -44,19 +44,19 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0  # Shallow clones should be disabled for better analysis
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.17.1
+          version: 10.30.3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies

package/.github/workflows/deploy.yml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - name: Install, build, and upload your site
-        uses: withastro/action@v4
+        uses: withastro/action@v5
         with:
           package-manager: pnpm@10.17.1
           # path: . # The root location of your Astro project inside the repository. (optional)

package/.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -29,12 +29,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 10.17.1
+          version: 10.30.3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.28.0](https://github.com/polo-blue/sds/compare/v1.27.3...v1.28.0) (2026-03-04)
+
+### Features
+
+* **ProductDetailsList:** support individual link items in comprehensive ([459aae7](https://github.com/polo-blue/sds/commit/459aae745cc11c73ab4574cfa3d7f22f34ac7aed))
+
+## [1.27.3](https://github.com/polo-blue/sds/compare/v1.27.2...v1.27.3) (2026-03-04)
+
+### Bug Fixes
+
+* **ButtonCopy:** prevent double-click race condition and View Transitions duplicate listeners ([3a3456d](https://github.com/polo-blue/sds/commit/3a3456d4a267330a2090801260ab0ccbea704a38))
+
 ## [1.27.2](https://github.com/polo-blue/sds/compare/v1.27.1...v1.27.2) (2026-03-03)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.27.2",
+  "version": "1.28.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -142,7 +142,7 @@
     "unocss": "^0.65.0",
     "vite": "^7.3.1"
   },
-  "packageManager": "pnpm@10.17.1",
+  "packageManager": "pnpm@10.30.3",
   "pnpm": {
     "default": "9.15.3",
     "overrides": {

package/src/components/ButtonCopy.astro

@@ -33,12 +33,11 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
   class ClipboardButton {
     private static readonly COPY_TIMEOUT = 2000;
     private static readonly ANALYTICS_EVENT = 'product_code_copy';
+    private readonly originalText: string;
+    private resetTimer: ReturnType<typeof setTimeout> | null = null;
 
     constructor(private button: HTMLButtonElement) {
-      this.init();
-    }
-
-    private init(): void {
+      this.originalText = this.tooltip?.dataset.text || 'Copy';
       this.button.addEventListener('click', () => this.handleCopy());
     }
 
@@ -54,10 +53,6 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
       return this.button.dataset.category || '';
     }
 
-    private get originalText(): string {
-      return this.tooltip.dataset.text || 'Copy';
-    }
-
     private get copiedText(): string {
       return this.tooltip.dataset.copiedText || 'Copied';
     }
@@ -93,9 +88,11 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
     }
 
     private updateTooltip(): void {
+      if (this.resetTimer) clearTimeout(this.resetTimer);
       this.tooltip.dataset.text = this.copiedText;
-      setTimeout(() => {
+      this.resetTimer = setTimeout(() => {
         this.tooltip.dataset.text = this.originalText;
+        this.resetTimer = null;
       }, ClipboardButton.COPY_TIMEOUT);
     }
 
@@ -118,10 +115,11 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
     }
   }
 
-  // Initialize copy buttons on page load
+  // Initialize copy buttons on page load (skip already-initialized for View Transitions)
   document.addEventListener('astro:page-load', () => {
     document.querySelectorAll('.btn-copy').forEach(button => {
-      if (button instanceof HTMLButtonElement) {
+      if (button instanceof HTMLButtonElement && !button.dataset.copyInit) {
+        button.dataset.copyInit = '1';
         new ClipboardButton(button);
       }
     });

package/src/components/ProductDetailsList.vue

@@ -10,7 +10,8 @@ interface Link {
 
 interface TableItem {
   id: string;
-  label: string; // Display name from API
+  label?: string; // Display name from API
+  name?: string; // Alternative display name (used by individual link items)
   value: unknown; // Can be string, number, boolean, string array, or Link array
   type?: string; // 'links' for link arrays
   isGenericArray?: boolean; // for generic string arrays (e.g., position)
@@ -21,11 +22,17 @@ const props = defineProps({
   caption: { type: String, default: null },
 });
 
-// Function to check if it's a links array from new API
+// Function to check if it's a links array (legacy grouped format)
 const isLinksArray = (item: TableItem) => {
   return item.type === 'links' && Array.isArray(item.value);
 };
 
+// Function to check if it's an individual link item
+// Backend sends: { id: 'blog', name: 'anchor', value: 'https://...', type: 'link' }
+const isIndividualLink = (item: TableItem) => {
+  return item.type === 'link' && typeof item.value === 'string';
+};
+
 // Function to check if it's a generic array (e.g., for position)
 const isGenericArray = (item: TableItem) => {
   return item.isGenericArray && Array.isArray(item.value);
@@ -108,6 +115,21 @@ const validatedItems = computed(() => {
           </ul>
         </td>
 
+        <!-- Individual Link (flat format: id=blog/youtube/vimeo, value=url, name=anchor) -->
+        <td v-else-if="isIndividualLink(row)" class="details-table-cell">
+          <div class="flex items-center">
+            <span
+              :class="[
+                getLinkIconClass(row.id),
+                'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400',
+              ]"
+            />
+            <a :href="row.value as string" target="_blank" rel="noopener noreferrer" class="link-primary">
+              {{ row.name || row.label || row.id }}
+            </a>
+          </div>
+        </td>
+
         <!-- Generic String Array -->
         <td v-else-if="isGenericArray(row)" class="details-table-cell">
           <ul class="list-none p-0 m-0">