@vtex/faststore 0.0.10 → 0.0.12

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/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;

package/dist/particles/form/form.js

@@ -1,7 +1,8 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { clearBoundField } from "../field/bound-field-registry.js";
 import { Button } from "../button/button.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -152,80 +153,130 @@ const FormRootDefinition = defineComponent({
 	schema: {},
 	guideline: "The only <form> its own fieldset registry dispatches from — a composed CartCouponForm, ShippingSimulatorForm or RegionForm renders its own, and a submit-origin check keeps theirs out of this one. Calls react-hook-form's useForm() once and holds the registry a submit dispatches in registration order. Compose FormSubmit/FormEnterSubmit/FormError/FormClear/FormReset anywhere inside it, and a fieldset as a descendant to give the submit something to persist — FormRoot itself declares no actions."
 });
+const FormSubmitContent = defineContentType({
+	id: "form-submit",
+	title: "Form Submit",
+	description: "Label of the button that submits the form.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Continue"
+		} }
+	}
+});
 const FormSubmitDefinition = defineComponent({
 	name: "FormSubmit",
 	importPath: "@vtex/faststore/components",
 	component: FormSubmit,
+	content: FormSubmitContent,
 	requiresContext: "form",
 	editor: {
 		label: "Form Submit",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Label"
-	} },
-	guideline: "Submits every registered fieldset the shopper changed, in registration order, and disables itself while a write is in flight. Renders children, then label, then the message catalog (fs/form.submit) — never a hard-coded English default. A fieldset with nothing changed contributes no request; an invalid field blocks every dispatch and moves focus to it instead of submitting. Enter in a text input does not submit — see FormEnterSubmit for a form where it does."
+	schema: {},
+	guideline: "Submits every registered fieldset the shopper changed, in registration order, and disables itself while a write is in flight. Renders children, else its label message. A fieldset with nothing changed contributes no request; an invalid field blocks every dispatch and moves focus to it instead of submitting. Enter in a text input does not submit — see FormEnterSubmit for a form where it does."
 });
 const FormEnterSubmitDefinition = defineComponent({
 	name: "FormEnterSubmit",
 	importPath: "@vtex/faststore/components",
 	component: FormEnterSubmit,
+	content: FormSubmitContent,
 	requiresContext: "form",
 	editor: {
 		label: "Form Enter Submit",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Label"
-	} },
-	guideline: "Renders the same button as FormSubmit, sharing its children/label/fs/form.submit resolution, and additionally allows Enter to submit this form from any text-entry input while mounted. The allowance is form-scoped: placed inside one fieldset of a multi-fieldset FormRoot, it allows Enter for every text input in the enclosing form, not only that fieldset. Enter that commits an IME candidate never submits."
+	schema: {},
+	guideline: "Renders the same button as FormSubmit, sharing its content type (form-submit) and children, and additionally allows Enter to submit this form from any text-entry input while mounted. The allowance is form-scoped: placed inside one fieldset of a multi-fieldset FormRoot, it allows Enter for every text input in the enclosing form, not only that fieldset. Enter that commits an IME candidate never submits."
+});
+const FormErrorContent = defineContentType({
+	id: "form-error",
+	title: "Form Error",
+	description: "Message shown for a fieldset whose write failed without saying why.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { fallbackMessage: {
+			type: "string",
+			title: "Fallback message",
+			format: "icu-message",
+			messageSource: "Something went wrong. Please try again."
+		} }
+	}
 });
 const FormErrorDefinition = defineComponent({
 	name: "FormError",
 	importPath: "@vtex/faststore/components",
 	component: FormError,
+	content: FormErrorContent,
 	requiresContext: "form",
 	editor: {
 		label: "Form Error",
 		category: "content"
 	},
-	schema: { fallbackMessage: {
-		type: "string",
-		label: "Fallback message"
-	} },
-	guideline: "Renders the last submit's write failures grouped by fieldset, or nothing when there were none. Set fallbackMessage for a fieldset whose write rejected rather than resolving with userErrors."
+	schema: {},
+	guideline: "Renders the last submit's write failures grouped by fieldset, or nothing when there were none. The messages are the fieldsets' own copy: each fieldset words its refusals from its own $content, keyed on the error code. A fieldset whose write rejected rather than resolving with userErrors shows the fallbackMessage message."
+});
+const FormClearContent = defineContentType({
+	id: "form-clear",
+	title: "Form Clear",
+	description: "Label of the button that empties the form's fields.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Clear"
+		} }
+	}
 });
 const FormClearDefinition = defineComponent({
 	name: "FormClear",
 	importPath: "@vtex/faststore/components",
 	component: FormClear,
+	content: FormClearContent,
 	requiresContext: "form",
 	editor: {
 		label: "Form Clear",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Label"
-	} },
-	guideline: "Empties every field registered by every fieldset inside the enclosing FormRoot, not only the nearest one, but marks dirty only the fields whose value actually changed — a field already empty stays clean. Renders children, then label, then the message catalog (fs/form.clear). The following submit dispatches a write for every fieldset that had something to clear, and nothing for one where clearing was a no-op. There is no way to scope it to a single fieldset; place it only where clearing the whole form is the intended action, not by analogy with a per-field clear."
+	schema: {},
+	guideline: "Empties every field registered by every fieldset inside the enclosing FormRoot, not only the nearest one, but marks dirty only the fields whose value actually changed — a field already empty stays clean. Renders children, else its label message. The following submit dispatches a write for every fieldset that had something to clear, and nothing for one where clearing was a no-op. There is no way to scope it to a single fieldset; place it only where clearing the whole form is the intended action, not by analogy with a per-field clear."
+});
+const FormResetContent = defineContentType({
+	id: "form-reset",
+	title: "Form Reset",
+	description: "Label of the button that returns the form's fields to their baseline.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Reset"
+		} }
+	}
 });
 const FormResetDefinition = defineComponent({
 	name: "FormReset",
 	importPath: "@vtex/faststore/components",
 	component: FormReset,
+	content: FormResetContent,
 	requiresContext: "form",
 	editor: {
 		label: "Form Reset",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Label"
-	} },
-	guideline: "Returns every registered field to react-hook-form's baseline for that name and clears its dirty/touched state. Renders children, then label, then the message catalog (fs/form.reset). Before a fieldset's first successful write, that baseline is whatever the field's own seed resolves to — not empty — so Reset reverts to the original value rather than clearing it; only after a successful submit does the baseline become what was last written."
+	schema: {},
+	guideline: "Returns every registered field to react-hook-form's baseline for that name and clears its dirty/touched state. Renders children, else its label message. Before a fieldset's first successful write, that baseline is whatever the field's own seed resolves to — not empty — so Reset reverts to the original value rather than clearing it; only after a successful submit does the baseline become what was last written."
 });
 function FormRoot({ className, children, onKeyDown, ...props }) {
 	const form = useForm();
@@ -397,21 +448,18 @@ function FormRoot({ className, children, onKeyDown, ...props }) {
 }
 /**
 * The shared render for both submit parts: same button, same hooks, same data-fs-form-submit hook.
-* Text resolves `children ?? label ?? formatMessage(...)` (RFC sketch) — never a hard-coded English
-* default — so an unauthored FormEnterSubmit reads correctly in every shipped locale, not only
-* en-US. One id, `fs/form.submit`, covers both parts: they render the same button, so a second id
-* for the Enter variant would only be a second translation of the same word.
+* Both read the `form-submit` content type: they render the same button.
 */
-function SubmitButton({ className, label, children }) {
+function SubmitButton({ $content, className, children }) {
 	const { isSubmitting } = useFormState();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(FormSubmitContent, $content);
 	return /* @__PURE__ */ jsx(Button, {
 		type: "submit",
 		disabled: isSubmitting,
 		className,
 		"data-fs-form-submit": "",
 		"data-fs-form-submit-pending": isSubmitting ? "" : void 0,
-		children: children ?? label ?? intl.formatMessage({ id: "fs/form.submit" })
+		children: children ?? format("label")
 	});
 }
 function FormSubmit(props) {
@@ -428,8 +476,9 @@ function FormEnterSubmit(props) {
 	useAllowImplicitSubmission();
 	return /* @__PURE__ */ jsx(SubmitButton, { ...props });
 }
-function FormError({ className, fallbackMessage = "Something went wrong. Please try again." }) {
+function FormError({ $content, className }) {
 	const { failures } = useFormRegistry();
+	const { format } = useMessageFormatter(FormErrorContent, $content);
 	if (failures.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		role: "alert",
@@ -437,14 +486,14 @@ function FormError({ className, fallbackMessage = "Something went wrong. Please
 		"data-fs-form-error": "",
 		children: failures.map((failure, failureIndex) => /* @__PURE__ */ jsx("ul", {
 			"data-fs-form-error-item": failure.label,
-			children: failure.userErrors.length > 0 ? failure.userErrors.map((error, errorIndex) => /* @__PURE__ */ jsx("li", { children: error.message }, `${failure.label}-${failureIndex}-${errorIndex}`)) : /* @__PURE__ */ jsx("li", { children: fallbackMessage })
+			children: failure.userErrors.length > 0 ? failure.userErrors.map((error, errorIndex) => /* @__PURE__ */ jsx("li", { children: error.message }, `${failure.label}-${failureIndex}-${errorIndex}`)) : /* @__PURE__ */ jsx("li", { children: format("fallbackMessage") })
 		}, `${failure.label}-${failureIndex}`))
 	});
 }
-function FormClear({ className, label, children }) {
+function FormClear({ $content, className, children }) {
 	const getFieldsets = useFieldsetSnapshot();
 	const { control } = useFormContext();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(FormClearContent, $content);
 	function handleClear() {
 		for (const fieldset of getFieldsets()) for (const name of fieldset.getFieldNames()) clearBoundField(control, name);
 	}
@@ -453,13 +502,13 @@ function FormClear({ className, label, children }) {
 		onClick: handleClear,
 		className,
 		"data-fs-form-clear": "",
-		children: children ?? label ?? intl.formatMessage({ id: "fs/form.clear" })
+		children: children ?? format("label")
 	});
 }
-function FormReset({ className, label, children }) {
+function FormReset({ $content, className, children }) {
 	const getFieldsets = useFieldsetSnapshot();
 	const { resetField } = useFormContext();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(FormResetContent, $content);
 	function handleReset() {
 		for (const fieldset of getFieldsets()) for (const name of fieldset.getFieldNames()) resetField(name);
 	}
@@ -468,7 +517,7 @@ function FormReset({ className, label, children }) {
 		onClick: handleReset,
 		className,
 		"data-fs-form-reset": "",
-		children: children ?? label ?? intl.formatMessage({ id: "fs/form.reset" })
+		children: children ?? format("label")
 	});
 }
 const Form = {
@@ -480,6 +529,6 @@ const Form = {
 	Reset: FormReset
 };
 //#endregion
-export { FORM_DISPATCH_TIMEOUT_MS, Form, FormClear, FormClearDefinition, FormEnterSubmit, FormEnterSubmitDefinition, FormError, FormErrorDefinition, FormRegistryContext, FormReset, FormResetDefinition, FormRoot, FormRootDefinition, FormSubmit, FormSubmitDefinition, useFormRegistry };
+export { FORM_DISPATCH_TIMEOUT_MS, Form, FormClear, FormClearContent, FormClearDefinition, FormEnterSubmit, FormEnterSubmitDefinition, FormError, FormErrorContent, FormErrorDefinition, FormRegistryContext, FormReset, FormResetContent, FormResetDefinition, FormRoot, FormRootDefinition, FormSubmit, FormSubmitContent, FormSubmitDefinition, useFormRegistry };
 
 //# sourceMappingURL=form.js.map