spoko-design-system 1.23.2 → 1.24.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.24.1](https://github.com/polo-blue/sds/compare/v1.24.0...v1.24.1) (2025-12-22)
+
+### Bug Fixes
+
+* **uno-config:** add circle-flags to safelist and Vue :class extractor ([672086a](https://github.com/polo-blue/sds/commit/672086a55b021eaa1ef30807068f7e1f645d39f2))
+
+## [1.24.0](https://github.com/polo-blue/sds/compare/v1.23.2...v1.24.0) (2025-12-16)
+
+### Features
+
+* export useFormatProductNumber utility ([4e585e4](https://github.com/polo-blue/sds/commit/4e585e4bf500049f1ab8e325ae7a0daa6dd2ade6))
+
 ## [1.23.2](https://github.com/polo-blue/sds/compare/v1.23.1...v1.23.2) (2025-12-16)
 
 ### Bug Fixes

package/index.ts

@@ -61,6 +61,7 @@ export { default as getPriceFormatted } from './src/utils/product/getPriceFormat
 export { default as getProductChecklist } from './src/utils/product/getProductChecklist';
 export { getEngineTooltipContent } from './src/utils/product/getEngineTooltipContent';
 export type { Engine, EngineTranslations } from './src/utils/product/getEngineTooltipContent';
+export { default as useFormatProductNumber } from './src/utils/product/useFormatProductNumber';
 
 // Utils: SEO
 export { default as getShorterDescription } from './src/utils/seo/getShorterDescription';

package/package.json

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

package/src/components/Category/CategoryTile.astro

@@ -18,19 +18,21 @@ const { CategoryObject } = Astro.props;
 const { height = 70, width = 70, path } = CategoryObject;
 ---
 
-<a href={path} class="carousel-item" data-astro-prefetch itemprop="url">
-  <Image
-    src={CategoryObject.photo}
-    alt={CategoryObject.alt}
-    height={height}
-    width={width}
-    format="avif"
-    loading="eager"
-    onerror="this.style.display='none';"
-    class="cats-img"
-  />
-  <div class="swiper-lazy-preloader"></div>
-  <div class="cat-name" itemprop="name">
-    {CategoryObject.name}
-  </div>
-</a>
+<span itemprop="name">
+  <a itemprop="url" href={path} class="carousel-item" data-astro-prefetch>
+    <Image
+      src={CategoryObject.photo}
+      alt={CategoryObject.alt}
+      height={height}
+      width={width}
+      format="avif"
+      loading="eager"
+      onerror="this.style.display='none';"
+      class="cats-img"
+    />
+    <div class="swiper-lazy-preloader"></div>
+    <div class="cat-name">
+      {CategoryObject.name}
+    </div>
+  </a>
+</span>

package/uno-config/index.ts

@@ -162,8 +162,15 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       'i-simple-icons-youtube',
       'i-simple-icons-vimeo',
 
+      // Language flags for Translations component (dynamic Vue classes)
+      'i-circle-flags:en',
+      'i-circle-flags:pl',
+
       // All peer selectors from the list (needed for floating labels)
       ...peerSelectorClasses,
+
+      // Custom safelist from consumer config
+      ...(customConfig.safelist || []),
     ],
     // Optimized extractors for static Astro builds
     extractors: [
@@ -197,6 +204,31 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
             }
           }
 
+          // For .vue files, extract from :class bindings (dynamic classes)
+          if (id && id.endsWith('.vue')) {
+            // Match :class="[...]" or :class="{...}" or :class="'...'"
+            const vueClassRegex = /:class=["'`]([^"'`]+)["'`]/g;
+            while ((match = vueClassRegex.exec(code)) !== null) {
+              // Extract class names from ternary expressions and string literals
+              const classContent = match[1];
+              // Match quoted strings inside the expression (e.g., 'i-circle-flags:en')
+              const quotedStrings = classContent.match(/['"]([^'"]+)['"]/g);
+              if (quotedStrings) {
+                quotedStrings.forEach(quoted => {
+                  const cls = quoted.replace(/['"]/g, '').trim();
+                  if (cls && !cls.includes('?') && !cls.includes(':') || cls.startsWith('i-')) {
+                    // Split by spaces in case multiple classes
+                    cls.split(/\s+/).forEach(c => {
+                      if (c && c.length > 1) {
+                        result.add(c);
+                      }
+                    });
+                  }
+                });
+              }
+            }
+          }
+
           return result;
         },
       },