spoko-design-system 1.4.1 → 1.4.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.4.3](https://github.com/polo-blue/sds/compare/v1.4.2...v1.4.3) (2025-10-26)
+
+## [1.4.2](https://github.com/polo-blue/sds/compare/v1.4.1...v1.4.2) (2025-10-25)
+
+### Bug Fixes
+
+* resolve UnoCSS icon loading errors and add missing icons ([b5cb48f](https://github.com/polo-blue/sds/commit/b5cb48f06c03b616adce28efb36438411038574b))
+
 ## [1.4.1](https://github.com/polo-blue/sds/compare/v1.4.0...v1.4.1) (2025-10-20)
 
 ## [1.4.0](https://github.com/polo-blue/sds/compare/v1.3.7...v1.4.0) (2025-10-20)

package/icon.config.ts

@@ -125,7 +125,10 @@ export const iconConfig: IconConfig = {
       "car",
       "credit-card",
       "barcode",
-      "qr"
+      "qr",
+      "left-arrow-alt",
+      "right-arrow-alt",
+      "arrow-back"
     ],
 
     carbon: [
@@ -248,6 +251,8 @@ export const iconConfig: IconConfig = {
       "messenger",
       "instagram",
       "telegram",
+      "youtube",
+      "vimeo",
       "carrd"
     ],
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -51,8 +51,8 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.40.1",
-    "@astrojs/mdx": "^4.3.7",
+    "@algolia/client-search": "^5.41.0",
+    "@astrojs/mdx": "^4.3.8",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/ts-plugin": "^1.10.5",
@@ -68,25 +68,25 @@
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.7",
-    "@iconify-json/fluent": "^1.2.33",
+    "@iconify-json/fluent": "^1.2.34",
     "@iconify-json/fluent-emoji": "1.2.6",
     "@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.70",
+    "@iconify-json/lucide": "^1.2.71",
     "@iconify-json/material-symbols-light": "^1.2.42",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.16",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.54",
+    "@iconify-json/simple-icons": "^1.2.55",
     "@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.32",
-    "@iconify/json": "^2.2.397",
+    "@iconify-json/vscode-icons": "^1.2.33",
+    "@iconify/json": "^2.2.400",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
@@ -98,14 +98,14 @@
     "@unocss/preset-wind": "66.5.4",
     "@unocss/reset": "66.5.4",
     "@vite-pwa/astro": "^1.1.1",
-    "@vueuse/core": "^13.9.0",
+    "@vueuse/core": "^14.0.0",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.4.0",
     "astro-navbar": "^2.4.0",
     "astro-pagefind": "^1.8.5",
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
-    "swiper": "^12.0.2",
+    "swiper": "^12.0.3",
     "unocss": "66.5.4",
     "vue": "^3.5.22"
   },
@@ -113,14 +113,14 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.8.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.1",
-    "@typescript-eslint/parser": "^8.46.1",
+    "@types/node": "^24.9.1",
+    "@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.14.6",
+    "astro": "^5.15.1",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.3.1",
@@ -129,7 +129,7 @@
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^25.0.1",
     "unocss": "^0.65.0",
-    "vite": "^7.1.11"
+    "vite": "^7.1.12"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/pages/components/details-list.mdx

@@ -12,32 +12,32 @@ export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
 export const tableItems = [
   {
     id: "number",
-    name: "Part number",
+    label: "Part number",
     value: "6R0071609GRU",
   },
   {
     id: "prcodes",
-    name: "PR-Codes",
+    label: "PR-Codes",
     value: ["PJ4", "CA2", "C4E", "2JZ"],
   },
   {
     id: "color",
-    name: "Color",
+    label: "Color",
     value: "Black",
   },
   {
     id: "position",
-    name: "Fitting position",
+    label: "Fitting position",
     value: "Front axle",
   },
   {
     id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
+    label: "Brake disc thicknes",
     value: "22 mm",
   },
   {
     id: "weight",
-    name: "Weight",
+    label: "Weight",
     value: "5.185 kg"
   }
 ];
@@ -58,35 +58,35 @@ export const tableItems = [
 </div>
 
 ```ts
- const tableItems = [
+const tableItems = [
   {
     id: "number",
-    name: "Part number",
+    label: "Part number",
     value: "6R0071609GRU",
   },
   {
     id: "prcodes",
-    name: "PR-Codes",
+    label: "PR-Codes",
     value: ["PJ4", "CA2", "C4E"]
   },
   {
     id: "color",
-    name: "Color",
+    label: "Color",
     value: "Black",
   },
   {
     id: "position",
-    name: "Fitting position",
+    label: "Fitting position",
     value: "Front axle",
   },
   {
     id: "brake-disck-thicnkess",
-    name: "Brake disc thicknes",
+    label: "Brake disc thicknes",
     value: "22 mm",
   },
   {
     id: "weight",
-    name: "Weight",
+    label: "Weight",
     value: "5.185 kg"
   }
 ];
@@ -103,7 +103,7 @@ export const tableItems = [
   </td>
 </ProductDetailsList>
  ```
- ### Vue:
+### Vue:
 ```js
 <ProductDetailsList items={tableItems}>
   <template #number >
@@ -113,4 +113,85 @@ export const tableItems = [
     <ProductCodes as="td" prcodes={prcodesArray} />
   </template>
 </ProductDetailsList>
- ```
+```
+
+## Props
+
+### items
+Array of table items with the following structure:
+- `id` (string): Unique identifier for the row, also used for slot names
+- `label` (string): Display name for the table header
+- `value` (unknown): The value to display - can be string, number, boolean, string array, or Link array
+- `type` (optional string): Set to `'links'` for link arrays
+- `isGenericArray` (optional boolean): Set to `true` for generic string arrays
+
+### caption
+Optional string for the table caption.
+
+## Value Types
+
+The component supports multiple value types:
+
+### Link Arrays
+Use `type: 'links'` to display an array of links with icons:
+
+```ts
+{
+  id: "resources",
+  label: "Resources",
+  type: "links",
+  value: [
+    { type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
+    { type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
+    { type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
+  ]
+}
+```
+
+Supported link types with icons:
+- `blog` - Book text icon
+- `youtube` - YouTube icon
+- `vimeo` - Vimeo icon
+- Default - Generic link icon
+
+### Generic String Arrays
+Use `isGenericArray: true` to display a bulleted list:
+
+```ts
+{
+  id: "position",
+  label: "Fitting position",
+  isGenericArray: true,
+  value: ["Front axle", "Rear axle"]
+}
+```
+
+### HTML Values
+The component automatically detects and renders HTML strings:
+
+```ts
+{
+  id: "description",
+  label: "Description",
+  value: "Compatible with <span class='font-bold'>multiple models</span>"
+}
+```
+
+### Simple Values
+Strings, numbers, and booleans are displayed as-is:
+
+```ts
+{
+  id: "weight",
+  label: "Weight",
+  value: "5.185 kg"
+}
+```
+
+## Slots
+
+### caption
+Override the default caption with custom content.
+
+### Row-specific slots
+Use the row's `id` as the slot name to override the default value rendering. The slot receives the entire row as slot props.

package/uno-config/index.ts

@@ -156,6 +156,12 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       'origin-top-left',
       'transform-gpu',
 
+      // Dynamic icons from ProductDetailsList component
+      'i-lucide-book-text',
+      'i-lucide-link',
+      'i-simple-icons-youtube',
+      'i-simple-icons-vimeo',
+
       // All peer selectors from the list (needed for floating labels)
       ...peerSelectorClasses,
     ],
@@ -172,7 +178,8 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
           while ((match = classRegex.exec(code)) !== null) {
             match[1].split(/\s+/).forEach(cls => {
               // Only add classes that don't look like malformed icon names
-              if (cls && !cls.match(/^(lucide|simple-icons)-\w+-[A-Z]/) && !cls.includes('Grouping')) {
+              // Filter out patterns like i-lucide-link-Validate, i-simple-icons-youtube-case, etc.
+              if (cls && !cls.match(/^i-(lucide|simple-icons|mdi|ant-design|bi|bx|carbon|el|eos-icons|fluent|flowbite|la|octicon|uil|icon-park-outline|ph|ic|material-symbols-light|et|system-uicons|vscode-icons|streamline-freehand-color)-\w+-(case|return|if|const|Validate|items|validatedItems|Grouping|function|switch|default)/i) && !cls.includes('Grouping')) {
                 result.add(cls);
               }
             });
@@ -183,7 +190,7 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
             const dynamicClassRegex = /class:\w+\s*=\s*["'`]([^"'`]+)["'`]/g;
             while ((match = dynamicClassRegex.exec(code)) !== null) {
               match[1].split(/\s+/).forEach(cls => {
-                if (cls && !cls.match(/^(lucide|simple-icons)-\w+-[A-Z]/) && !cls.includes('Grouping')) {
+                if (cls && !cls.match(/^i-(lucide|simple-icons|mdi|ant-design|bi|bx|carbon|el|eos-icons|fluent|flowbite|la|octicon|uil|icon-park-outline|ph|ic|material-symbols-light|et|system-uicons|vscode-icons|streamline-freehand-color)-\w+-(case|return|if|const|Validate|items|validatedItems|Grouping|function|switch|default)/i) && !cls.includes('Grouping')) {
                   result.add(cls);
                 }
               });

package/uno-config/theme/shortcuts/constants.ts

@@ -46,7 +46,7 @@ export const LAYOUT = {
   },
   spacing: {
     topPadding: 'pt-24 sm:pt-14',
-    containerPadding: 'px-4',
+    containerPadding: 'px-4 2xl:px-10',
   },
   grid: {
     cols2: 'grid-cols-2',