@vtex/faststore 0.0.10 → 0.0.12

package/dist/particles/binding-switcher/binding-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"binding-switcher.js","names":[],"sources":["../../../src/particles/binding-switcher/binding-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, useEffect, useMemo, useRef, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { resolveAuthoredCopy } from '../../utils/resolve-authored-copy.js';\nimport { Select } from '../select/select.js';\n\nexport type BindingSwitcherBinding = {\n  locale?: unknown;\n  currency?: unknown;\n  salesChannel?: unknown;\n  url?: unknown;\n  country?: unknown;\n  timezone?: unknown;\n};\n\ntype BindingSwitcherOption = {\n  id: string;\n  label: string;\n};\n\n/**\n * `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an\n * own key, the value is a non-null object, and `locale` is a string. Fewer than two counted\n * entries yields an empty list.\n */\nexport function bindingSwitcherOptions(\n  bindings: Record<string, BindingSwitcherBinding> | null | undefined,\n  activeLocale: string,\n): { id: string; label: string }[] {\n  if (bindings == null) return [];\n\n  const counted: { id: string; locale: string; currency: unknown }[] = [];\n  for (const [id, value] of Object.entries(bindings)) {\n    if (!isCountedBinding(value)) continue;\n    counted.push({ id, locale: value.locale, currency: value.currency });\n  }\n  if (counted.length < 2) return [];\n\n  const localeCount = new Map<string, number>();\n  for (const entry of counted) {\n    localeCount.set(entry.locale, (localeCount.get(entry.locale) ?? 0) + 1);\n  }\n\n  const options = counted.map((entry) => {\n    let label = languageName(entry.locale);\n    const shared = (localeCount.get(entry.locale) ?? 0) > 1;\n    if (shared && typeof entry.currency === 'string' && entry.currency.length > 0) {\n      label += ` (${entry.currency})`;\n    }\n    return { id: entry.id, label };\n  });\n\n  options.sort((a, b) => compareOptions(a, b, activeLocale));\n  return options;\n}\n\nfunction isCountedBinding(value: unknown): value is BindingSwitcherBinding & { locale: string } {\n  return typeof value === 'object' && value !== null && typeof (value as BindingSwitcherBinding).locale === 'string';\n}\n\nfunction languageName(locale: string): string {\n  try {\n    const name = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);\n    if (!name) return locale;\n    return name;\n  } catch {\n    return locale;\n  }\n}\n\nfunction compareOptions(a: BindingSwitcherOption, b: BindingSwitcherOption, activeLocale: string): number {\n  try {\n    return a.label.localeCompare(b.label, activeLocale) || a.id.localeCompare(b.id, activeLocale);\n  } catch {\n    return a.label.localeCompare(b.label) || a.id.localeCompare(b.id);\n  }\n}\n\nexport const NOTICE_DEFAULT = \"This page isn't available in the selected language.\";\n/** How long the control stays disabled after a started navigation that never unloads the page. */\nconst NAVIGATION_TIMEOUT_MS = 10_000;\n\nexport const LABEL_DEFAULT = 'Language';\n\nexport type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** `foundation.json` `localization.bindings`, keyed by binding id. No library default. */\n  bindings?: Record<string, BindingSwitcherBinding> | null;\n  /** Accessible name, rendered as `Select.Label`. */\n  label?: string;\n  /** Shown when the page loaded with `fs_notice=no-equivalent`. */\n  notice?: string;\n  /** Injected from `actions: { locale: ['set'] }`. */\n  $actions?: ComponentActions;\n};\n\nexport const BindingSwitcherDefinition = defineComponent<BindingSwitcherProps>({\n  name: 'BindingSwitcher',\n  importPath: '@vtex/faststore/components',\n  component: BindingSwitcher,\n  editor: { label: 'Binding Switcher', category: 'action' },\n  actions: { locale: ['set'] },\n  schema: {\n    bindings: { type: 'object', label: 'Bindings' },\n    // Inline rather than `LABEL_DEFAULT` / `NOTICE_DEFAULT`: the catalog scanner reads this file\n    // statically and drops a nested identifier it cannot evaluate. The strings match those constants.\n    label: { type: 'string', default: 'Language', label: 'Label' },\n    notice: {\n      type: 'string',\n      default: \"This page isn't available in the selected language.\",\n      label: 'Notice',\n    },\n  },\n  guideline:\n    'Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings.',\n});\n\nexport function BindingSwitcher({\n  bindings,\n  label,\n  notice,\n  $actions: $actionsProp,\n  className,\n  ...props\n}: BindingSwitcherProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { bindingId, locale } = useStorefrontContext();\n  const options = useMemo(() => bindingSwitcherOptions(bindings, locale), [bindings, locale]);\n  const [pending, setPending] = useState(false);\n  const { path } = useStorefrontRoute();\n  // The path the notice arrived on: the layout stays mounted across client navigations, and the\n  // notice belongs to that one visit of the page it was shown on.\n  const [noticePath, setNoticePath] = useState<string | null>(null);\n  const noticeVisible = noticePath !== null && noticePath === path;\n  const pendingTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const labelText = resolveAuthoredCopy(label, LABEL_DEFAULT);\n  const noticeText = resolveAuthoredCopy(notice, NOTICE_DEFAULT);\n  const optionCount = options.length;\n\n  // Hidden on the first render. `location` is read after mount so the notice cannot mismatch\n  // hydration, and so a store with fewer than two bindings leaves the query alone.\n  useEffect(() => {\n    if (optionCount < 2) return;\n    const url = new URL(globalThis.location.href);\n    if (url.searchParams.get('fs_notice') !== 'no-equivalent') return;\n    setNoticePath(path);\n    url.searchParams.delete('fs_notice');\n    globalThis.history.replaceState(globalThis.history.state, '', `${url.pathname}${url.search}${url.hash}`);\n  }, [optionCount, path]);\n\n  useEffect(() => {\n    if (noticePath !== null && path !== noticePath) setNoticePath(null);\n  }, [noticePath, path]);\n\n  // A page restored from the back/forward cache comes back with the state it left with.\n  useEffect(() => {\n    function onPageShow(event: PageTransitionEvent) {\n      if (!event.persisted) return;\n      clearTimeout(pendingTimeout.current);\n      setPending(false);\n    }\n    globalThis.addEventListener('pageshow', onPageShow);\n    return () => {\n      globalThis.removeEventListener('pageshow', onPageShow);\n      clearTimeout(pendingTimeout.current);\n    };\n  }, []);\n\n  async function handleChange(value: string | null) {\n    if (value === null || value === bindingId) return;\n    const set = $actions?.locale?.set;\n    if (!set) {\n      console.error('[BindingSwitcher] no locale.set');\n      return;\n    }\n    setPending(true);\n    let navigated = false;\n    try {\n      navigated = (await set({ bindingId: value })) === true;\n    } finally {\n      // A started navigation keeps the control disabled until the next document replaces this one, or\n      // until the timeout when the page never unloads (a cancelled `beforeunload`, a 204, a download).\n      if (navigated) {\n        pendingTimeout.current = setTimeout(() => setPending(false), NAVIGATION_TIMEOUT_MS);\n      } else {\n        setPending(false);\n      }\n    }\n  }\n\n  if (optionCount < 2) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-binding-switcher=\"\"\n      aria-busy={pending || undefined}\n      {...(pending ? { 'data-fs-binding-switcher-pending': '' } : {})}\n    >\n      {noticeVisible ? <output data-fs-binding-switcher-notice=\"\">{noticeText}</output> : null}\n      <Select.Root value={bindingId} onValueChange={handleChange} disabled={pending}>\n        <Select.Label>{labelText}</Select.Label>\n        <Select.Trigger disabled={pending}>\n          <Select.Value>{(value) => options.find((option) => option.id === value)?.label ?? value ?? ''}</Select.Value>\n          <Select.Icon>▾</Select.Icon>\n        </Select.Trigger>\n        <Select.Positioner align=\"start\" sideOffset={4} alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {options.map((option) => (\n                <Select.Item key={option.id} value={option.id} label={option.label}>\n                  {option.label}\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Root>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"binding-switcher.js","names":[],"sources":["../../../src/particles/binding-switcher/binding-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, useEffect, useMemo, useRef, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { Select } from '../select/select.js';\n\nexport const BindingSwitcherContent = defineContentType({\n  id: 'binding-switcher',\n  title: 'Binding Switcher',\n  description: 'Label of the binding select and the notice shown when a page has no equivalent in the chosen binding.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'Language' },\n      notice: {\n        type: 'string',\n        title: 'No-equivalent notice',\n        description: 'Shown when the page loaded with fs_notice=no-equivalent.',\n        format: 'icu-message',\n        messageSource: \"This page isn't available in the selected language.\",\n      },\n    },\n  },\n});\n\nexport type BindingSwitcherBinding = {\n  locale?: unknown;\n  currency?: unknown;\n  salesChannel?: unknown;\n  url?: unknown;\n  country?: unknown;\n  timezone?: unknown;\n};\n\ntype BindingSwitcherOption = {\n  id: string;\n  label: string;\n};\n\n/**\n * `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an\n * own key, the value is a non-null object, and `locale` is a string. Fewer than two counted\n * entries yields an empty list.\n */\nexport function bindingSwitcherOptions(\n  bindings: Record<string, BindingSwitcherBinding> | null | undefined,\n  activeLocale: string,\n): { id: string; label: string }[] {\n  if (bindings == null) return [];\n\n  const counted: { id: string; locale: string; currency: unknown }[] = [];\n  for (const [id, value] of Object.entries(bindings)) {\n    if (!isCountedBinding(value)) continue;\n    counted.push({ id, locale: value.locale, currency: value.currency });\n  }\n  if (counted.length < 2) return [];\n\n  const localeCount = new Map<string, number>();\n  for (const entry of counted) {\n    localeCount.set(entry.locale, (localeCount.get(entry.locale) ?? 0) + 1);\n  }\n\n  const options = counted.map((entry) => {\n    let label = languageName(entry.locale);\n    const shared = (localeCount.get(entry.locale) ?? 0) > 1;\n    if (shared && typeof entry.currency === 'string' && entry.currency.length > 0) {\n      label += ` (${entry.currency})`;\n    }\n    return { id: entry.id, label };\n  });\n\n  options.sort((a, b) => compareOptions(a, b, activeLocale));\n  return options;\n}\n\nfunction isCountedBinding(value: unknown): value is BindingSwitcherBinding & { locale: string } {\n  return typeof value === 'object' && value !== null && typeof (value as BindingSwitcherBinding).locale === 'string';\n}\n\nfunction languageName(locale: string): string {\n  try {\n    const name = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);\n    if (!name) return locale;\n    return name;\n  } catch {\n    return locale;\n  }\n}\n\nfunction compareOptions(a: BindingSwitcherOption, b: BindingSwitcherOption, activeLocale: string): number {\n  try {\n    return a.label.localeCompare(b.label, activeLocale) || a.id.localeCompare(b.id, activeLocale);\n  } catch {\n    return a.label.localeCompare(b.label) || a.id.localeCompare(b.id);\n  }\n}\n\n/** How long the control stays disabled after a started navigation that never unloads the page. */\nconst NAVIGATION_TIMEOUT_MS = 10_000;\n\nexport type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &\n  MessageLocaleProp & {\n    /** `foundation.json` `localization.bindings`, keyed by binding id. No library default. */\n    bindings?: Record<string, BindingSwitcherBinding> | null;\n    /** Injected from `actions: { locale: ['set'] }`. */\n    $actions?: ComponentActions;\n    /** `label` is the accessible name, rendered as `Select.Label`; `notice` shows on `fs_notice=no-equivalent`. */\n    $content?: ContentValue<typeof BindingSwitcherContent>;\n  };\n\nexport const BindingSwitcherDefinition = defineComponent<BindingSwitcherProps>({\n  name: 'BindingSwitcher',\n  importPath: '@vtex/faststore/components',\n  component: BindingSwitcher,\n  content: BindingSwitcherContent,\n  editor: { label: 'Binding Switcher', category: 'action' },\n  actions: { locale: ['set'] },\n  schema: {\n    bindings: { type: 'object', label: 'Bindings' },\n  },\n  guideline:\n    'Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings. Its label and no-equivalent notice come from the $content fields label and notice.',\n});\n\nexport function BindingSwitcher({\n  bindings,\n  $actions: $actionsProp,\n  $locale,\n  $content,\n  className,\n  ...props\n}: BindingSwitcherProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { bindingId, locale } = useStorefrontContext();\n  const options = useMemo(() => bindingSwitcherOptions(bindings, locale), [bindings, locale]);\n  const [pending, setPending] = useState(false);\n  const { path } = useStorefrontRoute();\n  // The path the notice arrived on: the layout stays mounted across client navigations, and the\n  // notice belongs to that one visit of the page it was shown on.\n  const [noticePath, setNoticePath] = useState<string | null>(null);\n  const noticeVisible = noticePath !== null && noticePath === path;\n  const pendingTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const messages = useMessageFormatter(BindingSwitcherContent, $content);\n  const optionCount = options.length;\n\n  // Hidden on the first render. `location` is read after mount so the notice cannot mismatch\n  // hydration, and so a store with fewer than two bindings leaves the query alone.\n  useEffect(() => {\n    if (optionCount < 2) return;\n    const url = new URL(globalThis.location.href);\n    if (url.searchParams.get('fs_notice') !== 'no-equivalent') return;\n    setNoticePath(path);\n    url.searchParams.delete('fs_notice');\n    globalThis.history.replaceState(globalThis.history.state, '', `${url.pathname}${url.search}${url.hash}`);\n  }, [optionCount, path]);\n\n  useEffect(() => {\n    if (noticePath !== null && path !== noticePath) setNoticePath(null);\n  }, [noticePath, path]);\n\n  // A page restored from the back/forward cache comes back with the state it left with.\n  useEffect(() => {\n    function onPageShow(event: PageTransitionEvent) {\n      if (!event.persisted) return;\n      clearTimeout(pendingTimeout.current);\n      setPending(false);\n    }\n    globalThis.addEventListener('pageshow', onPageShow);\n    return () => {\n      globalThis.removeEventListener('pageshow', onPageShow);\n      clearTimeout(pendingTimeout.current);\n    };\n  }, []);\n\n  async function handleChange(value: string | null) {\n    if (value === null || value === bindingId) return;\n    const set = $actions?.locale?.set;\n    if (!set) {\n      console.error('[BindingSwitcher] no locale.set');\n      return;\n    }\n    setPending(true);\n    let navigated = false;\n    try {\n      navigated = (await set({ bindingId: value })) === true;\n    } finally {\n      // A started navigation keeps the control disabled until the next document replaces this one, or\n      // until the timeout when the page never unloads (a cancelled `beforeunload`, a 204, a download).\n      if (navigated) {\n        pendingTimeout.current = setTimeout(() => setPending(false), NAVIGATION_TIMEOUT_MS);\n      } else {\n        setPending(false);\n      }\n    }\n  }\n\n  if (optionCount < 2) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-binding-switcher=\"\"\n      aria-busy={pending || undefined}\n      {...(pending ? { 'data-fs-binding-switcher-pending': '' } : {})}\n    >\n      {noticeVisible ? <output data-fs-binding-switcher-notice=\"\">{messages.format('notice')}</output> : null}\n      <Select.Root value={bindingId} onValueChange={handleChange} disabled={pending}>\n        <Select.Label>{messages.format('label')}</Select.Label>\n        <Select.Trigger disabled={pending}>\n          <Select.Value>{(value) => options.find((option) => option.id === value)?.label ?? value ?? ''}</Select.Value>\n          <Select.Icon>▾</Select.Icon>\n        </Select.Trigger>\n        <Select.Positioner align=\"start\" sideOffset={4} alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {options.map((option) => (\n                <Select.Item key={option.id} value={option.id} label={option.label}>\n                  {option.label}\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Root>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,yBAAyB,kBAAkB;CACtD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAU,OAAO;IAAS,QAAQ;IAAe,eAAe;GAAW;GAC1F,QAAQ;IACN,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;;;;;;AAqBD,SAAgB,uBACd,UACA,cACiC;CACjC,IAAI,YAAY,MAAM,OAAO,CAAC;CAE9B,MAAM,UAA+D,CAAC;CACtE,KAAK,MAAM,CAAC,IAAI,UAAU,OAAO,QAAQ,QAAQ,GAAG;EAClD,IAAI,CAAC,iBAAiB,KAAK,GAAG;EAC9B,QAAQ,KAAK;GAAE;GAAI,QAAQ,MAAM;GAAQ,UAAU,MAAM;EAAS,CAAC;CACrE;CACA,IAAI,QAAQ,SAAS,GAAG,OAAO,CAAC;CAEhC,MAAM,8BAAc,IAAI,IAAoB;CAC5C,KAAK,MAAM,SAAS,SAClB,YAAY,IAAI,MAAM,SAAS,YAAY,IAAI,MAAM,MAAM,KAAK,KAAK,CAAC;CAGxE,MAAM,UAAU,QAAQ,KAAK,UAAU;EACrC,IAAI,QAAQ,aAAa,MAAM,MAAM;EAErC,KADgB,YAAY,IAAI,MAAM,MAAM,KAAK,KAAK,KACxC,OAAO,MAAM,aAAa,YAAY,MAAM,SAAS,SAAS,GAC1E,SAAS,KAAK,MAAM,SAAS;EAE/B,OAAO;GAAE,IAAI,MAAM;GAAI;EAAM;CAC/B,CAAC;CAED,QAAQ,MAAM,GAAG,MAAM,eAAe,GAAG,GAAG,YAAY,CAAC;CACzD,OAAO;AACT;AAEA,SAAS,iBAAiB,OAAsE;CAC9F,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAQ,MAAiC,WAAW;AAC5G;AAEA,SAAS,aAAa,QAAwB;CAC5C,IAAI;EACF,MAAM,OAAO,IAAI,KAAK,aAAa,CAAC,MAAM,GAAG;GAAE,MAAM;GAAY,iBAAiB;EAAW,CAAC,CAAC,CAAC,GAAG,MAAM;EACzG,IAAI,CAAC,MAAM,OAAO;EAClB,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,eAAe,GAA0B,GAA0B,cAA8B;CACxG,IAAI;EACF,OAAO,EAAE,MAAM,cAAc,EAAE,OAAO,YAAY,KAAK,EAAE,GAAG,cAAc,EAAE,IAAI,YAAY;CAC9F,QAAQ;EACN,OAAO,EAAE,MAAM,cAAc,EAAE,KAAK,KAAK,EAAE,GAAG,cAAc,EAAE,EAAE;CAClE;AACF;;AAGA,MAAM,wBAAwB;AAY9B,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAS;CACxD,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE;CAC3B,QAAQ,EACN,UAAU;EAAE,MAAM;EAAU,OAAO;CAAW,EAChD;CACA,WACE;AACJ,CAAC;AAED,SAAgB,gBAAgB,EAC9B,UACA,UAAU,cACV,SACA,UACA,WACA,GAAG,SACoB;CACvB,MAAM,WAAW,mBAAmB,YAAY;CAChD,MAAM,EAAE,WAAW,WAAW,qBAAqB;CACnD,MAAM,UAAU,cAAc,uBAAuB,UAAU,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;CAC1F,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,EAAE,SAAS,mBAAmB;CAGpC,MAAM,CAAC,YAAY,iBAAiB,SAAwB,IAAI;CAChE,MAAM,gBAAgB,eAAe,QAAQ,eAAe;CAC5D,MAAM,iBAAiB,OAAkD,KAAA,CAAS;CAClF,MAAM,WAAW,oBAAoB,wBAAwB,QAAQ;CACrE,MAAM,cAAc,QAAQ;CAI5B,gBAAgB;EACd,IAAI,cAAc,GAAG;EACrB,MAAM,MAAM,IAAI,IAAI,WAAW,SAAS,IAAI;EAC5C,IAAI,IAAI,aAAa,IAAI,WAAW,MAAM,iBAAiB;EAC3D,cAAc,IAAI;EAClB,IAAI,aAAa,OAAO,WAAW;EACnC,WAAW,QAAQ,aAAa,WAAW,QAAQ,OAAO,IAAI,GAAG,IAAI,WAAW,IAAI,SAAS,IAAI,MAAM;CACzG,GAAG,CAAC,aAAa,IAAI,CAAC;CAEtB,gBAAgB;EACd,IAAI,eAAe,QAAQ,SAAS,YAAY,cAAc,IAAI;CACpE,GAAG,CAAC,YAAY,IAAI,CAAC;CAGrB,gBAAgB;EACd,SAAS,WAAW,OAA4B;GAC9C,IAAI,CAAC,MAAM,WAAW;GACtB,aAAa,eAAe,OAAO;GACnC,WAAW,KAAK;EAClB;EACA,WAAW,iBAAiB,YAAY,UAAU;EAClD,aAAa;GACX,WAAW,oBAAoB,YAAY,UAAU;GACrD,aAAa,eAAe,OAAO;EACrC;CACF,GAAG,CAAC,CAAC;CAEL,eAAe,aAAa,OAAsB;EAChD,IAAI,UAAU,QAAQ,UAAU,WAAW;EAC3C,MAAM,MAAM,UAAU,QAAQ;EAC9B,IAAI,CAAC,KAAK;GACR,QAAQ,MAAM,iCAAiC;GAC/C;EACF;EACA,WAAW,IAAI;EACf,IAAI,YAAY;EAChB,IAAI;GACF,YAAa,MAAM,IAAI,EAAE,WAAW,MAAM,CAAC,MAAO;EACpD,UAAU;GAGR,IAAI,WACF,eAAe,UAAU,iBAAiB,WAAW,KAAK,GAAG,qBAAqB;QAElF,WAAW,KAAK;EAEpB;CACF;CAEA,IAAI,cAAc,GAAG,OAAO;CAE5B,OACE,qBAAC,OAAD;EACE,GAAI;EACO;EACX,4BAAyB;EACzB,aAAW,WAAW,KAAA;EACtB,GAAK,UAAU,EAAE,oCAAoC,GAAG,IAAI,CAAC;EAL/D,UAAA,CAOG,gBAAgB,oBAAC,UAAD;GAAQ,mCAAgC;GAAI,UAAA,SAAS,OAAO,QAAQ;EAAU,CAAA,IAAI,MACnG,qBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,eAAe;GAAc,UAAU;GAAtE,UAAA;IACE,oBAAC,OAAO,OAAR,EAAA,UAAe,SAAS,OAAO,OAAO,EAAgB,CAAA;IACtD,qBAAC,OAAO,SAAR;KAAgB,UAAU;KAA1B,UAAA,CACE,oBAAC,OAAO,OAAR,EAAA,WAAgB,UAAU,QAAQ,MAAM,WAAW,OAAO,OAAO,KAAK,CAAC,EAAE,SAAS,SAAS,GAAiB,CAAA,GAC5G,oBAAC,OAAO,MAAR,EAAA,UAAa,IAAc,CAAA,CACb;;IAChB,oBAAC,OAAO,YAAR;KAAmB,OAAM;KAAQ,YAAY;KAAG,sBAAsB;KACpE,UAAA,oBAAC,OAAO,OAAR,EAAA,UACE,oBAAC,OAAO,MAAR,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,OAAO,MAAR;MAA6B,OAAO,OAAO;MAAI,OAAO,OAAO;MAC1D,UAAA,OAAO;KACG,GAFK,OAAO,EAEZ,CACd,EACU,CAAA,EACD,CAAA;IACG,CAAA;GACR;EACV,CAAA,CAAA;;AAET"}

package/dist/particles/card-summary/card-summary.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 { CardNetworkIconName } from "./card-network.js";
@@ -33,10 +34,11 @@ export type CardSummaryRootProps = Readonly<{
   label?: string | null;
   children?: ReactNode;
 }>;
-export type CardSummaryProps = Readonly<{
+export type CardSummaryProps = MessageLocaleProp & Readonly<{
   className?: string;
   /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */
   children?: ReactNode;
+  $content?: ContentValue<typeof CardSummaryContent>;
 }>;
 export type CardSummaryPartProps = {
   className?: string;
@@ -50,11 +52,35 @@ export type CardSummaryMaskProps = Readonly<CardSummaryPartProps & {
   /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */
   children?: ReactNode;
 }>;
-export declare const CardSummaryDefinition: ComponentDefinition<Readonly<{
-  className?: string;
-  /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */
-  children?: ReactNode;
-}>>;
+export declare const CardSummaryContent: {
+  readonly id: "card-summary";
+  readonly title: "Card Summary";
+  readonly description: "The card's last digits as read to assistive technology.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly endingIn: {
+        readonly type: "string";
+        readonly title: "Card last digits";
+        readonly format: "icu-message";
+        readonly messageSource: "ending in {lastDigits}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly lastDigits: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly lastDigits: "4242";
+        };
+      };
+    };
+  };
+};
+export declare const CardSummaryDefinition: ComponentDefinition<CardSummaryProps>;
 export declare const CardSummaryMarkDefinition: ComponentDefinition<Readonly<CardSummaryPartProps>>;
 export declare const CardSummaryNameDefinition: ComponentDefinition<Readonly<CardSummaryPartProps>>;
 export declare const CardSummaryMaskDefinition: ComponentDefinition<Readonly<CardSummaryPartProps & {
@@ -70,14 +96,18 @@ export declare const CardSummaryDigitsDefinition: ComponentDefinition<Readonly<C
  */
 export declare function CardSummaryRoot({ network, lastDigits, label, children }: CardSummaryRootProps): import("react/jsx-runtime").JSX.Element;
 /** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */
-export declare function CardSummary({ className, children }: CardSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardSummary({ className, children, $content }: CardSummaryProps): import("react/jsx-runtime").JSX.Element;
 /** The network's mark, and the network itself when a label takes the name. */
 export declare function CardSummaryMark({ className }: CardSummaryMarkProps): import("react/jsx-runtime").JSX.Element | null;
 /** The label, or else the network name. Renders nothing when both are blank. */
 export declare function CardSummaryName({ className }: CardSummaryNameProps): import("react/jsx-runtime").JSX.Element | null;
 /** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */
 export declare function CardSummaryMask({ className, mask, children }: CardSummaryMaskProps): import("react/jsx-runtime").JSX.Element | null;
-/** The last four digits, read as "ending in" them. Renders nothing when there are no digits. */
+/**
+ * The last four digits, read with CardSummary's endingIn message. With no such text, outside a
+ * CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when
+ * there are no digits.
+ */
 export declare function CardSummaryDigits({ className }: CardSummaryDigitsProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=card-summary.d.ts.map

package/dist/particles/card-summary/card-summary.js

@@ -1,30 +1,53 @@
 "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 { Icon } from "../icon/icon.js";
 import { cardNetworkIcon } from "./card-network.js";
 import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/particles/card-summary/card-summary.tsx
 const CardSummaryContext = createContext(null);
+const CardSummaryEndingInContext = createContext(null);
 /** The card the nearest CardSummaryRoot provides. Throws outside one. */
 function useCardSummary() {
 	const ctx = useContext(CardSummaryContext);
 	if (!ctx) throw new Error("CardSummary parts must be used inside CardSummaryRoot.");
 	return ctx;
 }
+const CardSummaryContent = defineContentType({
+	id: "card-summary",
+	title: "Card Summary",
+	description: "The card's last digits as read to assistive technology.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { endingIn: {
+			type: "string",
+			title: "Card last digits",
+			format: "icu-message",
+			messageSource: "ending in {lastDigits}",
+			messageArguments: {
+				type: "object",
+				properties: { lastDigits: { type: "string" } }
+			},
+			messageExample: { lastDigits: "4242" }
+		} }
+	}
+});
 const CardSummaryDefinition = defineComponent({
 	name: "CardSummary",
 	importPath: "@vtex/faststore/components",
 	component: CardSummary,
+	content: CardSummaryContent,
 	requiresContext: "card-summary",
 	editor: {
 		label: "Card Summary",
 		category: "content"
 	},
 	schema: {},
-	guideline: "A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Must be inside a card-summary provider."
+	guideline: "A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Its endingIn message is what CardSummaryDigits reads to screen readers. Must be inside a card-summary provider."
 });
 const CardSummaryMarkDefinition = defineComponent({
 	name: "CardSummaryMark",
@@ -76,7 +99,7 @@ const CardSummaryDigitsDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "The last four digits, announced to screen readers as \"ending in\" and the digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider."
+	guideline: "The last four digits, announced to screen readers with the endingIn message of the CardSummary around it; outside one, or with that message missing, screen readers hear the bare digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider."
 });
 /**
 * Provides one card to the parts, keeping only its last four digits. No definition on purpose: a
@@ -103,19 +126,24 @@ function CardSummaryRoot({ network, lastDigits, label, children }) {
 	});
 }
 /** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */
