@hubpav/hwio-ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.3.0",
+  "version": "0.5.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.5.0",
+    "@hubpav/hwio-web-runtime": "0.5.0",
+    "@hubpav/hwio-web-worker": "0.5.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/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>)}

package/src/components/HWioThemeToggle.astro

@@ -11,10 +11,6 @@ const { label, class: className = '' } = Astro.props;
   .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: none; }
   :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
   :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
-  @media (prefers-color-scheme: dark) {
-    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
-    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
-  }
 </style>
 <script>
   import { hwioThemeRuntime } from '@hubpav/hwio-web-runtime/theme';

package/src/html.ts

@@ -10,6 +10,8 @@ export interface HWioHtmlOptions {
   /** Pin data-theme on <html> (single-theme sites such as enerooo, or a fixed catalog page). */
   pinTheme?: boolean;
   font?: { family: string; sample?: string; sampleExt?: string } | null;
+  /** Share the light/dark choice across a domain's sites through a first-party cookie (e.g. '.hardwario.com'). */
+  themeCookieDomain?: string;
   class?: string;
 }
 
@@ -21,6 +23,7 @@ export function hwioHtmlAttrs(o: HWioHtmlOptions): Record<string, string> {
     'data-hwio-theme-light': o.themes.light,
   };
   if (o.themes.dark) attrs['data-hwio-theme-dark'] = o.themes.dark;
+  if (o.themeCookieDomain) attrs['data-hwio-theme-cookie-domain'] = o.themeCookieDomain;
   if (o.pinTheme || !o.themes.dark) attrs['data-theme'] = o.themes.light;
   if (o.font) {
     attrs['data-hwio-font-family'] = o.font.family;

package/src/styles/styles.css

@@ -195,10 +195,6 @@
   .hwio-logo-grey:hover { filter: none; opacity: 1; }
   [data-theme$='-dark'] .hwio-logo-grey { filter: grayscale(100%) invert(1); }
   [data-theme$='-dark'] .hwio-logo-grey:hover { filter: grayscale(100%) invert(1); opacity: 1; }
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) .hwio-logo-grey { filter: grayscale(100%) invert(1); }
-    :root:not([data-theme]) .hwio-logo-grey:hover { filter: grayscale(100%) invert(1); opacity: 1; }
-  }
 
   .hwio-theme-transition,
   .hwio-theme-transition *,

package/src/styles/themes/hwio-dark.css

@@ -2,7 +2,7 @@
 @plugin "daisyui/theme" {
   name: "hwio-dark";
   default: false;
-  prefersdark: true;
+  prefersdark: false;
   color-scheme: dark;
   --color-base-100: #0f0f14;
   --color-base-200: #1a1a22;
@@ -40,10 +40,3 @@
   --hwio-container-pad: 27px;
   --hwio-kicker-on-neutral: #f43f5e;
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
-  --hwio-kicker-on-neutral: #f43f5e;
-  }
-}