@hubpav/hwio-ui 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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.8.0",
-    "@hubpav/hwio-web-runtime": "0.8.0",
-    "@hubpav/hwio-web-worker": "0.8.0",
+    "@hubpav/hwio-brand": "0.9.1",
+    "@hubpav/hwio-web-runtime": "0.9.1",
+    "@hubpav/hwio-web-worker": "0.9.1",
     "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/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/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';
@@ -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.
@@ -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">
@@ -25,7 +32,7 @@ const VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } a
       )}
       <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/HWioMegaLinks.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * A group of links for HWioHeader's `mega:<key>` panels (owner, 2026-10-30): an optional caps title
+ * with an "all" link on its line, then links with a one-line description. Labels never wrap; the
+ * descriptions are small (13 px), Regular, Gray and balanced, so siblings read as equals. `columns` is
+ * fixed: the panel shows only from the header's desktop breakpoint, and a column count that grows with
+ * the viewport (three at 2xl) squeezed descriptions into broken lines. Products may carry a thumbnail
+ * (a cut-out with the shared product shadow).
+ */
+import type { HWioLinkItem } from '../types';
+import HWioIcon from './HWioIcon.astro';
+interface Item extends HWioLinkItem {
+  description?: string;
+  /** A product thumbnail (cut-out on a transparent ground); decorative, the label names the product. */
+  image?: string;
+}
+interface Props {
+  title?: string;
+  all?: HWioLinkItem;
+  items: Item[];
+  columns?: 1 | 2 | 3;
+  /** data-track-location for the links (default "header-menu"). */
+  trackLocation?: string;
+  class?: string;
+}
+const { title, all, items, columns = 1, trackLocation = 'header-menu', class: className = '' } = Astro.props;
+const COLUMNS = { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3' } as const;
+const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {});
+---
+<div class:list={['min-w-0', className]}>
+  {(title || all) && (
+    <div class="mb-4 flex items-baseline justify-between gap-6 px-3">
+      {title && <p class="hwio-mega-title">{title}</p>}
+      {all && <a href={all.href} {...linkAttrs(all)} class="hwio-link hwio-weight-label whitespace-nowrap text-sm" data-track={all.track?.id} data-track-location={all.track?.location ?? trackLocation}>{all.label}</a>}
+    </div>
+  )}
+  <ul class:list={['grid gap-x-6 gap-y-1', COLUMNS[columns]]}>
+    {items.map((item) => (
+      <li class="min-w-0">
+        <a href={item.href} {...linkAttrs(item)} class="flex items-start gap-4 rounded-xl px-3 py-2.5 transition-colors hover:bg-base-200" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? trackLocation}>
+          {item.image && (
+            <span class="flex h-20 w-16 shrink-0 items-center justify-center">
+              <img src={item.image} alt="" loading="lazy" decoding="async" class="hwio-product-shadow max-h-full max-w-full object-contain" />
+            </span>
+          )}
+          <span class="min-w-0 flex-1">
+            <span class="hwio-mega-label">{item.label}{item.external && <HWioIcon name="arrow-up-right" size="sm" class="opacity-50" />}</span>
+            {item.description && <span class="hwio-menu-desc mt-0.5 block">{item.description}</span>}
+          </span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</div>

package/src/components/HWioPhoto.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * A photograph at a fixed aspect ratio, filling its frame (object-fit: cover; `focus` picks the
+ * part that stays in view). Photographs come from the artwork library, clearance public (Brand
+ * Guidelines chapter 08: photographs prove). For a product on a transparent ground use HWioCutout.
+ */
+import type { HWioAspect, HWioMedia } from '../types';
+interface Props {
+  image: HWioMedia;
+  aspect?: HWioAspect;
+  rounded?: 'none' | 'xl' | '2xl';
+  focus?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  /** Above the fold: load at once with high priority. */
+  eager?: boolean;
+  class?: string;
+  imgClass?: string;
+}
+const { image, aspect = '4/3', rounded = '2xl', focus = 'center', 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 FOCUS = { center: 'object-center', top: 'object-top', bottom: 'object-bottom', left: 'object-left', right: 'object-right' } as const;
+---
+<div class:list={['relative overflow-hidden bg-base-200', ASPECT[aspect], ROUNDED[rounded], className]}>
+  <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={['absolute inset-0 h-full w-full object-cover', FOCUS[focus], imgClass]}
+  />
+</div>

package/src/components/HWioReveal.astro

@@ -0,0 +1,15 @@
+---
+/**
+ * Starts the scroll reveal on the page (@hubpav/hwio-web-runtime/reveal). Render it once, in the layout
+ * of pages that mark content with `data-hwio-reveal` (HWioSection `reveal`, HWioApplicationTile
+ * `reveal`, a site's own markup). Renders nothing.
+ *
+ * Fail-safe: content waiting for its reveal hides only after this runtime has started; without it the
+ * content simply shows. Each element fades in and settles once, the first time it enters the viewport;
+ * `data-hwio-reveal-delay="<ms>"` staggers siblings. Under prefers-reduced-motion everything shows at once.
+ */
+---
+<script>
+  import { hwioRevealRuntime } from '@hubpav/hwio-web-runtime/reveal';
+  hwioRevealRuntime();
+</script>

package/src/components/HWioSection.astro

@@ -1,4 +1,5 @@
 ---
+/** Section with the system rhythm, tone and container. `reveal` fades it in once in view; the reveal runs only with HWioReveal on the page (fail-safe: without it the section simply shows). */
 import type { HWioTone } from '../types';
 interface Props { id?: string; tone?: HWioTone; spacing?: 'normal' | 'compact' | 'none'; container?: boolean; as?: 'section' | 'div' | 'article'; reveal?: boolean; class?: string; [key: string]: unknown }
 const TONE = { base: 'bg-base-100 text-base-content hwio-tone-base', alt: 'bg-base-200 text-base-content hwio-tone-alt', neutral: 'bg-neutral text-neutral-content hwio-tone-neutral' } as const;

package/src/components/HWioStoryCard.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Customer-story card: a field photograph under the guidelines' scrim (chapter 08), the customer as a
+ * caps kicker and what they built as the title, White type over the dark, calm bottom of the frame;
+ * the whole card links to the case study (its title underlines on hover and focus, the arrow nudges).
+ * Pass the photograph as `image`, or your own picture in the `media` slot. Logos stay out: the card
+ * names the customer in text (the kicker) only when consent or a published case study allows it.
+ */
+import type { HWioAspect, HWioMedia, HWioTrack } from '../types';
+import HWioPhoto from './HWioPhoto.astro';
+interface Props {
+  href: string;
+  kicker: string;
+  title: string;
+  /** The link line under the title ("Read the story"). */
+  linkLabel: string;
+  image?: HWioMedia;
+  aspect?: HWioAspect;
+  focus?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  track?: HWioTrack;
+  eager?: boolean;
+  class?: string;
+}
+const { href, kicker, title, linkLabel, image, aspect = '4/5', focus = 'center', headingLevel = 'h3', track, eager = false, class: className = '' } = Astro.props;
+const Heading = headingLevel;
+---
+<a href={href} class:list={['hwio-card-link group relative block overflow-hidden rounded-2xl text-white', className]} data-track={track?.id} data-track-location={track?.location}>
+  <slot name="media">
+    {image && <HWioPhoto image={image} aspect={aspect} focus={focus} rounded="2xl" eager={eager} imgClass="transition-transform duration-500 ease-out group-hover:scale-[1.02] motion-reduce:transition-none" />}
+  </slot>
+  <div class="hwio-scrim pointer-events-none absolute inset-0 rounded-2xl"></div>
+  <div class="absolute inset-x-0 bottom-0 p-6 lg:p-7">
+    <p class="hwio-kicker text-[var(--hwio-kicker-on-neutral,#d1d5db)]">{kicker}</p>
+    <Heading class="hwio-role-title hwio-card-title mt-2 text-white">{title}</Heading>
+    <p class="hwio-weight-label mt-3 text-[0.9375rem] text-white">{linkLabel}<span aria-hidden="true" class="hwio-arrow ml-1.5">→</span></p>
+  </div>
+</a>

package/src/styles/styles.css

@@ -262,17 +262,49 @@
   [data-hs-status].hs-status-success { color: var(--color-success); }
   [data-hs-status].hs-status-error { color: var(--color-error); }
 
-  /* Scroll reveal: visible at rest for no-JS, animates in once the runtime marks it. */
-  .js [data-hwio-reveal]:not([data-hwio-revealed]) {
+  /* Scroll reveal, fail-safe (owner, 2026-10-30): content waiting for its reveal hides only once the
+     reveal runtime has started (html.hwio-reveal-on, set by @hubpav/hwio-web-runtime/reveal). Without
+     JavaScript, before the runtime runs, or if it never loads, everything shows. Hiding is instant;
+     revealing fades in and settles once (web layer: ease-out, 400 ms at most, 24 px travel). A page
+     can calm it with --hwio-reveal-duration and --hwio-reveal-travel. Stagger siblings with
+     data-hwio-reveal-delay="<ms>" (the runtime applies it). */
+  html.hwio-reveal-on [data-hwio-reveal]:not([data-hwio-revealed]) {
     opacity: 0;
-    transform: translateY(24px);
-  }
-  [data-hwio-reveal] {
-    transition: opacity var(--hwio-motion-reveal, 0.6s) ease-out, transform var(--hwio-motion-reveal, 0.6s) ease-out;
+    transform: translateY(var(--hwio-reveal-travel, 24px));
   }
   [data-hwio-reveal][data-hwio-revealed] {
     opacity: 1;
     transform: none;
+    transition:
+      opacity var(--hwio-reveal-duration, var(--hwio-motion-reveal, 0.6s)) var(--hwio-motion-easing, ease-out),
+      transform var(--hwio-reveal-duration, var(--hwio-motion-reveal, 0.6s)) var(--hwio-motion-easing, ease-out);
+  }
+
+  /* Entrance of a hero once the font gate has shown the page: the children of .hwio-enter fade in and
+     settle 12 px, 60 ms apart; .hwio-enter-media follows. Pure CSS that always ends visible, and it
+     runs only after the gate has set .fonts-ready (no gate, no animation). */
+  @keyframes hwio-enter {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: none; }
+  }
+  .fonts-ready .hwio-enter > * {
+    animation: hwio-enter var(--hwio-motion-base, 300ms) var(--hwio-motion-easing, ease-out) both;
+  }
+  .fonts-ready .hwio-enter > :nth-child(2) { animation-delay: 60ms; }
+  .fonts-ready .hwio-enter > :nth-child(3) { animation-delay: 120ms; }
+  .fonts-ready .hwio-enter > :nth-child(n + 4) { animation-delay: 180ms; }
+  .fonts-ready .hwio-enter-media {
+    animation: hwio-enter var(--hwio-motion-base, 300ms) var(--hwio-motion-easing, ease-out) 120ms both;
+  }
+
+  /* The arrow of a call to action moves 3 px on hover and keyboard focus (HWioButton's arrow carries
+     it; a site marks its own arrow glyph with .hwio-arrow). */
+  .hwio-arrow {
+    display: inline-block;
+    transition: transform var(--hwio-motion-fast, 200ms) var(--hwio-motion-easing, ease-out);
+  }
+  :is(a, button):is(:hover, :focus-visible) .hwio-arrow {
+    transform: translateX(3px);
   }
 
   /* Count-up: reserve the width of the final value so the layout never jumps. */
@@ -311,10 +343,162 @@
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
   }
 
+  /* Type roles for elements whose tag is not the role's tag (a card title in an <h3>, a <p> set as H2). */
+  .hwio-role-heading {
+    font-size: var(--hwio-type-heading-size, 2rem);
+    font-weight: var(--hwio-type-heading-weight, 700);
+    line-height: var(--hwio-type-heading-leading, 1.1);
+    letter-spacing: var(--hwio-type-heading-tracking, -0.025em);
+  }
+  .hwio-role-subheading {
+    font-size: var(--hwio-type-subheading-size, 1.375rem);
+    font-weight: var(--hwio-type-subheading-weight, 700);
+    line-height: var(--hwio-type-subheading-leading, 1.2);
+    letter-spacing: var(--hwio-type-subheading-tracking, -0.01em);
+  }
+  .hwio-role-title {
+    font-size: var(--hwio-type-title-size, 1.125rem);
+    font-weight: var(--hwio-type-title-weight, 700);
+    line-height: var(--hwio-type-title-leading, 1.3);
+    letter-spacing: var(--hwio-type-title-tracking, -0.005em);
+  }
+
+  /* A long H1 (more than about eight words, an opening statement) at 36 / 44 / 48 / 52 px instead of
+     the web scale's 40 / 48 / 60 / 72 px, so it reads in three calm lines beside the hero media.
+     CHANGE REQUEST CR-7 (owner, 2026-10-30), pending the Brand Guidelines: "a long H1 may go down
+     to 48 to 56 px". Opt-in per heading; HWioHeroSplit sets it with titleSize="long". */
+  .hwio-h1-long {
+    font-size: 2.25rem;
+    line-height: var(--hwio-type-display-leading, 1.2);
+    letter-spacing: -0.02em;
+  }
+  @media (width >= 48rem) {
+    .hwio-h1-long { font-size: 2.75rem; }
+  }
+  @media (width >= 64rem) {
+    .hwio-h1-long { font-size: 3rem; }
+  }
+  @media (width >= 80rem) {
+    .hwio-h1-long { font-size: 3.25rem; }
+  }
+
+  /* The page's one gradient moment (Brand Guidelines chapter 03; D23, D33, D44): the figure gradient
+     fills the type of the key figure (.hwio-key-figure, 40 px and up) or, instead of a key figure,
+     of up to two key words of a hero H1 (.hwio-grad). The theme variable is the gradient's left three
+     quarters on white (4.5:1) and light red to Sky on the dark ground. Each word carries its own
+     gradient. .hwio-grad is CHANGE REQUEST CR-8 (owner, 2026-10-30), pending the guidelines. Themes
+     without the gradient (er3o) show plain text: the fill, not `color`, turns transparent, so the
+     fallback's currentColor is still the text colour. */
+  .hwio-key-figure,
+  .hwio-grad {
+    background-image: var(--hwio-gradient-figure, linear-gradient(currentColor, currentColor));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+  @media (forced-colors: active) {
+    .hwio-key-figure,
+    .hwio-grad {
+      background-image: none;
+      -webkit-text-fill-color: CanvasText;
+    }
+  }
+
+  /* Linked cards (web layer, States): the title underlines on hover and keyboard focus; no shadow. */
+  .hwio-card-link:is(:hover, :focus-visible) .hwio-card-title {
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+    text-decoration-thickness: 1px;
+  }
+
+  /* White type over a photograph only on the guidelines' scrim (chapter 08): clear over the top
+     third, 45 % black at 60 %, 92 % at the bottom. */
+  .hwio-scrim {
+    background-image: linear-gradient(180deg, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 0.45) 60%, rgb(0 0 0 / 0.92) 100%);
+  }
+
+  /* Product cut-outs (owner, 2026-10-30; Brand Guidelines chapter 08): one shadow recipe for every
+     product, so a row reads as one family: a tight contact shadow plus a soft ambient one; lighter on
+     the dark ground. On a common baseline (HWioCutout baseline) a blurred floor ellipse. A cut-out
+     sits whole on the Panel ground (.hwio-cutout-ground) or on the page. */
+  .hwio-product-shadow {
+    filter: drop-shadow(0 2px 2px rgb(37 37 50 / 0.16)) drop-shadow(0 12px 16px rgb(37 37 50 / 0.12));
+  }
+  [data-theme$='-dark'] .hwio-product-shadow {
+    filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.35));
+  }
+  .hwio-product-floor {
+    position: absolute;
+    left: 20%;
+    right: 20%;
+    height: 7%;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, rgb(37 37 50 / 0.18), rgb(37 37 50 / 0));
+    pointer-events: none;
+  }
+  [data-theme$='-dark'] .hwio-product-floor {
+    display: none;
+  }
+  .hwio-cutout-ground {
+    background-color: var(--color-base-200);
+  }
+  /* A drawn isometric room behind a cut-out (HWioCutout backdrop): it fills the frame (the kit's SVG
+     carries a 1 pt margin, hidden by the slight scale); the dark-theme drawing on the dark ground. */
+  .hwio-backdrop {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1.012);
+    pointer-events: none;
+  }
+  .hwio-backdrop-dark { display: none; }
+  [data-theme$='-dark'] .hwio-backdrop-light { display: none; }
+  [data-theme$='-dark'] .hwio-backdrop-dark { display: block; }
+
+  /* Menu panels (HWioMegaLinks) and the drawer's second lines (owner, 2026-10-30): a caps group title
+     in Gray, link labels that never wrap, descriptions small (13 px), Regular, Gray and balanced. */
+  .hwio-mega-title {
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
+    font-size: var(--hwio-type-kicker-size, 0.875rem);
+    font-weight: var(--hwio-type-kicker-weight, 600);
+    line-height: var(--hwio-type-kicker-leading, 1.4);
+    letter-spacing: var(--hwio-type-kicker-tracking, 0);
+    text-transform: var(--hwio-type-kicker-case, none);
+  }
+  .hwio-mega-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    white-space: nowrap;
+    color: var(--color-base-content);
+    font-size: 0.9375rem;
+    font-weight: var(--hwio-weight-label, 600);
+    line-height: 1.35;
+    transition: color var(--hwio-motion-fast, 200ms) var(--hwio-motion-easing, ease-out);
+  }
+  a:is(:hover, :focus-visible) .hwio-mega-label {
+    color: var(--hwio-nav-hover, var(--color-primary));
+  }
+  .hwio-menu-desc {
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.45;
+    text-wrap: balance;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     [data-hwio-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
     .hwio-marquee-track { animation: none; transform: none; will-change: auto; }
     .hwio-marquee-track > [aria-hidden='true'] { display: none; }
+    .fonts-ready .hwio-enter > *,
+    .fonts-ready .hwio-enter-media { animation: none; }
+    .hwio-arrow,
+    :is(a, button):is(:hover, :focus-visible) .hwio-arrow { transition: none; transform: none; }
   }
 }
 