-function CardSummary({ className, children }) {
+function CardSummary({ className, children, $content }) {
 	const { icon, label } = useCardSummary();
-	return /* @__PURE__ */ jsx("span", {
-		className,
-		"data-fs-card-summary": "",
-		"data-fs-card-summary-network": icon ?? void 0,
-		...label ? { "data-fs-card-summary-labeled": "" } : {},
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(CardSummaryMark, {}),
-			/* @__PURE__ */ jsx(CardSummaryName, {}),
-			/* @__PURE__ */ jsx(CardSummaryMask, {}),
-			/* @__PURE__ */ jsx(CardSummaryDigits, {})
-		] })
+	const { format } = useMessageFormatter(CardSummaryContent, $content);
+	const endingIn = useMemo(() => (lastDigits) => format("endingIn", { lastDigits }), [format]);
+	return /* @__PURE__ */ jsx(CardSummaryEndingInContext, {
+		value: endingIn,
+		children: /* @__PURE__ */ jsx("span", {
+			className,
+			"data-fs-card-summary": "",
+			"data-fs-card-summary-network": icon ?? void 0,
+			...label ? { "data-fs-card-summary-labeled": "" } : {},
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(CardSummaryMark, {}),
+				/* @__PURE__ */ jsx(CardSummaryName, {}),
+				/* @__PURE__ */ jsx(CardSummaryMask, {}),
+				/* @__PURE__ */ jsx(CardSummaryDigits, {})
+			] })
+		})
 	});
 }
 /** The network's mark, and the network itself when a label takes the name. */
