@yatoday/astro-ui 0.18.1 → 0.18.4

package/components/PointMap/PointMap.astro

@@ -1,56 +1,60 @@
 ---
-import type {PointMapProps as Props} from './types';
-import {cn, id} from "../../utils";
+import type { PointMapProps as Props } from './types';
+import { cn, id } from '../../utils';
 import Card7 from '../Card7/Card7.astro';
 
 const {
   via = Card7,
   items = [],
   pointsDisplayMode = 'always', // default to always visible
-  classes = {}
+  classes = {},
 } = Astro.props;
 
 const mapId = `map-${id()}`;
 
-const {
-  container: containerClass = '',
-  popup: popupClass = '',
-} = classes;
+const { container: containerClass = '', popup: popupClass = '' } = classes;
 
 const Component = via;
 ---
 
 <div id={mapId} class={cn(`map-picker relative h-full w-full points-${pointsDisplayMode}`, containerClass)}>
-  {items.map((point, i) => (
-    <>
-      <!-- Hotspot point -->
-      <button
-        class="hotspot-point cursor-pointer"
-        style={`left: ${point.x}%; top: ${point.y}%; width: 24px; height: 24px; transform: translate(-50%, -50%);`}
-        data-index={i}
-        data-map-id={mapId}
-        aria-label={point.title}
-        {...(point.isPopupOpen ? { 'data-initially-open': '' } : {})}
-      >
-      </button>
-
-      <!-- Popup content (hidden by default) -->
-      <div
-        class={cn("popup-content absolute rounded-md shadow-lg z-10 max-w-xs hidden", popupClass)}
-        style={`left: ${point.x}%; top: ${point.y}%; transform: translate(${point.x > 50 ? '-100%' : '0'}, ${point.y > 50 ? '-100%' : '0'});`}
-        data-popup={i}
-        data-map-id={mapId}
-      >
-        <Component 
-          {...point}
-          classes={Object.assign({container: 'border-transparent dark:border-input'}, classes?.card || {}, point?.classes || {}) as Record<string, string>}
+  {
+    items.map((point, i) => (
+      <>
+        {/* Hotspot point */}
+        <button
+          class="hotspot-point cursor-pointer"
+          style={`left: ${point.x}%; top: ${point.y}%; width: 24px; height: 24px; transform: translate(-50%, -50%);`}
+          data-index={i}
+          data-map-id={mapId}
+          aria-label={point.title}
+          {...(point.isPopupOpen ? { 'data-initially-open': '' } : {})}
         />
-      </div>
-    </>
-  ))}
+
+        {/* Popup content (hidden by default) */}
+        <div
+          class={cn('popup-content absolute rounded-md shadow-lg z-10 max-w-xs hidden', popupClass)}
+          style={`left: ${point.x}%; top: ${point.y}%; transform: translate(${point.x > 50 ? '-100%' : '0'}, ${point.y > 50 ? '-100%' : '0'});`}
+          data-popup={i}
+          data-map-id={mapId}
+        >
+          <Component
+            {...point}
+            classes={
+              Object.assign(
+                { container: 'border-transparent dark:border-input' },
+                classes?.card || {},
+                point?.classes || {}
+              ) as Record<string, string>
+            }
+          />
+        </div>
+      </>
+    ))
+  }
 
   <div class="w-full h-full">
-    <slot/>
+    <slot />
   </div>
 </div>
 
@@ -70,7 +74,9 @@ const Component = via;
   .points-hover .hotspot-point {
     opacity: 0;
     visibility: hidden;
-    transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
+    transition:
+      opacity 250ms ease-in-out,
+      visibility 250ms ease-in-out;
   }
 
   .points-hover:hover .hotspot-point,