@@ -371,6 +555,35 @@
   .hwio-nav-tight > .hwio-nav-current::after {
     inset-inline: 0.5rem;
   }
+  header:has(.hwio-nav-tight) .hwio-utility > summary.btn {
+    --fontsize: 14px;
+    font-size: 14px;
+  }
+}
+/* Header utilities (owner, 2026-10-30): HWioHeader's theme toggle and language dropdown read as quiet
+   utilities beside the nav, not as buttons: the nav's weight (Regular on the HARDWARIO themes), size
+   and 80 % ink, the nav's hover colour, the toggle's icon at 18 px (HWioIcon's 1.5 stroke), the
+   chevron as faint as the nav chevrons. Unlayered, because DaisyUI's .btn sits in the utilities layer. */
+.hwio-utility.btn,
+.hwio-utility > summary.btn {
+  --fontsize: 0.9375rem;
+  font-size: 0.9375rem;
+  font-weight: var(--hwio-weight-nav, 500);
+  letter-spacing: 0;
+  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
+  border-color: transparent;
+  box-shadow: none;
+}
+.hwio-utility.btn:hover,
+.hwio-utility > summary.btn:hover {
+  color: var(--hwio-nav-hover, var(--color-accent));
+}
+.hwio-utility.btn > svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.hwio-utility > summary.btn > svg:last-child {
+  opacity: 0.5;
 }
 /* DaisyUI 5.7.30+ also gives pressed buttons (aria-pressed / aria-checked) a filled ground. A ghost
    toggle shows its state in its own content (HWioThemeToggle swaps moon and sun and sets
@@ -380,3 +593,16 @@
   --btn-bg: #0000;
   --btn-border: #0000;
 }
+/* Forms on the brand type scale (owner, 2026-11-01; website-admin DESIGN-SYSTEM.md, web layer type table: "Form
+   label 15 Bold", "Form field text 16 Regular"). DaisyUI's 12 px Semibold field labels and 14 px fields sat below
+   the body text, and iPhones zoom into a focused field whose text is under 16 px. Unlayered, so it wins over
+   DaisyUI's component layer. */
+.fieldset-legend {
+  font-size: 0.9375rem;
+  font-weight: var(--hwio-weight-label, 700);
+}
+.input,
+.select,
+.textarea {
+  font-size: 1rem;
+}

package/src/types.ts

@@ -21,6 +21,15 @@ export interface HWioMedia {
   sizes?: string;
 }
 
+/** Frame proportions shared by HWioPhoto, HWioCutout and the cards built on them. */
+export type HWioAspect = '1/1' | '4/3' | '3/2' | '16/9' | '4/5' | '3/4';
+
+/** A drawn isometric room behind a product cut-out (artwork library), with its dark-theme drawing. */
+export interface HWioBackdrop {
+  light: string;
+  dark?: string;
+}
+
 export interface HWioCta extends HWioLinkItem {
   /** Visual weight; primary is the DaisyUI btn-primary fill. */
   variant?: 'primary' | 'secondary' | 'ghost';