@hubpav/hwio-ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
   "license": "MIT",
   "type": "module",
@@ -31,9 +31,9 @@
     "build": "node scripts/build-themes.mjs"
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.5.0",
-    "@hubpav/hwio-web-runtime": "0.5.0",
-    "@hubpav/hwio-web-worker": "0.5.0",
+    "@hubpav/hwio-brand": "0.6.0",
+    "@hubpav/hwio-web-runtime": "0.6.0",
+    "@hubpav/hwio-web-worker": "0.6.0",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioContactSection.astro

@@ -26,7 +26,7 @@ const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: class
             <p class="font-semibold">{person.name}</p>
             {person.role && <p class="opacity-80">{person.role}</p>}
             {person.email && <a href={`mailto:${person.email}`} class="link link-hover inline-flex items-center gap-1"><HWioIcon name="mail" size="sm" />{person.email}</a>}
-            {person.phone && <a href={person.phoneHref ?? `tel:${person.phone.replace(/\s+/g, '')}`} class="link link-hover ml-3 inline-flex items-center gap-1"><HWioIcon name="phone" size="sm" />{person.phone}</a>}
+            {person.phone && <a href={person.phoneHref ?? `tel:${person.phone.replace(/\s+/g, '')}`} class="link link-hover ml-3 inline-flex items-center gap-1 whitespace-nowrap"><HWioIcon name="phone" size="sm" />{person.phone}</a>}
           </div>
         </div>
       )}

package/src/components/HWioHeader.astro

@@ -1,7 +1,8 @@
 ---
 /**
- * Sticky site header: logo slot, primary nav (flat links; mega-menu content via `mega:<key>` slots),
- * CTAs, language switcher, theme toggle, and a DaisyUI drawer for small screens.
+ * Sticky site header: logo slot, primary nav (flat links, or mega items whose `mega:<key>` slot opens as a
+ * full-width panel under the bar), CTAs, language switcher, theme toggle, and a DaisyUI drawer for small
+ * screens, where a mega item lists its `children` as a collapsible group instead.
  */
 import type { HWioCta, HWioLinkItem } from '../types';
 import HWioButton from './HWioButton.astro';
@@ -9,7 +10,12 @@ import HWioIcon from './HWioIcon.astro';
 import HWioLanguageSwitcher from './HWioLanguageSwitcher.astro';
 import HWioThemeToggle from './HWioThemeToggle.astro';
 
-interface NavItem extends HWioLinkItem { mega?: string }
+interface NavItem extends HWioLinkItem {
+  /** Key of the `mega:<key>` slot; the item becomes a button that opens the panel (hover, click, keyboard). */
+  mega?: string;
+  /** Links listed under the item in the drawer (the panel is desktop-only); a description renders as a second, muted line. */
+  children?: (HWioLinkItem & { description?: string })[];
+}
 interface Props {
   nav: NavItem[];
   ctas?: HWioCta[];
@@ -24,11 +30,13 @@ interface Props {
 }
 const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
 const BREAK = {
-  lg: { nav: 'hidden flex-1 justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden' },
-  xl: { nav: 'hidden flex-1 justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden' },
+  lg: { nav: 'hidden flex-1 justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden', panels: 'hidden lg:block' },
+  xl: { nav: 'hidden flex-1 justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden', panels: 'hidden xl:block' },
 } as const;
 const bp = BREAK[desktopFrom];
 const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
+const megaItems = nav.filter((item) => item.mega);
+const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {});
 ---
 <header class:list={['sticky top-0 z-50 border-b border-base-300 bg-base-100/90 backdrop-blur supports-[backdrop-filter]:bg-base-100/80', className]} data-hwio-font-exempt>
   <div class="container flex h-16 items-center gap-4 lg:h-[72px]">
