@vtex/faststore 0.0.10 → 0.0.12

package/dist/particles/carousel/carousel.js

@@ -1,16 +1,93 @@
 "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 { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/particles/carousel/carousel.tsx
+const CarouselRootContent = defineContentType({
+	id: "carousel-root",
+	title: "Carousel Root",
+	description: "Accessible name of the carousel region.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Accessible label",
+			format: "icu-message",
+			messageSource: "Carousel"
+		} }
+	}
+});
+const CarouselPreviousContent = defineContentType({
+	id: "carousel-previous",
+	title: "Carousel Previous",
+	description: "Accessible name of the previous-page control.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Accessible label",
+			format: "icu-message",
+			messageSource: "Previous"
+		} }
+	}
+});
+const CarouselNextContent = defineContentType({
+	id: "carousel-next",
+	title: "Carousel Next",
+	description: "Accessible name of the next-page control.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Accessible label",
+			format: "icu-message",
+			messageSource: "Next"
+		} }
+	}
+});
+const CarouselBulletsContent = defineContentType({
+	id: "carousel-bullets",
+	title: "Carousel Bullets",
+	description: "Accessible names of the page bullets and of their group.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			ariaLabel: {
+				type: "string",
+				title: "Group accessible label",
+				format: "icu-message",
+				messageSource: "Choose page"
+			},
+			bulletLabel: {
+				type: "string",
+				title: "Bullet accessible label",
+				description: "The page argument is the 1-based page number.",
+				format: "icu-message",
+				messageSource: "Go to page {page}",
+				messageArguments: {
+					type: "object",
+					properties: { page: { type: "integer" } }
+				},
+				messageExample: { page: 2 }
+			}
+		}
+	}
+});
 const CarouselContext = createContext(null);
 function useCarousel() {
 	const ctx = useContext(CarouselContext);
 	if (!ctx) throw new Error("Carousel components must be used inside CarouselRoot.");
 	return ctx;
 }
-function CarouselRoot({ infiniteMode = false, variant = "slide", itemsPerPage = 1, defaultPage = 0, label = "Carousel", children, ...props }) {
+function CarouselRoot({ infiniteMode = false, variant = "slide", itemsPerPage = 1, defaultPage = 0, $locale, $content, children, ...props }) {
+	const messages = useMessageFormatter(CarouselRootContent, $content);
 	const [currentPage, setCurrentPage] = useState(defaultPage);
 	const [itemCount, setItemCountState] = useState(0);
 	const perPage = Math.max(1, itemsPerPage);
@@ -67,7 +144,7 @@ function CarouselRoot({ infiniteMode = false, variant = "slide", itemsPerPage =
 			"data-fs-carousel": "",
 			"data-fs-carousel-variant": variant,
 			"aria-roledescription": "carousel",
-			"aria-label": label,
+			"aria-label": messages.format("label"),
 			children
 		})
 	});
@@ -152,8 +229,9 @@ function CarouselTrack({ children, style, ref, onScroll, ...props }) {
 		})
 	});
 }
-function CarouselPrevious({ children, onClick, ...props }) {
+function CarouselPrevious({ $locale, $content, children, onClick, ...props }) {
 	const { previous, canGoPrevious } = useCarousel();
+	const messages = useMessageFormatter(CarouselPreviousContent, $content);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		disabled: !canGoPrevious,
@@ -161,14 +239,15 @@ function CarouselPrevious({ children, onClick, ...props }) {
 			onClick?.(event);
 			if (!event.defaultPrevented) previous();
 		},
-		"aria-label": "Previous",
+		"aria-label": messages.format("label"),
 		"data-fs-carousel-previous": "",
 		...props,
 		children
 	});
 }
-function CarouselNext({ children, onClick, ...props }) {
+function CarouselNext({ $locale, $content, children, onClick, ...props }) {
 	const { next, canGoNext } = useCarousel();
+	const messages = useMessageFormatter(CarouselNextContent, $content);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		disabled: !canGoNext,
@@ -176,15 +255,17 @@ function CarouselNext({ children, onClick, ...props }) {
 			onClick?.(event);
 			if (!event.defaultPrevented) next();
 		},
-		"aria-label": "Next",
+		"aria-label": messages.format("label"),
 		"data-fs-carousel-next": "",
 		...props,
 		children
 	});
 }