@@ -81,7 +87,10 @@ const Component = via;
 
   .hotspot-point {
     box-sizing: border-box;
-    transition: border-color 250ms ease-in-out, opacity 250ms ease-in-out, visibility 250ms ease-in-out;
+    transition:
+      border-color 250ms ease-in-out,
+      opacity 250ms ease-in-out,
+      visibility 250ms ease-in-out;
     transform: translateX(-1rem) translateY(-1rem) scale(0.999);
     padding: 0;
     width: 2rem;
@@ -91,14 +100,14 @@ const Component = via;
     position: absolute;
     background-color: rgba(17, 17, 17, 0.75);
     border-radius: 64px;
-    line-height: .5;
+    line-height: 0.5;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .hotspot-point::before {
-    content: "";
+    content: '';
     position: absolute;
     top: -0.5rem;
     left: -0.5rem;
@@ -108,18 +117,19 @@ const Component = via;
   }
 
   .hotspot-point::after {
-    content: "";
+    content: '';
     position: relative;
     display: block;
     background: rgb(255, 255, 255);
     box-shadow: 0 1px 4px rgba(17, 17, 17, 0.55);
-    width: .75rem;
-    height: .75rem;
+    width: 0.75rem;
+    height: 0.75rem;
     border-radius: 64px;
     transition: transform 250ms ease-in-out;
   }
 
-  .hotspot-point:active, .hotspot-point:hover {
+  .hotspot-point:active,
+  .hotspot-point:hover {
     background-color: rgba(17, 17, 17, 0.9);
   }
 
@@ -139,13 +149,15 @@ const Component = via;
     const MAP_ID_ATTRIBUTE = 'data-map-id';
 
     // Initialize each map component separately
-    document.querySelectorAll('.map-picker').forEach(mapContainer => {
+    document.querySelectorAll('.map-picker').forEach((mapContainer) => {
       const mapId = mapContainer.id;
       if (!mapId) return;
 
       // Get all hotspot points and popups for this specific map
       const hotspotPoints = document.querySelectorAll(`.hotspot-point[${MAP_ID_ATTRIBUTE}="${mapId}"]`);
-      const popups = document.querySelectorAll(`.popup-content[${MAP_ID_ATTRIBUTE}="${mapId}"]`) as NodeListOf<HTMLElement>;
+      const popups = document.querySelectorAll(
+        `.popup-content[${MAP_ID_ATTRIBUTE}="${mapId}"]`
+      ) as NodeListOf<HTMLElement>;
 
       if (!hotspotPoints.length || !popups.length) return;
 
@@ -196,7 +208,9 @@ const Component = via;
                 return;
               }
 
-              const point = document.querySelector(`.hotspot-point[data-index="${popupIndex}"][${MAP_ID_ATTRIBUTE}="${mapId}"]`) as HTMLElement;
+              const point = document.querySelector(
+                `.hotspot-point[data-index="${popupIndex}"][${MAP_ID_ATTRIBUTE}="${mapId}"]`
+              ) as HTMLElement;
               if (!point) return;
               const coordinates = getPointCoordinates(point);
               const translateX = coordinates.x > 50 ? '-100%' : '0';
@@ -214,7 +228,7 @@ const Component = via;
       function getPointCoordinates(pointElement: HTMLElement): PointCoordinates {
         return {
           x: parseFloat(pointElement.style.left) || 0,
-          y: parseFloat(pointElement.style.top) || 0
+          y: parseFloat(pointElement.style.top) || 0,
         };
       }
 
@@ -258,13 +272,13 @@ const Component = via;
 
       // Hide all popups (including initially open ones)
       function hideAllPopups() {
-        popups.forEach(popup => {
+        popups.forEach((popup) => {
           popup.classList.add('hidden');
         });
       }
 
       // Add event listeners to hotspot points
-      hotspotPoints.forEach(point => {
+      hotspotPoints.forEach((point) => {
         const index = getPointIndex(point);
         if (index === null) return;
 

package/components/PointMap/types.ts

@@ -1,4 +1,4 @@
-import type {HotspotPoint} from "../../types";
+import type { HotspotPoint } from '../../types';
 import type { Snippet } from 'svelte';
 
 export type PointMapProps = {
@@ -6,7 +6,7 @@ export type PointMapProps = {
   items: HotspotPoint[];
   pointsDisplayMode?: 'always' | 'hover' | undefined; // controls visibility of hotspot points
   classes?: Record<string, string>;
-}
+};
 
 export type SveltePointMapProps = {
   via?: any;
@@ -14,4 +14,4 @@ export type SveltePointMapProps = {
   pointsDisplayMode?: 'always' | 'hover' | undefined;
   classes?: Record<string, string>;
   children?: Snippet;
-}
+};

package/components/SEO/SEO.astro

@@ -65,45 +65,46 @@ const getOGLocale = (loc: string): string => {
 };
 ---
 
-<!-- Primary Meta Tags -->
-{title && <title>{title}</title>}
+<!-- Primary Meta Tags -->{title && <title>{title}</title>}
 {description && <meta name="description" content={description} />}
 {canonical && <link rel="canonical" href={canonical} />}
 <meta name="robots" content={robotsContent} />
 
 <!-- Open Graph / Facebook -->
-{openGraph && (
-  <>
-    {openGraph.title && <meta property="og:title" content={openGraph.title} />}
-    {openGraph.description && <meta property="og:description" content={openGraph.description} />}
-    {openGraph.url && <meta property="og:url" content={openGraph.url} />}
-    {openGraph.type && <meta property="og:type" content={openGraph.type} />}
-    {openGraph.image && (
-      <>
-        <meta property="og:image" content={openGraph.image.url} />
-        {openGraph.image.width && <meta property="og:image:width" content={openGraph.image.width.toString()} />}
-        {openGraph.image.height && <meta property="og:image:height" content={openGraph.image.height.toString()} />}
-        {openGraph.image.alt && <meta property="og:image:alt" content={openGraph.image.alt} />}
-      </>
-    )}
-    <meta property="og:locale" content={getOGLocale(locale)} />
-    {openGraph.siteName && <meta property="og:site_name" content={openGraph.siteName} />}
-  </>
-)}
+{
+  openGraph && (
+    <>
+      {openGraph.title && <meta property="og:title" content={openGraph.title} />}
+      {openGraph.description && <meta property="og:description" content={openGraph.description} />}
+      {openGraph.url && <meta property="og:url" content={openGraph.url} />}
+      {openGraph.type && <meta property="og:type" content={openGraph.type} />}
+      {openGraph.image && (
+        <>
+          <meta property="og:image" content={openGraph.image.url} />
+          {openGraph.image.width && <meta property="og:image:width" content={openGraph.image.width.toString()} />}
+          {openGraph.image.height && <meta property="og:image:height" content={openGraph.image.height.toString()} />}
+          {openGraph.image.alt && <meta property="og:image:alt" content={openGraph.image.alt} />}
+        </>
+      )}
+      <meta property="og:locale" content={getOGLocale(locale)} />
+      {openGraph.siteName && <meta property="og:site_name" content={openGraph.siteName} />}
+    </>
+  )
+}
 
 <!-- Alternate Language Links (hreflang) -->
-{alternateLocales.map(({ locale: altLocale, url }) => (
-  <link rel="alternate" hreflang={altLocale} href={url} />
-))}
+{alternateLocales.map(({ locale: altLocale, url }) => <link rel="alternate" hreflang={altLocale} href={url} />)}
 
 <!-- Twitter Card -->
-{twitter && (
-  <>
-    <meta name="twitter:card" content={twitter.card || 'summary_large_image'} />
-    {twitter.site && <meta name="twitter:site" content={twitter.site} />}
-    {twitter.creator && <meta name="twitter:creator" content={twitter.creator} />}
-    {twitter.title && <meta name="twitter:title" content={twitter.title} />}
-    {twitter.description && <meta name="twitter:description" content={twitter.description} />}
-    {twitter.image && <meta name="twitter:image" content={twitter.image} />}
-  </>
-)}
+{
+  twitter && (
+    <>
+      <meta name="twitter:card" content={twitter.card || 'summary_large_image'} />
+      {twitter.site && <meta name="twitter:site" content={twitter.site} />}
+      {twitter.creator && <meta name="twitter:creator" content={twitter.creator} />}
+      {twitter.title && <meta name="twitter:title" content={twitter.title} />}
+      {twitter.description && <meta name="twitter:description" content={twitter.description} />}
+      {twitter.image && <meta name="twitter:image" content={twitter.image} />}
+    </>
+  )
+}

package/components/WidgetBrands/WidgetBrands.astro

@@ -29,7 +29,14 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} as={asHeader} asSubtitle={asSubtitle} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
+  />
 
   <div class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
     {

package/components/WidgetContent/WidgetContent.astro

@@ -50,7 +50,7 @@ const {
   />
 
   <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
-    <div class={cn("md:basis-1/2 self-center", classes?.start ?? '')}>
+    <div class={cn('md:basis-1/2 self-center', classes?.start ?? '')}>
       <slot />
       {content && <div class={cn('mb-12 text-lg', classes?.content ?? '')} set:html={content} />}
 
@@ -70,21 +70,34 @@ const {
                 icon={defaultIcon}
                 {...item}
                 classes={{
-                  container: cn('gap-0 border-0 py-0 justify-start', (classes?.items as Record<string, string>)?.container),
-                  title: cn('text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2', (classes?.items as Record<string, string>)?.title),
+                  container: cn(
+                    'gap-0 border-0 py-0 justify-start',
+                    (classes?.items as Record<string, string>)?.container
+                  ),
+                  title: cn(
+                    'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
+                    (classes?.items as Record<string, string>)?.title
+                  ),
                   description: cn('ml-2 rtl:ml-0 rtl:mr-2', (classes?.items as Record<string, string>)?.description),
-                  icon: cn('flex h-7 w-7 items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-gray-50 p-1', (classes?.items as Record<string, string>)?.icon),
+                  icon: cn(
+                    'flex h-7 w-7 items-center justify-center rounded-full bg-green-600 dark:bg-green-700 text-gray-50 p-1',
+                    (classes?.items as Record<string, string>)?.icon
+                  ),
                 }}
               />
             ))
         }
       </ItemGrid0>
     </div>
-    <div aria-hidden="true" class={cn("mt-10 md:mt-0 md:basis-1/2", classes?.end ?? '')}>
+    <div aria-hidden="true" class={cn('mt-10 md:mt-0 md:basis-1/2', classes?.end ?? '')}>
       {
         image && (
-            <div class={cn('relative m-auto max-w-4xl', classes?.image ?? '')}>
-              <PointMap items={points} pointsDisplayMode={pointsDisplayMode} classes={{...((classes?.points as object) ?? {})}}>
+          <div class={cn('relative m-auto max-w-4xl', classes?.image ?? '')}>
+            <PointMap
+              items={points}
+              pointsDisplayMode={pointsDisplayMode}
+              classes={{ ...((classes?.points as object) ?? {}) }}
+            >
               {typeof image === 'string' ? (
                 <Fragment set:html={image} />
               ) : (
@@ -97,8 +110,8 @@ const {
                   {...image}
                 />
               )}
-              </PointMap>
-            </div>
+            </PointMap>
+          </div>
         )
       }
     </div>

package/components/WidgetContent/types.ts

@@ -1,4 +1,4 @@
-import type {Item, HotspotPoint, ToAction} from '../../types';
+import type { Item, HotspotPoint, ToAction } from '../../types';
 import type { WidgetWrapperProps, SvelteWidgetWrapperProps } from '../WidgetWrapper/types';
 import type { HeadlineProps } from '../Headline/types.ts';
 import type { Snippet } from 'svelte';

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -49,7 +49,7 @@ const ComponentGrid = viaGrid;
     as={asHeader}
     asSubtitle={asSubtitle}
   />
-  
+
   {
     image && (
       <div aria-hidden="true" class={cn('aspect-w-16 aspect-h-7 mb-6')}>
@@ -79,6 +79,14 @@ const ComponentGrid = viaGrid;
   <slot />
 
   <ComponentGrid columns={columns} class={classes?.grid && ''}>
-    {items && items.map((item) => <Component {...item} classes={Object.assign({}, classes?.card || {}, item?.classes || {}) as Record<string, string>}/>)}
+    {
+      items &&
+        items.map((item) => (
+          <Component
+            {...item}
+            classes={Object.assign({}, classes?.card || {}, item?.classes || {}) as Record<string, string>}
+          />
+        ))
+    }
   </ComponentGrid>
 </WidgetWrapper>

package/components/WidgetHeroSlider/WidgetHeroSlider.astro

@@ -197,7 +197,12 @@ const {
     }
 
     <!-- Loading indicator -->
-    <div class={cn('absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none', `${classes?.loading}`)}>
+    <div
+      class={cn(
+        'absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none',
+        `${classes?.loading}`
+      )}
+    >
       <svg class="animate-spin h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path

package/components/WidgetNavbarFlyout/WidgetNavbarFlyout.astro

@@ -118,8 +118,7 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
                     aria-expanded="false"
                     class={cn('hidden md:flex px-4 py-3 items-center whitespace-nowrap cursor-pointer', linksClass)}
                   >
-                    {item.text}{' '}
-                    <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5" />
+                    {item.text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5" />
                   </button>
                 ) : (
                   <a
@@ -140,7 +139,9 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
                 <div class="md:hidden">
                   {hasPanel ? (
                     <>
-                      <span class={cn('block px-4 py-3 text-base font-semibold uppercase tracking-wider', megaHeadingClass)}>
+                      <span
+                        class={cn('block px-4 py-3 text-base font-semibold uppercase tracking-wider', megaHeadingClass)}
+                      >
                         {item.text}
                       </span>
                       <ul class="flex flex-col pb-2">
@@ -202,7 +203,10 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
           role="region"
           aria-label="Menu details"
         >
-          <div class={cn('flyout-bg relative overflow-hidden rounded-xl border border-border', megaMenuClass)} data-flyout-bg>
+          <div
+            class={cn('flyout-bg relative overflow-hidden rounded-xl border border-border', megaMenuClass)}
+            data-flyout-bg
+          >
             {panelItems.map(({ link, index }) => (
               <div class="flyout-panel absolute top-0 left-0" data-flyout-panel data-flyout-key={index}>
                 {link.mega ? (
@@ -297,9 +301,14 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
     >
       <div class="items-center flex justify-between w-full md:w-auto">
         <div class="flex">
-          {showToggleTheme && (
-            <DarkMode initialMode={initialMode} iconClass={cn('w-6 h-6 md:w-5 md:h-5 md:inline-block', darkModeIconClass)} />
-          )}
+          {
+            showToggleTheme && (
+              <DarkMode
+                initialMode={initialMode}
+                iconClass={cn('w-6 h-6 md:w-5 md:h-5 md:inline-block', darkModeIconClass)}
+              />
+            )
+          }
         </div>
 
         <!-- Actions Buttons -->
@@ -344,6 +353,12 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
       opacity 0.18s ease,
       transform 0.18s ease,
       visibility 0s linear 0.18s;
+    /* Wrapper is full-width; only the visible box should catch clicks so a click
+       to the side of the panel falls through to the page (and closes the menu). */
+    pointer-events: none;
+  }
+  .flyout-bg {
+    pointer-events: auto;
   }
   .flyout.is-open {
     opacity: 1;
@@ -533,9 +548,11 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
       const key = trigger.dataset.flyoutKey!;
       trigger.addEventListener('mouseenter', () => openTo(key));
       trigger.addEventListener('focus', () => openTo(key));
+      // Clicking a trigger only ever opens (never toggles closed) so a click that
+      // races the open animation can't dismiss the menu the user just summoned.
       trigger.addEventListener('click', (e) => {
         e.preventDefault();
-        open && key === currentKey ? close() : openTo(key);
+        openTo(key);
       });
     });
 
@@ -553,8 +570,11 @@ const panelItems = links.map((link, index) => ({ link, index })).filter(({ link
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') close();
     });
+    // Close on any click outside the *visible* box (bgEl) or the nav. The flyout
+    // wrapper spans the full width, so clicking to the side of the panel must not
+    // count as "inside" — otherwise the menu would stay stuck open.
     document.addEventListener('click', (e) => {
-      if (open && !flyout.contains(e.target as Node) && !nav?.contains(e.target as Node)) close();
+      if (open && !bgEl.contains(e.target as Node) && !nav?.contains(e.target as Node)) close();
     });
     window.addEventListener('resize', () => {
       if (open && currentKey) {

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -6,7 +6,7 @@ import SwiperSlider from '../SwiperSlider/SwiperSlider.astro';
 import { Image as AstroImage, getImage } from 'astro:assets';
 import { fetchLocalImages } from '../../utils/images';
 import { cn } from '../../utils';
-import Button from "../Button/Button.astro";
+import Button from '../Button/Button.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -28,7 +28,7 @@ const {
   ...rest
 } = Astro.props;
 
-const images = await fetchLocalImages() as Record<string, () => any>;
+const images = (await fetchLocalImages()) as Record<string, () => any>;
 const imagePaths = Object.keys(images).filter((imagePath) => {
   return imagePath.startsWith(`/src/assets/images/${imagesFolder}/`);
 });
@@ -62,11 +62,19 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
 
           // Generate alt text: alt prop > title-based > numbered fallback
           // Detect UUID filenames (8-4-4-4-12 hex pattern) and treat as meaningless
-          const filename = imagePath.split('/').pop()?.replace(/\.[^/.]+$/, '') || '';
+          const filename =
+            imagePath
+              .split('/')
+              .pop()
+              ?.replace(/\.[^/.]+$/, '') || '';
           const isUuidFilename = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(filename);
           const imageNumber = index + 1;
-          const imageName = (filename && !isUuidFilename) ? filename : String(imageNumber);
-          const baseTitle = title ? String(title).replace(/<[^>]*>/g, '').trim() : '';
+          const imageName = filename && !isUuidFilename ? filename : String(imageNumber);
+          const baseTitle = title
+            ? String(title)
+                .replace(/<[^>]*>/g, '')
+                .trim()
+            : '';
           const altText = alt
             ? alt + ' - ' + imageName
             : baseTitle
@@ -90,7 +98,10 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
                   widths={[400, 900]}
                   width={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  class={cn("object-cover object-top w-full md:h-full group-hover:scale-105 transition duration-300", classes?.image)}
+                  class={cn(
+                    'object-cover object-top w-full md:h-full group-hover:scale-105 transition duration-300',
+                    classes?.image
+                  )}
                 />
               </a>
             </swiper-slide>
@@ -107,7 +118,7 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
       </div>
     )
   }
-  
+
   <slot />
 </WidgetWrapper>
 

package/components/WidgetTestimonials/WidgetTestimonials.astro

@@ -30,7 +30,14 @@ const {
   containerClass={`max-w-6xl mx-auto ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} as={asHeader} asSubtitle={asSubtitle} />
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
+  />
 
   <ItemGrid0 columns={columns}>
     {

package/components/WidgetWrapper/WidgetWrapper.astro

@@ -1,9 +1,18 @@
 ---
 import type { WidgetWrapperProps as Props } from './types';
 import Background from '../Background/Background.astro';
-import {cn} from "../../utils";
+import { cn } from '../../utils';
 
-const { id, isDark = false, class: className = '', containerClass = '', bg, as = 'section', isAfterContent = false, ...rest } = Astro.props;
+const {
+  id,
+  isDark = false,
+  class: className = '',
+  containerClass = '',
+  bg,
+  as = 'section',
+  isAfterContent = false,
+  ...rest
+} = Astro.props;
 
 const WrapperTag = as;
 ---