@propeller-commerce/propeller-v2-react-ui 0.11.3 → 0.11.4

package/CHANGELOG.md

@@ -8,6 +8,35 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.11.4] - 2026-07-31
+
+### Fixed
+
+- **The add-to-cart button overflowed its product card in narrow columns.**
+  The submit button is `flex-1`, but a flex item defaults to
+  `min-width: auto` and so refuses to shrink below its content width — icon
+  plus label plus `px-6` of padding. In a slider or a dense grid the button
+  ran past the card's edge instead of fitting inside it. Longer non-English
+  labels hit this first: Dutch "Toevoegen" is roughly twice the width of the
+  "Add" the padding was sized around. The button now carries `min-w-0`, eases
+  its padding to `px-3 sm:px-6`, and wraps its label in a `truncate` span, so
+  it shrinks to the column and ellipsises rather than overflowing. Same fix
+  for `<ClusterCard>`'s "View cluster" link, which had the identical shape.
+- **Hovering a card's CTA lit up the whole card.** The card root is a
+  `group` with `hover:shadow-md`, so hovering the button — a descendant —
+  raised the card shadow, shifted its border and zoomed the product image at
+  the same time as the button's own hover state. Three things answering one
+  intent read as the card being clickable rather than the button. While the
+  pointer is on a CTA the card-level highlight and the image zoom now stand
+  down and the button owns the hover; moving anywhere else on the card is
+  unchanged. Browsers without `:has()` keep the previous behaviour.
+
+### Changed
+
+- **`<AddToCart>`'s hover shade now matches the other CTAs.** It darkened to
+  `bg-secondary/90` where every other solid button in the package uses `/80`.
+  Now `/80` as well.
+
 ## [0.11.3] - 2026-07-31
 
 ### Fixed

package/dist/index.cjs

@@ -4607,7 +4607,7 @@ function AddToCart(rawProps) {
             "button",
             {
               type: "button",
-              className: "propeller-add-to-cart__submit flex-1 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              className: "propeller-add-to-cart__submit flex-1 min-w-0 basis-full md:basis-auto inline-flex justify-center items-center gap-2 h-10 px-3 sm:px-6 border border-transparent text-sm font-medium rounded-control text-secondary-foreground bg-secondary hover:bg-secondary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               onClick: () => handleAddToCart(),
               disabled: loading,
               children: [
@@ -4629,8 +4629,7 @@ function AddToCart(rawProps) {
                     ]
                   }
                 ),
-                loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") }) : null,
-                !loading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: propellerV2CoreUi.getLabel(props.labels, "add", "Add") }) : null
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-add-to-cart__submit-label min-w-0 truncate", children: loading ? propellerV2CoreUi.getLabel(props.labels, "adding", "Adding...") : propellerV2CoreUi.getLabel(props.labels, "add", "Add") })
               ]
             }
           )
@@ -8383,8 +8382,8 @@ function ClusterCardViewClusterLink(props) {
     {
       href: derived.clusterUrl,
       onClick: handleClusterClick,
-      className: props.className ?? "propeller-cluster-card__cta-link flex w-full items-center justify-center rounded-control bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-      children: props.label ?? derived.viewClusterLabel
+      className: props.className ?? "propeller-cluster-card__cta-link flex w-full min-w-0 items-center justify-center rounded-control bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "propeller-cluster-card__cta-label min-w-0 truncate", children: props.label ?? derived.viewClusterLabel })
     }
   );
 }