@cartbase/storefront 0.14.0 → 0.16.0

package/src/cart-drawer/context.tsx

@@ -24,6 +24,7 @@ import {
 import type { StorefrontClient } from "../api/http"
 import { productItemCount } from "../lib/cart-helpers"
 import { defaultCartDrawerLabels, type CartDrawerLabels } from "./labels"
+import { useLocaleArea } from "../locales/context"
 
 /**
  * Cart drawer context — open state + cart snapshot + labels + link hrefs.
@@ -313,6 +314,11 @@ export function CartDrawerProvider({
   onCartChange?: (cart: Cart) => void
   /** Ops funnel for every failed optimistic mutation (see module JSDoc). */
   onOptimisticError?: (failure: OptimisticCartError) => void
+  /**
+   * Overrides. The default is the language mounted by
+   * `StorefrontLocaleProvider`, English when none is mounted, so a store
+   * that mounts its pack has nothing to hand over here (2026-09-14).
+   */
   labels?: Partial<CartDrawerLabels>
   hrefs?: Partial<CartDrawerHrefs>
   children: ReactNode
@@ -536,8 +542,12 @@ export function CartDrawerProvider({
     }
   }, [client, serverCart?.id, confirm])
 
+  // The mounted language is the default (2026-09-14): a store that mounts
+  // StorefrontLocaleProvider has nothing to hand over here, and a `labels`
+  // prop overrides only the keys it names.
+  const inherited = useLocaleArea("cartDrawer", defaultCartDrawerLabels)
   const labels: CartDrawerLabels = {
-    ...defaultCartDrawerLabels,
+    ...inherited,
     ...labelOverrides,
   }
   const hrefs: CartDrawerHrefs = {

package/src/cart-drawer/item/variant.tsx

@@ -1,8 +1,12 @@
 "use client"
 
+import { variantCaption } from "../../lib/variant-caption"
+
 /**
  * CartItemVariant — renders the variant description (e.g. "Size M / Red")
- * under the product title in a cart line.
+ * under the product title in a cart line. A single-variant placeholder
+ * ("Default", "Default Title", "Default variant") renders nothing
+ * (`lib/variant-caption`).
  *
  * Ported from `@1click/ui/src/cart-drawer/item/variant.tsx` (v2.3.1).
  * Cartbase data seam: the source rendered `variant.options[].value` from an
@@ -36,11 +40,12 @@ export function CartItemVariant({ variantTitle, options }: CartItemVariantProps)
     )
   }
 
-  if (!variantTitle) return null
+  const caption = variantCaption(variantTitle)
+  if (!caption) return null
 
   return (
     <div className="flex items-center gap-2 flex-wrap">
-      <span className="text-xs text-muted-foreground">{variantTitle}</span>
+      <span className="text-xs text-muted-foreground">{caption}</span>
     </div>
   )
 }

package/src/checkout/checkout-client.tsx

@@ -53,7 +53,16 @@ type CheckoutClientProps = {
   customer: StoreCustomer | null
   availableShippingMethods: StoreShippingOption[] | null
   availablePaymentMethods: PaymentProviderLike[] | null
-  countryCode: string
+  /**
+   * The country to PRESELECT when the cart has no shipping address yet.
+   * Optional, like the hook's own: the offer comes from the store
+   * (`GET /api/store/countries`) and a store with no preselection lets the
+   * shopper pick. This stayed `string` when the hook went optional on
+   * 2026-09-13, so the reference storefront, which omits it on purpose, did
+   * not typecheck, and `next build` refuses a store with a type error
+   * (fixed 2026-09-14).
+   */
+  countryCode?: string
   /** Countries for the address form (Cartbase regions embed none). */
   countries?: Array<{ iso_2: string; display_name: string }>
   paymentMethodFilter?: (

package/src/checkout/line-item-card.tsx

@@ -6,6 +6,7 @@ import type { StorefrontClient } from "../api/http"
 import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
 import { cn } from "../lib/utils"
+import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 
 /**
@@ -106,8 +107,10 @@ export function LineItemCard({
         <p className="text-sm font-semibold text-foreground leading-tight truncate">
           {item.product_title}
         </p>
-        {item.variant_title && item.variant_title !== "Default" && (
-          <p className="text-xs text-muted-foreground mt-1">{item.variant_title}</p>
+        {variantCaption(item.variant_title) && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {variantCaption(item.variant_title)}
+          </p>
         )}
 
         <div className="flex items-center gap-2 mt-2.5">

package/src/checkout/order-summary.tsx

@@ -7,6 +7,7 @@ import { updateLineItem, type Cart, type CartLineItem } from "../api/carts"
 import { Price } from "../lib/price"
 import { isProductLine } from "../lib/cart-helpers"
 import { cn } from "../lib/utils"
+import { variantCaption } from "../lib/variant-caption"
 import { useCheckoutLabels } from "./context"
 import { DiscountSection } from "./discount-section"
 import { GiftCardSection } from "./gift-card-section"
@@ -87,8 +88,12 @@ export function CheckoutLineItem({
     }
   }
 
+  // `self-start`: in the desktop column the pill is a flex item, and a flex
+  // item stretches to the column's width unless told otherwise. Without it
+  // the border ran the full width of the row with the controls huddled at
+  // the left (evoo checkout, 2026-09-14).
   const qtyPill = (
-    <div className="inline-flex items-center rounded-[2px] border border-border bg-card">
+    <div className="inline-flex self-start items-center rounded-[2px] border border-border bg-card">
       <button
         type="button"
         onClick={() => handleQty(item.quantity - 1)}
@@ -133,15 +138,14 @@ export function CheckoutLineItem({
     </div>
   )
 
+  const caption = variantCaption(item.variant_title)
   const titleBlock = (
     <div className="min-w-0">
       <p className="text-[15px] font-semibold text-foreground leading-snug break-words">
         {item.product_title}
       </p>
-      {item.variant_title && item.variant_title !== "Default" && (
-        <p className="text-xs text-muted-foreground mt-1 truncate">
-          {item.variant_title}
-        </p>
+      {caption && (
+        <p className="text-xs text-muted-foreground mt-1 truncate">{caption}</p>
       )}
     </div>
   )

package/src/common/country-select.tsx

@@ -1,65 +1,11 @@
-"use client"
-
-import { useMemo } from "react"
-import type { StoreRegion } from "../api/regions"
-
-/**
- * Region picker for the storefront footer/header. Ported from
- * `@1click/ui/src/common/country-select.tsx` (v2.3.1) with a REAL model
- * change forced by the SDK (SDK wins over the source):
- *
- *  - Medusa regions embedded a `countries[]` array and the select listed
- *    countries; Cartbase regions carry NO countries on the store surface
- *    (divergence documented in `api/regions` — tax scoping is by
- *    `tax_regions` server-side). The select therefore lists the REGIONS
- *    themselves (`regions.listRegions`), valued by region id.
- *  - The source called the `updateRegion(countryCode, path)` server
- *    action bound to URL `[countryCode]` routing; Cartbase region
- *    persistence is app-owned (usually `carts.updateCart(client, cartId,
- *    {region_id})` + a cookie) — so the change surfaces via `onChange`.
- */
-type CountrySelectProps = {
-  regions: StoreRegion[]
-  /** Currently active region id. */
-  value?: string | null
-  /** Fired with the selected region; persist it app-side. */
-  onChange: (region: StoreRegion) => void
-  className?: string
-}
-
-export function CountrySelect({
-  regions,
-  value,
-  onChange,
-  className,
-}: CountrySelectProps) {
-  const options = useMemo(
-    () =>
-      [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
-    [regions]
-  )
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = options.find((r) => r.id === e.target.value)
-    if (selected) onChange(selected)
-  }
-
-  return (
-    <select
-      value={value || ""}
-      onChange={handleChange}
-      className={
-        className ??
-        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
-      }
-    >
-      {options.map((r) => (
-        <option key={r.id} value={r.id}>
-          {r.name}
-        </option>
-      ))}
-    </select>
-  )
-}
-
-export { type CountrySelectProps }
+/**
+ * `CountrySelect` is now `MarketSelect` (`common/market-select`), renamed on
+ * 2026-09-14: it lists the store's MARKETS, and a component is named for what
+ * it does (store-package card, finding 6; doctrine 14b). This path and these
+ * names are kept for ONE release so an existing import keeps compiling, and
+ * go with the release after it.
+ *
+ * @deprecated import `MarketSelect` from `@cartbase/storefront/common/market-select`.
+ */
+export { MarketSelect as CountrySelect } from "./market-select"
+export type { MarketSelectProps as CountrySelectProps } from "./market-select"

package/src/common/index.ts

@@ -9,6 +9,8 @@ export { CartButton } from "./cart-button"
 export { CartButtonClient } from "./cart-button-client"
 export { DeleteButton, type DeleteButtonProps } from "./delete-button"
 export { CountryFlag } from "./country-flag"
+export { MarketSelect, type MarketSelectProps } from "./market-select"
+/** @deprecated the old name of `MarketSelect`, kept for one release (2026-09-14). */
 export { CountrySelect, type CountrySelectProps } from "./country-select"
 export {
   LanguageSelect,

package/src/common/market-select.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { useMemo } from "react"
+import type { StoreRegion } from "../api/regions"
+
+/**
+ * THE MARKET PICKER for a header or footer: the store's regions, by name.
+ *
+ * Ported from `@1click/ui/src/common/country-select.tsx` (v2.3.1) and
+ * renamed on 2026-09-14 (store-package card, finding 6). The port carried the
+ * name of a component that listed a region's countries; Cartbase regions
+ * carry no countries on the store surface, so it listed the REGIONS
+ * themselves and was named for something it did not do. A market is what a
+ * shopper picks here; a country is picked in the checkout, from
+ * `listCountries`, with `CountryFlag` beside it.
+ *
+ * Persistence is the app's: `onChange` hands over the chosen region and the
+ * app writes it where it keeps it (usually `carts.updateCart(client, cartId,
+ * { region_id })` plus a cookie).
+ */
+export type MarketSelectProps = {
+  regions: StoreRegion[]
+  /** The active region's id. */
+  value?: string | null
+  /** Fired with the chosen region; persist it app-side. */
+  onChange: (region: StoreRegion) => void
+  className?: string
+}
+
+export function MarketSelect({ regions, value, onChange, className }: MarketSelectProps) {
+  const options = useMemo(
+    () => [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
+    [regions]
+  )
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = options.find((r) => r.id === e.target.value)
+    if (selected) onChange(selected)
+  }
+
+  return (
+    <select
+      value={value || ""}
+      onChange={handleChange}
+      className={
+        className ??
+        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
+      }
+    >
+      {options.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name}
+        </option>
+      ))}
+    </select>
+  )
+}

