@yatoday/astro-ui 0.17.32 → 0.18.1

package/astro.d.ts

@@ -48,6 +48,7 @@ import type { WidgetHero1Props as YtWidgetHero1Props } from './components/Widget
 import type { WidgetHero2Props as YtWidgetHero2Props } from './components/WidgetHero2/types'
 import type { WidgetHeroSliderProps as YtWidgetHeroSliderProps } from './components/WidgetHeroSlider/types'
 import type { WidgetNavbarProps as YtWidgetNavbarProps } from './components/WidgetNavbar/types'
+import type { WidgetNavbarFlyoutProps as YtWidgetNavbarFlyoutProps } from './components/WidgetNavbarFlyout/types'
 import type { WidgetStatsProps as YtWidgetStatsProps } from './components/WidgetStats/types'
 import type { WidgetSteps1Props as YtWidgetSteps1Props } from './components/WidgetSteps1/types'
 import type { WidgetStepsTimelineProps as YtWidgetStepsTimelineProps } from './components/WidgetStepsTimeline/types'
@@ -107,6 +108,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export function WidgetHero2(_props: YtWidgetHero2Props): any
 	export function WidgetHeroSlider(_props: YtWidgetHeroSliderProps): any
 	export function WidgetNavbar(_props: YtWidgetNavbarProps): any
+	export function WidgetNavbarFlyout(_props: YtWidgetNavbarFlyoutProps): any
 	export function WidgetStats(_props: YtWidgetStatsProps): any
 	export function WidgetSteps1(_props: YtWidgetSteps1Props): any
 	export function WidgetStepsTimeline(_props: YtWidgetStepsTimelineProps): any
