@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/product-information/product-information.d.ts

@@ -1,8 +1,32 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ProductInformationDataFragment } from "../../sdk/generated/graphql.js";
 import { ComponentPropsWithRef, ComponentPropsWithoutRef } from "react";
 //#region src/matter/product-information/product-information.d.ts
+export declare const ProductInformationDescriptionContent: {
+  readonly id: "product-information-description";
+  readonly title: "Product Information Description";
+  readonly description: "Labels of the trigger that expands and collapses the product description.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly moreLabel: {
+        readonly type: "string";
+        readonly title: "Trigger label (collapsed)";
+        readonly format: "icu-message";
+        readonly messageSource: "Show more";
+      };
+      readonly lessLabel: {
+        readonly type: "string";
+        readonly title: "Trigger label (expanded)";
+        readonly format: "icu-message";
+        readonly messageSource: "Show less";
+      };
+    };
+  };
+};
 type ProductSlice = NonNullable<ProductInformationDataFragment['productBySlug']>;
 type TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type DescriptionFormat = 'auto' | 'plain' | 'html';
@@ -14,7 +38,7 @@ export type ProductInformationTitleProps = Omit<ComponentPropsWithRef<'h1'>, 'ch
   as?: TitleAs;
   separator?: string;
 };
-export type ProductInformationDescriptionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {
+export type ProductInformationDescriptionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & MessageLocaleProp & {
   /**
    * Controls how the description renders.
    * - `'auto'` (default) — prefers `descriptionHtml`; falls back to plain `description`; renders nothing when both are absent.
@@ -31,8 +55,7 @@ export type ProductInformationDescriptionProps = Omit<ComponentPropsWithoutRef<'
   collapse?: Collapse;
   defaultExpanded?: boolean;
   collapsedLines?: number;
-  moreLabel?: string;
-  lessLabel?: string;
+  $content?: ContentValue<typeof ProductInformationDescriptionContent>;
 };
 export type ProductInformationBrandProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
 export type ProductInformationSkuProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
@@ -45,7 +68,7 @@ export declare const ProductInformationSkuDefinition: ComponentDefinition<Produc
 export declare const ProductInformationReferenceIdDefinition: ComponentDefinition<ProductInformationReferenceIdProps>;
 export declare function ProductInformationRoot({ $data: $dataProp, className, children, ...props }: ProductInformationRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductInformationTitle({ as, separator, className, ...props }: ProductInformationTitleProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function ProductInformationDescription({ format, collapse, defaultExpanded, collapsedLines, moreLabel, lessLabel, className, ...props }: ProductInformationDescriptionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductInformationDescription({ format, collapse, defaultExpanded, collapsedLines, $content, $locale, className, ...props }: ProductInformationDescriptionProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ProductInformationBrand({ className, ...props }: ProductInformationBrandProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ProductInformationSku({ className, ...props }: ProductInformationSkuProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ProductInformationReferenceId({ className, ...props }: ProductInformationReferenceIdProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/matter/product-information/product-information.js

@@ -1,6 +1,8 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { graphql } from "../../sdk/generated/gql.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
@@ -38,6 +40,29 @@ const fragment = graphql(`
     }
   }
 `);
+const ProductInformationDescriptionContent = defineContentType({
+	id: "product-information-description",
+	title: "Product Information Description",
+	description: "Labels of the trigger that expands and collapses the product description.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			moreLabel: {
+				type: "string",
+				title: "Trigger label (collapsed)",
+				format: "icu-message",
+				messageSource: "Show more"
+			},
+			lessLabel: {
+				type: "string",
+				title: "Trigger label (expanded)",
+				format: "icu-message",
+				messageSource: "Show less"
+			}
+		}
+	}
+});
 const PRODUCT_INFORMATION_CONTEXT_UNSET = Symbol("ProductInformationContextUnset");
 const ProductInformationContext = createContext(PRODUCT_INFORMATION_CONTEXT_UNSET);
 function useProductInformation() {
@@ -109,6 +134,7 @@ const ProductInformationDescriptionDefinition = defineComponent({
 	name: "ProductInformationDescription",
 	importPath: "@vtex/faststore/components",
 	component: ProductInformationDescription,
+	content: ProductInformationDescriptionContent,
 	editor: {
 		label: "Product Description",
 		category: "commerce"
@@ -141,20 +167,10 @@ const ProductInformationDescriptionDefinition = defineComponent({
 			type: "number",
 			default: 4,
 			label: "Collapsed line count"
-		},
-		moreLabel: {
-			type: "string",
-			default: "Show more",
-			label: "Trigger label (collapsed)"
-		},
-		lessLabel: {
-			type: "string",
-			default: "Show less",
-			label: "Trigger label (expanded)"
 		}
 	},
 	requiresContext: "product-information",
-	guideline: "Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure)."
+	guideline: "Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with the `$content` trigger labels `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure)."
 });
 const ProductInformationBrandDefinition = defineComponent({
 	name: "ProductInformationBrand",
@@ -233,8 +249,9 @@ function ProductInformationTitle({ as = "h1", separator, className, ...props })
 		children: composed
 	});
 }
-function ProductInformationDescription({ format = "auto", collapse = "none", defaultExpanded = true, collapsedLines = 4, moreLabel = "Show more", lessLabel = "Show less", className, ...props }) {
+function ProductInformationDescription({ format = "auto", collapse = "none", defaultExpanded = true, collapsedLines = 4, $content, $locale, className, ...props }) {
 	const ctx = useProductInformation();
+	const { format: formatMessage } = useMessageFormatter(ProductInformationDescriptionContent, $content);
 	if (!ctx) return null;
 	const wantsRich = format === "auto" || format === "html";
 	const wantsPlain = format === "auto" || format === "plain";
@@ -267,8 +284,8 @@ function ProductInformationDescription({ format = "auto", collapse = "none", def
 		collapse,
 		defaultExpanded,
 		collapsedLines,
-		moreLabel,
-		lessLabel,
+		moreLabel: formatMessage("moreLabel"),
+		lessLabel: formatMessage("lessLabel"),
 		htmlProps,
 		panelChildren
 	});
@@ -350,6 +367,6 @@ const ProductInformation = {
 	ReferenceId: ProductInformationReferenceId
 };
 //#endregion
-export { ProductInformation, ProductInformationBrand, ProductInformationBrandDefinition, ProductInformationDescription, ProductInformationDescriptionDefinition, ProductInformationReferenceId, ProductInformationReferenceIdDefinition, ProductInformationRoot, ProductInformationRootDefinition, ProductInformationSku, ProductInformationSkuDefinition, ProductInformationTitle, ProductInformationTitleDefinition };
+export { ProductInformation, ProductInformationBrand, ProductInformationBrandDefinition, ProductInformationDescription, ProductInformationDescriptionContent, ProductInformationDescriptionDefinition, ProductInformationReferenceId, ProductInformationReferenceIdDefinition, ProductInformationRoot, ProductInformationRootDefinition, ProductInformationSku, ProductInformationSkuDefinition, ProductInformationTitle, ProductInformationTitleDefinition };
 
 //# sourceMappingURL=product-information.js.map

package/dist/matter/product-information/product-information.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-information.js","names":["Component"],"sources":["../../../src/matter/product-information/product-information.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties } from 'react';\nimport { createContext, useContext, useEffect, useId, useRef, useState } from 'react';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { ProductInformationDataFragment } from '../../sdk/generated/graphql.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment ProductInformationData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      title\n      description\n      descriptionHtml\n      referenceId\n      vendor\n      brand {\n        __typename\n        id\n        name\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            __typename\n            id\n            sku\n            name\n          }\n        }\n      }\n      seo {\n        title\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<ProductInformationDataFragment['productBySlug']>;\n\ntype ProductInformationContextData = {\n  title: string;\n  description: string | null;\n  descriptionHtml: string | null;\n  referenceId: string | null;\n  brand: string | null;\n  sku: string | null;\n  variantName: string | null;\n  seoTitle: string | null;\n};\n\ntype ProductInformationContextValue = ProductInformationContextData | null;\n\nconst PRODUCT_INFORMATION_CONTEXT_UNSET = Symbol('ProductInformationContextUnset');\n\ntype TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type DescriptionFormat = 'auto' | 'plain' | 'html';\n\ntype Collapse = 'none' | 'showMore' | 'section';\n\nexport type ProductInformationRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n};\n\nexport type ProductInformationTitleProps = Omit<ComponentPropsWithRef<'h1'>, 'children'> & {\n  as?: TitleAs;\n  separator?: string;\n};\n\n// `ComponentPropsWithoutRef` (not `WithRef`) because the wrapper element varies between `<p>`\n// and `<div>` depending on the resolved `format` branch. Exposing a `ref` typed for one element\n// would be unsound when the other branch resolves — the runtime element type and the\n// type-system promise would diverge silently. Refs are intentionally not part of the contract.\nexport type ProductInformationDescriptionProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children' | 'dangerouslySetInnerHTML'\n> & {\n  /**\n   * Controls how the description renders.\n   * - `'auto'` (default) — prefers `descriptionHtml`; falls back to plain `description`; renders nothing when both are absent.\n   * - `'plain'` — strict plain text from `description`; never reads `descriptionHtml`.\n   * - `'html'` — strict rich HTML from `descriptionHtml` via `dangerouslySetInnerHTML`; renders nothing when absent (no fallback).\n   *\n   * Rich HTML is safe because Storefront API Core sanitizes `descriptionHtml` upstream.\n   *\n   * The rendered element follows from the resolved branch: plain text renders as `<p>`;\n   * rich HTML renders as `<div>` (so block-level markup inside `descriptionHtml` remains valid DOM).\n   * Both wrappers carry `data-fs-text=\"\"` so project-level `Text` typography cascades automatically.\n   */\n  format?: DescriptionFormat;\n  collapse?: Collapse;\n  defaultExpanded?: boolean;\n  collapsedLines?: number;\n  moreLabel?: string;\n  lessLabel?: string;\n};\n\nexport type ProductInformationBrandProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationSkuProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationReferenceIdProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductInformationContext = createContext<\n  ProductInformationContextValue | typeof PRODUCT_INFORMATION_CONTEXT_UNSET\n>(PRODUCT_INFORMATION_CONTEXT_UNSET);\n\nfunction useProductInformation(): ProductInformationContextValue {\n  const ctx = useContext(ProductInformationContext);\n  if (ctx === PRODUCT_INFORMATION_CONTEXT_UNSET) {\n    throw new Error('ProductInformation components must be used inside ProductInformationRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\nfunction transformProductInformationData(data: ProductSlice): ProductInformationContextData {\n  const brand = data.brand?.name ?? data.vendor ?? null;\n  const firstVariant = data.variants.edges[0]?.node ?? null;\n  const sku = firstVariant?.sku ?? null;\n  const variantName = firstVariant?.name ?? null;\n  const seoTitle = data.seo?.title ?? null;\n\n  return {\n    title: data.title,\n    description: data.description,\n    descriptionHtml: data.descriptionHtml,\n    referenceId: data.referenceId,\n    brand,\n    sku,\n    variantName,\n    seoTitle,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductInformationRootDefinition = defineComponent<ProductInformationRootProps>({\n  name: 'ProductInformationRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Product Information', category: 'commerce' },\n  schema: {},\n  providesContext: 'product-information',\n  guideline:\n    'Root container for PDP product text — wraps ProductInformationTitle, ProductInformationDescription, ProductInformationBrand, ProductInformationSku, and ProductInformationReferenceId (any subset, any order). See product-information.md.',\n});\n\nexport const ProductInformationTitleDefinition = defineComponent<ProductInformationTitleProps>({\n  name: 'ProductInformationTitle',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationTitle,\n  editor: { label: 'Product Title', category: 'commerce' },\n  schema: {\n    as: {\n      type: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const,\n      default: 'h1',\n      label: 'Element tag',\n    },\n    separator: { type: 'string', label: 'Variant separator' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product title inside a ProductInformationRoot (or any ancestor providing `product-information` context); `as` controls the heading level (`h1`–`h6`, default `h1`) and `separator` optionally appends the selected variant name.',\n});\n\nexport const ProductInformationDescriptionDefinition = defineComponent<ProductInformationDescriptionProps>({\n  name: 'ProductInformationDescription',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationDescription,\n  editor: { label: 'Product Description', category: 'commerce' },\n  schema: {\n    format: {\n      type: ['auto', 'plain', 'html'] as const,\n      default: 'auto',\n      label: 'Description format',\n    },\n    collapse: {\n      type: ['none', 'showMore', 'section'] as const,\n      default: 'none',\n      label: 'Collapse pattern',\n    },\n    defaultExpanded: { type: 'boolean', default: true, label: 'Expanded by default' },\n    collapsedLines: { type: 'number', default: 4, label: 'Collapsed line count' },\n    moreLabel: { type: 'string', default: 'Show more', label: 'Trigger label (collapsed)' },\n    lessLabel: { type: 'string', default: 'Show less', label: 'Trigger label (expanded)' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    \"Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure).\",\n});\n\nexport const ProductInformationBrandDefinition = defineComponent<ProductInformationBrandProps>({\n  name: 'ProductInformationBrand',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationBrand,\n  editor: { label: 'Product Brand', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product brand name inside a ProductInformationRoot (or any ancestor providing `product-information` context); prefers `brand.name` and falls back to `vendor`.',\n});\n\nexport const ProductInformationSkuDefinition = defineComponent<ProductInformationSkuProps>({\n  name: 'ProductInformationSku',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationSku,\n  editor: { label: 'Product SKU', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the first-variant SKU code inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\nexport const ProductInformationReferenceIdDefinition = defineComponent<ProductInformationReferenceIdProps>({\n  name: 'ProductInformationReferenceId',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationReferenceId,\n  editor: { label: 'Product Reference ID', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the merchant reference ID inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductInformationRoot({\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductInformationRootProps) {\n  const $data = useDataOverride($dataProp);\n  const contextValue = $data ? transformProductInformationData($data) : null;\n\n  return (\n    <ProductInformationContext value={contextValue}>\n      <div {...props} className={className} data-fs-product-information=\"\">\n        {children}\n      </div>\n    </ProductInformationContext>\n  );\n}\n\nexport function ProductInformationTitle({ as = 'h1', separator, className, ...props }: ProductInformationTitleProps) {\n  const ctx = useProductInformation();\n  const variantName = ctx?.variantName ?? null;\n  const warnedRef = useRef(false);\n  const nullVariantSeenRef = useRef(false);\n\n  // NFR-3: warn once in production when `separator` is set but `variantName` stays null across\n  // commits (the SKU Selector gets one commit to hydrate before we conclude it's misconfigured).\n  // No deps array: the persistence check needs to evaluate on every commit, independent of any\n  // future memoization of the Root's context value.\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') return;\n    if (separator === undefined || !ctx) return;\n\n    if (variantName === null) {\n      if (nullVariantSeenRef.current && !warnedRef.current) {\n        warnedRef.current = true;\n        console.warn(\n          '[ProductInformationTitle] `separator` is set but the selected variant has no `name`; the title will render the product name alone. Ensure the SKU Selector wires Variant.name into the cache, or omit `separator` to silence this warning.',\n        );\n      }\n      nullVariantSeenRef.current = true;\n      return;\n    }\n\n    nullVariantSeenRef.current = false;\n  });\n\n  if (!ctx) return null;\n\n  const composed = separator !== undefined && variantName ? `${ctx.title}${separator}${variantName}` : ctx.title;\n\n  const Component = as;\n  return (\n    <Component\n      {...props}\n      className={className}\n      data-fs-product-information-title=\"\"\n      data-fs-product-information-title-as={as}\n    >\n      {composed}\n    </Component>\n  );\n}\n\nexport function ProductInformationDescription({\n  format = 'auto',\n  collapse = 'none',\n  defaultExpanded = true,\n  collapsedLines = 4,\n  moreLabel = 'Show more',\n  lessLabel = 'Show less',\n  className,\n  ...props\n}: ProductInformationDescriptionProps) {\n  const ctx = useProductInformation();\n  if (!ctx) return null;\n\n  // `'auto'` accepts both branches and prefers HTML; `'html'` and `'plain'` are strict opt-ins.\n  const wantsRich = format === 'auto' || format === 'html';\n  const wantsPlain = format === 'auto' || format === 'plain';\n  const htmlPayload = wantsRich ? ctx.descriptionHtml : null;\n  const plain = wantsPlain ? ctx.description : null;\n  if (!htmlPayload && !plain) return null;\n\n  // `format='auto'|'html'` is the opt-in: `descriptionHtml` is expected to be sanitized upstream by storefront-api-core.\n  const htmlProps = htmlPayload ? { dangerouslySetInnerHTML: { __html: htmlPayload } } : undefined;\n  const panelChildren = htmlPayload ? undefined : plain;\n\n  if (collapse === 'none') {\n    if (htmlPayload) {\n      return (\n        <div\n          {...props}\n          {...htmlProps}\n          className={className}\n          data-fs-product-information-description=\"\"\n          data-fs-product-information-description-collapse=\"none\"\n          data-fs-text=\"\"\n        />\n      );\n    }\n\n    return (\n      <p\n        {...props}\n        className={className}\n        data-fs-product-information-description=\"\"\n        data-fs-product-information-description-collapse=\"none\"\n        data-fs-text=\"\"\n      >\n        {plain}\n      </p>\n    );\n  }\n\n  return (\n    <DescriptionCollapsible\n      {...props}\n      className={className}\n      collapse={collapse}\n      defaultExpanded={defaultExpanded}\n      collapsedLines={collapsedLines}\n      moreLabel={moreLabel}\n      lessLabel={lessLabel}\n      htmlProps={htmlProps}\n      panelChildren={panelChildren}\n    />\n  );\n}\n\ntype DescriptionCollapsibleProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {\n  collapse: Exclude<Collapse, 'none'>;\n  defaultExpanded: boolean;\n  collapsedLines: number;\n  moreLabel: string;\n  lessLabel: string;\n  htmlProps: { dangerouslySetInnerHTML: { __html: string } } | undefined;\n  panelChildren: string | null | undefined;\n};\n\nfunction DescriptionCollapsible({\n  collapse,\n  defaultExpanded,\n  collapsedLines,\n  moreLabel,\n  lessLabel,\n  className,\n  htmlProps,\n  panelChildren,\n  ...props\n}: DescriptionCollapsibleProps) {\n  const [open, setOpen] = useState(defaultExpanded);\n  // Only the 'showMore' branch uses panelId — its panel is a plain <div> we own end-to-end,\n  // so the trigger needs an explicit aria-controls. 'section' lets Base UI manage both the\n  // panel id and the trigger's aria-controls (per APG Disclosure: aria-controls is only\n  // required when the panel is open), which keeps the SSR HTML self-consistent without the\n  // layout-effect hop that Collapsible.Panel uses to sync an external id.\n  const panelId = useId();\n\n  // `collapsedLines` is a free `number` at the schema level, so 0, negatives, and decimals\n  // can reach the component. `-webkit-line-clamp` accepts an integer ≥ 1; anything else\n  // either renders no lines (0, negative) or behaves inconsistently across engines (decimals).\n  // Clamp here so invalid values fall back to the smallest visible state instead of leaking\n  // into the inline style.\n  const normalizedCollapsedLines = Math.max(1, Math.floor(collapsedLines));\n\n  const clampStyle: CSSProperties | undefined =\n    collapse === 'showMore' && !open\n      ? {\n          display: '-webkit-box',\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: normalizedCollapsedLines,\n          overflow: 'hidden',\n        }\n      : undefined;\n\n  const triggerLabel = open ? lessLabel : moreLabel;\n\n  return (\n    <Collapsible.Root\n      {...props}\n      className={className}\n      open={open}\n      onOpenChange={setOpen}\n      data-fs-product-information-description=\"\"\n      data-fs-product-information-description-collapse={collapse}\n    >\n      {collapse === 'section' ? (\n        <Collapsible.Panel\n          {...htmlProps}\n          hiddenUntilFound\n          keepMounted\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n        >\n          {panelChildren}\n        </Collapsible.Panel>\n      ) : (\n        <div\n          {...htmlProps}\n          id={panelId}\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n          style={clampStyle}\n        >\n          {panelChildren}\n        </div>\n      )}\n      <Collapsible.Trigger\n        // Base UI's `mergeProps` writes every key from `elementProps`, including ones whose\n        // value is `undefined` — passing `aria-controls={undefined}` would actively erase the\n        // attribute Base UI installs on the trigger when the panel is open. Only attach our\n        // own `aria-controls` for 'showMore', where we own the panel element directly.\n        {...(collapse === 'section' ? null : { 'aria-controls': panelId })}\n        data-fs-product-information-description-trigger=\"\"\n      >\n        {triggerLabel}\n      </Collapsible.Trigger>\n    </Collapsible.Root>\n  );\n}\n\nexport function ProductInformationBrand({ className, ...props }: ProductInformationBrandProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.brand) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-brand=\"\">\n      {ctx.brand}\n    </span>\n  );\n}\n\nexport function ProductInformationSku({ className, ...props }: ProductInformationSkuProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.sku) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-sku=\"\">\n      {ctx.sku}\n    </span>\n  );\n}\n\nexport function ProductInformationReferenceId({ className, ...props }: ProductInformationReferenceIdProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.referenceId) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-reference-id=\"\">\n      {ctx.referenceId}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductInformation = {\n  Root: ProductInformationRoot,\n  Title: ProductInformationTitle,\n  Description: ProductInformationDescription,\n  Brand: ProductInformationBrand,\n  Sku: ProductInformationSku,\n  ReferenceId: ProductInformationReferenceId,\n};\n"],"mappings":"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"}
+{"version":3,"file":"product-information.js","names":["Component"],"sources":["../../../src/matter/product-information/product-information.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties } from 'react';\nimport { createContext, useContext, useEffect, useId, useRef, useState } from 'react';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { ProductInformationDataFragment } from '../../sdk/generated/graphql.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment ProductInformationData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      title\n      description\n      descriptionHtml\n      referenceId\n      vendor\n      brand {\n        __typename\n        id\n        name\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            __typename\n            id\n            sku\n            name\n          }\n        }\n      }\n      seo {\n        title\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const ProductInformationDescriptionContent = defineContentType({\n  id: 'product-information-description',\n  title: 'Product Information Description',\n  description: 'Labels of the trigger that expands and collapses the product description.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      moreLabel: {\n        type: 'string',\n        title: 'Trigger label (collapsed)',\n        format: 'icu-message',\n        messageSource: 'Show more',\n      },\n      lessLabel: {\n        type: 'string',\n        title: 'Trigger label (expanded)',\n        format: 'icu-message',\n        messageSource: 'Show less',\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<ProductInformationDataFragment['productBySlug']>;\n\ntype ProductInformationContextData = {\n  title: string;\n  description: string | null;\n  descriptionHtml: string | null;\n  referenceId: string | null;\n  brand: string | null;\n  sku: string | null;\n  variantName: string | null;\n  seoTitle: string | null;\n};\n\ntype ProductInformationContextValue = ProductInformationContextData | null;\n\nconst PRODUCT_INFORMATION_CONTEXT_UNSET = Symbol('ProductInformationContextUnset');\n\ntype TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type DescriptionFormat = 'auto' | 'plain' | 'html';\n\ntype Collapse = 'none' | 'showMore' | 'section';\n\nexport type ProductInformationRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n};\n\nexport type ProductInformationTitleProps = Omit<ComponentPropsWithRef<'h1'>, 'children'> & {\n  as?: TitleAs;\n  separator?: string;\n};\n\n// `ComponentPropsWithoutRef` (not `WithRef`) because the wrapper element varies between `<p>`\n// and `<div>` depending on the resolved `format` branch. Exposing a `ref` typed for one element\n// would be unsound when the other branch resolves — the runtime element type and the\n// type-system promise would diverge silently. Refs are intentionally not part of the contract.\nexport type ProductInformationDescriptionProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children' | 'dangerouslySetInnerHTML'\n> &\n  MessageLocaleProp & {\n    /**\n     * Controls how the description renders.\n     * - `'auto'` (default) — prefers `descriptionHtml`; falls back to plain `description`; renders nothing when both are absent.\n     * - `'plain'` — strict plain text from `description`; never reads `descriptionHtml`.\n     * - `'html'` — strict rich HTML from `descriptionHtml` via `dangerouslySetInnerHTML`; renders nothing when absent (no fallback).\n     *\n     * Rich HTML is safe because Storefront API Core sanitizes `descriptionHtml` upstream.\n     *\n     * The rendered element follows from the resolved branch: plain text renders as `<p>`;\n     * rich HTML renders as `<div>` (so block-level markup inside `descriptionHtml` remains valid DOM).\n     * Both wrappers carry `data-fs-text=\"\"` so project-level `Text` typography cascades automatically.\n     */\n    format?: DescriptionFormat;\n    collapse?: Collapse;\n    defaultExpanded?: boolean;\n    collapsedLines?: number;\n    $content?: ContentValue<typeof ProductInformationDescriptionContent>;\n  };\n\nexport type ProductInformationBrandProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationSkuProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationReferenceIdProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductInformationContext = createContext<\n  ProductInformationContextValue | typeof PRODUCT_INFORMATION_CONTEXT_UNSET\n>(PRODUCT_INFORMATION_CONTEXT_UNSET);\n\nfunction useProductInformation(): ProductInformationContextValue {\n  const ctx = useContext(ProductInformationContext);\n  if (ctx === PRODUCT_INFORMATION_CONTEXT_UNSET) {\n    throw new Error('ProductInformation components must be used inside ProductInformationRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\nfunction transformProductInformationData(data: ProductSlice): ProductInformationContextData {\n  const brand = data.brand?.name ?? data.vendor ?? null;\n  const firstVariant = data.variants.edges[0]?.node ?? null;\n  const sku = firstVariant?.sku ?? null;\n  const variantName = firstVariant?.name ?? null;\n  const seoTitle = data.seo?.title ?? null;\n\n  return {\n    title: data.title,\n    description: data.description,\n    descriptionHtml: data.descriptionHtml,\n    referenceId: data.referenceId,\n    brand,\n    sku,\n    variantName,\n    seoTitle,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductInformationRootDefinition = defineComponent<ProductInformationRootProps>({\n  name: 'ProductInformationRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Product Information', category: 'commerce' },\n  schema: {},\n  providesContext: 'product-information',\n  guideline:\n    'Root container for PDP product text — wraps ProductInformationTitle, ProductInformationDescription, ProductInformationBrand, ProductInformationSku, and ProductInformationReferenceId (any subset, any order). See product-information.md.',\n});\n\nexport const ProductInformationTitleDefinition = defineComponent<ProductInformationTitleProps>({\n  name: 'ProductInformationTitle',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationTitle,\n  editor: { label: 'Product Title', category: 'commerce' },\n  schema: {\n    as: {\n      type: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const,\n      default: 'h1',\n      label: 'Element tag',\n    },\n    separator: { type: 'string', label: 'Variant separator' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product title inside a ProductInformationRoot (or any ancestor providing `product-information` context); `as` controls the heading level (`h1`–`h6`, default `h1`) and `separator` optionally appends the selected variant name.',\n});\n\nexport const ProductInformationDescriptionDefinition = defineComponent<ProductInformationDescriptionProps>({\n  name: 'ProductInformationDescription',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationDescription,\n  content: ProductInformationDescriptionContent,\n  editor: { label: 'Product Description', category: 'commerce' },\n  schema: {\n    format: {\n      type: ['auto', 'plain', 'html'] as const,\n      default: 'auto',\n      label: 'Description format',\n    },\n    collapse: {\n      type: ['none', 'showMore', 'section'] as const,\n      default: 'none',\n      label: 'Collapse pattern',\n    },\n    defaultExpanded: { type: 'boolean', default: true, label: 'Expanded by default' },\n    collapsedLines: { type: 'number', default: 4, label: 'Collapsed line count' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    \"Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with the `$content` trigger labels `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure).\",\n});\n\nexport const ProductInformationBrandDefinition = defineComponent<ProductInformationBrandProps>({\n  name: 'ProductInformationBrand',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationBrand,\n  editor: { label: 'Product Brand', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product brand name inside a ProductInformationRoot (or any ancestor providing `product-information` context); prefers `brand.name` and falls back to `vendor`.',\n});\n\nexport const ProductInformationSkuDefinition = defineComponent<ProductInformationSkuProps>({\n  name: 'ProductInformationSku',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationSku,\n  editor: { label: 'Product SKU', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the first-variant SKU code inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\nexport const ProductInformationReferenceIdDefinition = defineComponent<ProductInformationReferenceIdProps>({\n  name: 'ProductInformationReferenceId',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationReferenceId,\n  editor: { label: 'Product Reference ID', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the merchant reference ID inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductInformationRoot({\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductInformationRootProps) {\n  const $data = useDataOverride($dataProp);\n  const contextValue = $data ? transformProductInformationData($data) : null;\n\n  return (\n    <ProductInformationContext value={contextValue}>\n      <div {...props} className={className} data-fs-product-information=\"\">\n        {children}\n      </div>\n    </ProductInformationContext>\n  );\n}\n\nexport function ProductInformationTitle({ as = 'h1', separator, className, ...props }: ProductInformationTitleProps) {\n  const ctx = useProductInformation();\n  const variantName = ctx?.variantName ?? null;\n  const warnedRef = useRef(false);\n  const nullVariantSeenRef = useRef(false);\n\n  // NFR-3: warn once in production when `separator` is set but `variantName` stays null across\n  // commits (the SKU Selector gets one commit to hydrate before we conclude it's misconfigured).\n  // No deps array: the persistence check needs to evaluate on every commit, independent of any\n  // future memoization of the Root's context value.\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') return;\n    if (separator === undefined || !ctx) return;\n\n    if (variantName === null) {\n      if (nullVariantSeenRef.current && !warnedRef.current) {\n        warnedRef.current = true;\n        console.warn(\n          '[ProductInformationTitle] `separator` is set but the selected variant has no `name`; the title will render the product name alone. Ensure the SKU Selector wires Variant.name into the cache, or omit `separator` to silence this warning.',\n        );\n      }\n      nullVariantSeenRef.current = true;\n      return;\n    }\n\n    nullVariantSeenRef.current = false;\n  });\n\n  if (!ctx) return null;\n\n  const composed = separator !== undefined && variantName ? `${ctx.title}${separator}${variantName}` : ctx.title;\n\n  const Component = as;\n  return (\n    <Component\n      {...props}\n      className={className}\n      data-fs-product-information-title=\"\"\n      data-fs-product-information-title-as={as}\n    >\n      {composed}\n    </Component>\n  );\n}\n\nexport function ProductInformationDescription({\n  format = 'auto',\n  collapse = 'none',\n  defaultExpanded = true,\n  collapsedLines = 4,\n  $content,\n  $locale,\n  className,\n  ...props\n}: ProductInformationDescriptionProps) {\n  const ctx = useProductInformation();\n  const { format: formatMessage } = useMessageFormatter(ProductInformationDescriptionContent, $content);\n  if (!ctx) return null;\n\n  // `'auto'` accepts both branches and prefers HTML; `'html'` and `'plain'` are strict opt-ins.\n  const wantsRich = format === 'auto' || format === 'html';\n  const wantsPlain = format === 'auto' || format === 'plain';\n  const htmlPayload = wantsRich ? ctx.descriptionHtml : null;\n  const plain = wantsPlain ? ctx.description : null;\n  if (!htmlPayload && !plain) return null;\n\n  // `format='auto'|'html'` is the opt-in: `descriptionHtml` is expected to be sanitized upstream by storefront-api-core.\n  const htmlProps = htmlPayload ? { dangerouslySetInnerHTML: { __html: htmlPayload } } : undefined;\n  const panelChildren = htmlPayload ? undefined : plain;\n\n  if (collapse === 'none') {\n    if (htmlPayload) {\n      return (\n        <div\n          {...props}\n          {...htmlProps}\n          className={className}\n          data-fs-product-information-description=\"\"\n          data-fs-product-information-description-collapse=\"none\"\n          data-fs-text=\"\"\n        />\n      );\n    }\n\n    return (\n      <p\n        {...props}\n        className={className}\n        data-fs-product-information-description=\"\"\n        data-fs-product-information-description-collapse=\"none\"\n        data-fs-text=\"\"\n      >\n        {plain}\n      </p>\n    );\n  }\n\n  return (\n    <DescriptionCollapsible\n      {...props}\n      className={className}\n      collapse={collapse}\n      defaultExpanded={defaultExpanded}\n      collapsedLines={collapsedLines}\n      moreLabel={formatMessage('moreLabel')}\n      lessLabel={formatMessage('lessLabel')}\n      htmlProps={htmlProps}\n      panelChildren={panelChildren}\n    />\n  );\n}\n\ntype DescriptionCollapsibleProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {\n  collapse: Exclude<Collapse, 'none'>;\n  defaultExpanded: boolean;\n  collapsedLines: number;\n  moreLabel: string;\n  lessLabel: string;\n  htmlProps: { dangerouslySetInnerHTML: { __html: string } } | undefined;\n  panelChildren: string | null | undefined;\n};\n\nfunction DescriptionCollapsible({\n  collapse,\n  defaultExpanded,\n  collapsedLines,\n  moreLabel,\n  lessLabel,\n  className,\n  htmlProps,\n  panelChildren,\n  ...props\n}: DescriptionCollapsibleProps) {\n  const [open, setOpen] = useState(defaultExpanded);\n  // Only the 'showMore' branch uses panelId — its panel is a plain <div> we own end-to-end,\n  // so the trigger needs an explicit aria-controls. 'section' lets Base UI manage both the\n  // panel id and the trigger's aria-controls (per APG Disclosure: aria-controls is only\n  // required when the panel is open), which keeps the SSR HTML self-consistent without the\n  // layout-effect hop that Collapsible.Panel uses to sync an external id.\n  const panelId = useId();\n\n  // `collapsedLines` is a free `number` at the schema level, so 0, negatives, and decimals\n  // can reach the component. `-webkit-line-clamp` accepts an integer ≥ 1; anything else\n  // either renders no lines (0, negative) or behaves inconsistently across engines (decimals).\n  // Clamp here so invalid values fall back to the smallest visible state instead of leaking\n  // into the inline style.\n  const normalizedCollapsedLines = Math.max(1, Math.floor(collapsedLines));\n\n  const clampStyle: CSSProperties | undefined =\n    collapse === 'showMore' && !open\n      ? {\n          display: '-webkit-box',\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: normalizedCollapsedLines,\n          overflow: 'hidden',\n        }\n      : undefined;\n\n  const triggerLabel = open ? lessLabel : moreLabel;\n\n  return (\n    <Collapsible.Root\n      {...props}\n      className={className}\n      open={open}\n      onOpenChange={setOpen}\n      data-fs-product-information-description=\"\"\n      data-fs-product-information-description-collapse={collapse}\n    >\n      {collapse === 'section' ? (\n        <Collapsible.Panel\n          {...htmlProps}\n          hiddenUntilFound\n          keepMounted\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n        >\n          {panelChildren}\n        </Collapsible.Panel>\n      ) : (\n        <div\n          {...htmlProps}\n          id={panelId}\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n          style={clampStyle}\n        >\n          {panelChildren}\n        </div>\n      )}\n      <Collapsible.Trigger\n        // Base UI's `mergeProps` writes every key from `elementProps`, including ones whose\n        // value is `undefined` — passing `aria-controls={undefined}` would actively erase the\n        // attribute Base UI installs on the trigger when the panel is open. Only attach our\n        // own `aria-controls` for 'showMore', where we own the panel element directly.\n        {...(collapse === 'section' ? null : { 'aria-controls': panelId })}\n        data-fs-product-information-description-trigger=\"\"\n      >\n        {triggerLabel}\n      </Collapsible.Trigger>\n    </Collapsible.Root>\n  );\n}\n\nexport function ProductInformationBrand({ className, ...props }: ProductInformationBrandProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.brand) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-brand=\"\">\n      {ctx.brand}\n    </span>\n  );\n}\n\nexport function ProductInformationSku({ className, ...props }: ProductInformationSkuProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.sku) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-sku=\"\">\n      {ctx.sku}\n    </span>\n  );\n}\n\nexport function ProductInformationReferenceId({ className, ...props }: ProductInformationReferenceIdProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.referenceId) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-reference-id=\"\">\n      {ctx.referenceId}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductInformation = {\n  Root: ProductInformationRoot,\n  Title: ProductInformationTitle,\n  Description: ProductInformationDescription,\n  Brand: ProductInformationBrand,\n  Sku: ProductInformationSku,\n  ReferenceId: ProductInformationReferenceId,\n};\n"],"mappings":"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"}

package/dist/matter/product-list/product-list.d.ts

@@ -1,8 +1,26 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/matter/product-list/product-list.d.ts
+export declare const ProductCardTaxLabelContent: {
+  readonly id: "product-card-tax-label";
+  readonly title: "Product Card Tax Label";
+  readonly description: "Text of the tax label beside card prices.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Tax included";
+      };
+    };
+  };
+};
 export type ProductListItemImage = {
   src: string;
   alt: string;
@@ -27,8 +45,6 @@ export type ProductListRootProps = ComponentPropsWithRef<'div'> & {
   products?: ProductListItem[];
   /** When true, card prices render tax-inclusive (from the item's tax data). Default false. */
   usePriceWithTaxes?: boolean;
-  /** Text for the tax label part when tax display is on. Default `'Tax included'`. */
-  taxesLabel?: string;
 };
 export type ProductListGridProps = ComponentPropsWithRef<'div'>;
 export type ProductCardProps = ComponentPropsWithRef<'div'> & {
@@ -43,7 +59,9 @@ export type ProductCardImageProps = ComponentPropsWithRef<'img'> & {
 export type ProductCardNameProps = ComponentPropsWithRef<'span'>;
 export type ProductCardPriceProps = ComponentPropsWithRef<'span'>;
 export type ProductCardListPriceProps = ComponentPropsWithRef<'span'>;
-export type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'>;
+export type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'> & MessageLocaleProp & {
+  $content?: ContentValue<typeof ProductCardTaxLabelContent>;
+};
 export type ProductCardDiscountProps = ComponentPropsWithRef<'span'> & {
   format?: 'percentage' | 'absolute';
 };
@@ -58,17 +76,17 @@ export declare const ProductCardImageDefinition: ComponentDefinition<ProductCard
 export declare const ProductCardNameDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare const ProductCardPriceDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
 export declare const ProductCardListPriceDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-export declare const ProductCardTaxLabelDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ProductCardTaxLabelDefinition: ComponentDefinition<ProductCardTaxLabelProps>;
 export declare const ProductCardDiscountDefinition: ComponentDefinition<ProductCardDiscountProps>;
 export declare const ProductCardAddToCartDefinition: ComponentDefinition<ProductCardAddToCartProps>;
-export declare function ProductListRoot({ usePriceWithTaxes, taxesLabel, products, className, children, ...props }: ProductListRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListRoot({ usePriceWithTaxes, products, className, children, ...props }: ProductListRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductListGrid({ className, children, ...props }: ProductListGridProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductCard({ className, children, bordered, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductCardImage({ className, objectFit, aspectRatio, ...props }: ProductCardImageProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductCardName({ className, children, ...props }: ProductCardNameProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductCardPrice({ className, children, ...props }: ProductCardPriceProps): import("react/jsx-runtime").JSX.Element;
 export declare function ProductCardListPrice({ className, children, ...props }: ProductCardListPriceProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function ProductCardTaxLabel({ className, children, ...props }: ProductCardTaxLabelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductCardTaxLabel({ $content, $locale, className, children, ...props }: ProductCardTaxLabelProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ProductCardDiscount({ className, children, format, ...props }: ProductCardDiscountProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function ProductCardAddToCart({ className, children, onClick, $actions: $actionsProp, ...props }: ProductCardAddToCartProps): import("react/jsx-runtime").JSX.Element;
 export declare const ProductList: {

package/dist/matter/product-list/product-list.js

@@ -1,7 +1,9 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { Button } from "../../particles/button/button.js";
 import { Image } from "../../particles/image/image.js";
@@ -11,10 +13,22 @@ import { Text } from "../../particles/text/text.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/matter/product-list/product-list.tsx
-const ProductListConfigContext = createContext({
-	usePriceWithTaxes: false,
-	taxesLabel: "Tax included"
+const ProductCardTaxLabelContent = defineContentType({
+	id: "product-card-tax-label",
+	title: "Product Card Tax Label",
+	description: "Text of the tax label beside card prices.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Tax included"
+		} }
+	}
 });
+const ProductListConfigContext = createContext({ usePriceWithTaxes: false });
 function useProductListConfig() {
 	return useContext(ProductListConfigContext);
 }
@@ -47,19 +61,12 @@ const ProductListRootDefinition = defineComponent({
 		label: "Product List Root",
 		category: "commerce"
 	},
-	schema: {
-		usePriceWithTaxes: {
-			type: "boolean",
-			default: false,
-			label: "Use Price With Taxes"
-		},
-		taxesLabel: {
-			type: "string",
-			default: "Tax included",
-			label: "Taxes Label"
-		}
-	},
-	guideline: "Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the taxesLabel."
+	schema: { usePriceWithTaxes: {
+		type: "boolean",
+		default: false,
+		label: "Use Price With Taxes"
+	} },
+	guideline: "Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the tax label."
 });
 const ProductListGridDefinition = defineComponent({
 	name: "ProductListGrid",
@@ -150,12 +157,13 @@ const ProductCardTaxLabelDefinition = defineComponent({
 	name: "ProductCardTaxLabel",
 	importPath: "@vtex/faststore/components",
 	component: ProductCardTaxLabel,
+	content: ProductCardTaxLabelContent,
 	editor: {
 		label: "Product Card Tax Label",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from the taxesLabel config. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems."
+	guideline: "Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from its $content label, and children replace it. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems."
 });
 const ProductCardDiscountDefinition = defineComponent({
 	name: "ProductCardDiscount",
@@ -184,11 +192,8 @@ const ProductCardAddToCartDefinition = defineComponent({
 	actions: { cart: ["addItem"] },
 	guideline: "Add-to-cart button for the current product card; must be inside ProductListGrid."
 });
-function ProductListRoot({ usePriceWithTaxes = false, taxesLabel = "Tax included", products = [], className, children, ...props }) {
-	const config = useMemo(() => ({
-		usePriceWithTaxes,
-		taxesLabel
-	}), [usePriceWithTaxes, taxesLabel]);
+function ProductListRoot({ usePriceWithTaxes = false, products = [], className, children, ...props }) {
+	const config = useMemo(() => ({ usePriceWithTaxes }), [usePriceWithTaxes]);
 	return /* @__PURE__ */ jsx(ProductListConfigContext, {
 		value: config,
 		children: /* @__PURE__ */ jsx(ProductListProductsContext, {
@@ -278,15 +283,16 @@ function ProductCardListPrice({ className, children, ...props }) {
 		children: children ?? formatPrice(value, locale, item.currency ?? currency)
 	});
 }
-function ProductCardTaxLabel({ className, children, ...props }) {
-	const { usePriceWithTaxes, taxesLabel } = useProductListConfig();
+function ProductCardTaxLabel({ $content, $locale, className, children, ...props }) {
+	const { usePriceWithTaxes } = useProductListConfig();
+	const { format } = useMessageFormatter(ProductCardTaxLabelContent, $content);
 	if (!usePriceWithTaxes) return null;
 	return /* @__PURE__ */ jsx(Text, {
 		...props,
 		as: "span",
 		className,
 		"data-fs-product-card-tax-label": "",
-		children: children ?? taxesLabel
+		children: children ?? format("label")
 	});
 }
 function ProductCardDiscount({ className, children, format = "percentage", ...props }) {
@@ -339,6 +345,6 @@ const ProductList = {
 	CardAddToCart: ProductCardAddToCart
 };
 //#endregion
-export { ProductCard, ProductCardAddToCart, ProductCardAddToCartDefinition, ProductCardDefinition, ProductCardDiscount, ProductCardDiscountDefinition, ProductCardImage, ProductCardImageDefinition, ProductCardListPrice, ProductCardListPriceDefinition, ProductCardName, ProductCardNameDefinition, ProductCardPrice, ProductCardPriceDefinition, ProductCardTaxLabel, ProductCardTaxLabelDefinition, ProductList, ProductListConfigContext, ProductListGrid, ProductListGridDefinition, ProductListItemContext, ProductListRoot, ProductListRootDefinition };
+export { ProductCard, ProductCardAddToCart, ProductCardAddToCartDefinition, ProductCardDefinition, ProductCardDiscount, ProductCardDiscountDefinition, ProductCardImage, ProductCardImageDefinition, ProductCardListPrice, ProductCardListPriceDefinition, ProductCardName, ProductCardNameDefinition, ProductCardPrice, ProductCardPriceDefinition, ProductCardTaxLabel, ProductCardTaxLabelContent, ProductCardTaxLabelDefinition, ProductList, ProductListConfigContext, ProductListGrid, ProductListGridDefinition, ProductListItemContext, ProductListRoot, ProductListRootDefinition };
 
 //# sourceMappingURL=product-list.js.map

package/dist/matter/product-list/product-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-list.js","names":[],"sources":["../../../src/matter/product-list/product-list.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext, useMemo } from 'react';\nimport { Badge } from '../../particles/badge/badge.js';\nimport { Button } from '../../particles/button/button.js';\nimport { Container } from '../../particles/container/container.js';\nimport { Image } from '../../particles/image/image.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\n\n// ---------------------------------------------------------------------------\n// Product list config context (tax display)\n// ---------------------------------------------------------------------------\n\ntype ProductListConfig = {\n  usePriceWithTaxes: boolean;\n  taxesLabel: string;\n};\n\nexport const ProductListConfigContext = createContext<ProductListConfig>({\n  usePriceWithTaxes: false,\n  taxesLabel: 'Tax included',\n});\n\nfunction useProductListConfig(): ProductListConfig {\n  return useContext(ProductListConfigContext);\n}\n\nfunction formatPrice(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\n// Tax rate for the item: the explicit `taxPercentage` (e.g. 0.18) wins; otherwise it is derived\n// from the absolute tax amount over the price. Missing/zero-price data yields 0 (no change).\nfunction taxRate(item: ProductListItem): number {\n  if (item.taxPercentage != null) {\n    return item.taxPercentage;\n  }\n  if (item.tax != null && item.price > 0) {\n    return item.tax / item.price;\n  }\n  return 0;\n}\n\nfunction priceWithTaxes(base: number, item: ProductListItem): number {\n  return base * (1 + taxRate(item));\n}\n\n// ---------------------------------------------------------------------------\n// Product list item types\n// ---------------------------------------------------------------------------\n\nexport type ProductListItemImage = {\n  src: string;\n  alt: string;\n};\n\nexport type ProductListItem = {\n  id: string;\n  name: string;\n  image: ProductListItemImage;\n  price: number;\n  listPrice?: number;\n  variant?: string;\n  slug?: string;\n  // PDP path segment in the active locale; build product links from this, not `slug`.\n  routeSlug?: string;\n  // Widened for the Product Shelf (T2): fields the card parts T3–T7 read straight off the\n  // per-item context. Optional so the plain-`products` ProductListRoot (PLP) stays valid.\n  spotPrice?: number;\n  tax?: number;\n  taxPercentage?: number | null;\n  availableForSale?: boolean;\n  availableQuantity?: number;\n  currency?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Products context (provided by Root, consumed by Grid)\n// ---------------------------------------------------------------------------\n\nconst ProductListProductsContext = createContext<ProductListItem[]>([]);\n\n// ---------------------------------------------------------------------------\n// Item context (provided by Grid per product)\n// ---------------------------------------------------------------------------\n\nexport const ProductListItemContext = createContext<ProductListItem | null>(null);\n\nfunction useProductListItem(): ProductListItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('ProductCard components must be used inside ProductListGrid.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type ProductListRootProps = ComponentPropsWithRef<'div'> & {\n  products?: ProductListItem[];\n  /** When true, card prices render tax-inclusive (from the item's tax data). Default false. */\n  usePriceWithTaxes?: boolean;\n  /** Text for the tax label part when tax display is on. Default `'Tax included'`. */\n  taxesLabel?: string;\n};\n\nexport type ProductListGridProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductCardProps = ComponentPropsWithRef<'div'> & {\n  /** Toggles the card border. Reflects onto data-fs-product-card-bordered; a swatch draws the border. Default true. */\n  bordered?: boolean;\n};\n\nexport type ProductCardImageProps = ComponentPropsWithRef<'img'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  /** CSS `aspect-ratio` (e.g. `'1/1'`, `'3/4'`, `'16/9'`); lays out the image box, orthogonal to `objectFit`. */\n  aspectRatio?: string;\n};\n\nexport type ProductCardNameProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardListPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardDiscountProps = ComponentPropsWithRef<'span'> & {\n  format?: 'percentage' | 'absolute';\n};\n\nexport type ProductCardAddToCartProps = ComponentPropsWithRef<'button'> & {\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductListRootDefinition = defineComponent<ProductListRootProps>({\n  name: 'ProductListRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductListRoot,\n  editor: { label: 'Product List Root', category: 'commerce' },\n  schema: {\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n  },\n  guideline:\n    'Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the taxesLabel.',\n});\n\nexport const ProductListGridDefinition = defineComponent<ProductListGridProps>({\n  name: 'ProductListGrid',\n  importPath: '@vtex/faststore/components',\n  component: ProductListGrid,\n  editor: { label: 'Product List Grid', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Repeating grid that renders the ProductCard* template for each product; must be a direct child of ProductListRoot.',\n});\n\nexport const ProductCardDefinition = defineComponent<ProductCardProps>({\n  name: 'ProductCard',\n  importPath: '@vtex/faststore/components',\n  component: ProductCard,\n  editor: { label: 'Product Card', category: 'commerce' },\n  schema: {\n    bordered: { type: 'boolean', default: true, label: 'Bordered' },\n  },\n  guideline:\n    'Optional card wrapper for the ProductCard* parts; always emits data-fs-product-card and data-fs-product-card-bordered (true/false, from the bordered toggle), and adds data-fs-product-card-out-of-stock when the product is unavailable (derived from availability, no prop). The border look is a swatch keyed off data-fs-product-card-bordered. Renders all children unchanged. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardImageDefinition = defineComponent<ProductCardImageProps>({\n  name: 'ProductCardImage',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardImage,\n  editor: { label: 'Product Card Image', category: 'commerce' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'cover', label: 'Object Fit' },\n    aspectRatio: { type: 'string', label: 'Aspect Ratio' },\n  },\n  guideline:\n    'Renders the product image with a configurable aspectRatio (e.g. 1/1, 3/4, 16/9) and objectFit. Alt text comes from the catalog. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardNameDefinition = defineComponent<ProductCardNameProps>({\n  name: 'ProductCardName',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardName,\n  editor: { label: 'Product Card Name', category: 'commerce' },\n  schema: {},\n  guideline: 'Renders the product name. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardPriceDefinition = defineComponent<ProductCardPriceProps>({\n  name: 'ProductCardPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardPrice,\n  editor: { label: 'Product Card Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the selling price formatted from the active storefront context; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardListPriceDefinition = defineComponent<ProductCardListPriceProps>({\n  name: 'ProductCardListPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardListPrice,\n  editor: { label: 'Product Card List Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the original (strikethrough) list price when it exceeds the selling price; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardTaxLabelDefinition = defineComponent<ProductCardTaxLabelProps>({\n  name: 'ProductCardTaxLabel',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardTaxLabel,\n  editor: { label: 'Product Card Tax Label', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from the taxesLabel config. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardDiscountDefinition = defineComponent<ProductCardDiscountProps>({\n  name: 'ProductCardDiscount',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardDiscount,\n  editor: { label: 'Product Card Discount', category: 'commerce' },\n  schema: {\n    format: { type: ['percentage', 'absolute'] as const, default: 'percentage', label: 'Discount Format' },\n  },\n  guideline:\n    'Discount badge for the current product; auto-computes the markdown from listPrice vs price and renders only when a discount exists. Compose it to show the badge, omit it to hide it (no toggle). Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardAddToCartDefinition = defineComponent<ProductCardAddToCartProps>({\n  name: 'ProductCardAddToCart',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardAddToCart,\n  editor: { label: 'Product Card Add to Cart', category: 'commerce' },\n  schema: {},\n  actions: { cart: ['addItem'] },\n  guideline: 'Add-to-cart button for the current product card; must be inside ProductListGrid.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductListRoot({\n  usePriceWithTaxes = false,\n  taxesLabel = 'Tax included',\n  products = [],\n  className,\n  children,\n  ...props\n}: ProductListRootProps) {\n  const config = useMemo(() => ({ usePriceWithTaxes, taxesLabel }), [usePriceWithTaxes, taxesLabel]);\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductListProductsContext value={products}>\n        <Container {...props} className={className} data-fs-product-list-root=\"\">\n          {children}\n        </Container>\n      </ProductListProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\nexport function ProductListGrid({ className, children, ...props }: ProductListGridProps) {\n  const products = useContext(ProductListProductsContext);\n\n  return (\n    <Container {...props} className={className} data-fs-product-list-grid=\"\">\n      {products.map((product) => (\n        <ProductListItemContext key={product.id} value={product}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </Container>\n  );\n}\n\nexport function ProductCard({ className, children, bordered = true, ...props }: ProductCardProps) {\n  const item = useProductListItem();\n  const outOfStock = item.availableForSale === false || item.availableQuantity === 0;\n\n  return (\n    <Container\n      {...props}\n      className={className}\n      data-fs-product-card=\"\"\n      data-fs-product-card-bordered={String(bordered)}\n      data-fs-product-card-out-of-stock={outOfStock ? '' : undefined}\n    >\n      {children}\n    </Container>\n  );\n}\n\nexport function ProductCardImage({ className, objectFit = 'cover', aspectRatio, ...props }: ProductCardImageProps) {\n  const item = useProductListItem();\n\n  return (\n    <Image\n      {...props}\n      src={item.image.src}\n      alt={item.image.alt}\n      aspectRatio={aspectRatio}\n      className={className}\n      style={{ objectFit, ...props.style }}\n      data-fs-product-card-image=\"\"\n    />\n  );\n}\n\nexport function ProductCardName({ className, children, ...props }: ProductCardNameProps) {\n  const item = useProductListItem();\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-name=\"\">\n      {children ?? item.name}\n    </Text>\n  );\n}\n\nexport function ProductCardPrice({ className, children, ...props }: ProductCardPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n  const value = usePriceWithTaxes ? priceWithTaxes(item.price, item) : item.price;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardListPrice({ className, children, ...props }: ProductCardListPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  if (!item.listPrice || item.listPrice <= item.price) {\n    return null;\n  }\n\n  const value = usePriceWithTaxes ? priceWithTaxes(item.listPrice, item) : item.listPrice;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-list-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardTaxLabel({ className, children, ...props }: ProductCardTaxLabelProps) {\n  const { usePriceWithTaxes, taxesLabel } = useProductListConfig();\n\n  if (!usePriceWithTaxes) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-tax-label=\"\">\n      {children ?? taxesLabel}\n    </Text>\n  );\n}\n\nexport function ProductCardDiscount({\n  className,\n  children,\n  format = 'percentage',\n  ...props\n}: ProductCardDiscountProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  const { listPrice, price } = item;\n  if (!listPrice || listPrice <= price) {\n    return null;\n  }\n\n  const amountOff = listPrice - price;\n  const percentOff = Math.round((amountOff / listPrice) * 100);\n  const tier = percentOff >= 30 ? 'high' : percentOff >= 15 ? 'medium' : 'low';\n  // The percentage is tax-invariant (both prices scale by the same factor), but the absolute amount\n  // must match the displayed prices, which are tax-inclusive when usePriceWithTaxes is enabled.\n  const displayedAmountOff = usePriceWithTaxes ? priceWithTaxes(amountOff, item) : amountOff;\n  const label =\n    format === 'absolute'\n      ? `-${formatPrice(displayedAmountOff, locale, item.currency ?? currency)}`\n      : `-${percentOff}%`;\n\n  return (\n    <Badge {...props} className={className} data-fs-product-card-discount=\"\" data-fs-product-card-discount-tier={tier}>\n      {children ?? label}\n    </Badge>\n  );\n}\n\nexport function ProductCardAddToCart({\n  className,\n  children,\n  onClick,\n  $actions: $actionsProp,\n  ...props\n}: ProductCardAddToCartProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const item = useProductListItem();\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    void $actions?.cart?.addItem?.({ variantId: item.id, seller: '1' });\n    onClick?.(e);\n  }\n\n  return (\n    <Button {...props} className={className} onClick={handleClick} data-fs-product-card-add-to-cart=\"\">\n      {children}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductList = {\n  Root: ProductListRoot,\n  Grid: ProductListGrid,\n  Card: ProductCard,\n  CardImage: ProductCardImage,\n  CardName: ProductCardName,\n  CardPrice: ProductCardPrice,\n  CardListPrice: ProductCardListPrice,\n  CardTaxLabel: ProductCardTaxLabel,\n  CardDiscount: ProductCardDiscount,\n  CardAddToCart: ProductCardAddToCart,\n};\n"],"mappings":"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"}
+{"version":3,"file":"product-list.js","names":[],"sources":["../../../src/matter/product-list/product-list.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext, useMemo } from 'react';\nimport { Badge } from '../../particles/badge/badge.js';\nimport { Button } from '../../particles/button/button.js';\nimport { Container } from '../../particles/container/container.js';\nimport { Image } from '../../particles/image/image.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const ProductCardTaxLabelContent = defineContentType({\n  id: 'product-card-tax-label',\n  title: 'Product Card Tax Label',\n  description: 'Text of the tax label beside card prices.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'Tax included' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Product list config context (tax display)\n// ---------------------------------------------------------------------------\n\ntype ProductListConfig = {\n  usePriceWithTaxes: boolean;\n};\n\nexport const ProductListConfigContext = createContext<ProductListConfig>({\n  usePriceWithTaxes: false,\n});\n\nfunction useProductListConfig(): ProductListConfig {\n  return useContext(ProductListConfigContext);\n}\n\nfunction formatPrice(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\n// Tax rate for the item: the explicit `taxPercentage` (e.g. 0.18) wins; otherwise it is derived\n// from the absolute tax amount over the price. Missing/zero-price data yields 0 (no change).\nfunction taxRate(item: ProductListItem): number {\n  if (item.taxPercentage != null) {\n    return item.taxPercentage;\n  }\n  if (item.tax != null && item.price > 0) {\n    return item.tax / item.price;\n  }\n  return 0;\n}\n\nfunction priceWithTaxes(base: number, item: ProductListItem): number {\n  return base * (1 + taxRate(item));\n}\n\n// ---------------------------------------------------------------------------\n// Product list item types\n// ---------------------------------------------------------------------------\n\nexport type ProductListItemImage = {\n  src: string;\n  alt: string;\n};\n\nexport type ProductListItem = {\n  id: string;\n  name: string;\n  image: ProductListItemImage;\n  price: number;\n  listPrice?: number;\n  variant?: string;\n  slug?: string;\n  // PDP path segment in the active locale; build product links from this, not `slug`.\n  routeSlug?: string;\n  // Widened for the Product Shelf (T2): fields the card parts T3–T7 read straight off the\n  // per-item context. Optional so the plain-`products` ProductListRoot (PLP) stays valid.\n  spotPrice?: number;\n  tax?: number;\n  taxPercentage?: number | null;\n  availableForSale?: boolean;\n  availableQuantity?: number;\n  currency?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Products context (provided by Root, consumed by Grid)\n// ---------------------------------------------------------------------------\n\nconst ProductListProductsContext = createContext<ProductListItem[]>([]);\n\n// ---------------------------------------------------------------------------\n// Item context (provided by Grid per product)\n// ---------------------------------------------------------------------------\n\nexport const ProductListItemContext = createContext<ProductListItem | null>(null);\n\nfunction useProductListItem(): ProductListItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('ProductCard components must be used inside ProductListGrid.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type ProductListRootProps = ComponentPropsWithRef<'div'> & {\n  products?: ProductListItem[];\n  /** When true, card prices render tax-inclusive (from the item's tax data). Default false. */\n  usePriceWithTaxes?: boolean;\n};\n\nexport type ProductListGridProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductCardProps = ComponentPropsWithRef<'div'> & {\n  /** Toggles the card border. Reflects onto data-fs-product-card-bordered; a swatch draws the border. Default true. */\n  bordered?: boolean;\n};\n\nexport type ProductCardImageProps = ComponentPropsWithRef<'img'> & {\n  objectFit?: 'contain' | 'cover' | 'fill' | 'none';\n  /** CSS `aspect-ratio` (e.g. `'1/1'`, `'3/4'`, `'16/9'`); lays out the image box, orthogonal to `objectFit`. */\n  aspectRatio?: string;\n};\n\nexport type ProductCardNameProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardListPriceProps = ComponentPropsWithRef<'span'>;\n\nexport type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof ProductCardTaxLabelContent>;\n  };\n\nexport type ProductCardDiscountProps = ComponentPropsWithRef<'span'> & {\n  format?: 'percentage' | 'absolute';\n};\n\nexport type ProductCardAddToCartProps = ComponentPropsWithRef<'button'> & {\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductListRootDefinition = defineComponent<ProductListRootProps>({\n  name: 'ProductListRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductListRoot,\n  editor: { label: 'Product List Root', category: 'commerce' },\n  schema: {\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n  },\n  guideline:\n    'Top-level wrapper for the product list; compose as ProductListRoot > ProductListGrid > ProductCard* children. Set usePriceWithTaxes to render tax-inclusive card prices and compose ProductCardTaxLabel to show the tax label.',\n});\n\nexport const ProductListGridDefinition = defineComponent<ProductListGridProps>({\n  name: 'ProductListGrid',\n  importPath: '@vtex/faststore/components',\n  component: ProductListGrid,\n  editor: { label: 'Product List Grid', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Repeating grid that renders the ProductCard* template for each product; must be a direct child of ProductListRoot.',\n});\n\nexport const ProductCardDefinition = defineComponent<ProductCardProps>({\n  name: 'ProductCard',\n  importPath: '@vtex/faststore/components',\n  component: ProductCard,\n  editor: { label: 'Product Card', category: 'commerce' },\n  schema: {\n    bordered: { type: 'boolean', default: true, label: 'Bordered' },\n  },\n  guideline:\n    'Optional card wrapper for the ProductCard* parts; always emits data-fs-product-card and data-fs-product-card-bordered (true/false, from the bordered toggle), and adds data-fs-product-card-out-of-stock when the product is unavailable (derived from availability, no prop). The border look is a swatch keyed off data-fs-product-card-bordered. Renders all children unchanged. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardImageDefinition = defineComponent<ProductCardImageProps>({\n  name: 'ProductCardImage',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardImage,\n  editor: { label: 'Product Card Image', category: 'commerce' },\n  schema: {\n    objectFit: { type: ['contain', 'cover', 'fill', 'none'] as const, default: 'cover', label: 'Object Fit' },\n    aspectRatio: { type: 'string', label: 'Aspect Ratio' },\n  },\n  guideline:\n    'Renders the product image with a configurable aspectRatio (e.g. 1/1, 3/4, 16/9) and objectFit. Alt text comes from the catalog. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardNameDefinition = defineComponent<ProductCardNameProps>({\n  name: 'ProductCardName',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardName,\n  editor: { label: 'Product Card Name', category: 'commerce' },\n  schema: {},\n  guideline: 'Renders the product name. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardPriceDefinition = defineComponent<ProductCardPriceProps>({\n  name: 'ProductCardPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardPrice,\n  editor: { label: 'Product Card Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the selling price formatted from the active storefront context; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardListPriceDefinition = defineComponent<ProductCardListPriceProps>({\n  name: 'ProductCardListPrice',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardListPrice,\n  editor: { label: 'Product Card List Price', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Displays the original (strikethrough) list price when it exceeds the selling price; renders tax-inclusive when usePriceWithTaxes is enabled. Must be inside ProductListGrid.',\n});\n\nexport const ProductCardTaxLabelDefinition = defineComponent<ProductCardTaxLabelProps>({\n  name: 'ProductCardTaxLabel',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardTaxLabel,\n  content: ProductCardTaxLabelContent,\n  editor: { label: 'Product Card Tax Label', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Tax label (e.g. \"Tax included\") shown beside the price. Renders only when the ProductListRoot/ProductShelfRoot config usePriceWithTaxes is enabled (state-driven, no toggle); the text comes from its $content label, and children replace it. Compose it to place the label, omit it to hide it. Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardDiscountDefinition = defineComponent<ProductCardDiscountProps>({\n  name: 'ProductCardDiscount',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardDiscount,\n  editor: { label: 'Product Card Discount', category: 'commerce' },\n  schema: {\n    format: { type: ['percentage', 'absolute'] as const, default: 'percentage', label: 'Discount Format' },\n  },\n  guideline:\n    'Discount badge for the current product; auto-computes the markdown from listPrice vs price and renders only when a discount exists. Compose it to show the badge, omit it to hide it (no toggle). Must be inside ProductListGrid / ProductShelfItems.',\n});\n\nexport const ProductCardAddToCartDefinition = defineComponent<ProductCardAddToCartProps>({\n  name: 'ProductCardAddToCart',\n  importPath: '@vtex/faststore/components',\n  component: ProductCardAddToCart,\n  editor: { label: 'Product Card Add to Cart', category: 'commerce' },\n  schema: {},\n  actions: { cart: ['addItem'] },\n  guideline: 'Add-to-cart button for the current product card; must be inside ProductListGrid.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductListRoot({\n  usePriceWithTaxes = false,\n  products = [],\n  className,\n  children,\n  ...props\n}: ProductListRootProps) {\n  const config = useMemo(() => ({ usePriceWithTaxes }), [usePriceWithTaxes]);\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductListProductsContext value={products}>\n        <Container {...props} className={className} data-fs-product-list-root=\"\">\n          {children}\n        </Container>\n      </ProductListProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\nexport function ProductListGrid({ className, children, ...props }: ProductListGridProps) {\n  const products = useContext(ProductListProductsContext);\n\n  return (\n    <Container {...props} className={className} data-fs-product-list-grid=\"\">\n      {products.map((product) => (\n        <ProductListItemContext key={product.id} value={product}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </Container>\n  );\n}\n\nexport function ProductCard({ className, children, bordered = true, ...props }: ProductCardProps) {\n  const item = useProductListItem();\n  const outOfStock = item.availableForSale === false || item.availableQuantity === 0;\n\n  return (\n    <Container\n      {...props}\n      className={className}\n      data-fs-product-card=\"\"\n      data-fs-product-card-bordered={String(bordered)}\n      data-fs-product-card-out-of-stock={outOfStock ? '' : undefined}\n    >\n      {children}\n    </Container>\n  );\n}\n\nexport function ProductCardImage({ className, objectFit = 'cover', aspectRatio, ...props }: ProductCardImageProps) {\n  const item = useProductListItem();\n\n  return (\n    <Image\n      {...props}\n      src={item.image.src}\n      alt={item.image.alt}\n      aspectRatio={aspectRatio}\n      className={className}\n      style={{ objectFit, ...props.style }}\n      data-fs-product-card-image=\"\"\n    />\n  );\n}\n\nexport function ProductCardName({ className, children, ...props }: ProductCardNameProps) {\n  const item = useProductListItem();\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-name=\"\">\n      {children ?? item.name}\n    </Text>\n  );\n}\n\nexport function ProductCardPrice({ className, children, ...props }: ProductCardPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n  const value = usePriceWithTaxes ? priceWithTaxes(item.price, item) : item.price;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardListPrice({ className, children, ...props }: ProductCardListPriceProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  if (!item.listPrice || item.listPrice <= item.price) {\n    return null;\n  }\n\n  const value = usePriceWithTaxes ? priceWithTaxes(item.listPrice, item) : item.listPrice;\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-list-price=\"\">\n      {children ?? formatPrice(value, locale, item.currency ?? currency)}\n    </Text>\n  );\n}\n\nexport function ProductCardTaxLabel({ $content, $locale, className, children, ...props }: ProductCardTaxLabelProps) {\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { format } = useMessageFormatter(ProductCardTaxLabelContent, $content);\n\n  if (!usePriceWithTaxes) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"span\" className={className} data-fs-product-card-tax-label=\"\">\n      {children ?? format('label')}\n    </Text>\n  );\n}\n\nexport function ProductCardDiscount({\n  className,\n  children,\n  format = 'percentage',\n  ...props\n}: ProductCardDiscountProps) {\n  const item = useProductListItem();\n  const { usePriceWithTaxes } = useProductListConfig();\n  const { locale, currency } = useStorefrontContext();\n\n  const { listPrice, price } = item;\n  if (!listPrice || listPrice <= price) {\n    return null;\n  }\n\n  const amountOff = listPrice - price;\n  const percentOff = Math.round((amountOff / listPrice) * 100);\n  const tier = percentOff >= 30 ? 'high' : percentOff >= 15 ? 'medium' : 'low';\n  // The percentage is tax-invariant (both prices scale by the same factor), but the absolute amount\n  // must match the displayed prices, which are tax-inclusive when usePriceWithTaxes is enabled.\n  const displayedAmountOff = usePriceWithTaxes ? priceWithTaxes(amountOff, item) : amountOff;\n  const label =\n    format === 'absolute'\n      ? `-${formatPrice(displayedAmountOff, locale, item.currency ?? currency)}`\n      : `-${percentOff}%`;\n\n  return (\n    <Badge {...props} className={className} data-fs-product-card-discount=\"\" data-fs-product-card-discount-tier={tier}>\n      {children ?? label}\n    </Badge>\n  );\n}\n\nexport function ProductCardAddToCart({\n  className,\n  children,\n  onClick,\n  $actions: $actionsProp,\n  ...props\n}: ProductCardAddToCartProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const item = useProductListItem();\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    void $actions?.cart?.addItem?.({ variantId: item.id, seller: '1' });\n    onClick?.(e);\n  }\n\n  return (\n    <Button {...props} className={className} onClick={handleClick} data-fs-product-card-add-to-cart=\"\">\n      {children}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductList = {\n  Root: ProductListRoot,\n  Grid: ProductListGrid,\n  Card: ProductCard,\n  CardImage: ProductCardImage,\n  CardName: ProductCardName,\n  CardPrice: ProductCardPrice,\n  CardListPrice: ProductCardListPrice,\n  CardTaxLabel: ProductCardTaxLabel,\n  CardDiscount: ProductCardDiscount,\n  CardAddToCart: ProductCardAddToCart,\n};\n"],"mappings":"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"}

package/dist/matter/product-shelf/product-shelf.d.ts

@@ -120,8 +120,6 @@ export type ProductShelfRootProps = ComponentPropsWithRef<'section'> & Partial<P
   itemsPerPage?: number;
   /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */
   usePriceWithTaxes?: boolean;
-  /** Text for the tax label part when tax display is on. Default `'Tax included'`. */
-  taxesLabel?: string;
   products?: ProductShelfItem[];
   /** Injected by the compiler, sliced from the page's or layout's composite content entry. */
   $content?: ContentValue<typeof ProductShelfContent>;
@@ -141,7 +139,7 @@ export declare const ProductShelfRootDefinition: ComponentDefinition<ProductShel
 export declare const ProductShelfOnMountRootDefinition: ComponentDefinition<ProductShelfOnMountRootProps>;
 export declare const ProductShelfItemsDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const ProductShelfHeadingDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
-export declare function ProductShelfRoot({ first, itemsPerPage, sort, searchTerm, categoryId, brandId, collectionId, availableOnly, usePriceWithTaxes, taxesLabel, products, $content, $data: $dataProp, className, children, ...props }: ProductShelfRootProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductShelfRoot({ first, itemsPerPage, sort, searchTerm, categoryId, brandId, collectionId, availableOnly, usePriceWithTaxes, products, $content, $data: $dataProp, className, children, ...props }: ProductShelfRootProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ProductShelfRoot {
   var Skeleton: typeof ProductShelfSkeleton;
 }