@hubpav/hwio-ui 0.1.0

package/README.md

@@ -0,0 +1,8 @@
+# @hubpav/hwio-ui
+
+HARDWARIO web design system for Astro sites: the Tailwind 4 entry stylesheet with DaisyUI 5,
+theme files generated from `@hubpav/hwio-brand` (`hwio`, `hwio-dark`, `hwio-forestry`, `er3o`),
+the `HWio*` components (`@hubpav/hwio-ui/components/HWioHeader.astro` and friends, subpath
+imports only), shared types and content-schema fragments, and the `hwioUi()` integration
+that writes `_headers` and ships the brand fonts. Components never carry copy: every visible
+string is a prop.

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@hubpav/hwio-ui",
+  "version": "0.1.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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hardwario/website-ui.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    "./styles.css": "./src/styles/styles.css",
+    "./prose.css": "./src/styles/prose.css",
+    "./themes/*": "./src/styles/themes/*",
+    "./components/*": "./src/components/*",
+    "./types": "./src/types.ts",
+    "./schemas": "./src/schemas.ts",
+    "./integration": "./src/integration.mjs",
+    "./package.json": "./package.json",
+    "./html": "./src/html.ts"
+  },
+  "scripts": {
+    "build": "node scripts/build-themes.mjs"
+  },
+  "dependencies": {
+    "@hubpav/hwio-brand": "0.1.0",
+    "@hubpav/hwio-web-runtime": "0.1.0",
+    "@hubpav/hwio-web-worker": "0.1.0",
+    "daisyui": "5.7.28"
+  },
+  "peerDependencies": {
+    "astro": "^7.0.0",
+    "tailwindcss": "^4.3.0"
+  }
+}

package/src/components/HWioBreadcrumbs.astro

@@ -0,0 +1,19 @@
+---
+/** Renders breadcrumb items (the site derives them) with optional BreadcrumbList JSON-LD. */
+import type { HWioLinkItem } from '../types';
+interface Props { items: (HWioLinkItem & { noLink?: boolean })[]; label: string; siteUrl?: string; jsonLd?: boolean; class?: string }
+const { items, label, siteUrl = '', jsonLd = true, class: className = '' } = Astro.props;
+const ld = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: items.filter((i) => !i.noLink).map((i, n) => ({ '@type': 'ListItem', position: n + 1, name: i.label, item: i.href.startsWith('http') ? i.href : `${siteUrl}${i.href}` })) };
+---
+{items.length > 1 && (
+  <nav aria-label={label} class:list={['container pt-2 text-sm', className]}>
+    <div class="breadcrumbs">
+      <ul>
+        {items.map((item, i) => (
+          <li>{i === items.length - 1 || item.noLink ? <span aria-current={i === items.length - 1 ? 'page' : undefined}>{item.label}</span> : <a href={item.href}>{item.label}</a>}</li>
+        ))}
+      </ul>
+    </div>
+    {jsonLd && <script is:inline type="application/ld+json" set:html={JSON.stringify(ld)} />}
+  </nav>
+)}

package/src/components/HWioButton.astro

