@yatoday/astro-ui 0.13.2 → 0.14.0

package/components/Analytics/Analytics.astro

@@ -1,6 +1,7 @@
 ---
 //import type { AnalyticsProps as Props } from './types';
 import AnalyticsGoogleProvider from './AnalyticsGoogle.astro';
+import AnalyticsGTMProvider from './AnalyticsGTM.astro';
 
 import { ANALYTICS } from 'vendor:config';
 ---
@@ -13,3 +14,11 @@ import { ANALYTICS } from 'vendor:config';
     />
   ) : null
 }
+
+{
+  ANALYTICS?.vendors?.googleTagManager?.id ? (
+    <AnalyticsGTMProvider
+      id={String(ANALYTICS.vendors.googleTagManager.id)}
+    />
+  ) : null
+}

package/components/Analytics/AnalyticsGTM.astro

@@ -0,0 +1,15 @@
+---
+import type { AnalyticsGTMProps as Props } from './types';
+
+const { id = 'GTM-XXXXXXX' } = Astro.props;
+---
+
+<!-- Google Tag Manager -->
+<script is:inline define:vars={{ id }}>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer',id);
+</script>
+<!-- End Google Tag Manager -->

package/components/Analytics/AnalyticsGTMBody.astro

@@ -0,0 +1,18 @@
+---
+import { ANALYTICS } from 'vendor:config';
+
+const gtmId = ANALYTICS?.vendors?.googleTagManager?.id;
+---
+
+{gtmId && (
+  <!-- Google Tag Manager (noscript) -->
+  <noscript>
+    <iframe
+      src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+      height="0"
+      width="0"
+      style="display:none;visibility:hidden"
+    ></iframe>
+  </noscript>
+  <!-- End Google Tag Manager (noscript) -->
+)}

package/components/Analytics/types.ts

@@ -8,4 +8,8 @@ export type AnalyticsGoogleProps = {
   partytown?: boolean;
 };
 
+export type AnalyticsGTMProps = {
+  id: string;
+};
+
 export type SvelteAnalyticsProps = AnalyticsProps;

package/components/BackToTopButton/BackToTopButton.astro

@@ -56,9 +56,9 @@ const { selector = '#header', scrollOffset = 450 } = Astro.props;
 </style>
 
 <!-- Back to top button-->
-<a
+<button
+  type="button"
   class="btn-scroll-top text-card-foreground"
-  href="javascript:void(0);"
   data-yt-scroll
   data-yt-scroll-offset={scrollOffset}
   data-yt-scroll-selector={selector}
@@ -71,7 +71,7 @@ const { selector = '#header', scrollOffset = 450 } = Astro.props;
   <span class="flex items-center justify-center">
     <Icon name="tabler:arrow-up" />
   </span>
-</a>
+</button>
 
 <script>
   import { get, attachEvent } from '../../utils';

package/components/BackToTopButton/BackToTopButton.svelte

@@ -8,7 +8,7 @@
     iconSlot,
   }: SvelteBackToTopButtonProps = $props();
 
-  let buttonRef: HTMLAnchorElement;
+  let buttonRef: HTMLButtonElement;
   let progressRef: SVGCircleElement;
   let showButton = $state(false);
   let strokeDashoffset = $state(0);
@@ -34,8 +34,7 @@
       showProgress();
     };
 
-    const handleClick = (e: MouseEvent) => {
-      e.preventDefault();
+    const handleClick = () => {
       const targetEl = document.querySelector(selector);
       targetEl?.scrollIntoView({ behavior: 'smooth', block: 'end' });
     };
@@ -102,10 +101,11 @@
   }
 </style>
 
-<a
+<button
   bind:this={buttonRef}
+  type="button"
   class="btn-scroll-top text-card-foreground {showButton ? 'show' : ''}"
-  href="javascript:void(0);"
+  aria-label="Back to top"
   data-yt-scroll
   data-yt-scroll-offset={scrollOffset}
   data-yt-scroll-selector={selector}
@@ -132,4 +132,4 @@
       </svg>
     {/if}
   </span>
-</a>
+</button>

package/components/Headline/Headline.astro

@@ -9,6 +9,7 @@ const {
   position = 'center',
   classes = {},
   as = 'h2',
+  asSubtitle = 'p',
 } = Astro.props;
 
 const {
@@ -19,6 +20,7 @@ const {
 } = classes;
 
 const WrapperTag = as;
+const SubtitleTag = asSubtitle;
 ---
 
 {
@@ -49,7 +51,7 @@ const WrapperTag = as;
       )}
 
       {subtitle && (
-        <p class={cn('mt-1 md:mt-4 text-muted-foreground text-lg/6 md:text-xl', subtitleClass)} set:html={subtitle} />
+        <SubtitleTag class={cn('mt-1 md:mt-4 text-muted-foreground text-lg/6 md:text-xl', subtitleClass)} set:html={subtitle} />
       )}
     </div>
   )

