@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/sign-in/sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in.js","names":[],"sources":["../../../src/matter/sign-in/sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { EmailField } from '../../particles/email-field/email-field.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { useEntityDataResolved } from '../../sdk/data/entity-resolution-context.js';\nimport { useReactiveDataSettled } from '../../sdk/data/use-reactive-data-settled.js';\nimport { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — one read of the account's enabled sign-in methods plus\n// the profile email that seeds the shared draft. Authored as a raw string, as access-code-sign-in does.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment SignInData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n    }\n    sessionAuthProviders {\n      __typename\n      id\n      passwordAuthentication\n      accessKeyAuthentication\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Colocated fragment slice forwarded by the reactive runtime — one key per root field. */\nexport type SignInSlice = {\n  clientProfile: { email: string | null } | null;\n  sessionAuthProviders: { passwordAuthentication: boolean; accessKeyAuthentication: boolean } | null;\n};\n\nexport type SignInMethod = 'password' | 'accessCode';\n\nexport type SignInContextValue = Readonly<{\n  /** The one email draft every sign-in method shares. Seeded from `clientProfile.email` until the shopper edits it. */\n  email: string;\n  /** Updates the draft; marks it as shopper-touched so the seed no longer overwrites it. */\n  setEmail: (email: string) => void;\n  /** The active method: the shopper's choice, else the access code when enabled, else the password. */\n  method: SignInMethod;\n  setMethod: (method: SignInMethod) => void;\n  passwordEnabled: boolean;\n  accessCodeEnabled: boolean;\n  anyMethodEnabled: boolean;\n  bothMethodsEnabled: boolean;\n  /** Whether the account configuration has arrived. Gate on this before reading any flag above. */\n  resolved: boolean;\n}>;\n\nexport type SignInRootProps = Readonly<{ $data?: SignInSlice | null; children?: ReactNode }>;\n\nexport type SignInEmailControlProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  placeholder?: string;\n  invalidEmailMessage?: string;\n  /** The input's `name`. Defaults to `EmailField`'s own (`'email'`). */\n  name?: string;\n  /** The input's `autocomplete` token. Defaults to `'username'`, the identifier half of the credential pair. */\n  autoComplete?: string;\n};\n\nexport type SignInMethodSwitchProps = ComponentPropsWithRef<'div'> & {\n  toAccessCodeLabel?: string;\n  toPasswordLabel?: string;\n};\n\nexport type SignInMethodOptionProps = ComponentPropsWithRef<'div'> & {\n  /** Which method this option selects. Required — the option has no meaning without it. */\n  method: SignInMethod;\n  label?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst SIGN_IN_CONTEXT_UNSET = Symbol('SignInContextUnset');\n\nconst SignInContext = createContext<SignInContextValue | typeof SIGN_IN_CONTEXT_UNSET>(SIGN_IN_CONTEXT_UNSET);\n\n/**\n * Read the shared email draft, active method and account flags from the nearest `SignInRoot`.\n * Throws outside that subtree — a misplaced part is a composition bug that should surface\n * immediately, mirroring `useSession()`/`useAccessCodeSignIn()`.\n */\nexport function useSignIn(): SignInContextValue {\n  const ctx = useContext(SignInContext);\n  if (ctx === SIGN_IN_CONTEXT_UNSET) {\n    throw new Error('useSignIn() must be used inside a <SignInRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const SignInRootDefinition = defineComponent<SignInRootProps>({\n  name: 'SignInRoot',\n  importPath: '@vtex/faststore/components',\n  component: SignInRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  skeleton: SignInRootSkeleton,\n  requiresContext: 'session',\n  providesContext: 'sign-in',\n  editor: { label: 'Sign-In Root', category: 'identity' },\n  schema: {},\n  guideline:\n    'Provider of the sign-in surface: the single read of which sign-in methods the account enables, plus one shared email draft and the active method, published to the SignIn parts below it. Renders no element of its own and always renders its children, whatever the session state or the account configuration. Compose SignInEmailControl and either SignInMethodSwitch or SignInMethodOption inside it. Must be inside SessionRoot. See sign-in.md.',\n});\n\nexport const SignInEmailControlDefinition = defineComponent<SignInEmailControlProps>({\n  name: 'SignInEmailControl',\n  importPath: '@vtex/faststore/components',\n  component: SignInEmailControl,\n  skeleton: SignInEmailControlSkeleton,\n  requiresContext: 'sign-in',\n  editor: { label: 'Sign-In Email', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    invalidEmailMessage: { type: 'string', label: 'Invalid email message' },\n  },\n  guideline:\n    'The one email field shared by every sign-in method. Draws a placeholder while the account configuration loads, and renders nothing once signed in or when the account enables no method. Must be inside SignInRoot. See sign-in.md.',\n});\n\nexport const SignInMethodSwitchDefinition = defineComponent<SignInMethodSwitchProps>({\n  name: 'SignInMethodSwitch',\n  importPath: '@vtex/faststore/components',\n  component: SignInMethodSwitch,\n  requiresContext: 'sign-in',\n  editor: { label: 'Sign-In Method Switch', category: 'identity' },\n  schema: {\n    toAccessCodeLabel: { type: 'string', label: 'Switch to access code label' },\n    toPasswordLabel: { type: 'string', label: 'Switch to password label' },\n  },\n  guideline:\n    'One toggle button that moves the active sign-in method between the access code and the password. Renders nothing unless the account enables both methods. Must be inside SignInRoot. See sign-in.md.',\n});\n\nexport const SignInMethodOptionDefinition = defineComponent<SignInMethodOptionProps>({\n  name: 'SignInMethodOption',\n  importPath: '@vtex/faststore/components',\n  component: SignInMethodOption,\n  requiresContext: 'sign-in',\n  editor: { label: 'Sign-In Method Option', category: 'identity' },\n  schema: {\n    method: { type: ['password', 'accessCode'] as const, label: 'Method' },\n    label: { type: 'string', label: 'Label' },\n  },\n  guideline:\n    'One selectable sign-in method. Renders nothing when the account disables the method it names, so composing one per method gives a store exactly the options its account enables. Compose it instead of SignInMethodSwitch when both methods should be visible at once, or beside the default method as an escape hatch. Must be inside SignInRoot. See sign-in.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/**\n * Data-owning provider of the sign-in surface. Reads `sessionAuthProviders` once, owns the shared\n * email draft and the active method, and publishes all of it as the `sign-in` context. It renders no\n * element of its own and always renders `children` — a provider that returned `null` while hosted in\n * a shared layout would take the page with it.\n *\n * `resolved` is the three-condition gate the entity fieldsets use: a reactive `$data` is never `null`\n * at runtime (it falls back to a placeholder slice), so only the two resolution signals plus the\n * presence of `sessionAuthProviders` tell \"not arrived yet\" from \"arrived and disabled\".\n */\nexport function SignInRoot({ $data: $dataProp, children }: SignInRootProps) {\n  const $data = useDataOverride($dataProp);\n  const settled = useReactiveDataSettled();\n  const sliceResolved = useEntityDataResolved();\n  const providers = $data?.sessionAuthProviders ?? null;\n  const resolved = settled && sliceResolved && providers != null;\n\n  const { state } = useSession();\n\n  const passwordEnabled = resolved && providers.passwordAuthentication;\n  const accessCodeEnabled = resolved && providers.accessKeyAuthentication;\n\n  const savedEmail = $data?.clientProfile?.email ?? '';\n  const [email, setEmail] = useState('');\n  const [touched, setTouched] = useState(false);\n\n  // Seed from the resolving/known profile email until the shopper edits the draft — the untouched-field\n  // re-seed of ClientProfileRoot, never clobbering an in-progress edit.\n  useEffect(() => {\n    if (!touched) setEmail(savedEmail);\n  }, [savedEmail, touched]);\n\n  // Signing in ends the shopper's edit: the Root never unmounts (it must always render its children), so\n  // without this the typed address would outlive the session and greet whoever uses the page next. Dropping\n  // `touched` lets the seed above replace the edit with the profile email; it pins nothing, so it is not a freeze.\n  useEffect(() => {\n    if (state === 'loggedIn') setTouched(false);\n  }, [state]);\n\n  // The context's `setEmail`: the same write, plus the record that the shopper has edited the draft,\n  // which is what stops the seed above from replacing it.\n  const editEmail = useCallback((next: string) => {\n    setTouched(true);\n    setEmail(next);\n  }, []);\n\n  // The shopper's explicit choice, or null. The default is derived, so a choice made before the\n  // configuration resolved cannot pin a stale default. Once resolved, a choice the account no longer enables\n  // falls back to the default; while unresolved no flag is read, so a choice is kept rather than flapping.\n  const [chosenMethod, setChosenMethod] = useState<SignInMethod | null>(null);\n  const keepChosen =\n    chosenMethod !== null && (!resolved || (chosenMethod === 'password' ? passwordEnabled : accessCodeEnabled));\n  const defaultMethod: SignInMethod = accessCodeEnabled ? 'accessCode' : 'password';\n  const method = keepChosen ? chosenMethod : defaultMethod;\n\n  const contextValue = useMemo<SignInContextValue>(\n    () => ({\n      email,\n      setEmail: editEmail,\n      method,\n      setMethod: setChosenMethod,\n      passwordEnabled,\n      accessCodeEnabled,\n      anyMethodEnabled: passwordEnabled || accessCodeEnabled,\n      bothMethodsEnabled: passwordEnabled && accessCodeEnabled,\n      resolved,\n    }),\n    [email, editEmail, method, passwordEnabled, accessCodeEnabled, resolved],\n  );\n\n  return <SignInContext value={contextValue}>{children}</SignInContext>;\n}\n\n/**\n * Catalog metadata only: `SignInRoot` has no loading look because it always renders its children, so\n * this declares that by rendering nothing. The compiler records the `skeleton` name and never renders\n * it; no component body references it.\n */\nexport function SignInRootSkeleton() {\n  return null;\n}\n\nexport function SignInEmailControlSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-sign-in-email-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-sign-in-email-skeleton-line=\"\" />\n    </div>\n  );\n}\n\n/**\n * The one email field, bound to the Root's shared draft. Renders its skeleton while the account\n * configuration is unresolved, so a slow read does not look like a store with no sign-in, and nothing\n * once the shopper is signed in or the account enables no method.\n */\nexport function SignInEmailControl({\n  label,\n  placeholder,\n  invalidEmailMessage,\n  name,\n  autoComplete = 'username',\n  className,\n  ...props\n}: SignInEmailControlProps) {\n  const signIn = useSignIn();\n  const { state } = useSession();\n\n  if (state === 'loggedIn') return null;\n  if (!signIn.resolved) return <SignInEmailControlSkeleton {...props} className={className} />;\n  if (!signIn.anyMethodEnabled) return null;\n\n  return (\n    <div {...props} className={className} data-fs-sign-in-email=\"\">\n      <EmailField\n        label={label}\n        placeholder={placeholder}\n        value={signIn.email}\n        onValueChange={signIn.setEmail}\n        errorMessage={invalidEmailMessage}\n        name={name}\n        autoComplete={autoComplete}\n      />\n    </div>\n  );\n}\n\n/**\n * One toggle button that moves the active method. Renders only when the account enables both\n * methods; the button is labelled with the method it moves to.\n */\nexport function SignInMethodSwitch({\n  toAccessCodeLabel,\n  toPasswordLabel,\n  className,\n  ...props\n}: SignInMethodSwitchProps) {\n  const signIn = useSignIn();\n  const { state } = useSession();\n\n  if (state === 'loggedIn' || !signIn.resolved) return null;\n  if (!signIn.bothMethodsEnabled) return null;\n\n  const { method, setMethod } = signIn;\n\n  return (\n    <div {...props} className={className} data-fs-sign-in-method-switch=\"\" data-fs-sign-in-method={method}>\n      <Button\n        type=\"button\"\n        onClick={() => setMethod(method === 'accessCode' ? 'password' : 'accessCode')}\n        data-fs-sign-in-method-switch-button=\"\"\n      >\n        {method === 'password' ? toAccessCodeLabel : toPasswordLabel}\n      </Button>\n    </div>\n  );\n}\n\n/**\n * One selectable method. Renders only when the account enables the method named by `method`, and\n * carries a selected state while that method is the active one — so one option per method gives a\n * store exactly the options its account enables.\n */\nexport function SignInMethodOption({ method, label, className, ...props }: SignInMethodOptionProps) {\n  const signIn = useSignIn();\n  const { state } = useSession();\n\n  if (state === 'loggedIn' || !signIn.resolved) return null;\n  if (method !== 'password' && method !== 'accessCode') return null;\n  if (!(method === 'password' ? signIn.passwordEnabled : signIn.accessCodeEnabled)) return null;\n\n  const selected = signIn.method === method;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-sign-in-method-option={method}\n      {...(selected ? { 'data-fs-sign-in-method-option-selected': '' } : {})}\n    >\n      <Button\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={() => signIn.setMethod(method)}\n        data-fs-sign-in-method-option-button=\"\"\n      >\n        {label}\n      </Button>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const SignIn = {\n  Root: SignInRoot,\n  EmailControl: SignInEmailControl,\n  MethodSwitch: SignInMethodSwitch,\n  MethodOption: SignInMethodOption,\n};\n"],"mappings":"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"}

