@hubpav/hwio-ui 0.3.0 → 0.4.0

package/package.json

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

package/src/components/HWioFaq.astro

@@ -1,14 +1,16 @@
 ---
 /** 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 }
+/** An answer is one paragraph, or several as an array. */
+interface Props { items: { q: string; a: string | 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 } })) };
+const paragraphs = (a: string | string[]) => (Array.isArray(a) ? a : [a]);
+const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: items.map((i) => ({ '@type': 'Question', name: i.q, acceptedAnswer: { '@type': 'Answer', text: paragraphs(i.a).join(' ') } })) };
 ---
 <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>
+      <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>
   ))}
 </div>

package/src/components/HWioHeader.astro

@@ -19,10 +19,12 @@ interface Props {
   labels: { nav: string; menu: string; close: string; theme?: string; languages?: string };
   /** Viewport from which the inline nav and CTAs replace the drawer (default lg; xl for long navs). */
   desktopFrom?: 'lg' | 'xl';
+  /** Desktop language control: dropdown (default) or inline pills (two-language sites). */
+  languageVariant?: 'dropdown' | 'pills';
   id?: string;
   class?: string;
 }
-const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
+const { nav, ctas = [], languages = [], showThemeToggle = true, scrollspy = false, labels, desktopFrom = 'lg', languageVariant = 'dropdown', id = 'hwio-nav-drawer', class: className = '' } = Astro.props;
 const BREAK = {
   lg: { nav: 'hidden flex-1 justify-center lg:flex', ctas: 'hidden items-center gap-2 lg:flex', drawer: 'drawer drawer-end w-auto lg:hidden' },
   xl: { nav: 'hidden flex-1 justify-center xl:flex', ctas: 'hidden items-center gap-2 xl:flex', drawer: 'drawer drawer-end w-auto xl:hidden' },
@@ -57,7 +59,7 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
 
     <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'} />}
+      {languages.length > 1 && <HWioLanguageSwitcher items={languages} label={labels.languages ?? 'Language'} variant={languageVariant} />}
       <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}>

package/src/components/HWioPricingTiers.astro

@@ -2,7 +2,7 @@
 import type { HWioCta } from '../types';
 import HWioButton from './HWioButton.astro';
 import HWioIcon from './HWioIcon.astro';
-interface Tier { eyebrow?: string; name: string; price?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
+interface Tier { eyebrow?: string; name: string; price?: string; pricePrefix?: string; period?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
 interface Props { tiers: Tier[]; class?: string }
 const { tiers, 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', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
@@ -15,9 +15,15 @@ const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
         {tier.eyebrow && <p class="hwio-kicker">{tier.eyebrow}</p>}
         <div class="flex items-start justify-between gap-2">
           <h3 class="card-title text-[1.375rem]">{tier.name}</h3>
-          {tier.badge && <span class="badge badge-primary">{tier.badge}</span>}
+          {tier.badge && <span class="badge badge-primary shrink-0 whitespace-nowrap">{tier.badge}</span>}
         </div>
-        {tier.price && <p class="text-3xl font-bold">{tier.price}</p>}
+        {tier.price && (
+          <p class="flex flex-wrap items-baseline gap-x-1.5">
+            {tier.pricePrefix && <span class="hwio-muted text-sm">{tier.pricePrefix}</span>}
+            <span class="text-3xl font-bold tracking-tight">{tier.price}</span>
+            {tier.period && <span class="hwio-muted text-sm">{tier.period}</span>}
+          </p>
+        )}
         {tier.description && <p class="opacity-80">{tier.description}</p>}
         <ul class="my-4 space-y-2 text-sm">
           {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="mt-0.5 shrink-0 text-accent" /><span>{f}</span></li>)}