@@ -0,0 +1,43 @@
+---
+import type { HWioTrack } from '../types';
+import HWioIcon from './HWioIcon.astro';
+/**
+ * Link or button on DaisyUI `btn`. Labels are slot content (sites own their copy; owner rule:
+ * imperative verb, no article). `track` writes the measurement attributes data-track / data-track-location.
+ */
+interface Props {
+  href?: string;
+  external?: boolean;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'neutral' | 'inverse' | 'link';
+  size?: 'sm' | 'md' | 'lg' | 'wide';
+  track?: HWioTrack;
+  arrow?: boolean;
+  type?: 'button' | 'submit';
+  class?: string;
+  [key: string]: unknown;
+}
+const VARIANT = {
+  primary: 'btn btn-primary',
+  secondary: 'btn btn-outline btn-primary',
+  ghost: 'btn btn-ghost',
+  neutral: 'btn btn-neutral',
+  inverse: 'btn hwio-btn-inverse',
+  link: 'btn btn-link',
+} as const;
+const SIZE = { sm: 'btn-sm', md: '', lg: 'btn-lg', wide: 'btn-wide' } as const;
+const { href, external = false, variant = 'primary', size = 'md', track, arrow = false, type = 'button', class: className = '', ...rest } = Astro.props;
+const classes = [VARIANT[variant], SIZE[size], className];
+const trackAttrs = track ? { 'data-track': track.id, 'data-track-location': track.location } : {};
+---
+{href ? (
+  <a href={href} class:list={classes} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...trackAttrs} {...rest}>
+    <slot />
+    {arrow && <HWioIcon name="arrow-right" size="sm" />}
+    {external && !arrow && <HWioIcon name="external" size="sm" />}
+  </a>
+) : (
+  <button type={type} class:list={classes} {...trackAttrs} {...rest}>
+    <slot />
+    {arrow && <HWioIcon name="arrow-right" size="sm" />}
+  </button>
+)}

package/src/components/HWioChoiceCards.astro

@@ -0,0 +1,31 @@
+---
+/** Two or three parallel offers, one of them the lead (www's "A live project or a technical evaluation?"). */
+import type { HWioCta } from '../types';
+import HWioButton from './HWioButton.astro';
+import HWioIcon from './HWioIcon.astro';
+interface Choice { label: string; title: string; text: string; points?: string[]; cta: HWioCta }
+interface Props { items: Choice[]; lead?: number; class?: string }
+const { items, lead = 0, class: className = '' } = Astro.props;
+const COLS = { 1: 'grid gap-6', 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-3' } as const;
+const cols = COLS[(Math.min(Math.max(items.length, 1), 3) as 1 | 2 | 3)];
+---
+<div class:list={[cols, 'mx-auto max-w-[65rem]', className]}>
+  {items.map((c, i) => {
+    const isLead = i === lead;
+    return (
+      <article class:list={['card card-border flex h-full flex-col bg-base-100 border-t-[3px]', isLead ? 'border-t-accent' : 'border-t-base-300']}>
+        <div class="card-body gap-0 p-10">
+          <p class:list={['mb-4 text-sm font-semibold', isLead ? 'text-accent' : 'hwio-muted']}>{c.label}</p>
+          <h3 class="mb-3.5 text-[1.75rem] leading-[1.15] tracking-[-0.02em]">{c.title}</h3>
+          <p class="hwio-muted mb-6">{c.text}</p>
+          {c.points && c.points.length > 0 && (
+            <ul class="hwio-muted mb-8 flex flex-col gap-3 text-[15px]">
+              {c.points.map((pt) => <li class="flex items-start gap-3"><HWioIcon name="check" class="mt-0.5 shrink-0 text-accent" />{pt}</li>)}
+            </ul>
+          )}
+          <div class="mt-auto"><HWioButton href={c.cta.href} external={c.cta.external} variant={isLead ? 'primary' : 'secondary'} arrow={isLead} track={c.cta.track}>{c.cta.label}</HWioButton></div>
+        </div>
+      </article>
+    );
+  })}
+</div>

package/src/components/HWioContactSection.astro

@@ -0,0 +1,37 @@
+---
+/** Contact block: copy and a contact person on the left, the HubSpot form on the right. */
+import type { HWioTone } from '../types';
+import HWioIcon from './HWioIcon.astro';
+import HWioSection from './HWioSection.astro';
+import HWioSectionHeader from './HWioSectionHeader.astro';
+interface Props {
+  id?: string;
+  eyebrow?: string;
+  title: string;
+  lead?: string;
+  person?: { name: string; role?: string; email?: string; phone?: string; phoneHref?: string; image?: { src: string; alt: string; width: number; height: number } };
+  tone?: HWioTone;
+  class?: string;
+}
+const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: className = '' } = Astro.props;
+---
+<HWioSection id={id} tone={tone} class={className}>
+  <div class="grid gap-12 lg:grid-cols-[2fr_3fr]">
+    <div>
+      <HWioSectionHeader eyebrow={eyebrow} title={title} lead={lead} align="left" />
+      {person && (
+        <div class="mt-8 flex items-center gap-4">
+          {person.image && <img src={person.image.src} alt={person.image.alt} width={person.image.width} height={person.image.height} class="size-16 rounded-full object-cover" loading="lazy" />}
+          <div class="text-sm">
+            <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>}
+          </div>
+        </div>
+      )}
+      <slot name="aside" />
+    </div>
+    <div class="card card-border bg-base-100"><div class="card-body"><slot /></div></div>
+  </div>
+</HWioSection>

