@vtex/faststore 0.0.8 → 0.0.11

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, {

package/dist/particles/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["BaseDrawer","Drawer"],"sources":["../../../src/particles/drawer/drawer.tsx"],"sourcesContent":["'use client';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DrawerSwipeDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type DrawerRootProps = {\n  swipeDirection?: DrawerSwipeDirection;\n  modal?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DrawerTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DrawerPortalProps = {\n  children?: ReactNode;\n};\n\nexport type DrawerBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DrawerDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DrawerCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DrawerRootDefinition = defineComponent<DrawerRootProps>({\n  name: 'DrawerRoot',\n  importPath: '@vtex/faststore/components',\n  component: DrawerRoot,\n  editor: { label: 'Drawer Root', category: 'layout' },\n  schema: {\n    swipeDirection: { type: ['up', 'down', 'left', 'right'] as const, default: 'right', label: 'Swipe Direction' },\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a drawer side panel. When modal (the default) it delivers the full overlay contract: focus trapping inside the popup, body scroll lock on the page behind it, Escape-to-close, and backdrop-click dismissal — all inherited from Base UI, none re-implemented in the layout. Compose as: DrawerRoot > (DrawerTrigger + DrawerPortal > (DrawerBackdrop + DrawerPopup > (DrawerTitle + DrawerDescription + content + DrawerClose))). Set swipeDirection to control the slide edge (right for cart/filters, bottom for mobile menus); modal=false only when the drawer must coexist with page interactions (drops focus trap and scroll lock).',\n});\n\nexport const DrawerTriggerDefinition = defineComponent<DrawerTriggerProps>({\n  name: 'DrawerTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTrigger,\n  editor: { label: 'Drawer Trigger', category: 'action' },\n  schema: {},\n  guideline: 'Button that opens the Drawer. Place inside or outside Drawer.Root — Base UI connects them via context.',\n});\n\nexport const DrawerPortalDefinition = defineComponent<DrawerPortalProps>({\n  name: 'DrawerPortal',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPortal,\n  editor: { label: 'Drawer Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Portal wrapper that renders Drawer.Backdrop and Drawer.Popup outside the DOM tree. Always wrap both inside Drawer.Portal.',\n});\n\nexport const DrawerBackdropDefinition = defineComponent<DrawerBackdropProps>({\n  name: 'DrawerBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DrawerBackdrop,\n  editor: { label: 'Drawer Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay rendered behind the popup. Clicking it dismisses the drawer unless disablePointerDismissal is set on Drawer.Root.',\n});\n\nexport const DrawerPopupDefinition = defineComponent<DrawerPopupProps>({\n  name: 'DrawerPopup',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPopup,\n  editor: { label: 'Drawer Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'Main drawer panel. Animation and positioning are controlled by swipeDirection on Drawer.Root. Contains Drawer.Title, content, and Drawer.Close.',\n});\n\nexport const DrawerTitleDefinition = defineComponent<DrawerTitleProps>({\n  name: 'DrawerTitle',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTitle,\n  editor: { label: 'Drawer Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semantic heading inside Drawer.Popup. Required for screen reader accessibility — sets the accessible name of the dialog.',\n});\n\nexport const DrawerDescriptionDefinition = defineComponent<DrawerDescriptionProps>({\n  name: 'DrawerDescription',\n  importPath: '@vtex/faststore/components',\n  component: DrawerDescription,\n  editor: { label: 'Drawer Description', category: 'layout' },\n  schema: {},\n  guideline: 'Accessible description of the drawer. Optional but recommended for screen readers.',\n});\n\nexport const DrawerCloseDefinition = defineComponent<DrawerCloseProps>({\n  name: 'DrawerClose',\n  importPath: '@vtex/faststore/components',\n  component: DrawerClose,\n  editor: { label: 'Drawer Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Button that closes the drawer. Place at the top of Drawer.Popup. Receives ARIA label management automatically from Base UI.',\n});\n\nexport function DrawerRoot({ swipeDirection = 'right', modal = true, children, ...props }: DrawerRootProps) {\n  return (\n    <BaseDrawer.Root {...props} swipeDirection={swipeDirection} modal={modal}>\n      {children}\n    </BaseDrawer.Root>\n  );\n}\n\nexport function DrawerTrigger({ className, children, ...props }: DrawerTriggerProps) {\n  return (\n    <BaseDrawer.Trigger {...props} className={className} data-fs-drawer-trigger=\"\">\n      {children}\n    </BaseDrawer.Trigger>\n  );\n}\n\nexport function DrawerPortal({ children }: DrawerPortalProps) {\n  return <BaseDrawer.Portal>{children}</BaseDrawer.Portal>;\n}\n\nexport function DrawerBackdrop({ className, children, ...props }: DrawerBackdropProps) {\n  return (\n    <BaseDrawer.Backdrop {...props} className={className} data-fs-drawer-backdrop=\"\">\n      {children}\n    </BaseDrawer.Backdrop>\n  );\n}\n\nexport function DrawerPopup({ className, children, ...props }: DrawerPopupProps) {\n  return (\n    <BaseDrawer.Popup {...props} className={className} data-fs-drawer-popup=\"\">\n      {children}\n    </BaseDrawer.Popup>\n  );\n}\n\nexport function DrawerTitle({ className, children, ...props }: DrawerTitleProps) {\n  return (\n    <BaseDrawer.Title {...props} className={className} data-fs-drawer-title=\"\">\n      {children}\n    </BaseDrawer.Title>\n  );\n}\n\nexport function DrawerDescription({ className, children, ...props }: DrawerDescriptionProps) {\n  return (\n    <BaseDrawer.Description {...props} className={className} data-fs-drawer-description=\"\">\n      {children}\n    </BaseDrawer.Description>\n  );\n}\n\nexport function DrawerClose({ className, children, ...props }: DrawerCloseProps) {\n  return (\n    <BaseDrawer.Close {...props} className={className} data-fs-drawer-close=\"\">\n      {children}\n    </BaseDrawer.Close>\n  );\n}\n\nexport const Drawer = {\n  Root: DrawerRoot,\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Backdrop: DrawerBackdrop,\n  Popup: DrawerPopup,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Close: DrawerClose,\n};\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":["BaseDrawer","Drawer"],"sources":["../../../src/particles/drawer/drawer.tsx"],"sourcesContent":["'use client';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type DrawerSwipeDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type DrawerRootProps = {\n  swipeDirection?: DrawerSwipeDirection;\n  modal?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n};\n\nexport type DrawerTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type DrawerPortalProps = {\n  children?: ReactNode;\n};\n\nexport type DrawerBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type DrawerTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type DrawerDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type DrawerCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const DrawerRootDefinition = defineComponent<DrawerRootProps>({\n  name: 'DrawerRoot',\n  importPath: '@vtex/faststore/components',\n  component: DrawerRoot,\n  editor: { label: 'Drawer Root', category: 'layout' },\n  schema: {\n    swipeDirection: { type: ['up', 'down', 'left', 'right'] as const, default: 'right', label: 'Swipe Direction' },\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a drawer side panel. When modal (the default) it delivers the full overlay contract: focus trapping inside the popup, body scroll lock on the page behind it, Escape-to-close, and backdrop-click dismissal — all inherited from Base UI, none re-implemented in the layout. Compose as: DrawerRoot > (DrawerTrigger + DrawerPortal > (DrawerBackdrop + DrawerPopup > (DrawerTitle + DrawerDescription + content + DrawerClose))). Set swipeDirection to control the slide edge (right for cart/filters, bottom for mobile menus); modal=false only when the drawer must coexist with page interactions (drops focus trap and scroll lock).',\n});\n\nexport const DrawerTriggerDefinition = defineComponent<DrawerTriggerProps>({\n  name: 'DrawerTrigger',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTrigger,\n  editor: { label: 'Drawer Trigger', category: 'action' },\n  schema: {},\n  guideline: 'Button that opens the Drawer. Place inside or outside Drawer.Root — Base UI connects them via context.',\n});\n\nexport const DrawerPortalDefinition = defineComponent<DrawerPortalProps>({\n  name: 'DrawerPortal',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPortal,\n  editor: { label: 'Drawer Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Portal wrapper that renders Drawer.Backdrop and Drawer.Popup outside the DOM tree. Always wrap both inside Drawer.Portal.',\n});\n\nexport const DrawerBackdropDefinition = defineComponent<DrawerBackdropProps>({\n  name: 'DrawerBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: DrawerBackdrop,\n  editor: { label: 'Drawer Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay rendered behind the popup. Clicking it dismisses the drawer unless disablePointerDismissal is set on Drawer.Root.',\n});\n\nexport const DrawerPopupDefinition = defineComponent<DrawerPopupProps>({\n  name: 'DrawerPopup',\n  importPath: '@vtex/faststore/components',\n  component: DrawerPopup,\n  editor: { label: 'Drawer Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'Main drawer panel. Animation and positioning are controlled by swipeDirection on Drawer.Root. Contains Drawer.Title, content, and Drawer.Close.',\n});\n\nexport const DrawerTitleDefinition = defineComponent<DrawerTitleProps>({\n  name: 'DrawerTitle',\n  importPath: '@vtex/faststore/components',\n  component: DrawerTitle,\n  editor: { label: 'Drawer Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semantic heading inside Drawer.Popup. Required for screen reader accessibility — sets the accessible name of the dialog.',\n});\n\nexport const DrawerDescriptionDefinition = defineComponent<DrawerDescriptionProps>({\n  name: 'DrawerDescription',\n  importPath: '@vtex/faststore/components',\n  component: DrawerDescription,\n  editor: { label: 'Drawer Description', category: 'layout' },\n  schema: {},\n  guideline: 'Accessible description of the drawer. Optional but recommended for screen readers.',\n});\n\nexport const DrawerCloseDefinition = defineComponent<DrawerCloseProps>({\n  name: 'DrawerClose',\n  importPath: '@vtex/faststore/components',\n  component: DrawerClose,\n  editor: { label: 'Drawer Close', category: 'action' },\n  schema: {},\n  guideline:\n    '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.',\n});\n\nexport function DrawerRoot({ swipeDirection = 'right', modal = true, children, ...props }: DrawerRootProps) {\n  return (\n    <BaseDrawer.Root {...props} swipeDirection={swipeDirection} modal={modal}>\n      {children}\n    </BaseDrawer.Root>\n  );\n}\n\nexport function DrawerTrigger({ className, children, ...props }: DrawerTriggerProps) {\n  return (\n    <BaseDrawer.Trigger {...props} className={className} data-fs-drawer-trigger=\"\">\n      {children}\n    </BaseDrawer.Trigger>\n  );\n}\n\nexport function DrawerPortal({ children }: DrawerPortalProps) {\n  return <BaseDrawer.Portal>{children}</BaseDrawer.Portal>;\n}\n\nexport function DrawerBackdrop({ className, children, ...props }: DrawerBackdropProps) {\n  return (\n    <BaseDrawer.Backdrop {...props} className={className} data-fs-drawer-backdrop=\"\">\n      {children}\n    </BaseDrawer.Backdrop>\n  );\n}\n\nexport function DrawerPopup({ className, children, ...props }: DrawerPopupProps) {\n  return (\n    <BaseDrawer.Popup {...props} className={className} data-fs-drawer-popup=\"\">\n      {children}\n    </BaseDrawer.Popup>\n  );\n}\n\nexport function DrawerTitle({ className, children, ...props }: DrawerTitleProps) {\n  return (\n    <BaseDrawer.Title {...props} className={className} data-fs-drawer-title=\"\">\n      {children}\n    </BaseDrawer.Title>\n  );\n}\n\nexport function DrawerDescription({ className, children, ...props }: DrawerDescriptionProps) {\n  return (\n    <BaseDrawer.Description {...props} className={className} data-fs-drawer-description=\"\">\n      {children}\n    </BaseDrawer.Description>\n  );\n}\n\nexport function DrawerClose({ className, children, ...props }: DrawerCloseProps) {\n  return (\n    <BaseDrawer.Close {...props} className={className} data-fs-drawer-close=\"\">\n      {children}\n    </BaseDrawer.Close>\n  );\n}\n\nexport const Drawer = {\n  Root: DrawerRoot,\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Backdrop: DrawerBackdrop,\n  Popup: DrawerPopup,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Close: DrawerClose,\n};\n"],"mappings":"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"}

package/dist/particles/email-field/email-field.d.ts

@@ -14,6 +14,7 @@ export type EmailFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'
   disabled?: boolean;
   required?: boolean;
   name?: string;
+  autoComplete?: string;
 };
 /**
  * Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).
@@ -32,6 +33,6 @@ export declare const EmailFieldDefinition: ComponentDefinition<EmailFieldProps>;
  * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no
  * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.
  */
