@hubpav/hwio-ui 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "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",
@@ -20,7 +20,10 @@
     "./components/*": "./src/components/*",
     "./types": "./src/types.ts",
     "./schemas": "./src/schemas.ts",
-    "./integration": "./src/integration.mjs",
+    "./integration": {
+      "types": "./src/integration.d.mts",
+      "default": "./src/integration.mjs"
+    },
     "./package.json": "./package.json",
     "./html": "./src/html.ts"
   },
@@ -28,9 +31,9 @@
     "build": "node scripts/build-themes.mjs"
   },
   "dependencies": {
-    "@hubpav/hwio-brand": "0.1.0",
-    "@hubpav/hwio-web-runtime": "0.1.0",
-    "@hubpav/hwio-web-worker": "0.1.0",
+    "@hubpav/hwio-brand": "0.1.3",
+    "@hubpav/hwio-web-runtime": "0.1.3",
+    "@hubpav/hwio-web-worker": "0.1.3",
     "daisyui": "5.7.28"
   },
   "peerDependencies": {

package/src/components/HWioCookieConsent.astro

@@ -31,8 +31,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
         </p>
       </div>
       <div class="flex flex-col gap-2 sm:flex-row md:shrink-0">
-        <button type="button" data-hwio-consent-reject class="btn btn-outline btn-secondary">{labels.rejectAll}</button>
-        {variant === 'categories' && labels.customize && <button type="button" data-hwio-consent-customize class="btn btn-outline btn-secondary">{labels.customize}</button>}
+        <button type="button" data-hwio-consent-reject class="btn btn-outline btn-primary">{labels.rejectAll}</button>
+        {variant === 'categories' && labels.customize && <button type="button" data-hwio-consent-customize class="btn btn-outline btn-primary">{labels.customize}</button>}
         <button type="button" data-hwio-consent-accept class="btn btn-primary">{labels.acceptAll}</button>
       </div>
     </div>
@@ -73,8 +73,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
           ))}
         </div>
         <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <button type="button" data-hwio-consent-reject class="btn btn-outline btn-secondary">{labels.rejectAll}</button>
-          <button type="button" data-hwio-consent-save class="btn btn-outline btn-secondary">{labels.save}</button>
+          <button type="button" data-hwio-consent-reject class="btn btn-outline btn-primary">{labels.rejectAll}</button>
+          <button type="button" data-hwio-consent-save class="btn btn-outline btn-primary">{labels.save}</button>
           <button type="button" data-hwio-consent-accept class="btn btn-primary">{labels.acceptAll}</button>
         </div>
       </div>

package/src/components/HWioFooter.astro

@@ -20,14 +20,14 @@ interface Props {
   class?: string;
 }
 const { columns, social = [], branches, legal = [], cookieSettingsLabel, sites, copyright, tagline, class: className = '' } = Astro.props;
-const linkClass = 'link link-hover inline-flex items-center gap-1';
+const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transition-colors hover:text-accent';
 ---
 <footer class:list={['bg-neutral text-neutral-content', className]} data-hwio-footer>
   {social.length > 0 && (
     <div class="border-b border-neutral-content/10">
       <div class="container flex justify-center gap-6 py-6">
         {social.filter((s) => s.icon !== 'forum').map((s) => (
-          <a href={s.href} target="_blank" rel="noopener noreferrer" class="hover:text-accent transition-colors" aria-label={s.label}>
+          <a href={s.href} target="_blank" rel="noopener noreferrer" class="text-neutral-content transition-colors hover:text-accent" aria-label={s.label}>
             <HWioIcon name={s.icon} class="size-9" />
           </a>
         ))}
@@ -74,7 +74,7 @@ const linkClass = 'link link-hover inline-flex items-center gap-1';
             {legal.map((l) => (
               <li><a href={l.href} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} class={linkClass}>{l.label}{l.external && <HWioIcon name="download" size="sm" />}</a></li>
             ))}
-            {cookieSettingsLabel && <li><button type="button" data-hwio-cookie-settings class="link link-hover text-left">{cookieSettingsLabel}</button></li>}
+            {cookieSettingsLabel && <li><button type="button" data-hwio-cookie-settings class="text-left text-neutral-content/80 transition-colors hover:text-accent">{cookieSettingsLabel}</button></li>}
           </ul>
         </div>
       )}

package/src/components/HWioFooterSites.astro

@@ -9,7 +9,7 @@ const { items, label, class: className = '' } = Astro.props;
     {items.map((site, i) => (
       <>
         {i > 0 && <span class="opacity-50" aria-hidden="true">&middot;</span>}
-        <a href={site.href} target="_blank" rel="noopener noreferrer" class="link link-hover">{site.label}</a>
+        <a href={site.href} target="_blank" rel="noopener noreferrer" class="text-neutral-content/80 transition-colors hover:text-accent">{site.label}</a>
       </>
     ))}
   </nav>

package/src/components/HWioHeader.astro

@@ -30,7 +30,7 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
     </div>
 
     <nav class="hidden flex-1 justify-center lg:flex" aria-label={labels.nav} data-hwio-scrollspy={scrollspy ? 'true' : undefined}>