@@ -164,25 +192,30 @@ function CardSummaryMask({ className, mask = "••••", children }) {
 		children: content
 	}), " "] });
 }
-/** The last four digits, read as "ending in" them. Renders nothing when there are no digits. */
+/**
+* The last four digits, read with CardSummary's endingIn message. With no such text, outside a
+* CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when
+* there are no digits.
+*/
 function CardSummaryDigits({ className }) {
 	const { lastFour } = useCardSummary();
-	const intl = useIntl();
+	const endingIn = useContext(CardSummaryEndingInContext);
 	if (!lastFour) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+	const spoken = endingIn ? endingIn(lastFour) : "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className,
 		"data-fs-card-summary-digits": "",
-		children: [/* @__PURE__ */ jsx("span", {
+		children: spoken ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			children: lastFour
 		}), /* @__PURE__ */ jsx("span", {
 			"data-fs-sr-only": "",
 			className: "sr-only",
-			children: intl.formatMessage({ id: "fs/card.ending-in" }, { lastDigits: lastFour })
-		})]
+			children: spoken
+		})] }) : /* @__PURE__ */ jsx("span", { children: lastFour })
 	}), " "] });
 }
 //#endregion
-export { CardSummary, CardSummaryDefinition, CardSummaryDigits, CardSummaryDigitsDefinition, CardSummaryMark, CardSummaryMarkDefinition, CardSummaryMask, CardSummaryMaskDefinition, CardSummaryName, CardSummaryNameDefinition, CardSummaryRoot, useCardSummary };
+export { CardSummary, CardSummaryContent, CardSummaryDefinition, CardSummaryDigits, CardSummaryDigitsDefinition, CardSummaryMark, CardSummaryMarkDefinition, CardSummaryMask, CardSummaryMaskDefinition, CardSummaryName, CardSummaryNameDefinition, CardSummaryRoot, useCardSummary };
 
 //# sourceMappingURL=card-summary.js.map