package/src/components/HWioCookieConsent.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * Consent banner + settings dialog (Consent Mode v2, consent-gated GTM). Two variants:
+ * `categories` (the HARDWARIO sites: four purposes, granular save) and `simple` (enerooo today:
+ * accept / necessary only). Runtime: @hubpav/hwio-web-runtime/consent.
+ */
+interface CategoryCopy { title: string; description: string }
+interface Props {
+  version: string;
+  locale: string;
+  gtmId?: string | null;
+  policyHref: string;
+  variant?: 'categories' | 'simple';
+  labels: {
+    title: string; short: string; policy: string; acceptAll: string; rejectAll: string; customize?: string; close?: string; save?: string;
+    settingsTitle?: string; settingsIntro?: string; alwaysOn?: string;
+    categories?: { necessary: CategoryCopy; preferences: CategoryCopy; statistics: CategoryCopy; marketing: CategoryCopy };
+  };
+}
+const { version, locale, gtmId = null, policyHref, variant = 'categories', labels } = Astro.props;
+const optional = ['preferences', 'statistics', 'marketing'] as const;
+---
+<div data-hwio-consent data-version={version} data-gtm={gtmId ?? undefined} data-locale={locale} hidden role="region" aria-label={labels.title} class="fixed inset-x-0 bottom-0 z-[120] px-4 pb-4 sm:px-6 sm:pb-6" data-hwio-font-exempt>
+  <div class="card card-border mx-auto max-w-5xl bg-base-100 shadow-2xl">
+    <div class="card-body gap-4 md:flex-row md:items-center">
+      <div class="min-w-0 flex-1">
+        <p class="text-base font-semibold">{labels.title}</p>
+        <p class="mt-1 text-sm leading-6 opacity-80">
+          {labels.short}
+          <a href={policyHref} class="link link-secondary font-semibold">{labels.policy}</a>
+        </p>
+      </div>
+      <div class="flex flex-col gap-2 sm:flex-row md:shrink-0">
+        <button type="button" data-hwio-consent-reject class="btn btn-outline btn-secondary">{labels.rejectAll}</button>
+        {variant === 'categories' && labels.customize && <button type="button" data-hwio-consent-customize class="btn btn-outline btn-secondary">{labels.customize}</button>}
+        <button type="button" data-hwio-consent-accept class="btn btn-primary">{labels.acceptAll}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{variant === 'categories' && labels.categories && (
+  <div data-hwio-consent-modal hidden class="fixed inset-0 z-[130] flex items-center justify-center bg-neutral/60 px-4 py-6" data-hwio-font-exempt>
+    <section role="dialog" aria-modal="true" aria-labelledby="hwio-consent-settings-title" class="card max-h-[calc(100vh-3rem)] w-full max-w-2xl overflow-y-auto bg-base-100 shadow-2xl">
+      <div class="card-body gap-6">
+        <div class="flex items-start justify-between gap-6">
+          <div>
+            <h2 id="hwio-consent-settings-title" class="text-2xl font-bold">{labels.settingsTitle}</h2>
+            <p class="mt-2 text-sm leading-6 opacity-80">{labels.settingsIntro}</p>
+          </div>
+          <button type="button" data-hwio-consent-close class="btn btn-ghost btn-square btn-sm" aria-label={labels.close}>
+            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+          </button>
+        </div>
+        <div class="space-y-3">
+          <div class="rounded-box border border-base-300 p-4">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <p class="font-semibold">{labels.categories.necessary.title}</p>
+                <p class="mt-1 text-sm leading-6 opacity-80">{labels.categories.necessary.description}</p>
+              </div>
+              <span class="badge badge-ghost shrink-0">{labels.alwaysOn}</span>
+            </div>
+          </div>
+          {optional.map((category) => (
+            <label class="flex cursor-pointer items-start justify-between gap-4 rounded-box border border-base-300 p-4 transition-colors hover:border-secondary">
+              <span>
+                <span class="block font-semibold">{labels.categories![category].title}</span>
+                <span class="mt-1 block text-sm leading-6 opacity-80">{labels.categories![category].description}</span>
+              </span>
+              <input type="checkbox" class="toggle toggle-primary mt-1 shrink-0" id={`hwio-consent-${category}`} name={`hwio-consent-${category}`} autocomplete="off" data-hwio-consent-toggle={category} />
+            </label>
+          ))}
+        </div>
+        <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <button type="button" data-hwio-consent-reject class="btn btn-outline btn-secondary">{labels.rejectAll}</button>
+          <button type="button" data-hwio-consent-save class="btn btn-outline btn-secondary">{labels.save}</button>
+          <button type="button" data-hwio-consent-accept class="btn btn-primary">{labels.acceptAll}</button>
+        </div>
+      </div>
+    </section>
+  </div>
+)}
+<script>
+  import { hwioConsentRuntime } from '@hubpav/hwio-web-runtime/consent';
+  hwioConsentRuntime();
+</script>

