@vtex/faststore 0.0.6 → 0.0.8

package/dist/particles/logo/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","names":[],"sources":["../../../src/particles/logo/logo.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { Image } from '../image/image.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// `src` declares no `format`: a store's logo is usually a root-relative path served from its\n// `public/` folder (`/logo.svg`), which JSON Schema's `uri` format rejects.\nexport const LogoContent = defineContentType({\n  id: 'logo',\n  title: 'Logo',\n  description: 'Brand logo asset, alt text, and link destination.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // `src` is optional so an entry authoring `alt` alone still validates: a slice missing a\n    // required property is shape-invalid, and the boundary drops the element instead of the field.\n    required: ['alt'],\n    properties: {\n      src: { type: 'string', minLength: 1, title: 'Source URL', widget: { 'ui:widget': 'media-gallery' } },\n      alt: { type: 'string', minLength: 1, title: 'Alt text' },\n      href: {\n        type: 'string',\n        minLength: 1,\n        title: 'Link destination',\n        format: 'uri-reference',\n        // The set `resolveSafeHref` admits, so the Admin form cannot reject a destination the render\n        // gate would have kept. Author-time only and lookahead-free, as in the sibling particles.\n        pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n      },\n    },\n  },\n});\n\n/** Props for {@link Logo}. Extends native `<div>` attributes (the styling root). */\nexport type LogoProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** Brand logo asset URL. Optional: the render gate, not the type, requires a resolved value. */\n  src?: string;\n  /** Accessible alt text. Optional: the render gate, not the type, requires a resolved value. */\n  alt?: string;\n  /** Navigation destination; defaults to the configured home. Dropped when it fails the safety check. */\n  href?: string;\n  /** Image loading strategy. `eager` suits the above-the-fold header; author `lazy` below it. */\n  loading?: 'lazy' | 'eager';\n  /** Merchant-authored logo, sliced from the page/layout content entry; wins over the props when\n   *  present. Absent in a non-CMS store — the props are the fallback. */\n  $content?: ContentValue<typeof LogoContent>;\n};\n\nexport const LogoDefinition = defineComponent<LogoProps>({\n  name: 'Logo',\n  importPath: '@vtex/faststore/components',\n  component: Logo,\n  content: LogoContent,\n  editor: { label: 'Logo', category: 'content' },\n  schema: {\n    src: { type: 'string', label: 'Source URL' },\n    alt: { type: 'string', label: 'Alt Text' },\n    href: { type: 'string', default: '/', label: 'Link Destination' },\n    loading: { type: ['lazy', 'eager'] as const, default: 'eager', label: 'Loading' },\n  },\n  guideline:\n    'Brand logo linking to the configured home; a CMS entry overrides its src, alt, and href at runtime. Every prop is optional: an element bound to a CMS entry should author none of them, so an unconfigured store renders no logo instead of a placeholder. Author src and alt only where no entry supplies them, never as a fallback beside one. Size it responsively with a swatch on data-fs-logo, and reach the mark itself through data-fs-logo-image. A destination that is not an http, https, mailto, tel, or site-relative URL is dropped and the image renders unlinked. Loads eagerly for the above-the-fold header; set loading to lazy below the fold. Composes the Image and NavigationLink particles.',\n});\n\nexport function Logo({ src, alt, href = '/', loading = 'eager', $content, className, ...props }: LogoProps) {\n  // The optional content fields fall through when blank, so clearing one in the Admin reads as\n  // unauthored. `alt` is required in the model, so a blank value is a violation the gate rejects.\n  const logoSrc = $content?.src?.trim() ? $content.src : src;\n  const logoAlt = $content?.alt ?? alt;\n  const logoHref = $content?.href?.trim() ? $content.href : href;\n\n  if (!logoSrc || !logoAlt?.trim()) {\n    return null;\n  }\n\n  // No read-time validator enforces `format` or `pattern`, so this is the only gate on the CMS value.\n  const destination = resolveSafeHref(logoHref);\n  if (!destination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[Logo] link destination rejected', { reason: destination.reason });\n  }\n\n  const image = <Image src={logoSrc} alt={logoAlt} loading={loading} data-fs-logo-image=\"\" />;\n\n  return (\n    <div {...props} className={className} data-fs-logo=\"\">\n      {destination.safe ? <NavigationLink href={destination.href}>{image}</NavigationLink> : image}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,kBAAkB;CAC3C,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAGtB,UAAU,CAAC,KAAK;EAChB,YAAY;GACV,KAAK;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;IAAc,QAAQ,EAAE,aAAa,gBAAgB;GAAE;GACnG,KAAK;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;GAAW;GACvD,MAAM;IACJ,MAAM;IACN,WAAW;IACX,OAAO;IACP,QAAQ;IAGR,SAAS;GACX;EACF;CACF;AACF,CAAC;AAiBD,MAAa,iBAAiB,gBAA2B;CACvD,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAQ,UAAU;CAAU;CAC7C,QAAQ;EACN,KAAK;GAAE,MAAM;GAAU,OAAO;EAAa;EAC3C,KAAK;GAAE,MAAM;GAAU,OAAO;EAAW;EACzC,MAAM;GAAE,MAAM;GAAU,SAAS;GAAK,OAAO;EAAmB;EAChE,SAAS;GAAE,MAAM,CAAC,QAAQ,OAAO;GAAY,SAAS;GAAS,OAAO;EAAU;CAClF;CACA,WACE;AACJ,CAAC;AAED,SAAgB,KAAK,EAAE,KAAK,KAAK,OAAO,KAAK,UAAU,SAAS,UAAU,WAAW,GAAG,SAAoB;CAG1G,MAAM,UAAU,UAAU,KAAK,KAAK,IAAI,SAAS,MAAM;CACvD,MAAM,UAAU,UAAU,OAAO;CACjC,MAAM,WAAW,UAAU,MAAM,KAAK,IAAI,SAAS,OAAO;CAE1D,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,GAC7B,OAAO;CAIT,MAAM,cAAc,gBAAgB,QAAQ;CAC5C,IAAI,CAAC,YAAY,MAEf,QAAQ,KAAK,oCAAoC,EAAE,QAAQ,YAAY,OAAO,CAAC;CAGjF,MAAM,QAAQ,oBAAC,OAAD;EAAO,KAAK;EAAS,KAAK;EAAkB;EAAS,sBAAmB;CAAI,CAAA;CAE1F,OACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,gBAAa;EAChD,UAAA,YAAY,OAAO,oBAAC,gBAAD;GAAgB,MAAM,YAAY;GAAO,UAAA;EAAsB,CAAA,IAAI;CACpF,CAAA;AAET"}
+{"version":3,"file":"logo.js","names":[],"sources":["../../../src/particles/logo/logo.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { Image } from '../image/image.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// `src` declares no `format`: a store's logo is usually a root-relative path served from its\n// `public/` folder (`/logo.svg`), which JSON Schema's `uri` format rejects.\nexport const LogoContent = defineContentType({\n  id: 'logo',\n  title: 'Logo',\n  description: 'Brand logo asset, alt text, and link destination.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // `src` is optional so an entry authoring `alt` alone still validates: a slice missing a\n    // required property is shape-invalid, and the boundary drops the element instead of the field.\n    required: ['alt'],\n    properties: {\n      src: { type: 'string', minLength: 1, title: 'Source URL', widget: { 'ui:widget': 'media-gallery' } },\n      alt: { type: 'string', minLength: 1, title: 'Alt text' },\n      href: {\n        type: 'string',\n        minLength: 1,\n        title: 'Link destination',\n        format: 'uri-reference',\n        // The set `resolveSafeHref` admits, so the Admin form cannot reject a destination the render\n        // gate would have kept. Author-time only and lookahead-free, as in the sibling particles.\n        pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n      },\n    },\n  },\n});\n\n/** Props for {@link Logo}. Extends native `<div>` attributes (the styling root). */\nexport type LogoProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** Brand logo asset URL. Optional: the render gate, not the type, requires a resolved value. */\n  src?: string;\n  /** Accessible alt text. Optional: the render gate, not the type, requires a resolved value. */\n  alt?: string;\n  /** Navigation destination; defaults to the home page. A string that fails the safety check is dropped. */\n  href?: PageRef | string;\n  /** Image loading strategy. `eager` suits the above-the-fold header; author `lazy` below it. */\n  loading?: 'lazy' | 'eager';\n  /** Merchant-authored logo, sliced from the page/layout content entry; wins over the props when\n   *  present. Absent in a non-CMS store — the props are the fallback. */\n  $content?: ContentValue<typeof LogoContent>;\n};\n\nexport const LogoDefinition = defineComponent<LogoProps>({\n  name: 'Logo',\n  importPath: '@vtex/faststore/components',\n  component: Logo,\n  content: LogoContent,\n  editor: { label: 'Logo', category: 'content' },\n  schema: {\n    src: { type: 'string', label: 'Source URL' },\n    alt: { type: 'string', label: 'Alt Text' },\n    href: { type: 'link', default: { standard: 'home' }, label: 'Link Destination' },\n    loading: { type: ['lazy', 'eager'] as const, default: 'eager', label: 'Loading' },\n  },\n  guideline:\n    'Brand logo linking to the configured home; a CMS entry overrides its src, alt, and href at runtime. Every prop is optional: an element bound to a CMS entry should author none of them, so an unconfigured store renders no logo instead of a placeholder. Author src and alt only where no entry supplies them, never as a fallback beside one. Size it responsively with a swatch on data-fs-logo, and reach the mark itself through data-fs-logo-image. A destination that is not an http, https, mailto, tel, or site-relative URL is dropped and the image renders unlinked. Loads eagerly for the above-the-fold header; set loading to lazy below the fold. Composes the Image and NavigationLink particles.',\n});\n\nexport function Logo({\n  src,\n  alt,\n  href = { standard: 'home' },\n  loading = 'eager',\n  $content,\n  className,\n  ...props\n}: LogoProps) {\n  // The optional content fields fall through when blank, so clearing one in the Admin reads as\n  // unauthored. `alt` is required in the model, so a blank value is a violation the gate rejects.\n  const logoSrc = $content?.src?.trim() ? $content.src : src;\n  const logoAlt = $content?.alt ?? alt;\n  // A non-blank CMS string wins, and a refusal drops the link rather than falling back to the prop.\n  const logoHref = $content?.href?.trim() ? $content.href : href;\n\n  if (!logoSrc || !logoAlt?.trim()) {\n    return null;\n  }\n\n  const destination = resolveLogoHref(logoHref);\n  const image = <Image src={logoSrc} alt={logoAlt} loading={loading} data-fs-logo-image=\"\" />;\n\n  return (\n    <div {...props} className={className} data-fs-logo=\"\">\n      {destination === null ? image : <NavigationLink href={destination}>{image}</NavigationLink>}\n    </div>\n  );\n}\n\n/**\n * A page reference skips the string allowlist. A string is checked, and a refusal drops the link.\n * No read-time validator enforces `format` or `pattern`, so this is the only gate on a CMS string.\n */\nfunction resolveLogoHref(href: PageRef | string): PageRef | string | null {\n  if (typeof href !== 'string') return href;\n\n  const destination = resolveSafeHref(href);\n  if (!destination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[Logo] link destination rejected', { reason: destination.reason });\n    return null;\n  }\n\n  return destination.href;\n}\n"],"mappings":";;;;;;;;AASA,MAAa,cAAc,kBAAkB;CAC3C,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAGtB,UAAU,CAAC,KAAK;EAChB,YAAY;GACV,KAAK;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;IAAc,QAAQ,EAAE,aAAa,gBAAgB;GAAE;GACnG,KAAK;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;GAAW;GACvD,MAAM;IACJ,MAAM;IACN,WAAW;IACX,OAAO;IACP,QAAQ;IAGR,SAAS;GACX;EACF;CACF;AACF,CAAC;AAiBD,MAAa,iBAAiB,gBAA2B;CACvD,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAQ,UAAU;CAAU;CAC7C,QAAQ;EACN,KAAK;GAAE,MAAM;GAAU,OAAO;EAAa;EAC3C,KAAK;GAAE,MAAM;GAAU,OAAO;EAAW;EACzC,MAAM;GAAE,MAAM;GAAQ,SAAS,EAAE,UAAU,OAAO;GAAG,OAAO;EAAmB;EAC/E,SAAS;GAAE,MAAM,CAAC,QAAQ,OAAO;GAAY,SAAS;GAAS,OAAO;EAAU;CAClF;CACA,WACE;AACJ,CAAC;AAED,SAAgB,KAAK,EACnB,KACA,KACA,OAAO,EAAE,UAAU,OAAO,GAC1B,UAAU,SACV,UACA,WACA,GAAG,SACS;CAGZ,MAAM,UAAU,UAAU,KAAK,KAAK,IAAI,SAAS,MAAM;CACvD,MAAM,UAAU,UAAU,OAAO;CAEjC,MAAM,WAAW,UAAU,MAAM,KAAK,IAAI,SAAS,OAAO;CAE1D,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,GAC7B,OAAO;CAGT,MAAM,cAAc,gBAAgB,QAAQ;CAC5C,MAAM,QAAQ,oBAAC,OAAD;EAAO,KAAK;EAAS,KAAK;EAAkB;EAAS,sBAAmB;CAAI,CAAA;CAE1F,OACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,gBAAa;EAChD,UAAA,gBAAgB,OAAO,QAAQ,oBAAC,gBAAD;GAAgB,MAAM;GAAc,UAAA;EAAsB,CAAA;CACvF,CAAA;AAET;;;;;AAMA,SAAS,gBAAgB,MAAiD;CACxE,IAAI,OAAO,SAAS,UAAU,OAAO;CAErC,MAAM,cAAc,gBAAgB,IAAI;CACxC,IAAI,CAAC,YAAY,MAAM;EAErB,QAAQ,KAAK,oCAAoC,EAAE,QAAQ,YAAY,OAAO,CAAC;EAC/E,OAAO;CACT;CAEA,OAAO,YAAY;AACrB"}

