spoko-design-system 1.24.0 → 1.24.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.24.2](https://github.com/polo-blue/sds/compare/v1.24.1...v1.24.2) (2026-01-13)
+
+### Bug Fixes
+
+* improve TypeScript types for Breadcrumbs and Jumbotron ([d671a1a](https://github.com/polo-blue/sds/commit/d671a1ab1851f7e0eb138863a7a9dd05be9bea8e))
+
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -54,18 +54,18 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.46.0",
+    "@algolia/client-search": "^5.46.2",
     "@astrojs/mdx": "^4.3.13",
     "@astrojs/node": "^9.5.1",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/sitemap": "^3.6.1",
     "@astrojs/ts-plugin": "^1.10.6",
-    "@astrojs/vue": "^5.1.3",
-    "@docsearch/css": "^4.3.2",
+    "@astrojs/vue": "^5.1.4",
+    "@docsearch/css": "^4.4.0",
     "@floating-ui/vue": "^1.1.9",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.7",
     "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.15",
+    "@iconify-json/carbon": "^1.2.16",
     "@iconify-json/circle-flags": "^1.2.10",
     "@iconify-json/ei": "^1.2.2",
     "@iconify-json/el": "^1.2.2",
@@ -77,30 +77,30 @@
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.81",
-    "@iconify-json/material-symbols-light": "^1.2.50",
+    "@iconify-json/lucide": "^1.2.84",
+    "@iconify-json/material-symbols-light": "^1.2.51",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.19",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.63",
+    "@iconify-json/simple-icons": "^1.2.66",
     "@iconify-json/streamline": "^1.2.5",
     "@iconify-json/streamline-emojis": "^1.2.4",
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify-json/vscode-icons": "^1.2.37",
-    "@iconify/json": "^2.2.418",
+    "@iconify-json/vscode-icons": "^1.2.38",
+    "@iconify/json": "^2.2.427",
     "@iconify/vue": "^5.0.0",
-    "@playform/compress": "^0.2.0",
+    "@playform/compress": "^0.2.1",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.5.10",
-    "@unocss/preset-attributify": "66.5.10",
-    "@unocss/preset-typography": "66.5.10",
-    "@unocss/preset-uno": "66.5.10",
-    "@unocss/preset-web-fonts": "66.5.10",
-    "@unocss/preset-wind": "66.5.10",
-    "@unocss/reset": "66.5.10",
+    "@unocss/astro": "66.5.12",
+    "@unocss/preset-attributify": "66.5.12",
+    "@unocss/preset-typography": "66.5.12",
+    "@unocss/preset-uno": "66.5.12",
+    "@unocss/preset-web-fonts": "66.5.12",
+    "@unocss/preset-wind": "66.5.12",
+    "@unocss/reset": "66.5.12",
     "@vite-pwa/astro": "^1.2.0",
     "@vueuse/core": "^14.1.0",
     "astro-icon": "^1.1.5",
@@ -111,34 +111,35 @@
     "dotenv": "^17.2.3",
     "swiper": "^12.0.3",
     "tippy.js": "^6.3.7",
-    "unocss": "66.5.10",
+    "unocss": "66.5.12",
     "vite-plugin-pwa": "^1.2.0",
-    "vue": "^3.5.25"
+    "vue": "^3.5.26"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^25.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
-    "@unocss/transformer-variant-group": "66.5.10",
+    "@types/node": "^25.0.7",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@unocss/transformer-variant-group": "66.5.12",
     "@vitejs/plugin-vue": "^6.0.3",
-    "@vue/compiler-sfc": "^3.5.25",
+    "@vue/compiler-sfc": "^3.5.26",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.16.5",
+    "astro": "^5.16.9",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.39.2",
     "eslint-plugin-astro": "^1.5.0",
     "eslint-plugin-vue": "^10.6.2",
     "husky": "^9.1.7",
+    "jscpd": "^4.0.7",
     "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^25.0.2",
     "unocss": "^0.65.0",
-    "vite": "^7.3.0"
+    "vite": "^7.3.1"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/components/Breadcrumbs.vue

@@ -1,40 +1,27 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 export interface Breadcrumb {
   name: string;
   path: string;
 }
 
-import type { PropType } from 'vue';
-import { computed } from 'vue';
+interface Props {
+  showBack?: boolean;
+  textBack?: string;
+  showHome?: boolean;
+  breadcrumbs: Breadcrumb[];
+  productNumber?: string;
+  withMicrodata?: boolean;
+  class?: string;
+}
 
-const props = defineProps({
-  showBack: {
-    type: Boolean,
-    required: false,
-  },
-  textBack: {
-    type: String,
-    required: false,
-    default: 'Back',
-  },
-  showHome: {
-    type: Boolean,
-    required: false,
-  },
-  breadcrumbs: {
-    type: Array as PropType<Breadcrumb[]>,
-    required: true,
-  },
-  productNumber: {
-    type: String,
-    required: false,
-    default: null,
-  },
-  withMicrodata: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  showBack: false,
+  textBack: 'Back',
+  showHome: false,
+  productNumber: undefined,
+  withMicrodata: true,
 });
 
 const isLast = (index: number) => {

package/src/components/Jumbotron/types.ts

@@ -14,8 +14,13 @@ export interface Props {
   variant?: 'default' | 'hero' | 'post' | 'post-split';
   title?: string;
   image?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  imageClass?: string;
   backgroundClass?: string;
   slim?: boolean;
+  lang?: string;
+  class?: string;
 
   // Default & Hero variant props
   description?: string;
@@ -27,5 +32,7 @@ export interface Props {
   categories?: Category[];
 
   // Post Split variant props
+  fullWidth?: boolean;
+  align?: 'left' | 'center' | 'right';
   split?: 'equal' | 'wide';
 }

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;
         },
       },