package/src/lib/variant-caption.ts

@@ -0,0 +1,32 @@
+/**
+ * The variant caption a shopper sees under a product title.
+ *
+ * A product with one variant has no real variant, only a placeholder name
+ * for the row that holds its price: the platform names it "Default", a
+ * Shopify import carries "Default Title", Medusa "Default variant". None of
+ * them is a fact about the product, so none is shown. Every surface that
+ * prints a variant (cart drawer, checkout summary, order page) goes through
+ * this one function; a real variant title ("Size M / Red") passes through.
+ *
+ * Found 2026-09-14 on evoo's checkout summary, where every Shopify-imported
+ * product read "Default Title" under its name while three surfaces each
+ * tested a different spelling of the placeholder.
+ */
+
+const PLACEHOLDER_TITLES = new Set(["default", "default title", "default variant"])
+
+/** True for an empty title or any spelling of the single-variant placeholder. */
+export function isPlaceholderVariantTitle(
+  title: string | null | undefined
+): boolean {
+  if (!title) return true
+  return PLACEHOLDER_TITLES.has(title.trim().toLowerCase())
+}
+
+/** The caption to render, or null when there is nothing worth showing. */
+export function variantCaption(title: string | null | undefined): string | null {
+  if (!title) return null
+  const trimmed = title.trim()
+  if (!trimmed || isPlaceholderVariantTitle(trimmed)) return null
+  return trimmed
+}