package/dist/matter/sign-in-disclosure/sign-in-disclosure.d.ts

@@ -0,0 +1,81 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/matter/sign-in-disclosure/sign-in-disclosure.d.ts
+export type SignInDisclosureContextValue = Readonly<{
+  /** Whether the panel is showing. Derived: `false` whenever the session reports `loggedIn`. */
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}>;
+export type SignInDisclosureRootProps = Readonly<{
+  children?: ReactNode;
+}>;
+export type SignInDisclosureTriggerProps = ComponentPropsWithRef<'button'> & {
+  label?: string;
+};
+/**
+ * Extends the div props except the four the panel owns: a caller value would reopen the closed panel to
+ * assistive technology, or rename the dialog.
+ */
+export type SignInModalPanelProps = Omit<ComponentPropsWithRef<'div'>, 'hidden' | 'tabIndex' | 'aria-label' | 'aria-labelledby'> & {
+  /** The dialog's accessible name, rendered in the title. */
+  title?: string;
+  /** The close control's text and accessible name. */
+  closeLabel?: string;
+  /** Written into the focus anchor once the shopper is signed in, so the self-close is announced. */
+  signedInFocusLabel?: string;
+};
+/**
+ * Read whether the sign-in panel is showing, and set it, from the nearest `SignInDisclosureRoot`.
+ * Throws outside that subtree — a misplaced part is a composition bug that should surface immediately,
+ * mirroring `useSignIn()`.
+ */
+export declare function useSignInDisclosure(): SignInDisclosureContextValue;
+export declare const SignInDisclosureRootDefinition: ComponentDefinition<Readonly<{
+  children?: ReactNode;
+}>>;
+export declare const SignInDisclosureTriggerDefinition: ComponentDefinition<SignInDisclosureTriggerProps>;
+export declare const SignInModalPanelDefinition: ComponentDefinition<SignInModalPanelProps>;
+/**
+ * Owns the open state and publishes it as the `sign-in-disclosure` context. It renders no element of
+ * its own and always renders `children`.
+ *
+ * The published `open` is derived — `localOpen && state !== 'loggedIn'` — so no render ever shows an
+ * open panel to a signed-in shopper: every part inside the panel has already returned `null` by then,
+ * which would leave an empty dialog for one committed frame. The effect only clears the stored latch,
+ * so a later sign-out does not pop the panel open again with nobody having asked.
+ */
+export declare function SignInDisclosureRoot({ children }: SignInDisclosureRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Silent placeholder while the account configuration is in flight: `aria-hidden`, no role, not
+ * focusable, mirroring `SignInEmailControlSkeleton`.
+ */
+export declare function SignInDisclosureTriggerSkeleton({ className }: Readonly<{
+  className?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+/**
+ * The login button. Gates on `resolved` before it reads any flag: an unresolved account reports no
+ * method enabled, which would otherwise hide the button from a store that offers sign-in.
+ */
+export declare function SignInDisclosureTrigger({ label, className, onClick, ...props }: SignInDisclosureTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The sign-in modal. Renders Base UI's `Dialog` controlled from the context, with the portal kept
+ * mounted: the children — and the access-code stepper's token inside them — survive a close, while the
+ * closed popup carries `hidden`, so it is out of the accessibility tree and the tab order.
+ *
+ * Focus returns to the trigger that opened the panel on a shopper-driven close. A self-close removes
+ * that trigger, so focus goes to an in-flow anchor instead of `document.body`. The anchor is mounted
+ * empty and receives its text on the pass the session flips, which is the shape that announces; it is
+ * clipped, so the text reaches assistive technology and never the page.
+ *
+ * `hidden`, `tabIndex`, `aria-label` and `aria-labelledby` are the panel's own: closed means hidden, and
+ * the title names the dialog.
+ */
+export declare function SignInModalPanel({ title, closeLabel, signedInFocusLabel, className, children, ...props }: SignInModalPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const SignInDisclosure: {
+  Root: typeof SignInDisclosureRoot;
+  Trigger: typeof SignInDisclosureTrigger;
+  ModalPanel: typeof SignInModalPanel;
+};
+//#endregion
+//# sourceMappingURL=sign-in-disclosure.d.ts.map

package/dist/matter/sign-in-disclosure/sign-in-disclosure.js

@@ -0,0 +1,232 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useSession } from "../session/session.js";
+import { useSignIn } from "../sign-in/sign-in.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/matter/sign-in-disclosure/sign-in-disclosure.tsx
+const SIGN_IN_DISCLOSURE_CONTEXT_UNSET = Symbol("SignInDisclosureContextUnset");
+const SignInDisclosureContext = createContext(SIGN_IN_DISCLOSURE_CONTEXT_UNSET);
+/**
+* Read whether the sign-in panel is showing, and set it, from the nearest `SignInDisclosureRoot`.
+* Throws outside that subtree — a misplaced part is a composition bug that should surface immediately,
+* mirroring `useSignIn()`.
+*/
+function useSignInDisclosure() {
+	const ctx = useContext(SignInDisclosureContext);
+	if (ctx === SIGN_IN_DISCLOSURE_CONTEXT_UNSET) throw new Error("useSignInDisclosure() must be used inside a <SignInDisclosureRoot> subtree.");
+	return ctx;
+}
+/**
+* Whether the nearest `SignInDisclosureRoot` is showing its panel, or `undefined` outside one. For the
+* parts inside the panel that hold shopper input and must drop it when the panel closes, yet still
+* render without a disclosure. Unlike `useSignInDisclosure()` it never throws, and it is not part of the
+* package barrel.
+*/
+function useSignInDisclosureOpen() {
+	const ctx = useContext(SignInDisclosureContext);
+	return ctx === SIGN_IN_DISCLOSURE_CONTEXT_UNSET ? void 0 : ctx.open;
+}
+const SignInDisclosureRootDefinition = defineComponent({
+	name: "SignInDisclosureRoot",
+	importPath: "@vtex/faststore/components",
+	component: SignInDisclosureRoot,
+	requiresContext: "sign-in",
+	providesContext: "sign-in-disclosure",
+	editor: {
+		label: "Sign-In Disclosure Root",
+		category: "identity"
+	},
+	schema: {},
+	guideline: "Owns whether the sign-in modal is showing and shares it with the triggers and the panel below it. Renders no element of its own and always renders its children. Compose any number of SignInDisclosureTrigger and exactly one SignInModalPanel inside it. Must be inside SignInRoot. See sign-in-disclosure.md."
+});
+const SignInDisclosureTriggerDefinition = defineComponent({
+	name: "SignInDisclosureTrigger",
+	importPath: "@vtex/faststore/components",
+	component: SignInDisclosureTrigger,
+	skeleton: SignInDisclosureTriggerSkeleton,
+	requiresContext: "sign-in-disclosure",
+	editor: {
+		label: "Sign-In Trigger",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Label"
+	} },
+	guideline: "The login button: opens the sign-in modal. Compose as many as the store needs, they all open the one panel. Draws a silent placeholder while the account configuration loads, and renders nothing for a signed-in shopper or when the account enables no sign-in method. Must be inside SignInDisclosureRoot. See sign-in-disclosure.md."
+});
+const SignInModalPanelDefinition = defineComponent({
+	name: "SignInModalPanel",
+	importPath: "@vtex/faststore/components",
+	component: SignInModalPanel,
+	requiresContext: "sign-in-disclosure",
+	editor: {
+		label: "Sign-In Modal Panel",
+		category: "layout"
+	},
+	schema: {
+		title: {
+			type: "string",
+			label: "Title"
+		},
+		closeLabel: {
+			type: "string",
+			label: "Close label"
+		},
+		signedInFocusLabel: {
+			type: "string",
+			label: "Signed-in announcement"
+		}
+	},
+	guideline: "The sign-in modal. Compose the sign-in parts (SignInEmailControl, the method parts, the access-code parts) as its children; they stay mounted while it is closed, so a shopper who steps out to read a code returns to the step they left. It closes by itself the moment the session becomes signed in. Author the title: it is what names the dialog for assistive technology. Must be inside SignInDisclosureRoot. Use it instead of a bare DialogRoot, which cannot close itself. See sign-in-disclosure.md."
+});
+/**
+* The focus anchor is not page copy: it exists to take focus and be announced. It sits in the layout's flow,
+* outside the panel, where no `style` the merchant authors on the panel reaches it, so it is clipped here
+* rather than left to a swatch. A clip keeps it in the accessibility tree, which `display: none` would not.
+*/
+const FOCUS_ANCHOR_STYLE = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+/** Props the panel owns, discarded whatever a caller passes: the type omits them, a spread or a cast does not. */
+function withoutPanelOwnedKeys({ hidden: _hidden, tabIndex: _tabIndex, "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy, ...rest }) {
+	return rest;
+}
+/**
+* Owns the open state and publishes it as the `sign-in-disclosure` context. It renders no element of
+* its own and always renders `children`.
+*
+* The published `open` is derived — `localOpen && state !== 'loggedIn'` — so no render ever shows an
+* open panel to a signed-in shopper: every part inside the panel has already returned `null` by then,
+* which would leave an empty dialog for one committed frame. The effect only clears the stored latch,
+* so a later sign-out does not pop the panel open again with nobody having asked.
+*/
+function SignInDisclosureRoot({ children }) {
+	useSignIn();
+	const { state } = useSession();
+	const signedIn = state === "loggedIn";
+	const [localOpen, setLocalOpen] = useState(false);
+	useEffect(() => {
+		if (signedIn) setLocalOpen(false);
+	}, [signedIn]);
+	const setOpen = useCallback((next) => setLocalOpen(next && !signedIn), [signedIn]);
+	const contextValue = useMemo(() => ({
+		open: localOpen && !signedIn,
+		setOpen
+	}), [
+		localOpen,
+		signedIn,
+		setOpen
+	]);
+	return /* @__PURE__ */ jsx(SignInDisclosureContext, {
+		value: contextValue,
+		children
+	});
+}
+/**
+* Silent placeholder while the account configuration is in flight: `aria-hidden`, no role, not
+* focusable, mirroring `SignInEmailControlSkeleton`.
+*/
+function SignInDisclosureTriggerSkeleton({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		"data-fs-sign-in-disclosure-trigger-skeleton": "",
+		"data-fs-sign-in-state": "loading",
+		"aria-hidden": "true"
+	});
+}
+/**
+* The login button. Gates on `resolved` before it reads any flag: an unresolved account reports no
+* method enabled, which would otherwise hide the button from a store that offers sign-in.
+*/
+function SignInDisclosureTrigger({ label, className, onClick, ...props }) {
+	const { setOpen } = useSignInDisclosure();
+	const signIn = useSignIn();
+	const { state } = useSession();
+	if (state === "loggedIn") return null;
+	if (!signIn.resolved) return /* @__PURE__ */ jsx(SignInDisclosureTriggerSkeleton, { className });
+	if (!signIn.anyMethodEnabled) return null;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className,
+		"data-fs-sign-in-disclosure-trigger": "",
+		"data-fs-sign-in-state": "ready",
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setOpen(true);
+		},
+		children: label
+	});
+}
+/**
+* The sign-in modal. Renders Base UI's `Dialog` controlled from the context, with the portal kept
+* mounted: the children — and the access-code stepper's token inside them — survive a close, while the
+* closed popup carries `hidden`, so it is out of the accessibility tree and the tab order.
+*
+* Focus returns to the trigger that opened the panel on a shopper-driven close. A self-close removes
+* that trigger, so focus goes to an in-flow anchor instead of `document.body`. The anchor is mounted
+* empty and receives its text on the pass the session flips, which is the shape that announces; it is
+* clipped, so the text reaches assistive technology and never the page.
+*
+* `hidden`, `tabIndex`, `aria-label` and `aria-labelledby` are the panel's own: closed means hidden, and
+* the title names the dialog.
+*/
+function SignInModalPanel({ title, closeLabel, signedInFocusLabel, className, children, ...props }) {
+	const { open, setOpen } = useSignInDisclosure();
+	const { state, loading } = useSession();
+	const signedIn = state === "loggedIn";
+	const focusAnchorRef = useRef(null);
+	const [sawSignedOut, setSawSignedOut] = useState(false);
+	if (!loading && !signedIn && !sawSignedOut) setSawSignedOut(true);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("output", {
+		ref: focusAnchorRef,
+		tabIndex: -1,
+		style: FOCUS_ANCHOR_STYLE,
+		"data-fs-sign-in-modal-focus-anchor": "",
+		children: signedIn && sawSignedOut ? signedInFocusLabel : null
+	}), /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: setOpen,
+		modal: true,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			keepMounted: true,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { "data-fs-sign-in-modal-backdrop": "" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+				...withoutPanelOwnedKeys(props),
+				className,
+				finalFocus: signedIn ? focusAnchorRef : true,
+				"data-fs-sign-in-modal-panel": "",
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-fs-sign-in-modal-header": "",
+					children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						"data-fs-sign-in-modal-title": "",
+						children: title
+					}), /* @__PURE__ */ jsx(Dialog.Close, {
+						"data-fs-sign-in-modal-close": "",
+						children: closeLabel
+					})]
+				}), children]
+			})]
+		})
+	})] });
+}
+const SignInDisclosure = {
+	Root: SignInDisclosureRoot,
+	Trigger: SignInDisclosureTrigger,
+	ModalPanel: SignInModalPanel
+};
+//#endregion
+export { SignInDisclosure, SignInDisclosureRoot, SignInDisclosureRootDefinition, SignInDisclosureTrigger, SignInDisclosureTriggerDefinition, SignInDisclosureTriggerSkeleton, SignInModalPanel, SignInModalPanelDefinition, useSignInDisclosure, useSignInDisclosureOpen };
+
+//# sourceMappingURL=sign-in-disclosure.js.map

