spoko-design-system 0.3.8 → 0.4.1

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.2.5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"img.freepik.com\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]

package/astro.config.mjs

@@ -9,7 +9,7 @@ import sitemap from "@astrojs/sitemap";
 import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
-import playformInline from "@playform/inline";
+
 import { createSdsConfig } from './uno-config';
 
 const unoConfig = createSdsConfig();
@@ -22,68 +22,66 @@ export default defineConfig({
   },
   image: {
     service: sharpImageService(),
-    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com"]
+    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com", "polo6r.pl"]
   },
   integrations: [
-  // Enable Vue to support Vue3 components.
-  vue(), mdx(), astroI18next(), AstroPWA({
-    mode: 'production',
-    base: '/',
-    scope: '/',
-    includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
-    // add this to cache all the static assets in the public folder
-    // includeAssets: [
-    //   "**/*",
-    // ],
-    registerType: 'autoUpdate',
-    manifest: {
-      name: 'Spoko Design System',
-      short_name: 'SDS',
-      description: 'SDS PWA app description',
-      categories: ['multimedia'],
-      screenshots: [{
-        "src": "pwa-512x512.png",
-        "sizes": "512x512",
-        "platform": "windows",
-        "label": "SDS"
-      }],
-      theme_color: '#001e50',
-      icons: [{
-        src: 'pwa-192x192.png',
-        sizes: '192x192',
-        type: 'image/png'
-      }, {
-        src: 'pwa-512x512.png',
-        sizes: '512x512',
-        type: 'image/png'
-      }, {
-        src: 'pwa-512x512.png',
-        sizes: '512x512',
-        type: 'image/png',
-        purpose: 'any maskable'
-      }]
-    },
-    workbox: {
-      navigateFallback: '/',
-      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
-      // globPatterns: ["**/*"],             // add this to cache all the imports
-    },
-    devOptions: {
-      enabled: false,
-      navigateFallbackAllowlist: [/^\//]
-    },
-    experimental: {
-      directoryAndTrailingSlashHandler: true
-    }
-  }), 
-  UnoCSS({
-    injectReset: true,
-    ...unoConfig
-  }),
-  icon(iconConfig), 
-  metaTags(),
-  (await import("@playform/inline")).default(),
-  pagefind(), 
-  sitemap()
-]
+    // Enable Vue to support Vue3 components
+    vue(), 
+    mdx(), 
+    astroI18next(), 
+    AstroPWA({
+      mode: 'production',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Spoko Design System',
+        short_name: 'SDS',
+        description: 'SDS PWA app description',
+        categories: ['multimedia'],
+        screenshots: [{
+          "src": "pwa-512x512.png",
+          "sizes": "512x512",
+          "platform": "windows",
+          "label": "SDS"
+        }],
+        theme_color: '#001e50',
+        icons: [{
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        }]
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallbackAllowlist: [/^\//]
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true
+      }
+    }), 
+    UnoCSS({
+      injectReset: true,
+      ...unoConfig
+    }),
+    icon(iconConfig), 
+    metaTags(),
+    (await import("@playform/inline")).default(),
+    pagefind(), 
+    sitemap()
+  ]
 });

package/index.ts

@@ -38,6 +38,7 @@ 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'; // Add this line
 
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.3.08",
+  "version": "0.4.1",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -74,7 +74,7 @@
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
     "@playform/inline": "^0.1.1",
-    "@types/node": "^22.13.3",
+    "@types/node": "^22.13.4",
     "@unocss/astro": "^65.4.3",
     "@unocss/preset-attributify": "^65.4.3",
     "@unocss/preset-typography": "^65.4.3",
@@ -83,7 +83,7 @@
     "@unocss/preset-wind": "^65.4.3",
     "@unocss/reset": "^65.4.3",
     "@vite-pwa/astro": "^0.5.0",
-    "@vueuse/core": "^12.5.0",
+    "@vueuse/core": "^12.6.1",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.3.1",
@@ -92,7 +92,7 @@
     "astro-remote": "^0.3.3",
     "dotenv": "^16.4.7",
     "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-browser-languagedetector": "^8.0.3",
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.1.0",

package/src/components/ButtonCopy.astro