package/src/locales/bg.ts

@@ -28,6 +28,9 @@ export const bg: StorefrontLocale = {
     selectVariant: "Изберете вариант",
     outOfStock: "Изчерпан",
     addToCart: "Добави в кошницата",
+    quantity: "Количество",
+    decreaseQuantity: "По-малко",
+    increaseQuantity: "Повече",
     from: "От",
     original: "Оригинална цена:",
     productInformation: "Информация за продукта",

package/src/locales/context.ts

@@ -0,0 +1,37 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { StorefrontLocale } from "./types"
+
+/**
+ * THE MOUNTED LANGUAGE, as a context. Null outside `StorefrontLocaleProvider`.
+ *
+ * Its default is null and not `en` on purpose: `en` gathers every area's
+ * English, and a client component that needs one area (the cart drawer, a
+ * review card) must not bundle the other five to read it. Each reader hands
+ * over its own area's English instead, through `useLocaleArea`, so a
+ * component rendered with no language mounted behaves exactly as before.
+ */
+export const StorefrontLocaleContext = createContext<StorefrontLocale | null>(null)
+
+/**
+ * One area of the mounted language, for a CLIENT component that renders it.
+ *
+ *   const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
+ *
+ * The pack the store mounted wins over the area's English; a `labels` prop
+ * still wins over both, so a store can override one word without a pack.
+ * Since 2026-09-14 this is how the cart drawer and the reviews family are
+ * localized: mount the provider once and there is nothing left to forget.
+ *
+ * A SERVER component cannot call this, because a server component has no
+ * context. That is why the store, product and order templates take their
+ * pack as a REQUIRED prop instead (`PropLabelAreas` in ./types).
+ */
+export function useLocaleArea<K extends keyof StorefrontLocale>(
+  area: K,
+  english: StorefrontLocale[K]
+): StorefrontLocale[K] {
+  const locale = useContext(StorefrontLocaleContext)
+  return locale ? locale[area] : english
+}

package/src/locales/es.ts

@@ -34,6 +34,9 @@ export const es: StorefrontLocale = {
     selectVariant: "Elige variante",
     outOfStock: "Agotado",
     addToCart: "Añadir al carrito",
+    quantity: "Cantidad",
+    decreaseQuantity: "Menos",
+    increaseQuantity: "Más",
     from: "Desde",
     original: "Antes:",
     productInformation: "Información del producto",

package/src/locales/provider.tsx

@@ -1,35 +1,31 @@
 "use client"
 
-import { createContext, useContext, type ReactNode } from "react"
+import { useContext, type ReactNode } from "react"
 import { CheckoutProvider } from "../checkout/context"
 import { OrderLabelsProvider } from "../order/context"
 import { ProductLabelsProvider } from "../products/context"
+import { StorefrontLocaleContext } from "./context"
 import type { StorefrontLocale } from "./types"
 import { en } from "./en"
 
-const StorefrontLocaleContext = createContext<StorefrontLocale>(en)
-
 /**
  * ONE PROVIDER FOR THE STORE'S LANGUAGE.
  *
  *   import { es } from "@cartbase/storefront/locales/es"
  *   <StorefrontLocaleProvider locale={es}>{children}</StorefrontLocaleProvider>
  *
- * It mounts the three pure label contexts (products, checkout, order) so
- * every component inside them is localized with no further wiring.
- *
- * IT DOES NOT MOUNT THE CART DRAWER, and that is deliberate rather than an
- * omission: `CartDrawerProvider` carries the cart's state, its client and
- * its persistence callbacks, so it belongs where the app owns that state,
- * not inside a language wrapper. Hand it the pack instead:
- *
- *   const locale = useStorefrontLocale()
- *   <CartDrawerProvider cart={cart} labels={locale.cartDrawer}>
- *
- * Same for the two areas that read labels from a prop:
+ * Every CLIENT component inside it speaks the pack, and nothing else has to
+ * be wired: it mounts the three label contexts (products, checkout, order),
+ * and the cart drawer and the reviews family read the language from it
+ * directly (`useLocaleArea`, since 2026-09-14). It does not MOUNT the cart
+ * drawer, because that provider carries the cart's state, its client and its
+ * persistence callbacks, which belong where the app owns that state; the
+ * drawer only reads the language from here.
  *
- *   <StoreTemplate labels={locale.store} />
- *   <ReviewWidget labels={locale.reviews} />
+ * What it cannot reach is a SERVER component, because a server component has
+ * no context. The store, product and order templates render on the server,
+ * so each page hands them their area of the pack as a REQUIRED prop:
+ * `PropLabelAreas` in ./types names them, with the mounts written out.
  *
  * DEFAULT IS ENGLISH. A component rendered outside this provider reads the
  * library's own English defaults, so nothing renders blank or crashes for
@@ -54,10 +50,10 @@ export function StorefrontLocaleProvider({
 }
 
 /**
- * The whole locale, for the packs this provider cannot mount (the cart
- * drawer's, the store template's and the reviews widget's) and for the
- * code that needs the language itself, e.g. `<html lang={locale.code}>`.
+ * The whole mounted locale, English when none is mounted: for the code that
+ * needs the language itself, e.g. `<html lang={locale.code}>`, and for a
+ * client shell that hands a server template its pack.
  */
 export function useStorefrontLocale(): StorefrontLocale {
-  return useContext(StorefrontLocaleContext)
+  return useContext(StorefrontLocaleContext) ?? en
 }

package/src/locales/types.ts

@@ -40,35 +40,38 @@ export interface StorefrontLocale {
 }
 
 /**
- * THE AREAS WHOSE PACK THE APP MUST HAND OVER AS A PROP.
+ * THE AREAS WHOSE PACK THE APP MUST HAND OVER AS A PROP, and the prop is
+ * REQUIRED.
  *
  * Not a style choice and not a gap in this layer: a React SERVER component
  * cannot read a client context, and these areas are rendered on the server.
  * `StorefrontLocaleProvider` therefore reaches the client components and
- * nothing else, and a server-rendered heading stays English however many
- * providers are mounted above it.
+ * nothing else, and a server-rendered heading would stay English however
+ * many providers were mounted above it.
  *
- * Corrected 2026-09-13: this used to list `store` and `reviews` only, and
- * Alexander found the consequence on evoo, a Bulgarian store whose product
- * page ended in the English "Related products / You might also want to
- * check out these products". `products` and `order` belong here too, and
- * `ProductTemplate` was not even passing the pack down to its own
- * related-products strip, which made that strip untranslatable without
- * ejecting a file.
+ * Since 2026-09-14 the page-level templates of these areas REQUIRE the pack
+ * (`labels: StoreLabels`, never `labels?`), so a page that forgets it fails
+ * to compile instead of shipping silent English. That was the defect: on
+ * 2026-09-13 evoo, a Bulgarian store, ended a product page in the English
+ * "Related products / You might also want to check out these products", and
+ * its search page and order confirmation stayed English, with no error, no
+ * warning and no failing test. English is not a special case: an English
+ * store passes `en.store`. The scaffold declares `STORE_LOCALE` once in its
+ * config and every page reads its area from it.
  *
  * Hand the pack to each page-level template once and everything inside it
  * follows:
  *
- *   <ProductTemplate labels={locale.products} />   // + the related strip
- *   <StoreTemplate   labels={locale.store} />
- *   <SearchTemplate  labels={locale.store} />
- *   <OrderCompletedTemplate labels={locale.order} />
- *   <ReviewWidget    labels={locale.reviews} />
+ *   <StoreTemplate          labels={STORE_LOCALE.store} />
+ *   <SearchTemplate         labels={STORE_LOCALE.store} />
+ *   <CollectionTemplate     labels={STORE_LOCALE.store} />
+ *   <CategoryTemplate       labels={STORE_LOCALE.store} />
+ *   <ProductTemplate        labels={STORE_LOCALE.products} />   // + the related strip
+ *   <OrderCompletedTemplate labels={STORE_LOCALE.order} />
  *
- * The cart drawer is the same case for a different reason: it owns the
- * cart's state, so the app mounts it and hands it `locale.cartDrawer`.
+ * The cart drawer and the reviews family were listed here until 2026-09-14.
+ * They are client components, so they now read the mounted language
+ * themselves (`useLocaleArea` in ./context); their `labels` prop is an
+ * override, never a requirement.
  */
-export type PropLabelAreas = Pick<
-  StorefrontLocale,
-  "products" | "store" | "order" | "reviews" | "cartDrawer"
->
+export type PropLabelAreas = Pick<StorefrontLocale, "products" | "store" | "order">

package/src/order/order-completed-template.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link"
 import { ChevronLeft } from "lucide-react"
 import type { StoreOrderDetail, StoreOrderItem } from "../api/orders"
-import { defaultOrderLabels, type OrderLabels } from "./labels"
+import type { OrderLabels } from "./labels"
 import {
   OrderConfirmationHeader,
   type OrderHeaderData,
@@ -67,7 +67,14 @@ type OrderCompletedTemplateProps = {
   /** The merchant method's name — wins over any provider bucket. */
   paymentMethodName?: string | null
   cardLast4?: string | null
-  labels?: OrderLabels
+  /**
+   * The store's order pack, REQUIRED: this template renders on the server,
+   * where `StorefrontLocaleProvider` cannot reach, so the page passes
+   * `STORE_LOCALE.order` (`en.order` for an English store). Required since
+   * 2026-09-14 so that forgetting it fails the build instead of shipping
+   * silent English, which is how evoo's confirmation page stayed English.
+   */
+  labels: OrderLabels
   locale?: string
   contactHref?: string
   returnsHref?: string
@@ -90,14 +97,13 @@ export function OrderCompletedTemplate({
   paymentProviderId,
   paymentMethodName,
   cardLast4,
-  labels,
+  labels: l,
   locale,
   contactHref,
   returnsHref,
   storeHref = "/store",
   methodFeeLabel,
 }: OrderCompletedTemplateProps) {
-  const l = { ...defaultOrderLabels, ...labels }
   const displayItems =
     items ?? (order.items ?? []).map(displayItemFromOrderItem)
 

package/src/order/order-item.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image"
 import { ImageOff } from "lucide-react"
 import { Price } from "../lib/price"
+import { variantCaption } from "../lib/variant-caption"
 import type { StoreOrderItem } from "../api/orders"
 import { defaultOrderLabels, type OrderLabels } from "./labels"
 
@@ -46,7 +47,8 @@ export interface OrderDisplayItem {
 /**
  * Variant caption resolution — port of the source's `variantLabel` IIFE:
  * option values joined with " / " when present, else the variant title
- * unless it is the Medusa placeholder "Default variant".
+ * unless it is a single-variant placeholder (`lib/variant-caption`, one
+ * rule for every surface).
  */
 export function variantLabelFrom(input: {
   variant_option_values?: Record<string, unknown> | null
@@ -59,9 +61,7 @@ export function variantLabelFrom(input: {
     )
     if (parts.length) return parts.map(String).join(" / ")
   }
-  const title = input.variant_title
-  if (title && title !== "Default variant") return title
-  return null
+  return variantCaption(input.variant_title)
 }
 
 /** Pure converter: order-detail pivot row → display line. */

package/src/products/index.ts

@@ -26,6 +26,20 @@ export {
   type PurchaseOptionsLabels,
 } from "./purchase-options"
 export { ImageGallery, type ImageGalleryProps } from "./image-gallery"
+// The product page contract: the address is the state, the default is the
+// merchant's, a switch is a browser event (variant-url + use-product-actions).
+export {
+  VARIANT_PARAM,
+  variantParamValue,
+  findVariantByParam,
+  defaultVariant,
+  variantHref,
+} from "./variant-url"
+export {
+  useProductActions,
+  type UseProductActionsInput,
+  type ProductActionsState,
+} from "./use-product-actions"
 export {
   ProductActions,
   type ProductActionsProps,

package/src/products/labels.ts

@@ -9,6 +9,10 @@ export type ProductLabels = {
   selectVariant: string
   outOfStock: string
   addToCart: string
+  /** The quantity stepper of the buy panel and its two controls. */
+  quantity: string
+  decreaseQuantity: string
+  increaseQuantity: string
   from: string
   original: string
   productInformation: string
@@ -39,6 +43,9 @@ export const defaultProductLabels: ProductLabels = {
   selectVariant: "Select variant",
   outOfStock: "Out of stock",
   addToCart: "Add to cart",
+  quantity: "Quantity",
+  decreaseQuantity: "Fewer",
+  increaseQuantity: "More",
   from: "From",
   original: "Original:",
   productInformation: "Product Information",