package/src/components/HWioCtaBand.astro

@@ -0,0 +1,20 @@
+---
+/** Closing call-to-action band (www CTASection, direction A). The low-commitment fallback line is the `below` slot. */
+import type { HWioCta, HWioTone } from '../types';
+import HWioButton from './HWioButton.astro';
+import HWioSection from './HWioSection.astro';
+interface Props { id?: string; eyebrow?: string; headline: string; description?: string; primary: HWioCta; secondary?: HWioCta; tone?: HWioTone; class?: string }
+const { id, eyebrow, headline, description, primary, secondary, tone = 'base', class: className = '' } = Astro.props;
+---
+<HWioSection id={id} tone={tone} class={className}>
+  <div class="mx-auto max-w-3xl text-center">
+    {eyebrow && <p class="hwio-kicker mb-4">{eyebrow}</p>}
+    <h2 class="mb-5">{headline}</h2>
+    {description && <p class="hwio-lead mx-auto mb-10 max-w-[40rem]">{description}</p>}
+    <div class="flex flex-wrap justify-center gap-3">
+      <HWioButton href={primary.href} external={primary.external} variant={tone === 'neutral' ? 'inverse' : 'primary'} size="lg" arrow track={primary.track}>{primary.label}</HWioButton>
+      {secondary && <HWioButton href={secondary.href} external={secondary.external} variant="secondary" size="lg" track={secondary.track}>{secondary.label}</HWioButton>}
+    </div>
+    <div class="hwio-muted mt-8 text-[15px]"><slot name="below" /></div>
+  </div>
+</HWioSection>

package/src/components/HWioFaq.astro

