@hubpav/hwio-ui 0.7.11 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.7.11",
+  "version": "0.9.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",
@@ -32,9 +32,9 @@
     "test": "node --test \"test/**/*.test.mjs\""
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.7.11",
-    "@hubpav/hwio-web-runtime": "0.7.11",
-    "@hubpav/hwio-web-worker": "0.7.11",
+    "@hubpav/hwio-brand": "0.9.0",
+    "@hubpav/hwio-web-runtime": "0.9.0",
+    "@hubpav/hwio-web-worker": "0.9.0",
     "daisyui": "5.7.47"
   },
   "peerDependencies": {

package/src/components/HWioApplicationTile.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Application tile: a picture, a title of three or four words and one line, optionally the references
+ * that run it. The whole tile links to the application page (its title underlines on hover and focus).
+ * On phones the tile becomes a row (thumbnail beside the text), so a set of eight stays one short list.
+ * `cutout` shows a product cut-out whole on the Panel ground (with an optional isometric `backdrop`)
+ * instead of a photograph. `reveal` fades the tile in once in view (needs HWioReveal on the page);
+ * `revealDelay` (ms) staggers a row.
+ */
+import type { HWioBackdrop, HWioMedia, HWioTrack } from '../types';
+import HWioCutout from './HWioCutout.astro';
+import HWioPhoto from './HWioPhoto.astro';
+interface Props {
+  href: string;
+  title: string;
+  line: string;
+  image: HWioMedia;
+  cutout?: boolean;
+  backdrop?: HWioBackdrop;
+  /** Names of the customers or projects that run it, shown under the line, separated by middle dots. */
+  references?: string[];
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  track?: HWioTrack;
+  reveal?: boolean;
+  revealDelay?: number;
+  eager?: boolean;
+  class?: string;
+}
+const { href, title, line, image, cutout = false, backdrop, references = [], headingLevel = 'h3', track, reveal = false, revealDelay, eager = false, class: className = '' } = Astro.props;
+const Heading = headingLevel;
+const hover = 'transition-transform duration-300 ease-out group-hover:scale-[1.02] motion-reduce:transition-none';
+---
+<a
+  href={href}
+  class:list={['hwio-card-link group grid grid-cols-[6rem_minmax(0,1fr)] content-start items-center gap-4 text-base-content sm:grid-cols-1 sm:items-start sm:gap-5', className]}
+  data-track={track?.id}
+  data-track-location={track?.location}
+  data-hwio-reveal={reveal ? 'true' : undefined}
+  data-hwio-reveal-delay={reveal && revealDelay ? String(revealDelay) : undefined}
+>
+  {cutout
+    ? <HWioCutout image={image} aspect="4/3" rounded="xl" inset="lg" backdrop={backdrop} eager={eager} imgClass={hover} />
+    : <HWioPhoto image={image} aspect="4/3" rounded="xl" eager={eager} imgClass={hover} />}
+  <div class="min-w-0">
+    <Heading class="hwio-role-title hwio-card-title">{title}</Heading>
+    <p class="hwio-muted mt-1.5 text-[0.9375rem] leading-[1.5]">{line}</p>
+    {references.length > 0 && <p class="hwio-muted mt-3 text-[0.8125rem] leading-[1.4]">{references.join(' · ')}</p>}
+  </div>
+</a>

package/src/components/HWioButton.astro

@@ -4,6 +4,9 @@ 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.
+ * `arrow` (the page's primary call to action only) adds an arrow that nudges 3 px on hover and focus
+ * (.hwio-arrow; no nudge under reduced motion). An external link shows the external glyph after the label
+ * unless `externalIcon={false}` (HWioHeader's icon-only CTAs place it beside the label themselves).
  */
 interface Props {
   href?: string;
@@ -12,6 +15,8 @@ interface Props {
   size?: 'sm' | 'md' | 'lg' | 'wide';
   track?: HWioTrack;
   arrow?: boolean;
+  /** Show the external-link glyph after the label of an external link (default true). */
+  externalIcon?: boolean;
   type?: 'button' | 'submit';
   class?: string;
   [key: string]: unknown;
@@ -25,19 +30,19 @@ const VARIANT = {
   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 { href, external = false, variant = 'primary', size = 'md', track, arrow = false, externalIcon = true, 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" />}
+    {arrow && <HWioIcon name="arrow-right" size="sm" class="hwio-arrow" />}
+    {external && externalIcon && !arrow && <HWioIcon name="external" size="sm" />}
   </a>
 ) : (
   <button type={type} class:list={classes} {...trackAttrs} {...rest}>
     <slot />
-    {arrow && <HWioIcon name="arrow-right" size="sm" />}
+    {arrow && <HWioIcon name="arrow-right" size="sm" class="hwio-arrow" />}
   </button>
 )}

package/src/components/HWioChoiceCards.astro

@@ -15,12 +15,12 @@ const cols = COLS[(Math.min(Math.max(items.length, 1), 3) as 1 | 2 | 3)];
     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:list={['hwio-weight-label mb-4 text-sm', isLead ? 'text-accent' : 'hwio-muted']}>{c.label}</p>
+          <h3 class="hwio-choice-title mb-3.5">{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>)}
+              {c.points.map((pt) => <li class="flex items-start gap-3"><HWioIcon name="check" class="hwio-icon mt-0.5 shrink-0" />{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>

package/src/components/HWioContactSection.astro

@@ -23,7 +23,7 @@ const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: class
         <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>
+            <p class="hwio-weight-label">{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 whitespace-nowrap"><HWioIcon name="phone" size="sm" />{person.phone}</a>}

package/src/components/HWioCookieConsent.astro

@@ -24,10 +24,10 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
   <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">
+        <p class="hwio-weight-label text-base">{labels.title}</p>
+        <p class="hwio-note mt-1 text-sm leading-6">
           {labels.short}
-          <a href={policyHref} class="link link-accent font-semibold">{labels.policy}</a>
+          <a href={policyHref} class="link hwio-link hwio-weight-label">{labels.policy}</a>
         </p>
       </div>
       <div class="flex flex-col gap-2 sm:flex-row md:shrink-0">
@@ -45,8 +45,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
       <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>
+            <h2 id="hwio-consent-settings-title" class="text-2xl">{labels.settingsTitle}</h2>
+            <p class="hwio-note mt-2 text-sm leading-6">{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>
@@ -56,8 +56,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
           <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>
+                <p class="hwio-weight-label">{labels.categories.necessary.title}</p>
+                <p class="hwio-note mt-1 text-sm leading-6">{labels.categories.necessary.description}</p>
               </div>
               <span class="badge badge-ghost shrink-0">{labels.alwaysOn}</span>
             </div>
@@ -65,8 +65,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
           {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 class="hwio-weight-label block">{labels.categories![category].title}</span>
+                <span class="hwio-note mt-1 block text-sm leading-6">{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>

package/src/components/HWioCutout.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * A product cut-out (transparent ground) shown whole in a fixed frame, with the one shadow recipe every
+ * product carries (.hwio-product-shadow: a tight contact shadow plus a soft ambient one; owner,
+ * 2026-10-30). `baseline` stands it on the frame's common bottom line with a blurred floor ellipse, so
+ * a row of products lines up as one family. `ground="panel"` puts it on the Panel ground (cards,
+ * tiles), `plain` on the page. `backdrop` places it in front of a quiet isometric room in light tones
+ * (the artwork library's backdrops, with their dark-theme drawing) when no field photograph exists.
+ */
+import type { HWioAspect, HWioBackdrop, HWioMedia } from '../types';
+interface Props {
+  image: HWioMedia;
+  aspect?: HWioAspect;
+  ground?: 'panel' | 'plain';
+  baseline?: boolean;
+  /** Air around the product inside the frame: sm 8 %, md 10 %, lg 12 % of the frame width. */
+  inset?: 'sm' | 'md' | 'lg';
+  backdrop?: HWioBackdrop;
+  rounded?: 'none' | 'xl' | '2xl';
+  eager?: boolean;
+  class?: string;
+  imgClass?: string;
+}
+const { image, aspect = '1/1', ground = 'panel', baseline = false, inset = 'md', backdrop, rounded = '2xl', eager = false, class: className = '', imgClass = '' } = Astro.props;
+const ASPECT = { '1/1': 'aspect-square', '4/3': 'aspect-[4/3]', '3/2': 'aspect-[3/2]', '16/9': 'aspect-video', '4/5': 'aspect-[4/5]', '3/4': 'aspect-[3/4]' } as const;
+const ROUNDED = { none: 'rounded-none', xl: 'rounded-xl', '2xl': 'rounded-2xl' } as const;
+const PAD = { sm: 'p-[8%]', md: 'p-[10%]', lg: 'p-[12%]' } as const;
+// On a baseline the product sits 6 % higher than its inset, above the floor shadow, aligned to the bottom.
+const PAD_BASELINE = { sm: 'px-[8%] pt-[8%] pb-[14%] object-bottom', md: 'px-[10%] pt-[10%] pb-[16%] object-bottom', lg: 'px-[12%] pt-[12%] pb-[18%] object-bottom' } as const;
+const FLOOR = { sm: 'bottom-[10.5%]', md: 'bottom-[12.5%]', lg: 'bottom-[14.5%]' } as const;
+// In front of a room the product stands a little smaller, the same on every such tile.
+const PAD_BACKDROP = 'pt-[14%] px-[18%] pb-[10%]';
+const BACKDROP_PAD_BASELINE = 'pt-[14%] px-[18%] pb-[10%] object-bottom';
+const padding = backdrop ? (baseline ? BACKDROP_PAD_BASELINE : PAD_BACKDROP) : baseline ? PAD_BASELINE[inset] : PAD[inset];
+---
+<div class:list={['relative overflow-hidden', ASPECT[aspect], ROUNDED[rounded], ground === 'panel' && 'hwio-cutout-ground', className]}>
+  {backdrop && (backdrop.dark ? (
+    <>
+      <img src={backdrop.light} alt="" aria-hidden="true" loading={eager ? 'eager' : 'lazy'} decoding="async" class="hwio-backdrop hwio-backdrop-light" />
+      <img src={backdrop.dark} alt="" aria-hidden="true" loading="lazy" decoding="async" class="hwio-backdrop hwio-backdrop-dark" />
+    </>
+  ) : (
+    <img src={backdrop.light} alt="" aria-hidden="true" loading={eager ? 'eager' : 'lazy'} decoding="async" class="hwio-backdrop" />
+  ))}
+  <img
+    src={image.src}
+    srcset={image.srcset}
+    sizes={image.sizes}
+    alt={image.alt}
+    width={image.width}
+    height={image.height}
+    loading={eager ? 'eager' : 'lazy'}
+    decoding="async"
+    fetchpriority={eager ? 'high' : undefined}
+    class:list={['hwio-product-shadow absolute inset-0 z-[1] h-full w-full object-contain', padding, imgClass]}
+  />
+  {baseline && <span class:list={['hwio-product-floor', FLOOR[inset]]} aria-hidden="true"></span>}
+</div>

package/src/components/HWioFaq.astro

@@ -9,7 +9,7 @@ const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: i
 <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>
+      <summary class="collapse-title hwio-weight-label">{item.q}</summary>
       <div class="collapse-content space-y-3 opacity-90">{html ? <div set:html={paragraphs(item.a).join('')} /> : paragraphs(item.a).map((p) => <p>{p}</p>)}</div>
     </details>
   ))}

package/src/components/HWioFeatureCard.astro

@@ -6,7 +6,7 @@ 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>}
+      {icon && <span class="hwio-icon-tile mb-6 inline-flex size-12 items-center justify-center rounded-xl"><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>

package/src/components/HWioFooter.astro

@@ -2,6 +2,8 @@
 /**
  * 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.
+ * The bottom line (owner, 2026-10-30) centres the copyright and the tagline together, a middle dot
+ * between them; on phones they stack, centred, without the dot.
  */
 import type { HWioLinkItem } from '../types';
 import HWioIcon from './HWioIcon.astro';
@@ -44,7 +46,7 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
       </div>
       {branches && (
         <div>
-          <p class="mb-4 font-medium">{branches.title}</p>
+          <p class="hwio-weight-footer-title mb-4">{branches.title}</p>
           <div class="space-y-2 text-base">
             {branches.items.map((b) => (
               <div>
@@ -57,7 +59,7 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
       )}
       {columns.map((col) => (
         <div>
-          <p class="mb-4 font-medium">{col.title}</p>
+          <p class="hwio-weight-footer-title mb-4">{col.title}</p>
           <ul class="space-y-1 text-base">
             {col.links.map((l) => (
               <li>
@@ -90,9 +92,10 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
   )}
 
   <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">
+    <div class="container flex flex-col items-center justify-center gap-1 py-6 text-center text-sm opacity-80 md:flex-row md:gap-0">
       <p>{copyright}</p>
-      {tagline && <p class="text-center">{tagline}</p>}
+      {tagline && <span aria-hidden="true" class="mx-3 hidden md:inline">·</span>}
+      {tagline && <p>{tagline}</p>}
     </div>
   </div>
 </footer>

package/src/components/HWioHeader.astro

@@ -9,6 +9,11 @@
  * trigger on close, Escape closes). Below `sm` the bar drops the language dropdown (the drawer carries the
  * pills), so logo, theme toggle and the 48 px trigger fit a 320 px viewport without horizontal overflow.
  *
+ * The theme toggle and the language dropdown are quiet utilities (.hwio-utility: the nav's weight, size
+ * and gray, thin icons). The language dropdown, the mega panels and the drawer close each other: one
+ * popup at a time (@hubpav/hwio-web-runtime/popup). A CTA with an icon collapses to the icon alone below
+ * 2xl; an external CTA's arrow shows only beside its full label.
+ *
  * `navDensity="tight"` with `desktopFrom="xl"`: between 1280 and 1535 px, where the container is still
  * 1280 px wide, the nav labels drop from 15 to 14 px and the item padding from 12 to 8 px, so a long nav
  * plus CTAs (SK/PL/CS labels) fits without sideways scroll. From 1536 px the nav is back to default.
@@ -60,12 +65,12 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
         {nav.map((item) => (
           <li class:list={[item.current && 'hwio-nav-current']}>
             {item.mega ? (
-              <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}`}>
+              <button type="button" class="hwio-weight-nav px-3 text-[15px] text-base-content/80 hover:text-[var(--hwio-nav-hover,var(--color-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=page]:text-[var(--hwio-nav-active,var(--color-primary))]" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
+              <a href={item.href} class="hwio-weight-nav px-3 text-[15px] text-base-content/80 hover:text-[var(--hwio-nav-hover,var(--color-accent))] aria-[current=page]:text-[var(--hwio-nav-active,var(--color-primary))]" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
             )}
           </li>
         ))}
@@ -73,13 +78,15 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
     </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'} class="max-sm:hidden" />}
+      {showThemeToggle && <HWioThemeToggle label={labels.theme ?? 'Theme'} class="hwio-utility" />}
+      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} class="hwio-utility max-sm:hidden" />}
       <div class={bp.ctas}>
         {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' }} class={cta.icon ? '2xl:px-4 px-2.5' : ''} aria-label={cta.icon ? cta.label : undefined} title={cta.icon ? cta.label : undefined}>
+          <HWioButton href={cta.href} external={cta.external} externalIcon={!cta.icon} variant={CTA_VARIANT[cta.variant ?? 'primary']} size="sm" track={cta.track ?? { id: 'header-cta', location: 'header' }} class={cta.icon ? '2xl:px-4 px-2.5' : ''} aria-label={cta.icon ? cta.label : undefined} title={cta.icon ? cta.label : undefined}>
             {cta.icon && <HWioIcon name={cta.icon as 'bag'} size="sm" />}
             {cta.icon ? <span class="hidden 2xl:inline">{cta.label}</span> : cta.label}
+            {/* Collapsed (icon only, below 2xl) the button shows just its icon; the external glyph returns beside the label. */}
+            {cta.icon && cta.external && <HWioIcon name="external" size="sm" class="hidden 2xl:block" />}
           </HWioButton>
         ))}
       </div>
@@ -110,7 +117,7 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
                               {/* 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>}
+                                {child.description && <span class="hwio-menu-desc">{child.description}</span>}
                               </span>
                             </a>
                           </li>

package/src/components/HWioHeroSplit.astro

@@ -1,17 +1,24 @@
 ---
-/** Two-column hero (direction A): kicker, headline with optional accent line, lead, actions, checklist; media on a soft sky glow. */
+/**
+ * Two-column hero (direction A): kicker, headline with optional accent line, lead, actions, checklist; media on a soft sky glow.
+ * `titleSize="long"` sets a long opening statement (more than about eight words) at 36 to 52 px so it reads in three
+ * calm lines (.hwio-h1-long, change request CR-7, pending the Brand Guidelines). Up to two key words of the title may
+ * carry the figure gradient through the `title` slot (<span class="hwio-grad">, change request CR-8), instead of a key
+ * figure on the same page. `enter` eases the text column and then the media in once the font gate has shown the page.
+ */
 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;
+interface Props { id?: string; eyebrow?: string; title: string; accent?: string; lead?: string; actions?: HWioCta[]; checklist?: string[]; reverse?: boolean; glow?: boolean; titleSize?: 'default' | 'long'; enter?: boolean; class?: string }
+const { id, eyebrow, title, accent, lead, actions = [], checklist = [], reverse = false, glow = true, titleSize = 'default', enter = false, class: className = '' } = Astro.props;
+const TITLE_SIZE = { default: '', long: 'hwio-h1-long' } as const;
 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 grid-cols-1 items-center gap-12 py-16 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:gap-16 lg:py-24', reverse ? 'lg:[&>*:first-child]:order-2' : '']}>
-    <div>
+    <div class:list={[enter && 'hwio-enter']}>
       {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>
+      <h1 class:list={[TITLE_SIZE[titleSize]]}><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">
@@ -20,12 +27,12 @@ const VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } a
       )}
       {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>)}
+          {checklist.map((c) => <li class="inline-flex items-center gap-2"><HWioIcon name="check" size="sm" class="hwio-icon" />{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 class:list={['relative flex items-center justify-center', glow ? 'hwio-hero-glow aspect-square rounded-3xl' : '', enter && 'hwio-enter-media']}><slot name="media" /></div>
   </div>
 </section>
 <style>

package/src/components/HWioIsoScene.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * An isometric scene drawn with the Brand Guidelines' kit (the artwork library's illustrations/isometric,
+ * `make isometric`), inlined so CSS and the runtime reach its parts. Isometric drawings explain;
+ * photographs prove. Pass the light-theme SVG as a string (`import scene from './scene.svg?raw'`) and a
+ * description for screen readers; the scene carries no text of its own.
+ *
+ * Motion (@hubpav/hwio-web-runtime/iso): in view, the scene builds itself once: `.iso-object` groups
+ * settle in drawing order, then each `.iso-trace` draws from pad to pad and the `.iso-radio` links fade
+ * in. Without JavaScript or under reduced motion it shows complete. `animate={false}` keeps it still.
+ *
+ * Dark theme: the kit's -dark-theme.svg is the same drawing with the plate neutrals and the link colours
+ * swapped (verified byte for byte on 2026-10-30), so one inlined copy and the swaps below render both.
+ * A drawing outside the kit's palette keeps its colours in dark mode.
+ */
+interface Props {
+  svg: string;
+  label: string;
+  animate?: boolean;
+  class?: string;
+}
+const { svg, label, animate = true, class: className = '' } = Astro.props;
+const escapeAttr = (text: string) => text.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const markup = svg
+  .replace(/^\s*<\?xml[^>]*>\s*/, '')
+  .replace(/<svg\b([^>]*?)\sdata-theme="[^"]*"/, '<svg$1')
+  .replace(/<svg\b/, `<svg role="img" aria-label="${escapeAttr(label)}"`);
+---
+<div class:list={['hwio-iso-frame', className]} data-hwio-iso={animate ? 'true' : undefined} set:html={markup} />
+<style is:global>
+  .hwio-iso-frame svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+
+  /* Dark theme: the kit's -dark-theme.svg colours (plate neutrals, link Red and Gray). */
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#dcdcdc'] { fill: #1d1d26; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#dcdcdc'] { stroke: #1d1d26; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#dddddd'] { fill: #1e1e27; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#dddddd'] { stroke: #1e1e27; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e0e0e0'] { fill: #1f1f2a; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e0e0e0'] { stroke: #1f1f2a; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e1e1e1'] { fill: #20202b; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e1e1e1'] { stroke: #20202b; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e3e3e3'] { fill: #22222d; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e3e3e3'] { stroke: #22222d; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e4e4e4'] { fill: #23232e; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e4e4e4'] { stroke: #23232e; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e7e7e7'] { fill: #242431; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e7e7e7'] { stroke: #242431; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#e8e8e8'] { fill: #252532; }
+  [data-theme$='-dark'] .hwio-iso-frame [stroke='#e8e8e8'] { stroke: #252532; }
+  [data-theme$='-dark'] .hwio-iso-frame [fill='#f7f7f7'] { fill: #2e2e3a; }
+  [data-theme$='-dark'] .hwio-iso-frame .iso-link [fill='#e30427'] { fill: #f43f5e; }
+  [data-theme$='-dark'] .hwio-iso-frame .iso-link [stroke='#e30427'] { stroke: #f43f5e; }
+  [data-theme$='-dark'] .hwio-iso-frame .iso-link [fill='#6b6a6a'] { fill: #8c8b8b; }
+  [data-theme$='-dark'] .hwio-iso-frame .iso-link [stroke='#6b6a6a'] { stroke: #8c8b8b; }
+
+  /* Build states, set by the runtime only when motion is allowed (no JavaScript: the full scene). */
+  .hwio-iso-anim .iso-object {
+    opacity: 0;
+    transform: translateY(4px);
+    transform-box: fill-box;
+  }
+  .hwio-iso-anim g.iso-radio {
+    opacity: 0;
+  }
+  .hwio-iso-anim .iso-trace:not(.iso-radio) {
+    /* pathLength="1" on every trace: 1px is the whole path. */
+    stroke-dasharray: 1px;
+    stroke-dashoffset: 1px;
+  }
+  .hwio-iso-anim .iso-pad {
+    opacity: 0;
+  }
+  /* Transitions only on play, so hiding the parts at bind time is instant. */
+  .hwio-iso-anim.hwio-iso-play .iso-object { opacity: 1; transform: none; transition: opacity 300ms ease-out, transform 300ms ease-out; }
+  .hwio-iso-anim.hwio-iso-play g.iso-radio { opacity: 1; transition: opacity 300ms ease-out; }
+  .hwio-iso-anim.hwio-iso-play .iso-trace:not(.iso-radio) { stroke-dashoffset: 0px; transition: stroke-dashoffset 700ms ease-out; }
+  .hwio-iso-anim.hwio-iso-play .iso-pad { opacity: 1; transition: opacity 200ms ease-out; }
+  @media (prefers-reduced-motion: reduce) {
+    .hwio-iso-anim .iso-object,
+    .hwio-iso-anim g.iso-radio,
+    .hwio-iso-anim .iso-pad { opacity: 1; transform: none; transition: none; }
+    .hwio-iso-anim .iso-trace:not(.iso-radio) { stroke-dashoffset: 0px; transition: none; }
+  }
+</style>
+<script>
+  import { hwioIsoRuntime } from '@hubpav/hwio-web-runtime/iso';
+  hwioIsoRuntime();
+</script>

package/src/components/HWioKeyFigure.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * A figure with its label. `gradient` fills the type with the figure gradient: the one key figure of a
+ * page (Brand Guidelines chapter 03, 40 px and up; D33, D44 on the dark ground). Every other figure stays
+ * Ink, and so does the key figure on a page whose hero H1 carries gradient words (CR-8). Pass numbers
+ * with a non-breaking space before units and in thousands ("7\u00a0000+").
+ *
+ * `count` counts the figure up once when it enters the viewport (800 ms, ease-out) and ends on the exact
+ * `value` text; without JavaScript or under reduced motion the value simply shows.
+ */
+interface Props {
+  value: string;
+  label: string;
+  gradient?: boolean;
+  /** md 40 px; lg 40 / 48 px; xl 48 / 72 px (from lg). */
+  size?: 'md' | 'lg' | 'xl';
+  /** Count-up: to, from (default 0), template around the number ("{n}+", "Since {n}"), thousands separator. */
+  count?: { to: number; from?: number; template?: string; group?: string };
+  class?: string;
+}
+const { value, label, gradient = false, size = 'lg', count, class: className = '' } = Astro.props;
+const SIZE = {
+  md: 'text-[2.5rem]',
+  lg: 'text-[2.5rem] lg:text-[3rem]',
+  xl: 'text-[3rem] lg:text-[4.5rem]',
+} as const;
+const countAttrs = count
+  ? {
+      'data-hwio-count': String(count.to),
+      'data-hwio-count-from': count.from === undefined ? undefined : String(count.from),
+      'data-hwio-count-template': count.template,
+      'data-hwio-count-group': count.group,
+    }
+  : {};
+---
+<div class:list={['min-w-0', className]}>
+  <p class:list={['font-bold leading-[1.2] tracking-[-0.02em] tabular-nums text-balance', SIZE[size]]}>
+    <span class:list={[gradient && 'hwio-key-figure']} {...countAttrs}>{value}</span>
+  </p>
+  <p class="hwio-muted mt-2 max-w-[22rem] text-[0.9375rem] leading-[1.45]">{label}</p>
+</div>
+<script>
+  import { hwioCounterRuntime } from '@hubpav/hwio-web-runtime/counter';
+  hwioCounterRuntime();
+</script>

package/src/components/HWioLanguageSwitcher.astro

@@ -1,4 +1,10 @@
 ---
+/**
+ * Language switcher: `pills` (a joined row of language codes, for the drawer) or `dropdown` (a
+ * `<details>` menu). The dropdown closes on a click outside, on Escape (focus back on its summary),
+ * when focus leaves it and when another popup opens (a mega panel, the drawer, another dropdown);
+ * opening it closes an open mega panel (@hubpav/hwio-web-runtime/dropdown).
+ */
 import HWioIcon from './HWioIcon.astro';
 interface Item { code: string; label: string; href: string; current?: boolean }
 interface Props { items: Item[]; label: string; variant?: 'pills' | 'dropdown'; class?: string }
@@ -12,7 +18,7 @@ const current = items.find((i) => i.current);
     ))}
   </nav>
 ) : (
-  <details class:list={['dropdown dropdown-end', className]}>
+  <details class:list={['dropdown dropdown-end', className]} data-hwio-dropdown>
     <summary class="btn btn-ghost btn-sm gap-1" title={label}>
       <HWioIcon name="globe" size="sm" />
       {/* The accessible name contains the visible code (WCAG 2.5.3), so the label is visually hidden text, not aria-label. */}
@@ -27,3 +33,7 @@ const current = items.find((i) => i.current);
     </ul>
   </details>
 )}
+<script>
+  import { hwioDropdownRuntime } from '@hubpav/hwio-web-runtime/dropdown';
+  hwioDropdownRuntime();
+</script>

package/src/components/HWioLogoStrip.astro

@@ -10,7 +10,7 @@ const groups = marquee ? [0, 1, 2, 3] : [0];
 const SIZE = { xs: 'h-6', sm: 'h-7', md: 'h-7', lg: 'h-10', xl: 'h-12' } as const;
 ---
 <section id={id} class:list={['overflow-hidden border-y border-base-300 py-10', TONE[tone], className]}>
-  {label && <div class="container"><p class="mb-8 text-center text-sm font-semibold opacity-70">{label}</p></div>}
+  {label && <div class="container"><p class="hwio-weight-label mb-8 text-center text-sm opacity-70">{label}</p></div>}
   <div class="relative">
     {marquee && <div class:list={['pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-gradient-to-r to-transparent md:w-32', FADE[tone]]}></div>}
     {marquee && <div class:list={['pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-gradient-to-l to-transparent md:w-32', FADE[tone]]}></div>}