@hubpav/hwio-ui 0.7.7 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubpav/hwio-ui",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "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.7.7",
-    "@hubpav/hwio-web-runtime": "0.7.7",
-    "@hubpav/hwio-web-worker": "0.7.7",
+    "@hubpav/hwio-brand": "0.7.8",
+    "@hubpav/hwio-web-runtime": "0.7.8",
+    "@hubpav/hwio-web-worker": "0.7.8",
     "daisyui": "5.7.47"
   },
   "peerDependencies": {

package/src/components/HWioChoiceCards.astro

@@ -6,7 +6,7 @@ import HWioIcon from './HWioIcon.astro';
 interface Choice { label: string; title: string; text: string; points?: string[]; cta: HWioCta }
 interface Props { items: Choice[]; lead?: number; class?: string }
 const { items, lead = 0, 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' } as const;
+const COLS = { 1: 'grid grid-cols-1 gap-6', 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-3' } as const;
 const cols = COLS[(Math.min(Math.max(items.length, 1), 3) as 1 | 2 | 3)];
 ---
 <div class:list={[cols, 'mx-auto max-w-[65rem]', className]}>

package/src/components/HWioContactSection.astro

@@ -16,7 +16,7 @@ interface Props {
 const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: className = '' } = Astro.props;
 ---
 <HWioSection id={id} tone={tone} class={className}>
-  <div class="grid gap-12 lg:grid-cols-[2fr_3fr]">
+  <div class="grid grid-cols-1 gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
     <div>
       <HWioSectionHeader eyebrow={eyebrow} title={title} lead={lead} align="left" />
       {person && (

package/src/components/HWioFeatureGrid.astro

@@ -1,7 +1,7 @@
 ---
 import HWioFeatureCard from './HWioFeatureCard.astro';
 interface Props { items: { title: string; text: string; icon?: string; href?: string }[]; columns?: 2 | 3 | 4; class?: string }
-const COLS = { 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-2 lg:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
+const COLS = { 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3', 4: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
 const { items, columns = 3, class: className = '' } = Astro.props;
 ---
 <div class:list={[COLS[columns], className]}>

package/src/components/HWioFooter.astro

@@ -37,8 +37,8 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
 
   <div class="container py-12 lg:py-16">
     {/* Long compound words (DE "Datenschutzerklärung", "Rechtsdokumente") are wider than a column on
-        phones and at 1024 px: hyphenate them, words under 12 letters stay whole. */}
-    <div class="grid grid-cols-2 gap-8 break-words hyphens-auto [hyphenate-limit-chars:12_5_5] md:grid-cols-3 lg:grid-cols-6">
+        phones and at 1024 px: hyphenate them; words under 10 letters (brand names) stay whole. */}
+    <div class="grid grid-cols-2 gap-8 hwio-hyphenate md:grid-cols-3 lg:grid-cols-6">
       <div class="hidden md:col-span-3 md:flex lg:col-span-1 lg:block">
         <slot name="logo" />
       </div>

package/src/components/HWioHeroSplit.astro

@@ -8,7 +8,7 @@ const { id, eyebrow, title, accent, lead, actions = [], checklist = [], reverse
 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 items-center gap-12 py-16 lg:grid-cols-[7fr_5fr] lg:gap-16 lg:py-24', reverse ? 'lg:[&>*:first-child]:order-2' : '']}>
+  <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>
       {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>

package/src/components/HWioHubSpotForm.astro

@@ -17,7 +17,7 @@ interface Props {
   class?: string;
 }
 const { form, fields, labels, locale, turnstileSiteKey, layout = 'grid', class: className = '' } = Astro.props;
-const LAYOUT = { grid: 'grid gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3 sm:flex-row sm:items-end' } as const;
+const LAYOUT = { grid: 'grid grid-cols-1 gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3 sm:flex-row sm:items-end' } as const;
 ---
 <form
   class:list={['hwio-form', className]}

package/src/components/HWioPricingTiers.astro

@@ -5,7 +5,7 @@ import HWioIcon from './HWioIcon.astro';
 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;
+const COLS = { 1: 'grid grid-cols-1 gap-6', 2: 'grid grid-cols-1 gap-6 md:grid-cols-2', 3: 'grid grid-cols-1 gap-6 md:grid-cols-3', 4: 'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
 const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
 ---
 <div class:list={[COLS[cols], className]}>

package/src/components/HWioProcessSteps.astro

@@ -3,7 +3,7 @@
 /** `number` overrides the rendered ordinal (sites whose copy numbers steps "01", "02"…). */
 interface Props { items: { title: string; text: string; number?: string }[]; orientation?: 'horizontal' | 'vertical'; class?: string }
 const { items, orientation = 'horizontal', class: className = '' } = Astro.props;
-const LAYOUT = { horizontal: 'grid gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid gap-8' } as const;
+const LAYOUT = { horizontal: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid grid-cols-1 gap-8' } as const;
 ---
 <ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
   {items.map((step, i) => (

package/src/components/HWioSectionHeader.astro

@@ -6,7 +6,7 @@ const { eyebrow, title, lead, align = 'center', layout = 'stack', level = 2, cla
 const Heading = `h${level}` as 'h1' | 'h2' | 'h3';
 ---
 {layout === 'split' ? (
-  <div class:list={['grid gap-8 lg:grid-cols-[5fr_7fr] lg:items-end', className]}>
+  <div class:list={['grid grid-cols-1 gap-8 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:items-end', className]}>
     <div>
       {eyebrow && <p class="hwio-kicker mb-4">{eyebrow}</p>}
       <Heading><slot name="title">{title}</slot></Heading>

package/src/components/HWioStatsBand.astro

@@ -6,7 +6,7 @@ const COLS = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-2 lg:g
 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]}>
+  <div class:list={['container grid grid-cols-1 py-9', cols]}>
     {items.map((s, i) => {
       const numeric = typeof s.value === 'number';
       return (

package/src/styles/styles.css

@@ -20,6 +20,19 @@
   --font-sans: var(--hwio-font-sans);
 }
 
+/* Long words (CS/DE/PL compounds) hyphenate instead of overflowing a narrow column. At least five
+   letters on each side of the hyphen, so no word under 10 letters ever splits; this keeps the brand
+   names whole (HARDWARIO, ProXimos, CHESTER) in Safari too, which ignores hyphenate-limit-chars and
+   reads only the -webkit- limits. A word no browser can hyphenate still breaks rather than widening
+   its grid or flex parent (`anywhere` lowers min-content). */
+@utility hwio-hyphenate {
+  overflow-wrap: anywhere;
+  hyphens: auto;
+  hyphenate-limit-chars: 10 5 5;
+  -webkit-hyphenate-limit-before: 5;
+  -webkit-hyphenate-limit-after: 5;
+}
+
 /* 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. */
@@ -68,6 +81,16 @@
   @media (width >= 64rem) {
     h1 { font-size: 3.5rem; }
   }
+  /* Phones: a heading word wider than its column (a 40 px H1 gets 218-288 px) hyphenates instead
+     of running past the screen, and a token longer than the line (a URL, an ID) breaks. */
+  @media (width < 40rem) {
+    h1, h2, h3 {
+      @apply hwio-hyphenate;
+    }
+    main {
+      overflow-wrap: break-word;
+    }
+  }
   :focus-visible {
     outline: 2px solid var(--color-secondary);
     outline-offset: 2px;
@@ -83,6 +106,16 @@
 }
 
 @layer components {
+  /* Phones: a button label wider than its column wraps onto a second line instead of pushing the
+     page sideways; one-line buttons keep their height. */
+  @media (width < 40rem) {
+    .btn {
+      max-width: 100%;
+      height: auto;
+      min-height: var(--size);
+      padding-block: 0.375rem;
+    }
+  }
   /* Rhythm (direction A): 80 / 112 px sections, 40 / 48 px compact bands. */
   .hwio-section { padding-block: calc(var(--spacing) * 20); }
   .hwio-section-compact { padding-block: calc(var(--spacing) * 10); }