fragment-headless-sdk 2.4.0 → 2.4.3

package/dist/components/Hero/DesktopHero.js

@@ -23,7 +23,7 @@ export default function DesktopHero({ buttonHref, content, colors, contentWidthC
         /* Image Background */
         content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "absolute inset-0 z-0 object-cover w-full h-full" }))),
         React.createElement("div", { className: `relative z-10 mx-auto flex h-full max-w-screen-xl flex-col justify-center px-10 ${getPositionClasses()} xl:px-4` },
-            React.createElement("div", { className: joinClassNames("max-w-full flex flex-col", contentSpacing ?? "gap-4", contentWidthClass || DEFAULT_CONTENT_WIDTH_CLASS) },
+            React.createElement("div", { className: joinClassNames("max-w-full flex flex-col items-start", contentSpacing ?? "gap-4", contentWidthClass || DEFAULT_CONTENT_WIDTH_CLASS) },
                 renderText({
                     fontSize: typography.title.fontSize,
                     lineHeight: typography.title.lineHeight,

package/dist/types/announcement.d.ts

@@ -22,6 +22,7 @@ export interface IAnnouncement {
     name: string;
     status: AnnouncementStatus;
     content: IAnnouncementContent | null;
+    page_order: number | null;
     active_duration_seconds: number | null;
     active_start_date: string | null;
     active_end_date: string | null;

package/dist/types/hero.d.ts

@@ -26,6 +26,7 @@ export interface IHero {
     name: string;
     type: HeroType;
     page: ShopPage["handle"] | null;
+    page_order: number | null;
     status: HeroStatus;
     content: IHeroContent | null;
     active_duration_seconds: number | null;

package/dist/utils/hero-resolvers.js

@@ -127,7 +127,7 @@ export function renderText({ fontSize, lineHeight, text, className, color, font,
     if (!text || text.trim().length === 0) {
         return null;
     }
-    const baseClasses = "drop-shadow-lg";
+    const baseClasses = "drop-shadow-lg max-w-full break-words";
     const combinedClasses = className
         ? `${baseClasses} ${fontSize} ${lineHeight} ${className}`
         : `${baseClasses} ${fontSize} ${lineHeight}`;

package/dist/utils/styling.js

@@ -18,6 +18,10 @@ const KNOWN_ANNOUNCEMENT_SLOTS = [
     "countdownItem",
     "countdownLabel",
     "countdownValue",
+    "countdownContainer",
+    "countdownBlock",
+    "countdownDigit",
+    "countdownSeparator",
 ];
 const KNOWN_HERO_SLOTS = [
     "root",
@@ -43,7 +47,11 @@ const KNOWN_HERO_SLOTS = [
     "mobileDescription",
     "button",
     "desktopButton",
-    "mobileButton",
+    "mobileButton", "countdownContainer",
+    "countdownBlock",
+    "countdownDigit",
+    "countdownLabel",
+    "countdownSeparator",
 ];
 const ALL_KNOWN_SLOTS = [...KNOWN_ANNOUNCEMENT_SLOTS, ...KNOWN_HERO_SLOTS];
 function getCacheKey(base, slots, extra) {

package/docs/CHANGELOG.md

@@ -7,12 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### [Unreleased]
 
+### [2.4.3] - 2026-04-14
+
+#### Fixed
+
+- **Hero text overflow**: `renderText` base classes now include `max-w-full break-words` so title and description respect their content column width and wrap correctly when content contains non-breaking spaces.
+- **Desktop hero content alignment**: `DesktopHero` content column now uses `items-start` so child elements (button, countdown) no longer stretch to full column width.
+
+### [2.4.2] - 2026-04-14
+
+#### Fixed
+
+- **Hero banner text overflow**: Title and description in `DesktopHero` are now clamped to 3 lines with ellipsis (`line-clamp-3`) to prevent layout overflow at narrower viewport widths.
+
+### [2.4.1] - 2026-04-10
+
+#### Added
+
+- **`IHero.page_order`** – New `page_order: number | null` field on `IHero`. Consumers can use this to sort hero banners by their merchant-defined display order.
+
 ### [2.4.0] - 2026-03-08
 
 #### Added
 
 - **Hero countdown option** – Hero content supports optional countdown via `content.showCountdown` and `content.counterEndDate`. New `HeroCountdownTimer` component is used by Desktop/Mobile Hero when countdown is enabled.
 - **Button spacing** – Hero resolvers support `buttonSpacing` for configurable CTA spacing (`hero.ts`, `hero-resolvers.ts`).
+- **Content spacing** – Hero resolvers support `contentSpacing` for configurable gap between title, description, countdown, and button (`hero-resolvers.ts`); UI options in the app mirror this.
+- **Countdown color tokens** – Hero countdown supports `counterDigitColor`, `counterDigitBackgroundColor`, and `counterTextColor` via `content.styling.tokens.colors`; resolved by `resolveHeroCountdownColors()` in `hero-resolvers.ts`.
 
 #### Changed
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.4.0",
+  "version": "2.4.3",
   "description": "Official SDK for Fragment-Shopify CMS: React components, TypeScript types, and utilities for headless Shopify storefronts.",
   "license": "MIT",
   "main": "dist/index.js",

package/readme.md

@@ -4,7 +4,7 @@ The official SDK for integrating with Fragment-Shopify CMS. Provides React compo
 
 ## ✨ What's New
 
-**v2.3.3** – `fetchResource` uses environment-aware default caching: Next.js production defaults to 60s revalidation and resource-type cache tags; development and non–Next.js use `cache: "default"`. Request deduplication normalizes `status` for consistent cache keys.
+**v2.4.1** – `IHero` now includes a `page_order: number | null` field. Use this to sort hero banners by their merchant-defined display order; when all values are `null` the recommended behaviour is to randomize.
 
 > See [CHANGELOG.md](./docs/CHANGELOG.md) for full release history