@@ -41,12 +49,10 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
         {nav.map((item) => (
           <li>
             {item.mega ? (
-              <details>
-                <summary class="font-medium">{item.label}</summary>
-                <div class="dropdown-content bg-base-100 rounded-box z-50 mt-2 p-4 shadow-lg border border-base-300">
-                  <slot name={`mega:${item.mega}`} />
-                </div>
-              </details>
+              <button type="button" class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" data-hwio-mega-trigger={item.mega} aria-expanded="false" aria-haspopup="true" aria-controls={`${id}-mega-${item.mega}`}>
+                {item.label}
+                <HWioIcon name="chevron-down" size="sm" class="opacity-50 transition-transform duration-200" />
+              </button>
             ) : (
               <a href={item.href} class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
             )}
@@ -81,7 +87,28 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
             </div>
             <ul class="menu w-full text-base">
               {nav.map((item) => (
-                <li><a href={item.href} aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location="mobile-menu">{item.label}</a></li>
+                <li>
+                  {item.children?.length ? (
+                    <details>
+                      <summary>{item.label}</summary>
+                      <ul>
+                        {item.children.map((child) => (
+                          <li>
+                            <a href={child.href} {...linkAttrs(child)} data-track={child.track?.id} data-track-location="mobile-menu">
+                              {/* One grid cell: DaisyUI lays menu items out as a column-flow grid, so the two lines nest in one span. */}
+                              <span class="flex flex-col items-start gap-0.5">
+                                <span class="inline-flex items-center gap-1">{child.label}{child.external && <HWioIcon name="external" size="sm" class="opacity-50" />}</span>
+                                {child.description && <span class="text-xs font-normal leading-snug opacity-70">{child.description}</span>}
+                              </span>
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </details>
+                  ) : (
+                    <a href={item.href} {...linkAttrs(item)} aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location="mobile-menu">{item.label}</a>
+                  )}
+                </li>
               ))}
             </ul>
             <div class="mt-4 flex flex-col gap-2">
@@ -95,6 +122,15 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
       </div>
     </div>
   </div>
+  {megaItems.length > 0 && (
+    <div class={bp.panels}>
+      {megaItems.map((item) => (
+        <div id={`${id}-mega-${item.mega}`} class="absolute inset-x-0 top-full border-t border-base-300 bg-base-100 shadow-xl" data-hwio-mega-panel={item.mega} hidden>
+          <div class="container py-8"><slot name={`mega:${item.mega}`} /></div>
+        </div>
+      ))}
+    </div>
+  )}
 </header>
 <script>
   import { hwioNavRuntime } from '@hubpav/hwio-web-runtime/nav';

package/src/components/HWioHubSpotForm.astro

@@ -9,7 +9,8 @@ import HWioTurnstile from './HWioTurnstile.astro';
 interface Props {
   form: { key: string; guid: string; endpoint: string; event?: 'generate_lead' | 'newsletter_signup'; enrich?: boolean; kind?: string; source?: string };
   fields: HWioFieldDef[];
-  labels: { submit: string; sending: string; success: string; error: string };
+  /** turnstile: shown when the anti-spam widget produced no token (falls back to `error`). */
+  labels: { submit: string; sending: string; success: string; error: string; turnstile?: string };
   locale: string;
   turnstileSiteKey?: string;
   layout?: 'grid' | 'inline';
@@ -33,6 +34,7 @@ const LAYOUT = { grid: 'grid gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3
   data-hs-sending-msg={labels.sending}
   data-hs-success-msg={labels.success}
   data-hs-error-msg={labels.error}
+  data-hs-turnstile-msg={labels.turnstile}
 >
   <div class={LAYOUT[layout]}>
     {fields.map((field) => <HWioFormField field={field} />)}

package/src/components/HWioIcon.astro

@@ -29,6 +29,7 @@ const FILL = {
   x: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
   instagram: 'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3Z',
   youtube: 'M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73Z',
+  facebook: 'M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95Z',
   github: 'M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z',
   forum: 'M12 3C6.5 3 2 6.58 2 11a7.218 7.218 0 0 0 2.75 5.5c0 .6-.42 2.17-2.75 4.5 2.37-.11 4.64-1 6.47-2.5H12c5.5 0 10-3.58 10-8s-4.5-8-10-8Z',
 } as const;

package/src/integration.d.mts

@@ -5,5 +5,7 @@ export interface HWioUiOptions {
   headers?: HWioHeadersOptions | false;
   /** Serve the brand fonts and logos in dev and copy them into the build output. */
   assets?: boolean;
+  /** Font families copied into /fonts (file-name prefixes in @hubpav/hwio-brand/dist/fonts). Default ['inter']. */
+  fonts?: string[];
 }
 export function hwioUi(options?: HWioUiOptions): AstroIntegration;

package/src/integration.mjs

@@ -19,11 +19,12 @@ function brandDir() {
 const MIME = { '.woff2': 'font/woff2', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon' };
 
 /**
- * @param {{ headers?: import('@hubpav/hwio-web-worker/headers').HWioHeadersOptions | false, assets?: boolean }} [options]
+ * @param {{ headers?: import('@hubpav/hwio-web-worker/headers').HWioHeadersOptions | false, assets?: boolean, fonts?: string[] }} [options]
+ *   fonts: font families (file-name prefixes in @hubpav/hwio-brand/dist/fonts) copied to /fonts; default ['inter'].
  * @returns {import('astro').AstroIntegration}
  */
 export function hwioUi(options = {}) {
-  const { headers = false, assets = true } = options;
+  const { headers = false, assets = true, fonts = ['inter'] } = options;
   const brand = brandDir();
   const fontsDir = join(brand, 'dist/fonts');
   const logosDir = join(brand, 'logos');
@@ -51,7 +52,12 @@ export function hwioUi(options = {}) {
           for (const [src, dest] of [[fontsDir, 'fonts'], [logosDir, 'brand']]) {
             if (!existsSync(src)) continue;
             mkdirSync(join(out, dest), { recursive: true });
-            for (const f of readdirSync(src)) if (extname(f) !== '.css') copyFileSync(join(src, f), join(out, dest, f));
+            for (const f of readdirSync(src)) {
+              if (extname(f) === '.css') continue;
+              // Only the families the site's themes use (a HARDWARIO site never serves Poppins, enerooo never Inter).
+              if (dest === 'fonts' && !fonts.some((family) => f.startsWith(`${family}-`))) continue;
+              copyFileSync(join(src, f), join(out, dest, f));
+            }
           }
         }
         if (headers) writeFileSync(join(out, '_headers'), hwioRenderHeadersFile(headers));

package/src/styles/themes/er3o.css

@@ -14,7 +14,7 @@
   --color-secondary-content: #061920;
   --color-accent: #0C6678;
   --color-accent-content: #ffffff;
-  --color-neutral: #252532;
+  --color-neutral: #404040;
   --color-neutral-content: #ffffff;
   --color-info: #19768B;
   --color-info-content: #ffffff;