package/dist/particles/navigation-link/navigation-link.d.ts

@@ -1,8 +1,7 @@
 import { ContentValue } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
-import { ComponentPropsWithRef } from "react";
-import Link from "next/link";
+import { StorefrontLinkProps } from "../../sdk/navigation/storefront-link.js";
 //#region src/particles/navigation-link/navigation-link.d.ts
 export declare const NavigationLinkContent: {
   readonly id: "navigation-link";
@@ -32,7 +31,7 @@ export declare const NavigationLinkContent: {
     };
   };
 };
-export type NavigationLinkProps = ComponentPropsWithRef<typeof Link> & {
+export type NavigationLinkProps = StorefrontLinkProps & {
   /** Merchant-authored link, sliced from the page/layout content entry; wins over the props field by
    *  field when present. Absent in a non-CMS store — the props are the fallback. */
   $content?: ContentValue<typeof NavigationLinkContent>;

package/dist/particles/navigation-link/navigation-link.js

@@ -3,8 +3,8 @@ import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { resolveSafeHref } from "../../utils/safe-href.js";
+import { StorefrontLink } from "../../sdk/navigation/storefront-link.js";
 import { jsx } from "react/jsx-runtime";
-import Link from "next/link";
 //#region src/particles/navigation-link/navigation-link.tsx
 const NavigationLinkContent = defineContentType({
 	id: "navigation-link",
@@ -45,7 +45,7 @@ const NavigationLinkDefinition = defineComponent({
 	},
 	schema: {
 		href: {
-			type: "string",
+			type: "link",
 			label: "URL"
 		},
 		target: {
@@ -54,7 +54,7 @@ const NavigationLinkDefinition = defineComponent({
 			label: "Target"
 		}
 	},
-	guideline: "Client-side navigation link built on Next.js Link. Use for all internal navigation to avoid full-page reloads. Set target to _blank to open the destination in a new tab; when you do, write an \"(opens in new tab)\" cue into the link text, because the component adds no announcement of its own. A CMS entry overrides the link text, href, and target at runtime; a destination it supplies that is not an http, https, mailto, tel, or site-relative URL is refused and the authored href stands."
+	guideline: "Client-side navigation link that renders StorefrontLink, where href is a page reference or a logical path. Use for all internal navigation to avoid full-page reloads. Set target to _blank to open the destination in a new tab; when you do, write an \"(opens in new tab)\" cue into the link text, because the component adds no announcement of its own. A CMS entry overrides the link text, href, and target at runtime; a destination it supplies that is not an http, https, mailto, tel, or site-relative URL is refused and the authored href stands."
 });
 function NavigationLink({ href, className, children, target, rel, $content, ...props }) {
 	const entryDestination = $content?.href?.trim() ? resolveSafeHref($content.href) : null;
@@ -66,7 +66,7 @@ function NavigationLink({ href, className, children, target, rel, $content, ...p
 	const relTokens = rel?.split(/\s+/).filter(Boolean) ?? [];
 	const present = new Set(relTokens.map((token) => token.toLowerCase()));
 	const safeRel = opensNewTab ? [...relTokens, ...["noopener", "noreferrer"].filter((token) => !present.has(token))].join(" ") : rel;
-	return /* @__PURE__ */ jsx(Link, {
+	return /* @__PURE__ */ jsx(StorefrontLink, {
 		...props,
 		href: linkHref,
 		target: linkTarget,

package/dist/particles/navigation-link/navigation-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-link.js","names":[],"sources":["../../../src/particles/navigation-link/navigation-link.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport Link from 'next/link';\nimport type { ComponentPropsWithRef } from 'react';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\n\n// Only `text` is required — an entry that just retitles a link should not force the merchant to\n// retype its destination.\nexport const NavigationLinkContent = defineContentType({\n  id: 'navigation-link',\n  title: 'Navigation Link',\n  description: 'Link label, destination, and whether it opens in a new tab.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    required: ['text'],\n    properties: {\n      text: { type: 'string', minLength: 1, title: 'Label' },\n      href: {\n        type: 'string',\n        title: 'Destination',\n        // `uri-reference` rather than `uri`, which rejects the root-relative paths most navigation\n        // targets are. Author-time guidance only and lookahead-free, as in the sibling particles;\n        // the empty alternative is this model's own, since clearing the field has to stay saveable.\n        format: 'uri-reference',\n        pattern: '^$|^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n      },\n      target: { type: 'string', enum: ['_self', '_blank'], title: 'Target' },\n    },\n  },\n});\n\nexport type NavigationLinkProps = ComponentPropsWithRef<typeof Link> & {\n  /** Merchant-authored link, sliced from the page/layout content entry; wins over the props field by\n   *  field when present. Absent in a non-CMS store — the props are the fallback. */\n  $content?: ContentValue<typeof NavigationLinkContent>;\n};\n\nexport const NavigationLinkDefinition = defineComponent<NavigationLinkProps>({\n  name: 'NavigationLink',\n  importPath: '@vtex/faststore/components',\n  component: NavigationLink,\n  content: NavigationLinkContent,\n  editor: { label: 'Navigation Link', category: 'navigation' },\n  schema: {\n    href: { type: 'string', label: 'URL' },\n    target: { type: ['_self', '_blank'] as const, default: '_self', label: 'Target' },\n  },\n  guideline:\n    'Client-side navigation link built on Next.js Link. Use for all internal navigation to avoid full-page reloads. Set target to _blank to open the destination in a new tab; when you do, write an \"(opens in new tab)\" cue into the link text, because the component adds no announcement of its own. A CMS entry overrides the link text, href, and target at runtime; a destination it supplies that is not an http, https, mailto, tel, or site-relative URL is refused and the authored href stands.',\n});\n\nexport function NavigationLink({ href, className, children, target, rel, $content, ...props }: NavigationLinkProps) {\n  // Resolve the entry before deriving anything from `target`: a _blank arriving from the CMS needs the\n  // same tab-nabbing defense as an authored one. `href` and `text` fall back on a blank entry field so\n  // a cleared value keeps the authored link rather than emitting an empty destination or label.\n  // Only the entry's destination goes through the allowlist: the prop comes from the store's own\n  // source, while nothing enforces the model's shape on the value the Admin supplies. A refused\n  // destination falls back the same way a cleared one does.\n  const entryDestination = $content?.href?.trim() ? resolveSafeHref($content.href) : null;\n  if (entryDestination && !entryDestination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[NavigationLink] link destination rejected', { reason: entryDestination.reason });\n  }\n  const linkHref = entryDestination?.safe ? entryDestination.href : href;\n  const linkTarget = $content?.target ?? target;\n  const linkText = $content?.text?.trim() ? $content.text : children;\n\n  // Target keywords are ASCII case-insensitive per HTML, so _BLANK opens a new tab just like _blank.\n  const opensNewTab = linkTarget?.toLowerCase() === '_blank';\n  // Append rather than replace: a composing matter may pass its own rel, and the tab-nabbing defense has to survive it.\n  // Link types are case-insensitive too, so a caller-passed NOOPENER already counts as noopener.\n  const relTokens = rel?.split(/\\s+/).filter(Boolean) ?? [];\n  const present = new Set(relTokens.map((token) => token.toLowerCase()));\n  const safeRel = opensNewTab\n    ? [...relTokens, ...['noopener', 'noreferrer'].filter((token) => !present.has(token))].join(' ')\n    : rel;\n\n  return (\n    <Link {...props} href={linkHref} target={linkTarget} rel={safeRel} className={className} data-fs-navigation-link=\"\">\n      {linkText}\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;AASA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,UAAU,CAAC,MAAM;EACjB,YAAY;GACV,MAAM;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;GAAQ;GACrD,MAAM;IACJ,MAAM;IACN,OAAO;IAIP,QAAQ;IACR,SAAS;GACX;GACA,QAAQ;IAAE,MAAM;IAAU,MAAM,CAAC,SAAS,QAAQ;IAAG,OAAO;GAAS;EACvE;CACF;AACF,CAAC;AAQD,MAAa,2BAA2B,gBAAqC;CAC3E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAa;CAC3D,QAAQ;EACN,MAAM;GAAE,MAAM;GAAU,OAAO;EAAM;EACrC,QAAQ;GAAE,MAAM,CAAC,SAAS,QAAQ;GAAY,SAAS;GAAS,OAAO;EAAS;CAClF;CACA,WACE;AACJ,CAAC;AAED,SAAgB,eAAe,EAAE,MAAM,WAAW,UAAU,QAAQ,KAAK,UAAU,GAAG,SAA8B;CAOlH,MAAM,mBAAmB,UAAU,MAAM,KAAK,IAAI,gBAAgB,SAAS,IAAI,IAAI;CACnF,IAAI,oBAAoB,CAAC,iBAAiB,MAExC,QAAQ,KAAK,8CAA8C,EAAE,QAAQ,iBAAiB,OAAO,CAAC;CAEhG,MAAM,WAAW,kBAAkB,OAAO,iBAAiB,OAAO;CAClE,MAAM,aAAa,UAAU,UAAU;CACvC,MAAM,WAAW,UAAU,MAAM,KAAK,IAAI,SAAS,OAAO;CAG1D,MAAM,cAAc,YAAY,YAAY,MAAM;CAGlD,MAAM,YAAY,KAAK,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,KAAK,CAAC;CACxD,MAAM,UAAU,IAAI,IAAI,UAAU,KAAK,UAAU,MAAM,YAAY,CAAC,CAAC;CACrE,MAAM,UAAU,cACZ,CAAC,GAAG,WAAW,GAAG,CAAC,YAAY,YAAY,CAAC,CAAC,QAAQ,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAC7F;CAEJ,OACE,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;EAAU,QAAQ;EAAY,KAAK;EAAoB;EAAW,2BAAwB;EAC9G,UAAA;CACG,CAAA;AAEV"}
+{"version":3,"file":"navigation-link.js","names":[],"sources":["../../../src/particles/navigation-link/navigation-link.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { StorefrontLink, type StorefrontLinkProps } from '../../sdk/navigation/storefront-link.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\n\n// Only `text` is required — an entry that just retitles a link should not force the merchant to\n// retype its destination.\nexport const NavigationLinkContent = defineContentType({\n  id: 'navigation-link',\n  title: 'Navigation Link',\n  description: 'Link label, destination, and whether it opens in a new tab.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    required: ['text'],\n    properties: {\n      text: { type: 'string', minLength: 1, title: 'Label' },\n      href: {\n        type: 'string',\n        title: 'Destination',\n        // `uri-reference` rather than `uri`, which rejects the root-relative paths most navigation\n        // targets are. Author-time guidance only and lookahead-free, as in the sibling particles;\n        // the empty alternative is this model's own, since clearing the field has to stay saveable.\n        format: 'uri-reference',\n        pattern: '^$|^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n      },\n      target: { type: 'string', enum: ['_self', '_blank'], title: 'Target' },\n    },\n  },\n});\n\nexport type NavigationLinkProps = StorefrontLinkProps & {\n  /** Merchant-authored link, sliced from the page/layout content entry; wins over the props field by\n   *  field when present. Absent in a non-CMS store — the props are the fallback. */\n  $content?: ContentValue<typeof NavigationLinkContent>;\n};\n\nexport const NavigationLinkDefinition = defineComponent<NavigationLinkProps>({\n  name: 'NavigationLink',\n  importPath: '@vtex/faststore/components',\n  component: NavigationLink,\n  content: NavigationLinkContent,\n  editor: { label: 'Navigation Link', category: 'navigation' },\n  schema: {\n    href: { type: 'link', label: 'URL' },\n    target: { type: ['_self', '_blank'] as const, default: '_self', label: 'Target' },\n  },\n  guideline:\n    'Client-side navigation link that renders StorefrontLink, where href is a page reference or a logical path. Use for all internal navigation to avoid full-page reloads. Set target to _blank to open the destination in a new tab; when you do, write an \"(opens in new tab)\" cue into the link text, because the component adds no announcement of its own. A CMS entry overrides the link text, href, and target at runtime; a destination it supplies that is not an http, https, mailto, tel, or site-relative URL is refused and the authored href stands.',\n});\n\nexport function NavigationLink({ href, className, children, target, rel, $content, ...props }: NavigationLinkProps) {\n  // Resolve the entry before deriving anything from `target`: a _blank arriving from the CMS needs the\n  // same tab-nabbing defense as an authored one. `href` and `text` fall back on a blank entry field so\n  // a cleared value keeps the authored link rather than emitting an empty destination or label.\n  // Only the entry's destination goes through the allowlist: the prop comes from the store's own\n  // source, while nothing enforces the model's shape on the value the Admin supplies. A refused\n  // destination falls back the same way a cleared one does.\n  const entryDestination = $content?.href?.trim() ? resolveSafeHref($content.href) : null;\n  if (entryDestination && !entryDestination.safe) {\n    // A bounded reason and no authored value, the convention the content runtime's own log follows.\n    console.warn('[NavigationLink] link destination rejected', { reason: entryDestination.reason });\n  }\n  const linkHref = entryDestination?.safe ? entryDestination.href : href;\n  const linkTarget = $content?.target ?? target;\n  const linkText = $content?.text?.trim() ? $content.text : children;\n\n  // Target keywords are ASCII case-insensitive per HTML, so _BLANK opens a new tab just like _blank.\n  const opensNewTab = linkTarget?.toLowerCase() === '_blank';\n  // Append rather than replace: a composing matter may pass its own rel, and the tab-nabbing defense has to survive it.\n  // Link types are case-insensitive too, so a caller-passed NOOPENER already counts as noopener.\n  const relTokens = rel?.split(/\\s+/).filter(Boolean) ?? [];\n  const present = new Set(relTokens.map((token) => token.toLowerCase()));\n  const safeRel = opensNewTab\n    ? [...relTokens, ...['noopener', 'noreferrer'].filter((token) => !present.has(token))].join(' ')\n    : rel;\n\n  return (\n    <StorefrontLink\n      {...props}\n      href={linkHref}\n      target={linkTarget}\n      rel={safeRel}\n      className={className}\n      data-fs-navigation-link=\"\"\n    >\n      {linkText}\n    </StorefrontLink>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,UAAU,CAAC,MAAM;EACjB,YAAY;GACV,MAAM;IAAE,MAAM;IAAU,WAAW;IAAG,OAAO;GAAQ;GACrD,MAAM;IACJ,MAAM;IACN,OAAO;IAIP,QAAQ;IACR,SAAS;GACX;GACA,QAAQ;IAAE,MAAM;IAAU,MAAM,CAAC,SAAS,QAAQ;IAAG,OAAO;GAAS;EACvE;CACF;AACF,CAAC;AAQD,MAAa,2BAA2B,gBAAqC;CAC3E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAa;CAC3D,QAAQ;EACN,MAAM;GAAE,MAAM;GAAQ,OAAO;EAAM;EACnC,QAAQ;GAAE,MAAM,CAAC,SAAS,QAAQ;GAAY,SAAS;GAAS,OAAO;EAAS;CAClF;CACA,WACE;AACJ,CAAC;AAED,SAAgB,eAAe,EAAE,MAAM,WAAW,UAAU,QAAQ,KAAK,UAAU,GAAG,SAA8B;CAOlH,MAAM,mBAAmB,UAAU,MAAM,KAAK,IAAI,gBAAgB,SAAS,IAAI,IAAI;CACnF,IAAI,oBAAoB,CAAC,iBAAiB,MAExC,QAAQ,KAAK,8CAA8C,EAAE,QAAQ,iBAAiB,OAAO,CAAC;CAEhG,MAAM,WAAW,kBAAkB,OAAO,iBAAiB,OAAO;CAClE,MAAM,aAAa,UAAU,UAAU;CACvC,MAAM,WAAW,UAAU,MAAM,KAAK,IAAI,SAAS,OAAO;CAG1D,MAAM,cAAc,YAAY,YAAY,MAAM;CAGlD,MAAM,YAAY,KAAK,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,KAAK,CAAC;CACxD,MAAM,UAAU,IAAI,IAAI,UAAU,KAAK,UAAU,MAAM,YAAY,CAAC,CAAC;CACrE,MAAM,UAAU,cACZ,CAAC,GAAG,WAAW,GAAG,CAAC,YAAY,YAAY,CAAC,CAAC,QAAQ,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAC7F;CAEJ,OACE,oBAAC,gBAAD;EACE,GAAI;EACJ,MAAM;EACN,QAAQ;EACR,KAAK;EACM;EACX,2BAAwB;EAEvB,UAAA;CACa,CAAA;AAEpB"}

package/dist/particles/navigation-link-list/navigation-link-list.d.ts

@@ -1,6 +1,7 @@
 import { ContentValue } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
+import { PageRef } from "../../sdk/navigation/types.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/particles/navigation-link-list/navigation-link-list.d.ts
 export declare const NavigationLinkListContent: {
@@ -45,8 +46,11 @@ export declare const NavigationLinkListContent: {
   };
 };
 type NavigationLinkListContentValue = ContentValue<typeof NavigationLinkListContent>;
-/** One authored link. Derived from the model so the prop and content channels cannot drift. */
-export type NavigationLinkListLink = NonNullable<NavigationLinkListContentValue['links']>[number];
+type NavigationLinkListContentLink = NonNullable<NavigationLinkListContentValue['links']>[number];
+/** One authored link. The prop accepts a page reference; a CMS href stays a string. */
+export type NavigationLinkListLink = Omit<NavigationLinkListContentLink, 'href'> & {
+  href: PageRef | string;
+};
 export type NavigationLinkListProps = ComponentPropsWithRef<'ul'> & {
   /** Authored fallback for the link list, used when no CMS entry supplies one. */
   links?: readonly NavigationLinkListLink[];

package/dist/particles/navigation-link-list/navigation-link-list.js

@@ -59,25 +59,36 @@ const NavigationLinkListDefinition = defineComponent({
 	} },
 	guideline: "The list of navigation links as one CMS-editable collection, so a merchant adds, removes and reorders them without a deployment. Owns its own <ul>, so compose it directly under NavigationMenuRoot for the desktop bar and inside DrawerPopup for the mobile panel — reference the same element id from both and one entry feeds both surfaces. See navigation-link-list.md."
 });
+function readLinks(content, authored) {
+	if (content !== void 0) return content;
+	return authored ?? [];
+}
+function resolveDestination(href, index) {
+	if (typeof href !== "string") return href;
+	const destination = resolveSafeHref(href);
+	if (!destination.safe) {
+		console.warn("[NavigationLinkList] link destination rejected", {
+			index,
+			reason: destination.reason
+		});
+		return null;
+	}
+	return destination.href;
+}
 function resolveLinks(links) {
 	const resolved = [];
 	links.forEach((link, index) => {
 		if (link.label.trim().length === 0) return;
-		const destination = resolveSafeHref(link.href);
-		if (!destination.safe) console.warn("[NavigationLinkList] link destination rejected", {
-			index,
-			reason: destination.reason
-		});
 		resolved.push({
 			label: link.label,
-			href: destination.safe ? destination.href : null,
+			href: resolveDestination(link.href, index),
 			target: link.target
 		});
 	});
 	return resolved;
 }
 function NavigationLinkList({ links, $content, className, ...props }) {
-	const resolved = resolveLinks($content?.links ?? links ?? []);
+	const resolved = resolveLinks(readLinks($content?.links, links));
 	if (resolved.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
 		...props,

package/dist/particles/navigation-link-list/navigation-link-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-link-list.js","names":[],"sources":["../../../src/particles/navigation-link-list/navigation-link-list.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const NavigationLinkListContent = defineContentType({\n  id: 'navigation-link-list',\n  title: 'Navigation Links',\n  description: 'The ordered list of navigation links, editable without a deployment.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // `links` is not required, for the reason FooterLinkGroup records: a missing element key already\n    // omits the component, so requiring it would only cost the prop fallback its shape validity.\n    properties: {\n      links: {\n        type: 'array',\n        title: 'Links',\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'href'],\n          properties: {\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            href: {\n              type: 'string',\n              minLength: 1,\n              title: 'URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and lookahead-free so the Admin's RE2-family engine takes it.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            target: { type: 'string', enum: ['_self', '_blank'], default: '_self', title: 'Open in' },\n          },\n        },\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype NavigationLinkListContentValue = ContentValue<typeof NavigationLinkListContent>;\n\n/** One authored link. Derived from the model so the prop and content channels cannot drift. */\nexport type NavigationLinkListLink = NonNullable<NavigationLinkListContentValue['links']>[number];\n\nexport type NavigationLinkListProps = ComponentPropsWithRef<'ul'> & {\n  /** Authored fallback for the link list, used when no CMS entry supplies one. */\n  links?: readonly NavigationLinkListLink[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: NavigationLinkListContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const NavigationLinkListDefinition = defineComponent({\n  name: 'NavigationLinkList',\n  importPath: '@vtex/faststore/components',\n  component: NavigationLinkList,\n  content: NavigationLinkListContent,\n  editor: { label: 'Navigation Links', category: 'navigation' },\n  schema: {\n    links: { type: 'array', label: 'Links' },\n  },\n  guideline:\n    'The list of navigation links as one CMS-editable collection, so a merchant adds, removes and reorders them without a deployment. Owns its own <ul>, so compose it directly under NavigationMenuRoot for the desktop bar and inside DrawerPopup for the mobile panel — reference the same element id from both and one entry feeds both surfaces. See navigation-link-list.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/** A resolved link, ready to render. A null `href` is a destination the allowlist refused. */\ntype ResolvedLink = {\n  label: string;\n  href: string | null;\n  target: NavigationLinkListLink['target'];\n};\n\nfunction resolveLinks(links: readonly NavigationLinkListLink[]): ResolvedLink[] {\n  const resolved: ResolvedLink[] = [];\n\n  links.forEach((link, index) => {\n    // `minLength` is enforced by neither the runtime slice nor the preflight, so a blank label\n    // reaches the component. Drop the link: an anchor with no accessible name is a WCAG failure.\n    if (link.label.trim().length === 0) {\n      return;\n    }\n    const destination = resolveSafeHref(link.href);\n    if (!destination.safe) {\n      console.warn('[NavigationLinkList] link destination rejected', { index, reason: destination.reason });\n    }\n    resolved.push({\n      label: link.label,\n      href: destination.safe ? destination.href : null,\n      target: link.target,\n    });\n  });\n\n  return resolved;\n}\n\nexport function NavigationLinkList({ links, $content, className, ...props }: NavigationLinkListProps) {\n  // An entry supplying `links: []` beats an authored prop: a merchant who cleared the list cleared it.\n  // `minItems` guides the Admin form only, so that empty list still reaches this component.\n  const resolved = resolveLinks($content?.links ?? links ?? []);\n\n  if (resolved.length === 0) {\n    return null;\n  }\n\n  return (\n    <ul {...props} className={className} data-fs-navigation-link-list=\"\">\n      {resolved.map((link, index) => (\n        <li key={index} data-fs-navigation-link-list-item=\"\">\n          {link.href === null ? (\n            <span data-fs-text=\"\" data-fs-navigation-link-list-text=\"\">\n              {link.label}\n            </span>\n          ) : (\n            // `target` reaches NavigationLink as a prop, which is where the tab-nabbing defense\n            // lives: it derives rel from the resolved target, so `_blank` carries noopener/noreferrer.\n            <NavigationLink href={link.href} target={link.target}>\n              {link.label}\n            </NavigationLink>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;AASA,MAAa,4BAA4B,kBAAkB;CACzD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAGtB,YAAY,EACV,OAAO;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,OAAO;IACL,MAAM;IACN,sBAAsB;IACtB,UAAU,CAAC,SAAS,MAAM;IAC1B,YAAY;KACV,OAAO;MAAE,MAAM;MAAU,WAAW;MAAG,OAAO;KAAQ;KACtD,MAAM;MACJ,MAAM;MACN,WAAW;MACX,OAAO;MACP,QAAQ;MAER,SAAS;KACX;KACA,QAAQ;MAAE,MAAM;MAAU,MAAM,CAAC,SAAS,QAAQ;MAAG,SAAS;MAAS,OAAO;KAAU;IAC1F;GACF;EACF,EACF;CACF;AACF,CAAC;AAsBD,MAAa,+BAA+B,gBAAgB;CAC1D,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAa;CAC5D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAS,OAAO;CAAQ,EACzC;CACA,WACE;AACJ,CAAC;AAaD,SAAS,aAAa,OAA0D;CAC9E,MAAM,WAA2B,CAAC;CAElC,MAAM,SAAS,MAAM,UAAU;EAG7B,IAAI,KAAK,MAAM,KAAK,CAAC,CAAC,WAAW,GAC/B;EAEF,MAAM,cAAc,gBAAgB,KAAK,IAAI;EAC7C,IAAI,CAAC,YAAY,MACf,QAAQ,KAAK,kDAAkD;GAAE;GAAO,QAAQ,YAAY;EAAO,CAAC;EAEtG,SAAS,KAAK;GACZ,OAAO,KAAK;GACZ,MAAM,YAAY,OAAO,YAAY,OAAO;GAC5C,QAAQ,KAAK;EACf,CAAC;CACH,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,mBAAmB,EAAE,OAAO,UAAU,WAAW,GAAG,SAAkC;CAGpG,MAAM,WAAW,aAAa,UAAU,SAAS,SAAS,CAAC,CAAC;CAE5D,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,MAAD;EAAI,GAAI;EAAkB;EAAW,gCAA6B;EAC/D,UAAA,SAAS,KAAK,MAAM,UACnB,oBAAC,MAAD;GAAgB,qCAAkC;GAC/C,UAAA,KAAK,SAAS,OACb,oBAAC,QAAD;IAAM,gBAAa;IAAG,qCAAkC;IACrD,UAAA,KAAK;GACF,CAAA,IAIN,oBAAC,gBAAD;IAAgB,MAAM,KAAK;IAAM,QAAQ,KAAK;IAC3C,UAAA,KAAK;GACQ,CAAA;EAEhB,GAZK,KAYL,CACL;CACC,CAAA;AAER"}
+{"version":3,"file":"navigation-link-list.js","names":[],"sources":["../../../src/particles/navigation-link-list/navigation-link-list.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { NavigationLink } from '../navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const NavigationLinkListContent = defineContentType({\n  id: 'navigation-link-list',\n  title: 'Navigation Links',\n  description: 'The ordered list of navigation links, editable without a deployment.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // `links` is not required, for the reason FooterLinkGroup records: a missing element key already\n    // omits the component, so requiring it would only cost the prop fallback its shape validity.\n    properties: {\n      links: {\n        type: 'array',\n        title: 'Links',\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label', 'href'],\n          properties: {\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            href: {\n              type: 'string',\n              minLength: 1,\n              title: 'URL',\n              format: 'uri-reference',\n              // Author-time guidance only, and lookahead-free so the Admin's RE2-family engine takes it.\n              pattern: '^(?:https?://.*|mailto:.+|tel:.+|/(?:[^/].*)?)$',\n            },\n            target: { type: 'string', enum: ['_self', '_blank'], default: '_self', title: 'Open in' },\n          },\n        },\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype NavigationLinkListContentValue = ContentValue<typeof NavigationLinkListContent>;\n\ntype NavigationLinkListContentLink = NonNullable<NavigationLinkListContentValue['links']>[number];\n\n/** One authored link. The prop accepts a page reference; a CMS href stays a string. */\nexport type NavigationLinkListLink = Omit<NavigationLinkListContentLink, 'href'> & {\n  href: PageRef | string;\n};\n\nexport type NavigationLinkListProps = ComponentPropsWithRef<'ul'> & {\n  /** Authored fallback for the link list, used when no CMS entry supplies one. */\n  links?: readonly NavigationLinkListLink[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: NavigationLinkListContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const NavigationLinkListDefinition = defineComponent({\n  name: 'NavigationLinkList',\n  importPath: '@vtex/faststore/components',\n  component: NavigationLinkList,\n  content: NavigationLinkListContent,\n  editor: { label: 'Navigation Links', category: 'navigation' },\n  schema: {\n    links: { type: 'array', label: 'Links' },\n  },\n  guideline:\n    'The list of navigation links as one CMS-editable collection, so a merchant adds, removes and reorders them without a deployment. Owns its own <ul>, so compose it directly under NavigationMenuRoot for the desktop bar and inside DrawerPopup for the mobile panel — reference the same element id from both and one entry feeds both surfaces. See navigation-link-list.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/** A resolved link, ready to render. A null `href` is a destination the allowlist refused. */\ntype ResolvedLink = {\n  label: string;\n  href: PageRef | string | null;\n  target: NavigationLinkListLink['target'];\n};\n\nfunction readLinks(\n  content: readonly NavigationLinkListContentLink[] | undefined,\n  authored: readonly NavigationLinkListLink[] | undefined,\n): readonly NavigationLinkListLink[] {\n  if (content !== undefined) return content;\n  return authored ?? [];\n}\n\nfunction resolveDestination(href: PageRef | string, index: number): PageRef | string | null {\n  if (typeof href !== 'string') return href;\n\n  const destination = resolveSafeHref(href);\n  if (!destination.safe) {\n    console.warn('[NavigationLinkList] link destination rejected', { index, reason: destination.reason });\n    return null;\n  }\n  return destination.href;\n}\n\nfunction resolveLinks(links: readonly NavigationLinkListLink[]): ResolvedLink[] {\n  const resolved: ResolvedLink[] = [];\n\n  links.forEach((link, index) => {\n    // `minLength` is enforced by neither the runtime slice nor the preflight, so a blank label\n    // reaches the component. Drop the link: an anchor with no accessible name is a WCAG failure.\n    if (link.label.trim().length === 0) {\n      return;\n    }\n    resolved.push({\n      label: link.label,\n      href: resolveDestination(link.href, index),\n      target: link.target,\n    });\n  });\n\n  return resolved;\n}\n\nexport function NavigationLinkList({ links, $content, className, ...props }: NavigationLinkListProps) {\n  // An entry supplying `links: []` beats an authored prop: a merchant who cleared the list cleared it.\n  // `minItems` guides the Admin form only, so that empty list still reaches this component.\n  const resolved = resolveLinks(readLinks($content?.links, links));\n\n  if (resolved.length === 0) {\n    return null;\n  }\n\n  return (\n    <ul {...props} className={className} data-fs-navigation-link-list=\"\">\n      {resolved.map((link, index) => (\n        <li key={index} data-fs-navigation-link-list-item=\"\">\n          {link.href === null ? (\n            <span data-fs-text=\"\" data-fs-navigation-link-list-text=\"\">\n              {link.label}\n            </span>\n          ) : (\n            // `target` reaches NavigationLink as a prop, which is where the tab-nabbing defense\n            // lives: it derives rel from the resolved target, so `_blank` carries noopener/noreferrer.\n            <NavigationLink href={link.href} target={link.target}>\n              {link.label}\n            </NavigationLink>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;AAUA,MAAa,4BAA4B,kBAAkB;CACzD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAGtB,YAAY,EACV,OAAO;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,OAAO;IACL,MAAM;IACN,sBAAsB;IACtB,UAAU,CAAC,SAAS,MAAM;IAC1B,YAAY;KACV,OAAO;MAAE,MAAM;MAAU,WAAW;MAAG,OAAO;KAAQ;KACtD,MAAM;MACJ,MAAM;MACN,WAAW;MACX,OAAO;MACP,QAAQ;MAER,SAAS;KACX;KACA,QAAQ;MAAE,MAAM;MAAU,MAAM,CAAC,SAAS,QAAQ;MAAG,SAAS;MAAS,OAAO;KAAU;IAC1F;GACF;EACF,EACF;CACF;AACF,CAAC;AA0BD,MAAa,+BAA+B,gBAAgB;CAC1D,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAa;CAC5D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAS,OAAO;CAAQ,EACzC;CACA,WACE;AACJ,CAAC;AAaD,SAAS,UACP,SACA,UACmC;CACnC,IAAI,YAAY,KAAA,GAAW,OAAO;CAClC,OAAO,YAAY,CAAC;AACtB;AAEA,SAAS,mBAAmB,MAAwB,OAAwC;CAC1F,IAAI,OAAO,SAAS,UAAU,OAAO;CAErC,MAAM,cAAc,gBAAgB,IAAI;CACxC,IAAI,CAAC,YAAY,MAAM;EACrB,QAAQ,KAAK,kDAAkD;GAAE;GAAO,QAAQ,YAAY;EAAO,CAAC;EACpG,OAAO;CACT;CACA,OAAO,YAAY;AACrB;AAEA,SAAS,aAAa,OAA0D;CAC9E,MAAM,WAA2B,CAAC;CAElC,MAAM,SAAS,MAAM,UAAU;EAG7B,IAAI,KAAK,MAAM,KAAK,CAAC,CAAC,WAAW,GAC/B;EAEF,SAAS,KAAK;GACZ,OAAO,KAAK;GACZ,MAAM,mBAAmB,KAAK,MAAM,KAAK;GACzC,QAAQ,KAAK;EACf,CAAC;CACH,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,mBAAmB,EAAE,OAAO,UAAU,WAAW,GAAG,SAAkC;CAGpG,MAAM,WAAW,aAAa,UAAU,UAAU,OAAO,KAAK,CAAC;CAE/D,IAAI,SAAS,WAAW,GACtB,OAAO;CAGT,OACE,oBAAC,MAAD;EAAI,GAAI;EAAkB;EAAW,gCAA6B;EAC/D,UAAA,SAAS,KAAK,MAAM,UACnB,oBAAC,MAAD;GAAgB,qCAAkC;GAC/C,UAAA,KAAK,SAAS,OACb,oBAAC,QAAD;IAAM,gBAAa;IAAG,qCAAkC;IACrD,UAAA,KAAK;GACF,CAAA,IAIN,oBAAC,gBAAD;IAAgB,MAAM,KAAK;IAAM,QAAQ,KAAK;IAC3C,UAAA,KAAK;GACQ,CAAA;EAEhB,GAZK,KAYL,CACL;CACC,CAAA;AAER"}

package/dist/particles/order-details-back/order-details-back.d.ts

@@ -0,0 +1,28 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/order-details-back/order-details-back.d.ts
+export declare const OrderDetailsBackContent: {
+  readonly id: "order-details-back";
+  readonly title: "Order Details Back";
+  readonly description: "The link back to the order list.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+      };
+    };
+  };
+};
+export type OrderDetailsBackContentValue = ContentValue<typeof OrderDetailsBackContent>;
+export type OrderDetailsBackProps = ComponentPropsWithRef<'a'> & {
+  $content?: OrderDetailsBackContentValue;
+};
+export declare const OrderDetailsBackDefinition: ComponentDefinition<OrderDetailsBackProps>;
+export declare function OrderDetailsBack({ className, ref, $content, ...props }: OrderDetailsBackProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=order-details-back.d.ts.map

package/dist/particles/order-details-back/order-details-back.js

@@ -0,0 +1,52 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { useIntl } from "../../sdk/i18n/client.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/particles/order-details-back/order-details-back.tsx
+const LIST_HREF = "/pvt/orders";
+const OrderDetailsBackContent = defineContentType({
+	id: "order-details-back",
+	title: "Order Details Back",
+	description: "The link back to the order list.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label"
+		} }
+	}
+});
+const OrderDetailsBackDefinition = defineComponent({
+	name: "OrderDetailsBack",
+	importPath: "@vtex/faststore/components",
+	component: OrderDetailsBack,
+	content: OrderDetailsBackContent,
+	editor: {
+		label: "Order Details Back",
+		category: "action"
+	},
+	schema: {},
+	guideline: "The return from one order to the order list. Place it first on the order page when the layout has no account breadcrumb. The label is content; a blank field keeps the catalogue."
+});
+function authored(value, fallback) {
+	return value?.trim() || fallback;
+}
+function OrderDetailsBack({ className, ref, $content, ...props }) {
+	const intl = useIntl();
+	const label = authored($content?.label, intl.formatMessage({ id: "fs/order.back-to-orders" }));
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		ref,
+		href: LIST_HREF,
+		className,
+		"data-fs-order-details-back": "",
+		children: label
+	});
+}
+//#endregion
+export { OrderDetailsBack, OrderDetailsBackContent, OrderDetailsBackDefinition };
+
+//# sourceMappingURL=order-details-back.js.map

package/dist/particles/order-details-back/order-details-back.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-details-back.js","names":[],"sources":["../../../src/particles/order-details-back/order-details-back.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\n\nconst LIST_HREF = '/pvt/orders';\n\nexport const OrderDetailsBackContent = defineContentType({\n  id: 'order-details-back',\n  title: 'Order Details Back',\n  description: 'The link back to the order list.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label' },\n    },\n  },\n});\n\nexport type OrderDetailsBackContentValue = ContentValue<typeof OrderDetailsBackContent>;\n\nexport type OrderDetailsBackProps = ComponentPropsWithRef<'a'> & {\n  $content?: OrderDetailsBackContentValue;\n};\n\nexport const OrderDetailsBackDefinition = defineComponent<OrderDetailsBackProps>({\n  name: 'OrderDetailsBack',\n  importPath: '@vtex/faststore/components',\n  component: OrderDetailsBack,\n  content: OrderDetailsBackContent,\n  editor: { label: 'Order Details Back', category: 'action' },\n  schema: {},\n  guideline:\n    'The return from one order to the order list. Place it first on the order page when the layout has no account breadcrumb. The label is content; a blank field keeps the catalogue.',\n});\n\nfunction authored(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nexport function OrderDetailsBack({ className, ref, $content, ...props }: OrderDetailsBackProps) {\n  const intl = useIntl();\n  const label = authored($content?.label, intl.formatMessage({ id: 'fs/order.back-to-orders' }));\n\n  return (\n    <a {...props} ref={ref} href={LIST_HREF} className={className} data-fs-order-details-back=\"\">\n      {label}\n    </a>\n  );\n}\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY;AAElB,MAAa,0BAA0B,kBAAkB;CACvD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY,EACV,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ,EAC1C;CACF;AACF,CAAC;AAQD,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAS;CAC1D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,SAAS,OAA2B,UAA0B;CAErE,OADgB,OAAO,KAAK,KACV;AACpB;AAEA,SAAgB,iBAAiB,EAAE,WAAW,KAAK,UAAU,GAAG,SAAgC;CAC9F,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,SAAS,UAAU,OAAO,KAAK,cAAc,EAAE,IAAI,0BAA0B,CAAC,CAAC;CAE7F,OACE,oBAAC,KAAD;EAAG,GAAI;EAAY;EAAK,MAAM;EAAsB;EAAW,8BAA2B;EACvF,UAAA;CACA,CAAA;AAEP"}

package/dist/particles/order-status-badge/order-status-badge.d.ts

@@ -0,0 +1,19 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/particles/order-status-badge/order-status-badge.d.ts
+export type OrderStatusState = 'ongoing' | 'completed' | 'cancelled';
+export type OrderStatusTone = 'neutral' | 'progress' | 'success' | 'danger';
+export type OrderStatusMessageKey = 'cancelled' | 'cancellation-requested' | 'in-progress' | 'delivered' | 'shipped' | 'ready-for-pickup' | 'collected' | 'placeholder';
+/** Per-label sentences. A blank value keeps the catalogue sentence for that label. */
+export type OrderStatusMessages = Partial<Record<OrderStatusMessageKey, string>>;
+export type OrderStatusBadgeProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  state: OrderStatusState;
+  tone: OrderStatusTone;
+  label: string;
+  messages?: OrderStatusMessages;
+};
+export declare const OrderStatusBadgeDefinition: ComponentDefinition<OrderStatusBadgeProps>;
+export declare function OrderStatusBadge({ state, tone, label, messages, className, ...props }: OrderStatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=order-status-badge.d.ts.map

package/dist/particles/order-status-badge/order-status-badge.js

@@ -0,0 +1,50 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useIntl } from "../../sdk/i18n/client.js";
+import { Badge } from "../badge/badge.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/particles/order-status-badge/order-status-badge.tsx
+const ORDER_STATUS_MESSAGES = {
+	cancelled: "fs/order-status.cancelled",
+	"cancellation-requested": "fs/order-status.cancellation-requested",
+	"in-progress": "fs/order-status.in-progress",
+	delivered: "fs/order-status.delivered",
+	shipped: "fs/order-status.shipped",
+	"ready-for-pickup": "fs/order-status.ready-for-pickup",
+	collected: "fs/order-status.collected"
+};
+function orderStatusMessageId(label) {
+	if (!Object.hasOwn(ORDER_STATUS_MESSAGES, label)) return "fs/order-status.placeholder";
+	return ORDER_STATUS_MESSAGES[label] ?? "fs/order-status.placeholder";
+}
+const OrderStatusBadgeDefinition = defineComponent({
+	name: "OrderStatusBadge",
+	importPath: "@vtex/faststore/components",
+	component: OrderStatusBadge,
+	editor: {
+		label: "Order Status Badge",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Shopper-facing order status. Pass the completion view, the label id, and a tone. A messages entry replaces the catalogue sentence for that label; a blank entry and an unknown label keep the catalogue."
+});
+function messageKey(label) {
+	return Object.hasOwn(ORDER_STATUS_MESSAGES, label) ? label : "placeholder";
+}
+function OrderStatusBadge({ state, tone, label, messages, className, ...props }) {
+	const intl = useIntl();
+	const authored = messages?.[messageKey(label)]?.trim();
+	return /* @__PURE__ */ jsx(Badge, {
+		...props,
+		className,
+		"data-fs-order-status-badge": "",
+		"data-fs-order-status-badge-state": state,
+		"data-fs-order-status-badge-tone": tone,
+		children: authored || intl.formatMessage({ id: orderStatusMessageId(label) })
+	});
+}
+//#endregion
+export { OrderStatusBadge, OrderStatusBadgeDefinition };
+
+//# sourceMappingURL=order-status-badge.js.map

package/dist/particles/order-status-badge/order-status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-status-badge.js","names":[],"sources":["../../../src/particles/order-status-badge/order-status-badge.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\nimport { Badge } from '../badge/badge.js';\n\nexport type OrderStatusState = 'ongoing' | 'completed' | 'cancelled';\n\nexport type OrderStatusTone = 'neutral' | 'progress' | 'success' | 'danger';\n\nexport type OrderStatusMessageKey =\n  | 'cancelled'\n  | 'cancellation-requested'\n  | 'in-progress'\n  | 'delivered'\n  | 'shipped'\n  | 'ready-for-pickup'\n  | 'collected'\n  | 'placeholder';\n\n/** Per-label sentences. A blank value keeps the catalogue sentence for that label. */\nexport type OrderStatusMessages = Partial<Record<OrderStatusMessageKey, string>>;\n\nexport type OrderStatusBadgeProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n  state: OrderStatusState;\n  tone: OrderStatusTone;\n  label: string;\n  messages?: OrderStatusMessages;\n};\n\nconst ORDER_STATUS_MESSAGES: Record<string, MessageId> = {\n  cancelled: 'fs/order-status.cancelled',\n  'cancellation-requested': 'fs/order-status.cancellation-requested',\n  'in-progress': 'fs/order-status.in-progress',\n  delivered: 'fs/order-status.delivered',\n  shipped: 'fs/order-status.shipped',\n  'ready-for-pickup': 'fs/order-status.ready-for-pickup',\n  collected: 'fs/order-status.collected',\n};\n\nfunction orderStatusMessageId(label: string): MessageId {\n  // Bracket access walks Object.prototype, so \"constructor\" would skip the placeholder.\n  if (!Object.hasOwn(ORDER_STATUS_MESSAGES, label)) {\n    return 'fs/order-status.placeholder';\n  }\n\n  return ORDER_STATUS_MESSAGES[label] ?? 'fs/order-status.placeholder';\n}\n\nexport const OrderStatusBadgeDefinition = defineComponent<OrderStatusBadgeProps>({\n  name: 'OrderStatusBadge',\n  importPath: '@vtex/faststore/components',\n  component: OrderStatusBadge,\n  editor: { label: 'Order Status Badge', category: 'content' },\n  schema: {},\n  guideline:\n    'Shopper-facing order status. Pass the completion view, the label id, and a tone. A messages entry replaces the catalogue sentence for that label; a blank entry and an unknown label keep the catalogue.',\n});\n\nfunction messageKey(label: string): OrderStatusMessageKey {\n  return Object.hasOwn(ORDER_STATUS_MESSAGES, label) ? (label as OrderStatusMessageKey) : 'placeholder';\n}\n\nexport function OrderStatusBadge({ state, tone, label, messages, className, ...props }: OrderStatusBadgeProps) {\n  const intl = useIntl();\n  const authored = messages?.[messageKey(label)]?.trim();\n\n  return (\n    <Badge\n      {...props}\n      className={className}\n      data-fs-order-status-badge=\"\"\n      data-fs-order-status-badge-state={state}\n      data-fs-order-status-badge-tone={tone}\n    >\n      {authored || intl.formatMessage({ id: orderStatusMessageId(label) })}\n    </Badge>\n  );\n}\n"],"mappings":";;;;;;;AAgCA,MAAM,wBAAmD;CACvD,WAAW;CACX,0BAA0B;CAC1B,eAAe;CACf,WAAW;CACX,SAAS;CACT,oBAAoB;CACpB,WAAW;AACb;AAEA,SAAS,qBAAqB,OAA0B;CAEtD,IAAI,CAAC,OAAO,OAAO,uBAAuB,KAAK,GAC7C,OAAO;CAGT,OAAO,sBAAsB,UAAU;AACzC;AAEA,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAU;CAC3D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,WAAW,OAAsC;CACxD,OAAO,OAAO,OAAO,uBAAuB,KAAK,IAAK,QAAkC;AAC1F;AAEA,SAAgB,iBAAiB,EAAE,OAAO,MAAM,OAAO,UAAU,WAAW,GAAG,SAAgC;CAC7G,MAAM,OAAO,QAAQ;CACrB,MAAM,WAAW,WAAW,WAAW,KAAK,EAAE,EAAE,KAAK;CAErD,OACE,oBAAC,OAAD;EACE,GAAI;EACO;EACX,8BAA2B;EAC3B,oCAAkC;EAClC,mCAAiC;EAEhC,UAAA,YAAY,KAAK,cAAc,EAAE,IAAI,qBAAqB,KAAK,EAAE,CAAC;CAC9D,CAAA;AAEX"}

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

@@ -5,7 +5,7 @@ import { FieldBinding, TEXT_FIELD_VALUE, mergeFieldValidator, useBoundField, use
 import { useComposedRef } from "../shared/compose-refs.js";
 import { Input } from "../input/input.js";
 import { createContext, useContext, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { useFormContext, useFormState } from "react-hook-form";
 //#region src/particles/phone-field/phone-field.tsx
@@ -258,7 +258,7 @@ function PhoneFieldView({ ref, country, className, label, isDisabled, placeholde
 		disabled: isDisabled,
 		children: /* @__PURE__ */ jsx(PhoneFieldInputContext.Provider, {
 			value: inputContext,
-			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Field.Label, {
 					"data-fs-phone-field-label": "",
 					"data-fs-field-label": "",