@@ -0,0 +1,165 @@
+---
+interface Props {
+  productNumber: string;
+  tooltipClasses?: string;
+  texts: {
+    copy: string;
+    copied: string;
+  };
+}
+
+const { 
+  productNumber,
+  tooltipClasses = '',
+  texts 
+} = Astro.props;
+
+// Move SVG definition to a constant to avoid recomputing
+const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
+  `<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M184 66H40a6 6 0 0 0-6 6v144a6 6 0 0 0 6 6h144a6 6 0 0 0 6-6V72a6 6 0 0 0-6-6m-6 144H46V78h132Zm44-170v144a6 6 0 0 1-12 0V46H72a6 6 0 0 1 0-12h144a6 6 0 0 1 6 6'/></svg>`
+)}")`;
+---
+
+<button 
+  aria-label={texts.copy} 
+  class="btn-copy has-tooltip" 
+  data-copy-text={productNumber}
+>
+  <span 
+    class:list={["tooltip rounded-full btn-copy-text", tooltipClasses]}
+    data-text={texts.copy}
+    data-copied-text={texts.copied}
+  />
+  <span class="copy-icon" role="img" aria-hidden="true" />
+</button>
+
+<script>
+  class ClipboardButton {
+    private static COPY_TIMEOUT = 2000;
+
+    constructor(private button: HTMLButtonElement) {
+      this.init();
+    }
+
+    private init(): void {
+      this.button.addEventListener('click', () => this.handleCopy());
+    }
+
+    private get tooltip(): HTMLSpanElement {
+      return this.button.querySelector('.tooltip') as HTMLSpanElement;
+    }
+
+    private get copyText(): string {
+      return this.button.dataset.copyText || '';
+    }
+
+    private get originalText(): string {
+      return this.tooltip.dataset.text || 'Copy';
+    }
+
+    private get copiedText(): string {
+      return this.tooltip.dataset.copiedText || 'Copied';
+    }
+
+    private async handleCopy(): Promise<void> {
+      try {
+        await this.copyToClipboard();
+        this.updateTooltip();
+      } catch (err) {
+        console.error('Failed to copy text:', err);
+      }
+    }
+
+    private async copyToClipboard(): Promise<void> {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(this.copyText);
+      } else {
+        this.fallbackCopy();
+      }
+    }
+
+    private updateTooltip(): void {
+      this.tooltip.dataset.text = this.copiedText;
+      setTimeout(() => {
+        this.tooltip.dataset.text = this.originalText;
+      }, ClipboardButton.COPY_TIMEOUT);
+    }
+
+    private fallbackCopy(): void {
+      const textArea = document.createElement('textarea');
+      textArea.value = this.copyText;
+      textArea.style.position = 'fixed';
+      textArea.style.opacity = '0';
+      
+      document.body.appendChild(textArea);
+      textArea.select();
+      
+      try {
+        document.execCommand('copy');
+      } catch (err) {
+        console.error('Fallback copy failed:', err);
+      } finally {
+        document.body.removeChild(textArea);
+      }
+    }
+  }
+
+  // Use a single event listener with event delegation
+  document.addEventListener('astro:page-load', () => {
+    document.querySelectorAll('.btn-copy').forEach(button => {
+      if (button instanceof HTMLButtonElement) {
+        new ClipboardButton(button);
+      }
+    });
+  });
+</script>
+
+<style define:vars={{ iconUrl: COPY_ICON }}>
+  .btn-copy {
+    position: absolute;
+    right: -1.75rem;
+    margin-left: auto;
+    width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1;
+    opacity: 0.1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .btn-copy:hover {
+    opacity: 1;
+  }
+
+  @media (min-width: 640px) {
+    .btn-copy {
+      right: -1.25rem;
+    }
+  }
+
+  .tooltip {
+    @apply invisible absolute -top-8 left-1/2 -translate-x-1/2 bg-neutral px-2 py-1 text-xs text-white opacity-0 transition-opacity;
+  }
+
+  .tooltip::before {
+    content: attr(data-text);
+  }
+
+  .has-tooltip:hover .tooltip {
+    @apply visible opacity-100;
+  }
+
+  .copy-icon {
+    width: 1.2em;
+    height: 1.2em;
+    display: inline-block;
+    vertical-align: middle;
+    background-color: currentColor;
+    -webkit-mask: var(--iconUrl) no-repeat;
+    mask: var(--iconUrl) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+  }
+</style>

package/src/components/Category/CategoryDetails.astro

@@ -4,11 +4,18 @@ import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 import { t } from "i18next";
 
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showViewToggler, viewerLabels } = Astro.props;
+const { 
+  category, 
+  subcategory, 
+  subtitle, 
+  subsubtitle, 
+  titleSmall, 
+  locale, 
+  showViewToggler, 
+  viewerLabels 
+} = Astro.props;
 
-// Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
-   
 ---
 
 <div 
@@ -16,26 +23,26 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   transition:name="category-details"
   transition:animate="fade"
 >
-<CategorySidebarToggler onclick="toggleSidebar()">
-  <!-- Desktop expanded - initially visible -->
-  <Icon 
-    name="ant-design:menu-fold-outlined" 
-    class="toggler-btn md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Desktop collapsed - initially hidden -->
-  <Icon 
-    name="ant-design:menu-unfold-outlined" 
-    class="toggler-btn hidden md:[&:not(.hidden)]:block" 
-    aria-hidden="true"
-  />
-  <!-- Mobile icon -->
-  <Icon 
-    name="ant-design:menu-outlined" 
-    class="toggler-btn block md:hidden" 
-    aria-hidden="true"
-  />
-</CategorySidebarToggler>
+  <CategorySidebarToggler onclick="toggleSidebar()">
+    <!-- Desktop expanded -->
+    <Icon 
+      name="ant-design:menu-fold-outlined" 
+      class="toggler-btn md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Desktop collapsed -->
+    <Icon 
+      name="ant-design:menu-unfold-outlined" 
+      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      aria-hidden="true"
+    />
+    <!-- Mobile icon -->
+    <Icon 
+      name="ant-design:menu-outlined" 
+      class="toggler-btn block md:hidden" 
+      aria-hidden="true"
+    />
+  </CategorySidebarToggler>
 
   <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
     {subtitle ? (
@@ -51,7 +58,7 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
           </h1>
         ) : (
           <>
-            <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap ">
+            <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
               <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>
                 {subtitle}
               </a>
@@ -66,36 +73,41 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
     ) : (
       <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
         {category.name}
-        {titleSmall && (<small>{titleSmall}</small>)}
+        {titleSmall && <small>{titleSmall}</small>}
         <span class="sr-only"> {t('catalog.extra-short')}</span>
       </h1>
     )}
   </div>
 
-{ showViewToggler && (  <CategoryViewToggler {...viewerLabels}  class="hidden lg:flex items-center gap-2 ml-auto" /> ) }
-
+  {showViewToggler && (
+    <CategoryViewToggler 
+      {...viewerLabels}  
+      class="hidden lg:flex items-center gap-2 ml-auto" 
+    />
+  )}
 </div>
 
-<script is:inline>
+<script>
   function initializeSidebar() {
     const sidebar = document.getElementById('sidebar');
     const savedState = localStorage.getItem('sidebarState') || 'open';
     
     if (sidebar) {
       sidebar.classList.toggle('collapsed', savedState === 'closed');
-      
-      const togglers = document.querySelectorAll('.toggler-btn');
-      if (togglers.length >= 2) {
-        const isCollapsed = savedState === 'closed';
-        togglers[0].classList.toggle('hidden', isCollapsed);
-        togglers[1].classList.toggle('hidden', !isCollapsed);
-      }
+      updateTogglers(savedState === 'closed');
+    }
+  }
+
+  function updateTogglers(isCollapsed) {
+    const togglers = document.querySelectorAll('.toggler-btn');
+    if (togglers.length >= 2) {
+      togglers[0].classList.toggle('hidden', isCollapsed);
+      togglers[1].classList.toggle('hidden', !isCollapsed);
     }
   }
   
   function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
-    const togglers = document.querySelectorAll('.toggler-btn');
     const isMobile = window.matchMedia("(max-width: 768px)").matches;
   
     if (sidebar) {
@@ -106,21 +118,34 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
         const isCollapsed = sidebar.classList.toggle('collapsed');
         document.body.classList.remove('overflow-hidden');
         localStorage.setItem('sidebarState', isCollapsed ? 'closed' : 'open');
-        
-        if (togglers.length >= 2) {
-          togglers[0].classList.toggle('hidden', isCollapsed);
-          togglers[1].classList.toggle('hidden', !isCollapsed);
-        }
+        updateTogglers(isCollapsed);
       }
     }
   }