package/dist/matter/sign-in-disclosure/sign-in-disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in-disclosure.js","names":["BaseDialog"],"sources":["../../../src/matter/sign-in-disclosure/sign-in-disclosure.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { useSession } from '../session/session.js';\nimport { useSignIn } from '../sign-in/sign-in.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type SignInDisclosureContextValue = Readonly<{\n  /** Whether the panel is showing. Derived: `false` whenever the session reports `loggedIn`. */\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}>;\n\nexport type SignInDisclosureRootProps = Readonly<{ children?: ReactNode }>;\n\nexport type SignInDisclosureTriggerProps = ComponentPropsWithRef<'button'> & {\n  label?: string;\n};\n\n/**\n * Extends the div props except the four the panel owns: a caller value would reopen the closed panel to\n * assistive technology, or rename the dialog.\n */\nexport type SignInModalPanelProps = Omit<\n  ComponentPropsWithRef<'div'>,\n  'hidden' | 'tabIndex' | 'aria-label' | 'aria-labelledby'\n> & {\n  /** The dialog's accessible name, rendered in the title. */\n  title?: string;\n  /** The close control's text and accessible name. */\n  closeLabel?: string;\n  /** Written into the focus anchor once the shopper is signed in, so the self-close is announced. */\n  signedInFocusLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst SIGN_IN_DISCLOSURE_CONTEXT_UNSET = Symbol('SignInDisclosureContextUnset');\n\nconst SignInDisclosureContext = createContext<SignInDisclosureContextValue | typeof SIGN_IN_DISCLOSURE_CONTEXT_UNSET>(\n  SIGN_IN_DISCLOSURE_CONTEXT_UNSET,\n);\n\n/**\n * Read whether the sign-in panel is showing, and set it, from the nearest `SignInDisclosureRoot`.\n * Throws outside that subtree — a misplaced part is a composition bug that should surface immediately,\n * mirroring `useSignIn()`.\n */\nexport function useSignInDisclosure(): SignInDisclosureContextValue {\n  const ctx = useContext(SignInDisclosureContext);\n  if (ctx === SIGN_IN_DISCLOSURE_CONTEXT_UNSET) {\n    throw new Error('useSignInDisclosure() must be used inside a <SignInDisclosureRoot> subtree.');\n  }\n  return ctx;\n}\n\n/**\n * Whether the nearest `SignInDisclosureRoot` is showing its panel, or `undefined` outside one. For the\n * parts inside the panel that hold shopper input and must drop it when the panel closes, yet still\n * render without a disclosure. Unlike `useSignInDisclosure()` it never throws, and it is not part of the\n * package barrel.\n */\nexport function useSignInDisclosureOpen(): boolean | undefined {\n  const ctx = useContext(SignInDisclosureContext);\n  return ctx === SIGN_IN_DISCLOSURE_CONTEXT_UNSET ? undefined : ctx.open;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const SignInDisclosureRootDefinition = defineComponent<SignInDisclosureRootProps>({\n  name: 'SignInDisclosureRoot',\n  importPath: '@vtex/faststore/components',\n  component: SignInDisclosureRoot,\n  requiresContext: 'sign-in',\n  providesContext: 'sign-in-disclosure',\n  editor: { label: 'Sign-In Disclosure Root', category: 'identity' },\n  schema: {},\n  guideline:\n    'Owns whether the sign-in modal is showing and shares it with the triggers and the panel below it. Renders no element of its own and always renders its children. Compose any number of SignInDisclosureTrigger and exactly one SignInModalPanel inside it. Must be inside SignInRoot. See sign-in-disclosure.md.',\n});\n\nexport const SignInDisclosureTriggerDefinition = defineComponent<SignInDisclosureTriggerProps>({\n  name: 'SignInDisclosureTrigger',\n  importPath: '@vtex/faststore/components',\n  component: SignInDisclosureTrigger,\n  skeleton: SignInDisclosureTriggerSkeleton,\n  requiresContext: 'sign-in-disclosure',\n  editor: { label: 'Sign-In Trigger', category: 'action' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n  },\n  guideline:\n    'The login button: opens the sign-in modal. Compose as many as the store needs, they all open the one panel. Draws a silent placeholder while the account configuration loads, and renders nothing for a signed-in shopper or when the account enables no sign-in method. Must be inside SignInDisclosureRoot. See sign-in-disclosure.md.',\n});\n\nexport const SignInModalPanelDefinition = defineComponent<SignInModalPanelProps>({\n  name: 'SignInModalPanel',\n  importPath: '@vtex/faststore/components',\n  component: SignInModalPanel,\n  requiresContext: 'sign-in-disclosure',\n  editor: { label: 'Sign-In Modal Panel', category: 'layout' },\n  schema: {\n    title: { type: 'string', label: 'Title' },\n    closeLabel: { type: 'string', label: 'Close label' },\n    signedInFocusLabel: { type: 'string', label: 'Signed-in announcement' },\n  },\n  guideline:\n    'The sign-in modal. Compose the sign-in parts (SignInEmailControl, the method parts, the access-code parts) as its children; they stay mounted while it is closed, so a shopper who steps out to read a code returns to the step they left. It closes by itself the moment the session becomes signed in. Author the title: it is what names the dialog for assistive technology. Must be inside SignInDisclosureRoot. Use it instead of a bare DialogRoot, which cannot close itself. See sign-in-disclosure.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/**\n * The focus anchor is not page copy: it exists to take focus and be announced. It sits in the layout's flow,\n * outside the panel, where no `style` the merchant authors on the panel reaches it, so it is clipped here\n * rather than left to a swatch. A clip keeps it in the accessibility tree, which `display: none` would not.\n */\nconst FOCUS_ANCHOR_STYLE: CSSProperties = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n\n/** Props the panel owns, discarded whatever a caller passes: the type omits them, a spread or a cast does not. */\nfunction withoutPanelOwnedKeys({\n  hidden: _hidden,\n  tabIndex: _tabIndex,\n  'aria-label': _ariaLabel,\n  'aria-labelledby': _ariaLabelledBy,\n  ...rest\n}: Record<string, unknown>) {\n  return rest;\n}\n\n/**\n * Owns the open state and publishes it as the `sign-in-disclosure` context. It renders no element of\n * its own and always renders `children`.\n *\n * The published `open` is derived — `localOpen && state !== 'loggedIn'` — so no render ever shows an\n * open panel to a signed-in shopper: every part inside the panel has already returned `null` by then,\n * which would leave an empty dialog for one committed frame. The effect only clears the stored latch,\n * so a later sign-out does not pop the panel open again with nobody having asked.\n */\nexport function SignInDisclosureRoot({ children }: SignInDisclosureRootProps) {\n  // Called for its throw: a disclosure outside `SignInRoot` names the ancestor to add first.\n  useSignIn();\n  const { state } = useSession();\n  const signedIn = state === 'loggedIn';\n\n  const [localOpen, setLocalOpen] = useState(false);\n\n  useEffect(() => {\n    if (signedIn) setLocalOpen(false);\n  }, [signedIn]);\n\n  // A signed-in shopper cannot arm the latch: it would outlive the session and open on sign-out.\n  const setOpen = useCallback((next: boolean) => setLocalOpen(next && !signedIn), [signedIn]);\n\n  const contextValue = useMemo<SignInDisclosureContextValue>(\n    () => ({ open: localOpen && !signedIn, setOpen }),\n    [localOpen, signedIn, setOpen],\n  );\n\n  return <SignInDisclosureContext value={contextValue}>{children}</SignInDisclosureContext>;\n}\n\n/**\n * Silent placeholder while the account configuration is in flight: `aria-hidden`, no role, not\n * focusable, mirroring `SignInEmailControlSkeleton`.\n */\nexport function SignInDisclosureTriggerSkeleton({ className }: Readonly<{ className?: string }>) {\n  return (\n    <span\n      className={className}\n      data-fs-sign-in-disclosure-trigger-skeleton=\"\"\n      data-fs-sign-in-state=\"loading\"\n      aria-hidden=\"true\"\n    />\n  );\n}\n\n/**\n * The login button. Gates on `resolved` before it reads any flag: an unresolved account reports no\n * method enabled, which would otherwise hide the button from a store that offers sign-in.\n */\nexport function SignInDisclosureTrigger({ label, className, onClick, ...props }: SignInDisclosureTriggerProps) {\n  const { setOpen } = useSignInDisclosure();\n  const signIn = useSignIn();\n  const { state } = useSession();\n\n  if (state === 'loggedIn') return null;\n  if (!signIn.resolved) return <SignInDisclosureTriggerSkeleton className={className} />;\n  if (!signIn.anyMethodEnabled) return null;\n\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      className={className}\n      data-fs-sign-in-disclosure-trigger=\"\"\n      data-fs-sign-in-state=\"ready\"\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) setOpen(true);\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * The sign-in modal. Renders Base UI's `Dialog` controlled from the context, with the portal kept\n * mounted: the children — and the access-code stepper's token inside them — survive a close, while the\n * closed popup carries `hidden`, so it is out of the accessibility tree and the tab order.\n *\n * Focus returns to the trigger that opened the panel on a shopper-driven close. A self-close removes\n * that trigger, so focus goes to an in-flow anchor instead of `document.body`. The anchor is mounted\n * empty and receives its text on the pass the session flips, which is the shape that announces; it is\n * clipped, so the text reaches assistive technology and never the page.\n *\n * `hidden`, `tabIndex`, `aria-label` and `aria-labelledby` are the panel's own: closed means hidden, and\n * the title names the dialog.\n */\nexport function SignInModalPanel({\n  title,\n  closeLabel,\n  signedInFocusLabel,\n  className,\n  children,\n  ...props\n}: SignInModalPanelProps) {\n  const { open, setOpen } = useSignInDisclosure();\n  const { state, loading } = useSession();\n  const signedIn = state === 'loggedIn';\n  const focusAnchorRef = useRef<HTMLOutputElement>(null);\n\n  // A shopper who was already signed in when the page loaded was never told anything, so there is nothing to\n  // announce. The session is anonymous until it resolves, so only a settled, not-signed-in render arms it.\n  const [sawSignedOut, setSawSignedOut] = useState(false);\n  if (!loading && !signedIn && !sawSignedOut) setSawSignedOut(true);\n\n  return (\n    <>\n      <output ref={focusAnchorRef} tabIndex={-1} style={FOCUS_ANCHOR_STYLE} data-fs-sign-in-modal-focus-anchor=\"\">\n        {signedIn && sawSignedOut ? signedInFocusLabel : null}\n      </output>\n      <BaseDialog.Root open={open} onOpenChange={setOpen} modal>\n        <BaseDialog.Portal keepMounted>\n          <BaseDialog.Backdrop data-fs-sign-in-modal-backdrop=\"\" />\n          <BaseDialog.Popup\n            {...withoutPanelOwnedKeys(props)}\n            className={className}\n            finalFocus={signedIn ? focusAnchorRef : true}\n            data-fs-sign-in-modal-panel=\"\"\n          >\n            <div data-fs-sign-in-modal-header=\"\">\n              <BaseDialog.Title data-fs-sign-in-modal-title=\"\">{title}</BaseDialog.Title>\n              <BaseDialog.Close data-fs-sign-in-modal-close=\"\">{closeLabel}</BaseDialog.Close>\n            </div>\n            {children}\n          </BaseDialog.Popup>\n        </BaseDialog.Portal>\n      </BaseDialog.Root>\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const SignInDisclosure = {\n  Root: SignInDisclosureRoot,\n  Trigger: SignInDisclosureTrigger,\n  ModalPanel: SignInModalPanel,\n};\n"],"mappings":";;;;;;;;;AA6CA,MAAM,mCAAmC,OAAO,8BAA8B;AAE9E,MAAM,0BAA0B,cAC9B,gCACF;;;;;;AAOA,SAAgB,sBAAoD;CAClE,MAAM,MAAM,WAAW,uBAAuB;CAC9C,IAAI,QAAQ,kCACV,MAAM,IAAI,MAAM,6EAA6E;CAE/F,OAAO;AACT;;;;;;;AAQA,SAAgB,0BAA+C;CAC7D,MAAM,MAAM,WAAW,uBAAuB;CAC9C,OAAO,QAAQ,mCAAmC,KAAA,IAAY,IAAI;AACpE;AAMA,MAAa,iCAAiC,gBAA2C;CACvF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA2B,UAAU;CAAW;CACjE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,UAAU;CACV,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAS;CACvD,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,OAAO;CAAQ,EAC1C;CACA,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAS;CAC3D,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,oBAAoB;GAAE,MAAM;GAAU,OAAO;EAAyB;CACxE;CACA,WACE;AACJ,CAAC;;;;;;AAWD,MAAM,qBAAoC;CACxC,UAAU;CACV,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,UAAU;CACV,MAAM;CACN,YAAY;CACZ,QAAQ;AACV;;AAGA,SAAS,sBAAsB,EAC7B,QAAQ,SACR,UAAU,WACV,cAAc,YACd,mBAAmB,iBACnB,GAAG,QACuB;CAC1B,OAAO;AACT;;;;;;;;;;AAWA,SAAgB,qBAAqB,EAAE,YAAuC;CAE5E,UAAU;CACV,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,WAAW,UAAU;CAE3B,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,gBAAgB;EACd,IAAI,UAAU,aAAa,KAAK;CAClC,GAAG,CAAC,QAAQ,CAAC;CAGb,MAAM,UAAU,aAAa,SAAkB,aAAa,QAAQ,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAE1F,MAAM,eAAe,eACZ;EAAE,MAAM,aAAa,CAAC;EAAU;CAAQ,IAC/C;EAAC;EAAW;EAAU;CAAO,CAC/B;CAEA,OAAO,oBAAC,yBAAD;EAAyB,OAAO;EAAe;CAAkC,CAAA;AAC1F;;;;;AAMA,SAAgB,gCAAgC,EAAE,aAA+C;CAC/F,OACE,oBAAC,QAAD;EACa;EACX,+CAA4C;EAC5C,yBAAsB;EACtB,eAAY;CACb,CAAA;AAEL;;;;;AAMA,SAAgB,wBAAwB,EAAE,OAAO,WAAW,SAAS,GAAG,SAAuC;CAC7G,MAAM,EAAE,YAAY,oBAAoB;CACxC,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,UAAU,WAAW;CAE7B,IAAI,UAAU,YAAY,OAAO;CACjC,IAAI,CAAC,OAAO,UAAU,OAAO,oBAAC,iCAAD,EAA4C,UAAY,CAAA;CACrF,IAAI,CAAC,OAAO,kBAAkB,OAAO;CAErC,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,MAAK;EACM;EACX,sCAAmC;EACnC,yBAAsB;EACtB,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,IAAI,CAAC,MAAM,kBAAkB,QAAQ,IAAI;EAC3C;EAEC,UAAA;CACK,CAAA;AAEZ;;;;;;;;;;;;;;AAeA,SAAgB,iBAAiB,EAC/B,OACA,YACA,oBACA,WACA,UACA,GAAG,SACqB;CACxB,MAAM,EAAE,MAAM,YAAY,oBAAoB;CAC9C,MAAM,EAAE,OAAO,YAAY,WAAW;CACtC,MAAM,WAAW,UAAU;CAC3B,MAAM,iBAAiB,OAA0B,IAAI;CAIrD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,cAAc,gBAAgB,IAAI;CAEhE,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAQ,KAAK;EAAgB,UAAU;EAAI,OAAO;EAAoB,sCAAmC;EACtG,UAAA,YAAY,eAAe,qBAAqB;CAC3C,CAAA,GACR,oBAACA,OAAW,MAAZ;EAAuB;EAAM,cAAc;EAAS,OAAA;EAClD,UAAA,qBAACA,OAAW,QAAZ;GAAmB,aAAA;GAAnB,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,kCAA+B,GAAI,CAAA,GACxD,qBAACA,OAAW,OAAZ;IACE,GAAI,sBAAsB,KAAK;IACpB;IACX,YAAY,WAAW,iBAAiB;IACxC,+BAA4B;IAJ9B,UAAA,CAME,qBAAC,OAAD;KAAK,gCAA6B;KAAlC,UAAA,CACE,oBAACA,OAAW,OAAZ;MAAkB,+BAA4B;MAAI,UAAA;KAAwB,CAAA,GAC1E,oBAACA,OAAW,OAAZ;MAAkB,+BAA4B;MAAI,UAAA;KAA6B,CAAA,CAC5E;IACJ,CAAA,GAAA,QACe;GACD,CAAA,CAAA;;CACJ,CAAA,CACjB,EAAA,CAAA;AAEN;AAMA,MAAa,mBAAmB;CAC9B,MAAM;CACN,SAAS;CACT,YAAY;AACd"}

package/dist/matter/sign-in-form/sign-in-form.d.ts

@@ -1,79 +1,110 @@
+import { ContentValue, MessageFieldName, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { SessionUserError } from "../../sdk/session/auth-operations.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
 //#region src/matter/sign-in-form/sign-in-form.d.ts
-/** ClientProfile slice forwarded by the reactive runtime — only `email` is consumed for pre-fill. */
-export type SignInFormSlice = Readonly<{
-  email?: string | null;
-}>;
-export type SignInFormMessages = Readonly<{
-  invalidCredentialsMessage: string;
-  blockedMessage: string;
-  networkErrorMessage: string;
-  genericErrorMessage: string;
-}>;
-export type SignInFormProps = Readonly<{
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  passwordLabel?: string;
+export declare const SignInFormContent: {
+  readonly id: "sign-in-form";
+  readonly title: "Sign In Form";
+  readonly description: "Labels and error messages of the password sign-in step.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly passwordLabel: {
+        readonly type: "string";
+        readonly title: "Password label";
+        readonly format: "icu-message";
+        readonly messageSource: "Password";
+      };
+      readonly showPasswordLabel: {
+        readonly type: "string";
+        readonly title: "Show password label";
+        readonly format: "icu-message";
+        readonly messageSource: "Show password";
+      };
+      readonly hidePasswordLabel: {
+        readonly type: "string";
+        readonly title: "Hide password label";
+        readonly format: "icu-message";
+        readonly messageSource: "Hide password";
+      };
+      readonly submitLabel: {
+        readonly type: "string";
+        readonly title: "Submit label";
+        readonly format: "icu-message";
+        readonly messageSource: "Sign In";
+      };
+      readonly passwordRequiredMessage: {
+        readonly type: "string";
+        readonly title: "Password required message";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter your password.";
+      };
+      readonly invalidCredentialsMessage: {
+        readonly type: "string";
+        readonly title: "Invalid credentials message";
+        readonly format: "icu-message";
+        readonly messageSource: "Incorrect email or password. Please try again.";
+      };
+      readonly blockedMessage: {
+        readonly type: "string";
+        readonly title: "Blocked account message";
+        readonly format: "icu-message";
+        readonly messageSource: "Access to this account is temporarily blocked. Please try again later.";
+      };
+      readonly networkErrorMessage: {
+        readonly type: "string";
+        readonly title: "Network error message";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to complete the request. Please try again.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Generic error message";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to sign in. Please try again.";
+      };
+    };
+  };
+};
+/** The `sign-in-form` message a rejected sign-in renders. */
+export type SignInFormErrorField = Extract<MessageFieldName<typeof SignInFormContent>, 'passwordRequiredMessage' | 'invalidCredentialsMessage' | 'blockedMessage' | 'networkErrorMessage' | 'genericErrorMessage'>;
+export type SignInFormProps = MessageLocaleProp & Readonly<{
   passwordPlaceholder?: string;
-  showPasswordLabel?: string;
-  hidePasswordLabel?: string;
-  submitLabel?: string;
-  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */
-  invalidEmailMessage?: string;
-  /** Inline error when the password field is submitted empty (this form owns the presence check). */
-  passwordRequiredMessage?: string;
-  invalidCredentialsMessage?: string;
-  blockedMessage?: string;
-  networkErrorMessage?: string;
-  genericErrorMessage?: string;
-  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */
-  $data?: SignInFormSlice | null;
+  /** Labels and error messages; see `SignInFormContent`. */
+  $content?: ContentValue<typeof SignInFormContent>;
   /** Compiler-injected action surface; carries `session.loginWithPassword`. */
   $actions?: ComponentActions;
   className?: string;
 }>;
 /**
- * Maps the first resolved SessionUserError to caller-configurable copy. INVALID_ACCESS_CODE,
- * ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable from
- * loginWithPassword but share the untyped `code: string` field, so they fall through to the
+ * Maps the first resolved SessionUserError to the `sign-in-form` message that words it.
+ * INVALID_ACCESS_CODE, ACCESS_CODE_SEND_LIMIT, and MISSING_AUTH_CONTEXT are contractually unreachable
+ * from loginWithPassword but share the untyped `code: string` field, so they fall through to the
  * generic message defensively, alongside any future/unknown code.
  */
-export declare function mapSessionErrorMessage(error: SessionUserError | undefined, messages: SignInFormMessages): string | null;
-export declare const SignInFormDefinition: ComponentDefinition<Readonly<{
-  emailLabel?: string;
-  emailPlaceholder?: string;
-  passwordLabel?: string;
-  passwordPlaceholder?: string;
-  showPasswordLabel?: string;
-  hidePasswordLabel?: string;
-  submitLabel?: string;
-  /** Inline error for an invalid email format (mirrors EmailIdentificationControl). */
-  invalidEmailMessage?: string;
-  /** Inline error when the password field is submitted empty (this form owns the presence check). */
-  passwordRequiredMessage?: string;
-  invalidCredentialsMessage?: string;
-  blockedMessage?: string;
-  networkErrorMessage?: string;
-  genericErrorMessage?: string;
-  /** ClientProfile slice forwarded by the reactive runtime; `null` until the entity resolves. */
-  $data?: SignInFormSlice | null;
-  /** Compiler-injected action surface; carries `session.loginWithPassword`. */
-  $actions?: ComponentActions;
-  className?: string;
-}>>;
+export declare function mapSessionErrorField(error: SessionUserError | undefined): SignInFormErrorField | null;
+export declare const SignInFormDefinition: ComponentDefinition<SignInFormProps>;
 /**
- * Matter that composes `EmailField` + `PasswordField` under one submit and dispatches
- * `$actions.session.loginWithPassword`. Reads the email pre-fill from `clientProfile.email`
- * (colocated reactive fragment) and the identity tri-state from `useSession()` (which also
- * enforces the `SessionRoot` ancestor), self-gating to `null` once the shopper is `loggedIn`.
- * Client-side validation (email format, password presence) blocks the dispatch before any network
- * round trip; the awaited dispatch's `userErrors` map to one form-level inline message, distinct
- * from any ancestor `UNAUTHORIZED` gate. While the write is in flight the form is disabled and
- * `data-fs-sign-in-form-pending` is present so a checkout-CTA guard can block.
+ * Password method of the sign-in surface. It declares no fragment and reads no data of its own: the
+ * gate is the `sign-in` context (`resolved`, `passwordEnabled` and `method === 'password'`) plus the
+ * session read (`state !== 'loggedIn'`), so a store enabling both methods shows the password step only
+ * while it is the method showing, and a store that disables passwords never shows it. It returns `null`
+ * rather than unmounting, so a half-typed password survives a method switch.
+ *
+ * The email is the shared draft `SignInRoot` owns, read at submit time and trimmed; this form renders no
+ * email field, and the submit stays disabled until that draft is a valid address. The password-presence
+ * check runs on submit. The awaited dispatch's first `userError` maps to a `sign-in-form` message:
+ * `INVALID_CREDENTIALS` is a claim about the password the shopper typed, so it renders on the
+ * `PasswordField`; every other code is a claim about the account or the request and renders in
+ * `data-fs-sign-in-form-error`. A dispatched attempt clears the password, accepted or rejected, and leaves the shared email alone.
+ * While the write is in flight the password and submit are disabled and `data-fs-sign-in-form-pending` is
+ * present so a checkout-CTA guard can block. The password clears when the session reaches `loggedIn`, and
+ * when a `SignInModalPanel` hosting it closes: this form never unmounts, so it would otherwise outlive the
+ * session it was typed for, and sit in the hidden panel after the shopper changed their mind.
  */
-export declare function SignInForm({ emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, showPasswordLabel, hidePasswordLabel, submitLabel, invalidEmailMessage, passwordRequiredMessage, invalidCredentialsMessage, blockedMessage, networkErrorMessage, genericErrorMessage, $data: $dataProp, $actions: $actionsProp, className }: SignInFormProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SignInForm({ passwordPlaceholder, $content, $actions: $actionsProp, className }: SignInFormProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=sign-in-form.d.ts.map