package/dist/particles/card-summary/card-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-summary.js","names":[],"sources":["../../../src/particles/card-summary/card-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport { Icon } from '../icon/icon.js';\nimport { type CardNetworkIconName, cardNetworkIcon } from './card-network.js';\n\n/**\n * CardSummary particle (no business coupling — ADR-0001): a saved card's identity — network mark,\n * label or network name, mask, last four digits — as parts the schema arranges. A row that owns\n * card data wraps its children in CardSummaryRoot and declares `card-summary` in its own\n * providesContext; the parts read the card from there. Each part decides from the data, never from\n * which other parts are composed, so any arrangement keeps the network identifiable.\n */\n\nexport type CardSummaryValue = Readonly<{\n  /** The network's display name as given. */\n  network: string;\n  /** The base-dialect icon for the network, or `null` when unmapped. */\n  icon: CardNetworkIconName | null;\n  /** The trimmed label, or `null` when absent or blank. */\n  label: string | null;\n  /** `label ?? network`, or `null` when both are blank. */\n  name: string | null;\n  /** At most four digits; `''` when none. */\n  lastFour: string;\n}>;\n\nconst CardSummaryContext = createContext<CardSummaryValue | null>(null);\n\n/** The card the nearest CardSummaryRoot provides. Throws outside one. */\nexport function useCardSummary(): CardSummaryValue {\n  const ctx = useContext(CardSummaryContext);\n  if (!ctx) throw new Error('CardSummary parts must be used inside CardSummaryRoot.');\n  return ctx;\n}\n\nexport type CardSummaryRootProps = Readonly<{\n  /** The network's display name from the platform, e.g. `Visa`. Selects the mark by exact key match. */\n  network: string;\n  /** The card's last digits. Only the trailing four digit characters ever reach the parts. */\n  lastDigits: string;\n  /** The shopper's own name for the card. Shown in place of the network name when non-blank. */\n  label?: string | null;\n  children?: ReactNode;\n}>;\n\nexport type CardSummaryProps = Readonly<{\n  className?: string;\n  /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */\n  children?: ReactNode;\n}>;\n\nexport type CardSummaryPartProps = {\n  className?: string;\n};\n\nexport type CardSummaryMarkProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryNameProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryDigitsProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryMaskProps = Readonly<\n  CardSummaryPartProps & {\n    /** The masking symbol shown before the digits. Defaults to `••••`; empty renders nothing. */\n    mask?: string;\n    /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */\n    children?: ReactNode;\n  }\n>;\n\nexport const CardSummaryDefinition = defineComponent<CardSummaryProps>({\n  name: 'CardSummary',\n  importPath: '@vtex/faststore/components',\n  component: CardSummary,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary', category: 'content' },\n  schema: {},\n  guideline:\n    \"A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMarkDefinition = defineComponent<CardSummaryMarkProps>({\n  name: 'CardSummaryMark',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMark,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mark', category: 'content' },\n  schema: {},\n  guideline:\n    \"The card network's mark. When the card has a label, it also carries the network: hidden text beside the mark, or the network name as visible text for a network with no mark. Renders nothing for an unlabelled card on a network with no mark, since the name says it. On an unlabelled card the glyph is decorative and CardSummaryName announces the network, so compose both: Mark without Name leaves screen readers no network. Marks come from data, so the store lists CARD_NETWORK_ICON_NAMES under icons.include. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryNameDefinition = defineComponent<CardSummaryNameProps>({\n  name: 'CardSummaryName',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryName,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Name', category: 'content' },\n  schema: {},\n  guideline:\n    \"The shopper's label for the card, or else its network name; nothing when both are blank. Read-only. On an unlabelled card it is the only part a screen reader hears the network from. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMaskDefinition = defineComponent<CardSummaryMaskProps>({\n  name: 'CardSummaryMask',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMask,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mask', category: 'content' },\n  schema: {\n    mask: { type: 'string', default: '••••', label: 'Mask' },\n  },\n  guideline:\n    'Decoration standing for the hidden digits: the mask text (•••• by default), or children such as an icon in its place. Keep children inline. Always hidden from assistive technology; dropping it changes nothing a screen reader hears. Renders nothing when empty or when the card has no digits. Must be inside a card-summary provider.',\n});\n\nexport const CardSummaryDigitsDefinition = defineComponent<CardSummaryDigitsProps>({\n  name: 'CardSummaryDigits',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryDigits,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Digits', category: 'content' },\n  schema: {},\n  guideline:\n    'The last four digits, announced to screen readers as \"ending in\" and the digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider.',\n});\n\n/**\n * Provides one card to the parts, keeping only its last four digits. No definition on purpose: a\n * schema cannot supply the card, so a matter row renders it and declares 'card-summary' itself.\n */\nexport function CardSummaryRoot({ network, lastDigits, label, children }: CardSummaryRootProps) {\n  const value = useMemo<CardSummaryValue>(() => {\n    const trimmedLabel = label?.trim() || null;\n    return {\n      network,\n      icon: cardNetworkIcon(network),\n      label: trimmedLabel,\n      name: trimmedLabel ?? (network.trim() ? network : null),\n      lastFour: lastDigits.replaceAll(/\\D/g, '').slice(-4),\n    };\n  }, [network, lastDigits, label]);\n\n  return <CardSummaryContext.Provider value={value}>{children}</CardSummaryContext.Provider>;\n}\n\n/** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */\nexport function CardSummary({ className, children }: CardSummaryProps) {\n  const { icon, label } = useCardSummary();\n  return (\n    <span\n      className={className}\n      data-fs-card-summary=\"\"\n      data-fs-card-summary-network={icon ?? undefined}\n      {...(label ? { 'data-fs-card-summary-labeled': '' } : {})}\n    >\n      {children ?? (\n        <>\n          <CardSummaryMark />\n          <CardSummaryName />\n          <CardSummaryMask />\n          <CardSummaryDigits />\n        </>\n      )}\n    </span>\n  );\n}\n\n// Each part ends with a space: accessible names concatenate inline siblings with no separator, so\n// without it a screen reader hears \"MastercardCompany card\". A flex container drops it visually.\n\n/** The network's mark, and the network itself when a label takes the name. */\nexport function CardSummaryMark({ className }: CardSummaryMarkProps) {\n  const { network, icon, label } = useCardSummary();\n  if (!icon && (!label || !network.trim())) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mark=\"\">\n        {icon ? <Icon name={icon} data-fs-card-summary-icon=\"\" /> : null}\n        {label && icon ? (\n          <span data-fs-sr-only=\"\" className=\"sr-only\">\n            {network}\n          </span>\n        ) : null}\n        {label && !icon ? <span data-fs-card-summary-network-name=\"\">{network}</span> : null}\n      </span>{' '}\n    </>\n  );\n}\n\n/** The label, or else the network name. Renders nothing when both are blank. */\nexport function CardSummaryName({ className }: CardSummaryNameProps) {\n  const { name } = useCardSummary();\n  if (!name) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-name=\"\">\n        {name}\n      </span>{' '}\n    </>\n  );\n}\n\n/** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */\nexport function CardSummaryMask({ className, mask = '••••', children }: CardSummaryMaskProps) {\n  const { lastFour } = useCardSummary();\n  const content = children ?? mask;\n  if (!lastFour || !content) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mask=\"\" aria-hidden=\"true\">\n        {content}\n      </span>{' '}\n    </>\n  );\n}\n\n/** The last four digits, read as \"ending in\" them. Renders nothing when there are no digits. */\nexport function CardSummaryDigits({ className }: CardSummaryDigitsProps) {\n  const { lastFour } = useCardSummary();\n  const intl = useIntl();\n  if (!lastFour) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-digits=\"\">\n        <span aria-hidden=\"true\">{lastFour}</span>\n        <span data-fs-sr-only=\"\" className=\"sr-only\">\n          {intl.formatMessage({ id: 'fs/card.ending-in' }, { lastDigits: lastFour })}\n        </span>\n      </span>{' '}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"card-summary.js","names":[],"sources":["../../../src/particles/card-summary/card-summary.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { Icon } from '../icon/icon.js';\nimport { type CardNetworkIconName, cardNetworkIcon } from './card-network.js';\n\n/**\n * CardSummary particle (no business coupling — ADR-0001): a saved card's identity — network mark,\n * label or network name, mask, last four digits — as parts the schema arranges. A row that owns\n * card data wraps its children in CardSummaryRoot and declares `card-summary` in its own\n * providesContext; the parts read the card from there. Each part decides from the data, never from\n * which other parts are composed, so any arrangement keeps the network identifiable.\n */\n\nexport type CardSummaryValue = Readonly<{\n  /** The network's display name as given. */\n  network: string;\n  /** The base-dialect icon for the network, or `null` when unmapped. */\n  icon: CardNetworkIconName | null;\n  /** The trimmed label, or `null` when absent or blank. */\n  label: string | null;\n  /** `label ?? network`, or `null` when both are blank. */\n  name: string | null;\n  /** At most four digits; `''` when none. */\n  lastFour: string;\n}>;\n\nconst CardSummaryContext = createContext<CardSummaryValue | null>(null);\n\n/** The screen-reader text for the digits, formatted by the CardSummary wrapper from its own content. */\ntype CardSummaryEndingIn = (lastDigits: string) => string;\n\nconst CardSummaryEndingInContext = createContext<CardSummaryEndingIn | null>(null);\n\n/** The card the nearest CardSummaryRoot provides. Throws outside one. */\nexport function useCardSummary(): CardSummaryValue {\n  const ctx = useContext(CardSummaryContext);\n  if (!ctx) throw new Error('CardSummary parts must be used inside CardSummaryRoot.');\n  return ctx;\n}\n\nexport type CardSummaryRootProps = Readonly<{\n  /** The network's display name from the platform, e.g. `Visa`. Selects the mark by exact key match. */\n  network: string;\n  /** The card's last digits. Only the trailing four digit characters ever reach the parts. */\n  lastDigits: string;\n  /** The shopper's own name for the card. Shown in place of the network name when non-blank. */\n  label?: string | null;\n  children?: ReactNode;\n}>;\n\nexport type CardSummaryProps = MessageLocaleProp &\n  Readonly<{\n    className?: string;\n    /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */\n    children?: ReactNode;\n    $content?: ContentValue<typeof CardSummaryContent>;\n  }>;\n\nexport type CardSummaryPartProps = {\n  className?: string;\n};\n\nexport type CardSummaryMarkProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryNameProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryDigitsProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryMaskProps = Readonly<\n  CardSummaryPartProps & {\n    /** The masking symbol shown before the digits. Defaults to `••••`; empty renders nothing. */\n    mask?: string;\n    /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */\n    children?: ReactNode;\n  }\n>;\n\nexport const CardSummaryContent = defineContentType({\n  id: 'card-summary',\n  title: 'Card Summary',\n  description: \"The card's last digits as read to assistive technology.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      endingIn: {\n        type: 'string',\n        title: 'Card last digits',\n        format: 'icu-message',\n        messageSource: 'ending in {lastDigits}',\n        messageArguments: { type: 'object', properties: { lastDigits: { type: 'string' } } },\n        messageExample: { lastDigits: '4242' },\n      },\n    },\n  },\n});\n\nexport const CardSummaryDefinition = defineComponent<CardSummaryProps>({\n  name: 'CardSummary',\n  importPath: '@vtex/faststore/components',\n  component: CardSummary,\n  content: CardSummaryContent,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary', category: 'content' },\n  schema: {},\n  guideline:\n    \"A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Its endingIn message is what CardSummaryDigits reads to screen readers. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMarkDefinition = defineComponent<CardSummaryMarkProps>({\n  name: 'CardSummaryMark',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMark,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mark', category: 'content' },\n  schema: {},\n  guideline:\n    \"The card network's mark. When the card has a label, it also carries the network: hidden text beside the mark, or the network name as visible text for a network with no mark. Renders nothing for an unlabelled card on a network with no mark, since the name says it. On an unlabelled card the glyph is decorative and CardSummaryName announces the network, so compose both: Mark without Name leaves screen readers no network. Marks come from data, so the store lists CARD_NETWORK_ICON_NAMES under icons.include. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryNameDefinition = defineComponent<CardSummaryNameProps>({\n  name: 'CardSummaryName',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryName,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Name', category: 'content' },\n  schema: {},\n  guideline:\n    \"The shopper's label for the card, or else its network name; nothing when both are blank. Read-only. On an unlabelled card it is the only part a screen reader hears the network from. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMaskDefinition = defineComponent<CardSummaryMaskProps>({\n  name: 'CardSummaryMask',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMask,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mask', category: 'content' },\n  schema: {\n    mask: { type: 'string', default: '••••', label: 'Mask' },\n  },\n  guideline:\n    'Decoration standing for the hidden digits: the mask text (•••• by default), or children such as an icon in its place. Keep children inline. Always hidden from assistive technology; dropping it changes nothing a screen reader hears. Renders nothing when empty or when the card has no digits. Must be inside a card-summary provider.',\n});\n\nexport const CardSummaryDigitsDefinition = defineComponent<CardSummaryDigitsProps>({\n  name: 'CardSummaryDigits',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryDigits,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Digits', category: 'content' },\n  schema: {},\n  guideline:\n    'The last four digits, announced to screen readers with the endingIn message of the CardSummary around it; outside one, or with that message missing, screen readers hear the bare digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider.',\n});\n\n/**\n * Provides one card to the parts, keeping only its last four digits. No definition on purpose: a\n * schema cannot supply the card, so a matter row renders it and declares 'card-summary' itself.\n */\nexport function CardSummaryRoot({ network, lastDigits, label, children }: CardSummaryRootProps) {\n  const value = useMemo<CardSummaryValue>(() => {\n    const trimmedLabel = label?.trim() || null;\n    return {\n      network,\n      icon: cardNetworkIcon(network),\n      label: trimmedLabel,\n      name: trimmedLabel ?? (network.trim() ? network : null),\n      lastFour: lastDigits.replaceAll(/\\D/g, '').slice(-4),\n    };\n  }, [network, lastDigits, label]);\n\n  return <CardSummaryContext.Provider value={value}>{children}</CardSummaryContext.Provider>;\n}\n\n/** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */\nexport function CardSummary({ className, children, $content }: CardSummaryProps) {\n  const { icon, label } = useCardSummary();\n  const { format } = useMessageFormatter(CardSummaryContent, $content);\n  // Formatted on demand, so a composition without Digits never reports the message missing.\n  const endingIn = useMemo<CardSummaryEndingIn>(() => (lastDigits) => format('endingIn', { lastDigits }), [format]);\n  return (\n    <CardSummaryEndingInContext value={endingIn}>\n      <span\n        className={className}\n        data-fs-card-summary=\"\"\n        data-fs-card-summary-network={icon ?? undefined}\n        {...(label ? { 'data-fs-card-summary-labeled': '' } : {})}\n      >\n        {children ?? (\n          <>\n            <CardSummaryMark />\n            <CardSummaryName />\n            <CardSummaryMask />\n            <CardSummaryDigits />\n          </>\n        )}\n      </span>\n    </CardSummaryEndingInContext>\n  );\n}\n\n// Each part ends with a space: accessible names concatenate inline siblings with no separator, so\n// without it a screen reader hears \"MastercardCompany card\". A flex container drops it visually.\n\n/** The network's mark, and the network itself when a label takes the name. */\nexport function CardSummaryMark({ className }: CardSummaryMarkProps) {\n  const { network, icon, label } = useCardSummary();\n  if (!icon && (!label || !network.trim())) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mark=\"\">\n        {icon ? <Icon name={icon} data-fs-card-summary-icon=\"\" /> : null}\n        {label && icon ? (\n          <span data-fs-sr-only=\"\" className=\"sr-only\">\n            {network}\n          </span>\n        ) : null}\n        {label && !icon ? <span data-fs-card-summary-network-name=\"\">{network}</span> : null}\n      </span>{' '}\n    </>\n  );\n}\n\n/** The label, or else the network name. Renders nothing when both are blank. */\nexport function CardSummaryName({ className }: CardSummaryNameProps) {\n  const { name } = useCardSummary();\n  if (!name) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-name=\"\">\n        {name}\n      </span>{' '}\n    </>\n  );\n}\n\n/** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */\nexport function CardSummaryMask({ className, mask = '••••', children }: CardSummaryMaskProps) {\n  const { lastFour } = useCardSummary();\n  const content = children ?? mask;\n  if (!lastFour || !content) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mask=\"\" aria-hidden=\"true\">\n        {content}\n      </span>{' '}\n    </>\n  );\n}\n\n/**\n * The last four digits, read with CardSummary's endingIn message. With no such text, outside a\n * CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when\n * there are no digits.\n */\nexport function CardSummaryDigits({ className }: CardSummaryDigitsProps) {\n  const { lastFour } = useCardSummary();\n  const endingIn = useContext(CardSummaryEndingInContext);\n  if (!lastFour) return null;\n  const spoken = endingIn ? endingIn(lastFour) : '';\n  return (\n    <>\n      <span className={className} data-fs-card-summary-digits=\"\">\n        {spoken ? (\n          <>\n            <span aria-hidden=\"true\">{lastFour}</span>\n            <span data-fs-sr-only=\"\" className=\"sr-only\">\n              {spoken}\n            </span>\n          </>\n        ) : (\n          <span>{lastFour}</span>\n        )}\n      </span>{' '}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/carousel/carousel.d.ts

@@ -1,7 +1,94 @@
+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";
 //#region src/particles/carousel/carousel.d.ts
+export declare const CarouselRootContent: {
+  readonly id: "carousel-root";
+  readonly title: "Carousel Root";
+  readonly description: "Accessible name of the carousel region.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Accessible label";
+        readonly format: "icu-message";
+        readonly messageSource: "Carousel";
+      };
+    };
+  };
+};
+export declare const CarouselPreviousContent: {
+  readonly id: "carousel-previous";
+  readonly title: "Carousel Previous";
+  readonly description: "Accessible name of the previous-page control.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Accessible label";
+        readonly format: "icu-message";
+        readonly messageSource: "Previous";
+      };
+    };
+  };
+};
+export declare const CarouselNextContent: {
+  readonly id: "carousel-next";
+  readonly title: "Carousel Next";
+  readonly description: "Accessible name of the next-page control.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Accessible label";
+        readonly format: "icu-message";
+        readonly messageSource: "Next";
+      };
+    };
+  };
+};
+export declare const CarouselBulletsContent: {
+  readonly id: "carousel-bullets";
+  readonly title: "Carousel Bullets";
+  readonly description: "Accessible names of the page bullets and of their group.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly ariaLabel: {
+        readonly type: "string";
+        readonly title: "Group accessible label";
+        readonly format: "icu-message";
+        readonly messageSource: "Choose page";
+      };
+      readonly bulletLabel: {
+        readonly type: "string";
+        readonly title: "Bullet accessible label";
+        readonly description: "The page argument is the 1-based page number.";
+        readonly format: "icu-message";
+        readonly messageSource: "Go to page {page}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly page: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly page: 2;
+        };
+      };
+    };
+  };
+};
 export type CarouselVariant = 'slide' | 'scroll';
 export type CarouselContextValue = {
   currentPage: number;
@@ -17,33 +104,34 @@ export type CarouselContextValue = {
   canGoPrevious: boolean;
   setItemCount: (count: number) => void;
 };
-export type CarouselRootProps = ComponentPropsWithRef<'section'> & {
+export type CarouselRootProps = ComponentPropsWithRef<'section'> & MessageLocaleProp & {
   infiniteMode?: boolean;
   variant?: CarouselVariant;
   itemsPerPage?: number;
   defaultPage?: number;
-  label?: string;
+  $content?: ContentValue<typeof CarouselRootContent>;
 };
 export type CarouselTrackProps = ComponentPropsWithRef<'div'> & {
   children?: ReactNode;
 };
-export type CarouselPreviousProps = ComponentPropsWithRef<'button'> & {
+export type CarouselPreviousProps = ComponentPropsWithRef<'button'> & MessageLocaleProp & {
   children?: ReactNode;
+  $content?: ContentValue<typeof CarouselPreviousContent>;
 };
-export type CarouselNextProps = ComponentPropsWithRef<'button'> & {
+export type CarouselNextProps = ComponentPropsWithRef<'button'> & MessageLocaleProp & {
   children?: ReactNode;
+  $content?: ContentValue<typeof CarouselNextContent>;
 };
-export type CarouselBulletsProps = ComponentPropsWithRef<'div'> & {
-  ariaLabel?: string;
-  bulletLabel?: string;
+export type CarouselBulletsProps = ComponentPropsWithRef<'div'> & MessageLocaleProp & {
   hideWhenSingle?: boolean;
+  $content?: ContentValue<typeof CarouselBulletsContent>;
 };
 export declare function useCarousel(): CarouselContextValue;
-export declare function CarouselRoot({ infiniteMode, variant, itemsPerPage, defaultPage, label, children, ...props }: CarouselRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselRoot({ infiniteMode, variant, itemsPerPage, defaultPage, $locale, $content, children, ...props }: CarouselRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function CarouselTrack({ children, style, ref, onScroll, ...props }: CarouselTrackProps): import("react/jsx-runtime").JSX.Element;
-export declare function CarouselPrevious({ children, onClick, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
-export declare function CarouselNext({ children, onClick, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
-export declare function CarouselBullets({ ariaLabel, bulletLabel, hideWhenSingle, ...props }: CarouselBulletsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CarouselPrevious({ $locale, $content, children, onClick, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselNext({ $locale, $content, children, onClick, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselBullets({ $locale, $content, hideWhenSingle, ...props }: CarouselBulletsProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const CarouselRootDefinition: ComponentDefinition<CarouselRootProps>;
 export declare const CarouselTrackDefinition: ComponentDefinition<CarouselTrackProps>;
 export declare const CarouselPreviousDefinition: ComponentDefinition<CarouselPreviousProps>;