@@ -0,0 +1,19 @@
+---
+/** Exclusive accordion on native <details name>, optional FAQPage JSON-LD. Answers are text unless `html` is set. */
+interface Props { items: { q: string; a: string }[]; name?: string; html?: boolean; jsonLd?: boolean; class?: string }
+const { items, name = 'hwio-faq', html = false, jsonLd = true, class: className = '' } = Astro.props;
+const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: items.map((i) => ({ '@type': 'Question', name: i.q, acceptedAnswer: { '@type': 'Answer', text: i.a } })) };
+---
+<div class:list={['space-y-3', className]}>
+  {items.map((item) => (
+    <details class="collapse collapse-arrow border border-base-300 bg-base-100" name={name}>
+      <summary class="collapse-title font-semibold">{item.q}</summary>
+      <div class="collapse-content opacity-90">{html ? <div set:html={item.a} /> : <p>{item.a}</p>}</div>
+    </details>
+  ))}
+</div>
+{jsonLd && <script is:inline type="application/ld+json" set:html={JSON.stringify(ld)} />}
+<script>
+  import { hwioAccordionRuntime } from '@hubpav/hwio-web-runtime/accordion';
+  hwioAccordionRuntime();
+</script>

package/src/components/HWioFeatureCard.astro

@@ -0,0 +1,15 @@
+---
+import HWioIcon from './HWioIcon.astro';
+interface Props { title: string; text: string; icon?: string; href?: string; class?: string }
+const { title, text, icon, href, class: className = '' } = Astro.props;
+---
+<article class:list={['card card-border h-full bg-base-100', href ? 'transition-shadow hover:shadow-lg' : '', className]}>
+  <div class="card-body gap-0">
+    <slot name="icon">
+      {icon && <span class="mb-6 inline-flex size-12 items-center justify-center rounded-xl bg-accent/8 text-accent"><HWioIcon name={icon as 'check'} size="lg" /></span>}
+    </slot>
+    <h3 class="mb-2.5">{href ? <a href={href} class="link link-hover">{title}</a> : title}</h3>
+    <p class="hwio-muted text-base">{text}</p>
+    <slot />
+  </div>
+</article>

package/src/components/HWioFeatureGrid.astro