package/components/Headline/types.ts

@@ -9,6 +9,7 @@ export type HeadlineProps = {
   tagline?: string;
   classes?: Record<string, string>;
   ['as']?: HTMLTag;
+  asSubtitle?: HTMLTag;
   position?: 'center' | 'left' | 'right';
 };
 

package/components/HeroSection/HeroSection.astro

@@ -6,7 +6,8 @@ import Button from '../Button/Button.astro';
 import { cn } from '../../utils';
 
 const {
-  asHeader = 'h3',
+  asHeader = 'h1',
+  asDescription = 'h2',
   classes = {},
   image = await Astro.slots.render('image'),
   title = await Astro.slots.render('title'),
@@ -35,6 +36,7 @@ const {
 } = classes;
 
 const WrapperHeaderTag = asHeader;
+const WrapperDescriptionTag = asDescription;
 ---
 
 <div
@@ -55,7 +57,7 @@ const WrapperHeaderTag = asHeader;
                 >
                   {title}
                 </WrapperHeaderTag>
-                <p class={cn('text-sm md:text-base xl:text-lg', descriptionClass)}>{description}</p>
+                <WrapperDescriptionTag class={cn('text-sm md:text-base xl:text-lg', descriptionClass)}>{description}</WrapperDescriptionTag>
               </div>
 
               {callToAction && (

package/components/HeroSection/types.ts

@@ -6,6 +6,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 
 export type HeroSectionProps = {
   asHeader?: HTMLTag;
+  asDescription?: HTMLTag;
   title?: string;
   description?: string;
   image: Image | string;

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -19,7 +19,7 @@
 
   onMount(async () => {
     const { register } = await import('swiper/element/bundle');
-    const { on, get } = await import('~/utils');
+    const { on, get } = await import('../../utils');
 
     register();
 

package/components/Layout/Layout.astro

@@ -2,6 +2,7 @@
 import SeoMetadata from '../Metadata/Metadata.astro';
 import SeoSiteVerification from '../SiteVerification/SiteVerification.astro';
 import SeoAnalytics from '../Analytics/Analytics.astro';
+import SeoAnalyticsGTMBody from '../Analytics/AnalyticsGTMBody.astro';
 import type { LayoutProps as Props } from './types';
 
 import { I18N } from 'vendor:config';
@@ -29,6 +30,8 @@ const currentLang = Astro.currentLocale || language;
   </head>
 
   <body class="antialiased bg-background text-foreground tracking-tight">
+    <SeoAnalyticsGTMBody />
+
     <slot />
 
     <slot name="scripts" />

package/components/WidgetBrands/WidgetBrands.astro

@@ -13,6 +13,8 @@ const {
   icons = [],
   images = [],
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   isAfterContent = false,
   id,
   isDark = false,
@@ -27,7 +29,7 @@ const {
   containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
   bg={bg}
 >
-  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} />
+  <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/WidgetBrands/types.ts

@@ -7,8 +7,10 @@ export type WidgetBrandsProps = {
   icons?: Array<string>;
   images?: Array<Image>;
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetBrandsProps = {
   icons?: Array<string>;
@@ -18,5 +20,7 @@ export type SvelteWidgetBrandsProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetCallToAction1/WidgetCallToAction1.astro

@@ -11,6 +11,8 @@ const {
   tagline = await Astro.slots.render('tagline'),
   actions = await Astro.slots.render('actions'),
   isAfterContent = false,
+  asHeader = 'h2',
+  asSubtitle = 'p',
 
   id,
   isDark = false,
@@ -30,6 +32,8 @@ const {
       title={title}
       subtitle={subtitle}
       tagline={tagline}
+      as={asHeader}
+      asSubtitle={asSubtitle}
       classes={{
         container: 'mb-0 md:mb-0 text-left',
         title: 'text-2xl md:text-4xl font-bold tracking-tighter mb-4 font-heading',

package/components/WidgetCallToAction1/types.ts

@@ -6,8 +6,10 @@ import type { Snippet } from 'svelte';
 export type WidgetCallToAction1Props = {
   actions?: ToAction[];
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetCallToAction1Props = {
   actions?: ToAction[] | Snippet;
@@ -16,5 +18,7 @@ export type SvelteWidgetCallToAction1Props = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetCardSlider/WidgetCardSlider.astro

@@ -15,6 +15,8 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   items = [] as Card1Props[] | Card2Props[] | Card3Props[],
   isAfterContent = false,
 
@@ -41,6 +43,8 @@ const Component = via;
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
 
   {

package/components/WidgetCardSlider/types.ts

@@ -10,8 +10,10 @@ export type WidgetCardSliderProps = {
   items?: Card1Props[] | Card2Props[] | Card3Props[];
   isAfterContent?: boolean;
   withNavigation?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetCardSliderProps = {
   via?: any;
@@ -22,5 +24,7 @@ export type SvelteWidgetCardSliderProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetContent/WidgetContent.astro

@@ -24,6 +24,8 @@ const {
   isAfterContent = false,
   defaultIcon = 'tabler:check',
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   id,
   isDark = false,
   classes = {},
@@ -43,6 +45,8 @@ const {
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
 
   <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>

package/components/WidgetContent/types.ts

@@ -14,8 +14,10 @@ export type WidgetContentProps = {
   isReversed?: boolean;
   isAfterContent?: boolean;
   callToAction?: ToAction;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetContentProps = {
   content?: string | Snippet;
@@ -33,5 +35,7 @@ export type SvelteWidgetContentProps = {
   tagline?: string | Snippet;
   bg?: Snippet;
   children?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetFaq1/WidgetFaq1.astro

@@ -13,6 +13,8 @@ const {
   columns = 2,
   isAfterContent = false,
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   id,
   isDark = false,
   classes = {},
@@ -32,6 +34,8 @@ const {
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
 
   <ItemGrid0 columns={columns}>

package/components/WidgetFaq1/types.ts

@@ -7,9 +7,11 @@ import type { Snippet } from 'svelte';
 export type WidgetFaq1Props = {
   items?: Card4Props[];
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
   ItemGrid0Props &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetFaq1Props = {
   items?: Card4Props[];
@@ -18,6 +20,8 @@ export type SvelteWidgetFaq1Props = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
   ItemGrid0Props &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetFeatures0/WidgetFeatures0.astro

@@ -12,6 +12,8 @@ const {
   isAfterContent = false,
   callToAction = await Astro.slots.render('actions'),
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   id,
   isDark = false,
   classes = {},
@@ -31,6 +33,8 @@ const {
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
   <slot />
 

package/components/WidgetFeatures0/types.ts

@@ -7,8 +7,10 @@ export type WidgetFeatures0Props = {
   isBeforeContent?: boolean;
   isAfterContent?: boolean;
   callToAction?: string | ToAction | Array<string | ToAction>;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetFeatures0Props = WidgetFeatures0Props & {
   children?: Snippet;

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -18,6 +18,8 @@ const {
   columns = 4,
   image = await Astro.slots.render('image'),
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   isBeforeContent,
   isAfterContent,
   id,
@@ -44,6 +46,8 @@ const ComponentGrid = viaGrid;
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
   
   {

package/components/WidgetFeaturesCard/types.ts

@@ -1,4 +1,5 @@
 import type { WidgetFeatures0Props, SvelteWidgetFeatures0Props } from '../WidgetFeatures0/types';
+import type { HeadlineProps } from '../Headline/types';
 import type { Image } from '../../types';
 import type { Snippet } from 'svelte';
 

package/components/WidgetHero0/WidgetHero0.astro

@@ -11,6 +11,8 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   image,
   actions = [],
   links = [],
@@ -31,6 +33,8 @@ const { container: containerClass = '', bg: bgClass = '' } = classes;
         title={title}
         subtitle={subtitle}
         tagline={tagline}
+        as={asHeader}
+        asSubtitle={asSubtitle}
         classes={{
           container: cn(
             'max-w-3xl',

package/components/WidgetHero0/types.ts

@@ -1,5 +1,6 @@
 import type { WidgetFeatures0Props } from '~/components/WidgetFeatures0/types.ts';
 import type { Link, Item, ToAction, Image } from '../../types';
+import type { HeadlineProps } from '../Headline/types';
 import type { Snippet } from 'svelte';
 
 export type WidgetHero0Props = {

package/components/WidgetHero1/WidgetHero1.astro

@@ -12,6 +12,8 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   position = 'center',
+  asHeader = 'h1',
+  asSubtitle = 'p',
   image = await Astro.slots.render('image'),
   actions = [],
   links = [],
@@ -61,10 +63,11 @@ const { container: containerClass = '', bg: bgClass = '' } = classes;
   <div class={cn('relative z-30', Astro.slots.has('default') && 'grid grid-cols-3 gap-6')}>
     <div class={cn(Astro.slots.has('default') && 'col-span-2')}>
       <Headline
-        as="h1"
+        as={asHeader}
         title={title}
         subtitle={subtitle}
         tagline={tagline}
+        asSubtitle={asSubtitle}
         classes={{
           container: cn(
             'max-w-3xl',

package/components/WidgetHero1/types.ts

@@ -1,5 +1,6 @@
 import type { WidgetFeatures0Props } from '~/components/WidgetFeatures0/types.ts';
 import type { Link, Item, ToAction, Image } from '../../types';
+import type { HeadlineProps } from '../Headline/types';
 import type { Snippet } from 'svelte';
 
 export type WidgetHero1Props = {

package/components/WidgetHero2/WidgetHero2.astro

@@ -1,11 +1,8 @@
 ---
 import type { WidgetHero2Props as Props } from './types';
 import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
-import Headline from '../Headline/Headline.astro';
 import Image from '../Image/Image.astro';
-import Stats0 from '../Stats0/Stats0.astro';
 import Button from '../Button/Button.astro';
-import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
@@ -14,7 +11,14 @@ const {
   content = await Astro.slots.render('content'),
   actions = await Astro.slots.render('actions'),
   image = await Astro.slots.render('image'),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   position = 'center',
+  // Note: asHeader is kept for API consistency but not used since this component has custom heading implementation
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  asHeader = 'h1',
+  // Note: asSubtitle is kept for API consistency but not used since this component has custom heading implementation
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  asSubtitle = 'p',
 
   id,
   isDark = false,

package/components/WidgetHero2/types.ts

@@ -8,12 +8,15 @@ export type WidgetHero2Props = {
   content?: string;
   actions?: string | ToAction[];
   image?: string | Image;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
-export type SvelteWidgetHero2Props = WidgetHero2Props & {
+export type SvelteWidgetHero2Props = Omit<WidgetHero2Props, 'asSubtitle'> & {
   contentSlot?: Snippet;
   actionsSlot?: Snippet;
   imageSlot?: Snippet;
   bgSlot?: Snippet;
+  asSubtitle?: HeadlineProps['asSubtitle'];
 };

package/components/WidgetHeroSlider/WidgetHeroSlider.svelte

@@ -158,13 +158,15 @@
       <button
         type="button"
         id={`btn-prev-${id}`}
+        aria-label="Previous slide"
         class="btn-navigation btn-prev hidden lg:block cursor-pointer absolute z-10 w-10 h-10 bg-transparent border-2 border-white rounded-full shadow-sm transition-opacity opacity-20 hover:opacity-100 group-hover:opacity-100"
-      />
+      ></button>
       <button
         type="button"
         id={`btn-next-${id}`}
+        aria-label="Next slide"
         class="btn-navigation btn-next hidden lg:block cursor-pointer absolute z-10 w-10 h-10 bg-transparent border-2 border-white rounded-full shadow-sm transition-opacity opacity-20 hover:opacity-100 group-hover:opacity-100"
-      />
+      ></button>
     {/if}
 
     <!-- Loading indicator -->

package/components/WidgetStats/WidgetStats.astro

@@ -12,6 +12,8 @@ const {
   items = [],
   callToAction,
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   id,
   isDark = false,
   classes = {},
@@ -33,6 +35,8 @@ const {
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
 
   <Stats0 items={items} classes={classes?.items as Record<string, string>} />

package/components/WidgetStats/types.ts

@@ -8,8 +8,10 @@ export type WidgetStatsProps = {
   items?: Item[];
   callToAction?: ToAction;
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetStatsProps = {
   via?: any;
@@ -20,5 +22,7 @@ export type SvelteWidgetStatsProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/WidgetSteps1/WidgetSteps1.astro

@@ -14,6 +14,8 @@ const {
   items = [],
   isReversed = false,
   isAfterContent = false,
+  asHeader = 'h2',
+  asSubtitle = 'p',
 
   id,
   isDark = false,
@@ -34,6 +36,8 @@ const {
         title={title}
         subtitle={subtitle}
         tagline={tagline}
+        as={asHeader}
+        asSubtitle={asSubtitle}
         classes={{
           container: 'text-left rtl:text-right',
           title: 'text-3xl lg:text-4xl',

package/components/WidgetSteps1/types.ts

@@ -8,8 +8,10 @@ export type WidgetSteps1Props = {
   isReversed?: boolean;
   isAfterContent?: boolean;
   items?: Item[];
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetFeatures0Props &
-  HeadlineProps;
+  Omit<HeadlineProps, 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetSteps1Props = {
   callToAction?: ToAction | Snippet;
@@ -20,5 +22,7 @@ export type SvelteWidgetSteps1Props = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetFeatures0Props &
-  HeadlineProps;
+  Omit<HeadlineProps, 'as' | 'asSubtitle'>;

package/components/WidgetStepsTimeline/WidgetStepsTimeline.astro

@@ -14,6 +14,8 @@ const {
   isReversed = false,
   isAfterContent = false,
   defaultIcon,
+  asHeader = 'h2',
+  asSubtitle = 'p',
 
   id,
   isDark = false,
@@ -34,6 +36,8 @@ const {
         title={title}
         subtitle={subtitle}
         tagline={tagline}
+        as={asHeader}
+        asSubtitle={asSubtitle}
         classes={{
           container: 'text-left rtl:text-right',
           title: 'text-3xl lg:text-4xl',

package/components/WidgetStepsTimeline/types.ts

@@ -9,8 +9,10 @@ export type WidgetStepsTimelineProps = {
   image?: string | Image;
   defaultIcon?: string;
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetFeatures0Props &
-  HeadlineProps;
+  Omit<HeadlineProps, 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetStepsTimelineProps = {
   isReversed?: boolean;
@@ -22,5 +24,7 @@ export type SvelteWidgetStepsTimelineProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetFeatures0Props &
-  HeadlineProps;
+  Omit<HeadlineProps, 'as' | 'asSubtitle'>;

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -13,9 +13,11 @@ const {
   tagline = await Astro.slots.render('tagline'),
   imagesFolder,
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   isAfterContent = false,
   callToAction,
-  
+
   id = (Math.random() + 1).toString(36).substring(7),
   withNavigation = true,
   isDark = false,
@@ -42,6 +44,8 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
     tagline={tagline}
     classes={classes?.headline as Record<string, string>}
     position={position}
+    as={asHeader}
+    asSubtitle={asSubtitle}
   />
 
   {

package/components/WidgetSwiperPhotoSlider/types.ts

@@ -12,8 +12,10 @@ export type WidgetSwiperPhotoSliderProps = {
     headline?: Record<string, string>;
   };
   callToAction?: ToAction;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetSwiperPhotoSliderProps = {
   isAfterContent?: boolean;
@@ -25,4 +27,6 @@ export type SvelteWidgetSwiperPhotoSliderProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   position?: 'center' | 'left' | 'right';
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps;

package/components/WidgetTestimonials/WidgetTestimonials.astro

@@ -15,6 +15,8 @@ const {
   columns = 3,
   isAfterContent = false,
   position = 'center',
+  asHeader = 'h2',
+  asSubtitle = 'p',
   id,
   isDark = false,
   classes = {},
@@ -28,7 +30,7 @@ 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} />
+  <Headline title={title} subtitle={subtitle} tagline={tagline} position={position} as={asHeader} asSubtitle={asSubtitle} />
 
   <ItemGrid0 columns={columns}>
     {

package/components/WidgetTestimonials/types.ts

@@ -8,9 +8,11 @@ export type WidgetTestimonialsProps = {
   items?: Testimonial[];
   callToAction?: ToAction;
   isAfterContent?: boolean;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & WidgetWrapperProps &
   ItemGrid0Props &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;
 
 export type SvelteWidgetTestimonialsProps = {
   items?: Testimonial[];
@@ -20,6 +22,8 @@ export type SvelteWidgetTestimonialsProps = {
   subtitle?: string | Snippet;
   tagline?: string | Snippet;
   bg?: Snippet;
+  asHeader?: HeadlineProps['as'];
+  asSubtitle?: HeadlineProps['asSubtitle'];
 } & SvelteWidgetWrapperProps &
   ItemGrid0Props &
-  Omit<HeadlineProps, 'classes'>;
+  Omit<HeadlineProps, 'classes' | 'as' | 'asSubtitle'>;

package/components/ZoomedImage/ZoomedImage.svelte

@@ -15,10 +15,10 @@
     ...restProps
   }: SvelteZoomedImageProps = $props();
 
-  let containerRef: HTMLDivElement;
-  let zoomButtonRef: HTMLButtonElement;
-  let imageRef: HTMLImageElement;
-  let spanRef: HTMLElement;
+  let containerRef = $state<HTMLDivElement | null>(null);
+  let zoomButtonRef = $state<HTMLButtonElement | null>(null);
+  let imageRef = $state<HTMLImageElement | null>(null);
+  let spanRef = $state<HTMLElement | null>(null);
 
   let zoomed = $state(false);
   let mousePosition = $state({ percentX: 0, percentY: 0 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",