-export declare function EmailField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, className, ...props }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailField({ value, defaultValue, onValueChange, onBlur, invalid, errorMessage, label, placeholder, disabled, required, name, autoComplete, className, ...props }: EmailFieldProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=email-field.d.ts.map

package/dist/particles/email-field/email-field.js

@@ -57,7 +57,7 @@ const EmailFieldDefinition = defineComponent({
 * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no
 * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.
 */
-function EmailField({ value, defaultValue = "", onValueChange, onBlur, invalid = false, errorMessage, label, placeholder, disabled = false, required = true, name = "email", className, ...props }) {
+function EmailField({ value, defaultValue = "", onValueChange, onBlur, invalid = false, errorMessage, label, placeholder, disabled = false, required = true, name = "email", autoComplete, className, ...props }) {
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const [formatInvalid, setFormatInvalid] = useState(false);
@@ -86,6 +86,7 @@ function EmailField({ value, defaultValue = "", onValueChange, onBlur, invalid =
 			/* @__PURE__ */ jsx(Field.Control, {
 				type: "email",
 				name,
+				autoComplete,
 				required,
 				placeholder,
 				disabled,

package/dist/particles/email-field/email-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-field.js","names":[],"sources":["../../../src/particles/email-field/email-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef, FocusEvent } from 'react';\nimport { useState } from 'react';\nimport { Field } from '../field/field.js';\n\nexport type EmailFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n};\n\n/**\n * Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).\n * The exact legacy source was unavailable at authoring time, so this uses the WHATWG/HTML5 email-input\n * pattern — the same rule the browser applies to `<input type=\"email\">`. Format validation runs on\n * blur/submit only, never per keystroke (Invariants & Constraints).\n */\nexport const EMAIL_VALIDATE_REGEX =\n  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;\n\n/** True when `value` is a well-formed email address. Trims surrounding whitespace before testing. */\nexport function isValidEmail(value: string): boolean {\n  return EMAIL_VALIDATE_REGEX.test(value.trim());\n}\n\nexport const EmailFieldDefinition = defineComponent<EmailFieldProps>({\n  name: 'EmailField',\n  importPath: '@vtex/faststore/components',\n  component: EmailField,\n  editor: { label: 'Email Field', category: 'content' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n    required: { type: 'boolean', default: true, label: 'Required' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational, data-agnostic email input with blur/submit format validation; for a checkout-bound field use EmailIdentificationControl instead. See email-field.md.',\n});\n\n/**\n * Presentational email input (particle). Composes the `Field` particle (`Field.Root` + `Field.Label` +\n * `Field.Control` + `Field.Error`) and owns email **format** validation: it validates on blur/submit\n * (never per keystroke) and surfaces `errorMessage` inline when the format is invalid or when the host\n * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no\n * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.\n */\nexport function EmailField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  onBlur,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  disabled = false,\n  required = true,\n  name = 'email',\n  className,\n  ...props\n}: EmailFieldProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [formatInvalid, setFormatInvalid] = useState(false);\n\n  const currentValue = isControlled ? value : internalValue;\n  const showInvalid = invalid || formatInvalid;\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const next = event.target.value;\n    if (!isControlled) setInternalValue(next);\n    // Clear a prior format error while typing; it is re-evaluated on the next blur (no per-keystroke validation).\n    if (formatInvalid) setFormatInvalid(false);\n    onValueChange?.(next);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    const trimmed = currentValue.trim();\n    setFormatInvalid(trimmed.length > 0 && !isValidEmail(trimmed));\n    onBlur?.(event);\n  }\n\n  return (\n    <Field.Root\n      {...props}\n      className={className}\n      name={name}\n      invalid={showInvalid}\n      disabled={disabled}\n      data-fs-email-field=\"\"\n    >\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <Field.Control\n        type=\"email\"\n        name={name}\n        required={required}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        {...(isControlled ? { value: currentValue } : { defaultValue })}\n      />\n      {showInvalid && errorMessage ? <Field.Error match>{errorMessage}</Field.Error> : null}\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAa,uBACX;;AAGF,SAAgB,aAAa,OAAwB;CACnD,OAAO,qBAAqB,KAAK,MAAM,KAAK,CAAC;AAC/C;AAEA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAU;CACpD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,UAAU;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAW;EAC9D,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;;;AASD,SAAgB,WAAW,EACzB,OACA,eAAe,IACf,eACA,QACA,UAAU,OACV,cACA,OACA,aACA,WAAW,OACX,WAAW,MACX,OAAO,SACP,WACA,GAAG,SACe;CAClB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,cAAc,WAAW;CAE/B,SAAS,aAAa,OAAsC;EAC1D,MAAM,OAAO,MAAM,OAAO;EAC1B,IAAI,CAAC,cAAc,iBAAiB,IAAI;EAExC,IAAI,eAAe,iBAAiB,KAAK;EACzC,gBAAgB,IAAI;CACtB;CAEA,SAAS,WAAW,OAAqC;EACvD,MAAM,UAAU,aAAa,KAAK;EAClC,iBAAiB,QAAQ,SAAS,KAAK,CAAC,aAAa,OAAO,CAAC;EAC7D,SAAS,KAAK;CAChB;CAEA,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACO;EACL;EACN,SAAS;EACC;EACV,uBAAoB;EANtB,UAAA;GAQG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,oBAAC,MAAM,SAAP;IACE,MAAK;IACC;IACI;IACG;IACH;IACV,UAAU;IACV,QAAQ;IACR,GAAK,eAAe,EAAE,OAAO,aAAa,IAAI,EAAE,aAAa;GAC9D,CAAA;GACA,eAAe,eAAe,oBAAC,MAAM,OAAP;IAAa,OAAA;IAAO,UAAA;GAA0B,CAAA,IAAI;EACvE;;AAEhB"}
+{"version":3,"file":"email-field.js","names":[],"sources":["../../../src/particles/email-field/email-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, ComponentPropsWithRef, FocusEvent } from 'react';\nimport { useState } from 'react';\nimport { Field } from '../field/field.js';\n\nexport type EmailFieldProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'value' | 'onChange' | 'onBlur'> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  autoComplete?: string;\n};\n\n/**\n * Email format rule, ported from the legacy `EMAIL_VALIDATE_REGEX` (fastcheckout `validations.ts`).\n * The exact legacy source was unavailable at authoring time, so this uses the WHATWG/HTML5 email-input\n * pattern — the same rule the browser applies to `<input type=\"email\">`. Format validation runs on\n * blur/submit only, never per keystroke (Invariants & Constraints).\n */\nexport const EMAIL_VALIDATE_REGEX =\n  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;\n\n/** True when `value` is a well-formed email address. Trims surrounding whitespace before testing. */\nexport function isValidEmail(value: string): boolean {\n  return EMAIL_VALIDATE_REGEX.test(value.trim());\n}\n\nexport const EmailFieldDefinition = defineComponent<EmailFieldProps>({\n  name: 'EmailField',\n  importPath: '@vtex/faststore/components',\n  component: EmailField,\n  editor: { label: 'Email Field', category: 'content' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n    required: { type: 'boolean', default: true, label: 'Required' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational, data-agnostic email input with blur/submit format validation; for a checkout-bound field use EmailIdentificationControl instead. See email-field.md.',\n});\n\n/**\n * Presentational email input (particle). Composes the `Field` particle (`Field.Root` + `Field.Label` +\n * `Field.Control` + `Field.Error`) and owns email **format** validation: it validates on blur/submit\n * (never per keystroke) and surfaces `errorMessage` inline when the format is invalid or when the host\n * forces `invalid` (e.g. a server-side error from `EmailIdentificationControl`). It consumes no\n * GraphQL and no domain context — value flows through `value`/`defaultValue`/`onValueChange`.\n */\nexport function EmailField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  onBlur,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  disabled = false,\n  required = true,\n  name = 'email',\n  autoComplete,\n  className,\n  ...props\n}: EmailFieldProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [formatInvalid, setFormatInvalid] = useState(false);\n\n  const currentValue = isControlled ? value : internalValue;\n  const showInvalid = invalid || formatInvalid;\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const next = event.target.value;\n    if (!isControlled) setInternalValue(next);\n    // Clear a prior format error while typing; it is re-evaluated on the next blur (no per-keystroke validation).\n    if (formatInvalid) setFormatInvalid(false);\n    onValueChange?.(next);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    const trimmed = currentValue.trim();\n    setFormatInvalid(trimmed.length > 0 && !isValidEmail(trimmed));\n    onBlur?.(event);\n  }\n\n  return (\n    <Field.Root\n      {...props}\n      className={className}\n      name={name}\n      invalid={showInvalid}\n      disabled={disabled}\n      data-fs-email-field=\"\"\n    >\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <Field.Control\n        type=\"email\"\n        name={name}\n        autoComplete={autoComplete}\n        required={required}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        {...(isControlled ? { value: currentValue } : { defaultValue })}\n      />\n      {showInvalid && errorMessage ? <Field.Error match>{errorMessage}</Field.Error> : null}\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAa,uBACX;;AAGF,SAAgB,aAAa,OAAwB;CACnD,OAAO,qBAAqB,KAAK,MAAM,KAAK,CAAC;AAC/C;AAEA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAU;CACpD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,UAAU;GAAE,MAAM;GAAW,SAAS;GAAM,OAAO;EAAW;EAC9D,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;;;AASD,SAAgB,WAAW,EACzB,OACA,eAAe,IACf,eACA,QACA,UAAU,OACV,cACA,OACA,aACA,WAAW,OACX,WAAW,MACX,OAAO,SACP,cACA,WACA,GAAG,SACe;CAClB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,eAAe,eAAe,QAAQ;CAC5C,MAAM,cAAc,WAAW;CAE/B,SAAS,aAAa,OAAsC;EAC1D,MAAM,OAAO,MAAM,OAAO;EAC1B,IAAI,CAAC,cAAc,iBAAiB,IAAI;EAExC,IAAI,eAAe,iBAAiB,KAAK;EACzC,gBAAgB,IAAI;CACtB;CAEA,SAAS,WAAW,OAAqC;EACvD,MAAM,UAAU,aAAa,KAAK;EAClC,iBAAiB,QAAQ,SAAS,KAAK,CAAC,aAAa,OAAO,CAAC;EAC7D,SAAS,KAAK;CAChB;CAEA,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACO;EACL;EACN,SAAS;EACC;EACV,uBAAoB;EANtB,UAAA;GAQG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,oBAAC,MAAM,SAAP;IACE,MAAK;IACC;IACQ;IACJ;IACG;IACH;IACV,UAAU;IACV,QAAQ;IACR,GAAK,eAAe,EAAE,OAAO,aAAa,IAAI,EAAE,aAAa;GAC9D,CAAA;GACA,eAAe,eAAe,oBAAC,MAAM,OAAP;IAAa,OAAA;IAAO,UAAA;GAA0B,CAAA,IAAI;EACvE;;AAEhB"}

package/dist/particles/footer-link-group/footer-link-group.js

@@ -132,6 +132,7 @@ function FooterLinkGroup({ heading, links, $content, className, ...props }) {
 		className,
 		"data-fs-footer-link-group": "",
 		children: [/* @__PURE__ */ jsx(AccordionRoot, {
+			role: "group",
 			"data-fs-footer-link-group-accordion": "",
 			children: /* @__PURE__ */ jsxs(AccordionItem, {
 				value: ACCORDION_ITEM_VALUE,

package/dist/particles/footer-link-group/footer-link-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer-link-group.js","names":[],"sources":["../../../src/particles/footer-link-group/footer-link-group.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from '../accordion/accordion.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const FooterLinkGroupContent = defineContentType({\n  id: 'footer-link-group',\n  title: 'Footer Link Group',\n  description: 'A heading and its ordered list of institutional links.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it. The\n    // render gate holds the heading invariant instead, being the only point that sees both channels.\n    properties: {\n      heading: { type: 'string', minLength: 1, title: 'Group heading' },\n      links: {\n        type: 'array',\n        title: 'Links',\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'href'],\n          properties: {\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            href: {\n              type: 'string',\n              minLength: 1,\n              title: 'URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and deliberately lookahead-free: nothing in this repo\n              // compiles it, so its one consumer is the Content Platform Admin's form, whose regex\n              // engine may be an RE2 family that rejects lookahead outright.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            target: { type: 'string', enum: ['_self', '_blank'], default: '_self', title: 'Open in' },\n          },\n        },\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype FooterLinkGroupContentValue = ContentValue<typeof FooterLinkGroupContent>;\n\ntype FooterLinkGroupContentLink = NonNullable<FooterLinkGroupContentValue['links']>[number];\n\n/** One authored link. The prop accepts a page reference; a CMS href stays a string. */\nexport type FooterLinkGroupLink = Omit<FooterLinkGroupContentLink, 'href'> & {\n  href: PageRef | string;\n};\n\nexport type FooterLinkGroupProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the group heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the link list, used when no CMS entry supplies one. */\n  links?: readonly FooterLinkGroupLink[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: FooterLinkGroupContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const FooterLinkGroupDefinition = defineComponent({\n  name: 'FooterLinkGroup',\n  importPath: '@vtex/faststore/components',\n  component: FooterLinkGroup,\n  content: FooterLinkGroupContent,\n  editor: { label: 'Footer Link Group', category: 'navigation' },\n  schema: {\n    heading: { type: 'string', label: 'Group heading' },\n    links: { type: 'array', label: 'Links' },\n  },\n  guideline:\n    \"One heading and its institutional links, both CMS-editable. Renders as a desktop column and a mobile accordion at the same time; the store's swatch pair decides which one a breakpoint shows. See footer-link-group.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/** A resolved link, ready for both forms. A null `href` is a destination the allowlist refused. */\ntype ResolvedLink = {\n  label: string;\n  href: PageRef | string | null;\n  target: FooterLinkGroupLink['target'];\n};\n\nfunction readLinks(\n  content: readonly FooterLinkGroupContentLink[] | undefined,\n  authored: readonly FooterLinkGroupLink[] | undefined,\n): readonly FooterLinkGroupLink[] {\n  if (content !== undefined) return content;\n  return authored ?? [];\n}\n\nfunction resolveDestination(href: PageRef | string, index: number): PageRef | string | null {\n  if (typeof href !== 'string') return href;\n\n  const destination = resolveSafeHref(href);\n  if (!destination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[FooterLinkGroup] link destination rejected', { index, reason: destination.reason });\n    return null;\n  }\n  return destination.href;\n}\n\n/** Unique within its own root, and every group renders its own root. */\nconst ACCORDION_ITEM_VALUE = 'links';\n\n/**\n * Resolves the whole list once per render, so both forms show the same links and a refused\n * destination logs one line rather than two.\n */\nfunction resolveLinks(links: readonly FooterLinkGroupLink[]): ResolvedLink[] {\n  const resolved: ResolvedLink[] = [];\n\n  links.forEach((link, index) => {\n    // `minLength` is enforced by neither the runtime slice nor the preflight, so a blank label\n    // reaches the component. Drop the link: an anchor with no accessible name is a WCAG failure.\n    if (link.label.trim().length === 0) {\n      return;\n    }\n    resolved.push({\n      label: link.label,\n      href: resolveDestination(link.href, index),\n      target: link.target,\n    });\n  });\n\n  return resolved;\n}\n\nexport function FooterLinkGroup({ heading, links, $content, className, ...props }: FooterLinkGroupProps) {\n  const groupHeading = $content?.heading ?? heading;\n  // An entry supplying `links: []` beats an authored prop: a merchant who cleared the list cleared it.\n  const resolved = resolveLinks(readLinks($content?.links, links));\n\n  if (!groupHeading?.trim() || resolved.length === 0) {\n    return null;\n  }\n\n  // One element rendered in both forms, so the two cannot drift.\n  const list = (\n    <ul data-fs-footer-link-group-list=\"\">\n      {resolved.map((link, index) => (\n        <li key={index} data-fs-footer-link-group-item=\"\">\n          {link.href === null ? (\n            <span data-fs-text=\"\" data-fs-footer-link-group-text=\"\">\n              {link.label}\n            </span>\n          ) : (\n            <NavigationLink href={link.href} target={link.target} data-fs-footer-link-group-link=\"\">\n              {link.label}\n            </NavigationLink>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n\n  return (\n    <div {...props} className={className} data-fs-footer-link-group=\"\">\n      <AccordionRoot data-fs-footer-link-group-accordion=\"\">\n        <AccordionItem value={ACCORDION_ITEM_VALUE}>\n          <AccordionHeader data-fs-footer-link-group-heading=\"\">\n            <AccordionTrigger data-fs-text=\"\" data-fs-footer-link-group-trigger=\"\">\n              {groupHeading}\n            </AccordionTrigger>\n          </AccordionHeader>\n          {/* `hiddenUntilFound` requires the panel to stay mounted while closed, and the wrapper\n              defaults `keepMounted` to false, so passing it keeps Base UI from warning about the pair. */}\n          <AccordionPanel hiddenUntilFound keepMounted data-fs-footer-link-group-panel=\"\">\n            {list}\n          </AccordionPanel>\n        </AccordionItem>\n      </AccordionRoot>\n      <div data-fs-footer-link-group-column=\"\">\n        <h3 data-fs-text=\"\" data-fs-footer-link-group-heading=\"\">\n          {groupHeading}\n        </h3>\n        {list}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"footer-link-group.js","names":[],"sources":["../../../src/particles/footer-link-group/footer-link-group.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from '../accordion/accordion.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const FooterLinkGroupContent = defineContentType({\n  id: 'footer-link-group',\n  title: 'Footer Link Group',\n  description: 'A heading and its ordered list of institutional links.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it. The\n    // render gate holds the heading invariant instead, being the only point that sees both channels.\n    properties: {\n      heading: { type: 'string', minLength: 1, title: 'Group heading' },\n      links: {\n        type: 'array',\n        title: 'Links',\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'href'],\n          properties: {\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            href: {\n              type: 'string',\n              minLength: 1,\n              title: 'URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and deliberately lookahead-free: nothing in this repo\n              // compiles it, so its one consumer is the Content Platform Admin's form, whose regex\n              // engine may be an RE2 family that rejects lookahead outright.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            target: { type: 'string', enum: ['_self', '_blank'], default: '_self', title: 'Open in' },\n          },\n        },\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype FooterLinkGroupContentValue = ContentValue<typeof FooterLinkGroupContent>;\n\ntype FooterLinkGroupContentLink = NonNullable<FooterLinkGroupContentValue['links']>[number];\n\n/** One authored link. The prop accepts a page reference; a CMS href stays a string. */\nexport type FooterLinkGroupLink = Omit<FooterLinkGroupContentLink, 'href'> & {\n  href: PageRef | string;\n};\n\nexport type FooterLinkGroupProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the group heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the link list, used when no CMS entry supplies one. */\n  links?: readonly FooterLinkGroupLink[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: FooterLinkGroupContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const FooterLinkGroupDefinition = defineComponent({\n  name: 'FooterLinkGroup',\n  importPath: '@vtex/faststore/components',\n  component: FooterLinkGroup,\n  content: FooterLinkGroupContent,\n  editor: { label: 'Footer Link Group', category: 'navigation' },\n  schema: {\n    heading: { type: 'string', label: 'Group heading' },\n    links: { type: 'array', label: 'Links' },\n  },\n  guideline:\n    \"One heading and its institutional links, both CMS-editable. Renders as a desktop column and a mobile accordion at the same time; the store's swatch pair decides which one a breakpoint shows. See footer-link-group.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/** A resolved link, ready for both forms. A null `href` is a destination the allowlist refused. */\ntype ResolvedLink = {\n  label: string;\n  href: PageRef | string | null;\n  target: FooterLinkGroupLink['target'];\n};\n\nfunction readLinks(\n  content: readonly FooterLinkGroupContentLink[] | undefined,\n  authored: readonly FooterLinkGroupLink[] | undefined,\n): readonly FooterLinkGroupLink[] {\n  if (content !== undefined) return content;\n  return authored ?? [];\n}\n\nfunction resolveDestination(href: PageRef | string, index: number): PageRef | string | null {\n  if (typeof href !== 'string') return href;\n\n  const destination = resolveSafeHref(href);\n  if (!destination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[FooterLinkGroup] link destination rejected', { index, reason: destination.reason });\n    return null;\n  }\n  return destination.href;\n}\n\n/** Unique within its own root, and every group renders its own root. */\nconst ACCORDION_ITEM_VALUE = 'links';\n\n/**\n * Resolves the whole list once per render, so both forms show the same links and a refused\n * destination logs one line rather than two.\n */\nfunction resolveLinks(links: readonly FooterLinkGroupLink[]): ResolvedLink[] {\n  const resolved: ResolvedLink[] = [];\n\n  links.forEach((link, index) => {\n    // `minLength` is enforced by neither the runtime slice nor the preflight, so a blank label\n    // reaches the component. Drop the link: an anchor with no accessible name is a WCAG failure.\n    if (link.label.trim().length === 0) {\n      return;\n    }\n    resolved.push({\n      label: link.label,\n      href: resolveDestination(link.href, index),\n      target: link.target,\n    });\n  });\n\n  return resolved;\n}\n\nexport function FooterLinkGroup({ heading, links, $content, className, ...props }: FooterLinkGroupProps) {\n  const groupHeading = $content?.heading ?? heading;\n  // An entry supplying `links: []` beats an authored prop: a merchant who cleared the list cleared it.\n  const resolved = resolveLinks(readLinks($content?.links, links));\n\n  if (!groupHeading?.trim() || resolved.length === 0) {\n    return null;\n  }\n\n  // One element rendered in both forms, so the two cannot drift.\n  const list = (\n    <ul data-fs-footer-link-group-list=\"\">\n      {resolved.map((link, index) => (\n        <li key={index} data-fs-footer-link-group-item=\"\">\n          {link.href === null ? (\n            <span data-fs-text=\"\" data-fs-footer-link-group-text=\"\">\n              {link.label}\n            </span>\n          ) : (\n            <NavigationLink href={link.href} target={link.target} data-fs-footer-link-group-link=\"\">\n              {link.label}\n            </NavigationLink>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n\n  return (\n    <div {...props} className={className} data-fs-footer-link-group=\"\">\n      {/* Base UI makes the root a `region`; an unnamed one repeats once per group. A `group` keeps the\n          grouping and adds no landmark. */}\n      <AccordionRoot role=\"group\" data-fs-footer-link-group-accordion=\"\">\n        <AccordionItem value={ACCORDION_ITEM_VALUE}>\n          <AccordionHeader data-fs-footer-link-group-heading=\"\">\n            <AccordionTrigger data-fs-text=\"\" data-fs-footer-link-group-trigger=\"\">\n              {groupHeading}\n            </AccordionTrigger>\n          </AccordionHeader>\n          {/* `hiddenUntilFound` requires the panel to stay mounted while closed, and the wrapper\n              defaults `keepMounted` to false, so passing it keeps Base UI from warning about the pair. */}\n          <AccordionPanel hiddenUntilFound keepMounted data-fs-footer-link-group-panel=\"\">\n            {list}\n          </AccordionPanel>\n        </AccordionItem>\n      </AccordionRoot>\n      <div data-fs-footer-link-group-column=\"\">\n        <h3 data-fs-text=\"\" data-fs-footer-link-group-heading=\"\">\n          {groupHeading}\n        </h3>\n        {list}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/footer-social/footer-social.d.ts

@@ -57,7 +57,7 @@ export declare const FooterSocialContent: {
 };
 /**
  * The platform glyphs `platform` admits, every one verified to resolve. Exported because a store's
- * `global.json` has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —
+ * foundation has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —
  * one import there instead of five retyped strings. Reading it off the model rather than declaring it
  * beside one makes the two impossible to drift apart.
  */

package/dist/particles/footer-social/footer-social.js

@@ -65,7 +65,7 @@ const FooterSocialContent = defineContentType({
 });
 /**
 * The platform glyphs `platform` admits, every one verified to resolve. Exported because a store's
-* `global.json` has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —
+* foundation has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —
 * one import there instead of five retyped strings. Reading it off the model rather than declaring it
 * beside one makes the two impossible to drift apart.
 */

package/dist/particles/footer-social/footer-social.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer-social.js","names":[],"sources":["../../../src/particles/footer-social/footer-social.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { Icon } from '../icon/icon.js';\nimport { Image } from '../image/image.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const FooterSocialContent = defineContentType({\n  id: 'footer-social',\n  title: 'Footer Social',\n  description: \"Links to the store's official social profiles, shown as a row of platform icons.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it.\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      entries: {\n        type: 'array',\n        title: 'Social profiles',\n        // Author-time guidance only: no read-time gate enforces item bounds, so its one consumer is\n        // the Content Platform Admin's form. An empty list still reaches the component, which\n        // self-hides on it. No ceiling — a brand is on as many platforms as it is on.\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'url'],\n          properties: {\n            // Inline rather than a named constant: the catalog scanner reads this file statically\n            // and rejects an identifier it cannot evaluate. `SOCIAL_PLATFORM_NAMES` derives from here.\n            // Every name resolves: facebook, instagram and pinterest through the base dialect's\n            // embedded floor, linkedin and youtube only through a provisioned lucide. No twitter —\n            // both vocabularies still draw the old bird, and an enum member cannot be narrowed once\n            // published, so Twitter/X rides iconUrl alongside TikTok and WhatsApp.\n            platform: {\n              type: 'string',\n              enum: ['facebook', 'instagram', 'linkedin', 'pinterest', 'youtube'],\n              title: 'Platform',\n            },\n            url: {\n              type: 'string',\n              minLength: 1,\n              title: 'Profile URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and deliberately identical to FooterLinkGroup's: the Admin\n              // form must not reject a destination `resolveSafeHref` would have accepted. Lookahead-free\n              // because the Admin's regex engine may be an RE2 family that rejects lookahead outright.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            iconUrl: {\n              type: 'string',\n              format: 'uri',\n              title: 'Custom icon',\n              widget: { 'ui:widget': 'media-gallery' },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The platform glyphs `platform` admits, every one verified to resolve. Exported because a store's\n * `global.json` has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —\n * one import there instead of five retyped strings. Reading it off the model rather than declaring it\n * beside one makes the two impossible to drift apart.\n */\nexport const SOCIAL_PLATFORM_NAMES = FooterSocialContent.schema.properties.entries.items.properties.platform.enum;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype FooterSocialContentValue = ContentValue<typeof FooterSocialContent>;\n\n/** One profile in the row. Derived from the model so the prop and content channels cannot drift. */\nexport type FooterSocialEntry = NonNullable<FooterSocialContentValue['entries']>[number];\n\ntype SocialPlatformName = NonNullable<FooterSocialEntry['platform']>;\n\nexport type FooterSocialProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the section heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the profile list, used when no CMS entry supplies one. */\n  entries?: readonly FooterSocialEntry[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: FooterSocialContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const FooterSocialDefinition = defineComponent({\n  name: 'FooterSocial',\n  importPath: '@vtex/faststore/components',\n  component: FooterSocial,\n  content: FooterSocialContent,\n  editor: { label: 'Footer Social', category: 'navigation' },\n  schema: {\n    heading: { type: 'string', label: 'Heading' },\n    entries: { type: 'array', label: 'Social profiles' },\n  },\n  guideline:\n    \"The store's official social profiles as a row of icon links, both the heading and the list CMS-editable. Every link opens in a new tab. Every predefined platform name must be listed in the store's icons.include. See footer-social.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * An entry that can render: a non-blank label, one glyph source, and a destination the allowlist\n * either cleared or refused. The render branches on `href` first — a null one renders the label as\n * text and no glyph at all — so on that path the glyph source survives only to key the discriminator.\n */\ntype ResolvedEntry =\n  | { label: string; href: string | null; platform: SocialPlatformName; src?: undefined }\n  | { label: string; href: string | null; platform?: SocialPlatformName; src: string };\n\n/**\n * Drops every entry that cannot render both a glyph and an accessible name, then vets what is left.\n * Neither read-time gate enforces `minLength`, so a blank label reaches the component, and `platform`\n * is optional so TikTok can arrive through `iconUrl` — which leaves an entry carrying neither, also\n * legal and also unrenderable. An icon with no name is the one thing F3 must not ship.\n *\n * Renderability is settled before the destination is looked at, so a dropped entry never logs: the\n * filter answers whether this is a social entry at all, and the destination only decides which form\n * it takes.\n */\nfunction resolveEntries(entries: readonly FooterSocialEntry[]): ResolvedEntry[] {\n  const resolved: ResolvedEntry[] = [];\n\n  entries.forEach((entry, index) => {\n    if (!entry.label.trim() || !(entry.iconUrl?.trim() || entry.platform)) {\n      return;\n    }\n\n    const destination = resolveSafeHref(entry.url);\n    if (!destination.safe) {\n      // A bounded reason and no authored value, the convention the content runtime's own log follows.\n      console.warn('[FooterSocial] link destination rejected', { index, reason: destination.reason });\n    }\n    const href = destination.safe ? destination.href : null;\n\n    if (entry.iconUrl?.trim()) {\n      resolved.push({ label: entry.label, href, platform: entry.platform, src: entry.iconUrl });\n    } else if (entry.platform) {\n      resolved.push({ label: entry.label, href, platform: entry.platform });\n    }\n  });\n\n  return resolved;\n}\n\nexport function FooterSocial({ heading, entries, $content, className, ...props }: FooterSocialProps) {\n  const sectionHeading = $content?.heading ?? heading;\n  // An entry supplying `entries: []` beats an authored prop: a merchant who cleared the row cleared it.\n  const resolved = resolveEntries($content?.entries ?? entries ?? []);\n\n  if (resolved.length === 0) return null;\n\n  // A blank heading is unconfigured, not an empty value: no element and no group name, rather than\n  // an empty one. Trim to decide, never to render.\n  const named = Boolean(sectionHeading?.trim());\n\n  return (\n    <div {...props} className={className} data-fs-footer-social=\"\">\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-footer-social-heading=\"\">\n          {sectionHeading}\n        </h3>\n      ) : null}\n      {/* biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose\n          computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit\n          role is what holds the semantics the named list was chosen for. */}\n      <ul role=\"list\" data-fs-footer-social-list=\"\" aria-label={named ? sectionHeading : undefined}>\n        {resolved.map((entry, index) => (\n          <li key={index} data-fs-footer-social-item=\"\" data-fs-footer-social-platform={entry.platform}>\n            {entry.href === null ? (\n              <span data-fs-text=\"\" data-fs-footer-social-text=\"\">\n                {entry.label}\n              </span>\n            ) : (\n              <NavigationLink href={entry.href} target=\"_blank\" data-fs-footer-social-link=\"\">\n                {entry.src === undefined ? (\n                  <>\n                    <Icon name={entry.platform} data-fs-footer-social-icon=\"\" />\n                    <span data-fs-sr-only=\"\" className=\"sr-only\">\n                      {entry.label}\n                    </span>\n                  </>\n                ) : (\n                  <Image src={entry.src} alt={entry.label} data-fs-footer-social-icon=\"\" />\n                )}\n              </NavigationLink>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"footer-social.js","names":[],"sources":["../../../src/particles/footer-social/footer-social.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { Icon } from '../icon/icon.js';\nimport { Image } from '../image/image.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const FooterSocialContent = defineContentType({\n  id: 'footer-social',\n  title: 'Footer Social',\n  description: \"Links to the store's official social profiles, shown as a row of platform icons.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it.\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      entries: {\n        type: 'array',\n        title: 'Social profiles',\n        // Author-time guidance only: no read-time gate enforces item bounds, so its one consumer is\n        // the Content Platform Admin's form. An empty list still reaches the component, which\n        // self-hides on it. No ceiling — a brand is on as many platforms as it is on.\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'url'],\n          properties: {\n            // Inline rather than a named constant: the catalog scanner reads this file statically\n            // and rejects an identifier it cannot evaluate. `SOCIAL_PLATFORM_NAMES` derives from here.\n            // Every name resolves: facebook, instagram and pinterest through the base dialect's\n            // embedded floor, linkedin and youtube only through a provisioned lucide. No twitter —\n            // both vocabularies still draw the old bird, and an enum member cannot be narrowed once\n            // published, so Twitter/X rides iconUrl alongside TikTok and WhatsApp.\n            platform: {\n              type: 'string',\n              enum: ['facebook', 'instagram', 'linkedin', 'pinterest', 'youtube'],\n              title: 'Platform',\n            },\n            url: {\n              type: 'string',\n              minLength: 1,\n              title: 'Profile URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and deliberately identical to FooterLinkGroup's: the Admin\n              // form must not reject a destination `resolveSafeHref` would have accepted. Lookahead-free\n              // because the Admin's regex engine may be an RE2 family that rejects lookahead outright.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            iconUrl: {\n              type: 'string',\n              format: 'uri',\n              title: 'Custom icon',\n              widget: { 'ui:widget': 'media-gallery' },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The platform glyphs `platform` admits, every one verified to resolve. Exported because a store's\n * foundation has to list them under `icons.include` for a CMS-chosen name to resolve at runtime —\n * one import there instead of five retyped strings. Reading it off the model rather than declaring it\n * beside one makes the two impossible to drift apart.\n */\nexport const SOCIAL_PLATFORM_NAMES = FooterSocialContent.schema.properties.entries.items.properties.platform.enum;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype FooterSocialContentValue = ContentValue<typeof FooterSocialContent>;\n\n/** One profile in the row. Derived from the model so the prop and content channels cannot drift. */\nexport type FooterSocialEntry = NonNullable<FooterSocialContentValue['entries']>[number];\n\ntype SocialPlatformName = NonNullable<FooterSocialEntry['platform']>;\n\nexport type FooterSocialProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the section heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the profile list, used when no CMS entry supplies one. */\n  entries?: readonly FooterSocialEntry[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: FooterSocialContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const FooterSocialDefinition = defineComponent({\n  name: 'FooterSocial',\n  importPath: '@vtex/faststore/components',\n  component: FooterSocial,\n  content: FooterSocialContent,\n  editor: { label: 'Footer Social', category: 'navigation' },\n  schema: {\n    heading: { type: 'string', label: 'Heading' },\n    entries: { type: 'array', label: 'Social profiles' },\n  },\n  guideline:\n    \"The store's official social profiles as a row of icon links, both the heading and the list CMS-editable. Every link opens in a new tab. Every predefined platform name must be listed in the store's icons.include. See footer-social.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * An entry that can render: a non-blank label, one glyph source, and a destination the allowlist\n * either cleared or refused. The render branches on `href` first — a null one renders the label as\n * text and no glyph at all — so on that path the glyph source survives only to key the discriminator.\n */\ntype ResolvedEntry =\n  | { label: string; href: string | null; platform: SocialPlatformName; src?: undefined }\n  | { label: string; href: string | null; platform?: SocialPlatformName; src: string };\n\n/**\n * Drops every entry that cannot render both a glyph and an accessible name, then vets what is left.\n * Neither read-time gate enforces `minLength`, so a blank label reaches the component, and `platform`\n * is optional so TikTok can arrive through `iconUrl` — which leaves an entry carrying neither, also\n * legal and also unrenderable. An icon with no name is the one thing F3 must not ship.\n *\n * Renderability is settled before the destination is looked at, so a dropped entry never logs: the\n * filter answers whether this is a social entry at all, and the destination only decides which form\n * it takes.\n */\nfunction resolveEntries(entries: readonly FooterSocialEntry[]): ResolvedEntry[] {\n  const resolved: ResolvedEntry[] = [];\n\n  entries.forEach((entry, index) => {\n    if (!entry.label.trim() || !(entry.iconUrl?.trim() || entry.platform)) {\n      return;\n    }\n\n    const destination = resolveSafeHref(entry.url);\n    if (!destination.safe) {\n      // A bounded reason and no authored value, the convention the content runtime's own log follows.\n      console.warn('[FooterSocial] link destination rejected', { index, reason: destination.reason });\n    }\n    const href = destination.safe ? destination.href : null;\n\n    if (entry.iconUrl?.trim()) {\n      resolved.push({ label: entry.label, href, platform: entry.platform, src: entry.iconUrl });\n    } else if (entry.platform) {\n      resolved.push({ label: entry.label, href, platform: entry.platform });\n    }\n  });\n\n  return resolved;\n}\n\nexport function FooterSocial({ heading, entries, $content, className, ...props }: FooterSocialProps) {\n  const sectionHeading = $content?.heading ?? heading;\n  // An entry supplying `entries: []` beats an authored prop: a merchant who cleared the row cleared it.\n  const resolved = resolveEntries($content?.entries ?? entries ?? []);\n\n  if (resolved.length === 0) return null;\n\n  // A blank heading is unconfigured, not an empty value: no element and no group name, rather than\n  // an empty one. Trim to decide, never to render.\n  const named = Boolean(sectionHeading?.trim());\n\n  return (\n    <div {...props} className={className} data-fs-footer-social=\"\">\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-footer-social-heading=\"\">\n          {sectionHeading}\n        </h3>\n      ) : null}\n      {/* biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose\n          computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit\n          role is what holds the semantics the named list was chosen for. */}\n      <ul role=\"list\" data-fs-footer-social-list=\"\" aria-label={named ? sectionHeading : undefined}>\n        {resolved.map((entry, index) => (\n          <li key={index} data-fs-footer-social-item=\"\" data-fs-footer-social-platform={entry.platform}>\n            {entry.href === null ? (\n              <span data-fs-text=\"\" data-fs-footer-social-text=\"\">\n                {entry.label}\n              </span>\n            ) : (\n              <NavigationLink href={entry.href} target=\"_blank\" data-fs-footer-social-link=\"\">\n                {entry.src === undefined ? (\n                  <>\n                    <Icon name={entry.platform} data-fs-footer-social-icon=\"\" />\n                    <span data-fs-sr-only=\"\" className=\"sr-only\">\n                      {entry.label}\n                    </span>\n                  </>\n                ) : (\n                  <Image src={entry.src} alt={entry.label} data-fs-footer-social-icon=\"\" />\n                )}\n              </NavigationLink>\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/form/form.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentPropsWithRef, ReactNode } from "react";
@@ -24,7 +25,8 @@ export type FieldsetRegistration = Readonly<{
    * Must settle: the form gives up on a dispatch still pending after `FORM_DISPATCH_TIMEOUT_MS` and
    * reports it as a failed write. Must also be idempotent: giving up on a dispatch does not cancel it,
    * so a timed-out write may already be landing on the server, and the same payload is re-dispatched on
-   * the shopper's next submit while the field stays dirty.
+   * the shopper's next submit while the field stays dirty. Each resolved error's `message` is already
+   * worded from the fieldset's own `$content`, keyed on its `code`: `FormError` renders it as is.
    */
   dispatch: (payload: Record<string, unknown>) => Promise<readonly FormUserError[]>;
   /** Shapes react-hook-form's raw values into the mutation's payload, including type coercion. */
@@ -32,7 +34,8 @@ export type FieldsetRegistration = Readonly<{
   /**
    * Machine identifier for this fieldset's write. `FormError` renders it as the
    * `data-fs-form-error-item` attribute value and uses it in two React keys; it is never displayed,
-   * because the visible text is each `userError`'s own `message` or `FormError`'s `fallbackMessage`.
+   * because the visible text is each `userError`'s `message` (the fieldset's own copy) or `FormError`'s
+   * `fallbackMessage`.
    * Its value is the kebab-case ASCII rendering of this registration's own `namespace`
    * (`shippingAddress` → `shipping-address`), so a stylesheet selecting
    * `[data-fs-form-error-item="…"]` needs one predictable shape and no diacritics.
@@ -56,30 +59,99 @@ export type FormRegistry = Readonly<{
 /** Throws when no FormRoot is above the caller. */
 export declare function useFormRegistry(): FormRegistry;
 export type FormRootProps = Omit<ComponentPropsWithRef<'form'>, 'onSubmit' | 'action' | 'method' | 'target' | 'encType' | 'dangerouslySetInnerHTML'>;
-export type FormSubmitProps = {
+export type FormSubmitProps = MessageLocaleProp & {
+  $content?: ContentValue<typeof FormSubmitContent>;
   className?: string;
-  label?: string;
   children?: ReactNode;
 };
-export type FormClearProps = {
+export type FormClearProps = MessageLocaleProp & {
+  $content?: ContentValue<typeof FormClearContent>;
   className?: string;
-  label?: string;
   children?: ReactNode;
 };
-export type FormResetProps = {
+export type FormResetProps = MessageLocaleProp & {
+  $content?: ContentValue<typeof FormResetContent>;
   className?: string;
-  label?: string;
   children?: ReactNode;
 };
-export type FormErrorProps = {
+export type FormErrorProps = MessageLocaleProp & {
+  /** The message shown for a fieldset whose write rejected rather than resolving with userErrors. */
+  $content?: ContentValue<typeof FormErrorContent>;
   className?: string;
-  fallbackMessage?: string;
 };
 export declare const FormRootDefinition: ComponentDefinition<FormRootProps>;
+export declare const FormSubmitContent: {
+  readonly id: "form-submit";
+  readonly title: "Form Submit";
+  readonly description: "Label of the button that submits the form.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Continue";
+      };
+    };
+  };
+};
 export declare const FormSubmitDefinition: ComponentDefinition<FormSubmitProps>;
 export declare const FormEnterSubmitDefinition: ComponentDefinition<FormSubmitProps>;
+export declare const FormErrorContent: {
+  readonly id: "form-error";
+  readonly title: "Form Error";
+  readonly description: "Message shown for a fieldset whose write failed without saying why.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly fallbackMessage: {
+        readonly type: "string";
+        readonly title: "Fallback message";
+        readonly format: "icu-message";
+        readonly messageSource: "Something went wrong. Please try again.";
+      };
+    };
+  };
+};
 export declare const FormErrorDefinition: ComponentDefinition<FormErrorProps>;
+export declare const FormClearContent: {
+  readonly id: "form-clear";
+  readonly title: "Form Clear";
+  readonly description: "Label of the button that empties the form's fields.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Clear";
+      };
+    };
+  };
+};
 export declare const FormClearDefinition: ComponentDefinition<FormClearProps>;
+export declare const FormResetContent: {
+  readonly id: "form-reset";
+  readonly title: "Form Reset";
+  readonly description: "Label of the button that returns the form's fields to their baseline.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Reset";
+      };
+    };
+  };
+};
 export declare const FormResetDefinition: ComponentDefinition<FormResetProps>;
 export declare function FormRoot({ className, children, onKeyDown, ...props }: FormRootProps): ReactNode;
 export declare function FormSubmit(props: FormSubmitProps): ReactNode;
@@ -89,9 +161,9 @@ export declare function FormSubmit(props: FormSubmitProps): ReactNode;
  * the IME carve-out.
  */
 export declare function FormEnterSubmit(props: FormSubmitProps): ReactNode;
-export declare function FormError({ className, fallbackMessage }: FormErrorProps): ReactNode;
-export declare function FormClear({ className, label, children }: FormClearProps): ReactNode;
-export declare function FormReset({ className, label, children }: FormResetProps): ReactNode;
+export declare function FormError({ $content, className }: FormErrorProps): ReactNode;
+export declare function FormClear({ $content, className, children }: Readonly<FormClearProps>): ReactNode;
+export declare function FormReset({ $content, className, children }: Readonly<FormResetProps>): ReactNode;
 export declare const Form: {
   Root: typeof FormRoot;
   Submit: typeof FormSubmit;