spoko-design-system 1.28.0 → 1.28.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.28.2](https://github.com/polo-blue/sds/compare/v1.28.1...v1.28.2) (2026-03-08)
+
+### ⚠ BREAKING CHANGES
+
+* ButtonCopy, CategoryDetails, and LanguageSuggestion
+are no longer available from the barrel import. Use direct subpath
+imports instead:
+  import ButtonCopy from 'spoko-design-system/components/ButtonCopy.astro'
+  import CategoryDetails from 'spoko-design-system/components/Category/CategoryDetails.astro'
+  import LanguageSuggestion from 'spoko-design-system/components/LanguageSuggestion.astro'
+
+### Bug Fixes
+
+* remove Astro components with <script> tags from barrel file ([36f36c2](https://github.com/polo-blue/sds/commit/36f36c2316aeb0a6248f4fe62450d730e9f9dac8))
+
+## [1.28.1](https://github.com/polo-blue/sds/compare/v1.28.0...v1.28.1) (2026-03-07)
+
+### Bug Fixes
+
+* **homepage:** reduce CLS with font preloading and layout stabilization ([32d08f5](https://github.com/polo-blue/sds/commit/32d08f5b84c8b17f209073eaab7e6030f9dc53f9))
+
 ## [1.28.0](https://github.com/polo-blue/sds/compare/v1.27.3...v1.28.0) (2026-03-04)
 
 ### Features

package/CLAUDE.md

@@ -52,6 +52,26 @@ export { default as Button } from './src/components/Button.vue';
 export { default as Button } from './components/Button.vue';
 ```
 
+### Astro Components with `<script>` Tags — Barrel File Restriction
+
+Astro components with `<script>` tags **MUST NOT** be exported from the barrel file (`index.ts`).
+When any consumer imports from the barrel, Astro hoists ALL `<script>` tags from ALL exported `.astro`
+components onto every page — even if the component is never rendered. This is a
+[known Astro limitation](https://github.com/withastro/astro/issues/6906).
+
+**Rule:** If an `.astro` component has a `<script>` tag, export it ONLY via subpath (`./components/*`):
+```typescript
+// ❌ DO NOT add to index.ts — script will load on ALL consumer pages
+export { default as ButtonCopy } from './src/components/ButtonCopy.astro';
+
+// ✅ Consumer uses direct subpath import instead
+import ButtonCopy from 'spoko-design-system/components/ButtonCopy.astro';
+```
+
+Components **without** `<script>` tags are safe in the barrel file.
+
+Currently excluded from barrel: **ButtonCopy**, **CategoryDetails**, **LanguageSuggestion**.
+
 ### UnoCSS Configuration System
 
 **Critical**: UnoCSS config is split across two locations:
@@ -198,10 +218,12 @@ On merge to `main`, GitHub Actions automatically:
    - Vue: `src/components/ComponentName.vue`
    - Astro: `src/components/ComponentName.astro`
 
-2. Export from root `index.ts`:
+2. Export from root `index.ts` (Vue components and Astro components **without** `<script>` tags):
    ```typescript
    export { default as ComponentName } from './src/components/ComponentName.vue';
    ```
+   **Important:** If the Astro component has a `<script>` tag, do **NOT** add it to `index.ts`.
+   It will be available via the wildcard subpath export `./components/*` automatically.
 
 3. Add documentation page in `src/pages/components/component-name.mdx`
 

package/index.ts

@@ -9,7 +9,6 @@ export { default as FlagPL } from './src/components/flags/FlagPL.vue';
 export { default as Badges } from './src/components/Badges.vue';
 export { default as SlimBanner } from './src/components/SlimBanner.vue';
 
-export { default as Jumbotron } from './src/components/Jumbotron.astro';
 export { default as Button } from './src/components/Button.vue';
 export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
 export { default as ProductDetailsList } from './src/components/ProductDetailsList.vue';
@@ -29,10 +28,7 @@ export { default as ProductModel } from './src/components/Product/ProductModel.v
 export { default as ProductModels } from './src/components/Product/ProductModels.vue';
 export { default as ProductName } from './src/components/Product/ProductName.vue';
 export { default as ProductPositions } from './src/components/Product/ProductPositions.vue';
-export { default as ProductNumber } from './src/components/Product/ProductNumber.astro';
 export { default as ProductLink } from './src/components/Product/ProductLink.vue';
-// export { default as ProductCarousel } from './src/components/Product/ProductCarousel.astro';
-export { default as LanguageSuggestion } from './src/components/LanguageSuggestion.astro';
 export { default as Input } from './src/components/Input.vue';
 
 export { default as PostCategories } from './src/components/Post/PostCategories.vue';
@@ -40,21 +36,24 @@ export { default as CategorySidebarToggler } from './src/components/Category/Cat
 export { default as SubCategoryLink } from './src/components/Category/SubCategoryLink.vue';
 export { default as CategoryLink } from './src/components/Category/CategoryLink.vue';
 
-// Astro Components
-export { default as Copyright } from './src/components/Copyright.astro'; 
+// Astro Components (without <script> tags — safe in barrel)
+export { default as Jumbotron } from './src/components/Jumbotron.astro';
+export { default as Copyright } from './src/components/Copyright.astro';
 export { default as HandDrive } from './src/components/HandDrive.astro';
 export { default as Faq } from './src/components/Faq.astro';
 export { default as FaqItem } from './src/components/FaqItem.astro';
-export { default as ButtonCopy } from './src/components/ButtonCopy.astro';
 export { default as CallToAction } from './src/components/layout/CallToAction.astro';
-
+export { default as ProductNumber } from './src/components/Product/ProductNumber.astro';
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
 export { default as ProductEngine } from './src/components/Product/ProductEngine.astro';
 export { default as ProductEngines } from './src/components/Product/ProductEngines.astro';
-
-export { default as CategoryDetails } from './src/components/Category/CategoryDetails.astro';
 export { default as CategoryTile } from './src/components/Category/CategoryTile.astro';
 
+// Astro Components WITH <script> tags — NOT in barrel to prevent script hoisting.
+// Import directly: import ButtonCopy from 'spoko-design-system/components/ButtonCopy.astro'
+// See: https://github.com/withastro/astro/issues/6906
+// - ButtonCopy, CategoryDetails, LanguageSuggestion
+
 
 // Utils: Product
 export { default as getPriceFormatted } from './src/utils/product/getPriceFormatted';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.28.0",
+  "version": "1.28.2",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -15,7 +15,8 @@
     "./scripts/*": "./src/scripts/*",
     "./icons": "./icon.config.ts",
     "./icon-collections": "./icon.collections.ts",
-    "./uno-config": "./uno-config/index.ts"
+    "./uno-config": "./uno-config/index.ts",
+    "./components/*": "./src/components/*"
   },
   "scripts": {
     "dev": "astro dev",

package/src/layouts/partials/HeadCommon.astro

@@ -13,9 +13,8 @@ import { pwaInfo } from 'virtual:pwa-info';
 <link rel="sitemap" href="/sitemap-index.xml" />
 
 <!-- Preload Fonts -->
-<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
+<link rel="preload" href="/fonts/vwhead-light-webfont.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/fonts/vwhead-regular-webfont.woff2" as="font" type="font/woff2" crossorigin />
 
 <!-- Scrollable a11y code helper -->
 <script src="/make-scrollable-code-focusable.js" is:inline></script>

package/src/pages/index.astro

@@ -95,7 +95,7 @@ const exampleSites = [
     <Jumbotron title={SITE.title}>
       <p
         slot="subtitle"
-        class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+        class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5 leading-snug"
         set:html={SITE.description}
       />
 
@@ -112,10 +112,10 @@ const exampleSites = [
             <a
               href={url}
               title={description}
-              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
+              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 min-h-24 md:(flex-col w-auto flex-nowrap text-center py-16 min-h-48)"
             >
               <Headline as="h2" class="text-3xl" underline={false}>
-                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-3 text-4xl" />
+                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-3 text-4xl w-10 h-10 shrink-0" />
                 {title}
               </Headline>
               <p class="text-slate-500 w-full">{description}</p>
@@ -140,13 +140,13 @@ const exampleSites = [
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
         {
           features.map(({ title, icon, description }) => (
-            <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+            <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100 min-h-40">
               <Headline
                 as="h3"
                 class="text-2xl mb-3 text-gray-900 flex items-center justify-center"
                 underline={false}
               >
-                <Icon name={icon} aria-hidden="true" class="text-4xl text-blue-400 mr-3" />
+                <Icon name={icon} aria-hidden="true" class="text-4xl text-blue-400 mr-3 w-10 h-10 shrink-0" />
                 {title}
               </Headline>
               <p class="text-gray-600" set:html={description} />

package/src/styles/base/typography.css

@@ -64,6 +64,25 @@
   font-display: swap;
 }
 
+/* Fallback font metrics matching to reduce CLS on font swap */
+@font-face {
+  font-family: 'vw_headlight_fallback';
+  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
+  ascent-override: 78.7%;
+  descent-override: 21.3%;
+  line-gap-override: 0%;
+  size-adjust: 105%;
+}
+
+@font-face {
+  font-family: 'vw_headregular_fallback';
+  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
+  ascent-override: 78.7%;
+  descent-override: 21.3%;
+  line-gap-override: 21.9%;
+  size-adjust: 105%;
+}
+
 /* for some content which don't need to index in Google */
 [data-text]:before {
   content: attr(data-text);

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

@@ -6,12 +6,12 @@ export const jumbotronShortcuts = [
   // Default variant
   ['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
   ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
-  ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
+  ['jumbotron-container-large', 'min-h-48 md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
   [
     'jumbotron-title-default',
-    'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl',
+    'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl leading-[1.15]',
   ],
-  ['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
+  ['jumbotron-cta-wrapper', 'mt-5 min-h-12 sm:(mt-8 flex justify-center)'],
 
   // Hero variant
   ['jumbotron-hero-wrapper', 'relative w-full'],

package/uno-config/theme/typography.ts

@@ -17,8 +17,8 @@ interface FontFamily {
       sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
       novamono: ['Nova Mono'],
       mono: ['Nova Mono'],
-      headlight: ['vw_headlight', 'system-ui'],
-      headregular: ['vw_headregular'],
+      headlight: ['vw_headlight', 'vw_headlight_fallback', 'system-ui'],
+      headregular: ['vw_headregular', 'vw_headregular_fallback', 'system-ui'],
       headbold: ['vw_headbold'],
       textlight: ['vw_textlight'],
       textregular: ['vw_textregular'],