-function CarouselBullets({ ariaLabel = "Choose page", bulletLabel = "Go to page {page}", hideWhenSingle = true, ...props }) {
+function CarouselBullets({ $locale, $content, hideWhenSingle = true, ...props }) {
 	const { totalPages, currentPage, goToPage } = useCarousel();
+	const messages = useMessageFormatter(CarouselBulletsContent, $content);
 	if (hideWhenSingle && totalPages <= 1) return null;
+	const ariaLabel = messages.format("ariaLabel");
 	function handleKeyDown(event, page) {
 		let target = page;
 		switch (event.key) {
@@ -215,7 +296,7 @@ function CarouselBullets({ ariaLabel = "Choose page", bulletLabel = "Go to page
 			const isActive = page === currentPage;
 			return /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": bulletLabel.replace("{page}", String(page + 1)),
+				"aria-label": messages.format("bulletLabel", { page: page + 1 }),
 				"aria-current": isActive,
 				"data-fs-carousel-bullet": "",
 				"data-fs-carousel-bullet-selected": String(isActive),
@@ -229,6 +310,7 @@ const CarouselRootDefinition = defineComponent({
 	name: "CarouselRoot",
 	importPath: "@vtex/faststore/components",
 	component: CarouselRoot,
+	content: CarouselRootContent,
 	editor: {
 		label: "Carousel Root",
 		category: "layout"
@@ -253,14 +335,9 @@ const CarouselRootDefinition = defineComponent({
 			type: "number",
 			default: 0,
 			label: "Default Page"
-		},
-		label: {
-			type: "string",
-			default: "Carousel",
-			label: "Aria Label"
 		}
 	},
-	guideline: "Root of the carousel. Provides paging state to all parts. Compose as: CarouselRoot > (CarouselTrack > [item children] + CarouselPrevious + CarouselNext + CarouselBullets). Set infiniteMode=true to loop seamlessly (arrows never disable); variant=\"scroll\" for native overflow, \"slide\" for transform transitions. itemsPerPage sets how many children are visible per page. Holds no product or media data — nest any children in CarouselTrack."
+	guideline: "Root of the carousel. Provides paging state to all parts. Compose as: CarouselRoot > (CarouselTrack > [item children] + CarouselPrevious + CarouselNext + CarouselBullets). Set infiniteMode=true to loop seamlessly (arrows never disable); variant=\"scroll\" for native overflow, \"slide\" for transform transitions. itemsPerPage sets how many children are visible per page. Its accessible name comes from the $content field label. Holds no product or media data — nest any children in CarouselTrack."
 });
 const CarouselTrackDefinition = defineComponent({
 	name: "CarouselTrack",
@@ -277,50 +354,41 @@ const CarouselPreviousDefinition = defineComponent({
 	name: "CarouselPrevious",
 	importPath: "@vtex/faststore/components",
 	component: CarouselPrevious,
+	content: CarouselPreviousContent,
 	editor: {
 		label: "Carousel Previous",
 		category: "action"
 	},
 	schema: {},
-	guideline: "Moves the track one page backward. Disabled on the first page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the last page). Accepts any children (Icon, text). Must be inside CarouselRoot."
+	guideline: "Moves the track one page backward. Disabled on the first page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the last page). Accepts any children (Icon, text); its accessible name comes from the $content field label. Must be inside CarouselRoot."
 });
 const CarouselNextDefinition = defineComponent({
 	name: "CarouselNext",
 	importPath: "@vtex/faststore/components",
 	component: CarouselNext,
+	content: CarouselNextContent,
 	editor: {
 		label: "Carousel Next",
 		category: "action"
 	},
 	schema: {},
-	guideline: "Moves the track one page forward. Disabled on the last page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the first page). Accepts any children (Icon, text). Must be inside CarouselRoot."
+	guideline: "Moves the track one page forward. Disabled on the last page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the first page). Accepts any children (Icon, text); its accessible name comes from the $content field label. Must be inside CarouselRoot."
 });
 const CarouselBulletsDefinition = defineComponent({
 	name: "CarouselBullets",
 	importPath: "@vtex/faststore/components",
 	component: CarouselBullets,
+	content: CarouselBulletsContent,
 	editor: {
 		label: "Carousel Bullets",
 		category: "action"
 	},
-	schema: {
-		ariaLabel: {
-			type: "string",
-			default: "Choose page",
-			label: "Aria Label"
-		},
-		bulletLabel: {
-			type: "string",
-			default: "Go to page {page}",
-			label: "Bullet Label Template"
-		},
-		hideWhenSingle: {
-			type: "boolean",
-			default: true,
-			label: "Hide when single page"
-		}
-	},
-	guideline: "Renders one bullet button per page and marks the active page. Supports ArrowLeft/ArrowRight/Home/End keyboard navigation. Returns null when there is a single page unless hideWhenSingle={false}. Use {page} in bulletLabel for the 1-based page number. Must be inside CarouselRoot."
+	schema: { hideWhenSingle: {
+		type: "boolean",
+		default: true,
+		label: "Hide when single page"
+	} },
+	guideline: "Renders one bullet button per page and marks the active page. Supports ArrowLeft/ArrowRight/Home/End keyboard navigation. Returns null when there is a single page unless hideWhenSingle={false}. The group accessible name is the $content field ariaLabel; each bullet takes bulletLabel, whose page argument is the 1-based page number. Must be inside CarouselRoot."
 });
 const Carousel = {
 	Root: CarouselRoot,
@@ -330,6 +398,6 @@ const Carousel = {
 	Bullets: CarouselBullets
 };
 //#endregion
-export { Carousel, CarouselBullets, CarouselBulletsDefinition, CarouselNext, CarouselNextDefinition, CarouselPrevious, CarouselPreviousDefinition, CarouselRoot, CarouselRootDefinition, CarouselTrack, CarouselTrackDefinition, useCarousel };
+export { Carousel, CarouselBullets, CarouselBulletsContent, CarouselBulletsDefinition, CarouselNext, CarouselNextContent, CarouselNextDefinition, CarouselPrevious, CarouselPreviousContent, CarouselPreviousDefinition, CarouselRoot, CarouselRootContent, CarouselRootDefinition, CarouselTrack, CarouselTrackDefinition, useCarousel };
 
 //# sourceMappingURL=carousel.js.map

package/dist/particles/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/particles/carousel/carousel.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  Children,\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nexport type CarouselVariant = 'slide' | 'scroll';\n\nexport type CarouselContextValue = {\n  currentPage: number;\n  itemCount: number;\n  itemsPerPage: number;\n  totalPages: number;\n  variant: CarouselVariant;\n  infiniteMode: boolean;\n  goToPage: (page: number) => void;\n  next: () => void;\n  previous: () => void;\n  canGoNext: boolean;\n  canGoPrevious: boolean;\n  setItemCount: (count: number) => void;\n};\n\nexport type CarouselRootProps = ComponentPropsWithRef<'section'> & {\n  infiniteMode?: boolean;\n  variant?: CarouselVariant;\n  itemsPerPage?: number;\n  defaultPage?: number;\n  label?: string;\n};\n\nexport type CarouselTrackProps = ComponentPropsWithRef<'div'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselPreviousProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselNextProps = ComponentPropsWithRef<'button'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselBulletsProps = ComponentPropsWithRef<'div'> & {\n  ariaLabel?: string;\n  bulletLabel?: string;\n  hideWhenSingle?: boolean;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nexport function useCarousel(): CarouselContextValue {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside CarouselRoot.');\n  return ctx;\n}\n\nexport function CarouselRoot({\n  infiniteMode = false,\n  variant = 'slide',\n  itemsPerPage = 1,\n  defaultPage = 0,\n  label = 'Carousel',\n  children,\n  ...props\n}: CarouselRootProps) {\n  const [currentPage, setCurrentPage] = useState(defaultPage);\n  const [itemCount, setItemCountState] = useState(0);\n\n  const perPage = Math.max(1, itemsPerPage);\n  const totalPages = Math.max(1, Math.ceil(itemCount / perPage));\n\n  const setItemCount = useCallback((count: number) => {\n    setItemCountState((prev) => (prev === count ? prev : count));\n  }, []);\n\n  // Keep the current page in range when the number of pages shrinks.\n  useEffect(() => {\n    if (itemCount === 0) return;\n    setCurrentPage((page) => Math.min(page, totalPages - 1));\n  }, [itemCount, totalPages]);\n\n  const goToPage = useCallback(\n    (page: number) => {\n      setCurrentPage(Math.max(0, Math.min(page, totalPages - 1)));\n    },\n    [totalPages],\n  );\n\n  const next = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page + 1) % totalPages : Math.min(page + 1, totalPages - 1)));\n  }, [infiniteMode, totalPages]);\n\n  const previous = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page - 1 + totalPages) % totalPages : Math.max(page - 1, 0)));\n  }, [infiniteMode, totalPages]);\n\n  const canGoNext = infiniteMode ? totalPages > 1 : currentPage < totalPages - 1;\n  const canGoPrevious = infiniteMode ? totalPages > 1 : currentPage > 0;\n\n  const ctx = useMemo<CarouselContextValue>(\n    () => ({\n      currentPage,\n      itemCount,\n      itemsPerPage: perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    }),\n    [\n      currentPage,\n      itemCount,\n      perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    ],\n  );\n\n  return (\n    <CarouselContext value={ctx}>\n      <section\n        {...props}\n        data-fs-carousel=\"\"\n        data-fs-carousel-variant={variant}\n        aria-roledescription=\"carousel\"\n        aria-label={label}\n      >\n        {children}\n      </section>\n    </CarouselContext>\n  );\n}\n\nexport function CarouselTrack({ children, style, ref, onScroll, ...props }: CarouselTrackProps) {\n  const { setItemCount, itemsPerPage, currentPage, variant, goToPage } = useCarousel();\n  const items = Children.toArray(children);\n  const count = items.length;\n  const scrollRef = useRef<HTMLDivElement>(null);\n  // True while an internal scrollTo animation runs, so the native scroll events it emits do not\n  // feed back into goToPage and fight the animation. Cleared once the target page is reached.\n  const programmaticScroll = useRef(false);\n\n  // Scroll mode needs the internal scrollRef to drive scrollTo, but must still honor a\n  // consumer-forwarded ref (the slide branch gets it for free through the element).\n  const mergedScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      scrollRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  useEffect(() => {\n    setItemCount(count);\n  }, [count, setItemCount]);\n\n  // In scroll mode the track is the native scroll container; move it to the current page unless it\n  // is already there (e.g. the user just scrolled), so a programmatic scroll never fights the user.\n  useEffect(() => {\n    if (variant !== 'scroll') return;\n    const el = scrollRef.current;\n    if (!el || typeof el.scrollTo !== 'function') return;\n    if (el.clientWidth > 0 && Math.round(el.scrollLeft / el.clientWidth) === currentPage) return;\n    programmaticScroll.current = true;\n    el.scrollTo({ left: currentPage * el.clientWidth, behavior: 'smooth' });\n  }, [variant, currentPage]);\n\n  // Sync a user scroll back into the paging state so bullets and Previous/Next stay accurate.\n  function handleScroll(event: React.UIEvent<HTMLDivElement>) {\n    onScroll?.(event);\n    const { clientWidth, scrollLeft } = event.currentTarget;\n    if (clientWidth <= 0) return;\n    const page = Math.round(scrollLeft / clientWidth);\n    if (programmaticScroll.current) {\n      if (page === currentPage) programmaticScroll.current = false;\n      return;\n    }\n    if (page !== currentPage) goToPage(page);\n  }\n\n  const itemStyle: React.CSSProperties = { flex: `0 0 ${100 / itemsPerPage}%`, boxSizing: 'border-box' };\n\n  const renderedItems = items.map((child, index) => (\n    <div\n      key={index}\n      data-fs-carousel-item=\"\"\n      style={variant === 'scroll' ? { ...itemStyle, scrollSnapAlign: 'start' } : itemStyle}\n    >\n      {child}\n    </div>\n  ));\n\n  if (variant === 'scroll') {\n    return (\n      <div\n        {...props}\n        ref={mergedScrollRef}\n        onScroll={handleScroll}\n        data-fs-carousel-track=\"\"\n        style={{ display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory', ...style }}\n      >\n        {renderedItems}\n      </div>\n    );\n  }\n\n  return (\n    <div {...props} ref={ref} data-fs-carousel-track=\"\" style={{ overflow: 'hidden', ...style }}>\n      <div\n        data-fs-carousel-viewport=\"\"\n        style={{ display: 'flex', transform: `translateX(-${currentPage * 100}%)`, transition: 'transform 300ms ease' }}\n      >\n        {renderedItems}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselPrevious({ children, onClick, ...props }: CarouselPreviousProps) {\n  const { previous, canGoPrevious } = useCarousel();\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoPrevious}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) previous();\n      }}\n      aria-label=\"Previous\"\n      data-fs-carousel-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselNext({ children, onClick, ...props }: CarouselNextProps) {\n  const { next, canGoNext } = useCarousel();\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoNext}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) next();\n      }}\n      aria-label=\"Next\"\n      data-fs-carousel-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselBullets({\n  ariaLabel = 'Choose page',\n  bulletLabel = 'Go to page {page}',\n  hideWhenSingle = true,\n  ...props\n}: CarouselBulletsProps) {\n  const { totalPages, currentPage, goToPage } = useCarousel();\n\n  if (hideWhenSingle && totalPages <= 1) return null;\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, page: number) {\n    let target = page;\n    switch (event.key) {\n      case 'ArrowRight':\n        target = Math.min(page + 1, totalPages - 1);\n        break;\n      case 'ArrowLeft':\n        target = Math.max(page - 1, 0);\n        break;\n      case 'Home':\n        target = 0;\n        break;\n      case 'End':\n        target = totalPages - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    goToPage(target);\n    const bullets = event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[data-fs-carousel-bullet]');\n    bullets?.[target]?.focus();\n  }\n\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a labelled group of pagination buttons is not a <fieldset>\n    <div role=\"group\" aria-label={ariaLabel} data-fs-carousel-bullets=\"\" {...props}>\n      {Array.from({ length: totalPages }, (_, page) => {\n        const isActive = page === currentPage;\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            aria-label={bulletLabel.replace('{page}', String(page + 1))}\n            aria-current={isActive}\n            data-fs-carousel-bullet=\"\"\n            data-fs-carousel-bullet-selected={String(isActive)}\n            onClick={() => goToPage(page)}\n            onKeyDown={(event) => handleKeyDown(event, page)}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nexport const CarouselRootDefinition = defineComponent<CarouselRootProps>({\n  name: 'CarouselRoot',\n  importPath: '@vtex/faststore/components',\n  component: CarouselRoot,\n  editor: { label: 'Carousel Root', category: 'layout' },\n  schema: {\n    infiniteMode: { type: 'boolean', default: false, label: 'Infinite Mode' },\n    variant: { type: ['slide', 'scroll'] as const, default: 'slide', label: 'Variant' },\n    itemsPerPage: { type: 'number', default: 1, label: 'Items Per Page' },\n    defaultPage: { type: 'number', default: 0, label: 'Default Page' },\n    label: { type: 'string', default: 'Carousel', label: 'Aria Label' },\n  },\n  guideline:\n    'Root of the carousel. Provides paging state to all parts. Compose as: CarouselRoot > (CarouselTrack > [item children] + CarouselPrevious + CarouselNext + CarouselBullets). Set infiniteMode=true to loop seamlessly (arrows never disable); variant=\"scroll\" for native overflow, \"slide\" for transform transitions. itemsPerPage sets how many children are visible per page. Holds no product or media data — nest any children in CarouselTrack.',\n});\n\nexport const CarouselTrackDefinition = defineComponent<CarouselTrackProps>({\n  name: 'CarouselTrack',\n  importPath: '@vtex/faststore/components',\n  component: CarouselTrack,\n  editor: { label: 'Carousel Track', category: 'layout' },\n  schema: {},\n  guideline:\n    'Lays out the carousel items as a single track and reports the child count to CarouselRoot. Wraps each child in an item slot sized to 100/itemsPerPage percent. In slide variant it translates by page; in scroll variant it is the native scroll-snap container. Place the iterated children (e.g. product cards) directly inside. Must be inside CarouselRoot.',\n});\n\nexport const CarouselPreviousDefinition = defineComponent<CarouselPreviousProps>({\n  name: 'CarouselPrevious',\n  importPath: '@vtex/faststore/components',\n  component: CarouselPrevious,\n  editor: { label: 'Carousel Previous', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page backward. Disabled on the first page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the last page). Accepts any children (Icon, text). Must be inside CarouselRoot.',\n});\n\nexport const CarouselNextDefinition = defineComponent<CarouselNextProps>({\n  name: 'CarouselNext',\n  importPath: '@vtex/faststore/components',\n  component: CarouselNext,\n  editor: { label: 'Carousel Next', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page forward. Disabled on the last page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the first page). Accepts any children (Icon, text). Must be inside CarouselRoot.',\n});\n\nexport const CarouselBulletsDefinition = defineComponent<CarouselBulletsProps>({\n  name: 'CarouselBullets',\n  importPath: '@vtex/faststore/components',\n  component: CarouselBullets,\n  editor: { label: 'Carousel Bullets', category: 'action' },\n  schema: {\n    ariaLabel: { type: 'string', default: 'Choose page', label: 'Aria Label' },\n    bulletLabel: { type: 'string', default: 'Go to page {page}', label: 'Bullet Label Template' },\n    hideWhenSingle: { type: 'boolean', default: true, label: 'Hide when single page' },\n  },\n  guideline:\n    'Renders one bullet button per page and marks the active page. Supports ArrowLeft/ArrowRight/Home/End keyboard navigation. Returns null when there is a single page unless hideWhenSingle={false}. Use {page} in bulletLabel for the 1-based page number. Must be inside CarouselRoot.',\n});\n\nexport const Carousel = {\n  Root: CarouselRoot,\n  Track: CarouselTrack,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Bullets: CarouselBullets,\n};\n"],"mappings":"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"}
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/particles/carousel/carousel.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport {\n  Children,\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\nexport const CarouselRootContent = defineContentType({\n  id: 'carousel-root',\n  title: 'Carousel Root',\n  description: 'Accessible name of the carousel region.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible label', format: 'icu-message', messageSource: 'Carousel' },\n    },\n  },\n});\n\nexport const CarouselPreviousContent = defineContentType({\n  id: 'carousel-previous',\n  title: 'Carousel Previous',\n  description: 'Accessible name of the previous-page control.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible label', format: 'icu-message', messageSource: 'Previous' },\n    },\n  },\n});\n\nexport const CarouselNextContent = defineContentType({\n  id: 'carousel-next',\n  title: 'Carousel Next',\n  description: 'Accessible name of the next-page control.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible label', format: 'icu-message', messageSource: 'Next' },\n    },\n  },\n});\n\nexport const CarouselBulletsContent = defineContentType({\n  id: 'carousel-bullets',\n  title: 'Carousel Bullets',\n  description: 'Accessible names of the page bullets and of their group.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      ariaLabel: {\n        type: 'string',\n        title: 'Group accessible label',\n        format: 'icu-message',\n        messageSource: 'Choose page',\n      },\n      bulletLabel: {\n        type: 'string',\n        title: 'Bullet accessible label',\n        description: 'The page argument is the 1-based page number.',\n        format: 'icu-message',\n        messageSource: 'Go to page {page}',\n        messageArguments: { type: 'object', properties: { page: { type: 'integer' } } },\n        messageExample: { page: 2 },\n      },\n    },\n  },\n});\n\nexport type CarouselVariant = 'slide' | 'scroll';\n\nexport type CarouselContextValue = {\n  currentPage: number;\n  itemCount: number;\n  itemsPerPage: number;\n  totalPages: number;\n  variant: CarouselVariant;\n  infiniteMode: boolean;\n  goToPage: (page: number) => void;\n  next: () => void;\n  previous: () => void;\n  canGoNext: boolean;\n  canGoPrevious: boolean;\n  setItemCount: (count: number) => void;\n};\n\nexport type CarouselRootProps = ComponentPropsWithRef<'section'> &\n  MessageLocaleProp & {\n    infiniteMode?: boolean;\n    variant?: CarouselVariant;\n    itemsPerPage?: number;\n    defaultPage?: number;\n    $content?: ContentValue<typeof CarouselRootContent>;\n  };\n\nexport type CarouselTrackProps = ComponentPropsWithRef<'div'> & {\n  children?: ReactNode;\n};\n\nexport type CarouselPreviousProps = ComponentPropsWithRef<'button'> &\n  MessageLocaleProp & {\n    children?: ReactNode;\n    $content?: ContentValue<typeof CarouselPreviousContent>;\n  };\n\nexport type CarouselNextProps = ComponentPropsWithRef<'button'> &\n  MessageLocaleProp & {\n    children?: ReactNode;\n    $content?: ContentValue<typeof CarouselNextContent>;\n  };\n\nexport type CarouselBulletsProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    hideWhenSingle?: boolean;\n    $content?: ContentValue<typeof CarouselBulletsContent>;\n  };\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nexport function useCarousel(): CarouselContextValue {\n  const ctx = useContext(CarouselContext);\n  if (!ctx) throw new Error('Carousel components must be used inside CarouselRoot.');\n  return ctx;\n}\n\nexport function CarouselRoot({\n  infiniteMode = false,\n  variant = 'slide',\n  itemsPerPage = 1,\n  defaultPage = 0,\n  $locale,\n  $content,\n  children,\n  ...props\n}: CarouselRootProps) {\n  const messages = useMessageFormatter(CarouselRootContent, $content);\n  const [currentPage, setCurrentPage] = useState(defaultPage);\n  const [itemCount, setItemCountState] = useState(0);\n\n  const perPage = Math.max(1, itemsPerPage);\n  const totalPages = Math.max(1, Math.ceil(itemCount / perPage));\n\n  const setItemCount = useCallback((count: number) => {\n    setItemCountState((prev) => (prev === count ? prev : count));\n  }, []);\n\n  // Keep the current page in range when the number of pages shrinks.\n  useEffect(() => {\n    if (itemCount === 0) return;\n    setCurrentPage((page) => Math.min(page, totalPages - 1));\n  }, [itemCount, totalPages]);\n\n  const goToPage = useCallback(\n    (page: number) => {\n      setCurrentPage(Math.max(0, Math.min(page, totalPages - 1)));\n    },\n    [totalPages],\n  );\n\n  const next = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page + 1) % totalPages : Math.min(page + 1, totalPages - 1)));\n  }, [infiniteMode, totalPages]);\n\n  const previous = useCallback(() => {\n    setCurrentPage((page) => (infiniteMode ? (page - 1 + totalPages) % totalPages : Math.max(page - 1, 0)));\n  }, [infiniteMode, totalPages]);\n\n  const canGoNext = infiniteMode ? totalPages > 1 : currentPage < totalPages - 1;\n  const canGoPrevious = infiniteMode ? totalPages > 1 : currentPage > 0;\n\n  const ctx = useMemo<CarouselContextValue>(\n    () => ({\n      currentPage,\n      itemCount,\n      itemsPerPage: perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    }),\n    [\n      currentPage,\n      itemCount,\n      perPage,\n      totalPages,\n      variant,\n      infiniteMode,\n      goToPage,\n      next,\n      previous,\n      canGoNext,\n      canGoPrevious,\n      setItemCount,\n    ],\n  );\n\n  return (\n    <CarouselContext value={ctx}>\n      <section\n        {...props}\n        data-fs-carousel=\"\"\n        data-fs-carousel-variant={variant}\n        aria-roledescription=\"carousel\"\n        aria-label={messages.format('label')}\n      >\n        {children}\n      </section>\n    </CarouselContext>\n  );\n}\n\nexport function CarouselTrack({ children, style, ref, onScroll, ...props }: CarouselTrackProps) {\n  const { setItemCount, itemsPerPage, currentPage, variant, goToPage } = useCarousel();\n  const items = Children.toArray(children);\n  const count = items.length;\n  const scrollRef = useRef<HTMLDivElement>(null);\n  // True while an internal scrollTo animation runs, so the native scroll events it emits do not\n  // feed back into goToPage and fight the animation. Cleared once the target page is reached.\n  const programmaticScroll = useRef(false);\n\n  // Scroll mode needs the internal scrollRef to drive scrollTo, but must still honor a\n  // consumer-forwarded ref (the slide branch gets it for free through the element).\n  const mergedScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      scrollRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  useEffect(() => {\n    setItemCount(count);\n  }, [count, setItemCount]);\n\n  // In scroll mode the track is the native scroll container; move it to the current page unless it\n  // is already there (e.g. the user just scrolled), so a programmatic scroll never fights the user.\n  useEffect(() => {\n    if (variant !== 'scroll') return;\n    const el = scrollRef.current;\n    if (!el || typeof el.scrollTo !== 'function') return;\n    if (el.clientWidth > 0 && Math.round(el.scrollLeft / el.clientWidth) === currentPage) return;\n    programmaticScroll.current = true;\n    el.scrollTo({ left: currentPage * el.clientWidth, behavior: 'smooth' });\n  }, [variant, currentPage]);\n\n  // Sync a user scroll back into the paging state so bullets and Previous/Next stay accurate.\n  function handleScroll(event: React.UIEvent<HTMLDivElement>) {\n    onScroll?.(event);\n    const { clientWidth, scrollLeft } = event.currentTarget;\n    if (clientWidth <= 0) return;\n    const page = Math.round(scrollLeft / clientWidth);\n    if (programmaticScroll.current) {\n      if (page === currentPage) programmaticScroll.current = false;\n      return;\n    }\n    if (page !== currentPage) goToPage(page);\n  }\n\n  const itemStyle: React.CSSProperties = { flex: `0 0 ${100 / itemsPerPage}%`, boxSizing: 'border-box' };\n\n  const renderedItems = items.map((child, index) => (\n    <div\n      key={index}\n      data-fs-carousel-item=\"\"\n      style={variant === 'scroll' ? { ...itemStyle, scrollSnapAlign: 'start' } : itemStyle}\n    >\n      {child}\n    </div>\n  ));\n\n  if (variant === 'scroll') {\n    return (\n      <div\n        {...props}\n        ref={mergedScrollRef}\n        onScroll={handleScroll}\n        data-fs-carousel-track=\"\"\n        style={{ display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory', ...style }}\n      >\n        {renderedItems}\n      </div>\n    );\n  }\n\n  return (\n    <div {...props} ref={ref} data-fs-carousel-track=\"\" style={{ overflow: 'hidden', ...style }}>\n      <div\n        data-fs-carousel-viewport=\"\"\n        style={{ display: 'flex', transform: `translateX(-${currentPage * 100}%)`, transition: 'transform 300ms ease' }}\n      >\n        {renderedItems}\n      </div>\n    </div>\n  );\n}\n\nexport function CarouselPrevious({ $locale, $content, children, onClick, ...props }: CarouselPreviousProps) {\n  const { previous, canGoPrevious } = useCarousel();\n  const messages = useMessageFormatter(CarouselPreviousContent, $content);\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoPrevious}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) previous();\n      }}\n      aria-label={messages.format('label')}\n      data-fs-carousel-previous=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselNext({ $locale, $content, children, onClick, ...props }: CarouselNextProps) {\n  const { next, canGoNext } = useCarousel();\n  const messages = useMessageFormatter(CarouselNextContent, $content);\n  return (\n    <button\n      type=\"button\"\n      disabled={!canGoNext}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) next();\n      }}\n      aria-label={messages.format('label')}\n      data-fs-carousel-next=\"\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function CarouselBullets({ $locale, $content, hideWhenSingle = true, ...props }: CarouselBulletsProps) {\n  const { totalPages, currentPage, goToPage } = useCarousel();\n  const messages = useMessageFormatter(CarouselBulletsContent, $content);\n\n  if (hideWhenSingle && totalPages <= 1) return null;\n  const ariaLabel = messages.format('ariaLabel');\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, page: number) {\n    let target = page;\n    switch (event.key) {\n      case 'ArrowRight':\n        target = Math.min(page + 1, totalPages - 1);\n        break;\n      case 'ArrowLeft':\n        target = Math.max(page - 1, 0);\n        break;\n      case 'Home':\n        target = 0;\n        break;\n      case 'End':\n        target = totalPages - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    goToPage(target);\n    const bullets = event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[data-fs-carousel-bullet]');\n    bullets?.[target]?.focus();\n  }\n\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a labelled group of pagination buttons is not a <fieldset>\n    <div role=\"group\" aria-label={ariaLabel} data-fs-carousel-bullets=\"\" {...props}>\n      {Array.from({ length: totalPages }, (_, page) => {\n        const isActive = page === currentPage;\n        return (\n          <button\n            key={page}\n            type=\"button\"\n            aria-label={messages.format('bulletLabel', { page: page + 1 })}\n            aria-current={isActive}\n            data-fs-carousel-bullet=\"\"\n            data-fs-carousel-bullet-selected={String(isActive)}\n            onClick={() => goToPage(page)}\n            onKeyDown={(event) => handleKeyDown(event, page)}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nexport const CarouselRootDefinition = defineComponent<CarouselRootProps>({\n  name: 'CarouselRoot',\n  importPath: '@vtex/faststore/components',\n  component: CarouselRoot,\n  content: CarouselRootContent,\n  editor: { label: 'Carousel Root', category: 'layout' },\n  schema: {\n    infiniteMode: { type: 'boolean', default: false, label: 'Infinite Mode' },\n    variant: { type: ['slide', 'scroll'] as const, default: 'slide', label: 'Variant' },\n    itemsPerPage: { type: 'number', default: 1, label: 'Items Per Page' },\n    defaultPage: { type: 'number', default: 0, label: 'Default Page' },\n  },\n  guideline:\n    'Root of the carousel. Provides paging state to all parts. Compose as: CarouselRoot > (CarouselTrack > [item children] + CarouselPrevious + CarouselNext + CarouselBullets). Set infiniteMode=true to loop seamlessly (arrows never disable); variant=\"scroll\" for native overflow, \"slide\" for transform transitions. itemsPerPage sets how many children are visible per page. Its accessible name comes from the $content field label. Holds no product or media data — nest any children in CarouselTrack.',\n});\n\nexport const CarouselTrackDefinition = defineComponent<CarouselTrackProps>({\n  name: 'CarouselTrack',\n  importPath: '@vtex/faststore/components',\n  component: CarouselTrack,\n  editor: { label: 'Carousel Track', category: 'layout' },\n  schema: {},\n  guideline:\n    'Lays out the carousel items as a single track and reports the child count to CarouselRoot. Wraps each child in an item slot sized to 100/itemsPerPage percent. In slide variant it translates by page; in scroll variant it is the native scroll-snap container. Place the iterated children (e.g. product cards) directly inside. Must be inside CarouselRoot.',\n});\n\nexport const CarouselPreviousDefinition = defineComponent<CarouselPreviousProps>({\n  name: 'CarouselPrevious',\n  importPath: '@vtex/faststore/components',\n  component: CarouselPrevious,\n  content: CarouselPreviousContent,\n  editor: { label: 'Carousel Previous', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page backward. Disabled on the first page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the last page). Accepts any children (Icon, text); its accessible name comes from the $content field label. Must be inside CarouselRoot.',\n});\n\nexport const CarouselNextDefinition = defineComponent<CarouselNextProps>({\n  name: 'CarouselNext',\n  importPath: '@vtex/faststore/components',\n  component: CarouselNext,\n  content: CarouselNextContent,\n  editor: { label: 'Carousel Next', category: 'action' },\n  schema: {},\n  guideline:\n    'Moves the track one page forward. Disabled on the last page when infiniteMode is off; never disabled when infiniteMode is on (wraps to the first page). Accepts any children (Icon, text); its accessible name comes from the $content field label. Must be inside CarouselRoot.',\n});\n\nexport const CarouselBulletsDefinition = defineComponent<CarouselBulletsProps>({\n  name: 'CarouselBullets',\n  importPath: '@vtex/faststore/components',\n  component: CarouselBullets,\n  content: CarouselBulletsContent,\n  editor: { label: 'Carousel Bullets', category: 'action' },\n  schema: {\n    hideWhenSingle: { type: 'boolean', default: true, label: 'Hide when single page' },\n  },\n  guideline:\n    'Renders one bullet button per page and marks the active page. Supports ArrowLeft/ArrowRight/Home/End keyboard navigation. Returns null when there is a single page unless hideWhenSingle={false}. The group accessible name is the $content field ariaLabel; each bullet takes bulletLabel, whose page argument is the 1-based page number. Must be inside CarouselRoot.',\n});\n\nexport const Carousel = {\n  Root: CarouselRoot,\n  Track: CarouselTrack,\n  Previous: CarouselPrevious,\n  Next: CarouselNext,\n  Bullets: CarouselBullets,\n};\n"],"mappings":"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"}