@@ -0,0 +1,9 @@
+---
+import HWioFeatureCard from './HWioFeatureCard.astro';
+interface Props { items: { title: string; text: string; icon?: string; href?: string }[]; columns?: 2 | 3 | 4; class?: string }
+const COLS = { 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-2 lg:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
+const { items, columns = 3, class: className = '' } = Astro.props;
+---
+<div class:list={[COLS[columns], className]}>
+  {items.map((item) => <HWioFeatureCard {...item} />)}
+</div>

package/src/components/HWioFontGate.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * Font policy (owner ruling R3, 2026-09-05): font-display block plus a pre-paint gate. Rendered by
+ * HWioSeoHead; preloads both faces, runs the static gate bootstrap (hash-stable; it reads
+ * data-hwio-font-* from <html>) and restores visibility without JavaScript.
+ */
+import { fontGate } from '@hubpav/hwio-web-runtime/inline';
+interface Props { files: string[] }
+const { files } = Astro.props;
+---
+{files.map((f) => <link rel="preload" href={f} as="font" type="font/woff2" crossorigin fetchpriority="high" />)}
+<script is:inline set:html={fontGate.code} />
+<noscript>
+  <style is:inline>
+    html.fonts-loading body > * { visibility: visible !important; }
+    html.fonts-loading { --hwio-font-sans: 'Inter Fallback', ui-sans-serif, system-ui, sans-serif; }
+  </style>
+</noscript>

package/src/components/HWioFooter.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * Site footer on the neutral surface: social bar, logo slot, link columns, branches, legal row
+ * with the cookie-settings button, the cross-site strip, copyright and tagline. All strings are props.
+ */
+import type { HWioLinkItem } from '../types';
+import HWioIcon from './HWioIcon.astro';
+import HWioFooterSites from './HWioFooterSites.astro';
+
+interface Column { title: string; links: HWioLinkItem[] }
+interface Props {
+  columns: Column[];
+  social?: { icon: 'linkedin' | 'x' | 'instagram' | 'youtube' | 'github' | 'forum'; label: string; href: string }[];
+  branches?: { title: string; items: { name: string; country: string; mapUrl: string }[] };
+  legal?: HWioLinkItem[];
+  cookieSettingsLabel?: string;
+  sites?: { items: { key: string; label: string; href: string }[]; label: string };
+  copyright: string;
+  tagline?: string;
+  class?: string;
+}
+const { columns, social = [], branches, legal = [], cookieSettingsLabel, sites, copyright, tagline, class: className = '' } = Astro.props;
+const linkClass = 'link link-hover inline-flex items-center gap-1';
+---
+<footer class:list={['bg-neutral text-neutral-content', className]} data-hwio-footer>
+  {social.length > 0 && (
+    <div class="border-b border-neutral-content/10">
+      <div class="container flex justify-center gap-6 py-6">
+        {social.filter((s) => s.icon !== 'forum').map((s) => (
+          <a href={s.href} target="_blank" rel="noopener noreferrer" class="hover:text-accent transition-colors" aria-label={s.label}>
+            <HWioIcon name={s.icon} class="size-9" />
+          </a>
+        ))}
+      </div>
+    </div>
+  )}
+
+  <div class="container py-12 lg:py-16">
+    <div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+      <div class="hidden md:col-span-3 md:flex lg:col-span-1 lg:block">
+        <slot name="logo" />
+      </div>
+      {branches && (
+        <div>
+          <p class="mb-4 font-medium">{branches.title}</p>
+          <div class="space-y-2 text-base">
+            {branches.items.map((b) => (
+              <div>
+                <p class="opacity-80">{b.name}</p>
+                <a href={b.mapUrl} target="_blank" rel="noopener noreferrer" class={linkClass}>{b.country}<HWioIcon name="external" size="sm" /></a>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {columns.map((col) => (
+        <div>
+          <p class="mb-4 font-medium">{col.title}</p>
+          <ul class="space-y-1 text-base">
+            {col.links.map((l) => (
+              <li>
+                <a href={l.href} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} class={linkClass} data-track={l.track?.id} data-track-location={l.track?.location ?? 'footer'}>
+                  {l.label}{l.external && <HWioIcon name="external" size="sm" />}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+      {(legal.length > 0 || cookieSettingsLabel) && (
+        <div>
+          <slot name="legal-title" />
+          <ul class="space-y-1 text-base">
+            {legal.map((l) => (
+              <li><a href={l.href} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} class={linkClass}>{l.label}{l.external && <HWioIcon name="download" size="sm" />}</a></li>
+            ))}
+            {cookieSettingsLabel && <li><button type="button" data-hwio-cookie-settings class="link link-hover text-left">{cookieSettingsLabel}</button></li>}
+          </ul>
+        </div>
+      )}
+    </div>
+  </div>
+
+  {sites && sites.items.length > 0 && (
+    <div class="border-t border-neutral-content/10">
+      <div class="container py-5"><HWioFooterSites items={sites.items} label={sites.label} /></div>
+    </div>
+  )}
+
+  <div class="border-t border-neutral-content/10">
+    <div class="container flex flex-col items-center justify-between gap-4 py-6 text-sm opacity-80 md:flex-row">
+      <p>{copyright}</p>
+      {tagline && <p class="text-center">{tagline}</p>}
+    </div>
+  </div>
+</footer>

package/src/components/HWioFooterSites.astro

@@ -0,0 +1,16 @@
+---
+/** The "HARDWARIO websites" strip. Pass the entries from hwioFooterSites() in @hubpav/hwio-brand. */
+interface Props { items: { key: string; label: string; href: string }[]; label: string; class?: string }
+const { items, label, class: className = '' } = Astro.props;
+---
+{items.length > 0 && (
+  <nav class:list={['flex flex-wrap items-baseline justify-center gap-x-3 gap-y-1 text-sm', className]} aria-label={label}>
+    <span class="w-full text-center opacity-70 sm:w-auto sm:text-left">{label}:</span>
+    {items.map((site, i) => (
+      <>
+        {i > 0 && <span class="opacity-50" aria-hidden="true">&middot;</span>}
+        <a href={site.href} target="_blank" rel="noopener noreferrer" class="link link-hover">{site.label}</a>
+      </>
+    ))}
+  </nav>
+)}

package/src/components/HWioFormField.astro

@@ -0,0 +1,29 @@
+---
+import type { HWioFieldDef } from '../types';
+interface Props { field: HWioFieldDef }
+const { field } = Astro.props;
+const id = `hwio-field-${field.name}`;
+const message = field.messageField ? { 'data-message-field': 'true', 'data-message-label': field.label } : {};
+---
+{field.type === 'hidden' ? (
+  <input type="hidden" name={field.name} value={field.value ?? ''} />
+) : field.type === 'checkbox' ? (
+  <label class:list={['label cursor-pointer items-start gap-3 text-base-content', field.half ? '' : 'md:col-span-2']}>
+    <input type="checkbox" id={id} name={field.name} class="checkbox checkbox-primary mt-0.5" required={field.required} {...message} />
+    <span class="text-sm"><slot name="label">{field.label}</slot></span>
+  </label>
+) : (
+  <fieldset class:list={['fieldset', field.half ? '' : 'md:col-span-2']}>
+    <legend class="fieldset-legend">{field.label}{field.required && <span aria-hidden="true"> *</span>}</legend>
+    {field.type === 'textarea' ? (
+      <textarea id={id} name={field.name} class="textarea w-full" rows={field.rows ?? 5} required={field.required} placeholder={field.placeholder} {...message}>{field.value ?? ''}</textarea>
+    ) : field.type === 'select' ? (
+      <select id={id} name={field.name} class="select w-full" required={field.required} {...message}>
+        {field.placeholder && <option value="" disabled selected>{field.placeholder}</option>}
+        {(field.options ?? []).map((o) => <option value={o.value}>{o.label}</option>)}
+      </select>
+    ) : (
+      <input id={id} type={field.type ?? 'text'} name={field.name} class="input w-full" required={field.required} placeholder={field.placeholder} autocomplete={field.autocomplete} value={field.value} {...message} />
+    )}
+  </fieldset>
+)}

package/src/components/HWioHeader.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * 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.
+ */
+import type { HWioCta, HWioLinkItem } from '../types';
+import HWioButton from './HWioButton.astro';
+import HWioIcon from './HWioIcon.astro';
+import HWioLanguageSwitcher from './HWioLanguageSwitcher.astro';
+import HWioThemeToggle from './HWioThemeToggle.astro';
+
+interface NavItem extends HWioLinkItem { mega?: string }
+interface Props {
+  nav: NavItem[];
+  ctas?: HWioCta[];
+  languages?: { code: string; label: string; href: string; current?: boolean }[];
+  showThemeToggle?: boolean;
+  scrollspy?: boolean;
+  labels: { nav: string; menu: string; close: string; theme?: string; languages?: string };
+  id?: string;
+  class?: string;
+}
+const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
+---
+<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]">
+    <div class="shrink-0">
+      <slot name="logo" />
+    </div>
+
+    <nav class="hidden flex-1 justify-center lg:flex" aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
+      <ul class="menu menu-horizontal gap-1 px-1">
+        {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>
+            ) : (
+              <a href={item.href} class="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>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+
+    <div class="ml-auto flex items-center gap-2">
+      {showThemeToggle && <HWioThemeToggle label={labels.theme ?? 'Theme'} />}
+      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} />}
+      <div class="hidden items-center gap-2 lg:flex">
+        {ctas.map((cta) => (
+          <HWioButton href={cta.href} external={cta.external} variant={CTA_VARIANT[cta.variant ?? 'primary']} size="sm" track={cta.track ?? { id: 'header-cta', location: 'header' }}>{cta.label}</HWioButton>
+        ))}
+      </div>
+      <div class="drawer drawer-end w-auto lg:hidden">
+        <input id={id} type="checkbox" class="drawer-toggle" />
+        <div class="drawer-content">
+          <label for={id} class="btn btn-ghost btn-square drawer-button" aria-label={labels.menu} aria-controls={`${id}-panel`} aria-expanded="false" tabindex="0" role="button">
+            <HWioIcon name="menu" size="lg" />
+          </label>
+        </div>
+        <div class="drawer-side z-[60]">
+          <label for={id} aria-label={labels.close} class="drawer-overlay"></label>
+          <div id={`${id}-panel`} class="menu min-h-full w-80 max-w-[85vw] gap-2 bg-base-100 p-6 text-base-content">
+            <div class="flex justify-end">
+              <label for={id} class="btn btn-ghost btn-square btn-sm" aria-label={labels.close} tabindex="0" role="button"><HWioIcon name="close" /></label>
+            </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>
+              ))}
+            </ul>
+            <div class="mt-4 flex flex-col gap-2">
+              {ctas.map((cta) => (
+                <HWioButton href={cta.href} external={cta.external} variant={CTA_VARIANT[cta.variant ?? 'primary']} track={{ id: cta.track?.id ?? 'header-cta', location: 'mobile-menu' }}>{cta.label}</HWioButton>
+              ))}
+            </div>
+            {languages.length > 1 && <div class="mt-4"><HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} variant="pills" /></div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+<script>
+  import { hwioNavRuntime } from '@hubpav/hwio-web-runtime/nav';
+  hwioNavRuntime();
+</script>

package/src/components/HWioHeroSplit.astro

@@ -0,0 +1,33 @@
+---
+/** Two-column hero (direction A): kicker, headline with optional accent line, lead, actions, checklist; media on a soft sky glow. */
+import type { HWioCta } from '../types';
+import HWioButton from './HWioButton.astro';
+import HWioIcon from './HWioIcon.astro';
+interface Props { id?: string; eyebrow?: string; title: string; accent?: string; lead?: string; actions?: HWioCta[]; checklist?: string[]; reverse?: boolean; glow?: boolean; class?: string }
+const { id, eyebrow, title, accent, lead, actions = [], checklist = [], reverse = false, glow = true, class: className = '' } = Astro.props;
+const VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } as const;
+---
+<section id={id} class:list={['bg-base-100 text-base-content', className]}>
+  <div class:list={['container grid items-center gap-12 py-16 lg:grid-cols-[7fr_5fr] lg:gap-16 lg:py-24', reverse ? 'lg:[&>*:first-child]:order-2' : '']}>
+    <div>
+      {eyebrow && <p class="hwio-kicker mb-5">{eyebrow}</p>}
+      <h1><slot name="title"><span class="block">{title}</span>{accent && <span class="block text-accent">{accent}</span>}</slot></h1>
+      {lead && <p class="hwio-lead mt-7 max-w-[37.5rem] text-xl">{lead}</p>}
+      {actions.length > 0 && (
+        <div class="mt-9 flex flex-wrap gap-3">
+          {actions.map((a, i) => <HWioButton href={a.href} external={a.external} variant={VARIANT[a.variant ?? (i === 0 ? 'primary' : 'secondary')]} size="lg" arrow={i === 0} track={a.track}>{a.label}</HWioButton>)}
+        </div>
+      )}
+      {checklist.length > 0 && (
+        <ul class="hwio-muted mt-8 flex flex-wrap gap-x-8 gap-y-3 text-[15px]">
+          {checklist.map((c) => <li class="inline-flex items-center gap-2"><HWioIcon name="check" size="sm" class="text-accent" />{c}</li>)}
+        </ul>
+      )}
+      <slot name="extra" />
+    </div>
+    <div class:list={['relative flex items-center justify-center', glow ? 'hwio-hero-glow aspect-square rounded-3xl' : '']}><slot name="media" /></div>
+  </div>
+</section>
+<style>
+  .hwio-hero-glow { background: radial-gradient(closest-side, var(--color-base-200) 0%, var(--color-base-200) 55%, var(--color-base-100) 100%); }
+</style>