@@ -165,6 +167,7 @@ declare module '@yatoday/astro-ui/astro' {
 	export type WidgetHero2Props = YtWidgetHero2Props
 	export type WidgetHeroSliderProps = YtWidgetHeroSliderProps
 	export type WidgetNavbarProps = YtWidgetNavbarProps
+	export type WidgetNavbarFlyoutProps = YtWidgetNavbarFlyoutProps
 	export type WidgetStatsProps = YtWidgetStatsProps
 	export type WidgetSteps1Props = YtWidgetSteps1Props
 	export type WidgetStepsTimelineProps = YtWidgetStepsTimelineProps

package/astro.js

@@ -48,6 +48,7 @@ import WidgetHero1Component from './components/WidgetHero1/WidgetHero1.astro'
 import WidgetHero2Component from './components/WidgetHero2/WidgetHero2.astro'
 import WidgetHeroSliderComponent from './components/WidgetHeroSlider/WidgetHeroSlider.astro'
 import WidgetNavbarComponent from './components/WidgetNavbar/WidgetNavbar.astro'
+import WidgetNavbarFlyoutComponent from './components/WidgetNavbarFlyout/WidgetNavbarFlyout.astro'
 import WidgetStatsComponent from './components/WidgetStats/WidgetStats.astro'
 import WidgetSteps1Component from './components/WidgetSteps1/WidgetSteps1.astro'
 import WidgetStepsTimelineComponent from './components/WidgetStepsTimeline/WidgetStepsTimeline.astro'
@@ -106,6 +107,7 @@ export const WidgetHero1 = WidgetHero1Component
 export const WidgetHero2 = WidgetHero2Component
 export const WidgetHeroSlider = WidgetHeroSliderComponent
 export const WidgetNavbar = WidgetNavbarComponent
+export const WidgetNavbarFlyout = WidgetNavbarFlyoutComponent
 export const WidgetStats = WidgetStatsComponent
 export const WidgetSteps1 = WidgetSteps1Component
 export const WidgetStepsTimeline = WidgetStepsTimelineComponent

package/components/Image/Image.astro

@@ -58,6 +58,6 @@ if (
   !image ? (
     <Fragment />
   ) : (
-    <img src={image.src} crossorigin="anonymous" referrerpolicy="no-referrer" {...image.attributes} />
+    <img src={image.src} referrerpolicy="no-referrer" {...image.attributes} />
   )
 }

package/components/WidgetNavbar/WidgetNavbar.astro

@@ -30,6 +30,8 @@ const {
   links: linksClass = 'hover:text-link dark:hover:text-white',
   dropdown: dropdownClass = 'bg-background text-foreground md:shadow-lg',
   dropdownLinks: dropdownLinksClass = 'hover:bg-black/10 hover:text-link dark:hover:text-white dark:hover:bg-white/10',
+  megaMenu: megaMenuClass = 'bg-background text-foreground md:shadow-lg',
+  megaHeading: megaHeadingClass = 'text-foreground/50',
   darkModeIcon: darkModeIconClass = '',
   pinned: pinnedClasses = 'bg-background md:bg-background/90 md:backdrop-blur-md',
   unpinned: unpinnedClasses = '',
@@ -81,9 +83,82 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
         class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
       >
         {
-          links.map(({ text, href, links }) => (
+          links.map(({ text, href, links, mega, icon }) => (
             <li class={links?.length ? 'dropdown' : ''}>
-              {links?.length ? (
+              {links?.length && mega ? (
+                <>
+                  <button
+                    type="button"
+                    class={cn('px-4 py-3 flex items-center whitespace-nowrap cursor-pointer', linksClass)}
+                  >
+                    {text}{' '}
+                    <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
+                  </button>
+                  <div
+                    class={cn(
+                      'dropdown-menu rounded-sm md:absolute md:left-0 md:right-0 md:top-full pl-4 md:pl-0 pb-1 md:pb-0 md:hidden font-medium',
+                      megaMenuClass
+                    )}
+                  >
+                    <div class="mega-grid md:grid md:gap-x-8 md:gap-y-4 md:p-8" style={`--mega-cols: ${links.length}`}>
+                      {links.map((column) => (
+                        <div class="py-2 md:py-0">
+                          {column.href ? (
+                            <a
+                              href={column.href}
+                              class={cn(
+                                'flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wider hover:text-link',
+                                megaHeadingClass
+                              )}
+                            >
+                              {column.icon && <Icon name={column.icon} class="w-4 h-4" />}
+                              {column.text}
+                            </a>
+                          ) : (
+                            <span
+                              class={cn(
+                                'flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wider',
+                                megaHeadingClass
+                              )}
+                            >
+                              {column.icon && <Icon name={column.icon} class="w-4 h-4" />}
+                              {column.text}
+                            </span>
+                          )}
+                          <ul class="flex flex-col">
+                            {column.links?.map(({ text: text2, href: href2, icon: icon2, description }) => (
+                              <li>
+                                <a
+                                  class={cn(
+                                    'group flex items-start gap-3 rounded-md py-2 px-3 -mx-3 md:px-2 md:-mx-2',
+                                    { 'link-active': href2 === currentPath },
+                                    dropdownLinksClass
+                                  )}
+                                  href={href2}
+                                >
+                                  {icon2 && (
+                                    <span class="flex-none mt-0.5 flex items-center justify-center w-8 h-8 rounded-md bg-foreground/[0.06] text-foreground/70 group-hover:bg-foreground/10">
+                                      <Icon name={icon2} class="w-4.5 h-4.5" />
+                                    </span>
+                                  )}
+                                  <span class="flex flex-col">
+                                    <span class="font-medium leading-tight">{text2}</span>
+                                    {description && (
+                                      <span class="mt-0.5 text-xs font-normal text-muted-foreground leading-snug normal-case">
+                                        {description}
+                                      </span>
+                                    )}
+                                  </span>
+                                </a>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              ) : links?.length ? (
                 <>
                   <button
                     type="button"
@@ -117,12 +192,13 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
               ) : (
                 <a
                   class={cn([
-                    'px-4 py-3 flex items-center whitespace-nowrap',
+                    'px-4 py-3 flex items-center gap-1.5 whitespace-nowrap',
                     { 'link-active': href === currentPath },
                     linksClass,
                   ])}
                   href={href}
                 >
+                  {icon && <Icon name={icon} class="w-4 h-4" />}
                   {text}
                 </a>
               )}
@@ -140,7 +216,14 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
     >
       <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 -->
@@ -149,7 +232,10 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
             actions?.length ? (
               <span class="ml-4 rtl:ml-0 rtl:mr-4">
                 {actions.map(({ class: actionClass, ...btnProps }) => (
-                  <Button {...btnProps} class={cn('ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto', actionClass)} />
+                  <Button
+                    {...btnProps}
+                    class={cn('ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto', actionClass)}
+                  />
                 ))}
               </span>
             ) : (
@@ -177,6 +263,12 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
   .dropdown:hover .dropdown-menu {
     display: block;
   }
+
+  @media (min-width: 768px) {
+    .mega-grid {
+      grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
+    }
+  }
 </style>
 
 <script>

package/components/WidgetNavbar/types.ts

@@ -20,10 +20,23 @@ export interface ILink {
   href?: string;
   ariaLabel?: string;
   icon?: string;
+  /**
+   * Optional one-line supporting text. In a mega panel, leaf items with a
+   * `description` render Stripe-style: an icon tile, a bold title, and this
+   * muted subtitle beneath it. Ignored by regular dropdowns.
+   */
+  description?: string;
 }
 
 export interface IMenuLink extends ILink {
   links?: IMenuLink[];
+  /**
+   * When true on a top-level item, its `links` are rendered as a full-width
+   * multi-column mega panel: each child becomes a column whose `text`/`href`
+   * is the column heading and whose nested `links` are the column items.
+   * Defaults to a standard single-column dropdown.
+   */
+  mega?: boolean;
 }
 
 export type SvelteWidgetNavbarProps = {

package/components/WidgetNavbarFlyout/WidgetNavbarFlyout.astro

@@ -0,0 +1,576 @@
+---
+/**
+ * WidgetNavbarFlyout
+ *
+ * A navbar whose dropdowns share a single, persistent flyout panel that stays
+ * open and smoothly morphs (width / height / horizontal position) as the cursor
+ * moves between top-level items — the Stripe "one container that resizes"
+ * pattern — instead of each menu abruptly closing and the next one opening.
+ *
+ * Any top-level item with `links` becomes a flyout panel. Items flagged `mega`
+ * render multi-column Stripe-style rows (icon tile + title + description);
+ * plain items render a single-column list. Desktop interaction is JS-driven
+ * (hover with open/close delays, keyboard + Escape, outside-click). Mobile keeps
+ * an always-expanded accordion and needs no JS.
+ *
+ * Drop-in compatible with WidgetNavbar's props and slots.
+ */
+import type { WidgetNavbarProps as Props } from '../WidgetNavbar/types';
+
+import { SITE } from 'vendor:config';
+import { Icon } from 'astro-icon/components';
+import DarkMode from '../DarkMode/DarkMode.astro';
+import ToggleMenu from '../WidgetNavbar/ToggleMenu.astro';
+import Button from '../Button/Button.astro';
+import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
+import { cn, trimSlash } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+
+const {
+  links = [],
+  actions = [],
+  isSticky = false,
+  isDark = false,
+  showToggleTheme = false,
+  initialMode = 'system',
+  position = 'center',
+  classes = {},
+  scrollOffset = 60,
+  as = 'header',
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+
+const {
+  header: headerClass = '',
+  container: containerClass = 'max-w-7xl 2xl:max-w-[96rem] md:mx-auto',
+  links: linksClass = 'hover:text-link dark:hover:text-white',
+  dropdownLinks: dropdownLinksClass = 'hover:bg-black/10 hover:text-link dark:hover:text-white dark:hover:bg-white/10',
+  megaMenu: megaMenuClass = 'bg-background text-foreground md:shadow-lg',
+  megaHeading: megaHeadingClass = 'text-foreground/50',
+  darkModeIcon: darkModeIconClass = '',
+  pinned: pinnedClasses = 'bg-background md:bg-background/90 md:backdrop-blur-md',
+  unpinned: unpinnedClasses = '',
+} = classes;
+
+const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
+
+// Top-level items that get a shared flyout panel (anything with children).
+const panelItems = links.map((link, index) => ({ link, index })).filter(({ link }) => link.links?.length);
+---
+
+<WidgetWrapper
+  id="header"
+  isDark={isDark}
+  bg={bg}
+  as={as}
+  class={cn(
+    { sticky: isSticky, relative: !isSticky, dark: isDark },
+    '-top-[1px] z-40 flex-none w-full transition-[opacity] ease-in-out',
+    headerClass,
+    unpinnedClasses
+  )}
+  containerClass={twMerge('py-0 md:py-0 lg:py-0', containerClass)}
+  {...isSticky ? { 'data-yt-sticky-header': true } : {}}
+  data-scroll-offset={scrollOffset}
+  data-pinned-classes={pinnedClasses}
+  data-unpinned-classes={unpinnedClasses}
+  data-yt-flyout-header
+>
+  <div
+    class={cn(
+      'relative text-default py-3 mx-auto w-full',
+      { 'md:flex md:justify-between': position !== 'center' },
+      { 'md:grid md:grid-cols-3 md:items-center': position === 'center' }
+    )}
+  >
+    <div class:list={[{ 'mr-auto rtl:mr-0 rtl:ml-auto': position === 'right' }, 'flex justify-between items-center']}>
+      <!-- Logo -->
+      <slot name="logo">
+        <span>{SITE.name || 'Logo'}</span>
+      </slot>
+      <div class="flex items-center md:hidden">
+        <slot name="toggle-menu">
+          <ToggleMenu />
+        </slot>
+      </div>
+    </div>
+
+    <nav
+      class="items-center w-full md:w-auto hidden md:flex md:mx-5 text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:justify-self-center"
+      aria-label="Main navigation"
+      data-yt-flyout-nav
+    >
+      <ul
+        class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium md:justify-center"
+      >
+        {
+          links.map((item, index) => {
+            const hasPanel = !!item.links?.length;
+            return (
+              <li class="md:static">
+                {/* Desktop trigger / link */}
+                {hasPanel ? (
+                  <button
+                    type="button"
+                    data-flyout-trigger
+                    data-flyout-key={index}
+                    aria-haspopup="true"
+                    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" />
+                  </button>
+                ) : (
+                  <a
+                    href={item.href}
+                    data-flyout-dismiss
+                    class={cn(
+                      'hidden md:flex px-4 py-3 items-center gap-1.5 whitespace-nowrap',
+                      { 'link-active': item.href === currentPath },
+                      linksClass
+                    )}
+                  >
+                    {item.icon && <Icon name={item.icon} class="w-4 h-4" />}
+                    {item.text}
+                  </a>
+                )}
+
+                {/* Mobile accordion (always expanded, no JS required) */}
+                <div class="md:hidden">
+                  {hasPanel ? (
+                    <>
+                      <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">
+                        {item.mega
+                          ? item.links?.flatMap((column) =>
+                              (column.links ?? []).map((leaf) => (
+                                <li>
+                                  <a
+                                    href={leaf.href}
+                                    class={cn(
+                                      'block rounded-sm py-2 px-6 text-base',
+                                      { 'link-active': leaf.href === currentPath },
+                                      dropdownLinksClass
+                                    )}
+                                  >
+                                    {leaf.text}
+                                  </a>
+                                </li>
+                              ))
+                            )
+                          : item.links?.map((leaf) => (
+                              <li>
+                                <a
+                                  href={leaf.href}
+                                  class={cn(
+                                    'block rounded-sm py-2 px-6 text-base',
+                                    { 'link-active': leaf.href === currentPath },
+                                    dropdownLinksClass
+                                  )}
+                                >
+                                  {leaf.text}
+                                </a>
+                              </li>
+                            ))}
+                      </ul>
+                    </>
+                  ) : (
+                    <a
+                      href={item.href}
+                      class={cn('block px-4 py-3 text-xl', { 'link-active': item.href === currentPath })}
+                    >
+                      {item.text}
+                    </a>
+                  )}
+                </div>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </nav>
+
+    {/* Shared morphing flyout (desktop only) */}
+    {
+      panelItems.length > 0 && (
+        <div
+          class="flyout hidden md:block absolute left-0 right-0 top-full z-40"
+          data-flyout
+          role="region"
+          aria-label="Menu details"
+        >
+          <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 ? (
+                  <div class="flex gap-8 p-8">
+                    {link.links?.map((column) => (
+                      <div class="min-w-[12rem]">
+                        {column.href ? (
+                          <a
+                            href={column.href}
+                            class={cn(
+                              'flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wider hover:text-link',
+                              megaHeadingClass
+                            )}
+                          >
+                            {column.icon && <Icon name={column.icon} class="w-4 h-4" />}
+                            {column.text}
+                          </a>
+                        ) : (
+                          <span
+                            class={cn(
+                              'flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wider',
+                              megaHeadingClass
+                            )}
+                          >
+                            {column.icon && <Icon name={column.icon} class="w-4 h-4" />}
+                            {column.text}
+                          </span>
+                        )}
+                        <ul class="flex flex-col">
+                          {column.links?.map((leaf) => (
+                            <li>
+                              <a
+                                href={leaf.href}
+                                class={cn(
+                                  'group flex items-start gap-3 rounded-md py-2 px-2 -mx-2',
+                                  { 'link-active': leaf.href === currentPath },
+                                  dropdownLinksClass
+                                )}
+                              >
+                                {leaf.icon && (
+                                  <span class="flex-none mt-0.5 flex items-center justify-center w-8 h-8 rounded-md bg-foreground/[0.06] text-foreground/70 group-hover:bg-foreground/10">
+                                    <Icon name={leaf.icon} class="w-4.5 h-4.5" />
+                                  </span>
+                                )}
+                                <span class="flex flex-col">
+                                  <span class="font-medium leading-tight whitespace-nowrap">{leaf.text}</span>
+                                  {leaf.description && (
+                                    <span class="mt-0.5 text-xs font-normal text-muted-foreground leading-snug normal-case whitespace-nowrap">
+                                      {leaf.description}
+                                    </span>
+                                  )}
+                                </span>
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <ul class="flex flex-col p-3 min-w-[14rem]">
+                    {link.links?.map((leaf) => (
+                      <li>
+                        <a
+                          href={leaf.href}
+                          class={cn(
+                            'flex items-center gap-2 rounded-md py-2 px-3 whitespace-nowrap',
+                            { 'link-active': leaf.href === currentPath },
+                            dropdownLinksClass
+                          )}
+                        >
+                          {leaf.icon && <Icon name={leaf.icon} class="w-4 h-4 opacity-70" />}
+                          {leaf.text}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    <div
+      class:list={[
+        { 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
+        'hidden md:self-center md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0 md:justify-self-end',
+      ]}
+      data-yt-actions
+    >
+      <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)} />
+          )}
+        </div>
+
+        <!-- Actions Buttons -->
+        <slot name="actions">
+          {
+            actions?.length ? (
+              <span class="ml-4 rtl:ml-0 rtl:mr-4">
+                {actions.map(({ class: actionClass, ...btnProps }) => (
+                  <Button
+                    {...btnProps}
+                    class={cn('ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto', actionClass)}
+                  />
+                ))}
+              </span>
+            ) : (
+              ''
+            )
+          }
+        </slot>
+      </div>
+    </div>
+  </div>
+</WidgetWrapper>
+
+<style>
+  #header.expanded nav {
+    position: fixed;
+    top: 100px;
+    left: 0;
+    right: 0;
+    bottom: 70px !important;
+    padding: 0 5px;
+  }
+
+  /* Flyout wrapper: fades + slides in, hidden (not just transparent) when closed
+     so it never intercepts clicks. */
+  .flyout {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(6px);
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease,
+      visibility 0s linear 0.18s;
+  }
+  .flyout.is-open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  /* The visible box that morphs between panels. JS sets width/height/translateX. */
+  .flyout-bg {
+    width: 0;
+    height: 0;
+    transition:
+      width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+      height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: width, height, transform;
+  }
+  /* Suppress the size transition on first open so it doesn't grow from 0. */
+  .flyout.no-anim .flyout-bg {
+    transition: none;
+  }
+
+  /* Panels stack in the same spot and cross-fade. */
+  .flyout-panel {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.16s ease;
+  }
+  .flyout-panel.is-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flyout,
+    .flyout-bg,
+    .flyout-panel {
+      transition-duration: 0.01ms;
+    }
+  }
+</style>
+
+<script>
+  import { attachEvent, toggleClasses, addClasses, removeClasses } from '../../utils/DOMUtils';
+
+  // ---- Sticky header pin/unpin on scroll + mobile menu toggle (parity with WidgetNavbar) ----
+  let headerBound = false;
+  const addHeaderListeners = () => {
+    if (headerBound) return;
+    const header = document.querySelector('[data-yt-sticky-header]') as HTMLElement;
+    if (!header) return;
+    headerBound = true;
+
+    const scrollOffset = Number(header.dataset.scrollOffset) || 0;
+    const pinnedClasses = header.dataset.pinnedClasses || '';
+    const unpinnedClasses = header.dataset.unpinnedClasses || '';
+
+    let lastKnownScrollPosition = window.scrollY;
+    let ticking = true;
+
+    attachEvent('[data-yt-toggle-menu]', 'click', (_: Event, elem: HTMLElement) => {
+      requestAnimationFrame(() => {
+        toggleClasses(elem, 'expanded');
+        toggleClasses(document.body, 'overflow-hidden');
+        toggleClasses(document.getElementById('header'), 'h-screen', 'expanded');
+        toggleClasses('[data-yt-flyout-nav]', 'hidden');
+        toggleClasses('[data-yt-actions]', 'hidden');
+      });
+    });
+
+    attachEvent('[data-yt-flyout-nav]', 'click', () => hiddenNav());
+    attachEvent([window.matchMedia('(max-width: 767px)')], 'change', () => hiddenNav());
+
+    function hiddenNav() {
+      requestAnimationFrame(() => {
+        removeClasses('[data-yt-toggle-menu]', 'expanded');
+        removeClasses(document.body, 'overflow-hidden');
+        removeClasses(document.getElementById('header'), 'h-screen', 'expanded');
+        addClasses('[data-yt-flyout-nav]', 'hidden');
+        addClasses('[data-yt-actions]', 'hidden');
+      });
+    }
+
+    function applyHeaderStylesOnScroll() {
+      if (lastKnownScrollPosition > scrollOffset && !header.classList.contains('scroll')) {
+        addClasses(header, 'scroll', ...pinnedClasses.split(' '));
+        removeClasses(header, ...unpinnedClasses.split(' '));
+      } else if (lastKnownScrollPosition <= scrollOffset && header.classList.contains('scroll')) {
+        removeClasses(header, 'scroll', ...pinnedClasses.split(' '));
+        addClasses(header, ...unpinnedClasses.split(' '));
+      }
+      ticking = false;
+    }
+    applyHeaderStylesOnScroll();
+
+    attachEvent([document], 'scroll', function () {
+      lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(applyHeaderStylesOnScroll);
+        ticking = true;
+      }
+    });
+  };
+
+  // ---- Persistent morphing flyout ----
+  const initFlyout = (header: HTMLElement) => {
+    if (header.dataset.flyoutBound === 'true') return;
+    const positioner = header.querySelector('.relative') as HTMLElement | null;
+    const flyout = header.querySelector('[data-flyout]') as HTMLElement | null;
+    const bgEl = header.querySelector('[data-flyout-bg]') as HTMLElement | null;
+    if (!positioner || !flyout || !bgEl) return;
+    header.dataset.flyoutBound = 'true';
+
+    const triggers = Array.from(header.querySelectorAll<HTMLElement>('[data-flyout-trigger]'));
+    const panels = new Map<string, HTMLElement>();
+    flyout.querySelectorAll<HTMLElement>('[data-flyout-panel]').forEach((p) => {
+      panels.set(p.dataset.flyoutKey!, p);
+    });
+
+    let open = false;
+    let currentKey: string | null = null;
+    let closeTimer: number | undefined;
+
+    const triggerByKey = (key: string) => triggers.find((t) => t.dataset.flyoutKey === key) || null;
+
+    const sizeTo = (key: string) => {
+      const panel = panels.get(key);
+      const trigger = triggerByKey(key);
+      if (!panel) return;
+      const contWidth = positioner.clientWidth;
+      const w = Math.min(panel.offsetWidth, contWidth);
+      const h = panel.offsetHeight;
+      let x = 0;
+      if (trigger) {
+        const cont = positioner.getBoundingClientRect();
+        x = Math.max(0, Math.min(trigger.getBoundingClientRect().left - cont.left, contWidth - w));
+      }
+      bgEl.style.width = `${w}px`;
+      bgEl.style.height = `${h}px`;
+      bgEl.style.transform = `translateX(${x}px)`;
+      panels.forEach((p, k) => p.classList.toggle('is-active', k === key));
+      triggers.forEach((t) => t.setAttribute('aria-expanded', String(t.dataset.flyoutKey === key)));
+      currentKey = key;
+    };
+
+    const openTo = (key: string) => {
+      cancelClose();
+      if (key === currentKey && open) return;
+      if (!open) {
+        // First open: set the target size with no transition so it doesn't grow from 0.
+        flyout.classList.add('no-anim');
+        sizeTo(key);
+        void bgEl.offsetWidth; // force reflow
+        flyout.classList.remove('no-anim');
+        flyout.classList.add('is-open');
+        open = true;
+      } else {
+        sizeTo(key); // morph
+      }
+    };
+
+    const close = () => {
+      cancelClose();
+      if (!open) return;
+      flyout.classList.remove('is-open');
+      panels.forEach((p) => p.classList.remove('is-active'));
+      triggers.forEach((t) => t.setAttribute('aria-expanded', 'false'));
+      open = false;
+      currentKey = null;
+    };
+
+    const scheduleClose = () => {
+      cancelClose();
+      closeTimer = window.setTimeout(close, 140);
+    };
+    const cancelClose = () => {
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = undefined;
+      }
+    };
+
+    triggers.forEach((trigger) => {
+      const key = trigger.dataset.flyoutKey!;
+      trigger.addEventListener('mouseenter', () => openTo(key));
+      trigger.addEventListener('focus', () => openTo(key));
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        open && key === currentKey ? close() : openTo(key);
+      });
+    });
+
+    // Hovering a plain (non-dropdown) top-level link closes the flyout.
+    header.querySelectorAll<HTMLElement>('[data-flyout-dismiss]').forEach((el) => {
+      el.addEventListener('mouseenter', scheduleClose);
+    });
+
+    // Keep open while over the panel; close shortly after leaving panel or nav.
+    flyout.addEventListener('mouseenter', cancelClose);
+    flyout.addEventListener('mouseleave', scheduleClose);
+    const nav = header.querySelector('[data-yt-flyout-nav]');
+    nav?.addEventListener('mouseleave', scheduleClose);
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') close();
+    });
+    document.addEventListener('click', (e) => {
+      if (open && !flyout.contains(e.target as Node) && !nav?.contains(e.target as Node)) close();
+    });
+    window.addEventListener('resize', () => {
+      if (open && currentKey) {
+        flyout.classList.add('no-anim');
+        sizeTo(currentKey);
+        void bgEl.offsetWidth;
+        flyout.classList.remove('no-anim');
+      }
+    });
+  };
+
+  const init = () => {
+    addHeaderListeners();
+    document.querySelectorAll<HTMLElement>('[data-yt-flyout-header]').forEach(initFlyout);
+  };
+
+  init();
+  document.addEventListener('astro:after-swap', init);
+</script>

package/package.json

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

package/styles/styles.css

@@ -84,7 +84,10 @@
     --tracking-tighter: -0.05em;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -311,6 +314,9 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-full {
+    top: 100%;
+  }
   .-right-5 {
     right: calc(var(--spacing) * -5);
   }
@@ -413,6 +419,12 @@
   .m-auto {
     margin: auto;
   }
+  .-mx-2 {
+    margin-inline: calc(var(--spacing) * -2);
+  }
+  .-mx-3 {
+    margin-inline: calc(var(--spacing) * -3);
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
@@ -606,6 +618,9 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .h-4\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -690,6 +705,9 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -777,6 +795,12 @@
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-\[12rem\] {
+    min-width: 12rem;
+  }
+  .min-w-\[14rem\] {
+    min-width: 14rem;
+  }
   .min-w-full {
     min-width: 100%;
   }
@@ -856,6 +880,9 @@
   .cursor-zoom-out {
     cursor: zoom-out;
   }
+  .resize {
+    resize: both;
+  }
   .list-none {
     list-style-type: none;
   }
@@ -1249,6 +1276,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .\!px-0 {
     padding-inline: calc(var(--spacing) * 0) !important;
   }
@@ -1330,6 +1360,9 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -1448,6 +1481,14 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1480,6 +1521,10 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -1550,6 +1595,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1572,6 +1620,9 @@
   .opacity-25 {
     opacity: 25%;
   }
+  .opacity-70 {
+    opacity: 70%;
+  }
   .opacity-75 {
     opacity: 75%;
   }
@@ -2117,6 +2168,21 @@
       position: static;
     }
   }
+  .md\:top-full {
+    @media (width >= 48rem) {
+      top: 100%;
+    }
+  }
+  .md\:right-0 {
+    @media (width >= 48rem) {
+      right: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:left-0 {
+    @media (width >= 48rem) {
+      left: calc(var(--spacing) * 0);
+    }
+  }
   .md\:order-1 {
     @media (width >= 48rem) {
       order: 1;
@@ -2127,6 +2193,11 @@
       grid-column: span 3 / span 3;
     }
   }
+  .md\:-mx-2 {
+    @media (width >= 48rem) {
+      margin-inline: calc(var(--spacing) * -2);
+    }
+  }
   .md\:-mx-4 {
     @media (width >= 48rem) {
       margin-inline: calc(var(--spacing) * -4);
@@ -2308,6 +2379,16 @@
       gap: calc(var(--spacing) * 16);
     }
   }
+  .md\:gap-x-8 {
+    @media (width >= 48rem) {
+      column-gap: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:gap-y-4 {
+    @media (width >= 48rem) {
+      row-gap: calc(var(--spacing) * 4);
+    }
+  }
   .md\:self-center {
     @media (width >= 48rem) {
       align-self: center;
@@ -2354,6 +2435,16 @@
       padding: calc(var(--spacing) * 0);
     }
   }
+  .md\:p-8 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:px-2 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -2419,6 +2510,11 @@
       padding-top: 76px;
     }
   }
+  .md\:pb-0 {
+    @media (width >= 48rem) {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+  }
   .md\:pb-8 {
     @media (width >= 48rem) {
       padding-bottom: calc(var(--spacing) * 8);

package/svelte.d.ts

@@ -49,6 +49,7 @@ import type { SvelteWidgetHero1Props as YtSvelteWidgetHero1Props } from './compo
 import type { SvelteWidgetHero2Props as YtSvelteWidgetHero2Props } from './components/WidgetHero2/types'
 import type { SvelteWidgetHeroSliderProps as YtSvelteWidgetHeroSliderProps } from './components/WidgetHeroSlider/types'
 import type { SvelteWidgetNavbarProps as YtSvelteWidgetNavbarProps } from './components/WidgetNavbar/types'
+import type { SvelteWidgetNavbarFlyoutProps as YtSvelteWidgetNavbarFlyoutProps } from './components/WidgetNavbarFlyout/types'
 import type { SvelteWidgetStatsProps as YtSvelteWidgetStatsProps } from './components/WidgetStats/types'
 import type { SvelteWidgetSteps1Props as YtSvelteWidgetSteps1Props } from './components/WidgetSteps1/types'
 import type { SvelteWidgetStepsTimelineProps as YtSvelteWidgetStepsTimelineProps } from './components/WidgetStepsTimeline/types'
@@ -108,6 +109,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export const WidgetHero2: Component<YtSvelteWidgetHero2Props>
 	export const WidgetHeroSlider: Component<YtSvelteWidgetHeroSliderProps>
 	export const WidgetNavbar: Component<YtSvelteWidgetNavbarProps>
+	export const WidgetNavbarFlyout: Component<YtSvelteWidgetNavbarFlyoutProps>
 	export const WidgetStats: Component<YtSvelteWidgetStatsProps>
 	export const WidgetSteps1: Component<YtSvelteWidgetSteps1Props>
 	export const WidgetStepsTimeline: Component<YtSvelteWidgetStepsTimelineProps>
@@ -166,6 +168,7 @@ declare module '@yatoday/astro-ui/svelte' {
 	export type WidgetHero2Props = YtSvelteWidgetHero2Props
 	export type WidgetHeroSliderProps = YtSvelteWidgetHeroSliderProps
 	export type WidgetNavbarProps = YtSvelteWidgetNavbarProps
+	export type WidgetNavbarFlyoutProps = YtSvelteWidgetNavbarFlyoutProps
 	export type WidgetStatsProps = YtSvelteWidgetStatsProps
 	export type WidgetSteps1Props = YtSvelteWidgetSteps1Props
 	export type WidgetStepsTimelineProps = YtSvelteWidgetStepsTimelineProps