package/dist/particles/copy-text/copy-text.js

@@ -1,7 +1,6 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
-import { useIntl } from "../../sdk/i18n/client.js";
 import { Button } from "../button/button.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,33 +20,24 @@ const CopyTextDefinition = defineComponent({
 	schema: {
 		accessibleName: {
 			type: "string",
-			default: "Copy",
 			label: "Accessible name"
 		},
 		successMessage: {
 			type: "string",
-			default: "Copied",
 			label: "Success message"
 		},
 		failureMessage: {
 			type: "string",
-			default: "Could not copy",
 			label: "Failure message"
 		},
 		dismissLabel: {
 			type: "string",
-			default: "Dismiss",
 			label: "Dismiss label"
 		}
 	},
-	guideline: "Copies the text it is given and confirms the result inline. Pass the identifier as text and the visible icon or label as children. Do not pass surrounding heading text."
+	guideline: "Copies the text it is given and confirms the result inline. Pass the identifier as text, the visible icon or label as children, and the formatted copy as props; they have no default, so the owner formats every one. Do not pass surrounding heading text."
 });
 function CopyText({ text, accessibleName, successMessage, failureMessage, dismissLabel, children, className, ref }) {
-	const intl = useIntl();
-	const name = accessibleName ?? intl.formatMessage({ id: "fs/order.copy.action" });
-	const success = successMessage ?? intl.formatMessage({ id: "fs/order.copy.copied" });
-	const failure = failureMessage ?? intl.formatMessage({ id: "fs/order.copy.failure" });
-	const dismissText = dismissLabel ?? intl.formatMessage({ id: "fs/order.copy.dismiss" });
 	const [outcome, setOutcome] = useState("idle");
 	const actionRef = useRef(null);
 	const timerRef = useRef(null);
@@ -107,7 +97,7 @@ function CopyText({ text, accessibleName, successMessage, failureMessage, dismis
 		setOutcome("idle");
 		actionRef.current?.focus();
 	}
-	const message = outcome === "success" ? success : failure;
+	const message = outcome === "success" ? successMessage : failureMessage;
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		className,
@@ -116,7 +106,7 @@ function CopyText({ text, accessibleName, successMessage, failureMessage, dismis
 		children: [/* @__PURE__ */ jsx(Button, {
 			ref: actionRef,
 			type: "button",
-			"aria-label": name,
+			"aria-label": accessibleName,
 			"data-fs-copy-text-action": "",
 			disabled: isBlank(text) || outcome === "pending",
 			onClick: () => {
@@ -127,9 +117,9 @@ function CopyText({ text, accessibleName, successMessage, failureMessage, dismis
 			"data-fs-copy-text-message": "",
 			children: [message, /* @__PURE__ */ jsx(Button, {
 				type: "button",
-				"aria-label": dismissText,
+				"aria-label": dismissLabel,
 				onClick: dismiss,
-				children: dismissText
+				children: dismissLabel
 			})]
 		}) : null]
 	});

package/dist/particles/copy-text/copy-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-text.js","names":[],"sources":["../../../src/particles/copy-text/copy-text.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ReactNode, type Ref, useEffect, useRef, useState } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport { Button } from '../button/button';\n\nconst CLEAR_AFTER_MS = 5000;\n\nexport type CopyTextOutcome = 'idle' | 'pending' | 'success' | 'failure';\n\nexport type CopyTextProps = Readonly<{\n  text: string;\n  accessibleName?: string;\n  successMessage?: string;\n  failureMessage?: string;\n  dismissLabel?: string;\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLSpanElement>;\n}>;\n\nfunction isBlank(text: string): boolean {\n  return text.trim().length === 0;\n}\n\nexport const CopyTextDefinition = defineComponent<CopyTextProps>({\n  name: 'CopyText',\n  importPath: '@vtex/faststore/components',\n  component: CopyText,\n  editor: { label: 'Copy Text', category: 'action' },\n  schema: {\n    accessibleName: { type: 'string', default: 'Copy', label: 'Accessible name' },\n    successMessage: { type: 'string', default: 'Copied', label: 'Success message' },\n    failureMessage: { type: 'string', default: 'Could not copy', label: 'Failure message' },\n    dismissLabel: { type: 'string', default: 'Dismiss', label: 'Dismiss label' },\n  },\n  guideline:\n    'Copies the text it is given and confirms the result inline. Pass the identifier as text and the visible icon or label as children. Do not pass surrounding heading text.',\n});\n\nexport function CopyText({\n  text,\n  accessibleName,\n  successMessage,\n  failureMessage,\n  dismissLabel,\n  children,\n  className,\n  ref,\n}: CopyTextProps) {\n  const intl = useIntl();\n  const name = accessibleName ?? intl.formatMessage({ id: 'fs/order.copy.action' });\n  const success = successMessage ?? intl.formatMessage({ id: 'fs/order.copy.copied' });\n  const failure = failureMessage ?? intl.formatMessage({ id: 'fs/order.copy.failure' });\n  const dismissText = dismissLabel ?? intl.formatMessage({ id: 'fs/order.copy.dismiss' });\n  const [outcome, setOutcome] = useState<CopyTextOutcome>('idle');\n  const actionRef = useRef<HTMLButtonElement>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const generation = useRef(0);\n  const active = useRef(true);\n\n  function clearTimer() {\n    if (timerRef.current === null) return;\n    clearTimeout(timerRef.current);\n    timerRef.current = null;\n  }\n\n  useEffect(() => {\n    active.current = true;\n    return () => {\n      active.current = false;\n      if (timerRef.current === null) return;\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    };\n  }, []);\n\n  function scheduleClear(token: number) {\n    clearTimer();\n    if (!active.current) return;\n    timerRef.current = setTimeout(() => {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('idle');\n    }, CLEAR_AFTER_MS);\n  }\n\n  async function copy() {\n    if (isBlank(text) || outcome === 'pending') return;\n    const token = generation.current + 1;\n    generation.current = token;\n    clearTimer();\n    setOutcome('pending');\n\n    const write = navigator.clipboard?.writeText;\n    if (typeof write !== 'function') {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('failure');\n      scheduleClear(token);\n      return;\n    }\n\n    try {\n      await write.call(navigator.clipboard, text);\n      if (!active.current || generation.current !== token) return;\n      setOutcome('success');\n    } catch {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('failure');\n    }\n    scheduleClear(token);\n  }\n\n  // The action is disabled while pending, and a disabled control ignores focus(). Focus moves back\n  // once the outcome that re-enables it has committed.\n  useEffect(() => {\n    if (outcome === 'success' || outcome === 'failure') {\n      actionRef.current?.focus();\n    }\n  }, [outcome]);\n\n  function dismiss() {\n    generation.current += 1;\n    clearTimer();\n    setOutcome('idle');\n    actionRef.current?.focus();\n  }\n\n  const message = outcome === 'success' ? success : failure;\n\n  return (\n    <span ref={ref} className={className} data-fs-copy-text=\"\" data-fs-copy-text-outcome={outcome}>\n      <Button\n        ref={actionRef}\n        type=\"button\"\n        aria-label={name}\n        data-fs-copy-text-action=\"\"\n        disabled={isBlank(text) || outcome === 'pending'}\n        onClick={() => {\n          void copy();\n        }}\n      >\n        {children}\n      </Button>\n      {outcome === 'success' || outcome === 'failure' ? (\n        <output data-fs-copy-text-message=\"\">\n          {message}\n          <Button type=\"button\" aria-label={dismissText} onClick={dismiss}>\n            {dismissText}\n          </Button>\n        </output>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"copy-text.js","names":[],"sources":["../../../src/particles/copy-text/copy-text.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ReactNode, type Ref, useEffect, useRef, useState } from 'react';\nimport { Button } from '../button/button';\n\nconst CLEAR_AFTER_MS = 5000;\n\nexport type CopyTextOutcome = 'idle' | 'pending' | 'success' | 'failure';\n\nexport type CopyTextProps = Readonly<{\n  text: string;\n  accessibleName?: string;\n  successMessage?: string;\n  failureMessage?: string;\n  dismissLabel?: string;\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLSpanElement>;\n}>;\n\nfunction isBlank(text: string): boolean {\n  return text.trim().length === 0;\n}\n\nexport const CopyTextDefinition = defineComponent<CopyTextProps>({\n  name: 'CopyText',\n  importPath: '@vtex/faststore/components',\n  component: CopyText,\n  editor: { label: 'Copy Text', category: 'action' },\n  schema: {\n    accessibleName: { type: 'string', label: 'Accessible name' },\n    successMessage: { type: 'string', label: 'Success message' },\n    failureMessage: { type: 'string', label: 'Failure message' },\n    dismissLabel: { type: 'string', label: 'Dismiss label' },\n  },\n  guideline:\n    'Copies the text it is given and confirms the result inline. Pass the identifier as text, the visible icon or label as children, and the formatted copy as props; they have no default, so the owner formats every one. Do not pass surrounding heading text.',\n});\n\nexport function CopyText({\n  text,\n  accessibleName,\n  successMessage,\n  failureMessage,\n  dismissLabel,\n  children,\n  className,\n  ref,\n}: CopyTextProps) {\n  const [outcome, setOutcome] = useState<CopyTextOutcome>('idle');\n  const actionRef = useRef<HTMLButtonElement>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const generation = useRef(0);\n  const active = useRef(true);\n\n  function clearTimer() {\n    if (timerRef.current === null) return;\n    clearTimeout(timerRef.current);\n    timerRef.current = null;\n  }\n\n  useEffect(() => {\n    active.current = true;\n    return () => {\n      active.current = false;\n      if (timerRef.current === null) return;\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    };\n  }, []);\n\n  function scheduleClear(token: number) {\n    clearTimer();\n    if (!active.current) return;\n    timerRef.current = setTimeout(() => {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('idle');\n    }, CLEAR_AFTER_MS);\n  }\n\n  async function copy() {\n    if (isBlank(text) || outcome === 'pending') return;\n    const token = generation.current + 1;\n    generation.current = token;\n    clearTimer();\n    setOutcome('pending');\n\n    const write = navigator.clipboard?.writeText;\n    if (typeof write !== 'function') {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('failure');\n      scheduleClear(token);\n      return;\n    }\n\n    try {\n      await write.call(navigator.clipboard, text);\n      if (!active.current || generation.current !== token) return;\n      setOutcome('success');\n    } catch {\n      if (!active.current || generation.current !== token) return;\n      setOutcome('failure');\n    }\n    scheduleClear(token);\n  }\n\n  // The action is disabled while pending, and a disabled control ignores focus(). Focus moves back\n  // once the outcome that re-enables it has committed.\n  useEffect(() => {\n    if (outcome === 'success' || outcome === 'failure') {\n      actionRef.current?.focus();\n    }\n  }, [outcome]);\n\n  function dismiss() {\n    generation.current += 1;\n    clearTimer();\n    setOutcome('idle');\n    actionRef.current?.focus();\n  }\n\n  const message = outcome === 'success' ? successMessage : failureMessage;\n\n  return (\n    <span ref={ref} className={className} data-fs-copy-text=\"\" data-fs-copy-text-outcome={outcome}>\n      <Button\n        ref={actionRef}\n        type=\"button\"\n        aria-label={accessibleName}\n        data-fs-copy-text-action=\"\"\n        disabled={isBlank(text) || outcome === 'pending'}\n        onClick={() => {\n          void copy();\n        }}\n      >\n        {children}\n      </Button>\n      {outcome === 'success' || outcome === 'failure' ? (\n        <output data-fs-copy-text-message=\"\">\n          {message}\n          <Button type=\"button\" aria-label={dismissLabel} onClick={dismiss}>\n            {dismissLabel}\n          </Button>\n        </output>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;AAMA,MAAM,iBAAiB;AAevB,SAAS,QAAQ,MAAuB;CACtC,OAAO,KAAK,KAAK,CAAC,CAAC,WAAW;AAChC;AAEA,MAAa,qBAAqB,gBAA+B;CAC/D,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAa,UAAU;CAAS;CACjD,QAAQ;EACN,gBAAgB;GAAE,MAAM;GAAU,OAAO;EAAkB;EAC3D,gBAAgB;GAAE,MAAM;GAAU,OAAO;EAAkB;EAC3D,gBAAgB;GAAE,MAAM;GAAU,OAAO;EAAkB;EAC3D,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;CACzD;CACA,WACE;AACJ,CAAC;AAED,SAAgB,SAAS,EACvB,MACA,gBACA,gBACA,gBACA,cACA,UACA,WACA,OACgB;CAChB,MAAM,CAAC,SAAS,cAAc,SAA0B,MAAM;CAC9D,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,WAAW,OAA6C,IAAI;CAClE,MAAM,aAAa,OAAO,CAAC;CAC3B,MAAM,SAAS,OAAO,IAAI;CAE1B,SAAS,aAAa;EACpB,IAAI,SAAS,YAAY,MAAM;EAC/B,aAAa,SAAS,OAAO;EAC7B,SAAS,UAAU;CACrB;CAEA,gBAAgB;EACd,OAAO,UAAU;EACjB,aAAa;GACX,OAAO,UAAU;GACjB,IAAI,SAAS,YAAY,MAAM;GAC/B,aAAa,SAAS,OAAO;GAC7B,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,CAAC;CAEL,SAAS,cAAc,OAAe;EACpC,WAAW;EACX,IAAI,CAAC,OAAO,SAAS;EACrB,SAAS,UAAU,iBAAiB;GAClC,IAAI,CAAC,OAAO,WAAW,WAAW,YAAY,OAAO;GACrD,WAAW,MAAM;EACnB,GAAG,cAAc;CACnB;CAEA,eAAe,OAAO;EACpB,IAAI,QAAQ,IAAI,KAAK,YAAY,WAAW;EAC5C,MAAM,QAAQ,WAAW,UAAU;EACnC,WAAW,UAAU;EACrB,WAAW;EACX,WAAW,SAAS;EAEpB,MAAM,QAAQ,UAAU,WAAW;EACnC,IAAI,OAAO,UAAU,YAAY;GAC/B,IAAI,CAAC,OAAO,WAAW,WAAW,YAAY,OAAO;GACrD,WAAW,SAAS;GACpB,cAAc,KAAK;GACnB;EACF;EAEA,IAAI;GACF,MAAM,MAAM,KAAK,UAAU,WAAW,IAAI;GAC1C,IAAI,CAAC,OAAO,WAAW,WAAW,YAAY,OAAO;GACrD,WAAW,SAAS;EACtB,QAAQ;GACN,IAAI,CAAC,OAAO,WAAW,WAAW,YAAY,OAAO;GACrD,WAAW,SAAS;EACtB;EACA,cAAc,KAAK;CACrB;CAIA,gBAAgB;EACd,IAAI,YAAY,aAAa,YAAY,WACvC,UAAU,SAAS,MAAM;CAE7B,GAAG,CAAC,OAAO,CAAC;CAEZ,SAAS,UAAU;EACjB,WAAW,WAAW;EACtB,WAAW;EACX,WAAW,MAAM;EACjB,UAAU,SAAS,MAAM;CAC3B;CAEA,MAAM,UAAU,YAAY,YAAY,iBAAiB;CAEzD,OACE,qBAAC,QAAD;EAAW;EAAgB;EAAW,qBAAkB;EAAG,6BAA2B;EAAtF,UAAA,CACE,oBAAC,QAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,4BAAyB;GACzB,UAAU,QAAQ,IAAI,KAAK,YAAY;GACvC,eAAe;IACb,KAAU;GACZ;GAEC;EACK,CAAA,GACP,YAAY,aAAa,YAAY,YACpC,qBAAC,UAAD;GAAQ,6BAA0B;GAAlC,UAAA,CACG,SACD,oBAAC,QAAD;IAAQ,MAAK;IAAS,cAAY;IAAc,SAAS;IACtD,UAAA;GACK,CAAA,CACF;EACN,CAAA,IAAA,IACA;;AAEV"}

package/dist/particles/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { ComponentProps, ComponentPropsWithRef, ReactNode } from "react";
+import { Dialog } from "@base-ui/react/dialog";
 //#region src/particles/dialog/dialog.d.ts
 export type DialogRootProps = {
   open?: boolean;
@@ -12,9 +13,11 @@ export type DialogRootProps = {
   children?: ReactNode;
 };
 export type DialogTriggerProps = ComponentPropsWithRef<'button'>;
-export type DialogPortalProps = {
+export type DialogPortalProps = Readonly<{
   children?: ReactNode;
-};
+  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */
+  container?: ComponentProps<typeof Dialog.Portal>['container'];
+}>;
 export type DialogBackdropProps = ComponentPropsWithRef<'div'>;
 export type DialogViewportProps = ComponentPropsWithRef<'div'>;
 export type DialogPopupProps = ComponentPropsWithRef<'div'>;
@@ -23,7 +26,11 @@ export type DialogDescriptionProps = ComponentPropsWithRef<'p'>;
 export type DialogCloseProps = ComponentPropsWithRef<'button'>;
 export declare const DialogRootDefinition: ComponentDefinition<DialogRootProps>;
 export declare const DialogTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
-export declare const DialogPortalDefinition: ComponentDefinition<DialogPortalProps>;
+export declare const DialogPortalDefinition: ComponentDefinition<Readonly<{
+  children?: ReactNode;
+  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */
+  container?: ComponentProps<typeof Dialog.Portal>["container"];
+}>>;
 export declare const DialogBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const DialogViewportDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const DialogPopupDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
@@ -32,14 +39,14 @@ export declare const DialogDescriptionDefinition: ComponentDefinition<import("re
 export declare const DialogCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
 export declare function DialogRoot({ open, defaultOpen, modal, onOpenChange, children }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogTrigger({ className, children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
-export declare function DialogPortal({ children }: DialogPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogPortal({ children, container }: DialogPortalProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogBackdrop({ className, children, ...props }: DialogBackdropProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogViewport({ className, children, ...props }: DialogViewportProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogPopup({ className, children, ...props }: DialogPopupProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogTitle({ className, children, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogDescription({ className, children, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
 export declare function DialogClose({ className, children, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
-export declare const Dialog: {
+declare const Dialog$1: {
   Root: typeof DialogRoot;
   Trigger: typeof DialogTrigger;
   Portal: typeof DialogPortal;
@@ -51,4 +58,5 @@ export declare const Dialog: {
   Close: typeof DialogClose;
 };
 //#endregion
+export { Dialog$1 as Dialog };
 //# sourceMappingURL=dialog.d.ts.map

package/dist/particles/dialog/dialog.js

@@ -39,7 +39,7 @@ const DialogPortalDefinition = defineComponent({
 		category: "layout"
 	},
 	schema: {},
-	guideline: "Renders its children outside the DOM tree (into document.body). Place DialogBackdrop and DialogViewport as direct children, in that order."
+	guideline: "Renders its children outside the DOM tree (into document.body, or into container when a parent swatch must reach the overlay). Place DialogBackdrop and DialogViewport as direct children, in that order."
 });
 const DialogBackdropDefinition = defineComponent({
 	name: "DialogBackdrop",
@@ -124,8 +124,11 @@ function DialogTrigger({ className, children, ...props }) {
 		children
 	});
 }
-function DialogPortal({ children }) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, { children });
+function DialogPortal({ children, container }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		container,
+		children
+	});
 }
 function DialogBackdrop({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {

package/dist/particles/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["BaseDialog","Dialog"],"sources":["../../../src/particles/dialog/dialog.tsx"],"sourcesContent":["'use client';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DialogRootProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  modal?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DialogPortalProps = {\n  children?: ReactNode;\n};\n\nexport type DialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DialogRootDefinition = defineComponent<DialogRootProps>({\n  name: 'DialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: DialogRoot,\n  editor: { label: 'Dialog Root', category: 'layout' },\n  schema: {\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a dialog overlay. Compose as: DialogRoot > (DialogTrigger + DialogPortal > (DialogBackdrop + DialogViewport > DialogPopup > (DialogTitle + content + DialogClose))). Set modal=false only when the dialog must coexist with page interactions.',\n});\n\nexport const DialogTriggerDefinition = defineComponent<DialogTriggerProps>({\n  name: 'DialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DialogTrigger,\n  editor: { label: 'Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the dialog when clicked. Direct child of DialogRoot. Accepts any children (text, Icon). Base UI connects it to DialogRoot via context — no explicit wiring needed.',\n});\n\nexport const DialogPortalDefinition = defineComponent<DialogPortalProps>({\n  name: 'DialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: DialogPortal,\n  editor: { label: 'Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body). Place DialogBackdrop and DialogViewport as direct children, in that order.',\n});\n\nexport const DialogBackdropDefinition = defineComponent<DialogBackdropProps>({\n  name: 'DialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DialogBackdrop,\n  editor: { label: 'Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of DialogPortal, before DialogViewport. Clicking it closes the dialog unless disablePointerDismissal is set on DialogRoot.',\n});\n\nexport const DialogViewportDefinition = defineComponent<DialogViewportProps>({\n  name: 'DialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: DialogViewport,\n  editor: { label: 'Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for DialogPopup. Direct child of DialogPortal, after DialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place DialogPopup inside.',\n});\n\nexport const DialogPopupDefinition = defineComponent<DialogPopupProps>({\n  name: 'DialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: DialogPopup,\n  editor: { label: 'Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible dialog panel, inside DialogViewport. Place DialogTitle (required), optional DialogDescription, your content, and DialogClose inside. Style with a background, padding, and shadow.',\n});\n\nexport const DialogTitleDefinition = defineComponent<DialogTitleProps>({\n  name: 'DialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: DialogTitle,\n  editor: { label: 'Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside DialogPopup — sets the accessible name of the dialog for screen readers. Use sr-only to hide it visually when a visual title already exists.',\n});\n\nexport const DialogDescriptionDefinition = defineComponent<DialogDescriptionProps>({\n  name: 'DialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: DialogDescription,\n  editor: { label: 'Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Optional description inside DialogPopup, after DialogTitle. Provides additional context to screen readers. Omit if the dialog content is self-explanatory.',\n});\n\nexport const DialogCloseDefinition = defineComponent<DialogCloseProps>({\n  name: 'DialogClose',\n  importPath: '@vtex/faststore/components',\n  component: DialogClose,\n  editor: { label: 'Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the dialog when clicked. Place inside DialogPopup — can appear multiple times (e.g., close icon at top-right and a Cancel button at the bottom).',\n});\n\nexport function DialogRoot({ open, defaultOpen, modal = true, onOpenChange, children }: DialogRootProps) {\n  return (\n    <BaseDialog.Root open={open} defaultOpen={defaultOpen} modal={modal} onOpenChange={onOpenChange}>\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nexport function DialogTrigger({ className, children, ...props }: DialogTriggerProps) {\n  return (\n    <BaseDialog.Trigger {...props} className={className} data-fs-dialog-trigger=\"\">\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nexport function DialogPortal({ children }: DialogPortalProps) {\n  return <BaseDialog.Portal>{children}</BaseDialog.Portal>;\n}\n\nexport function DialogBackdrop({ className, children, ...props }: DialogBackdropProps) {\n  return (\n    <BaseDialog.Backdrop {...props} className={className} data-fs-dialog-backdrop=\"\">\n      {children}\n    </BaseDialog.Backdrop>\n  );\n}\n\nexport function DialogViewport({ className, children, ...props }: DialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function DialogPopup({ className, children, ...props }: DialogPopupProps) {\n  return (\n    <BaseDialog.Popup {...props} className={className} data-fs-dialog-popup=\"\">\n      {children}\n    </BaseDialog.Popup>\n  );\n}\n\nexport function DialogTitle({ className, children, ...props }: DialogTitleProps) {\n  return (\n    <BaseDialog.Title {...props} className={className} data-fs-dialog-title=\"\">\n      {children}\n    </BaseDialog.Title>\n  );\n}\n\nexport function DialogDescription({ className, children, ...props }: DialogDescriptionProps) {\n  return (\n    <BaseDialog.Description {...props} className={className} data-fs-dialog-description=\"\">\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nexport function DialogClose({ className, children, ...props }: DialogCloseProps) {\n  return (\n    <BaseDialog.Close {...props} className={className} data-fs-dialog-close=\"\">\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\nexport const Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Portal: DialogPortal,\n  Backdrop: DialogBackdrop,\n  Viewport: DialogViewport,\n  Popup: DialogPopup,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n};\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":["BaseDialog","Dialog"],"sources":["../../../src/particles/dialog/dialog.tsx"],"sourcesContent":["'use client';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DialogRootProps = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  modal?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DialogPortalProps = Readonly<{\n  children?: ReactNode;\n  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */\n  container?: ComponentProps<typeof BaseDialog.Portal>['container'];\n}>;\n\nexport type DialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DialogRootDefinition = defineComponent<DialogRootProps>({\n  name: 'DialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: DialogRoot,\n  editor: { label: 'Dialog Root', category: 'layout' },\n  schema: {\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a dialog overlay. Compose as: DialogRoot > (DialogTrigger + DialogPortal > (DialogBackdrop + DialogViewport > DialogPopup > (DialogTitle + content + DialogClose))). Set modal=false only when the dialog must coexist with page interactions.',\n});\n\nexport const DialogTriggerDefinition = defineComponent<DialogTriggerProps>({\n  name: 'DialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DialogTrigger,\n  editor: { label: 'Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the dialog when clicked. Direct child of DialogRoot. Accepts any children (text, Icon). Base UI connects it to DialogRoot via context — no explicit wiring needed.',\n});\n\nexport const DialogPortalDefinition = defineComponent<DialogPortalProps>({\n  name: 'DialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: DialogPortal,\n  editor: { label: 'Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body, or into container when a parent swatch must reach the overlay). Place DialogBackdrop and DialogViewport as direct children, in that order.',\n});\n\nexport const DialogBackdropDefinition = defineComponent<DialogBackdropProps>({\n  name: 'DialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DialogBackdrop,\n  editor: { label: 'Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of DialogPortal, before DialogViewport. Clicking it closes the dialog unless disablePointerDismissal is set on DialogRoot.',\n});\n\nexport const DialogViewportDefinition = defineComponent<DialogViewportProps>({\n  name: 'DialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: DialogViewport,\n  editor: { label: 'Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for DialogPopup. Direct child of DialogPortal, after DialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place DialogPopup inside.',\n});\n\nexport const DialogPopupDefinition = defineComponent<DialogPopupProps>({\n  name: 'DialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: DialogPopup,\n  editor: { label: 'Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible dialog panel, inside DialogViewport. Place DialogTitle (required), optional DialogDescription, your content, and DialogClose inside. Style with a background, padding, and shadow.',\n});\n\nexport const DialogTitleDefinition = defineComponent<DialogTitleProps>({\n  name: 'DialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: DialogTitle,\n  editor: { label: 'Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside DialogPopup — sets the accessible name of the dialog for screen readers. Use sr-only to hide it visually when a visual title already exists.',\n});\n\nexport const DialogDescriptionDefinition = defineComponent<DialogDescriptionProps>({\n  name: 'DialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: DialogDescription,\n  editor: { label: 'Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Optional description inside DialogPopup, after DialogTitle. Provides additional context to screen readers. Omit if the dialog content is self-explanatory.',\n});\n\nexport const DialogCloseDefinition = defineComponent<DialogCloseProps>({\n  name: 'DialogClose',\n  importPath: '@vtex/faststore/components',\n  component: DialogClose,\n  editor: { label: 'Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the dialog when clicked. Place inside DialogPopup — can appear multiple times (e.g., close icon at top-right and a Cancel button at the bottom).',\n});\n\nexport function DialogRoot({ open, defaultOpen, modal = true, onOpenChange, children }: DialogRootProps) {\n  return (\n    <BaseDialog.Root open={open} defaultOpen={defaultOpen} modal={modal} onOpenChange={onOpenChange}>\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nexport function DialogTrigger({ className, children, ...props }: DialogTriggerProps) {\n  return (\n    <BaseDialog.Trigger {...props} className={className} data-fs-dialog-trigger=\"\">\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nexport function DialogPortal({ children, container }: DialogPortalProps) {\n  return <BaseDialog.Portal container={container}>{children}</BaseDialog.Portal>;\n}\n\nexport function DialogBackdrop({ className, children, ...props }: DialogBackdropProps) {\n  return (\n    <BaseDialog.Backdrop {...props} className={className} data-fs-dialog-backdrop=\"\">\n      {children}\n    </BaseDialog.Backdrop>\n  );\n}\n\nexport function DialogViewport({ className, children, ...props }: DialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function DialogPopup({ className, children, ...props }: DialogPopupProps) {\n  return (\n    <BaseDialog.Popup {...props} className={className} data-fs-dialog-popup=\"\">\n      {children}\n    </BaseDialog.Popup>\n  );\n}\n\nexport function DialogTitle({ className, children, ...props }: DialogTitleProps) {\n  return (\n    <BaseDialog.Title {...props} className={className} data-fs-dialog-title=\"\">\n      {children}\n    </BaseDialog.Title>\n  );\n}\n\nexport function DialogDescription({ className, children, ...props }: DialogDescriptionProps) {\n  return (\n    <BaseDialog.Description {...props} className={className} data-fs-dialog-description=\"\">\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nexport function DialogClose({ className, children, ...props }: DialogCloseProps) {\n  return (\n    <BaseDialog.Close {...props} className={className} data-fs-dialog-close=\"\">\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\nexport const Dialog = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Portal: DialogPortal,\n  Backdrop: DialogBackdrop,\n  Viewport: DialogViewport,\n  Popup: DialogPopup,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n};\n"],"mappings":"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"}

package/dist/particles/drawer/drawer.js

@@ -106,7 +106,7 @@ const DrawerCloseDefinition = defineComponent({
 		category: "action"
 	},
 	schema: {},
-	guideline: "Button that closes the drawer. Place at the top of Drawer.Popup. Receives ARIA label management automatically from Base UI."
+	guideline: "Button that closes the drawer. Place at the top of Drawer.Popup. It renders no label of its own, so an icon-only close needs an aria-label in the store language."
 });
 function DrawerRoot({ swipeDirection = "right", modal = true, children, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer.Root, {