-  
-  document.addEventListener('DOMContentLoaded', initializeSidebar);
-  document.addEventListener('astro:page-load', initializeSidebar, { once: true });
-  </script>
 
-  <style>
-    .toggler-btn {
-      @apply md:-mt-0.5;
+  // Initialize on astro page load
+  document.addEventListener('astro:page-load', initializeSidebar);
+  
+  // Preserve state during view transitions
+  document.addEventListener('astro:before-swap', () => {
+    const sidebarState = localStorage.getItem('sidebarState');
+    if (sidebarState) {
+      sessionStorage.setItem('tempSidebarState', sidebarState);
+    }
+  });
+  
+  document.addEventListener('astro:after-swap', () => {
+    const tempState = sessionStorage.getItem('tempSidebarState');
+    if (tempState) {
+      localStorage.setItem('sidebarState', tempState);
+      sessionStorage.removeItem('tempSidebarState');
+      initializeSidebar();
     }
-  </style>
+  });
+</script>
+
+<style>
+  .toggler-btn {
+    @apply md:-mt-0.5;
+  }
+</style>

package/src/components/Category/CategoryViewToggler.astro

@@ -42,35 +42,41 @@ const {
   </div>
 </div>
 
+<script>
+  function initializeView() {
+    const savedView = localStorage.getItem('categoryView') || 'list';
+    updateUI(savedView);
+    
+    // Clean up existing listeners to prevent duplicates
+    document.querySelectorAll('.view-toggle').forEach(btn => {
+      btn.removeEventListener('click', handleViewToggle);
+      btn.addEventListener('click', handleViewToggle);
+    });
+  }
 
-<script >
   function handleViewToggle(e) {
-    const button = e.currentTarget;
-    if (!(button instanceof HTMLElement)) return;
-    
-    const view = button.dataset.view;
+    if (!(e.currentTarget instanceof HTMLElement)) return;
+    const view = e.currentTarget.dataset.view;
     if (!view) return;
-  
+
     localStorage.setItem('categoryView', view);
     updateUI(view);
   }
-  
+
   function updateUI(view) {
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.classList.toggle('bg-neutral-lightest', 
-        btn.dataset.view === view));
-  
+    // Update toggle buttons
+    document.querySelectorAll('.view-toggle').forEach(btn => {
+      btn.classList.toggle('bg-neutral-lightest', btn.dataset.view === view);
+    });
+
+    // Update products container
     const productsContainer = document.querySelector('.products-container');
     if (productsContainer) {
       productsContainer.classList.remove('view-grid', 'view-list');
       productsContainer.classList.add(`view-${view}`);
     }
   }
-  
-  document.addEventListener('astro:page-load', () => {
-    
-    updateUI(localStorage.getItem('categoryView') || 'list');
-    document.querySelectorAll('.view-toggle')
-      .forEach(btn => btn.addEventListener('click', handleViewToggle));
-  }, { once: true });
-  </script>
+
+  // Initialize on page load and view transitions
+  document.addEventListener('astro:page-load', initializeView);
+</script>

package/src/components/Jumbotron/index.astro

@@ -96,7 +96,7 @@ const commonProps = {
   />
 )}
 
-<style is:global>
+<style>
   .bg-vw {
     background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
   }

package/src/components/Product/ProductNumber.astro

@@ -1,5 +1,5 @@
 ---
-import ButtonCopy from '../ButtonCopy.vue';
+import ButtonCopy from '../ButtonCopy.astro';
 import useFormatProductNumber from '../../utils/product/useFormatProductNumber';
 
 const {
@@ -41,7 +41,6 @@ const FormattedWrapper = isPdp ? 'h3' : 'div';
           productNumber={productNumber}
           texts={buttonTexts}
           tooltipClasses=""
-          client:only="vue"
         />
       )}
     </div>

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

@@ -25,7 +25,7 @@ export const jumbotronShortcuts = [
 
   // Metadata and categories
   ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
-  ['jumbotron-categories', 'order-1'],
+  ['jumbotron-categories', 'order-1 mt-4'],
 
   // Content styles
   ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4'],