@vtex/faststore 0.0.7 → 0.0.10

package/dist/matter/variant-selector/variant-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"variant-selector.js","names":["BaseRadio"],"sources":["../../../src/matter/variant-selector/variant-selector.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  createContext,\n  type FunctionComponent,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { RadioGroup } from '../../particles/radio/radio.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantSelectorDataFragment } from '../../sdk/generated/graphql.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\n\n// `useLayoutEffect` on the client, `useEffect` on the server: keeps the pre-paint (no-flash) measurement\n// and overflow registration on the client while silencing React 19's \"useLayoutEffect does nothing on the\n// server\" SSR warning. Mirrors the useEffect-for-SSR convention in `sdk/data/page-reactive-data-root.tsx`.\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment VariantSelectorData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      options {\n        name\n        values\n      }\n      variants(first: 50) {\n        edges {\n          node {\n            __typename\n            id\n            name\n            sku\n            availableForSale\n            selectedOptions {\n              name\n              value\n            }\n            images(first: 1) {\n              edges {\n                node {\n                  url\n                  altText\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<VariantSelectorDataFragment['productBySlug']>;\n\n/** The swatch kinds a swatch list can render. Each maps to a dedicated swatch-content component and to a\n *  `data-fs-variant-selector-group-mode` value; `inferDisplayMode` resolves one for the auto swatch list\n *  (`VariantSelectorSwatches`), and the explicit lists (`VariantSelectorColorSwatches`, …) fix one directly. */\ntype ResolvedDisplayMode = 'label' | 'image' | 'color' | 'radio';\n\n/** Per-value swatch media. `imageUrl`/`alt` are derived from the matching variant's primary image\n *  (`Variant.images`) so the `image`/`auto` display modes work from live data. `hexColor` has no\n *  Core Graph source (`ProductOption.values: [String!]!`) and is populated only when a host injects\n *  it through context — see specs/sku-selector.md gap row 2. */\nexport type VariantSelectorSwatch = {\n  hexColor?: string;\n  imageUrl?: string;\n  alt?: string;\n};\n\nexport type VariantSelectorOptionData = {\n  value: string;\n  available: boolean;\n  variantId: string | null;\n  swatch?: VariantSelectorSwatch;\n};\n\nexport type VariantSelectorAxis = {\n  name: string;\n  activeValue: string | null;\n  options: VariantSelectorOptionData[];\n};\n\nexport type VariantSelectorContextValue = {\n  axes: VariantSelectorAxis[];\n  selectedVariantId: string | null;\n  select: (axisName: string, value: string) => void;\n} | null;\n\n/** Provided by `VariantSelectorOptionGroup` to its composed parts (title, swatch list, overflow, and the\n *  options the list renders). The group owns the axis binding and the collapse/expand state; the parts read\n *  what they need from here, so the author can place them freely — e.g. the title in an accordion header\n *  and the swatch list in its panel. */\ntype VariantSelectorGroupContextValue = {\n  axis: VariantSelectorAxis;\n  /** Stable id shared by the title (`id`) and the swatch list (`aria-labelledby`) to label the radiogroup. */\n  titleId: string;\n  /** Whether a `VariantSelectorGroupTitle` is composed in this group. The swatch list points its\n   *  `aria-labelledby` at the title only when one exists; otherwise it relies on the `aria-label`\n   *  axis-name floor, so the radiogroup is never labelled by a dangling idref. */\n  hasTitle: boolean;\n  /** Registers a mounted `VariantSelectorGroupTitle`, returning an unregister for cleanup. Ref-counted so\n   *  the title can be placed freely (e.g. an accordion header) and still flip `hasTitle`. */\n  registerTitle: () => () => void;\n  /** Registers a mounted `VariantSelectorOverflow`, returning an unregister for cleanup. Ref-counted like\n   *  `registerTitle`, so the trigger can be placed freely and still flip `hasOverflow`. Space-based collapse\n   *  runs only while a trigger is composed, so hidden swatches always have a reveal affordance. */\n  registerOverflow: () => () => void;\n  /** Whether a `VariantSelectorOverflow` is composed in this group — gates the measured collapse. */\n  hasOverflow: boolean;\n  /** Ref callback the swatch list hands its container element to, so the group can measure the row width. */\n  registerListElement: (el: HTMLElement | null) => void;\n  visibleOptions: VariantSelectorOptionData[];\n  hiddenCount: number;\n  overflowing: boolean;\n  expand: () => void;\n  /** Activates `value` on this group's axis. */\n  select: (value: string) => void;\n  ImageComponent: FunctionComponent<{ src: string; alt: string }>;\n};\n\nexport type VariantSelectorRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n  /** Pre-selects the variant the page is showing (the viewed SKU) before the shopper interacts.\n   *  `productBySlug` resolves to the product group, so the page supplies the viewed variant id here\n   *  — mirroring `ProductGalleryRoot.selectedVariantId`. The published `selectedVariantVar` wins\n   *  once a swatch is activated; this prop is only the initial fallback. */\n  selectedVariantId?: string;\n};\n\nexport type VariantSelectorOptionGroupProps = ComponentPropsWithRef<'div'> & {\n  /** Catalog `ProductOption.name` this group binds (e.g. `\"Color\"`). Matched case/accent/whitespace-\n   *  insensitively but otherwise exactly — the runtime does no plural or translation guessing. Use this\n   *  only when the exact catalog name is known; otherwise bind by `optionIndex`. When both are given, a\n   *  successful name match wins and `optionIndex` is the fallback. */\n  optionName?: string;\n  /** Zero-based axis position, in the order the product defines its options. The preferred binding for\n   *  generated schemas: the author places one group per axis in visual top-to-bottom order, which lines\n   *  up with the product's option order — reliable even when the on-image label differs from the catalog\n   *  name. Used when `optionName` is absent or does not match any axis. */\n  optionIndex?: number;\n  /** Reserve space for the `VariantSelectorOverflow` trigger in the fit calculation. Off by default: the\n   *  trigger is a sibling of the swatch list (its own space), so the swatches use the full row width. Turn\n   *  it on only when the trigger is styled inline at the end of the swatch row (content-sized) so it stays\n   *  on the line — its measured width is then subtracted from the space available to the swatches. */\n  reserveTriggerSpace?: boolean;\n  /** Image renderer used by image/color swatches; defaults to a plain `<img>`. Hosts inject e.g. next/image. */\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n/** Title for a `VariantSelectorOptionGroup`: renders the axis name (or your `label`). Reads the axis from\n *  group context, so it can be placed anywhere inside the group (e.g. an accordion header). Compose a\n *  `VariantSelectorGroupValue` beside it to echo the live selection — the separator, weight, and spacing\n *  between the two are brand styling on the `data-fs-*` hooks, not baked into this component. */\nexport type VariantSelectorGroupTitleProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n  /** Overrides the displayed axis name. Defaults to the catalog axis name (e.g. `\"Color\"`). Use it to match\n   *  a design's prompt copy such as `\"Selecione a cor\"`; it never changes which axis the group binds. Any\n   *  separator (e.g. a trailing colon) is styling — add it to the title's `data-fs-*` hook, not the text. */\n  label?: string;\n};\n\n/** The live selected value of a `VariantSelectorOptionGroup`, as a standalone placeable part (e.g. beside\n *  the title inside a container). Decorative/`aria-hidden`: the selection is already announced per option,\n *  so echoing it here would make the group's accessible name churn on every change. */\nexport type VariantSelectorGroupValueProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n/** The swatch list for a `VariantSelectorOptionGroup`: a radiogroup of the axis' option swatches,\n *  auto-rendered from the product data. The component chooses the swatch look — `VariantSelectorSwatches`\n *  infers it, the explicit variants fix it — so the kind is selected by composition, not a prop. */\nexport type VariantSelectorSwatchesProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>;\n\n/** The \"+N more\" trigger for a `VariantSelectorOptionGroup`: composing it opts the group into measured,\n *  space-based collapse, and it renders only while the row actually overflows, expanding it in place.\n *  Reads the hidden count and expand action from group context. */\nexport type VariantSelectorOverflowProps = Omit<ComponentPropsWithRef<'button'>, 'children'>;\n\nexport type VariantSelectorOptionProps = {\n  value: string;\n  className?: string;\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst VARIANT_SELECTOR_CONTEXT_UNSET = Symbol('VariantSelectorContextUnset');\n\nconst VariantSelectorContextInternal = createContext<\n  VariantSelectorContextValue | typeof VARIANT_SELECTOR_CONTEXT_UNSET\n>(VARIANT_SELECTOR_CONTEXT_UNSET);\n\n/** Exposed for advanced composition and tests that mount group/option in isolation. */\nexport const VariantSelectorContext = VariantSelectorContextInternal as React.Context<VariantSelectorContextValue>;\n\nexport const VariantSelectorGroupContext = createContext<VariantSelectorGroupContextValue | null>(null);\n\n/** Carries the swatch-content component the active swatch list chose, read by `VariantSelectorOption`.\n *  Null when an option renders outside a swatch list, in which case the option degrades to a text label. */\nconst VariantSelectorSwatchContext = createContext<FunctionComponent<SwatchContentProps> | null>(null);\n\nfunction useVariantSelector(): VariantSelectorContextValue {\n  const ctx = useContext(VariantSelectorContextInternal);\n  if (ctx === VARIANT_SELECTOR_CONTEXT_UNSET) {\n    throw new Error('VariantSelector components must be used inside VariantSelectorRoot.');\n  }\n  return ctx;\n}\n\nfunction useVariantSelectorGroup(): VariantSelectorGroupContextValue {\n  const ctx = useContext(VariantSelectorGroupContext);\n  if (ctx === null) {\n    throw new Error(\n      'VariantSelector group parts (Title, swatch lists, Overflow, Option) must be used inside VariantSelectorOptionGroup.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Derivation\n// ---------------------------------------------------------------------------\n\ntype DerivedVariant = {\n  id: string;\n  name: string;\n  sku: string;\n  availableForSale: boolean;\n  options: Record<string, string>;\n  image: { url: string; alt: string | null } | null;\n};\n\nfunction deriveVariants(data: ProductSlice): DerivedVariant[] {\n  return data.variants.edges.map(({ node }) => {\n    const options: Record<string, string> = {};\n    for (const selected of node.selectedOptions) {\n      options[selected.name] = selected.value;\n    }\n    const primaryImage = node.images.edges[0]?.node ?? null;\n    return {\n      id: node.id,\n      name: node.name,\n      sku: node.sku,\n      availableForSale: node.availableForSale,\n      options,\n      image: primaryImage ? { url: primaryImage.url, alt: primaryImage.altText } : null,\n    };\n  });\n}\n\n/**\n * Resolve the variant activated by setting `axisName` to `value` while keeping the current\n * selection on the other axes. Mirrors the legacy `getSkuSlug` dominant-axis fallback: an exact\n * match across every current selection wins; otherwise the first variant carrying `value` on the\n * activated axis is used. String equality keeps `Size-7` distinct from `Size-7.5`.\n */\nfunction resolveVariant(\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n  axisName: string,\n  value: string,\n): DerivedVariant | null {\n  const target = { ...currentSelection, [axisName]: value };\n  const exact = variants.find((variant) =>\n    Object.entries(target).every(([name, selected]) => variant.options[name] === selected),\n  );\n  if (exact) return exact;\n  return variants.find((variant) => variant.options[axisName] === value) ?? null;\n}\n\nfunction deriveAxes(\n  data: ProductSlice,\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n): VariantSelectorAxis[] {\n  return data.options.map((option) => ({\n    name: option.name,\n    activeValue: currentSelection[option.name] ?? null,\n    options: option.values.map((value) => {\n      const resolved = resolveVariant(variants, currentSelection, option.name, value);\n      const swatch: VariantSelectorSwatch | undefined = resolved?.image\n        ? { imageUrl: resolved.image.url, alt: resolved.image.alt ?? undefined }\n        : undefined;\n      return {\n        value,\n        available: resolved?.availableForSale ?? false,\n        variantId: resolved?.id ?? null,\n        swatch,\n      };\n    }),\n  }));\n}\n\n/**\n * Swatch inference for the auto swatch list `VariantSelectorSwatches` (legacy `useDefineVariant`): `color`\n * when every option carries a `hexColor`; `image` when a single option has an image, or when image sources\n * differ across options; `label` otherwise. Never returns `radio` — that look is explicit only.\n */\nexport function inferDisplayMode(options: VariantSelectorOptionData[]): ResolvedDisplayMode {\n  if (options.length > 0 && options.every((option) => Boolean(option.swatch?.hexColor))) {\n    return 'color';\n  }\n\n  const imageUrls = options.map((option) => option.swatch?.imageUrl).filter((url): url is string => Boolean(url));\n  if (imageUrls.length === 1) return 'image';\n\n  const firstImageUrl = imageUrls[0];\n  const sourcesDiffer = imageUrls.some((url) => url !== firstImageUrl);\n  if (firstImageUrl !== undefined && sourcesDiffer) return 'image';\n\n  return 'label';\n}\n\nfunction DefaultVariantImage({ src, alt }: Readonly<{ src: string; alt: string }>) {\n  // biome-ignore lint/performance/noImgElement: default swatch fallback; production hosts inject ImageComponent (e.g. next/image).\n  return <img src={src} alt={alt} data-fs-variant-selector-option-image=\"\" />;\n}\n\n/**\n * Props shared by every swatch-content component. Each component renders the decorative (aria-hidden)\n * body of one option — the accessible name lives in the sibling sr-only span owned by the option shell,\n * so everything here is purely visual. Shape (square/circle/pill) and the selected-state highlight are\n * owned by styling, never by this code.\n */\ntype SwatchContentProps = Readonly<{\n  swatch: VariantSelectorSwatch | undefined;\n  value: string;\n  Image: FunctionComponent<{ src: string; alt: string }>;\n}>;\n\n/** Plain text body: the value label, hooked as `data-fs-variant-selector-option-label` so an option's\n *  value text is styleable through the same selector everywhere (matching the radio swatch's label). */\nfunction LabelSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n      {value}\n    </span>\n  );\n}\n\n/** Image body: the variant thumbnail, degrading to the value label when no image source is present. */\nfunction ImageSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.imageUrl) {\n    return (\n      <span aria-hidden=\"true\">\n        <Image src={swatch.imageUrl} alt={swatch.alt ?? value} />\n      </span>\n    );\n  }\n  return <LabelSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Color body: a color chip, degrading gracefully when the value lacks a hex source. `hexColor` has no\n * Core Graph origin (see `VariantSelectorSwatch`), so a `color` group authored from a design may resolve\n * to values with no color: paint the chip when a hex is present, else fall back to the variant image,\n * else the value label — never an empty chip.\n */\nfunction ColorSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.hexColor) {\n    return (\n      <span aria-hidden=\"true\">\n        <div\n          data-fs-variant-selector-option-color=\"\"\n          title={value}\n          style={{ '--fs-variant-selector-option-color-bkg-color': swatch.hexColor } as CSSProperties}\n        />\n      </span>\n    );\n  }\n  return <ImageSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Radio body: a classic radio row — a control circle holding Base UI's indicator (the dot, shown when\n * checked) next to the value label. Both are direct children of the option root (no wrapper span) so the\n * group's `flex` on `data-fs-variant-selector-option` lays the control and label out as a row; each is\n * `aria-hidden` because the sibling sr-only span already owns the accessible name. Style `-control` as\n * the ring and `-indicator` as the dot.\n */\nfunction RadioSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <>\n      <span data-fs-variant-selector-option-control=\"\" aria-hidden=\"true\">\n        <BaseRadio.Indicator data-fs-variant-selector-option-indicator=\"\" />\n      </span>\n      <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n        {value}\n      </span>\n    </>\n  );\n}\n\n/**\n * A swatch kind: the `data-fs-variant-selector-group-mode` value it advertises for styling, paired with\n * the component that renders it. Each explicit swatch list (`VariantSelectorColorSwatches`, …) references\n * one of these constants directly, so the swatch is chosen by composition rather than by mapping a\n * `displayMode` string at render time.\n */\ntype SwatchKind = {\n  mode: ResolvedDisplayMode;\n  SwatchContent: FunctionComponent<SwatchContentProps>;\n};\n\nconst LABEL_SWATCH: SwatchKind = { mode: 'label', SwatchContent: LabelSwatchContent };\nconst IMAGE_SWATCH: SwatchKind = { mode: 'image', SwatchContent: ImageSwatchContent };\nconst COLOR_SWATCH: SwatchKind = { mode: 'color', SwatchContent: ColorSwatchContent };\nconst RADIO_SWATCH: SwatchKind = { mode: 'radio', SwatchContent: RadioSwatchContent };\n\n/**\n * The swatch kinds the auto swatch list `VariantSelectorSwatches` can land on. `auto` is a runtime\n * decision — it cannot be a static component reference — so the inferred mode is mapped back to its kind\n * here. The explicit swatch lists bypass this entirely. `inferDisplayMode` never returns `radio`, but the\n * `Record` stays exhaustive over `ResolvedDisplayMode` so the lookup is total.\n */\nconst SWATCH_BY_INFERRED_MODE: Record<ResolvedDisplayMode, SwatchKind> = {\n  label: LABEL_SWATCH,\n  image: IMAGE_SWATCH,\n  color: COLOR_SWATCH,\n  radio: RADIO_SWATCH,\n};\n\n// ---------------------------------------------------------------------------\n// Axis resolution\n// ---------------------------------------------------------------------------\n\n/**\n * Normalizes an axis name for matching: strips accents and case and collapses whitespace. This is a\n * deterministic normalization, not a linguistic guess — it only bridges trivial casing/accent/spacing\n * differences between an authored `optionName` and the catalog `ProductOption.name` (e.g. \"cólor\" vs\n * \"Color\"). Anything beyond that — translations, paraphrases, singular/plural — is resolved at\n * authoring time via `optionIndex`, which the schema author reads from the axis' visual order. The\n * runtime deliberately does no morphology. See variant-selector.md.\n */\nfunction normalizeAxisName(name: string): string {\n  return name\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '')\n    .toLowerCase()\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n}\n\n/**\n * Finds the axis an `optionName` refers to via a normalized (case/accent/whitespace-insensitive)\n * match, and only when it is unambiguous (exactly one axis), so a match can never silently bind to\n * the wrong axis. Non-trivial label differences are handled by `optionIndex`, never guessed here.\n */\nfunction findAxisByName(axes: VariantSelectorAxis[], optionName: string): VariantSelectorAxis | null {\n  const exact = axes.find((axis) => axis.name === optionName);\n  if (exact) return exact;\n  const target = normalizeAxisName(optionName);\n  const matches = axes.filter((axis) => normalizeAxisName(axis.name) === target);\n  return matches.length === 1 ? (matches[0] ?? null) : null;\n}\n\n/**\n * Resolves the axis a group binds to. `optionName` (tolerant) takes precedence; `optionIndex`\n * (zero-based position) is the fallback so a generated schema can bind by visual order when the\n * localized label does not match the catalog name. Returns `null` when neither resolves.\n */\nfunction resolveAxis(\n  axes: VariantSelectorAxis[],\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n): VariantSelectorAxis | null {\n  if (optionName !== undefined) {\n    const byName = findAxisByName(axes, optionName);\n    if (byName) return byName;\n  }\n  if (optionIndex !== undefined && Number.isInteger(optionIndex) && optionIndex >= 0 && optionIndex < axes.length) {\n    return axes[optionIndex] ?? null;\n  }\n  return null;\n}\n\n/**\n * Resolves the swatch kind a swatch list renders: an explicit kind passes through; `'auto'` infers from\n * the axis' options (and falls back to `label` for an unresolved axis).\n */\nfunction resolveSwatchKind(swatch: SwatchKind | 'auto', axis: VariantSelectorAxis | null): SwatchKind {\n  if (swatch !== 'auto') return swatch;\n  return axis ? SWATCH_BY_INFERRED_MODE[inferDisplayMode(axis.options)] : LABEL_SWATCH;\n}\n\n/**\n * Computes the swatches to render under an effective `cap` (the count that fits the measured row, resolved\n * upstream). Collapses to the first `cap` options while always keeping the active swatch visible. `cap` is\n * by construction the most that fit one line, so when the active swatch sits past it we **swap** it for the\n * last head swatch (`cap - 1` head + active = `cap`) instead of appending (`cap + 1`, which would wrap or\n * overflow). Dropping the *last* head swatch keeps the leading options stable across selections and never\n * hides the primary (first) option. A `null` cap (measurement unavailable, no trigger, or expanded) shows\n * every swatch.\n */\nfunction getVisibleOptions(\n  axis: VariantSelectorAxis,\n  cap: number | null,\n  expanded: boolean,\n): { visibleOptions: VariantSelectorOptionData[]; hiddenCount: number; overflowing: boolean } {\n  if (cap === null || cap <= 0 || expanded || axis.options.length <= cap) {\n    return { visibleOptions: axis.options, hiddenCount: 0, overflowing: false };\n  }\n  const head = axis.options.slice(0, cap);\n  const activeHidden =\n    axis.activeValue !== null &&\n    !head.some((option) => option.value === axis.activeValue) &&\n    axis.options.some((option) => option.value === axis.activeValue);\n  const activeOption = activeHidden ? axis.options.find((option) => option.value === axis.activeValue) : undefined;\n  // Swap the active swatch in for the last head swatch (keeping the count at `cap`) rather than appending it.\n  const visibleOptions = activeOption ? [...head.slice(0, cap - 1), activeOption] : head;\n  const hiddenCount = axis.options.length - visibleOptions.length;\n  return { visibleOptions, hiddenCount, overflowing: hiddenCount > 0 };\n}\n\n// ---------------------------------------------------------------------------\n// Space measurement (the swatch overflow driver)\n// ---------------------------------------------------------------------------\n\n/**\n * Pure fit math: given each option's outer width, the row `gap`, the list's available inner width, and an\n * optional `triggerWidth` to reserve for the \"+N more\" control, return how many options fit on one line.\n * By default the trigger is a sibling of the swatch list (its own space), so `triggerWidth` is 0 and the\n * swatches get the full width; pass the trigger's width when it sits inline at the end of the swatch row so\n * it stays on the line. When every option fits it returns the full count; otherwise the prefix that fits,\n * floored at 1 so an oversized single swatch never yields zero. Isolated from the DOM so the algorithm is\n * unit-testable with plain numbers.\n */\nexport function computeVisibleCount(optionWidths: number[], gap: number, available: number, triggerWidth = 0): number {\n  const total = optionWidths.length;\n  if (total === 0) return 0;\n\n  // Single accumulating pass (O(n)): total row width is the sum of widths plus one gap between each pair.\n  let full = 0;\n  for (const w of optionWidths) full += w;\n  full += gap * (total - 1);\n  if (full <= available) return total;\n\n  // Reserve the trigger (and the gap before it) only when it shares the swatch row.\n  const budget = triggerWidth > 0 ? available - triggerWidth - gap : available;\n  let used = 0;\n  let count = 0;\n  for (const w of optionWidths) {\n    const next = w + (count > 0 ? gap : 0);\n    if (used + next > budget) break;\n    used += next;\n    count++;\n  }\n  return Math.max(1, count);\n}\n\n/** Reads the swatch list's content-box inner width (the space the swatches actually lay out in) and the\n *  resolved horizontal row gap, from a single `getComputedStyle`. `clientWidth` includes horizontal padding,\n *  so a list styled with `px-*` would otherwise overestimate the space and fit one extra swatch. `columnGap`\n *  already resolves to a px value when `gap` is set (else `\"normal\"` → 0). */\nfunction readRowMetrics(el: HTMLElement): { available: number; gap: number } {\n  const style = getComputedStyle(el);\n  const px = (value: string) => {\n    const parsed = Number.parseFloat(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n  };\n  const available = el.clientWidth - px(style.paddingLeft) - px(style.paddingRight);\n  return { available, gap: px(style.columnGap) };\n}\n\n/**\n * Measures how many swatches fit the list's width and returns that count, or `null` when measurement is\n * unavailable (collapse disabled, no trigger composed, no element, zero width, or no `ResizeObserver` — SSR\n * and jsdom) so the caller shows every swatch. Recomputes on `ResizeObserver` resize.\n *\n * The option-width cache is refreshed only while the full set is on screen (count `null` → all shown); once\n * collapsed we can no longer see every swatch, so a later resize recomputes from the cached widths.\n *\n * When `reserveTriggerSpace` is set (the author placed the \"+N more\" trigger inline at the end of the swatch\n * row), the sibling trigger's width is reserved from the fit. The trigger only mounts after the first\n * collapse, so a second pass (keyed on `count`) folds its width in; the trigger width is accumulated\n * monotonically so a shrinking \"+N more\" label can never flip-flop the fitting count.\n */\nfunction useMeasuredVisibleCount({\n  listEl,\n  optionCount,\n  hasOverflow,\n  enabled,\n  reserveTriggerSpace,\n}: {\n  listEl: HTMLElement | null;\n  optionCount: number;\n  hasOverflow: boolean;\n  enabled: boolean;\n  reserveTriggerSpace: boolean;\n}): number | null {\n  const [count, setCount] = useState<number | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  const triggerWidthRef = useRef(0);\n  const measureRef = useRef<() => void>(() => {});\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled || !hasOverflow || !listEl || typeof ResizeObserver === 'undefined') {\n      widthsRef.current = [];\n      triggerWidthRef.current = 0;\n      // Disable the count-keyed re-measure below, so an expanded group is never re-collapsed.\n      measureRef.current = () => {};\n      setCount(null);\n      return;\n    }\n    // Re-measure fresh for this configuration (this effect re-runs when `optionCount` changes, so a\n    // client-side navigation that reuses this group with a different option set can never keep serving\n    // a stale width cache). The cache only persists across resizes (the ResizeObserver, which does not\n    // re-run this effect). The trigger width is likewise kept monotonic only across resizes below.\n    widthsRef.current = [];\n    triggerWidthRef.current = 0;\n\n    const measure = () => {\n      const { available, gap } = readRowMetrics(listEl);\n      if (available <= 0) {\n        setCount(null);\n        return;\n      }\n      const optionEls = Array.from(listEl.querySelectorAll<HTMLElement>('[data-fs-variant-selector-option]'));\n      // Refresh the width cache only when every option is on screen; a collapsed row cannot see them all.\n      if (optionCount > 0 && optionEls.length === optionCount) {\n        widthsRef.current = optionEls.map((el) => el.offsetWidth);\n      }\n      if (reserveTriggerSpace) {\n        const triggerEl = listEl.parentElement?.querySelector<HTMLElement>(\n          '[data-fs-variant-selector-overflow-trigger]',\n        );\n        triggerWidthRef.current = Math.max(triggerWidthRef.current, triggerEl?.offsetWidth ?? 0);\n      }\n\n      const widths = widthsRef.current;\n      if (widths.length === 0) {\n        setCount(null);\n        return;\n      }\n      const next = computeVisibleCount(widths, gap, available, triggerWidthRef.current);\n      setCount((prev) => (prev === next ? prev : next));\n    };\n\n    measureRef.current = measure;\n    measure();\n\n    const observer = new ResizeObserver(() => measure());\n    observer.observe(listEl);\n    return () => observer.disconnect();\n  }, [listEl, optionCount, hasOverflow, enabled, reserveTriggerSpace]);\n\n  // Re-measure on any count change, so convergence never depends on the ResizeObserver firing. After the\n  // cache is reset (e.g. the option set changed) the group first shows every swatch; this pass then measures\n  // the full set and collapses — the state-equality bail-out in `measure` stops it once it settles (two\n  // passes). It is also where the inline trigger's width (which mounts only after the first collapse) enters\n  // the fit in `reserveTriggerSpace` mode, accumulated monotonically so it can't flip-flop. `measureRef` is a\n  // no-op while measurement is disabled (expanded / no geometry), so an expanded group is never re-collapsed.\n  useIsomorphicLayoutEffect(() => {\n    measureRef.current();\n  }, [count]);\n\n  return count;\n}\n\n// Dedup dev warnings so a re-rendering group does not flood the console; keyed by the binding plus\n// the available axes so a later data change still surfaces a fresh warning.\nconst warnedUnresolvedAxes = new Set<string>();\n\nfunction warnUnresolvedAxis(\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n  axes: VariantSelectorAxis[],\n): void {\n  // Surface authoring/data mismatches during development and tests (the screenshot→store pipeline\n  // runs `next dev`); stay silent in production where the catalog is the source of truth.\n  if (process.env.NODE_ENV === 'production') return;\n  const available = axes.map((axis) => axis.name);\n  const key = `${optionName ?? ''}\\u0000${optionIndex ?? ''}\\u0000${available.join('\\u0001')}`;\n  if (warnedUnresolvedAxes.has(key)) return;\n  warnedUnresolvedAxes.add(key);\n  const list = available.length > 0 ? available.map((name, index) => `${index}:\"${name}\"`).join(', ') : '(none)';\n  console.warn(\n    `[VariantSelector] Could not resolve an option axis for ${\n      optionName === undefined ? `optionIndex ${optionIndex}` : `optionName \"${optionName}\"`\n    }. Available axes (index:name): ${list}. ` +\n      'optionName must reference a catalog ProductOption.name (matched ignoring case and accents only); ' +\n      'otherwise set optionIndex to the axis position (0-based, in the product option order).',\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const VariantSelectorRootDefinition = defineComponent<VariantSelectorRootProps>({\n  name: 'VariantSelectorRoot',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Variant Selector', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  providesContext: 'variant-selector',\n  guideline:\n    'Root container for PDP variant swatches — derives option axes and availability from the product variants and publishes the selected variant for sibling components. Wraps one VariantSelectorOptionGroup per axis. The selectedVariantId prop pre-selects the viewed SKU before the shopper interacts; the live selection wins once a swatch is activated.',\n});\n\nexport const VariantSelectorOptionGroupDefinition = defineComponent<VariantSelectorOptionGroupProps>({\n  name: 'VariantSelectorOptionGroup',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOptionGroup,\n  editor: { label: 'Variant Option Group', category: 'commerce' },\n  schema: {\n    optionName: { type: 'string', label: 'Option axis name (catalog ProductOption.name)' },\n    optionIndex: { type: 'number', label: 'Option axis index (0-based; fallback for optionName)' },\n    reserveTriggerSpace: { type: 'boolean', default: false, label: 'Reserve space for the \"+N more\" trigger' },\n  },\n  requiresContext: 'variant-selector',\n  providesContext: 'variant-selector-group',\n  guideline:\n    'One option axis (e.g. Color) inside a VariantSelectorRoot. A container only — it binds the axis and owns the collapse/expand state, then renders whatever you compose inside it. Fill it, in any order, with: a VariantSelectorGroupTitle (the axis name) and optionally a VariantSelectorGroupValue beside it to echo the selection, exactly one swatch list (VariantSelectorSwatches to auto-infer the look, or VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches to fix it), and optionally a VariantSelectorOverflow (\"+N more\") to collapse a row that does not fit its width. Because the parts read the group via context, you can place them freely — e.g. the title in an accordion header and the swatch list in its panel. Bind the axis with optionIndex (0-based, in the product\\'s option order — the reliable choice when authoring from an image, since groups are placed in visual order) or, when the exact catalog option name is known, optionName (matched case/accent-insensitively, no plural/translation guessing). Compose a VariantSelectorOverflow to opt into automatic space-based collapse: the group measures the swatch row and keeps only the swatches that fit on one line, revealing the rest via the trigger — no cap prop. The trigger sits in its own space by default; set reserveTriggerSpace when it is styled inline at the end of the swatch row, so its width is reserved and it stays on the line.',\n});\n\nexport const VariantSelectorGroupTitleDefinition = defineComponent<VariantSelectorGroupTitleProps>({\n  name: 'VariantSelectorGroupTitle',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupTitle,\n  editor: { label: 'Variant Group Title', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Axis name override (defaults to the catalog axis name)' },\n  },\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The axis name inside a VariantSelectorOptionGroup (e.g. \"Color\"). Reads the axis from context, so it stays correct even when placed apart from the swatches (e.g. in an accordion header). Set label to match a design prompt (\"Selecione a cor\") without changing the axis binding. It renders the name only — to echo the selected value place a VariantSelectorGroupValue beside it (e.g. both inside a Container); the separator (a colon), the value weight, and the spacing are brand styling on the data-fs hooks, not props.',\n});\n\nexport const VariantSelectorGroupValueDefinition = defineComponent<VariantSelectorGroupValueProps>({\n  name: 'VariantSelectorGroupValue',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupValue,\n  editor: { label: 'Variant Group Value', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The live selected value of a VariantSelectorOptionGroup (e.g. \"Red\"), as its own placeable part. Compose it beside a VariantSelectorGroupTitle — typically both inside a Container — to render \"Color: Red\", where the colon and the value weight are styling on the data-fs hooks. Omit it entirely when the design shows only the axis name (e.g. above a radio list, whose selected dot already conveys the choice). It is decorative (aria-hidden): the selection is announced per option, so the group is named by the axis alone.',\n});\n\nexport const VariantSelectorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorSwatches,\n  editor: { label: 'Variant Swatches (auto)', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The swatch list inside a VariantSelectorOptionGroup, auto-inferring the look from the option data: color when every value has a hex color, image when values resolve to differing variant images, else label (it never infers radio). Renders one swatch per option automatically — do not author VariantSelectorOption children. To fix the look instead of inferring it, use a sibling list: VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches. Swatch shape (square vs circle) is styling. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorLabelSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorLabelSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorLabelSwatches,\n  editor: { label: 'Variant Label Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'Swatch list rendered as text-label swatches (size pills, materials, voltages, any axis that should read as text). Use inside a VariantSelectorOptionGroup when the look must always be text regardless of the data (auto can resolve a size axis to image when its values map to differing variant photos). Renders its options automatically. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorImageSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorImageSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorImageSwatches,\n  editor: { label: 'Variant Image Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"Swatch list rendered as image (thumbnail) swatches; each shows the variant's primary image, degrading to the value label when no image is available. Use inside a VariantSelectorOptionGroup; prefer binding that group by optionName so the photo pairs with its intended axis — a positionally-bound group with an image list can hijack a text axis (e.g. sizes shown as clothing photos) when the live product exposes fewer or reordered axes than the design. Renders its options automatically. Use exactly one swatch list per group.\",\n});\n\nexport const VariantSelectorColorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorColorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorColorSwatches,\n  editor: { label: 'Variant Color Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"Swatch list rendered as color-chip swatches. Use inside a VariantSelectorOptionGroup when the design shows solid color chips. A value with no hex color (hexColor has no catalog source and is injection-only) degrades per value to its variant image, then to the value label, so a chip is never empty — choosing this from a design's colored swatches is always safe. Shape (circle vs square) is styling. Renders its options automatically. Use exactly one swatch list per group.\",\n});\n\nexport const VariantSelectorRadioSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorRadioSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRadioSwatches,\n  editor: { label: 'Variant Radio Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'Swatch list rendered as a radio-dot list — a control circle showing a dot when selected, beside the value label (common for voltage/material lists). Use inside a VariantSelectorOptionGroup; auto never picks this look, so reference it directly when the design shows a radio list. A square control or a checkmark is styling. Typically pair with a VariantSelectorGroupTitle (the axis name) and omit the VariantSelectorGroupValue, since the selected dot already conveys the choice. Renders its options automatically. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorOverflowDefinition = defineComponent<VariantSelectorOverflowProps>({\n  name: 'VariantSelectorOverflow',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOverflow,\n  editor: { label: 'Variant Overflow Trigger', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The \"+N more\" trigger inside a VariantSelectorOptionGroup. Composing it opts the group into automatic space-based collapse: the group measures the swatch row and, when the swatches do not fit on one line, collapses the extras behind this trigger, which expands them in place when clicked. It renders only while the row actually overflows. Author it after the swatch list; omit it when the row should never collapse.',\n});\n\nexport const VariantSelectorOptionDefinition = defineComponent<VariantSelectorOptionProps>({\n  name: 'VariantSelectorOption',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOption,\n  editor: { label: 'Variant Option', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'One swatch within a swatch list; reflects checked/disabled states and activates the matching variant on selection. Rendered automatically by the swatch list from the product data — do not author it directly.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function VariantSelectorRoot({\n  $data: $dataProp,\n  selectedVariantId,\n  className,\n  children,\n  ...props\n}: VariantSelectorRootProps) {\n  const $data = useDataOverride($dataProp);\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  // Only honour a published selection that belongs to this product — a selection made on another\n  // PDP must not leak through this module-global var after client-side navigation.\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, $data?.id ?? null);\n  // Precedence: the shopper's published in-page selection wins; otherwise the page-supplied viewed\n  // SKU (`selectedVariantId` prop) seeds the initial selection; falling back to the first variant.\n  const activeVariantId = publishedVariantId ?? selectedVariantId ?? null;\n\n  let contextValue: VariantSelectorContextValue = null;\n  if ($data) {\n    const productId = $data.id;\n    const variants = deriveVariants($data);\n    const selectedVariant = variants.find((variant) => variant.id === activeVariantId) ?? variants[0] ?? null;\n    const currentSelection = selectedVariant?.options ?? {};\n    const axes = deriveAxes($data, variants, currentSelection);\n\n    contextValue = {\n      axes,\n      selectedVariantId: selectedVariant?.id ?? null,\n      select: (axisName, value) => {\n        const resolved = resolveVariant(variants, currentSelection, axisName, value);\n        if (resolved) selectedVariantVar({ productId, variantId: resolved.id });\n      },\n    };\n  }\n\n  return (\n    <VariantSelectorContextInternal value={contextValue}>\n      <div {...props} className={className} data-fs-variant-selector=\"\">\n        {children}\n      </div>\n    </VariantSelectorContextInternal>\n  );\n}\n\n/** Axis container: binds the axis and owns the collapse/expand state, then renders whatever the author\n *  composes inside it (title, a swatch list, an overflow trigger). The parts read the axis and overflow\n *  state from the group context it provides, so they can be placed freely. */\nexport function VariantSelectorOptionGroup({\n  optionName,\n  optionIndex,\n  reserveTriggerSpace = false,\n  ImageComponent = DefaultVariantImage,\n  className,\n  children,\n  ...props\n}: VariantSelectorOptionGroupProps) {\n  const [expanded, setExpanded] = useState(false);\n  const [titleCount, setTitleCount] = useState(0);\n  const [overflowCount, setOverflowCount] = useState(0);\n  const [listEl, setListEl] = useState<HTMLElement | null>(null);\n  // Stable, collision-free id for the title→radiogroup `aria-labelledby` wiring. Deriving it from the\n  // axis name would break for multi-word catalog names (a space in an id/idref is parsed as multiple\n  // tokens, dropping the accessible name) and could collide across groups bound to the same axis.\n  const titleId = useId();\n  const ctx = useVariantSelector();\n  const axis = ctx ? resolveAxis(ctx.axes, optionName, optionIndex) : null;\n\n  // Ref-counted so a freely-placed title (even one nested in an accordion header, outside this DOM\n  // subtree) still flips `hasTitle` — which gates the swatch list's `aria-labelledby` so it never\n  // points at a title id that no element carries.\n  const registerTitle = useCallback(() => {\n    setTitleCount((count) => count + 1);\n    return () => setTitleCount((count) => count - 1);\n  }, []);\n  const hasTitle = titleCount > 0;\n\n  // Ref-counted like the title, so composing a VariantSelectorOverflow (wherever it is placed) opts the\n  // group into space-based collapse. No trigger ⇒ never collapse, so hidden swatches always have a reveal.\n  const registerOverflow = useCallback(() => {\n    setOverflowCount((count) => count + 1);\n    return () => setOverflowCount((count) => count - 1);\n  }, []);\n  const hasOverflow = overflowCount > 0;\n\n  // Stable ref callback the swatch list attaches to its container, so the group can measure the row.\n  const registerListElement = useCallback((el: HTMLElement | null) => setListEl(el), []);\n\n  // Measured count of swatches that fit the row (null when unavailable → show all). Disabled once the\n  // shopper expands, so an explicit expand stays sticky against later resizes.\n  const measuredVisibleCount = useMeasuredVisibleCount({\n    listEl,\n    optionCount: axis?.options.length ?? 0,\n    hasOverflow,\n    enabled: hasOverflow && !expanded,\n    reserveTriggerSpace,\n  });\n  const effectiveCap = expanded || !hasOverflow ? null : measuredVisibleCount;\n\n  const groupContextValue = useMemo<VariantSelectorGroupContextValue | null>(() => {\n    if (!ctx || !axis) return null;\n    const { visibleOptions, hiddenCount, overflowing } = getVisibleOptions(axis, effectiveCap, expanded);\n    return {\n      axis,\n      titleId,\n      hasTitle,\n      registerTitle,\n      registerOverflow,\n      hasOverflow,\n      registerListElement,\n      visibleOptions,\n      hiddenCount,\n      overflowing,\n      expand: () => setExpanded(true),\n      select: (value: string) => ctx.select(axis.name, value),\n      ImageComponent,\n    };\n  }, [\n    ctx,\n    axis,\n    effectiveCap,\n    expanded,\n    titleId,\n    hasTitle,\n    registerTitle,\n    registerOverflow,\n    hasOverflow,\n    registerListElement,\n    ImageComponent,\n  ]);\n\n  if (!groupContextValue) {\n    if (ctx) warnUnresolvedAxis(optionName, optionIndex, ctx.axes);\n    return null;\n  }\n\n  return (\n    <VariantSelectorGroupContext.Provider value={groupContextValue}>\n      <div\n        {...props}\n        className={className}\n        data-fs-variant-selector-group=\"\"\n        data-fs-variant-selector-group-overflow={groupContextValue.overflowing ? 'true' : 'false'}\n      >\n        {children}\n      </div>\n    </VariantSelectorGroupContext.Provider>\n  );\n}\n\n/** The axis name (the catalog axis name or `label`). Reads the axis from group context, so it reflects\n *  the bound axis wherever it is placed (including an accordion header). It is a `<span>`, not a `<label>`:\n *  it names the radiogroup via `aria-labelledby`, not a single control. Compose a `VariantSelectorGroupValue`\n *  beside it to echo the selection; the separator and value weight are styling on the `data-fs-*` hooks. */\nexport function VariantSelectorGroupTitle({ label, className, ...props }: VariantSelectorGroupTitleProps) {\n  const { axis, titleId, registerTitle } = useVariantSelectorGroup();\n  // Announce this title's presence so the swatch list wires `aria-labelledby` to it; unregister on unmount.\n  useEffect(() => registerTitle(), [registerTitle]);\n  return (\n    <span {...props} id={titleId} className={className} data-fs-variant-selector-group-title=\"\">\n      {label ?? axis.name}\n    </span>\n  );\n}\n\n/** The live selected value of the group's axis, as a standalone placeable part. Decorative (`aria-hidden`):\n *  the selection is announced per option, so it never participates in the group's accessible name. */\nexport function VariantSelectorGroupValue({ className, ...props }: VariantSelectorGroupValueProps) {\n  const { axis } = useVariantSelectorGroup();\n  return (\n    <span {...props} aria-hidden=\"true\" className={className} data-fs-variant-selector-group-value=\"\">\n      {axis.activeValue ?? ''}\n    </span>\n  );\n}\n\n/** Internal: the swatch list shared by every kind, parametrized by the swatch it renders. The public\n *  lists fix `swatch` — `VariantSelectorSwatches` to `'auto'` and the explicit ones to a concrete kind.\n *  Provides the resolved swatch component to its options via context. Not registered in the catalog. */\nfunction VariantSelectorSwatchesBase({\n  swatch,\n  className,\n  ref: consumerRef,\n  ...props\n}: VariantSelectorSwatchesProps & { swatch: SwatchKind | 'auto' }) {\n  const group = useVariantSelectorGroup();\n  const { registerListElement } = group;\n  const resolvedSwatch = resolveSwatchKind(swatch, group.axis);\n  // Register the list element for measurement and still honour a ref the consumer passed (compose, not\n  // discard) — otherwise `ref={registerListElement}` after `{...props}` would silently drop the consumer's.\n  const setListRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      registerListElement(el);\n      if (typeof consumerRef === 'function') consumerRef(el);\n      else if (consumerRef) (consumerRef as { current: HTMLDivElement | null }).current = el;\n    },\n    [registerListElement, consumerRef],\n  );\n  return (\n    <VariantSelectorSwatchContext.Provider value={resolvedSwatch.SwatchContent}>\n      <RadioGroup\n        {...props}\n        ref={setListRef}\n        className={className}\n        aria-labelledby={group.hasTitle ? group.titleId : undefined}\n        aria-label={group.axis.name}\n        value={group.axis.activeValue ?? ''}\n        onValueChange={group.select}\n        data-fs-variant-selector-group-list=\"\"\n        data-fs-variant-selector-group-mode={resolvedSwatch.mode}\n      >\n        {group.visibleOptions.map((option) => (\n          <VariantSelectorOption key={option.value} value={option.value} />\n        ))}\n      </RadioGroup>\n    </VariantSelectorSwatchContext.Provider>\n  );\n}\n\n/** Auto-inferring swatch list: derives the look from the option data (color/image/label, never radio).\n *  Use an explicit sibling list to fix the look instead of inferring it. */\nexport function VariantSelectorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch=\"auto\" {...props} />;\n}\n\n/** Swatch list with text-label swatches. */\nexport function VariantSelectorLabelSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={LABEL_SWATCH} {...props} />;\n}\n\n/** Swatch list with image (thumbnail) swatches. */\nexport function VariantSelectorImageSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={IMAGE_SWATCH} {...props} />;\n}\n\n/** Swatch list with color-chip swatches (degrades per value to image, then label). */\nexport function VariantSelectorColorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={COLOR_SWATCH} {...props} />;\n}\n\n/** Swatch list rendered as a radio-dot list (control circle + dot + label). */\nexport function VariantSelectorRadioSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={RADIO_SWATCH} {...props} />;\n}\n\n/** The \"+N more\" trigger: composing it opts the group into space-based collapse (via `registerOverflow`),\n *  and it renders only while the row overflows, expanding it in place when clicked. Registers in a\n *  layout effect so the group can measure and collapse before the browser paints (no full-row flash). */\nexport function VariantSelectorOverflow({ className, ...props }: VariantSelectorOverflowProps) {\n  const group = useVariantSelectorGroup();\n  const { registerOverflow } = group;\n  useIsomorphicLayoutEffect(() => registerOverflow(), [registerOverflow]);\n  if (!group.overflowing) return null;\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      onClick={group.expand}\n      className={className}\n      data-fs-variant-selector-overflow-trigger=\"\"\n      data-fs-variant-selector-overflow-count={group.hiddenCount}\n    >\n      +{group.hiddenCount} more\n    </button>\n  );\n}\n\nexport function VariantSelectorOption({ value, ImageComponent, className }: Readonly<VariantSelectorOptionProps>) {\n  const group = useVariantSelectorGroup();\n  // The swatch list provides the resolved swatch component; degrade to a text label when an option is\n  // somehow rendered outside a list (it always has a label-shaped fallback rather than an empty body).\n  const SwatchContent = useContext(VariantSelectorSwatchContext) ?? LabelSwatchContent;\n  const option = group.axis.options.find((candidate) => candidate.value === value) ?? null;\n  if (!option) return null;\n\n  const checked = group.axis.activeValue === value;\n  const disabled = !option.available;\n  const Image = ImageComponent ?? group.ImageComponent;\n\n  return (\n    <BaseRadio.Root\n      value={value}\n      disabled={disabled}\n      title={value}\n      className={className}\n      data-fs-variant-selector-option=\"\"\n      data-fs-variant-selector-option-checked={checked ? 'true' : 'false'}\n      data-fs-variant-selector-option-disabled={disabled ? 'true' : 'false'}\n    >\n      {/* Axis-qualified accessible name (e.g. \"Color: Red\"); the visual content below is hidden from\n          assistive tech so the radio is announced once, not duplicated by the label/image. */}\n      <span data-fs-sr-only=\"\" className=\"sr-only\">\n        {group.axis.name}: {value}\n      </span>\n      <SwatchContent swatch={option.swatch} value={value} Image={Image} />\n    </BaseRadio.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const VariantSelector = {\n  Root: VariantSelectorRoot,\n  OptionGroup: VariantSelectorOptionGroup,\n  Title: VariantSelectorGroupTitle,\n  Value: VariantSelectorGroupValue,\n  Swatches: VariantSelectorSwatches,\n  LabelSwatches: VariantSelectorLabelSwatches,\n  ImageSwatches: VariantSelectorImageSwatches,\n  ColorSwatches: VariantSelectorColorSwatches,\n  RadioSwatches: VariantSelectorRadioSwatches,\n  Overflow: VariantSelectorOverflow,\n  Option: VariantSelectorOption,\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,4BAA4B,OAAO,WAAW,cAAc,YAAY;AAM9E,MAAM,WAAW,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB;AA2ID,MAAM,iCAAiC,OAAO,6BAA6B;AAE3E,MAAM,iCAAiC,cAErC,8BAA8B;;AAGhC,MAAa,yBAAyB;AAEtC,MAAa,8BAA8B,cAAuD,IAAI;;;AAItG,MAAM,+BAA+B,cAA4D,IAAI;AAErG,SAAS,qBAAkD;CACzD,MAAM,MAAM,WAAW,8BAA8B;CACrD,IAAI,QAAQ,gCACV,MAAM,IAAI,MAAM,qEAAqE;CAEvF,OAAO;AACT;AAEA,SAAS,0BAA4D;CACnE,MAAM,MAAM,WAAW,2BAA2B;CAClD,IAAI,QAAQ,MACV,MAAM,IAAI,MACR,qHACF;CAEF,OAAO;AACT;AAeA,SAAS,eAAe,MAAsC;CAC5D,OAAO,KAAK,SAAS,MAAM,KAAK,EAAE,WAAW;EAC3C,MAAM,UAAkC,CAAC;EACzC,KAAK,MAAM,YAAY,KAAK,iBAC1B,QAAQ,SAAS,QAAQ,SAAS;EAEpC,MAAM,eAAe,KAAK,OAAO,MAAM,EAAE,EAAE,QAAQ;EACnD,OAAO;GACL,IAAI,KAAK;GACT,MAAM,KAAK;GACX,KAAK,KAAK;GACV,kBAAkB,KAAK;GACvB;GACA,OAAO,eAAe;IAAE,KAAK,aAAa;IAAK,KAAK,aAAa;GAAQ,IAAI;EAC/E;CACF,CAAC;AACH;;;;;;;AAQA,SAAS,eACP,UACA,kBACA,UACA,OACuB;CACvB,MAAM,SAAS;EAAE,GAAG;GAAmB,WAAW;CAAM;CACxD,MAAM,QAAQ,SAAS,MAAM,YAC3B,OAAO,QAAQ,MAAM,CAAC,CAAC,OAAO,CAAC,MAAM,cAAc,QAAQ,QAAQ,UAAU,QAAQ,CACvF;CACA,IAAI,OAAO,OAAO;CAClB,OAAO,SAAS,MAAM,YAAY,QAAQ,QAAQ,cAAc,KAAK,KAAK;AAC5E;AAEA,SAAS,WACP,MACA,UACA,kBACuB;CACvB,OAAO,KAAK,QAAQ,KAAK,YAAY;EACnC,MAAM,OAAO;EACb,aAAa,iBAAiB,OAAO,SAAS;EAC9C,SAAS,OAAO,OAAO,KAAK,UAAU;GACpC,MAAM,WAAW,eAAe,UAAU,kBAAkB,OAAO,MAAM,KAAK;GAC9E,MAAM,SAA4C,UAAU,QACxD;IAAE,UAAU,SAAS,MAAM;IAAK,KAAK,SAAS,MAAM,OAAO,KAAA;GAAU,IACrE,KAAA;GACJ,OAAO;IACL;IACA,WAAW,UAAU,oBAAoB;IACzC,WAAW,UAAU,MAAM;IAC3B;GACF;EACF,CAAC;CACH,EAAE;AACJ;;;;;;AAOA,SAAgB,iBAAiB,SAA2D;CAC1F,IAAI,QAAQ,SAAS,KAAK,QAAQ,OAAO,WAAW,QAAQ,OAAO,QAAQ,QAAQ,CAAC,GAClF,OAAO;CAGT,MAAM,YAAY,QAAQ,KAAK,WAAW,OAAO,QAAQ,QAAQ,CAAC,CAAC,QAAQ,QAAuB,QAAQ,GAAG,CAAC;CAC9G,IAAI,UAAU,WAAW,GAAG,OAAO;CAEnC,MAAM,gBAAgB,UAAU;CAChC,MAAM,gBAAgB,UAAU,MAAM,QAAQ,QAAQ,aAAa;CACnE,IAAI,kBAAkB,KAAA,KAAa,eAAe,OAAO;CAEzD,OAAO;AACT;AAEA,SAAS,oBAAoB,EAAE,KAAK,OAA+C;CAEjF,OAAO,oBAAC,OAAD;EAAU;EAAU;EAAK,yCAAsC;CAAI,CAAA;AAC5E;;;AAgBA,SAAS,mBAAmB,EAAE,SAA6B;CACzD,OACE,oBAAC,QAAD;EAAM,yCAAsC;EAAG,eAAY;EACxD,UAAA;CACG,CAAA;AAEV;;AAGA,SAAS,mBAAmB,EAAE,QAAQ,OAAO,SAA6B;CACxE,IAAI,QAAQ,UACV,OACE,oBAAC,QAAD;EAAM,eAAY;EAChB,UAAA,oBAAC,OAAD;GAAO,KAAK,OAAO;GAAU,KAAK,OAAO,OAAO;EAAQ,CAAA;CACpD,CAAA;CAGV,OAAO,oBAAC,oBAAD;EAA4B;EAAe;EAAc;CAAQ,CAAA;AAC1E;;;;;;;AAQA,SAAS,mBAAmB,EAAE,QAAQ,OAAO,SAA6B;CACxE,IAAI,QAAQ,UACV,OACE,oBAAC,QAAD;EAAM,eAAY;EAChB,UAAA,oBAAC,OAAD;GACE,yCAAsC;GACtC,OAAO;GACP,OAAO,EAAE,gDAAgD,OAAO,SAAS;EAC1E,CAAA;CACG,CAAA;CAGV,OAAO,oBAAC,oBAAD;EAA4B;EAAe;EAAc;CAAQ,CAAA;AAC1E;;;;;;;;AASA,SAAS,mBAAmB,EAAE,SAA6B;CACzD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,2CAAwC;EAAG,eAAY;EAC3D,UAAA,oBAACA,MAAU,WAAX,EAAqB,6CAA0C,GAAI,CAAA;CAC/D,CAAA,GACN,oBAAC,QAAD;EAAM,yCAAsC;EAAG,eAAY;EACxD,UAAA;CACG,CAAA,CACN,EAAA,CAAA;AAEN;AAaA,MAAM,eAA2B;CAAE,MAAM;CAAS,eAAe;AAAmB;AACpF,MAAM,eAA2B;CAAE,MAAM;CAAS,eAAe;AAAmB;AACpF,MAAM,eAA2B;CAAE,MAAM;CAAS,eAAe;AAAmB;AACpF,MAAM,eAA2B;CAAE,MAAM;CAAS,eAAe;AAAmB;;;;;;;AAQpF,MAAM,0BAAmE;CACvE,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT;;;;;;;;;AAcA,SAAS,kBAAkB,MAAsB;CAC/C,OAAO,KACJ,UAAU,KAAK,CAAC,CAChB,WAAW,oBAAoB,EAAE,CAAC,CAClC,YAAY,CAAC,CACb,KAAK,CAAC,CACN,WAAW,QAAQ,GAAG;AAC3B;;;;;;AAOA,SAAS,eAAe,MAA6B,YAAgD;CACnG,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAK,SAAS,UAAU;CAC1D,IAAI,OAAO,OAAO;CAClB,MAAM,SAAS,kBAAkB,UAAU;CAC3C,MAAM,UAAU,KAAK,QAAQ,SAAS,kBAAkB,KAAK,IAAI,MAAM,MAAM;CAC7E,OAAO,QAAQ,WAAW,IAAK,QAAQ,MAAM,OAAQ;AACvD;;;;;;AAOA,SAAS,YACP,MACA,YACA,aAC4B;CAC5B,IAAI,eAAe,KAAA,GAAW;EAC5B,MAAM,SAAS,eAAe,MAAM,UAAU;EAC9C,IAAI,QAAQ,OAAO;CACrB;CACA,IAAI,gBAAgB,KAAA,KAAa,OAAO,UAAU,WAAW,KAAK,eAAe,KAAK,cAAc,KAAK,QACvG,OAAO,KAAK,gBAAgB;CAE9B,OAAO;AACT;;;;;AAMA,SAAS,kBAAkB,QAA6B,MAA8C;CACpG,IAAI,WAAW,QAAQ,OAAO;CAC9B,OAAO,OAAO,wBAAwB,iBAAiB,KAAK,OAAO,KAAK;AAC1E;;;;;;;;;;AAWA,SAAS,kBACP,MACA,KACA,UAC4F;CAC5F,IAAI,QAAQ,QAAQ,OAAO,KAAK,YAAY,KAAK,QAAQ,UAAU,KACjE,OAAO;EAAE,gBAAgB,KAAK;EAAS,aAAa;EAAG,aAAa;CAAM;CAE5E,MAAM,OAAO,KAAK,QAAQ,MAAM,GAAG,GAAG;CAKtC,MAAM,eAHJ,KAAK,gBAAgB,QACrB,CAAC,KAAK,MAAM,WAAW,OAAO,UAAU,KAAK,WAAW,KACxD,KAAK,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,WAAW,IAC7B,KAAK,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,WAAW,IAAI,KAAA;CAEvG,MAAM,iBAAiB,eAAe,CAAC,GAAG,KAAK,MAAM,GAAG,MAAM,CAAC,GAAG,YAAY,IAAI;CAClF,MAAM,cAAc,KAAK,QAAQ,SAAS,eAAe;CACzD,OAAO;EAAE;EAAgB;EAAa,aAAa,cAAc;CAAE;AACrE;;;;;;;;;;AAeA,SAAgB,oBAAoB,cAAwB,KAAa,WAAmB,eAAe,GAAW;CACpH,MAAM,QAAQ,aAAa;CAC3B,IAAI,UAAU,GAAG,OAAO;CAGxB,IAAI,OAAO;CACX,KAAK,MAAM,KAAK,cAAc,QAAQ;CACtC,QAAQ,OAAO,QAAQ;CACvB,IAAI,QAAQ,WAAW,OAAO;CAG9B,MAAM,SAAS,eAAe,IAAI,YAAY,eAAe,MAAM;CACnE,IAAI,OAAO;CACX,IAAI,QAAQ;CACZ,KAAK,MAAM,KAAK,cAAc;EAC5B,MAAM,OAAO,KAAK,QAAQ,IAAI,MAAM;EACpC,IAAI,OAAO,OAAO,QAAQ;EAC1B,QAAQ;EACR;CACF;CACA,OAAO,KAAK,IAAI,GAAG,KAAK;AAC1B;;;;;AAMA,SAAS,eAAe,IAAqD;CAC3E,MAAM,QAAQ,iBAAiB,EAAE;CACjC,MAAM,MAAM,UAAkB;EAC5B,MAAM,SAAS,OAAO,WAAW,KAAK;EACtC,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;CAC5C;CAEA,OAAO;EAAE,WADS,GAAG,cAAc,GAAG,MAAM,WAAW,IAAI,GAAG,MAAM,YAAY;EAC5D,KAAK,GAAG,MAAM,SAAS;CAAE;AAC/C;;;;;;;;;;;;;;AAeA,SAAS,wBAAwB,EAC/B,QACA,aACA,aACA,SACA,uBAOgB;CAChB,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,YAAY,OAAiB,CAAC,CAAC;CACrC,MAAM,kBAAkB,OAAO,CAAC;CAChC,MAAM,aAAa,aAAyB,CAAC,CAAC;CAE9C,gCAAgC;EAC9B,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,UAAU,OAAO,mBAAmB,aAAa;GAChF,UAAU,UAAU,CAAC;GACrB,gBAAgB,UAAU;GAE1B,WAAW,gBAAgB,CAAC;GAC5B,SAAS,IAAI;GACb;EACF;EAKA,UAAU,UAAU,CAAC;EACrB,gBAAgB,UAAU;EAE1B,MAAM,gBAAgB;GACpB,MAAM,EAAE,WAAW,QAAQ,eAAe,MAAM;GAChD,IAAI,aAAa,GAAG;IAClB,SAAS,IAAI;IACb;GACF;GACA,MAAM,YAAY,MAAM,KAAK,OAAO,iBAA8B,mCAAmC,CAAC;GAEtG,IAAI,cAAc,KAAK,UAAU,WAAW,aAC1C,UAAU,UAAU,UAAU,KAAK,OAAO,GAAG,WAAW;GAE1D,IAAI,qBAAqB;IACvB,MAAM,YAAY,OAAO,eAAe,cACtC,6CACF;IACA,gBAAgB,UAAU,KAAK,IAAI,gBAAgB,SAAS,WAAW,eAAe,CAAC;GACzF;GAEA,MAAM,SAAS,UAAU;GACzB,IAAI,OAAO,WAAW,GAAG;IACvB,SAAS,IAAI;IACb;GACF;GACA,MAAM,OAAO,oBAAoB,QAAQ,KAAK,WAAW,gBAAgB,OAAO;GAChF,UAAU,SAAU,SAAS,OAAO,OAAO,IAAK;EAClD;EAEA,WAAW,UAAU;EACrB,QAAQ;EAER,MAAM,WAAW,IAAI,qBAAqB,QAAQ,CAAC;EACnD,SAAS,QAAQ,MAAM;EACvB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAQ;EAAa;EAAa;EAAS;CAAmB,CAAC;CAQnE,gCAAgC;EAC9B,WAAW,QAAQ;CACrB,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT;AAIA,MAAM,uCAAuB,IAAI,IAAY;AAE7C,SAAS,mBACP,YACA,aACA,MACM;CAGN,IAAI,QAAQ,IAAI,aAAa,cAAc;CAC3C,MAAM,YAAY,KAAK,KAAK,SAAS,KAAK,IAAI;CAC9C,MAAM,MAAM,GAAG,cAAc,GAAG,QAAQ,eAAe,GAAG,QAAQ,UAAU,KAAK,GAAQ;CACzF,IAAI,qBAAqB,IAAI,GAAG,GAAG;CACnC,qBAAqB,IAAI,GAAG;CAC5B,MAAM,OAAO,UAAU,SAAS,IAAI,UAAU,KAAK,MAAM,UAAU,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI;CACtG,QAAQ,KACN,0DACE,eAAe,KAAA,IAAY,eAAe,gBAAgB,eAAe,WAAW,GACrF,iCAAiC,KAAK,0LAGzC;AACF;AAMA,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAW;CAC1D,QAAQ,EACN,mBAAmB;EAAE,MAAM;EAAU,OAAO;CAAsB,EACpE;CACA,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,uCAAuC,gBAAiD;CACnG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAW;CAC9D,QAAQ;EACN,YAAY;GAAE,MAAM;GAAU,OAAO;EAAgD;EACrF,aAAa;GAAE,MAAM;GAAU,OAAO;EAAuD;EAC7F,qBAAqB;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAA0C;CAC3G;CACA,iBAAiB;CACjB,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,sCAAsC,gBAAgD;CACjG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAW;CAC7D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,OAAO;CAAyD,EAC3F;CACA,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,sCAAsC,gBAAgD;CACjG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAW;CAC7D,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA2B,UAAU;CAAW;CACjE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,yCAAyC,gBAA8C;CAClG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,yCAAyC,gBAA8C;CAClG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,yCAAyC,gBAA8C;CAClG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,yCAAyC,gBAA8C;CAClG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAA4B,UAAU;CAAW;CAClE,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAED,MAAa,kCAAkC,gBAA4C;CACzF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAW;CACxD,QAAQ,CAAC;CACT,iBAAiB;CACjB,WACE;AACJ,CAAC;AAMD,SAAgB,oBAAoB,EAClC,OAAO,WACP,mBACA,WACA,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQ,gBAAgB,SAAS;CACvC,MAAM,qBAAqB,eAAe,kBAAkB;CAM5D,MAAM,kBAHqB,sBAAsB,oBAAoB,OAAO,MAAM,IAGzC,KAAK,qBAAqB;CAEnE,IAAI,eAA4C;CAChD,IAAI,OAAO;EACT,MAAM,YAAY,MAAM;EACxB,MAAM,WAAW,eAAe,KAAK;EACrC,MAAM,kBAAkB,SAAS,MAAM,YAAY,QAAQ,OAAO,eAAe,KAAK,SAAS,MAAM;EACrG,MAAM,mBAAmB,iBAAiB,WAAW,CAAC;EAGtD,eAAe;GACb,MAHW,WAAW,OAAO,UAAU,gBAGpC;GACH,mBAAmB,iBAAiB,MAAM;GAC1C,SAAS,UAAU,UAAU;IAC3B,MAAM,WAAW,eAAe,UAAU,kBAAkB,UAAU,KAAK;IAC3E,IAAI,UAAU,mBAAmB;KAAE;KAAW,WAAW,SAAS;IAAG,CAAC;GACxE;EACF;CACF;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;EACrC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAkB;GAAW,4BAAyB;GAC5D;EACE,CAAA;CACyB,CAAA;AAEpC;;;;AAKA,SAAgB,2BAA2B,EACzC,YACA,aACA,sBAAsB,OACtB,iBAAiB,qBACjB,WACA,UACA,GAAG,SAC+B;CAClC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC;CACpD,MAAM,CAAC,QAAQ,aAAa,SAA6B,IAAI;CAI7D,MAAM,UAAU,MAAM;CACtB,MAAM,MAAM,mBAAmB;CAC/B,MAAM,OAAO,MAAM,YAAY,IAAI,MAAM,YAAY,WAAW,IAAI;CAKpE,MAAM,gBAAgB,kBAAkB;EACtC,eAAe,UAAU,QAAQ,CAAC;EAClC,aAAa,eAAe,UAAU,QAAQ,CAAC;CACjD,GAAG,CAAC,CAAC;CACL,MAAM,WAAW,aAAa;CAI9B,MAAM,mBAAmB,kBAAkB;EACzC,kBAAkB,UAAU,QAAQ,CAAC;EACrC,aAAa,kBAAkB,UAAU,QAAQ,CAAC;CACpD,GAAG,CAAC,CAAC;CACL,MAAM,cAAc,gBAAgB;CAGpC,MAAM,sBAAsB,aAAa,OAA2B,UAAU,EAAE,GAAG,CAAC,CAAC;CAIrF,MAAM,uBAAuB,wBAAwB;EACnD;EACA,aAAa,MAAM,QAAQ,UAAU;EACrC;EACA,SAAS,eAAe,CAAC;EACzB;CACF,CAAC;CACD,MAAM,eAAe,YAAY,CAAC,cAAc,OAAO;CAEvD,MAAM,oBAAoB,cAAuD;EAC/E,IAAI,CAAC,OAAO,CAAC,MAAM,OAAO;EAC1B,MAAM,EAAE,gBAAgB,aAAa,gBAAgB,kBAAkB,MAAM,cAAc,QAAQ;EACnG,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc,YAAY,IAAI;GAC9B,SAAS,UAAkB,IAAI,OAAO,KAAK,MAAM,KAAK;GACtD;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,mBAAmB;EACtB,IAAI,KAAK,mBAAmB,YAAY,aAAa,IAAI,IAAI;EAC7D,OAAO;CACT;CAEA,OACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;EAC3C,UAAA,oBAAC,OAAD;GACE,GAAI;GACO;GACX,kCAA+B;GAC/B,2CAAyC,kBAAkB,cAAc,SAAS;GAEjF;EACE,CAAA;CAC+B,CAAA;AAE1C;;;;;AAMA,SAAgB,0BAA0B,EAAE,OAAO,WAAW,GAAG,SAAyC;CACxG,MAAM,EAAE,MAAM,SAAS,kBAAkB,wBAAwB;CAEjE,gBAAgB,cAAc,GAAG,CAAC,aAAa,CAAC;CAChD,OACE,oBAAC,QAAD;EAAM,GAAI;EAAO,IAAI;EAAoB;EAAW,wCAAqC;EACtF,UAAA,SAAS,KAAK;CACX,CAAA;AAEV;;;AAIA,SAAgB,0BAA0B,EAAE,WAAW,GAAG,SAAyC;CACjG,MAAM,EAAE,SAAS,wBAAwB;CACzC,OACE,oBAAC,QAAD;EAAM,GAAI;EAAO,eAAY;EAAkB;EAAW,wCAAqC;EAC5F,UAAA,KAAK,eAAe;CACjB,CAAA;AAEV;;;;AAKA,SAAS,4BAA4B,EACnC,QACA,WACA,KAAK,aACL,GAAG,SAC8D;CACjE,MAAM,QAAQ,wBAAwB;CACtC,MAAM,EAAE,wBAAwB;CAChC,MAAM,iBAAiB,kBAAkB,QAAQ,MAAM,IAAI;CAG3D,MAAM,aAAa,aAChB,OAA8B;EAC7B,oBAAoB,EAAE;EACtB,IAAI,OAAO,gBAAgB,YAAY,YAAY,EAAE;OAChD,IAAI,aAAa,YAAoD,UAAU;CACtF,GACA,CAAC,qBAAqB,WAAW,CACnC;CACA,OACE,oBAAC,6BAA6B,UAA9B;EAAuC,OAAO,eAAe;EAC3D,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,KAAK;GACM;GACX,mBAAiB,MAAM,WAAW,MAAM,UAAU,KAAA;GAClD,cAAY,MAAM,KAAK;GACvB,OAAO,MAAM,KAAK,eAAe;GACjC,eAAe,MAAM;GACrB,uCAAoC;GACpC,uCAAqC,eAAe;GAEnD,UAAA,MAAM,eAAe,KAAK,WACzB,oBAAC,uBAAD,EAA0C,OAAO,OAAO,MAAQ,GAApC,OAAO,KAA6B,CACjE;EACS,CAAA;CACyB,CAAA;AAE3C;;;AAIA,SAAgB,wBAAwB,OAAqC;CAC3E,OAAO,oBAAC,6BAAD;EAA6B,QAAO;EAAO,GAAI;CAAQ,CAAA;AAChE;;AAGA,SAAgB,6BAA6B,OAAqC;CAChF,OAAO,oBAAC,6BAAD;EAA6B,QAAQ;EAAc,GAAI;CAAQ,CAAA;AACxE;;AAGA,SAAgB,6BAA6B,OAAqC;CAChF,OAAO,oBAAC,6BAAD;EAA6B,QAAQ;EAAc,GAAI;CAAQ,CAAA;AACxE;;AAGA,SAAgB,6BAA6B,OAAqC;CAChF,OAAO,oBAAC,6BAAD;EAA6B,QAAQ;EAAc,GAAI;CAAQ,CAAA;AACxE;;AAGA,SAAgB,6BAA6B,OAAqC;CAChF,OAAO,oBAAC,6BAAD;EAA6B,QAAQ;EAAc,GAAI;CAAQ,CAAA;AACxE;;;;AAKA,SAAgB,wBAAwB,EAAE,WAAW,GAAG,SAAuC;CAC7F,MAAM,QAAQ,wBAAwB;CACtC,MAAM,EAAE,qBAAqB;CAC7B,gCAAgC,iBAAiB,GAAG,CAAC,gBAAgB,CAAC;CACtE,IAAI,CAAC,MAAM,aAAa,OAAO;CAC/B,OACE,qBAAC,UAAD;EACE,GAAI;EACJ,MAAK;EACL,SAAS,MAAM;EACJ;EACX,6CAA0C;EAC1C,2CAAyC,MAAM;EANjD,UAAA;GAOC;GACG,MAAM;GAAY;EACd;;AAEZ;AAEA,SAAgB,sBAAsB,EAAE,OAAO,gBAAgB,aAAmD;CAChH,MAAM,QAAQ,wBAAwB;CAGtC,MAAM,gBAAgB,WAAW,4BAA4B,KAAK;CAClE,MAAM,SAAS,MAAM,KAAK,QAAQ,MAAM,cAAc,UAAU,UAAU,KAAK,KAAK;CACpF,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,UAAU,MAAM,KAAK,gBAAgB;CAC3C,MAAM,WAAW,CAAC,OAAO;CACzB,MAAM,QAAQ,kBAAkB,MAAM;CAEtC,OACE,qBAACA,MAAU,MAAX;EACS;EACG;EACV,OAAO;EACI;EACX,mCAAgC;EAChC,2CAAyC,UAAU,SAAS;EAC5D,4CAA0C,WAAW,SAAS;EAPhE,UAAA,CAWE,qBAAC,QAAD;GAAM,mBAAgB;GAAG,WAAU;GAAnC,UAAA;IACG,MAAM,KAAK;IAAK;IAAG;GAChB;EACN,CAAA,GAAA,oBAAC,eAAD;GAAe,QAAQ,OAAO;GAAe;GAAc;EAAQ,CAAA,CACrD;;AAEpB;AAMA,MAAa,kBAAkB;CAC7B,MAAM;CACN,aAAa;CACb,OAAO;CACP,OAAO;CACP,UAAU;CACV,eAAe;CACf,eAAe;CACf,eAAe;CACf,eAAe;CACf,UAAU;CACV,QAAQ;AACV"}
+{"version":3,"file":"variant-selector.js","names":["BaseRadio"],"sources":["../../../src/matter/variant-selector/variant-selector.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  createContext,\n  type FunctionComponent,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { RadioGroup } from '../../particles/radio/radio.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantSelectorDataFragment } from '../../sdk/generated/graphql.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\n\n// `useLayoutEffect` on the client, `useEffect` on the server: keeps the pre-paint (no-flash) measurement\n// and overflow registration on the client while silencing React 19's \"useLayoutEffect does nothing on the\n// server\" SSR warning. Mirrors the useEffect-for-SSR convention in `sdk/data/page-reactive-data-root.tsx`.\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment VariantSelectorData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      options {\n        name\n        values\n      }\n      variants(first: 50) {\n        edges {\n          node {\n            __typename\n            id\n            name\n            sku\n            availableForSale\n            selectedOptions {\n              name\n              value\n            }\n            images(first: 1) {\n              edges {\n                node {\n                  url\n                  altText\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<VariantSelectorDataFragment['productBySlug']>;\n\n/** The swatch kinds a swatch list can render. Each maps to a dedicated swatch-content component and to a\n *  `data-fs-variant-selector-group-mode` value; `inferDisplayMode` resolves one for the auto swatch list\n *  (`VariantSelectorSwatches`), and the explicit lists (`VariantSelectorColorSwatches`, …) fix one directly. */\ntype ResolvedDisplayMode = 'label' | 'image' | 'color' | 'radio';\n\n/** Per-value swatch media. `imageUrl`/`alt` are derived from the matching variant's primary image\n *  (`Variant.images`) so the `image`/`auto` display modes work from live data. `hexColor` has no\n *  Core Graph source (`ProductOption.values: [String!]!`) and is populated only when a host injects\n *  it through context — see specs/sku-selector.md gap row 2. */\nexport type VariantSelectorSwatch = {\n  hexColor?: string;\n  imageUrl?: string;\n  alt?: string;\n};\n\nexport type VariantSelectorOptionData = {\n  value: string;\n  available: boolean;\n  variantId: string | null;\n  swatch?: VariantSelectorSwatch;\n};\n\nexport type VariantSelectorAxis = {\n  name: string;\n  activeValue: string | null;\n  options: VariantSelectorOptionData[];\n};\n\nexport type VariantSelectorContextValue = {\n  axes: VariantSelectorAxis[];\n  selectedVariantId: string | null;\n  select: (axisName: string, value: string) => void;\n} | null;\n\n/** Provided by `VariantSelectorOptionGroup` to its composed parts (title, swatch list, overflow, and the\n *  options the list renders). The group owns the axis binding and the collapse/expand state; the parts read\n *  what they need from here, so the author can place them freely — e.g. the title in an accordion header\n *  and the swatch list in its panel. */\ntype VariantSelectorGroupContextValue = {\n  axis: VariantSelectorAxis;\n  /** Stable id shared by the title (`id`) and the swatch list (`aria-labelledby`) to label the radiogroup. */\n  titleId: string;\n  /** Whether a `VariantSelectorGroupTitle` is composed in this group. The swatch list points its\n   *  `aria-labelledby` at the title only when one exists; otherwise it relies on the `aria-label`\n   *  axis-name floor, so the radiogroup is never labelled by a dangling idref. */\n  hasTitle: boolean;\n  /** Registers a mounted `VariantSelectorGroupTitle`, returning an unregister for cleanup. Ref-counted so\n   *  the title can be placed freely (e.g. an accordion header) and still flip `hasTitle`. */\n  registerTitle: () => () => void;\n  /** Registers a mounted `VariantSelectorOverflow`, returning an unregister for cleanup. Ref-counted like\n   *  `registerTitle`, so the trigger can be placed freely and still flip `hasOverflow`. Space-based collapse\n   *  runs only while a trigger is composed, so hidden swatches always have a reveal affordance. */\n  registerOverflow: () => () => void;\n  /** Whether a `VariantSelectorOverflow` is composed in this group — gates the measured collapse. */\n  hasOverflow: boolean;\n  /** Ref callback the swatch list hands its container element to, so the group can measure the row width. */\n  registerListElement: (el: HTMLElement | null) => void;\n  visibleOptions: VariantSelectorOptionData[];\n  hiddenCount: number;\n  overflowing: boolean;\n  expand: () => void;\n  /** Activates `value` on this group's axis. */\n  select: (value: string) => void;\n  ImageComponent: FunctionComponent<{ src: string; alt: string }>;\n};\n\nexport type VariantSelectorRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n  /** Pre-selects the variant the page is showing (the viewed SKU) before the shopper interacts.\n   *  `productBySlug` resolves to the product group, so the page supplies the viewed variant id here\n   *  — mirroring `ProductGalleryRoot.selectedVariantId`. The published `selectedVariantVar` wins\n   *  once a swatch is activated; this prop is only the initial fallback. */\n  selectedVariantId?: string;\n};\n\nexport type VariantSelectorOptionGroupProps = ComponentPropsWithRef<'div'> & {\n  /** Catalog `ProductOption.name` this group binds (e.g. `\"Color\"`). Matched case/accent/whitespace-\n   *  insensitively but otherwise exactly — the runtime does no plural or translation guessing. Use this\n   *  only when the exact catalog name is known; otherwise bind by `optionIndex`. When both are given, a\n   *  successful name match wins and `optionIndex` is the fallback. */\n  optionName?: string;\n  /** Zero-based axis position, in the order the product defines its options. The preferred binding for\n   *  generated schemas: the author places one group per axis in visual top-to-bottom order, which lines\n   *  up with the product's option order — reliable even when the on-image label differs from the catalog\n   *  name. Used when `optionName` is absent or does not match any axis. */\n  optionIndex?: number;\n  /** Reserve space for the `VariantSelectorOverflow` trigger in the fit calculation. Off by default: the\n   *  trigger is a sibling of the swatch list (its own space), so the swatches use the full row width. Turn\n   *  it on only when the trigger is styled inline at the end of the swatch row (content-sized) so it stays\n   *  on the line — its measured width is then subtracted from the space available to the swatches. */\n  reserveTriggerSpace?: boolean;\n  /** Image renderer used by image/color swatches; defaults to a plain `<img>`. Hosts inject e.g. next/image. */\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n/** Title for a `VariantSelectorOptionGroup`: renders the axis name (or your `label`). Reads the axis from\n *  group context, so it can be placed anywhere inside the group (e.g. an accordion header). Compose a\n *  `VariantSelectorGroupValue` beside it to echo the live selection — the separator, weight, and spacing\n *  between the two are brand styling on the `data-fs-*` hooks, not baked into this component. */\nexport type VariantSelectorGroupTitleProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n  /** Overrides the displayed axis name. Defaults to the catalog axis name (e.g. `\"Color\"`). Use it to match\n   *  a design's prompt copy such as `\"Selecione a cor\"`; it never changes which axis the group binds. Any\n   *  separator (e.g. a trailing colon) is styling — add it to the title's `data-fs-*` hook, not the text. */\n  label?: string;\n};\n\n/** The live selected value of a `VariantSelectorOptionGroup`, as a standalone placeable part (e.g. beside\n *  the title inside a container). Decorative/`aria-hidden`: the selection is already announced per option,\n *  so echoing it here would make the group's accessible name churn on every change. */\nexport type VariantSelectorGroupValueProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n/** The swatch list for a `VariantSelectorOptionGroup`: a radiogroup of the axis' option swatches,\n *  auto-rendered from the product data. The component chooses the swatch look — `VariantSelectorSwatches`\n *  infers it, the explicit variants fix it — so the kind is selected by composition, not a prop. */\nexport type VariantSelectorSwatchesProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'defaultValue'>;\n\n/** The \"+N more\" trigger for a `VariantSelectorOptionGroup`: composing it opts the group into measured,\n *  space-based collapse, and it renders only while the row actually overflows, expanding it in place.\n *  Reads the hidden count and expand action from group context. */\nexport type VariantSelectorOverflowProps = Omit<ComponentPropsWithRef<'button'>, 'children'>;\n\nexport type VariantSelectorOptionProps = {\n  value: string;\n  className?: string;\n  ImageComponent?: FunctionComponent<{ src: string; alt: string }>;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst VARIANT_SELECTOR_CONTEXT_UNSET = Symbol('VariantSelectorContextUnset');\n\nconst VariantSelectorContextInternal = createContext<\n  VariantSelectorContextValue | typeof VARIANT_SELECTOR_CONTEXT_UNSET\n>(VARIANT_SELECTOR_CONTEXT_UNSET);\n\n/** Exposed for advanced composition and tests that mount group/option in isolation. */\nexport const VariantSelectorContext = VariantSelectorContextInternal as React.Context<VariantSelectorContextValue>;\n\nexport const VariantSelectorGroupContext = createContext<VariantSelectorGroupContextValue | null>(null);\n\n/** Carries the swatch-content component the active swatch list chose, read by `VariantSelectorOption`.\n *  Null when an option renders outside a swatch list, in which case the option degrades to a text label. */\nconst VariantSelectorSwatchContext = createContext<FunctionComponent<SwatchContentProps> | null>(null);\n\nfunction useVariantSelector(): VariantSelectorContextValue {\n  const ctx = useContext(VariantSelectorContextInternal);\n  if (ctx === VARIANT_SELECTOR_CONTEXT_UNSET) {\n    throw new Error('VariantSelector components must be used inside VariantSelectorRoot.');\n  }\n  return ctx;\n}\n\nfunction useVariantSelectorGroup(): VariantSelectorGroupContextValue {\n  const ctx = useContext(VariantSelectorGroupContext);\n  if (ctx === null) {\n    throw new Error(\n      'VariantSelector group parts (Title, swatch lists, Overflow, Option) must be used inside VariantSelectorOptionGroup.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Derivation\n// ---------------------------------------------------------------------------\n\ntype DerivedVariant = {\n  id: string;\n  name: string;\n  sku: string;\n  availableForSale: boolean;\n  options: Record<string, string>;\n  image: { url: string; alt: string | null } | null;\n};\n\nfunction deriveVariants(data: ProductSlice): DerivedVariant[] {\n  return data.variants.edges.map(({ node }) => {\n    const options: Record<string, string> = {};\n    for (const selected of node.selectedOptions) {\n      options[selected.name] = selected.value;\n    }\n    const primaryImage = node.images.edges[0]?.node ?? null;\n    return {\n      id: node.id,\n      name: node.name,\n      sku: node.sku,\n      availableForSale: node.availableForSale,\n      options,\n      image: primaryImage ? { url: primaryImage.url, alt: primaryImage.altText } : null,\n    };\n  });\n}\n\n/**\n * Resolve the variant activated by setting `axisName` to `value` while keeping the current\n * selection on the other axes. Mirrors the legacy `getSkuSlug` dominant-axis fallback: an exact\n * match across every current selection wins; otherwise the first variant carrying `value` on the\n * activated axis is used. String equality keeps `Size-7` distinct from `Size-7.5`.\n */\nfunction resolveVariant(\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n  axisName: string,\n  value: string,\n): DerivedVariant | null {\n  const target = { ...currentSelection, [axisName]: value };\n  const exact = variants.find((variant) =>\n    Object.entries(target).every(([name, selected]) => variant.options[name] === selected),\n  );\n  if (exact) return exact;\n  return variants.find((variant) => variant.options[axisName] === value) ?? null;\n}\n\nfunction deriveAxes(\n  data: ProductSlice,\n  variants: DerivedVariant[],\n  currentSelection: Record<string, string>,\n): VariantSelectorAxis[] {\n  return data.options.map((option) => ({\n    name: option.name,\n    activeValue: currentSelection[option.name] ?? null,\n    options: option.values.map((value) => {\n      const resolved = resolveVariant(variants, currentSelection, option.name, value);\n      const swatch: VariantSelectorSwatch | undefined = resolved?.image\n        ? { imageUrl: resolved.image.url, alt: resolved.image.alt ?? undefined }\n        : undefined;\n      return {\n        value,\n        available: resolved?.availableForSale ?? false,\n        variantId: resolved?.id ?? null,\n        swatch,\n      };\n    }),\n  }));\n}\n\n/**\n * Swatch inference for the auto swatch list `VariantSelectorSwatches` (legacy `useDefineVariant`): `color`\n * when every option carries a `hexColor`; `image` when a single option has an image, or when image sources\n * differ across options; `label` otherwise. Never returns `radio` — that look is explicit only.\n */\nexport function inferDisplayMode(options: VariantSelectorOptionData[]): ResolvedDisplayMode {\n  if (options.length > 0 && options.every((option) => Boolean(option.swatch?.hexColor))) {\n    return 'color';\n  }\n\n  const imageUrls = options.map((option) => option.swatch?.imageUrl).filter((url): url is string => Boolean(url));\n  if (imageUrls.length === 1) return 'image';\n\n  const firstImageUrl = imageUrls[0];\n  const sourcesDiffer = imageUrls.some((url) => url !== firstImageUrl);\n  if (firstImageUrl !== undefined && sourcesDiffer) return 'image';\n\n  return 'label';\n}\n\nfunction DefaultVariantImage({ src, alt }: Readonly<{ src: string; alt: string }>) {\n  // biome-ignore lint/performance/noImgElement: default swatch fallback; production hosts inject ImageComponent (e.g. next/image).\n  return <img src={src} alt={alt} data-fs-variant-selector-option-image=\"\" />;\n}\n\n/**\n * Props shared by every swatch-content component. Each component renders the decorative (aria-hidden)\n * body of one option — the accessible name lives in the sibling sr-only span owned by the option shell,\n * so everything here is purely visual. Shape (square/circle/pill) and the selected-state highlight are\n * owned by styling, never by this code.\n */\ntype SwatchContentProps = Readonly<{\n  swatch: VariantSelectorSwatch | undefined;\n  value: string;\n  Image: FunctionComponent<{ src: string; alt: string }>;\n}>;\n\n/** Plain text body: the value label, hooked as `data-fs-variant-selector-option-label` so an option's\n *  value text is styleable through the same selector everywhere (matching the radio swatch's label). */\nfunction LabelSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n      {value}\n    </span>\n  );\n}\n\n/** Image body: the variant thumbnail, degrading to the value label when no image source is present. */\nfunction ImageSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.imageUrl) {\n    return (\n      <span aria-hidden=\"true\">\n        <Image src={swatch.imageUrl} alt={swatch.alt ?? value} />\n      </span>\n    );\n  }\n  return <LabelSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Color body: a color chip, degrading gracefully when the value lacks a hex source. `hexColor` has no\n * Core Graph origin (see `VariantSelectorSwatch`), so a `color` group authored from a design may resolve\n * to values with no color: paint the chip when a hex is present, else fall back to the variant image,\n * else the value label — never an empty chip.\n */\nfunction ColorSwatchContent({ swatch, value, Image }: SwatchContentProps) {\n  if (swatch?.hexColor) {\n    return (\n      <span aria-hidden=\"true\">\n        <div\n          data-fs-variant-selector-option-color=\"\"\n          title={value}\n          style={{ '--fs-variant-selector-option-color-bkg-color': swatch.hexColor } as CSSProperties}\n        />\n      </span>\n    );\n  }\n  return <ImageSwatchContent swatch={swatch} value={value} Image={Image} />;\n}\n\n/**\n * Radio body: a classic radio row — a control circle holding Base UI's indicator (the dot, shown when\n * checked) next to the value label. Both are direct children of the option root (no wrapper span) so the\n * group's `flex` on `data-fs-variant-selector-option` lays the control and label out as a row; each is\n * `aria-hidden` because the sibling sr-only span already owns the accessible name. Style `-control` as\n * the ring and `-indicator` as the dot.\n */\nfunction RadioSwatchContent({ value }: SwatchContentProps) {\n  return (\n    <>\n      <span data-fs-variant-selector-option-control=\"\" aria-hidden=\"true\">\n        <BaseRadio.Indicator data-fs-variant-selector-option-indicator=\"\" />\n      </span>\n      <span data-fs-variant-selector-option-label=\"\" aria-hidden=\"true\">\n        {value}\n      </span>\n    </>\n  );\n}\n\n/**\n * A swatch kind: the `data-fs-variant-selector-group-mode` value it advertises for styling, paired with\n * the component that renders it. Each explicit swatch list (`VariantSelectorColorSwatches`, …) references\n * one of these constants directly, so the swatch is chosen by composition rather than by mapping a\n * `displayMode` string at render time.\n */\ntype SwatchKind = {\n  mode: ResolvedDisplayMode;\n  SwatchContent: FunctionComponent<SwatchContentProps>;\n};\n\nconst LABEL_SWATCH: SwatchKind = { mode: 'label', SwatchContent: LabelSwatchContent };\nconst IMAGE_SWATCH: SwatchKind = { mode: 'image', SwatchContent: ImageSwatchContent };\nconst COLOR_SWATCH: SwatchKind = { mode: 'color', SwatchContent: ColorSwatchContent };\nconst RADIO_SWATCH: SwatchKind = { mode: 'radio', SwatchContent: RadioSwatchContent };\n\n/**\n * The swatch kinds the auto swatch list `VariantSelectorSwatches` can land on. `auto` is a runtime\n * decision — it cannot be a static component reference — so the inferred mode is mapped back to its kind\n * here. The explicit swatch lists bypass this entirely. `inferDisplayMode` never returns `radio`, but the\n * `Record` stays exhaustive over `ResolvedDisplayMode` so the lookup is total.\n */\nconst SWATCH_BY_INFERRED_MODE: Record<ResolvedDisplayMode, SwatchKind> = {\n  label: LABEL_SWATCH,\n  image: IMAGE_SWATCH,\n  color: COLOR_SWATCH,\n  radio: RADIO_SWATCH,\n};\n\n// ---------------------------------------------------------------------------\n// Axis resolution\n// ---------------------------------------------------------------------------\n\n/**\n * Normalizes an axis name for matching: strips accents and case and collapses whitespace. This is a\n * deterministic normalization, not a linguistic guess — it only bridges trivial casing/accent/spacing\n * differences between an authored `optionName` and the catalog `ProductOption.name` (e.g. \"cólor\" vs\n * \"Color\"). Anything beyond that — translations, paraphrases, singular/plural — is resolved at\n * authoring time via `optionIndex`, which the schema author reads from the axis' visual order. The\n * runtime deliberately does no morphology. See variant-selector.md.\n */\nfunction normalizeAxisName(name: string): string {\n  return name\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '')\n    .toLowerCase()\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n}\n\n/**\n * Finds the axis an `optionName` refers to via a normalized (case/accent/whitespace-insensitive)\n * match, and only when it is unambiguous (exactly one axis), so a match can never silently bind to\n * the wrong axis. Non-trivial label differences are handled by `optionIndex`, never guessed here.\n */\nfunction findAxisByName(axes: VariantSelectorAxis[], optionName: string): VariantSelectorAxis | null {\n  const exact = axes.find((axis) => axis.name === optionName);\n  if (exact) return exact;\n  const target = normalizeAxisName(optionName);\n  const matches = axes.filter((axis) => normalizeAxisName(axis.name) === target);\n  return matches.length === 1 ? (matches[0] ?? null) : null;\n}\n\n/**\n * Resolves the axis a group binds to. `optionName` (tolerant) takes precedence; `optionIndex`\n * (zero-based position) is the fallback so a generated schema can bind by visual order when the\n * localized label does not match the catalog name. Returns `null` when neither resolves.\n */\nfunction resolveAxis(\n  axes: VariantSelectorAxis[],\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n): VariantSelectorAxis | null {\n  if (optionName !== undefined) {\n    const byName = findAxisByName(axes, optionName);\n    if (byName) return byName;\n  }\n  if (optionIndex !== undefined && Number.isInteger(optionIndex) && optionIndex >= 0 && optionIndex < axes.length) {\n    return axes[optionIndex] ?? null;\n  }\n  return null;\n}\n\n/**\n * Resolves the swatch kind a swatch list renders: an explicit kind passes through; `'auto'` infers from\n * the axis' options (and falls back to `label` for an unresolved axis).\n */\nfunction resolveSwatchKind(swatch: SwatchKind | 'auto', axis: VariantSelectorAxis | null): SwatchKind {\n  if (swatch !== 'auto') return swatch;\n  return axis ? SWATCH_BY_INFERRED_MODE[inferDisplayMode(axis.options)] : LABEL_SWATCH;\n}\n\n/**\n * Computes the swatches to render under an effective `cap` (the count that fits the measured row, resolved\n * upstream). Collapses to the first `cap` options while always keeping the active swatch visible. `cap` is\n * by construction the most that fit one line, so when the active swatch sits past it we **swap** it for the\n * last head swatch (`cap - 1` head + active = `cap`) instead of appending (`cap + 1`, which would wrap or\n * overflow). Dropping the *last* head swatch keeps the leading options stable across selections and never\n * hides the primary (first) option. A `null` cap (measurement unavailable, no trigger, or expanded) shows\n * every swatch.\n */\nfunction getVisibleOptions(\n  axis: VariantSelectorAxis,\n  cap: number | null,\n  expanded: boolean,\n): { visibleOptions: VariantSelectorOptionData[]; hiddenCount: number; overflowing: boolean } {\n  if (cap === null || cap <= 0 || expanded || axis.options.length <= cap) {\n    return { visibleOptions: axis.options, hiddenCount: 0, overflowing: false };\n  }\n  const head = axis.options.slice(0, cap);\n  const activeHidden =\n    axis.activeValue !== null &&\n    !head.some((option) => option.value === axis.activeValue) &&\n    axis.options.some((option) => option.value === axis.activeValue);\n  const activeOption = activeHidden ? axis.options.find((option) => option.value === axis.activeValue) : undefined;\n  // Swap the active swatch in for the last head swatch (keeping the count at `cap`) rather than appending it.\n  const visibleOptions = activeOption ? [...head.slice(0, cap - 1), activeOption] : head;\n  const hiddenCount = axis.options.length - visibleOptions.length;\n  return { visibleOptions, hiddenCount, overflowing: hiddenCount > 0 };\n}\n\n// ---------------------------------------------------------------------------\n// Space measurement (the swatch overflow driver)\n// ---------------------------------------------------------------------------\n\n/**\n * Pure fit math: given each option's outer width, the row `gap`, the list's available inner width, and an\n * optional `triggerWidth` to reserve for the \"+N more\" control, return how many options fit on one line.\n * By default the trigger is a sibling of the swatch list (its own space), so `triggerWidth` is 0 and the\n * swatches get the full width; pass the trigger's width when it sits inline at the end of the swatch row so\n * it stays on the line. When every option fits it returns the full count; otherwise the prefix that fits,\n * floored at 1 so an oversized single swatch never yields zero. Isolated from the DOM so the algorithm is\n * unit-testable with plain numbers.\n */\nexport function computeVisibleCount(optionWidths: number[], gap: number, available: number, triggerWidth = 0): number {\n  const total = optionWidths.length;\n  if (total === 0) return 0;\n\n  // Single accumulating pass (O(n)): total row width is the sum of widths plus one gap between each pair.\n  let full = 0;\n  for (const w of optionWidths) full += w;\n  full += gap * (total - 1);\n  if (full <= available) return total;\n\n  // Reserve the trigger (and the gap before it) only when it shares the swatch row.\n  const budget = triggerWidth > 0 ? available - triggerWidth - gap : available;\n  let used = 0;\n  let count = 0;\n  for (const w of optionWidths) {\n    const next = w + (count > 0 ? gap : 0);\n    if (used + next > budget) break;\n    used += next;\n    count++;\n  }\n  return Math.max(1, count);\n}\n\n/** Reads the swatch list's content-box inner width (the space the swatches actually lay out in) and the\n *  resolved horizontal row gap, from a single `getComputedStyle`. `clientWidth` includes horizontal padding,\n *  so a list styled with `px-*` would otherwise overestimate the space and fit one extra swatch. `columnGap`\n *  already resolves to a px value when `gap` is set (else `\"normal\"` → 0). */\nfunction readRowMetrics(el: HTMLElement): { available: number; gap: number } {\n  const style = getComputedStyle(el);\n  const px = (value: string) => {\n    const parsed = Number.parseFloat(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n  };\n  const available = el.clientWidth - px(style.paddingLeft) - px(style.paddingRight);\n  return { available, gap: px(style.columnGap) };\n}\n\n/**\n * Measures how many swatches fit the list's width and returns that count, or `null` when measurement is\n * unavailable (collapse disabled, no trigger composed, no element, zero width, or no `ResizeObserver` — SSR\n * and jsdom) so the caller shows every swatch. Recomputes on `ResizeObserver` resize.\n *\n * The option-width cache is refreshed only while the full set is on screen (count `null` → all shown); once\n * collapsed we can no longer see every swatch, so a later resize recomputes from the cached widths.\n *\n * When `reserveTriggerSpace` is set (the author placed the \"+N more\" trigger inline at the end of the swatch\n * row), the sibling trigger's width is reserved from the fit. The trigger only mounts after the first\n * collapse, so a second pass (keyed on `count`) folds its width in; the trigger width is accumulated\n * monotonically so a shrinking \"+N more\" label can never flip-flop the fitting count.\n */\nfunction useMeasuredVisibleCount({\n  listEl,\n  optionCount,\n  hasOverflow,\n  enabled,\n  reserveTriggerSpace,\n}: {\n  listEl: HTMLElement | null;\n  optionCount: number;\n  hasOverflow: boolean;\n  enabled: boolean;\n  reserveTriggerSpace: boolean;\n}): number | null {\n  const [count, setCount] = useState<number | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  const triggerWidthRef = useRef(0);\n  const measureRef = useRef<() => void>(() => {});\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled || !hasOverflow || !listEl || typeof ResizeObserver === 'undefined') {\n      widthsRef.current = [];\n      triggerWidthRef.current = 0;\n      // Disable the count-keyed re-measure below, so an expanded group is never re-collapsed.\n      measureRef.current = () => {};\n      setCount(null);\n      return;\n    }\n    // Re-measure fresh for this configuration (this effect re-runs when `optionCount` changes, so a\n    // client-side navigation that reuses this group with a different option set can never keep serving\n    // a stale width cache). The cache only persists across resizes (the ResizeObserver, which does not\n    // re-run this effect). The trigger width is likewise kept monotonic only across resizes below.\n    widthsRef.current = [];\n    triggerWidthRef.current = 0;\n\n    const measure = () => {\n      const { available, gap } = readRowMetrics(listEl);\n      if (available <= 0) {\n        setCount(null);\n        return;\n      }\n      const optionEls = Array.from(listEl.querySelectorAll<HTMLElement>('[data-fs-variant-selector-option]'));\n      // Refresh the width cache only when every option is on screen; a collapsed row cannot see them all.\n      if (optionCount > 0 && optionEls.length === optionCount) {\n        widthsRef.current = optionEls.map((el) => el.offsetWidth);\n      }\n      if (reserveTriggerSpace) {\n        const triggerEl = listEl.parentElement?.querySelector<HTMLElement>(\n          '[data-fs-variant-selector-overflow-trigger]',\n        );\n        triggerWidthRef.current = Math.max(triggerWidthRef.current, triggerEl?.offsetWidth ?? 0);\n      }\n\n      const widths = widthsRef.current;\n      if (widths.length === 0) {\n        setCount(null);\n        return;\n      }\n      const next = computeVisibleCount(widths, gap, available, triggerWidthRef.current);\n      setCount((prev) => (prev === next ? prev : next));\n    };\n\n    measureRef.current = measure;\n    measure();\n\n    const observer = new ResizeObserver(() => measure());\n    observer.observe(listEl);\n    return () => observer.disconnect();\n  }, [listEl, optionCount, hasOverflow, enabled, reserveTriggerSpace]);\n\n  // Re-measure on any count change, so convergence never depends on the ResizeObserver firing. After the\n  // cache is reset (e.g. the option set changed) the group first shows every swatch; this pass then measures\n  // the full set and collapses — the state-equality bail-out in `measure` stops it once it settles (two\n  // passes). It is also where the inline trigger's width (which mounts only after the first collapse) enters\n  // the fit in `reserveTriggerSpace` mode, accumulated monotonically so it can't flip-flop. `measureRef` is a\n  // no-op while measurement is disabled (expanded / no geometry), so an expanded group is never re-collapsed.\n  useIsomorphicLayoutEffect(() => {\n    measureRef.current();\n  }, [count]);\n\n  return count;\n}\n\n// Dedup dev warnings so a re-rendering group does not flood the console; keyed by the binding plus\n// the available axes so a later data change still surfaces a fresh warning.\nconst warnedUnresolvedAxes = new Set<string>();\n\nfunction warnUnresolvedAxis(\n  optionName: string | undefined,\n  optionIndex: number | undefined,\n  axes: VariantSelectorAxis[],\n): void {\n  // Surface authoring/data mismatches during development and tests (the screenshot→store pipeline\n  // runs `next dev`); stay silent in production where the catalog is the source of truth.\n  if (process.env.NODE_ENV === 'production') return;\n  const available = axes.map((axis) => axis.name);\n  const key = `${optionName ?? ''}\\u0000${optionIndex ?? ''}\\u0000${available.join('\\u0001')}`;\n  if (warnedUnresolvedAxes.has(key)) return;\n  warnedUnresolvedAxes.add(key);\n  const list = available.length > 0 ? available.map((name, index) => `${index}:\"${name}\"`).join(', ') : '(none)';\n  console.warn(\n    `[VariantSelector] Could not resolve an option axis for ${\n      optionName === undefined ? `optionIndex ${optionIndex}` : `optionName \"${optionName}\"`\n    }. Available axes (index:name): ${list}. ` +\n      'optionName must reference a catalog ProductOption.name (matched ignoring case and accents only); ' +\n      'otherwise set optionIndex to the axis position (0-based, in the product option order).',\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const VariantSelectorRootDefinition = defineComponent<VariantSelectorRootProps>({\n  name: 'VariantSelectorRoot',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Variant Selector', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  providesContext: 'variant-selector',\n  guideline:\n    'Root container for PDP variant swatches — derives option axes and availability from the product variants and publishes the selected variant for sibling components. Wraps one VariantSelectorOptionGroup per axis. The selectedVariantId prop pre-selects the viewed SKU before the shopper interacts; the live selection wins once a swatch is activated.',\n});\n\nexport const VariantSelectorOptionGroupDefinition = defineComponent<VariantSelectorOptionGroupProps>({\n  name: 'VariantSelectorOptionGroup',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOptionGroup,\n  editor: { label: 'Variant Option Group', category: 'commerce' },\n  schema: {\n    optionName: { type: 'string', label: 'Option axis name (catalog ProductOption.name)' },\n    optionIndex: { type: 'number', label: 'Option axis index (0-based; fallback for optionName)' },\n    reserveTriggerSpace: { type: 'boolean', default: false, label: 'Reserve space for the \"+N more\" trigger' },\n  },\n  requiresContext: 'variant-selector',\n  providesContext: 'variant-selector-group',\n  guideline:\n    'One option axis (e.g. Color) inside a VariantSelectorRoot. A container only — it binds the axis and owns the collapse/expand state, then renders whatever you compose inside it. Fill it, in any order, with: a VariantSelectorGroupTitle (the axis name) and optionally a VariantSelectorGroupValue beside it to echo the selection, exactly one swatch list (VariantSelectorSwatches to auto-infer the look, or VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches to fix it), and optionally a VariantSelectorOverflow (\"+N more\") to collapse a row that does not fit its width. Because the parts read the group via context, you can place them freely — e.g. the title in an accordion header and the swatch list in its panel. Bind the axis with optionIndex (0-based, in the product\\'s option order — the reliable choice when authoring from an image, since groups are placed in visual order) or, when the exact catalog option name is known, optionName (matched case/accent-insensitively, no plural/translation guessing). Compose a VariantSelectorOverflow to opt into automatic space-based collapse: the group measures the swatch row and keeps only the swatches that fit on one line, revealing the rest via the trigger — no cap prop. The trigger sits in its own space by default; set reserveTriggerSpace when it is styled inline at the end of the swatch row, so its width is reserved and it stays on the line.',\n});\n\nexport const VariantSelectorGroupTitleDefinition = defineComponent<VariantSelectorGroupTitleProps>({\n  name: 'VariantSelectorGroupTitle',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupTitle,\n  editor: { label: 'Variant Group Title', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Axis name override (defaults to the catalog axis name)' },\n  },\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The axis name inside a VariantSelectorOptionGroup (e.g. \"Color\"). Reads the axis from context, so it stays correct even when placed apart from the swatches (e.g. in an accordion header). Set label to match a design prompt (\"Selecione a cor\") without changing the axis binding. It renders the name only — to echo the selected value place a VariantSelectorGroupValue beside it (e.g. both inside a Container); the separator (a colon), the value weight, and the spacing are brand styling on the data-fs hooks, not props.',\n});\n\nexport const VariantSelectorGroupValueDefinition = defineComponent<VariantSelectorGroupValueProps>({\n  name: 'VariantSelectorGroupValue',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorGroupValue,\n  editor: { label: 'Variant Group Value', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The live selected value of a VariantSelectorOptionGroup (e.g. \"Red\"), as its own placeable part. Compose it beside a VariantSelectorGroupTitle — typically both inside a Container — to render \"Color: Red\", where the colon and the value weight are styling on the data-fs hooks. Omit it entirely when the design shows only the axis name (e.g. above a radio list, whose selected dot already conveys the choice). It is decorative (aria-hidden): the selection is announced per option, so the group is named by the axis alone.',\n});\n\nexport const VariantSelectorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorSwatches,\n  editor: { label: 'Variant Swatches (auto)', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The swatch list inside a VariantSelectorOptionGroup, auto-inferring the look from the option data: color when every value has a hex color, image when values resolve to differing variant images, else label (it never infers radio). Renders one swatch per option automatically — do not author VariantSelectorOption children. To fix the look instead of inferring it, use a sibling list: VariantSelectorColorSwatches / VariantSelectorImageSwatches / VariantSelectorLabelSwatches / VariantSelectorRadioSwatches. Swatch shape (square vs circle) is styling. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorLabelSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorLabelSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorLabelSwatches,\n  editor: { label: 'Variant Label Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'Swatch list rendered as text-label swatches (size pills, materials, voltages, any axis that should read as text). Use inside a VariantSelectorOptionGroup when the look must always be text regardless of the data (auto can resolve a size axis to image when its values map to differing variant photos). Renders its options automatically. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorImageSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorImageSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorImageSwatches,\n  editor: { label: 'Variant Image Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"Swatch list rendered as image (thumbnail) swatches; each shows the variant's primary image, degrading to the value label when no image is available. Use inside a VariantSelectorOptionGroup; prefer binding that group by optionName so the photo pairs with its intended axis — a positionally-bound group with an image list can hijack a text axis (e.g. sizes shown as clothing photos) when the live product exposes fewer or reordered axes than the design. Renders its options automatically. Use exactly one swatch list per group.\",\n});\n\nexport const VariantSelectorColorSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorColorSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorColorSwatches,\n  editor: { label: 'Variant Color Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    \"Swatch list rendered as color-chip swatches. Use inside a VariantSelectorOptionGroup when the design shows solid color chips. A value with no hex color (hexColor has no catalog source and is injection-only) degrades per value to its variant image, then to the value label, so a chip is never empty — choosing this from a design's colored swatches is always safe. Shape (circle vs square) is styling. Renders its options automatically. Use exactly one swatch list per group.\",\n});\n\nexport const VariantSelectorRadioSwatchesDefinition = defineComponent<VariantSelectorSwatchesProps>({\n  name: 'VariantSelectorRadioSwatches',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorRadioSwatches,\n  editor: { label: 'Variant Radio Swatches', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'Swatch list rendered as a radio-dot list — a control circle showing a dot when selected, beside the value label (common for voltage/material lists). Use inside a VariantSelectorOptionGroup; auto never picks this look, so reference it directly when the design shows a radio list. A square control or a checkmark is styling. Typically pair with a VariantSelectorGroupTitle (the axis name) and omit the VariantSelectorGroupValue, since the selected dot already conveys the choice. Renders its options automatically. Use exactly one swatch list per group.',\n});\n\nexport const VariantSelectorOverflowDefinition = defineComponent<VariantSelectorOverflowProps>({\n  name: 'VariantSelectorOverflow',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOverflow,\n  editor: { label: 'Variant Overflow Trigger', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'The \"+N more\" trigger inside a VariantSelectorOptionGroup. Composing it opts the group into automatic space-based collapse: the group measures the swatch row and, when the swatches do not fit on one line, collapses the extras behind this trigger, which expands them in place when clicked. It renders only while the row actually overflows. Author it after the swatch list; omit it when the row should never collapse.',\n});\n\nexport const VariantSelectorOptionDefinition = defineComponent<VariantSelectorOptionProps>({\n  name: 'VariantSelectorOption',\n  importPath: '@vtex/faststore/components',\n  component: VariantSelectorOption,\n  editor: { label: 'Variant Option', category: 'commerce' },\n  schema: {},\n  requiresContext: 'variant-selector-group',\n  guideline:\n    'One swatch within a swatch list; reflects checked/disabled states and activates the matching variant on selection. Rendered automatically by the swatch list from the product data — do not author it directly.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function VariantSelectorRoot({\n  $data: $dataProp,\n  selectedVariantId,\n  className,\n  children,\n  ...props\n}: VariantSelectorRootProps) {\n  const $data = useDataOverride($dataProp);\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  // Only honour a published selection that belongs to this product — a selection made on another\n  // PDP must not leak through this module-global var after client-side navigation.\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, $data?.id ?? null);\n  // Precedence: the shopper's published in-page selection wins; otherwise the page-supplied viewed\n  // SKU (`selectedVariantId` prop) seeds the initial selection; falling back to the first variant.\n  const activeVariantId = publishedVariantId ?? selectedVariantId ?? null;\n\n  let contextValue: VariantSelectorContextValue = null;\n  if ($data) {\n    const productId = $data.id;\n    const variants = deriveVariants($data);\n    const selectedVariant = variants.find((variant) => variant.id === activeVariantId) ?? variants[0] ?? null;\n    const currentSelection = selectedVariant?.options ?? {};\n    const axes = deriveAxes($data, variants, currentSelection);\n\n    contextValue = {\n      axes,\n      selectedVariantId: selectedVariant?.id ?? null,\n      select: (axisName, value) => {\n        const resolved = resolveVariant(variants, currentSelection, axisName, value);\n        if (resolved) selectedVariantVar({ productId, variantId: resolved.id });\n      },\n    };\n  }\n\n  return (\n    <VariantSelectorContextInternal value={contextValue}>\n      <div {...props} className={className} data-fs-variant-selector=\"\">\n        {children}\n      </div>\n    </VariantSelectorContextInternal>\n  );\n}\n\n/** Axis container: binds the axis and owns the collapse/expand state, then renders whatever the author\n *  composes inside it (title, a swatch list, an overflow trigger). The parts read the axis and overflow\n *  state from the group context it provides, so they can be placed freely. */\nexport function VariantSelectorOptionGroup({\n  optionName,\n  optionIndex,\n  reserveTriggerSpace = false,\n  ImageComponent = DefaultVariantImage,\n  className,\n  children,\n  ...props\n}: VariantSelectorOptionGroupProps) {\n  const [expanded, setExpanded] = useState(false);\n  const [titleCount, setTitleCount] = useState(0);\n  const [overflowCount, setOverflowCount] = useState(0);\n  const [listEl, setListEl] = useState<HTMLElement | null>(null);\n  // Stable, collision-free id for the title→radiogroup `aria-labelledby` wiring. Deriving it from the\n  // axis name would break for multi-word catalog names (a space in an id/idref is parsed as multiple\n  // tokens, dropping the accessible name) and could collide across groups bound to the same axis.\n  const titleId = useId();\n  const ctx = useVariantSelector();\n  const axis = ctx ? resolveAxis(ctx.axes, optionName, optionIndex) : null;\n\n  // Ref-counted so a freely-placed title (even one nested in an accordion header, outside this DOM\n  // subtree) still flips `hasTitle` — which gates the swatch list's `aria-labelledby` so it never\n  // points at a title id that no element carries.\n  const registerTitle = useCallback(() => {\n    setTitleCount((count) => count + 1);\n    return () => setTitleCount((count) => count - 1);\n  }, []);\n  const hasTitle = titleCount > 0;\n\n  // Ref-counted like the title, so composing a VariantSelectorOverflow (wherever it is placed) opts the\n  // group into space-based collapse. No trigger ⇒ never collapse, so hidden swatches always have a reveal.\n  const registerOverflow = useCallback(() => {\n    setOverflowCount((count) => count + 1);\n    return () => setOverflowCount((count) => count - 1);\n  }, []);\n  const hasOverflow = overflowCount > 0;\n\n  // Stable ref callback the swatch list attaches to its container, so the group can measure the row.\n  const registerListElement = useCallback((el: HTMLElement | null) => setListEl(el), []);\n\n  // Measured count of swatches that fit the row (null when unavailable → show all). Disabled once the\n  // shopper expands, so an explicit expand stays sticky against later resizes.\n  const measuredVisibleCount = useMeasuredVisibleCount({\n    listEl,\n    optionCount: axis?.options.length ?? 0,\n    hasOverflow,\n    enabled: hasOverflow && !expanded,\n    reserveTriggerSpace,\n  });\n  const effectiveCap = expanded || !hasOverflow ? null : measuredVisibleCount;\n\n  const groupContextValue = useMemo<VariantSelectorGroupContextValue | null>(() => {\n    if (!ctx || !axis) return null;\n    const { visibleOptions, hiddenCount, overflowing } = getVisibleOptions(axis, effectiveCap, expanded);\n    return {\n      axis,\n      titleId,\n      hasTitle,\n      registerTitle,\n      registerOverflow,\n      hasOverflow,\n      registerListElement,\n      visibleOptions,\n      hiddenCount,\n      overflowing,\n      expand: () => setExpanded(true),\n      select: (value: string) => ctx.select(axis.name, value),\n      ImageComponent,\n    };\n  }, [\n    ctx,\n    axis,\n    effectiveCap,\n    expanded,\n    titleId,\n    hasTitle,\n    registerTitle,\n    registerOverflow,\n    hasOverflow,\n    registerListElement,\n    ImageComponent,\n  ]);\n\n  if (!groupContextValue) {\n    if (ctx) warnUnresolvedAxis(optionName, optionIndex, ctx.axes);\n    return null;\n  }\n\n  return (\n    <VariantSelectorGroupContext.Provider value={groupContextValue}>\n      <div\n        {...props}\n        className={className}\n        data-fs-variant-selector-group=\"\"\n        data-fs-variant-selector-group-overflow={groupContextValue.overflowing ? 'true' : 'false'}\n      >\n        {children}\n      </div>\n    </VariantSelectorGroupContext.Provider>\n  );\n}\n\n/** The axis name (the catalog axis name or `label`). Reads the axis from group context, so it reflects\n *  the bound axis wherever it is placed (including an accordion header). It is a `<span>`, not a `<label>`:\n *  it names the radiogroup via `aria-labelledby`, not a single control. Compose a `VariantSelectorGroupValue`\n *  beside it to echo the selection; the separator and value weight are styling on the `data-fs-*` hooks. */\nexport function VariantSelectorGroupTitle({ label, className, ...props }: VariantSelectorGroupTitleProps) {\n  const { axis, titleId, registerTitle } = useVariantSelectorGroup();\n  // Announce this title's presence so the swatch list wires `aria-labelledby` to it; unregister on unmount.\n  useEffect(() => registerTitle(), [registerTitle]);\n  return (\n    <span {...props} id={titleId} className={className} data-fs-variant-selector-group-title=\"\">\n      {label ?? axis.name}\n    </span>\n  );\n}\n\n/** The live selected value of the group's axis, as a standalone placeable part. Decorative (`aria-hidden`):\n *  the selection is announced per option, so it never participates in the group's accessible name. */\nexport function VariantSelectorGroupValue({ className, ...props }: VariantSelectorGroupValueProps) {\n  const { axis } = useVariantSelectorGroup();\n  return (\n    <span {...props} aria-hidden=\"true\" className={className} data-fs-variant-selector-group-value=\"\">\n      {axis.activeValue ?? ''}\n    </span>\n  );\n}\n\n/** Internal: the swatch list shared by every kind, parametrized by the swatch it renders. The public\n *  lists fix `swatch` — `VariantSelectorSwatches` to `'auto'` and the explicit ones to a concrete kind.\n *  Provides the resolved swatch component to its options via context. Not registered in the catalog. */\nfunction VariantSelectorSwatchesBase({\n  swatch,\n  className,\n  ref: consumerRef,\n  ...props\n}: VariantSelectorSwatchesProps & { swatch: SwatchKind | 'auto' }) {\n  const group = useVariantSelectorGroup();\n  const { registerListElement } = group;\n  const resolvedSwatch = resolveSwatchKind(swatch, group.axis);\n  // Register the list element for measurement and still honour a ref the consumer passed (compose, not\n  // discard) — otherwise `ref={registerListElement}` after `{...props}` would silently drop the consumer's.\n  const setListRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      registerListElement(el);\n      if (typeof consumerRef === 'function') consumerRef(el);\n      else if (consumerRef) (consumerRef as { current: HTMLDivElement | null }).current = el;\n    },\n    [registerListElement, consumerRef],\n  );\n  return (\n    <VariantSelectorSwatchContext.Provider value={resolvedSwatch.SwatchContent}>\n      <RadioGroup\n        {...props}\n        ref={setListRef}\n        className={className}\n        aria-labelledby={group.hasTitle ? group.titleId : undefined}\n        aria-label={group.axis.name}\n        value={group.axis.activeValue ?? ''}\n        onValueChange={group.select}\n        data-fs-variant-selector-group-list=\"\"\n        data-fs-variant-selector-group-mode={resolvedSwatch.mode}\n      >\n        {group.visibleOptions.map((option) => (\n          <VariantSelectorOption key={option.value} value={option.value} />\n        ))}\n      </RadioGroup>\n    </VariantSelectorSwatchContext.Provider>\n  );\n}\n\n/** Auto-inferring swatch list: derives the look from the option data (color/image/label, never radio).\n *  Use an explicit sibling list to fix the look instead of inferring it. */\nexport function VariantSelectorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch=\"auto\" {...props} />;\n}\n\n/** Swatch list with text-label swatches. */\nexport function VariantSelectorLabelSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={LABEL_SWATCH} {...props} />;\n}\n\n/** Swatch list with image (thumbnail) swatches. */\nexport function VariantSelectorImageSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={IMAGE_SWATCH} {...props} />;\n}\n\n/** Swatch list with color-chip swatches (degrades per value to image, then label). */\nexport function VariantSelectorColorSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={COLOR_SWATCH} {...props} />;\n}\n\n/** Swatch list rendered as a radio-dot list (control circle + dot + label). */\nexport function VariantSelectorRadioSwatches(props: VariantSelectorSwatchesProps) {\n  return <VariantSelectorSwatchesBase swatch={RADIO_SWATCH} {...props} />;\n}\n\n/** The \"+N more\" trigger: composing it opts the group into space-based collapse (via `registerOverflow`),\n *  and it renders only while the row overflows, expanding it in place when clicked. Registers in a\n *  layout effect so the group can measure and collapse before the browser paints (no full-row flash). */\nexport function VariantSelectorOverflow({ className, ...props }: VariantSelectorOverflowProps) {\n  const group = useVariantSelectorGroup();\n  const { registerOverflow } = group;\n  useIsomorphicLayoutEffect(() => registerOverflow(), [registerOverflow]);\n  if (!group.overflowing) return null;\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      onClick={group.expand}\n      className={className}\n      data-fs-variant-selector-overflow-trigger=\"\"\n      data-fs-variant-selector-overflow-count={group.hiddenCount}\n    >\n      +{group.hiddenCount} more\n    </button>\n  );\n}\n\nexport function VariantSelectorOption({ value, ImageComponent, className }: Readonly<VariantSelectorOptionProps>) {\n  const group = useVariantSelectorGroup();\n  // The swatch list provides the resolved swatch component; degrade to a text label when an option is\n  // somehow rendered outside a list (it always has a label-shaped fallback rather than an empty body).\n  const SwatchContent = useContext(VariantSelectorSwatchContext) ?? LabelSwatchContent;\n  const option = group.axis.options.find((candidate) => candidate.value === value) ?? null;\n  if (!option) return null;\n\n  const checked = group.axis.activeValue === value;\n  const disabled = !option.available;\n  const Image = ImageComponent ?? group.ImageComponent;\n\n  return (\n    <BaseRadio.Root\n      value={value}\n      disabled={disabled}\n      title={value}\n      className={className}\n      data-fs-variant-selector-option=\"\"\n      data-fs-variant-selector-option-checked={checked ? 'true' : 'false'}\n      data-fs-variant-selector-option-disabled={disabled ? 'true' : 'false'}\n    >\n      {/* Axis-qualified accessible name (e.g. \"Color: Red\"); the visual content below is hidden from\n          assistive tech so the radio is announced once, not duplicated by the label/image. */}\n      <span data-fs-sr-only=\"\" className=\"sr-only\">\n        {group.axis.name}: {value}\n      </span>\n      <SwatchContent swatch={option.swatch} value={value} Image={Image} />\n    </BaseRadio.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const VariantSelector = {\n  Root: VariantSelectorRoot,\n  OptionGroup: VariantSelectorOptionGroup,\n  Title: VariantSelectorGroupTitle,\n  Value: VariantSelectorGroupValue,\n  Swatches: VariantSelectorSwatches,\n  LabelSwatches: VariantSelectorLabelSwatches,\n  ImageSwatches: VariantSelectorImageSwatches,\n  ColorSwatches: VariantSelectorColorSwatches,\n  RadioSwatches: VariantSelectorRadioSwatches,\n  Overflow: VariantSelectorOverflow,\n  Option: VariantSelectorOption,\n};\n"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 import { defineComponent } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { createContext, useContext } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/particles/address-summary/address-summary.tsx
 const AddressSummaryContext = createContext(null);
 function useAddressSummary() {
@@ -131,7 +131,7 @@ function AddressSummary({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className,
 		"data-fs-address-summary": "",
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(AddressSummaryRecipient, {}),
 			/* @__PURE__ */ jsx(AddressSummaryStreet, {}),
 			/* @__PURE__ */ jsx(AddressSummaryLocality, {})

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

@@ -1 +1 @@
-{"version":3,"file":"address-summary.js","names":[],"sources":["../../../src/particles/address-summary/address-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext } from 'react';\n\n/**\n * AddressSummary particle (no business coupling — ADR-0001): a presentational display for a\n * postal address, driven entirely by AddressSummaryRoot's context rather than props. Any matter\n * component that owns address data (e.g. ShippingAddressSelectedSummary, ShippingAddressSavedOption)\n * provides it via AddressSummaryRoot; AddressSummary reads and renders it. A future alternative\n * presentation (e.g. a \"LeanAddressSummary\") would read the same context and could be composed in\n * its place — swapping the presentation is a composition change, not a new data-binding.\n */\n\nexport type AddressSummaryFields = Readonly<{\n  recipientName?: string | null;\n  name?: string | null;\n  street?: string | null;\n  number?: string | null;\n  complement?: string | null;\n  neighborhood?: string | null;\n  city?: string | null;\n  state?: string | null;\n  postalCode?: string | null;\n  country?: string | null;\n  reference?: string | null;\n}>;\n\nexport type AddressSummaryFieldKey = keyof AddressSummaryFields;\n\nconst AddressSummaryContext = createContext<AddressSummaryFields | null>(null);\n\nexport function useAddressSummary(): AddressSummaryFields {\n  const ctx = useContext(AddressSummaryContext);\n  if (!ctx) throw new Error('AddressSummary must be used inside AddressSummaryRoot.');\n  return ctx;\n}\n\nexport type AddressSummaryRootProps = {\n  /** The address fields provided to descendant presentational components via context. */\n  address: AddressSummaryFields;\n  children?: ReactNode;\n};\n\nexport type AddressSummaryProps = {\n  className?: string;\n  /** The lines to render, in order. Defaults to recipient, street, locality when omitted. */\n  children?: ReactNode;\n};\n\nexport type AddressSummaryLineProps = {\n  className?: string;\n};\n\nexport type AddressSummaryNameProps = Readonly<AddressSummaryLineProps>;\n\nexport type AddressSummaryCountryProps = Readonly<AddressSummaryLineProps>;\n\nexport type AddressSummaryFieldProps = Readonly<{\n  /** Which address field to render inline. */\n  field: AddressSummaryFieldKey;\n  className?: string;\n}>;\n\nexport const AddressSummaryRootDefinition = defineComponent<AddressSummaryRootProps>({\n  name: 'AddressSummaryRoot',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryRoot,\n  providesContext: 'address-summary',\n  editor: { label: 'Address Summary Root', category: 'content' },\n  schema: {},\n  guideline:\n    'Provides a postal address to descendant presentational components via context (no business coupling). Compose a matter component that owns address data as the source of the address prop, and AddressSummary (or a future alternative presentation reading the same context) as the child that renders it.',\n});\n\nexport const AddressSummaryDefinition = defineComponent<AddressSummaryProps>({\n  name: 'AddressSummary',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummary,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary', category: 'content' },\n  schema: {},\n  guideline:\n    'The address block: recipient, street line, locality line, in that order by default. Compose AddressSummaryRecipient / Street / Locality as children to choose the order or drop a line; the wrapper, and any styling on it, is the same either way. AddressSummaryName, AddressSummaryCountry and AddressSummaryField are also available for a custom composition — none of them join the default. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryRecipientDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryRecipient',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryRecipient,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Recipient', category: 'content' },\n  schema: {},\n  guideline:\n    'Who the delivery is addressed to, or nothing when the address carries no recipient. Place it in whatever order the summary should read. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryStreetDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryStreet',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryStreet,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Street', category: 'content' },\n  schema: {},\n  guideline:\n    'Street, number and complement on one line, or nothing when all three are absent. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryLocalityDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryLocality',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryLocality,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Locality', category: 'content' },\n  schema: {},\n  guideline:\n    'Neighborhood, city, state and postal code on one line, or nothing when all are absent. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryNameDefinition = defineComponent<AddressSummaryNameProps>({\n  name: 'AddressSummaryName',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryName,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Name', category: 'content' },\n  schema: {},\n  guideline:\n    \"The shopper's own label for the address, or nothing when there is none. An unnamed address is identified by its contents. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport const AddressSummaryCountryDefinition = defineComponent<AddressSummaryCountryProps>({\n  name: 'AddressSummaryCountry',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryCountry,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Country', category: 'content' },\n  schema: {},\n  guideline:\n    \"The address's country, shown exactly as provided, or nothing when there is none. Provide a display name, not a raw code: the address stores an ISO alpha-3 code, which Intl.DisplayNames rejects. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport const AddressSummaryFieldDefinition = defineComponent<AddressSummaryFieldProps>({\n  name: 'AddressSummaryField',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryField,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Field', category: 'content' },\n  schema: {\n    field: {\n      type: [\n        'recipientName',\n        'name',\n        'street',\n        'number',\n        'complement',\n        'neighborhood',\n        'city',\n        'state',\n        'postalCode',\n        'country',\n        'reference',\n      ] as const,\n      label: 'Field',\n    },\n  },\n  guideline:\n    \"One address field, rendered inline, or nothing when it is empty. Compose several to build a line in a country's own order (e.g. number before street), with the separators the composition supplies; a separator beside a field that turns out empty is the composition's to drop. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport function AddressSummaryRoot({ address, children }: AddressSummaryRootProps) {\n  return <AddressSummaryContext.Provider value={address}>{children}</AddressSummaryContext.Provider>;\n}\n\nexport function AddressSummary({ className, children }: AddressSummaryProps) {\n  return (\n    <div className={className} data-fs-address-summary=\"\">\n      {children ?? (\n        <>\n          <AddressSummaryRecipient />\n          <AddressSummaryStreet />\n          <AddressSummaryLocality />\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Who the delivery is addressed to. Renders nothing when the address carries no recipient. */\nexport function AddressSummaryRecipient({ className }: AddressSummaryLineProps) {\n  const { recipientName } = useAddressSummary();\n  if (!recipientName) return null;\n  return (\n    <p className={className} data-fs-address-summary-recipient=\"\">\n      {recipientName}\n    </p>\n  );\n}\n\n/** Street, number and complement on one line. Renders nothing when all three are absent. */\nexport function AddressSummaryStreet({ className }: AddressSummaryLineProps) {\n  const { street, number, complement } = useAddressSummary();\n  const line = [[street, number].filter(Boolean).join(', '), complement].filter(Boolean).join(' - ');\n  if (!line) return null;\n  return (\n    <p className={className} data-fs-address-summary-address=\"\">\n      {line}\n    </p>\n  );\n}\n\n/** Neighborhood, city, state and postal code on one line. Renders nothing when all are absent. */\nexport function AddressSummaryLocality({ className }: AddressSummaryLineProps) {\n  const { neighborhood, city, state, postalCode } = useAddressSummary();\n  const line = [neighborhood, [city, state].filter(Boolean).join(' - '), postalCode].filter(Boolean).join(', ');\n  if (!line) return null;\n  return (\n    <p className={className} data-fs-address-summary-locality=\"\">\n      {line}\n    </p>\n  );\n}\n\n/** The shopper's own label for the address. Renders nothing when the address carries no name. */\nexport function AddressSummaryName({ className }: AddressSummaryNameProps) {\n  const { name } = useAddressSummary();\n  if (!name) return null;\n  return (\n    <p className={className} data-fs-address-summary-name=\"\">\n      {name}\n    </p>\n  );\n}\n\n/** The address's country, shown as provided. Renders nothing when the address carries no country. */\nexport function AddressSummaryCountry({ className }: AddressSummaryCountryProps) {\n  const { country } = useAddressSummary();\n  if (!country) return null;\n  return (\n    <p className={className} data-fs-address-summary-country=\"\">\n      {country}\n    </p>\n  );\n}\n\n/** One address field, rendered inline. Renders nothing when that field is absent. */\nexport function AddressSummaryField({ field, className }: AddressSummaryFieldProps) {\n  const address = useAddressSummary();\n  const value = address[field];\n  if (!value) return null;\n  return (\n    <span className={className} data-fs-address-summary-field={field}>\n      {value}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"address-summary.js","names":[],"sources":["../../../src/particles/address-summary/address-summary.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext } from 'react';\n\n/**\n * AddressSummary particle (no business coupling — ADR-0001): a presentational display for a\n * postal address, driven entirely by AddressSummaryRoot's context rather than props. Any matter\n * component that owns address data (e.g. ShippingAddressSelectedSummary, ShippingAddressSavedOption)\n * provides it via AddressSummaryRoot; AddressSummary reads and renders it. A future alternative\n * presentation (e.g. a \"LeanAddressSummary\") would read the same context and could be composed in\n * its place — swapping the presentation is a composition change, not a new data-binding.\n */\n\nexport type AddressSummaryFields = Readonly<{\n  recipientName?: string | null;\n  name?: string | null;\n  street?: string | null;\n  number?: string | null;\n  complement?: string | null;\n  neighborhood?: string | null;\n  city?: string | null;\n  state?: string | null;\n  postalCode?: string | null;\n  country?: string | null;\n  reference?: string | null;\n}>;\n\nexport type AddressSummaryFieldKey = keyof AddressSummaryFields;\n\nconst AddressSummaryContext = createContext<AddressSummaryFields | null>(null);\n\nexport function useAddressSummary(): AddressSummaryFields {\n  const ctx = useContext(AddressSummaryContext);\n  if (!ctx) throw new Error('AddressSummary must be used inside AddressSummaryRoot.');\n  return ctx;\n}\n\nexport type AddressSummaryRootProps = {\n  /** The address fields provided to descendant presentational components via context. */\n  address: AddressSummaryFields;\n  children?: ReactNode;\n};\n\nexport type AddressSummaryProps = {\n  className?: string;\n  /** The lines to render, in order. Defaults to recipient, street, locality when omitted. */\n  children?: ReactNode;\n};\n\nexport type AddressSummaryLineProps = {\n  className?: string;\n};\n\nexport type AddressSummaryNameProps = Readonly<AddressSummaryLineProps>;\n\nexport type AddressSummaryCountryProps = Readonly<AddressSummaryLineProps>;\n\nexport type AddressSummaryFieldProps = Readonly<{\n  /** Which address field to render inline. */\n  field: AddressSummaryFieldKey;\n  className?: string;\n}>;\n\nexport const AddressSummaryRootDefinition = defineComponent<AddressSummaryRootProps>({\n  name: 'AddressSummaryRoot',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryRoot,\n  providesContext: 'address-summary',\n  editor: { label: 'Address Summary Root', category: 'content' },\n  schema: {},\n  guideline:\n    'Provides a postal address to descendant presentational components via context (no business coupling). Compose a matter component that owns address data as the source of the address prop, and AddressSummary (or a future alternative presentation reading the same context) as the child that renders it.',\n});\n\nexport const AddressSummaryDefinition = defineComponent<AddressSummaryProps>({\n  name: 'AddressSummary',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummary,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary', category: 'content' },\n  schema: {},\n  guideline:\n    'The address block: recipient, street line, locality line, in that order by default. Compose AddressSummaryRecipient / Street / Locality as children to choose the order or drop a line; the wrapper, and any styling on it, is the same either way. AddressSummaryName, AddressSummaryCountry and AddressSummaryField are also available for a custom composition — none of them join the default. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryRecipientDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryRecipient',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryRecipient,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Recipient', category: 'content' },\n  schema: {},\n  guideline:\n    'Who the delivery is addressed to, or nothing when the address carries no recipient. Place it in whatever order the summary should read. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryStreetDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryStreet',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryStreet,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Street', category: 'content' },\n  schema: {},\n  guideline:\n    'Street, number and complement on one line, or nothing when all three are absent. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryLocalityDefinition = defineComponent<AddressSummaryLineProps>({\n  name: 'AddressSummaryLocality',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryLocality,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Locality', category: 'content' },\n  schema: {},\n  guideline:\n    'Neighborhood, city, state and postal code on one line, or nothing when all are absent. Must be a descendant of AddressSummaryRoot.',\n});\n\nexport const AddressSummaryNameDefinition = defineComponent<AddressSummaryNameProps>({\n  name: 'AddressSummaryName',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryName,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Name', category: 'content' },\n  schema: {},\n  guideline:\n    \"The shopper's own label for the address, or nothing when there is none. An unnamed address is identified by its contents. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport const AddressSummaryCountryDefinition = defineComponent<AddressSummaryCountryProps>({\n  name: 'AddressSummaryCountry',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryCountry,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Country', category: 'content' },\n  schema: {},\n  guideline:\n    \"The address's country, shown exactly as provided, or nothing when there is none. Provide a display name, not a raw code: the address stores an ISO alpha-3 code, which Intl.DisplayNames rejects. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport const AddressSummaryFieldDefinition = defineComponent<AddressSummaryFieldProps>({\n  name: 'AddressSummaryField',\n  importPath: '@vtex/faststore/components',\n  component: AddressSummaryField,\n  requiresContext: 'address-summary',\n  editor: { label: 'Address Summary Field', category: 'content' },\n  schema: {\n    field: {\n      type: [\n        'recipientName',\n        'name',\n        'street',\n        'number',\n        'complement',\n        'neighborhood',\n        'city',\n        'state',\n        'postalCode',\n        'country',\n        'reference',\n      ] as const,\n      label: 'Field',\n    },\n  },\n  guideline:\n    \"One address field, rendered inline, or nothing when it is empty. Compose several to build a line in a country's own order (e.g. number before street), with the separators the composition supplies; a separator beside a field that turns out empty is the composition's to drop. Must be a descendant of AddressSummaryRoot.\",\n});\n\nexport function AddressSummaryRoot({ address, children }: AddressSummaryRootProps) {\n  return <AddressSummaryContext.Provider value={address}>{children}</AddressSummaryContext.Provider>;\n}\n\nexport function AddressSummary({ className, children }: AddressSummaryProps) {\n  return (\n    <div className={className} data-fs-address-summary=\"\">\n      {children ?? (\n        <>\n          <AddressSummaryRecipient />\n          <AddressSummaryStreet />\n          <AddressSummaryLocality />\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Who the delivery is addressed to. Renders nothing when the address carries no recipient. */\nexport function AddressSummaryRecipient({ className }: AddressSummaryLineProps) {\n  const { recipientName } = useAddressSummary();\n  if (!recipientName) return null;\n  return (\n    <p className={className} data-fs-address-summary-recipient=\"\">\n      {recipientName}\n    </p>\n  );\n}\n\n/** Street, number and complement on one line. Renders nothing when all three are absent. */\nexport function AddressSummaryStreet({ className }: AddressSummaryLineProps) {\n  const { street, number, complement } = useAddressSummary();\n  const line = [[street, number].filter(Boolean).join(', '), complement].filter(Boolean).join(' - ');\n  if (!line) return null;\n  return (\n    <p className={className} data-fs-address-summary-address=\"\">\n      {line}\n    </p>\n  );\n}\n\n/** Neighborhood, city, state and postal code on one line. Renders nothing when all are absent. */\nexport function AddressSummaryLocality({ className }: AddressSummaryLineProps) {\n  const { neighborhood, city, state, postalCode } = useAddressSummary();\n  const line = [neighborhood, [city, state].filter(Boolean).join(' - '), postalCode].filter(Boolean).join(', ');\n  if (!line) return null;\n  return (\n    <p className={className} data-fs-address-summary-locality=\"\">\n      {line}\n    </p>\n  );\n}\n\n/** The shopper's own label for the address. Renders nothing when the address carries no name. */\nexport function AddressSummaryName({ className }: AddressSummaryNameProps) {\n  const { name } = useAddressSummary();\n  if (!name) return null;\n  return (\n    <p className={className} data-fs-address-summary-name=\"\">\n      {name}\n    </p>\n  );\n}\n\n/** The address's country, shown as provided. Renders nothing when the address carries no country. */\nexport function AddressSummaryCountry({ className }: AddressSummaryCountryProps) {\n  const { country } = useAddressSummary();\n  if (!country) return null;\n  return (\n    <p className={className} data-fs-address-summary-country=\"\">\n      {country}\n    </p>\n  );\n}\n\n/** One address field, rendered inline. Renders nothing when that field is absent. */\nexport function AddressSummaryField({ field, className }: AddressSummaryFieldProps) {\n  const address = useAddressSummary();\n  const value = address[field];\n  if (!value) return null;\n  return (\n    <span className={className} data-fs-address-summary-field={field}>\n      {value}\n    </span>\n  );\n}\n"],"mappings":"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"}

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

@@ -15,6 +15,8 @@ export type AlertDialogRootProps = Readonly<{
 export type AlertDialogTriggerProps = ComponentPropsWithRef<'button'>;
 export type AlertDialogPortalProps = Readonly<{
   children?: ReactNode;
+  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */
+  container?: ComponentProps<typeof AlertDialog.Portal>['container'];
 }>;
 export type AlertDialogBackdropProps = ComponentPropsWithRef<'div'>;
 export type AlertDialogViewportProps = ComponentPropsWithRef<'div'>;
@@ -36,6 +38,8 @@ export declare const AlertDialogRootDefinition: ComponentDefinition<Readonly<{
 export declare const AlertDialogTriggerDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
 export declare const AlertDialogPortalDefinition: ComponentDefinition<Readonly<{
   children?: ReactNode;
+  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */
+  container?: ComponentProps<typeof AlertDialog.Portal>["container"];
 }>>;
 export declare const AlertDialogBackdropDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export declare const AlertDialogViewportDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
@@ -45,7 +49,7 @@ export declare const AlertDialogDescriptionDefinition: ComponentDefinition<impor
 export declare const AlertDialogCloseDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
 export declare function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialogRootProps): import("react/jsx-runtime").JSX.Element;
 export declare function AlertDialogTrigger({ className, children, ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
-export declare function AlertDialogPortal({ children }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogPortal({ children, container }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
 export declare function AlertDialogBackdrop({ className, children, ...props }: AlertDialogBackdropProps): import("react/jsx-runtime").JSX.Element;
 export declare function AlertDialogViewport({ className, children, ...props }: AlertDialogViewportProps): import("react/jsx-runtime").JSX.Element;
 export declare function AlertDialogPopup({ className, children, ...props }: AlertDialogPopupProps): import("react/jsx-runtime").JSX.Element;

package/dist/particles/alert-dialog/alert-dialog.js

@@ -119,8 +119,11 @@ function AlertDialogTrigger({ className, children, ...props }) {
 		children
 	});
 }
-function AlertDialogPortal({ children }) {
-	return /* @__PURE__ */ jsx(AlertDialog.Portal, { children });
+function AlertDialogPortal({ children, container }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		container,
+		children
+	});
 }
 function AlertDialogBackdrop({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["BaseAlertDialog","AlertDialog"],"sources":["../../../src/particles/alert-dialog/alert-dialog.tsx"],"sourcesContent":["'use client';\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';\n\ntype BasePopupProps = ComponentProps<typeof BaseAlertDialog.Popup>;\n\nexport type AlertDialogRootProps = Readonly<{\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n}>;\n\nexport type AlertDialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type AlertDialogPortalProps = Readonly<{\n  children?: ReactNode;\n}>;\n\nexport type AlertDialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogPopupProps = ComponentPropsWithRef<'div'> & {\n  initialFocus?: BasePopupProps['initialFocus'];\n  finalFocus?: BasePopupProps['finalFocus'];\n};\n\nexport type AlertDialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type AlertDialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const AlertDialogRootDefinition = defineComponent<AlertDialogRootProps>({\n  name: 'AlertDialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogRoot,\n  editor: { label: 'Alert Dialog Root', category: 'layout' },\n  schema: {},\n  guideline:\n    'Root of a confirmation prompt for an irreversible action. Compose as: AlertDialogRoot > (AlertDialogTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AlertDialogTitle + AlertDialogDescription + AlertDialogClose + your confirm Button))). Always modal and never closes on an outside click; only Escape or an AlertDialogClose dismisses it. Use Dialog instead when a stray click may close the overlay.',\n});\n\nexport const AlertDialogTriggerDefinition = defineComponent<AlertDialogTriggerProps>({\n  name: 'AlertDialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTrigger,\n  editor: { label: 'Alert Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the alert dialog when clicked. Direct child of AlertDialogRoot. Accepts any children (text, Icon). Base UI connects it to AlertDialogRoot via context — no explicit wiring needed.',\n});\n\nexport const AlertDialogPortalDefinition = defineComponent<AlertDialogPortalProps>({\n  name: 'AlertDialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPortal,\n  editor: { label: 'Alert Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body). Place AlertDialogBackdrop and AlertDialogViewport as direct children, in that order.',\n});\n\nexport const AlertDialogBackdropDefinition = defineComponent<AlertDialogBackdropProps>({\n  name: 'AlertDialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogBackdrop,\n  editor: { label: 'Alert Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of AlertDialogPortal, before AlertDialogViewport. Clicking it does not close the alert dialog.',\n});\n\nexport const AlertDialogViewportDefinition = defineComponent<AlertDialogViewportProps>({\n  name: 'AlertDialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogViewport,\n  editor: { label: 'Alert Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for AlertDialogPopup. Direct child of AlertDialogPortal, after AlertDialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place AlertDialogPopup inside.',\n});\n\nexport const AlertDialogPopupDefinition = defineComponent<AlertDialogPopupProps>({\n  name: 'AlertDialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPopup,\n  editor: { label: 'Alert Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible prompt, inside AlertDialogViewport, with role alertdialog. Place AlertDialogTitle (required), AlertDialogDescription, an AlertDialogClose for cancel, and a confirm Button inside. Focus starts on the first focusable element, except when opened by touch, where Base UI focuses the popup itself: put the cancel control first, and pass initialFocus (a ref) when Cancel must receive focus for every kind of interaction.',\n});\n\nexport const AlertDialogTitleDefinition = defineComponent<AlertDialogTitleProps>({\n  name: 'AlertDialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTitle,\n  editor: { label: 'Alert Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside AlertDialogPopup — sets the accessible name of the alert dialog for screen readers. State the question, e.g. \"Delete this address?\".',\n});\n\nexport const AlertDialogDescriptionDefinition = defineComponent<AlertDialogDescriptionProps>({\n  name: 'AlertDialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogDescription,\n  editor: { label: 'Alert Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Description inside AlertDialogPopup, after AlertDialogTitle. Screen readers announce it with the prompt, so use it to state the consequence of confirming.',\n});\n\nexport const AlertDialogCloseDefinition = defineComponent<AlertDialogCloseProps>({\n  name: 'AlertDialogClose',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogClose,\n  editor: { label: 'Alert Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the alert dialog when clicked. Use it for the cancel control inside AlertDialogPopup. The confirm control is a separate Button that runs the consumer action.',\n});\n\nexport function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialogRootProps) {\n  return (\n    <BaseAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {children}\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport function AlertDialogTrigger({ className, children, ...props }: AlertDialogTriggerProps) {\n  return (\n    <BaseAlertDialog.Trigger {...props} className={className} data-fs-alert-dialog-trigger=\"\">\n      {children}\n    </BaseAlertDialog.Trigger>\n  );\n}\n\nexport function AlertDialogPortal({ children }: AlertDialogPortalProps) {\n  return <BaseAlertDialog.Portal>{children}</BaseAlertDialog.Portal>;\n}\n\nexport function AlertDialogBackdrop({ className, children, ...props }: AlertDialogBackdropProps) {\n  return (\n    <BaseAlertDialog.Backdrop {...props} className={className} data-fs-alert-dialog-backdrop=\"\">\n      {children}\n    </BaseAlertDialog.Backdrop>\n  );\n}\n\nexport function AlertDialogViewport({ className, children, ...props }: AlertDialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-alert-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function AlertDialogPopup({ className, children, ...props }: AlertDialogPopupProps) {\n  return (\n    <BaseAlertDialog.Popup {...props} className={className} data-fs-alert-dialog-popup=\"\">\n      {children}\n    </BaseAlertDialog.Popup>\n  );\n}\n\nexport function AlertDialogTitle({ className, children, ...props }: AlertDialogTitleProps) {\n  return (\n    <BaseAlertDialog.Title {...props} className={className} data-fs-alert-dialog-title=\"\">\n      {children}\n    </BaseAlertDialog.Title>\n  );\n}\n\nexport function AlertDialogDescription({ className, children, ...props }: AlertDialogDescriptionProps) {\n  return (\n    <BaseAlertDialog.Description {...props} className={className} data-fs-alert-dialog-description=\"\">\n      {children}\n    </BaseAlertDialog.Description>\n  );\n}\n\nexport function AlertDialogClose({ className, children, ...props }: AlertDialogCloseProps) {\n  return (\n    <BaseAlertDialog.Close {...props} className={className} data-fs-alert-dialog-close=\"\">\n      {children}\n    </BaseAlertDialog.Close>\n  );\n}\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Close: AlertDialogClose,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","names":["BaseAlertDialog","AlertDialog"],"sources":["../../../src/particles/alert-dialog/alert-dialog.tsx"],"sourcesContent":["'use client';\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';\n\ntype BasePopupProps = ComponentProps<typeof BaseAlertDialog.Popup>;\n\nexport type AlertDialogRootProps = Readonly<{\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: { isCanceled: boolean }) => void;\n  children?: ReactNode;\n}>;\n\nexport type AlertDialogTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type AlertDialogPortalProps = Readonly<{\n  children?: ReactNode;\n  /** Parent element for the overlay. Omit it and the overlay renders on `document.body`. */\n  container?: ComponentProps<typeof BaseAlertDialog.Portal>['container'];\n}>;\n\nexport type AlertDialogBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogViewportProps = ComponentPropsWithRef<'div'>;\n\nexport type AlertDialogPopupProps = ComponentPropsWithRef<'div'> & {\n  initialFocus?: BasePopupProps['initialFocus'];\n  finalFocus?: BasePopupProps['finalFocus'];\n};\n\nexport type AlertDialogTitleProps = ComponentPropsWithRef<'h2'>;\n\nexport type AlertDialogDescriptionProps = ComponentPropsWithRef<'p'>;\n\nexport type AlertDialogCloseProps = ComponentPropsWithRef<'button'>;\n\nexport const AlertDialogRootDefinition = defineComponent<AlertDialogRootProps>({\n  name: 'AlertDialogRoot',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogRoot,\n  editor: { label: 'Alert Dialog Root', category: 'layout' },\n  schema: {},\n  guideline:\n    'Root of a confirmation prompt for an irreversible action. Compose as: AlertDialogRoot > (AlertDialogTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AlertDialogTitle + AlertDialogDescription + AlertDialogClose + your confirm Button))). Always modal and never closes on an outside click; only Escape or an AlertDialogClose dismisses it. Use Dialog instead when a stray click may close the overlay.',\n});\n\nexport const AlertDialogTriggerDefinition = defineComponent<AlertDialogTriggerProps>({\n  name: 'AlertDialogTrigger',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTrigger,\n  editor: { label: 'Alert Dialog Trigger', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the alert dialog when clicked. Direct child of AlertDialogRoot. Accepts any children (text, Icon). Base UI connects it to AlertDialogRoot via context — no explicit wiring needed.',\n});\n\nexport const AlertDialogPortalDefinition = defineComponent<AlertDialogPortalProps>({\n  name: 'AlertDialogPortal',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPortal,\n  editor: { label: 'Alert Dialog Portal', category: 'layout' },\n  schema: {},\n  guideline:\n    'Renders its children outside the DOM tree (into document.body). Place AlertDialogBackdrop and AlertDialogViewport as direct children, in that order.',\n});\n\nexport const AlertDialogBackdropDefinition = defineComponent<AlertDialogBackdropProps>({\n  name: 'AlertDialogBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogBackdrop,\n  editor: { label: 'Alert Dialog Backdrop', category: 'layout' },\n  schema: {},\n  guideline:\n    'Semi-transparent overlay behind the popup. Direct child of AlertDialogPortal, before AlertDialogViewport. Clicking it does not close the alert dialog.',\n});\n\nexport const AlertDialogViewportDefinition = defineComponent<AlertDialogViewportProps>({\n  name: 'AlertDialogViewport',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogViewport,\n  editor: { label: 'Alert Dialog Viewport', category: 'layout' },\n  schema: {},\n  guideline:\n    'Positioning container for AlertDialogPopup. Direct child of AlertDialogPortal, after AlertDialogBackdrop. Apply fixed positioning and centering here (e.g. fixed inset-0 flex items-center justify-center). Place AlertDialogPopup inside.',\n});\n\nexport const AlertDialogPopupDefinition = defineComponent<AlertDialogPopupProps>({\n  name: 'AlertDialogPopup',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogPopup,\n  editor: { label: 'Alert Dialog Popup', category: 'layout' },\n  schema: {},\n  guideline:\n    'The visible prompt, inside AlertDialogViewport, with role alertdialog. Place AlertDialogTitle (required), AlertDialogDescription, an AlertDialogClose for cancel, and a confirm Button inside. Focus starts on the first focusable element, except when opened by touch, where Base UI focuses the popup itself: put the cancel control first, and pass initialFocus (a ref) when Cancel must receive focus for every kind of interaction.',\n});\n\nexport const AlertDialogTitleDefinition = defineComponent<AlertDialogTitleProps>({\n  name: 'AlertDialogTitle',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogTitle,\n  editor: { label: 'Alert Dialog Title', category: 'layout' },\n  schema: {},\n  guideline:\n    'Required heading inside AlertDialogPopup — sets the accessible name of the alert dialog for screen readers. State the question, e.g. \"Delete this address?\".',\n});\n\nexport const AlertDialogDescriptionDefinition = defineComponent<AlertDialogDescriptionProps>({\n  name: 'AlertDialogDescription',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogDescription,\n  editor: { label: 'Alert Dialog Description', category: 'layout' },\n  schema: {},\n  guideline:\n    'Description inside AlertDialogPopup, after AlertDialogTitle. Screen readers announce it with the prompt, so use it to state the consequence of confirming.',\n});\n\nexport const AlertDialogCloseDefinition = defineComponent<AlertDialogCloseProps>({\n  name: 'AlertDialogClose',\n  importPath: '@vtex/faststore/components',\n  component: AlertDialogClose,\n  editor: { label: 'Alert Dialog Close', category: 'action' },\n  schema: {},\n  guideline:\n    'Closes the alert dialog when clicked. Use it for the cancel control inside AlertDialogPopup. The confirm control is a separate Button that runs the consumer action.',\n});\n\nexport function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialogRootProps) {\n  return (\n    <BaseAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {children}\n    </BaseAlertDialog.Root>\n  );\n}\n\nexport function AlertDialogTrigger({ className, children, ...props }: AlertDialogTriggerProps) {\n  return (\n    <BaseAlertDialog.Trigger {...props} className={className} data-fs-alert-dialog-trigger=\"\">\n      {children}\n    </BaseAlertDialog.Trigger>\n  );\n}\n\nexport function AlertDialogPortal({ children, container }: AlertDialogPortalProps) {\n  return <BaseAlertDialog.Portal container={container}>{children}</BaseAlertDialog.Portal>;\n}\n\nexport function AlertDialogBackdrop({ className, children, ...props }: AlertDialogBackdropProps) {\n  return (\n    <BaseAlertDialog.Backdrop {...props} className={className} data-fs-alert-dialog-backdrop=\"\">\n      {children}\n    </BaseAlertDialog.Backdrop>\n  );\n}\n\nexport function AlertDialogViewport({ className, children, ...props }: AlertDialogViewportProps) {\n  return (\n    <div {...props} className={className} data-fs-alert-dialog-viewport=\"\">\n      {children}\n    </div>\n  );\n}\n\nexport function AlertDialogPopup({ className, children, ...props }: AlertDialogPopupProps) {\n  return (\n    <BaseAlertDialog.Popup {...props} className={className} data-fs-alert-dialog-popup=\"\">\n      {children}\n    </BaseAlertDialog.Popup>\n  );\n}\n\nexport function AlertDialogTitle({ className, children, ...props }: AlertDialogTitleProps) {\n  return (\n    <BaseAlertDialog.Title {...props} className={className} data-fs-alert-dialog-title=\"\">\n      {children}\n    </BaseAlertDialog.Title>\n  );\n}\n\nexport function AlertDialogDescription({ className, children, ...props }: AlertDialogDescriptionProps) {\n  return (\n    <BaseAlertDialog.Description {...props} className={className} data-fs-alert-dialog-description=\"\">\n      {children}\n    </BaseAlertDialog.Description>\n  );\n}\n\nexport function AlertDialogClose({ className, children, ...props }: AlertDialogCloseProps) {\n  return (\n    <BaseAlertDialog.Close {...props} className={className} data-fs-alert-dialog-close=\"\">\n      {children}\n    </BaseAlertDialog.Close>\n  );\n}\n\nexport const AlertDialog = {\n  Root: AlertDialogRoot,\n  Trigger: AlertDialogTrigger,\n  Portal: AlertDialogPortal,\n  Backdrop: AlertDialogBackdrop,\n  Viewport: AlertDialogViewport,\n  Popup: AlertDialogPopup,\n  Title: AlertDialogTitle,\n  Description: AlertDialogDescription,\n  Close: AlertDialogClose,\n};\n"],"mappings":"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"}

package/dist/particles/binding-switcher/binding-switcher.d.ts

@@ -0,0 +1,38 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/binding-switcher/binding-switcher.d.ts
+export type BindingSwitcherBinding = {
+  locale?: unknown;
+  currency?: unknown;
+  salesChannel?: unknown;
+  url?: unknown;
+  country?: unknown;
+  timezone?: unknown;
+};
+/**
+ * `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an
+ * own key, the value is a non-null object, and `locale` is a string. Fewer than two counted
+ * entries yields an empty list.
+ */
+export declare function bindingSwitcherOptions(bindings: Record<string, BindingSwitcherBinding> | null | undefined, activeLocale: string): {
+  id: string;
+  label: string;
+}[];
+export declare const NOTICE_DEFAULT = "This page isn't available in the selected language.";
+export declare const LABEL_DEFAULT = "Language";
+export type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /** `foundation.json` `localization.bindings`, keyed by binding id. No library default. */
+  bindings?: Record<string, BindingSwitcherBinding> | null;
+  /** Accessible name, rendered as `Select.Label`. */
+  label?: string;
+  /** Shown when the page loaded with `fs_notice=no-equivalent`. */
+  notice?: string;
+  /** Injected from `actions: { locale: ['set'] }`. */
+  $actions?: ComponentActions;
+};
+export declare const BindingSwitcherDefinition: ComponentDefinition<BindingSwitcherProps>;
+export declare function BindingSwitcher({ bindings, label, notice, $actions: $actionsProp, className, ...props }: BindingSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=binding-switcher.d.ts.map