@hjmds/react 1.30.0 → 1.32.0

package/dist/auth-screen.d.ts

@@ -1,10 +1,18 @@
 import { type AuthScreenDensity, type AuthScreenDescriptor, type AuthScreenHeroDescriptor, type AuthScreenPolicyLinkDescriptor } from "@hjmds/design-contracts/components/auth-screen";
 import { type HTMLAttributeAnchorTarget, type HTMLAttributes, type ReactNode } from "react";
 import { type ScreenInitialFocus } from "@hjmds/design-contracts/screen-patterns";
+import { type ScreenExit } from "./internal/screen-exit.js";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
-export type AuthScreenLayoutProps = Omit<HTMLAttributes<HTMLElement>, "children"> & AuthScreenDescriptor & Readonly<{
+export type AuthScreenLayoutProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & AuthScreenDescriptor & Readonly<{
     /** Use section inside a product shell that already owns the main landmark. */
     as?: "main" | "section";
+    /**
+     * Route name in the shared screen header band (screenHeaderRecipe, centered like ScreenLayout). Login and signup
+     * routes kept a TopBar above this layout only for the route name + back/close (2026-10-18: utilverse, burntok).
+     */
+    title?: string;
+    /** Leaving the route: the same icon-only back/close as ScreenLayout `exit`, at the header's leading edge. */
+    exit?: ScreenExit;
     /** Product mark, title and description. The product owns every string here. */
     hero: ReactNode;
     /** The primary action block — provider buttons, or a product's own sign-in bundle. */
@@ -29,12 +37,19 @@ export type AuthScreenLayoutProps = Omit<HTMLAttributes<HTMLElement>, "children"
  * the bottom. The measurements come from the resolved descriptor as custom
  * properties so the stylesheet keeps one source of truth with the contract.
  */
-export declare const AuthScreenLayout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & Readonly<{
+export declare const AuthScreenLayout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title" | "children"> & Readonly<{
     density?: AuthScreenDensity;
     hasFooter?: boolean;
 }> & Readonly<{
     /** Use section inside a product shell that already owns the main landmark. */
     as?: "main" | "section";
+    /**
+     * Route name in the shared screen header band (screenHeaderRecipe, centered like ScreenLayout). Login and signup
+     * routes kept a TopBar above this layout only for the route name + back/close (2026-10-18: utilverse, burntok).
+     */
+    title?: string;
+    /** Leaving the route: the same icon-only back/close as ScreenLayout `exit`, at the header's leading edge. */
+    exit?: ScreenExit;
     /** Product mark, title and description. The product owns every string here. */
     hero: ReactNode;
     /** The primary action block — provider buttons, or a product's own sign-in bundle. */
@@ -63,7 +78,7 @@ export type AuthScreenHeroProps = AuthScreenHeroDescriptor & Readonly<{
  * product supplies the strings and mark; the type steps, tones and gaps come from
  * `authScreenRecipe.hero` so a login slogan never borrows the page-heading size.
  */
-export declare function AuthScreenHero({ mark, title, eyebrow, description, headingLevel }: AuthScreenHeroProps): import("react").JSX.Element;
+export declare function AuthScreenHero({ mark, title, eyebrow, description, headingLevel: suppliedHeadingLevel }: AuthScreenHeroProps): import("react").JSX.Element;
 export type AuthScreenPolicyLink = AuthScreenPolicyLinkDescriptor & Readonly<{
     /** Document URL; renders an anchor. */
     href?: string;

package/dist/auth-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth-screen.d.ts","sourceRoot":"","sources":["../src/auth-screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,8BAA8B,EACpC,MAAM,gDAAgD,CAAC;AAExD,OAAO,EAA+G,KAAK,yBAAyB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAChN,OAAO,EAAwB,KAAK,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAGxG,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAKtE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAC/E,oBAAoB,GACpB,QAAQ,CAAC;IACP,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,+EAA+E;IAC/E,IAAI,EAAE,SAAS,CAAC;IAChB,sFAAsF;IACtF,IAAI,EAAE,SAAS,CAAC;IAChB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC,CAAC,CAAC;AAEL;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;IA3BzB,8EAA8E;SACzE,MAAM,GAAG,SAAS;IACvB,+EAA+E;UACzE,SAAS;IACf,sFAAsF;UAChF,SAAS;IACf,2FAA2F;mBAC5E,MAAM;IACrB,4FAA4F;eACjF,OAAO;IAClB,qEAAqE;aAC5D,SAAS;gBACN,MAAM;IAClB,gGAAgG;kBAClF,uBAAuB;IACrC;;;OAGG;mBACY,kBAAkB;gDAoEpC,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,GACxD,QAAQ,CAAC;IACP,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,CAAC;AAEL;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,YAAgB,EAAE,EAAE,mBAAmB,+BA4B1G;AAED,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAC/D,QAAQ,CAAC;IACP,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEL,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACvC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BA8BlF"}
+{"version":3,"file":"auth-screen.d.ts","sourceRoot":"","sources":["../src/auth-screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,8BAA8B,EACpC,MAAM,gDAAgD,CAAC;AAExD,OAAO,EAA+G,KAAK,yBAAyB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAChN,OAAO,EAAqF,KAAK,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAGrK,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAOtE,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACzF,oBAAoB,GACpB,QAAQ,CAAC;IACP,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+EAA+E;IAC/E,IAAI,EAAE,SAAS,CAAC;IAChB,sFAAsF;IACtF,IAAI,EAAE,SAAS,CAAC;IAChB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC,CAAC,CAAC;AAEL;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;IAlCzB,8EAA8E;SACzE,MAAM,GAAG,SAAS;IACvB;;;OAGG;YACK,MAAM;IACd,6GAA6G;WACtG,UAAU;IACjB,+EAA+E;UACzE,SAAS;IACf,sFAAsF;UAChF,SAAS;IACf,2FAA2F;mBAC5E,MAAM;IACrB,4FAA4F;eACjF,OAAO;IAClB,qEAAqE;aAC5D,SAAS;gBACN,MAAM;IAClB,gGAAgG;kBAClF,uBAAuB;IACrC;;;OAGG;mBACY,kBAAkB;gDAmFpC,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,GACxD,QAAQ,CAAC;IACP,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,CAAC;AAEL;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,oBAAoB,EAAE,EAAE,mBAAmB,+BA8B5H;AAED,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAC/D,QAAQ,CAAC;IACP,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC,CAAC;AAEL,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC3C,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACvC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BA8BlF"}

package/dist/auth-screen.js

@@ -2,17 +2,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { authScreenRecipe, resolveAuthScreenDescriptor, validateAuthScreenHeroDescriptor, validateAuthScreenPolicyLinks, } from "@hjmds/design-contracts/components/auth-screen";
 import { typography } from "@hjmds/design-contracts/foundations";
 import { createContext, createElement, forwardRef, Fragment, useContext, useLayoutEffect, useRef, useId } from "react";
-import { initialFocusDefaults } from "@hjmds/design-contracts/screen-patterns";
+import { initialFocusDefaults, screenHeaderRecipe, screenPatternRecipe, validateScreenExit } from "@hjmds/design-contracts/screen-patterns";
 import { classNames, useDesignProfileDefaults } from "./internal.js";
 import { InitialFocusScope } from "./internal/initial-focus.js";
+import { ScreenExitButton } from "./internal/screen-exit.js";
+import { Heading } from "./heading.js";
 // The hero follows the layout density without the product passing it twice.
 const AuthScreenDensityContext = createContext(undefined);
+// With a header title the route name is the page heading (h1), so the hero tagline steps down to h2 by default.
+const AuthScreenTitledContext = createContext(false);
 /**
  * Two regions: hero + main stay one vertically centred block, the footer sits at
  * the bottom. The measurements come from the resolved descriptor as custom
  * properties so the stylesheet keeps one source of truth with the contract.
  */
-export const AuthScreenLayout = forwardRef(function AuthScreenLayout({ hero, main, footer, density, hasFooter, pendingLabel, mainCard = false, className, as: Element = "main", layoutStyle, initialFocus = initialFocusDefaults.auth, ...props }, forwardedRef) {
+export const AuthScreenLayout = forwardRef(function AuthScreenLayout({ title, exit, hero, main, footer, density, hasFooter, pendingLabel, mainCard = false, className, as: Element = "main", layoutStyle, initialFocus = initialFocusDefaults.auth, ...props }, forwardedRef) {
+    if (title !== undefined && !title.trim())
+        throw new TypeError("AuthScreenLayout title must not be empty");
+    if (exit)
+        validateScreenExit(exit, false);
+    const hasHeader = title !== undefined || exit !== undefined;
     const resolved = resolveAuthScreenDescriptor({
         ...(density === undefined ? {} : { density }),
         ...(hasFooter === undefined ? {} : { hasFooter }),
@@ -33,17 +42,22 @@ export const AuthScreenLayout = forwardRef(function AuthScreenLayout({ hero, mai
     }, [pending]);
     if (pending && !pendingLabel.trim())
         throw new TypeError("AuthScreen pendingLabel must not be empty");
-    return (_jsx(Element, { ...props, ref: forwardedRef, className: classNames("hjm-auth-screen", className), "data-density": resolved.density, style: {
+    return (_jsxs(Element, { ...props, ref: forwardedRef, className: classNames("hjm-auth-screen", className), "data-density": resolved.density, "data-header": hasHeader || undefined, style: {
             ["--hjm-auth-screen-max-width"]: `${resolved.maxWidth}px`,
             ["--hjm-auth-screen-hero-gap"]: `${resolved.heroGap}px`,
             ["--hjm-auth-screen-main-gap"]: `${resolved.mainGap}px`,
             ["--hjm-auth-screen-footer-gap"]: `${resolved.footerGap}px`,
             ["--hjm-auth-screen-padding-inline"]: `${resolved.paddingInline}px`,
             ["--hjm-auth-screen-padding-block"]: `${resolved.paddingBlock}px`,
+            ...(hasHeader ? {
+                ["--hjm-auth-screen-header-padding-inline"]: `${screenPatternRecipe.padding}px`,
+                ["--hjm-auth-screen-header-padding-block"]: `${screenHeaderRecipe.paddingVertical}px`,
+                ["--hjm-auth-screen-header-min-height"]: `${screenHeaderRecipe.minHeight}px`,
+            } : {}),
             ...props.style,
             ...layoutStyle,
-        }, children: _jsxs(InitialFocusScope, { mode: initialFocus, children: [_jsxs("div", { className: "hjm-auth-screen__block", children: [_jsx(AuthScreenDensityContext.Provider, { value: resolved.density, children: _jsx("div", { className: "hjm-auth-screen__hero", children: hero }) }), _jsxs("div", { className: "hjm-auth-screen__main", "data-card": mainCard || undefined, "aria-busy": pending || undefined, children: [_jsx("div", { ref: actionsRef, className: "hjm-auth-screen__actions", inert: pending, "aria-hidden": pending || undefined, onFocusCapture: event => { focusedAction.current = event.target; }, onBlurCapture: event => { if (!pending && !event.currentTarget.contains(event.relatedTarget))
-                                        focusedAction.current = null; }, style: pending ? { visibility: "hidden" } : undefined, children: main }), pending ? _jsx("div", { className: "hjm-auth-screen__pending", role: "status", "aria-label": pendingLabel, children: _jsx("span", { className: "hjm-auth-provider-button__spinner", "aria-hidden": "true" }) }) : null] })] }), showFooter ? _jsx("div", { className: "hjm-auth-screen__footer", children: footer }) : null] }) }));
+        }, children: [hasHeader ? _jsxs("header", { className: "hjm-auth-screen__header", children: [_jsx("div", { children: exit ? _jsx(ScreenExitButton, { ...exit }) : null }), _jsx("div", { className: "hjm-auth-screen__header-title", children: title === undefined ? null : _jsx(Heading, { level: screenHeaderRecipe.centeredTitleLevel, semanticLevel: 1, children: title }) }), _jsx("div", {})] }) : null, _jsxs(InitialFocusScope, { mode: initialFocus, children: [_jsxs("div", { className: "hjm-auth-screen__block", children: [_jsx(AuthScreenDensityContext.Provider, { value: resolved.density, children: _jsx(AuthScreenTitledContext.Provider, { value: title !== undefined, children: _jsx("div", { className: "hjm-auth-screen__hero", children: hero }) }) }), _jsxs("div", { className: "hjm-auth-screen__main", "data-card": mainCard || undefined, "aria-busy": pending || undefined, children: [_jsx("div", { ref: actionsRef, className: "hjm-auth-screen__actions", inert: pending, "aria-hidden": pending || undefined, onFocusCapture: event => { focusedAction.current = event.target; }, onBlurCapture: event => { if (!pending && !event.currentTarget.contains(event.relatedTarget))
+                                            focusedAction.current = null; }, style: pending ? { visibility: "hidden" } : undefined, children: main }), pending ? _jsx("div", { className: "hjm-auth-screen__pending", role: "status", "aria-label": pendingLabel, children: _jsx("span", { className: "hjm-auth-provider-button__spinner", "aria-hidden": "true" }) }) : null] })] }), showFooter ? _jsx("div", { className: "hjm-auth-screen__footer", children: footer }) : null] })] }));
 });
 /** Token weight per variant, following the nearest design profile like `Text` does. */
 function useTypeWeight() {
@@ -56,7 +70,9 @@ function useTypeWeight() {
  * product supplies the strings and mark; the type steps, tones and gaps come from
  * `authScreenRecipe.hero` so a login slogan never borrows the page-heading size.
  */
-export function AuthScreenHero({ mark, title, eyebrow, description, headingLevel = 1 }) {
+export function AuthScreenHero({ mark, title, eyebrow, description, headingLevel: suppliedHeadingLevel }) {
+    const titled = useContext(AuthScreenTitledContext);
+    const headingLevel = suppliedHeadingLevel ?? (titled ? 2 : 1);
     validateAuthScreenHeroDescriptor({ title, ...(eyebrow === undefined ? {} : { eyebrow }), ...(description === undefined ? {} : { description }), headingLevel });
     const density = useContext(AuthScreenDensityContext);
     const variant = resolveAuthScreenDescriptor(density === undefined ? {} : { density }).titleVariant;

package/dist/auth-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-screen.js","sourceRoot":"","sources":["../src/auth-screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  authScreenRecipe,\n  resolveAuthScreenDescriptor,\n  validateAuthScreenHeroDescriptor,\n  validateAuthScreenPolicyLinks,\n  type AuthScreenDensity,\n  type AuthScreenDescriptor,\n  type AuthScreenHeroDescriptor,\n  type AuthScreenPolicyLinkDescriptor,\n} from \"@hjmds/design-contracts/components/auth-screen\";\nimport { typography, type TextVariant } from \"@hjmds/design-contracts/foundations\";\nimport { createContext, createElement, forwardRef, Fragment, useContext, useLayoutEffect, useRef, type CSSProperties, type HTMLAttributeAnchorTarget, type HTMLAttributes, type ReactNode, useId } from \"react\";\nimport { initialFocusDefaults, type ScreenInitialFocus } from \"@hjmds/design-contracts/screen-patterns\";\nimport { classNames, useDesignProfileDefaults } from \"./internal.js\";\nimport { InitialFocusScope } from \"./internal/initial-focus.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n// The hero follows the layout density without the product passing it twice.\nconst AuthScreenDensityContext = createContext<AuthScreenDensity | undefined>(undefined);\n\nexport type AuthScreenLayoutProps = Omit<HTMLAttributes<HTMLElement>, \"children\"> &\n  AuthScreenDescriptor &\n  Readonly<{\n    /** Use section inside a product shell that already owns the main landmark. */\n    as?: \"main\" | \"section\";\n    /** Product mark, title and description. The product owns every string here. */\n    hero: ReactNode;\n    /** The primary action block — provider buttons, or a product's own sign-in bundle. */\n    main: ReactNode;\n    /** Product-localized progress label; presence replaces actions with one centred loader. */\n    pendingLabel?: string;\n    /** Let the layout own the action card; omit when the product already supplies a surface. */\n    mainCard?: boolean;\n    /** Consent notice and policy links. Omit with `hasFooter: false`. */\n    footer?: ReactNode;\n    className?: string;\n    /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n    /**\n     * Entry focus, same rules as ScreenLayout `initialFocus`. Off by default because auth screens lead with provider\n     * buttons; a signup nickname step opts in with `first-input` (2026-10-18 adoption, same as Native).\n     */\n    initialFocus?: ScreenInitialFocus;\n  }>;\n\n/**\n * Two regions: hero + main stay one vertically centred block, the footer sits at\n * the bottom. The measurements come from the resolved descriptor as custom\n * properties so the stylesheet keeps one source of truth with the contract.\n */\nexport const AuthScreenLayout = forwardRef<HTMLElement, AuthScreenLayoutProps>(\n  function AuthScreenLayout(\n    { hero, main, footer, density, hasFooter, pendingLabel, mainCard = false, className, as: Element = \"main\", layoutStyle, initialFocus = initialFocusDefaults.auth, ...props },\n    forwardedRef,\n  ) {\n    const resolved = resolveAuthScreenDescriptor({\n      ...(density === undefined ? {} : { density }),\n      ...(hasFooter === undefined ? {} : { hasFooter }),\n    });\n    const showFooter = resolved.hasFooter && footer !== undefined && footer !== null;\n    const pending = pendingLabel !== undefined;\n    const actionsRef = useRef<HTMLDivElement>(null);\n    const focusedAction = useRef<HTMLElement | null>(null);\n    const wasPending = useRef(pending);\n    useLayoutEffect(() => {\n      // Inert loading content sends keyboard focus to body. Resume at the same\n      // action after failure/cancellation, unless the user moved somewhere else.\n      const target = focusedAction.current;\n      if (wasPending.current && !pending && document.activeElement === document.body && target?.isConnected && actionsRef.current?.contains(target)) {\n        target.focus({ preventScroll: true });\n      }\n      wasPending.current = pending;\n    }, [pending]);\n    if (pending && !pendingLabel.trim()) throw new TypeError(\"AuthScreen pendingLabel must not be empty\");\n    return (\n      <Element\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\"hjm-auth-screen\", className)}\n        data-density={resolved.density}\n        style={{\n          [\"--hjm-auth-screen-max-width\" as string]: `${resolved.maxWidth}px`,\n          [\"--hjm-auth-screen-hero-gap\" as string]: `${resolved.heroGap}px`,\n          [\"--hjm-auth-screen-main-gap\" as string]: `${resolved.mainGap}px`,\n          [\"--hjm-auth-screen-footer-gap\" as string]: `${resolved.footerGap}px`,\n          [\"--hjm-auth-screen-padding-inline\" as string]: `${resolved.paddingInline}px`,\n          [\"--hjm-auth-screen-padding-block\" as string]: `${resolved.paddingBlock}px`,\n          ...props.style,\n          ...layoutStyle,\n        }}\n      >\n        <InitialFocusScope mode={initialFocus}>\n        <div className=\"hjm-auth-screen__block\">\n          <AuthScreenDensityContext.Provider value={resolved.density}><div className=\"hjm-auth-screen__hero\">{hero}</div></AuthScreenDensityContext.Provider>\n          <div className=\"hjm-auth-screen__main\" data-card={mainCard || undefined} aria-busy={pending || undefined}>\n            {/* Keep the action block in flow so the card never collapses; inert also removes keyboard access. */}\n            <div ref={actionsRef} className=\"hjm-auth-screen__actions\" inert={pending} aria-hidden={pending || undefined}\n              onFocusCapture={event => { focusedAction.current = event.target; }}\n              onBlurCapture={event => { if (!pending && !event.currentTarget.contains(event.relatedTarget)) focusedAction.current = null; }}\n              style={pending ? { visibility: \"hidden\" } : undefined}>{main}</div>\n            {pending ? <div className=\"hjm-auth-screen__pending\" role=\"status\" aria-label={pendingLabel}>\n              <span className=\"hjm-auth-provider-button__spinner\" aria-hidden=\"true\" />\n            </div> : null}\n          </div>\n        </div>\n        {showFooter ? <div className=\"hjm-auth-screen__footer\">{footer}</div> : null}\n        </InitialFocusScope>\n      </Element>\n    );\n  },\n);\n\n/** Token weight per variant, following the nearest design profile like `Text` does. */\nfunction useTypeWeight(): (variant: TextVariant) => number | string {\n  const profile = useDesignProfileDefaults();\n  const tokens = profile?.tokens.typography ?? typography;\n  return variant => tokens[variant].fontWeight;\n}\n\nexport type AuthScreenHeroProps = AuthScreenHeroDescriptor &\n  Readonly<{\n    /** Product mark asset. HJM never ships product marks. */\n    mark?: ReactNode;\n  }>;\n\n/**\n * The `hero` slot content: mark, eyebrow, tagline and one description line. The\n * product supplies the strings and mark; the type steps, tones and gaps come from\n * `authScreenRecipe.hero` so a login slogan never borrows the page-heading size.\n */\nexport function AuthScreenHero({ mark, title, eyebrow, description, headingLevel = 1 }: AuthScreenHeroProps) {\n  validateAuthScreenHeroDescriptor({ title, ...(eyebrow === undefined ? {} : { eyebrow }), ...(description === undefined ? {} : { description }), headingLevel });\n  const density = useContext(AuthScreenDensityContext);\n  const variant = resolveAuthScreenDescriptor(density === undefined ? {} : { density }).titleVariant;\n  const weight = useTypeWeight();\n  const recipe = authScreenRecipe.hero;\n  // Fragment: the mark and the copy are direct children of the hero so the\n  // recipe hero gap separates them on both platforms.\n  return (\n    <Fragment>\n      {mark ? <div className=\"hjm-auth-screen__mark\">{mark}</div> : null}\n      <div className=\"hjm-auth-screen__copy\">\n        {eyebrow ? <p className=\"hjm-text hjm-auth-screen__eyebrow\" data-variant={recipe.eyebrow.textVariant} data-font-role=\"ui\" data-tone={recipe.eyebrow.tone}\n          style={{ marginBlockEnd: recipe.eyebrow.gapBelow, fontWeight: weight(recipe.eyebrow.textVariant) }}>{eyebrow}</p> : null}\n        {/* A real heading element: the tagline is the route's first heading. */}\n        {createElement(`h${headingLevel}`, {\n          className: \"hjm-text hjm-auth-screen__title\",\n          \"data-variant\": variant,\n          \"data-font-role\": \"display\",\n          \"data-tone\": recipe.title.tone,\n          // The title step's own weight (500), not Text's regular default outside a profile.\n          style: { fontWeight: weight(variant) },\n        }, title)}\n        {description ? <p className=\"hjm-text hjm-auth-screen__description\" data-variant={recipe.description.textVariant} data-font-role=\"ui\" data-tone={recipe.description.tone}\n          style={{ marginBlockStart: recipe.description.gapAbove, fontWeight: weight(recipe.description.textVariant) }}>{description}</p> : null}\n      </div>\n    </Fragment>\n  );\n}\n\nexport type AuthScreenPolicyLink = AuthScreenPolicyLinkDescriptor &\n  Readonly<{\n    /** Document URL; renders an anchor. */\n    href?: string;\n    /**\n     * Anchor target with `href`, e.g. `_blank` for policy documents that open beside the app (diairy web lost its\n     * new-tab links on adoption, 2026-10-17). `rel` defaults to \"noreferrer noopener\" for `_blank`, as on Link.\n     */\n    target?: HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** In-app handler; renders a button when there is no `href`. */\n    onClick?: () => void;\n  }>;\n\nexport type AuthScreenFooterProps = Readonly<{\n  /** Optional consent notice (LS-04). */\n  notice?: ReactNode;\n  /** Terms and privacy links; at least one is required (LS-04). */\n  links: readonly AuthScreenPolicyLink[];\n  /** Extra product content under the links. */\n  children?: ReactNode;\n}>;\n\n/**\n * The `footer` slot content: consent notice plus dot-separated policy links. The\n * visible gap between two links is `linkGap` + separator + `linkGap`; the 44px\n * touch target is an invisible hit area, not visible padding.\n */\nexport function AuthScreenFooter({ notice, links, children }: AuthScreenFooterProps) {\n  validateAuthScreenPolicyLinks(links);\n  const recipe = authScreenRecipe.footer;\n  const weight = useTypeWeight();\n  const linkStyle = { fontWeight: weight(recipe.link.textVariant) };\n  const hintId = useId();\n  return (\n    <div className=\"hjm-auth-screen__footer-content\" style={{ gap: recipe.noticeGap }}>\n      {notice ? <p className=\"hjm-text\" data-variant={recipe.notice.textVariant} data-font-role=\"ui\" data-tone={recipe.notice.tone} style={{ fontWeight: weight(recipe.notice.textVariant) }}>{notice}</p> : null}\n      <div className=\"hjm-auth-screen__links\" style={{\n        [\"--hjm-auth-screen-link-gap\" as string]: `${recipe.linkGap}px`,\n        [\"--hjm-auth-screen-link-target\" as string]: `${authScreenRecipe.footerMinTouchTarget}px`,\n      } as CSSProperties}>\n        {links.map((link, index) => (\n          <Fragment key={`${index}:${link.label}`}>\n            {index > 0 ? <span className=\"hjm-text hjm-auth-screen__separator\" data-variant={recipe.link.textVariant} data-tone={recipe.notice.tone} aria-hidden=\"true\">{recipe.separator}</span> : null}\n            {link.href !== undefined\n              ? <a className=\"hjm-text hjm-auth-screen__link\" data-variant={recipe.link.textVariant} data-font-role=\"ui\" data-tone={recipe.link.tone} style={linkStyle} href={link.href}\n                  target={link.target} rel={link.rel ?? (link.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n                  aria-describedby={link.accessibilityHint === undefined ? undefined : `${hintId}-${index}`} onClick={link.onClick}>{link.label}</a>\n              : <button type=\"button\" className=\"hjm-text hjm-auth-screen__link\" data-variant={recipe.link.textVariant} data-font-role=\"ui\" data-tone={recipe.link.tone} style={linkStyle}\n                  aria-describedby={link.accessibilityHint === undefined ? undefined : `${hintId}-${index}`} onClick={link.onClick}>{link.label}</button>}\n            {/* Native announces the hint after the label; Web reads the same text as the link's description. */}\n            {link.accessibilityHint === undefined ? null : <span id={`${hintId}-${index}`} className=\"hjm-visually-hidden\">{link.accessibilityHint}</span>}\n          </Fragment>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"auth-screen.js","sourceRoot":"","sources":["../src/auth-screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  authScreenRecipe,\n  resolveAuthScreenDescriptor,\n  validateAuthScreenHeroDescriptor,\n  validateAuthScreenPolicyLinks,\n  type AuthScreenDensity,\n  type AuthScreenDescriptor,\n  type AuthScreenHeroDescriptor,\n  type AuthScreenPolicyLinkDescriptor,\n} from \"@hjmds/design-contracts/components/auth-screen\";\nimport { typography, type TextVariant } from \"@hjmds/design-contracts/foundations\";\nimport { createContext, createElement, forwardRef, Fragment, useContext, useLayoutEffect, useRef, type CSSProperties, type HTMLAttributeAnchorTarget, type HTMLAttributes, type ReactNode, useId } from \"react\";\nimport { initialFocusDefaults, screenHeaderRecipe, screenPatternRecipe, validateScreenExit, type ScreenInitialFocus } from \"@hjmds/design-contracts/screen-patterns\";\nimport { classNames, useDesignProfileDefaults } from \"./internal.js\";\nimport { InitialFocusScope } from \"./internal/initial-focus.js\";\nimport { ScreenExitButton, type ScreenExit } from \"./internal/screen-exit.js\";\nimport { Heading } from \"./heading.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\n// The hero follows the layout density without the product passing it twice.\nconst AuthScreenDensityContext = createContext<AuthScreenDensity | undefined>(undefined);\n// With a header title the route name is the page heading (h1), so the hero tagline steps down to h2 by default.\nconst AuthScreenTitledContext = createContext(false);\n\nexport type AuthScreenLayoutProps = Omit<HTMLAttributes<HTMLElement>, \"children\" | \"title\"> &\n  AuthScreenDescriptor &\n  Readonly<{\n    /** Use section inside a product shell that already owns the main landmark. */\n    as?: \"main\" | \"section\";\n    /**\n     * Route name in the shared screen header band (screenHeaderRecipe, centered like ScreenLayout). Login and signup\n     * routes kept a TopBar above this layout only for the route name + back/close (2026-10-18: utilverse, burntok).\n     */\n    title?: string;\n    /** Leaving the route: the same icon-only back/close as ScreenLayout `exit`, at the header's leading edge. */\n    exit?: ScreenExit;\n    /** Product mark, title and description. The product owns every string here. */\n    hero: ReactNode;\n    /** The primary action block — provider buttons, or a product's own sign-in bundle. */\n    main: ReactNode;\n    /** Product-localized progress label; presence replaces actions with one centred loader. */\n    pendingLabel?: string;\n    /** Let the layout own the action card; omit when the product already supplies a surface. */\n    mainCard?: boolean;\n    /** Consent notice and policy links. Omit with `hasFooter: false`. */\n    footer?: ReactNode;\n    className?: string;\n    /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n    layoutStyle?: HjmCompositionStyleProp;\n    /**\n     * Entry focus, same rules as ScreenLayout `initialFocus`. Off by default because auth screens lead with provider\n     * buttons; a signup nickname step opts in with `first-input` (2026-10-18 adoption, same as Native).\n     */\n    initialFocus?: ScreenInitialFocus;\n  }>;\n\n/**\n * Two regions: hero + main stay one vertically centred block, the footer sits at\n * the bottom. The measurements come from the resolved descriptor as custom\n * properties so the stylesheet keeps one source of truth with the contract.\n */\nexport const AuthScreenLayout = forwardRef<HTMLElement, AuthScreenLayoutProps>(\n  function AuthScreenLayout(\n    { title, exit, hero, main, footer, density, hasFooter, pendingLabel, mainCard = false, className, as: Element = \"main\", layoutStyle, initialFocus = initialFocusDefaults.auth, ...props },\n    forwardedRef,\n  ) {\n    if (title !== undefined && !title.trim()) throw new TypeError(\"AuthScreenLayout title must not be empty\");\n    if (exit) validateScreenExit(exit, false);\n    const hasHeader = title !== undefined || exit !== undefined;\n    const resolved = resolveAuthScreenDescriptor({\n      ...(density === undefined ? {} : { density }),\n      ...(hasFooter === undefined ? {} : { hasFooter }),\n    });\n    const showFooter = resolved.hasFooter && footer !== undefined && footer !== null;\n    const pending = pendingLabel !== undefined;\n    const actionsRef = useRef<HTMLDivElement>(null);\n    const focusedAction = useRef<HTMLElement | null>(null);\n    const wasPending = useRef(pending);\n    useLayoutEffect(() => {\n      // Inert loading content sends keyboard focus to body. Resume at the same\n      // action after failure/cancellation, unless the user moved somewhere else.\n      const target = focusedAction.current;\n      if (wasPending.current && !pending && document.activeElement === document.body && target?.isConnected && actionsRef.current?.contains(target)) {\n        target.focus({ preventScroll: true });\n      }\n      wasPending.current = pending;\n    }, [pending]);\n    if (pending && !pendingLabel.trim()) throw new TypeError(\"AuthScreen pendingLabel must not be empty\");\n    return (\n      <Element\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\"hjm-auth-screen\", className)}\n        data-density={resolved.density}\n        data-header={hasHeader || undefined}\n        style={{\n          [\"--hjm-auth-screen-max-width\" as string]: `${resolved.maxWidth}px`,\n          [\"--hjm-auth-screen-hero-gap\" as string]: `${resolved.heroGap}px`,\n          [\"--hjm-auth-screen-main-gap\" as string]: `${resolved.mainGap}px`,\n          [\"--hjm-auth-screen-footer-gap\" as string]: `${resolved.footerGap}px`,\n          [\"--hjm-auth-screen-padding-inline\" as string]: `${resolved.paddingInline}px`,\n          [\"--hjm-auth-screen-padding-block\" as string]: `${resolved.paddingBlock}px`,\n          ...(hasHeader ? {\n            [\"--hjm-auth-screen-header-padding-inline\" as string]: `${screenPatternRecipe.padding}px`,\n            [\"--hjm-auth-screen-header-padding-block\" as string]: `${screenHeaderRecipe.paddingVertical}px`,\n            [\"--hjm-auth-screen-header-min-height\" as string]: `${screenHeaderRecipe.minHeight}px`,\n          } : {}),\n          ...props.style,\n          ...layoutStyle,\n        }}\n      >\n        {/* The ScreenLayout centered band (same exit, gutter and title step), full-bleed above the padded block. */}\n        {hasHeader ? <header className=\"hjm-auth-screen__header\">\n          <div>{exit ? <ScreenExitButton {...exit} /> : null}</div>\n          <div className=\"hjm-auth-screen__header-title\">{title === undefined ? null : <Heading level={screenHeaderRecipe.centeredTitleLevel} semanticLevel={1}>{title}</Heading>}</div>\n          <div />\n        </header> : null}\n        <InitialFocusScope mode={initialFocus}>\n        <div className=\"hjm-auth-screen__block\">\n          <AuthScreenDensityContext.Provider value={resolved.density}><AuthScreenTitledContext.Provider value={title !== undefined}><div className=\"hjm-auth-screen__hero\">{hero}</div></AuthScreenTitledContext.Provider></AuthScreenDensityContext.Provider>\n          <div className=\"hjm-auth-screen__main\" data-card={mainCard || undefined} aria-busy={pending || undefined}>\n            {/* Keep the action block in flow so the card never collapses; inert also removes keyboard access. */}\n            <div ref={actionsRef} className=\"hjm-auth-screen__actions\" inert={pending} aria-hidden={pending || undefined}\n              onFocusCapture={event => { focusedAction.current = event.target; }}\n              onBlurCapture={event => { if (!pending && !event.currentTarget.contains(event.relatedTarget)) focusedAction.current = null; }}\n              style={pending ? { visibility: \"hidden\" } : undefined}>{main}</div>\n            {pending ? <div className=\"hjm-auth-screen__pending\" role=\"status\" aria-label={pendingLabel}>\n              <span className=\"hjm-auth-provider-button__spinner\" aria-hidden=\"true\" />\n            </div> : null}\n          </div>\n        </div>\n        {showFooter ? <div className=\"hjm-auth-screen__footer\">{footer}</div> : null}\n        </InitialFocusScope>\n      </Element>\n    );\n  },\n);\n\n/** Token weight per variant, following the nearest design profile like `Text` does. */\nfunction useTypeWeight(): (variant: TextVariant) => number | string {\n  const profile = useDesignProfileDefaults();\n  const tokens = profile?.tokens.typography ?? typography;\n  return variant => tokens[variant].fontWeight;\n}\n\nexport type AuthScreenHeroProps = AuthScreenHeroDescriptor &\n  Readonly<{\n    /** Product mark asset. HJM never ships product marks. */\n    mark?: ReactNode;\n  }>;\n\n/**\n * The `hero` slot content: mark, eyebrow, tagline and one description line. The\n * product supplies the strings and mark; the type steps, tones and gaps come from\n * `authScreenRecipe.hero` so a login slogan never borrows the page-heading size.\n */\nexport function AuthScreenHero({ mark, title, eyebrow, description, headingLevel: suppliedHeadingLevel }: AuthScreenHeroProps) {\n  const titled = useContext(AuthScreenTitledContext);\n  const headingLevel = suppliedHeadingLevel ?? (titled ? 2 : 1);\n  validateAuthScreenHeroDescriptor({ title, ...(eyebrow === undefined ? {} : { eyebrow }), ...(description === undefined ? {} : { description }), headingLevel });\n  const density = useContext(AuthScreenDensityContext);\n  const variant = resolveAuthScreenDescriptor(density === undefined ? {} : { density }).titleVariant;\n  const weight = useTypeWeight();\n  const recipe = authScreenRecipe.hero;\n  // Fragment: the mark and the copy are direct children of the hero so the\n  // recipe hero gap separates them on both platforms.\n  return (\n    <Fragment>\n      {mark ? <div className=\"hjm-auth-screen__mark\">{mark}</div> : null}\n      <div className=\"hjm-auth-screen__copy\">\n        {eyebrow ? <p className=\"hjm-text hjm-auth-screen__eyebrow\" data-variant={recipe.eyebrow.textVariant} data-font-role=\"ui\" data-tone={recipe.eyebrow.tone}\n          style={{ marginBlockEnd: recipe.eyebrow.gapBelow, fontWeight: weight(recipe.eyebrow.textVariant) }}>{eyebrow}</p> : null}\n        {/* A real heading element: the tagline is the route's first heading. */}\n        {createElement(`h${headingLevel}`, {\n          className: \"hjm-text hjm-auth-screen__title\",\n          \"data-variant\": variant,\n          \"data-font-role\": \"display\",\n          \"data-tone\": recipe.title.tone,\n          // The title step's own weight (500), not Text's regular default outside a profile.\n          style: { fontWeight: weight(variant) },\n        }, title)}\n        {description ? <p className=\"hjm-text hjm-auth-screen__description\" data-variant={recipe.description.textVariant} data-font-role=\"ui\" data-tone={recipe.description.tone}\n          style={{ marginBlockStart: recipe.description.gapAbove, fontWeight: weight(recipe.description.textVariant) }}>{description}</p> : null}\n      </div>\n    </Fragment>\n  );\n}\n\nexport type AuthScreenPolicyLink = AuthScreenPolicyLinkDescriptor &\n  Readonly<{\n    /** Document URL; renders an anchor. */\n    href?: string;\n    /**\n     * Anchor target with `href`, e.g. `_blank` for policy documents that open beside the app (diairy web lost its\n     * new-tab links on adoption, 2026-10-17). `rel` defaults to \"noreferrer noopener\" for `_blank`, as on Link.\n     */\n    target?: HTMLAttributeAnchorTarget;\n    rel?: string;\n    /** In-app handler; renders a button when there is no `href`. */\n    onClick?: () => void;\n  }>;\n\nexport type AuthScreenFooterProps = Readonly<{\n  /** Optional consent notice (LS-04). */\n  notice?: ReactNode;\n  /** Terms and privacy links; at least one is required (LS-04). */\n  links: readonly AuthScreenPolicyLink[];\n  /** Extra product content under the links. */\n  children?: ReactNode;\n}>;\n\n/**\n * The `footer` slot content: consent notice plus dot-separated policy links. The\n * visible gap between two links is `linkGap` + separator + `linkGap`; the 44px\n * touch target is an invisible hit area, not visible padding.\n */\nexport function AuthScreenFooter({ notice, links, children }: AuthScreenFooterProps) {\n  validateAuthScreenPolicyLinks(links);\n  const recipe = authScreenRecipe.footer;\n  const weight = useTypeWeight();\n  const linkStyle = { fontWeight: weight(recipe.link.textVariant) };\n  const hintId = useId();\n  return (\n    <div className=\"hjm-auth-screen__footer-content\" style={{ gap: recipe.noticeGap }}>\n      {notice ? <p className=\"hjm-text\" data-variant={recipe.notice.textVariant} data-font-role=\"ui\" data-tone={recipe.notice.tone} style={{ fontWeight: weight(recipe.notice.textVariant) }}>{notice}</p> : null}\n      <div className=\"hjm-auth-screen__links\" style={{\n        [\"--hjm-auth-screen-link-gap\" as string]: `${recipe.linkGap}px`,\n        [\"--hjm-auth-screen-link-target\" as string]: `${authScreenRecipe.footerMinTouchTarget}px`,\n      } as CSSProperties}>\n        {links.map((link, index) => (\n          <Fragment key={`${index}:${link.label}`}>\n            {index > 0 ? <span className=\"hjm-text hjm-auth-screen__separator\" data-variant={recipe.link.textVariant} data-tone={recipe.notice.tone} aria-hidden=\"true\">{recipe.separator}</span> : null}\n            {link.href !== undefined\n              ? <a className=\"hjm-text hjm-auth-screen__link\" data-variant={recipe.link.textVariant} data-font-role=\"ui\" data-tone={recipe.link.tone} style={linkStyle} href={link.href}\n                  target={link.target} rel={link.rel ?? (link.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n                  aria-describedby={link.accessibilityHint === undefined ? undefined : `${hintId}-${index}`} onClick={link.onClick}>{link.label}</a>\n              : <button type=\"button\" className=\"hjm-text hjm-auth-screen__link\" data-variant={recipe.link.textVariant} data-font-role=\"ui\" data-tone={recipe.link.tone} style={linkStyle}\n                  aria-describedby={link.accessibilityHint === undefined ? undefined : `${hintId}-${index}`} onClick={link.onClick}>{link.label}</button>}\n            {/* Native announces the hint after the label; Web reads the same text as the link's description. */}\n            {link.accessibilityHint === undefined ? null : <span id={`${hintId}-${index}`} className=\"hjm-visually-hidden\">{link.accessibilityHint}</span>}\n          </Fragment>\n        ))}\n      </div>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/bottom-cta.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from "react";
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from "react";
 import { type ButtonSize, type ButtonTone } from "./actions.js";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
 export type BottomCTAAction = Readonly<{
@@ -10,6 +10,11 @@ export type BottomCTAAction = Readonly<{
     loadingLabel?: string;
     size?: ButtonSize;
     tone?: ButtonTone;
+    /**
+     * Ref to this action's button. The component `ref` names the bar; a dialog or overlay opened from the primary
+     * action needs the button itself to return focus to on close (2026-10-18 Utilverse display board).
+     */
+    buttonRef?: Ref<HTMLButtonElement>;
 }>;
 export type BottomCTAProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & Readonly<{
     primaryAction: BottomCTAAction;

package/dist/bottom-cta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-cta.d.ts","sourceRoot":"","sources":["../src/bottom-cta.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8C,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChI,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC;IACvF,aAAa,EAAE,eAAe,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAeH,wGAAwG;AACxG,eAAO,MAAM,SAAS;mBAzBL,eAAe;sBACZ,eAAe,GAAG,SAAS;kBAC/B,MAAM;yBACC,MAAM;qBACV,MAAM;IACvB,4FAA4F;eACjF,MAAM,GAAG,QAAQ;IAC5B,gGAAgG;kBAClF,uBAAuB;mDA2CrC,CAAC"}
+{"version":3,"file":"bottom-cta.d.ts","sourceRoot":"","sources":["../src/bottom-cta.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8C,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAC1I,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAIxE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC;IACvF,aAAa,EAAE,eAAe,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC7B,gGAAgG;IAChG,WAAW,CAAC,EAAE,uBAAuB,CAAC;CACvC,CAAC,CAAC;AAeH,wGAAwG;AACxG,eAAO,MAAM,SAAS;mBAzBL,eAAe;sBACZ,eAAe,GAAG,SAAS;kBAC/B,MAAM;yBACC,MAAM;qBACV,MAAM;IACvB,4FAA4F;eACjF,MAAM,GAAG,QAAQ;IAC5B,gGAAgG;kBAClF,uBAAuB;mDA2CrC,CAAC"}

package/dist/bottom-cta.js

@@ -9,7 +9,7 @@ import { ScreenFooterContext } from "./internal/screen-footer.js";
 function Action({ action, tone }) {
     if (!action.label.trim())
         throw new TypeError("BottomCTA action label must not be empty");
-    return _jsx(Button, { onClick: action.onClick, tone: action.tone ?? tone, size: action.size ?? "medium", disabled: action.disabled, loading: action.loading ?? false, "aria-label": action.loading ? action.loadingLabel ?? action.accessibilityLabel ?? action.label : action.accessibilityLabel, children: action.label });
+    return _jsx(Button, { ref: action.buttonRef, onClick: action.onClick, tone: action.tone ?? tone, size: action.size ?? "medium", disabled: action.disabled, loading: action.loading ?? false, "aria-label": action.loading ? action.loadingLabel ?? action.accessibilityLabel ?? action.label : action.accessibilityLabel, children: action.label });
 }
 function isAction(value) {
     return typeof value === "object" && value !== null && "label" in value && "onClick" in value;

package/dist/bottom-cta.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-cta.js","sourceRoot":"","sources":["../src/bottom-cta.tsx"],"names":[],"mappings":"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","sourcesContent":["import { bottomCtaRecipe } from \"@hjmds/design-contracts/recipes\";\nimport { isLargeTextScale } from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { forwardRef, useContext, type CSSProperties, type HTMLAttributes, type MouseEventHandler, type ReactNode } from \"react\";\nimport { Button, type ButtonSize, type ButtonTone } from \"./actions.js\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport { ScreenFooterContext } from \"./internal/screen-footer.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type BottomCTAAction = Readonly<{\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  accessibilityLabel?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  loadingLabel?: string;\n  size?: ButtonSize;\n  tone?: ButtonTone;\n}>;\n\nexport type BottomCTAProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & Readonly<{\n  primaryAction: BottomCTAAction;\n  secondaryAction?: BottomCTAAction | ReactNode;\n  description?: string;\n  accessibilityLabel?: string;\n  safeAreaBottom?: number;\n  /** Sticky remains in document flow; fixed overlays would need a measured content spacer. */\n  position?: \"flow\" | \"sticky\";\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nfunction Action({ action, tone }: { action: BottomCTAAction; tone: ButtonTone }) {\n  if (!action.label.trim()) throw new TypeError(\"BottomCTA action label must not be empty\");\n  return <Button onClick={action.onClick} tone={action.tone ?? tone} size={action.size ?? \"medium\"}\n    disabled={action.disabled} loading={action.loading ?? false}\n    aria-label={action.loading ? action.loadingLabel ?? action.accessibilityLabel ?? action.label : action.accessibilityLabel}>\n    {action.label}\n  </Button>;\n}\n\nfunction isAction(value: BottomCTAAction | ReactNode): value is BottomCTAAction {\n  return typeof value === \"object\" && value !== null && \"label\" in value && \"onClick\" in value;\n}\n\n/** One primary action with optional supporting copy and a secondary action, matching Native's slots. */\nexport const BottomCTA = forwardRef<HTMLDivElement, BottomCTAProps>(function BottomCTA({\n  primaryAction, secondaryAction, description, accessibilityLabel, safeAreaBottom = 0,\n  position = \"flow\", className, style, layoutStyle, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  const inScreenFooter = useContext(ScreenFooterContext);\n  if (!Number.isFinite(safeAreaBottom) || safeAreaBottom < 0) throw new RangeError(\"BottomCTA safeAreaBottom must be non-negative\");\n  return <div {...props} ref={ref} role=\"group\" aria-label={accessibilityLabel}\n    className={classNames(\"hjm-bottom-cta\", className)} data-position={position}\n    data-placement={inScreenFooter ? \"screen-footer\" : undefined}\n    data-large-text={isLargeTextScale(theme?.environment.textScale ?? 1)}\n    style={{\n      \"--hjm-bottom-cta-min-height\": `${bottomCtaRecipe.minHeight}px`,\n      \"--hjm-bottom-cta-padding-inline\": `${bottomCtaRecipe.paddingHorizontal}px`,\n      \"--hjm-bottom-cta-padding-top\": `${bottomCtaRecipe.paddingTop}px`,\n      \"--hjm-bottom-cta-padding-bottom\": `${bottomCtaRecipe.paddingBottom}px`,\n      \"--hjm-bottom-cta-gap\": `${bottomCtaRecipe.gap}px`,\n      \"--hjm-bottom-cta-content-max-width\": `${bottomCtaRecipe.contentMaxWidth}px`,\n      \"--hjm-bottom-cta-safe-area\": `${safeAreaBottom}px`, ...style, ...layoutStyle,\n    } as CSSProperties}>\n    {description ? <p className=\"hjm-bottom-cta__description\">{description}</p> : null}\n    <div className=\"hjm-bottom-cta__actions\">\n      {secondaryAction == null ? null : <div className=\"hjm-bottom-cta__secondary\">{isAction(secondaryAction) ? <Action action={secondaryAction} tone=\"secondary\" /> : secondaryAction}</div>}\n      <div className=\"hjm-bottom-cta__primary\"><Action action={primaryAction} tone=\"primary\" /></div>\n    </div>\n  </div>;\n});\n"]}
+{"version":3,"file":"bottom-cta.js","sourceRoot":"","sources":["../src/bottom-cta.tsx"],"names":[],"mappings":"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","sourcesContent":["import { bottomCtaRecipe } from \"@hjmds/design-contracts/recipes\";\nimport { isLargeTextScale } from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { forwardRef, useContext, type CSSProperties, type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from \"react\";\nimport { Button, type ButtonSize, type ButtonTone } from \"./actions.js\";\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport { ScreenFooterContext } from \"./internal/screen-footer.js\";\nimport type { HjmCompositionStyleProp } from \"./composition-style.js\";\n\nexport type BottomCTAAction = Readonly<{\n  label: string;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  accessibilityLabel?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  loadingLabel?: string;\n  size?: ButtonSize;\n  tone?: ButtonTone;\n  /**\n   * Ref to this action's button. The component `ref` names the bar; a dialog or overlay opened from the primary\n   * action needs the button itself to return focus to on close (2026-10-18 Utilverse display board).\n   */\n  buttonRef?: Ref<HTMLButtonElement>;\n}>;\n\nexport type BottomCTAProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & Readonly<{\n  primaryAction: BottomCTAAction;\n  secondaryAction?: BottomCTAAction | ReactNode;\n  description?: string;\n  accessibilityLabel?: string;\n  safeAreaBottom?: number;\n  /** Sticky remains in document flow; fixed overlays would need a measured content spacer. */\n  position?: \"flow\" | \"sticky\";\n  /** Canonical layout-only placement on the root element. Controlled visual keys are excluded. */\n  layoutStyle?: HjmCompositionStyleProp;\n}>;\n\nfunction Action({ action, tone }: { action: BottomCTAAction; tone: ButtonTone }) {\n  if (!action.label.trim()) throw new TypeError(\"BottomCTA action label must not be empty\");\n  return <Button ref={action.buttonRef} onClick={action.onClick} tone={action.tone ?? tone} size={action.size ?? \"medium\"}\n    disabled={action.disabled} loading={action.loading ?? false}\n    aria-label={action.loading ? action.loadingLabel ?? action.accessibilityLabel ?? action.label : action.accessibilityLabel}>\n    {action.label}\n  </Button>;\n}\n\nfunction isAction(value: BottomCTAAction | ReactNode): value is BottomCTAAction {\n  return typeof value === \"object\" && value !== null && \"label\" in value && \"onClick\" in value;\n}\n\n/** One primary action with optional supporting copy and a secondary action, matching Native's slots. */\nexport const BottomCTA = forwardRef<HTMLDivElement, BottomCTAProps>(function BottomCTA({\n  primaryAction, secondaryAction, description, accessibilityLabel, safeAreaBottom = 0,\n  position = \"flow\", className, style, layoutStyle, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  const inScreenFooter = useContext(ScreenFooterContext);\n  if (!Number.isFinite(safeAreaBottom) || safeAreaBottom < 0) throw new RangeError(\"BottomCTA safeAreaBottom must be non-negative\");\n  return <div {...props} ref={ref} role=\"group\" aria-label={accessibilityLabel}\n    className={classNames(\"hjm-bottom-cta\", className)} data-position={position}\n    data-placement={inScreenFooter ? \"screen-footer\" : undefined}\n    data-large-text={isLargeTextScale(theme?.environment.textScale ?? 1)}\n    style={{\n      \"--hjm-bottom-cta-min-height\": `${bottomCtaRecipe.minHeight}px`,\n      \"--hjm-bottom-cta-padding-inline\": `${bottomCtaRecipe.paddingHorizontal}px`,\n      \"--hjm-bottom-cta-padding-top\": `${bottomCtaRecipe.paddingTop}px`,\n      \"--hjm-bottom-cta-padding-bottom\": `${bottomCtaRecipe.paddingBottom}px`,\n      \"--hjm-bottom-cta-gap\": `${bottomCtaRecipe.gap}px`,\n      \"--hjm-bottom-cta-content-max-width\": `${bottomCtaRecipe.contentMaxWidth}px`,\n      \"--hjm-bottom-cta-safe-area\": `${safeAreaBottom}px`, ...style, ...layoutStyle,\n    } as CSSProperties}>\n    {description ? <p className=\"hjm-bottom-cta__description\">{description}</p> : null}\n    <div className=\"hjm-bottom-cta__actions\">\n      {secondaryAction == null ? null : <div className=\"hjm-bottom-cta__secondary\">{isAction(secondaryAction) ? <Action action={secondaryAction} tone=\"secondary\" /> : secondaryAction}</div>}\n      <div className=\"hjm-bottom-cta__primary\"><Action action={primaryAction} tone=\"primary\" /></div>\n    </div>\n  </div>;\n});\n"]}

package/dist/bottom-navigation.d.ts

@@ -1,6 +1,16 @@
 import { type BottomNavigationActivation, type BottomNavigationConfiguration, type BottomNavigationDescriptor, type ResolvedBottomNavigationItemDescriptor } from "@hjmds/design-contracts/components/bottom-navigation";
 import { type AnchorHTMLAttributes, type HTMLAttributes, type MouseEvent, type ReactElement, type ReactNode, type RefAttributes } from "react";
 import type { HjmCompositionStyleProp } from "./composition-style.js";
+export type BottomNavigationInsetProviderProps = Readonly<{
+    children: ReactNode;
+}>;
+/** Wrap the app shell that holds both the screens and the BottomNavigation. */
+export declare function BottomNavigationInsetProvider({ children }: BottomNavigationInsetProviderProps): import("react").JSX.Element;
+/**
+ * Bottom height covered by the BottomNavigation inside the nearest provider; 0 outside one. For layouts that are not
+ * a ScreenLayout: inside one the shell already pads by it, so adding it again doubles the space.
+ */
+export declare function useBottomNavigationInset(): number;
 export type BottomNavigationIconRenderProps<Key extends string = string, IconName extends string = string> = Readonly<{
     item: ResolvedBottomNavigationItemDescriptor<Key, IconName>;
     name: IconName;

package/dist/bottom-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-navigation.d.ts","sourceRoot":"","sources":["../src/bottom-navigation.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"bottom-navigation.d.ts","sourceRoot":"","sources":["../src/bottom-navigation.tsx"],"names":[],"mappings":"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"}

package/dist/bottom-navigation.js

@@ -1,10 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { resolveBottomNavigationActivation, resolveBottomNavigationConfiguration, resolveBottomNavigationDescriptor, } from "@hjmds/design-contracts/components/bottom-navigation";
+import { resolveBottomNavigationActivation, resolveBottomNavigationConfiguration, resolveBottomNavigationDescriptor, validateBottomNavigationProminence, } from "@hjmds/design-contracts/components/bottom-navigation";
 import { bottomNavigationRecipe, iconRecipe, } from "@hjmds/design-contracts/recipes";
-import { forwardRef, useEffect, useState, } from "react";
-import { classNames } from "./internal.js";
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { assignRef, classNames } from "./internal.js";
 import { useOptionalHjmTheme } from "./provider.js";
 const virtualKeyboardMinimumOcclusion = 120;
+/**
+ * Height of the viewport bottom covered by the fixed bar (safe area and a raised center circle included); 0 when
+ * there is no bar or it is hidden for the keyboard. The provider also exposes it as `--hjm-bottom-navigation-inset`,
+ * which ScreenLayout's last region adds to its bottom padding, so products stop hand-keeping a bottom spacer
+ * (2026-10-18; Native shares the same API for its `placement="overlay"` bar).
+ */
+const BottomNavigationInsetContext = createContext(0);
+const BottomNavigationInsetReporterContext = createContext(null);
+/** Wrap the app shell that holds both the screens and the BottomNavigation. */
+export function BottomNavigationInsetProvider({ children }) {
+    const [inset, setInset] = useState(0);
+    const report = useMemo(() => (height) => {
+        const next = Number.isFinite(height) && height > 0 ? height : 0;
+        setInset(current => current === next ? current : next);
+    }, []);
+    return (_jsx(BottomNavigationInsetReporterContext.Provider, { value: report, children: _jsx(BottomNavigationInsetContext.Provider, { value: inset, children: _jsx("div", { style: { display: "contents", "--hjm-bottom-navigation-inset": `${inset}px` }, children: children }) }) }));
+}
+/**
+ * Bottom height covered by the BottomNavigation inside the nearest provider; 0 outside one. For layouts that are not
+ * a ScreenLayout: inside one the shell already pads by it, so adding it again doubles the space.
+ */
+export function useBottomNavigationInset() {
+    return useContext(BottomNavigationInsetContext);
+}
 export function isUnmodifiedPrimaryBottomNavigationClick(event) {
     return (!event.defaultPrevented &&
         event.button === 0 &&
@@ -64,14 +88,52 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
         ...configuration,
         ...(direction === undefined ? {} : { direction }),
     }, resolved.items.length);
+    validateBottomNavigationProminence(resolved.items, presentation);
     const hidden = useKeyboardHidden(presentation.keyboardBehavior);
     const density = bottomNavigationRecipe.density[presentation.density];
     const presentationRecipe = bottomNavigationRecipe.presentations[presentation.presentation];
     const centerGap = bottomNavigationRecipe.distributions[presentation.distribution].centerGap;
-    const iconSize = iconRecipe.sizes[density.icon];
+    const iconSize = presentation.iconSize === "standard"
+        ? iconRecipe.sizes[density.icon]
+        : bottomNavigationRecipe.iconSizes[presentation.iconSize];
+    // `shape` reframes the floating surface (radius + inner padding); `standard` keeps the presentation recipe.
+    const shapeRecipe = presentation.shape === "standard"
+        ? null
+        : bottomNavigationRecipe.shapes[presentation.shape];
+    const liftRecipe = bottomNavigationRecipe.icon.liftEmphasis;
+    const prominentRecipe = bottomNavigationRecipe.prominentDestination;
+    // Lifting by (diameter - indicator height) keeps the prominent label on the other labels' line; an app-icon
+    // slot taller than the indicator minimum raises that height.
+    const prominentLift = prominentRecipe.diameter - Math.max(bottomNavigationRecipe.indicator.minHeight, iconSize);
+    // The part of the circle above the nav box still covers content, so the reported inset includes it.
+    const prominentOverflow = resolved.items.some((item) => item.prominent)
+        ? Math.max(0, prominentLift - density.padding - presentationRecipe.outerPaddingTop)
+        : 0;
+    const navRef = useRef(null);
+    const reportInset = useContext(BottomNavigationInsetReporterContext);
+    useEffect(() => {
+        const nav = navRef.current;
+        if (!reportInset)
+            return;
+        if (hidden || !nav) {
+            reportInset(0);
+            return;
+        }
+        const update = () => reportInset(nav.getBoundingClientRect().height + prominentOverflow);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(nav);
+        return () => {
+            observer.disconnect();
+            reportInset(0);
+        };
+    }, [reportInset, hidden, prominentOverflow]);
     if (hidden)
         return null;
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": resolved.accessibilityLabel, className: classNames("hjm-bottom-navigation", className), "data-expanded-labels": (theme?.environment.textScale ?? 1) >= 1.5 || resolved.items.length > 4 ? "true" : "false", "data-density": presentation.density, "data-distribution": presentation.distribution, "data-keyboard-behavior": presentation.keyboardBehavior, "data-labels": presentation.labels, "data-selection": presentation.selection, "data-surface": presentation.surface, "data-presentation": presentation.presentation, dir: presentation.direction, style: {
+    return (_jsx("nav", { ...props, ref: (node) => {
+            navRef.current = node;
+            assignRef(ref, node);
+        }, "aria-label": resolved.accessibilityLabel, className: classNames("hjm-bottom-navigation", className), "data-expanded-labels": (theme?.environment.textScale ?? 1) >= 1.5 || resolved.items.length > 4 ? "true" : "false", "data-density": presentation.density, "data-distribution": presentation.distribution, "data-keyboard-behavior": presentation.keyboardBehavior, "data-labels": presentation.labels, "data-selection": presentation.selection, "data-surface": presentation.surface, "data-presentation": presentation.presentation, "data-shape": presentation.shape, "data-icon-emphasis": presentation.iconEmphasis, dir: presentation.direction, style: {
             "--hjm-bottom-navigation-center-gap": `${centerGap}px`,
             "--hjm-bottom-navigation-columns": resolved.items.length,
             "--hjm-bottom-navigation-half-columns": resolved.items.length / 2,
@@ -87,6 +149,16 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
                 : "none",
             "--hjm-bottom-navigation-outer-inline": `${presentationRecipe.outerPaddingHorizontal}px`,
             "--hjm-bottom-navigation-outer-top": `${presentationRecipe.outerPaddingTop}px`,
+            "--hjm-bottom-navigation-prominent-diameter": `${prominentRecipe.diameter}px`,
+            "--hjm-bottom-navigation-prominent-lift": `${prominentLift}px`,
+            ...(shapeRecipe ? {
+                "--hjm-bottom-navigation-shape-radius": `var(--hjm-radius-${shapeRecipe.radius})`,
+                "--hjm-bottom-navigation-shape-padding": `${shapeRecipe.surfacePadding}px`,
+            } : {}),
+            ...(presentation.iconEmphasis === "lift" ? {
+                "--hjm-bottom-navigation-lift-offset": `${liftRecipe.translateY}px`,
+                "--hjm-bottom-navigation-lift-idle-opacity": liftRecipe.idleOpacity,
+            } : {}),
             ...style,
             ...layoutStyle,
         }, children: _jsxs("div", { className: "hjm-bottom-navigation__surface", children: [_jsx("ul", { className: "hjm-bottom-navigation__list", children: resolved.items.map((item, index) => {
@@ -96,7 +168,7 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
                                             name: item.icon.name,
                                             selected,
                                             color: "currentColor",
-                                            size: iconSize,
+                                            size: item.prominent ? iconRecipe.sizes[prominentRecipe.icon] : iconSize,
                                             strokeWidth: selected
                                                 ? bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.selected
                                                 : bottomNavigationRecipe.icon.selectedEmphasis.strokeWidth.idle,
@@ -108,7 +180,7 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
                             gridColumn: getBottomNavigationGridColumn(index, resolved.items.length, presentation.distribution),
                         };
                         if (item.disabled) {
-                            return (_jsx("li", { style: itemStyle, "data-selected": "false", children: _jsx("span", { "aria-disabled": "true", "aria-label": item.resolvedAccessibilityLabel, className: "hjm-bottom-navigation__item", "data-state": "disabled", role: "link", children: content }) }, item.id));
+                            return (_jsx("li", { style: itemStyle, "data-selected": "false", "data-prominent": item.prominent || undefined, children: _jsx("span", { "aria-disabled": "true", "aria-label": item.resolvedAccessibilityLabel, className: "hjm-bottom-navigation__item", "data-state": "disabled", role: "link", children: content }) }, item.id));
                         }
                         const href = getHref(item);
                         if (!href.trim()) {
@@ -129,7 +201,7 @@ function BottomNavigationInner({ descriptor, configuration = {}, getHref, render
                             },
                             children: content,
                         };
-                        return (_jsx("li", { style: itemStyle, "data-selected": selected, children: renderLink ? renderLink(linkProps) : _jsx("a", { ...linkProps }) }, item.id));
+                        return (_jsx("li", { style: itemStyle, "data-selected": selected, "data-prominent": item.prominent || undefined, children: renderLink ? renderLink(linkProps) : _jsx("a", { ...linkProps }) }, item.id));
                     }) }), primaryAction ? (_jsx("div", { className: "hjm-bottom-navigation__primary-action", children: primaryAction })) : null] }) }));
 }
 export const BottomNavigation = forwardRef(BottomNavigationInner);