-      <ul class="menu menu-horizontal gap-1 px-1">
+      <ul class="menu menu-horizontal flex-nowrap gap-0 px-0 whitespace-nowrap">
         {nav.map((item) => (
           <li>
             {item.mega ? (
@@ -41,7 +41,7 @@ const CTA_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost'
                 </div>
               </details>
             ) : (
-              <a href={item.href} class="text-[15px] font-medium text-base-content/80 hover:text-accent" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
+              <a href={item.href} class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
             )}
           </li>
         ))}

package/src/components/HWioLanguageSwitcher.astro

@@ -8,7 +8,7 @@ const current = items.find((i) => i.current);
 {variant === 'pills' ? (
   <nav aria-label={label} class:list={['join', className]}>
     {items.map((i) => (
-      <a href={i.href} hreflang={i.code} lang={i.code} class:list={['btn btn-sm join-item', i.current ? 'btn-primary' : 'btn-ghost']} aria-current={i.current ? 'page' : undefined}>{i.label}</a>
+      <a href={i.href} hreflang={i.code} lang={i.code} class:list={['btn btn-sm join-item', i.current ? 'btn-primary' : 'btn-ghost']} aria-current={i.current ? 'page' : undefined} title={i.label} aria-label={i.label}><span class="uppercase">{i.code}</span></a>
     ))}
   </nav>
 ) : (
@@ -20,7 +20,7 @@ const current = items.find((i) => i.current);
     </summary>
     <ul class="menu dropdown-content bg-base-100 rounded-box z-50 mt-2 w-44 p-2 shadow-lg border border-base-300" aria-label={label}>
       {items.map((i) => (
-        <li><a href={i.href} hreflang={i.code} lang={i.code} class:list={[i.current ? 'menu-active' : '']} aria-current={i.current ? 'page' : undefined}>{i.label}</a></li>
+        <li><a href={i.href} hreflang={i.code} lang={i.code} class:list={[i.current ? 'menu-active' : '']} aria-current={i.current ? 'page' : undefined}>{i.label.toLowerCase() !== i.code.toLowerCase() && <span class="w-6 text-xs font-semibold uppercase opacity-60">{i.code}</span>}<span>{i.label}</span></a></li>
       ))}
     </ul>
   </details>

package/src/components/HWioStatsBand.astro

@@ -2,8 +2,8 @@
 /** Proof numbers in a hairline band with dividers (direction A); counts up on first view unless `animate` is false. */
 interface Props { id?: string; items: { value: string | number; suffix?: string; label: string; description?: string }[]; animate?: boolean; class?: string }
 const { id, items, animate = true, class: className = '' } = Astro.props;
-const COLS = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' } as const;
-const cols = COLS[(Math.min(Math.max(items.length, 2), 4) as 2 | 3 | 4)];
+const COLS = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4', 5: 'sm:grid-cols-2 lg:grid-cols-5' } as const;
+const cols = COLS[(Math.min(Math.max(items.length, 2), 5) as 2 | 3 | 4 | 5)];
 ---
 <section id={id} class:list={['border-y border-base-300 bg-base-100 text-base-content', className]}>
   <div class:list={['container grid py-9', cols]}>
@@ -11,7 +11,7 @@ const cols = COLS[(Math.min(Math.max(items.length, 2), 4) as 2 | 3 | 4)];
       const numeric = typeof s.value === 'number';
       return (
         <div class:list={['px-8 py-2', i > 0 ? 'sm:border-l sm:border-base-300' : '']}>
-          <div class="mb-2.5 text-[2.5rem] font-bold leading-none tracking-[-0.03em]">
+          <div class="mb-2.5 text-[2.25rem] font-bold leading-none tracking-[-0.03em] lg:text-[2.5rem]">
             <span class="hwio-stat-value" data-hwio-counter={animate && numeric ? 'true' : undefined} data-target={numeric ? String(s.value) : undefined} data-suffix={s.suffix ?? ''}>{s.value}{s.suffix ?? ''}</span>
           </div>
           <div class="text-[15px] font-semibold">{s.label}</div>

package/src/integration.d.mts

@@ -0,0 +1,9 @@
+import type { AstroIntegration } from 'astro';
+import type { HWioHeadersOptions } from '@hubpav/hwio-web-worker/headers';
+export interface HWioUiOptions {
+  /** Security headers written into `_headers` at build time; `false` leaves the site's own file alone. */
+  headers?: HWioHeadersOptions | false;
+  /** Serve the brand fonts and logos in dev and copy them into the build output. */
+  assets?: boolean;
+}
+export function hwioUi(options?: HWioUiOptions): AstroIntegration;

package/src/styles/styles.css

@@ -20,8 +20,10 @@
   --font-sans: var(--hwio-font-sans);
 }
 
-/* One container for the fleet; width comes from the theme (hub) or the site (landing). */
-@utility container {
+/* One container for the fleet; width comes from the theme (hub) or the site (landing).
+   Unlayered on purpose: Tailwind's built-in `container` utility caps max-width at each
+   breakpoint (40/48/64/80/96rem) and would otherwise win over the theme's width. */
+.container {
   width: 100%;
   margin-inline: auto;
   max-width: var(--hwio-container);